PHZ.fi Kaupunginosat-palvelun Joomla! hallinnoijan opas
Table of Contents 1 Johdanto...4 2 Kaupunginosat-palvelun Joomla! Moduulit...4 2.1 Kumppanit (mod_partners)...5 2.1.1 Ohjeet logotiedostoille...6 2.1.2 Kumppanit-moduulin asetukset...6 2.1.3 Logojen lisääminen, poistaminen ja järjestäminen...7 2.2 Kuvalliset Linkit (mod_articles_image_box)...10 2.2.1 Kuvallisten linkkien asetukset...10 2.3 Artikkelin korostusosio (mod_highlight)...11 2.2.1 Artikkelin korostusosion asetukset...11 2.3 Linkkilaatikot (mod_linkbox)...12 2.4 Twitter (mod_twitter)...13 2.4.1 Twitter asetukset...13 2.5 Facebook_post (mod_facebook_post)...13 2.5.1 Facebook asetukset...14 2.6 Valikko (mod_menu)...14 2.6.1 Valikko asetukset...14 2.6.1.1 Thintopmenu...15 2.6.1.2 fattopmenu...15 2.6.1.3 articleblogfootermenu...15 2.6.1.4 eventsfootermenu...15 2.7 Karuselli (mod_carousel)...16 2.7.1 Karuselli asetukset...16 2.8 Logo (mod_logo)...16 2.9 Sosiaalimedia-linkit (mod_socialmedialinks)...17 2.10 Nosto moduuli (mod_pickup)...17 3. Sivupohjat ja asemat...18 3.1 Tapahtumasivupohja (helka_events)...18 3.2 Blogisivu (helka_blogs)...19 3.3 Etusivu (helka_new_fp)...20 4 Joomla käyttö...21 4.1 Uusien sivujen luonti...21 4.1.1 Uuden sivun luonti vaiheittain...21 4.1.1.1 Luo uusi valikkonimike haluttavaan valikkoon...21 4.1.1.2 Valitse valikon nimikkeen tyyppi...22 4.1.1.3 Valitse valikon sivupohjan tyyli...23 4.1.1.4 Valitse valikon asetukset...23 4.1.2 Toiseen sivuun viittaaminen...24 4.1.3 Monikielisyys...25
MUUTOSHISTORIA Tekijät Päivämäärä Versio Julius Räihä, Mathias Keus Sampo Yrjänäinen 13.06.2014 1.0
1 Johdanto Tämä ohje kertoo uusien Helka sivujen käytön uusien ominaisuuksien, kuten moduulien ja sivupohjien kannalta. Ohjeiden kanssa suositellaan käytettävän ohjekuvia, joita voi käyttää esimerkkinä tyylikkäiden sivujen rakentamisessa. 2 Kaupunginosat-palvelun Joomla! Moduulit Uusien helka sivujen mukana on tullut useita uusia moduuleita, joilla sivua voidaan muokata tarpeisiin sopivaksi. Nämä moduulit ovat usein pieniä tapoja esittää eri asioita, kuten korostaa tiettyä artikkelia tai näyttää sosiaalisen median päivityksiä. Moduulit luodaan Joomlan ylläpidossa moduulien hallinnassa painamalla lisää uusi moduuli. Moduulin tyyppi valitaan (esitellään alla) ja asetukset asetetaan. Apuna voidaan hyödyntää asetusten kuvauksia, jotka saadaan esiin viemällä hiiri tekstin päälle. Huomioitavia yleisiä asetuksia ovat muunmuassa asema ja valikon määrittäminen Asema Asema kertoo MISSÄ moduuli on. Valittaessa asema moduuli oletuksena näkyy jokaisella sivulla, missä kyseinen asema löytyy. Asemat vaihtelevat käytettävästä sivupohjasta joista ohjeet löytyvät osiosta 3.
Valikon määrittäminen Valikon määrittäminen määrittelee MILLÄ SIVUILLA kyseinen moduuli näkyy. Oletuksena valittaessa asema, moduuli näkyy jokaisella sivulla, missä kyseinen asema löytyy. Haluttaessa rajottaa tätä käytetään Valikon määrittämistä, missä moduulin voidaan määritellä olevan esimerkiksi vain valituilla tai kaikilla paitsi valituilla valikoilla. Valikon määrittäminen on tärkeätä sivuvaikutusten neutralisoimiseksi. 2.1 Kumppanit (mod_partners) Kumppanit-moduulin tarkoitus on listata eri yhteistyökumppaneiden logot vieritysten. Alla olevassa kuvassa on punaisella rengastettuna esimerkki kumppanit-moduulin tulostuksen ulkoasusta.
Logot listataan valkoiselle taustalle ja vaakatasoon keskitettynä. Mikäli logot eivät mahdu yhdelle riville, niin logot sijoitetaan tarvittavalle määrälle rivejä allekkain. Logojen järjestys määräytyy logotiedostojen nimen mukaan aakkosjärjestyksessä. 2.1.1 Ohjeet logotiedostoille Logo on pienoiskuva, joka esittää toimijan tunnuksen. Logot sijoitetaan valkoiselle taustalle, joten logotiedoston tulee sisältää logo valkoisella tai läpinäkyvällä taustalla. Logojen kokoa ei skaalata moduulin toimesta, joten logojen tulee olla suunnilleen samankokoisia. Hyvä yleinen sääntö pienen logon korkeudelle on noin sata pikseliä. 2.1.2 Kumppanit-moduulin asetukset Kumppanit-moduuli sisältää kaksi konfigurointiasetusta, katso kuva alla.
Logokansio (logo folder) on Mediatiedosojen hallinta komponentin kuvahakemiston alihakemisto, joka sisältää näytettävät logot. Mikäli tarkoituksesi on käyttäää kumppanit-moduulia vain yhdellä logojoukolla, voit huolettaa jättää tämän asetuksen oletusarvoonsa partners. Otsikko (title) on teksti, joka näytetään toimijoiden logojen yläpuolella vaakatasoon keskitettynä. 2.1.3 Logojen lisääminen, poistaminen ja järjestäminen Logoja lisätään ja poistetaan Joomlan oman Mediatiedostojen halinta komponentin avulla. Alla olevassa kuvassa näytetään, mistä löydät Mediatiedostojen hallinnan Joomlan ylläpitopaneelin aloitusnäkymässä. Ennen kun olet lisäämässä ensimmäistä logoa tulee sinun huolehtia, että kumppanit-moduulin asetuksissa määräämäsi alihakemisto logotiedostoille on olemassa Mediatiedostojen halinnassa (alla olevassa kuvassa punainen rengas). Mikäli hakemistoa ei löydy voit luoda sen sinisellä regastetusta kentästä.
Kun haluat lisätä uuden logon valitse ensin logohakemisto vasemman puolen Kansiot listauksesta (alla olevan kuvan sininen rengas). Tällöin näet oikealla puolella Tiedostot listauksessa jo kansion sisältämät tiedostot (kuvassa keltainen rengas). Uuden tiedoston voit lisätä vihreällä rengastetusta painikkeesta. Vanhan tiedoston voit poistaa punaisen renkaan sisällä olevasta punaisesta ruksista.
Logot järjestyvät lopullisessa ulkoasussa logotiedostojen nimen mukaisesssa aakkosjärjestyksessä. Mikäli on tarve järjestää toimijat esimerkiksi heidän sponsoriosuutensa suuruuden mukaan, niin voit nimetä saamasi logotiedostot ennen palvelimelle lähettämistä esimerkiksi a_helsinki.jpg, b_helka.jpg ja c_reittiopas.jpg. Tällöin toimijat näkyvät järjestyksessä: Helsingin kaupunki, Helka ja Reittiopas. Mikäli sinulle nyt syntyy tarve lisätä uusi toimija näin järjestetyn joukon tiettyyn väliin voit käyttää seuraavaa menettelyä. Otetaan esimerkiksi tilanne, jossa halutaan lisätä Helmet logo toimijoiden Helsingin kaupunki ja Helka väliin. Tämä onnistuu esimerkiksi antamalla Helmet logotiedostolle nimi aa_helmet.jpg.
2.2 Kuvalliset Linkit (mod_articles_image_box) Kuvalliset linkit ovat tapahtumasivupohjan ruudukkoon tarkoitettuja laatikoita. Laatikot sisältävät alleviivatun otsikon ja linkin nappulan näköisen näköisenä. 2.2.1 Kuvallisten linkkien asetukset
Kuvalliset linkit sisältävät perusasetuset, kuten aseman ja tilan lisäksi muutaman erikoisasetuksen. Nämä asetukset löytyvät moodulin hallinnassa näytön oikealla. Asetukset sisältävät muunmuassa laatikon sisällön (teksti, kuva ja linkki), sekä niiden muokkaamisen, kuten kuvan tummennuksen ja tekstien värit tekstin lukemisen helpottamiseksi. 2.3 Artikkelin korostusosio (mod_highlight) Artikkelin korostusosio on tapa tuoda esiin jokin artikkeli. Artikkeli voi olla esimerkiksi info tai muu erityisartikkeli 2.2.1 Artikkelin korostusosion asetukset Artikkelin korostusosiolla on muutama asetus, jotka löytyvät moodulin hallinnasta. Asetuksena ovat artikkelin tunnus, tekstin väri ja taustakuva. Artikkelin tunnus on esitettävän artikkelin tunnus. Tämän tunnuksen löytää muunmuassa artikkelin hallinnasta ja artikkelin URL osoitteesta. Tunnukset yleensä koostuvat 4 numerosta. Tekstin väri kertoo käytetyn värin artikkelissa. Väri vaikuttaa kaikkeen tekstiin osassa.
Taustakuva on käytettävä taustakuva. Mikäli kuvaa ei ole, artikkelin ensimmäistä kuvaa käytetään. Kuva venytetään koko alueen mitalle, joten kuvan suhteen tulee olla laatikkoa mukaileva mahdollisimman tarkan kuvan saamiseksi. Kuvassa on hyvä myös ottaa huomioon tekstin näkyvyys. 2.3 Linkkilaatikot (mod_linkbox) Linkkilaatikot tapahtumasivulla käytettäväksi Tapahtumat ja Festivaalit napistä näytettävässä hiddenevents alueessa. Linkkilaatikon asetuksissa voi valita otsikon, linkin, jonne linkki osoittaa, sekä värit taustalle ja tekstille
2.4 Twitter (mod_twitter) Twitter moduuli esittää valitulta twitter käyttäjältä uusimipia tweettejä, sekä luo linkkejä kyseiseen käyttäjään. Moduuli vaatii toimiakseen kaikki parametrit, jotka ovat Access Token, Access Token Secret, Consumer Key, Consumer Key Secret, sekä Käyttäjän. 2.4.1 Twitter asetukset Vaadittavat Token ja Key arvot saadaan luomalla uusi twitter app osoitteessa http://dev.twitter.com/docs/auth/tokens-devtwittercom. Ohjeita ja vaiheita seuraten, tarvittavat avaimet saadaan suoraan sivulta. 2.5 Facebook_post (mod_facebook_post) Facebook post moduuli esittää valitulta käyttäjältä uusimmat päivitykset, sekä luo linkit kyseiseen käyttäjään ja mahdollistaa päivityksestä tykkäämisen.
2.5.1 Facebook asetukset Perusasetuksissa ovat tarvittavat Access Token ja Facebook tunnus. Access Tokenin voi generoida luomalla uusi facebook appi osoitteessa https://developers.facebook.com/. Ohjeita seuraten token on mahdollista saada Facebook developer menun tools > access token:n alta. Facebook tunnus on facebook käyttäjän tai ryhmän tunnus, jonka päivityksiä halutaan näyttää. Edistyineissä asetuksissa on mahdollista valita näkymä oletuksen (ks. Yllä vasemmalla) ja small (ks. Yllä oikealla) välillä. Moduuli tarjoaa myös mahdollisuuden piilottaa tai näyttää tykkää nappula moduulin oikeassa yläkulmassa. 2.6 Valikko (mod_menu) Valikko on joomlan alkuperäismoduuli, joka on artovan tarpeisiin muokattu, mahdollistaen uusien näkymien käytön. Valikko moduuli näyttää luodun valikon sivulla. Katso tarvittaessa Joomlan oppaat valikkojen luontia varten. 2.6.1 Valikko asetukset Valikko on rajoitettu horisontaalisen tilan mukaan. Käyttäjän vastuulla on valikoiden järkevä käyttö ja testaaminen. Valikon asetuksissa vain perusasetukset ovat mukautettu artovan tarpeissiin. Nämä asetukset ovat Valitse valikko, Vaihtoehtoinen näkymä, Taustaväri, Tekstin väri, Logo ja Logon leveys. Vaihtoehtoisessa näkymässä voidaan valita 4 eri valinnan väliltä. Nämä valinnat ovat thintopmenu, fattopmenu, eventsfootermenu ja articleblogfootermenu,
2.6.1.1 Thintopmenu Thintopmenu on kapea menu käytettäväksi etu-, artikkeli- ja blogisivulla. Menu ei sisällä logoa, eikä logon määrittely ei aiheuta muutosta menun ulkoasuun. Värivaihtoehdot ovat tosin käytettävissä. 2.6.1.2 fattopmenu Fattopmenu on tapahtumasivulle tarkoitettu menu. Menu sisältää menun, joka sijoitettaan valikon vasenpaan reunaan. Logon kokoa voi muokata logon leveys asetuksella. 2.6.1.3 articleblogfootermenu Articleblogfootermenu on valikko käytettäväksi etu-, artikkeli- ja blogisivulla sivun pohjassa. Valikko sisältää otsikon Ja logon, jotka ovat sijoitettu vasenpaan reunaan. Valikko asettaa valikot kahteen riviin oikealle puolelle. 2.6.1.4 eventsfootermenu Eventsfootermenu on articleblogfootermenusta kevyempi versio, joka on tarkoitettu käytettäväksi tapahtumasivun pohjalle. Valikko sisältää logon.
2.7 Karuselli (mod_carousel) Karuselli on artikkeleita pyörittävä moduuli, joka pyörittää yhden tai useamman kategorian artikkeleita. Karuselli on suunniteltu käytettäväksi etusivulla frontpage näkymällä ja tapahtumasivun articlegridissä. 2.7.1 Karuselli asetukset Karusellin määrittelyssä vaaditaan kategorian valinta. Kategoria voi olla yksi tai useampi kategoria, jonka artikkeleita karusellissa näytetään. Artikkeleiden määrä valitaan määrä kohdassa. Nostetut asetus suodattaa näytettäviä artikkeleita näyttäen vain nostetut tai nostamattomat artikkelit. Muita asetuksia ovat muunmuassa taustaväri, joka näytetään, kun kuvaa ei ole tai se on rikki, korkeus, joka määrittelee karusellin korkeuden, tekstin värin ja tummenuksen, jolla karusellin kuvan katsomista voidaan helpottaa. Karusellin näkymä vaihdetaan edistyneissä asetuksissa. Näkymäksi voidaan valita joko frontpage (ks. Yllä vasemmalla) tai oletus (ks. Yllä oikealla). 2.8 Logo (mod_logo) Logo on moduuli, joka helpottaa logon ja otsikon laittamista sivulle. Ensisijainen suunniteltu käyttötarkoitus on etu- ja blogisivulla abovemenuleft. Moduulin asetuksissa voidaan määritellä teksti ja logo, sekä niiden koot.
2.9 Sosiaalimedia-linkit (mod_socialmedialinks) Sosiaalimedia-linkit moduuli luo sosiaalmediaikoneilla varustettuja linkkejä. Linkkien ohjaamat sivut määritellään moduulin asetuksissa. 2.10 Nosto moduuli (mod_pickup) Nosto mooduulissa voidaan näyttää lista artikkeleita. Moduulin asetuksissa voidaan määritellä, mitä jokaisesta artikkelista näytetään. Parhaimman lopputuloksen saa, kun kuva ja ingressi eivät ole yhtäaikaa päällä samassa moduulissa.
3. Sivupohjat ja asemat 3.1 Tapahtumasivupohja (helka_events) Tapahtumasivupohja on tapahtumille suunnattu sivupohja. Se ei sisällä muotoilua joomlan komponenteille, vaan oon suunniteltu sisältämään vain moduuleja. Tapahtumasivupohjassa on 8 asemaa moduuleille: Hiddenevents Abovemenuleft Tapahtumasivun ruuddukko. Suunniteltu kuvallisia linkkilaatikoita ja karuselleja mielessä pitäen. Main Ruudukon yläpuolella oleva alue otsikkoa ja valikkoa varten Articlegrid Top alueen yläpuolella oleva alue, oikea puoli. Tarkoitettu valikon yläpuolelle Top Top alueen yläpuolella oleva alue, vasen puoli. Tarkoitettu valikon yläpuolelle Abovemenuright Tapahtumat ja Festivaalit linkista näkyviin tuleva alue. Suunniteltu linkkilaatikkomoduuleita varten Ruudukon alla oleva alue muunmuassa artikkelin korostuosiota varten Sharedspace Osa sivusta, joka on jaettu. Käytetään, kun halutaan moduuleja näyttää vierekkäin Footer Sivun loppuosa
3.2 Blogisivu (helka_blogs) Blogisivu on yleinen sivu artikkelien esittämistä ja näyttämistä varten. Blogisivupohjassa on määritelty 6 asemaa: Abovemenuleft Abovemenuright Päänäkymän sivupalkki, jossa eri moduuleja Main Ruudukon yläpuolella oleva alue otsikkoa ja valikkoa varten Sidebar Top alueen yläpuolella oleva alue, oikea puoli. Tarkoitettu valikon yläpuolelle Top Top alueen yläpuolella oleva alue, vasen puoli. Tarkoitettu valikon yläpuolelle Sivun komponentin alue Bottom Sivun loppuosa
3.3 Etusivu (helka_new_fp) Etusivun sivupohja. Sisältää 8 asemaa: Abovemenuleft Abovemenuright Päänäkymän oikea puoli, jossa moduulien leveys on täysi Rightbargrid Osio sivun komponenttia varten. Päänäkymän vasen puoli Rightbar Ruudukon yläpuolella oleva alue otsikkoa ja valikkoa varten Leftbar Top alueen yläpuolella oleva alue, oikea puoli. Tarkoitettu valikon yläpuolelle Top Top alueen yläpuolella oleva alue, vasen puoli. Tarkoitettu valikon yläpuolelle Päänäkymän oikea puoli, jossa tila on jaettu kahteen Sharedspace Osa sivusta, joka on jaettu. Käytetään, kun halutaan moduuleja näyttää vierekkäin Footer Sivun loppuosa
4 Joomla käyttö 4.1 Uusien sivujen luonti Joomla ja joomlan sivuston sivut ovat valikkoihin (menu) perustuvia. Halutessa täten luoda uusi sivu joomla sivustolle, uusi valikkonimike on tehtävä. Tämä valikkonimike määrittelee, missä sivu on, mikä komponentti sivussa on ( esimerkiksi kategorian listaus, yksittäinen artikkeli, tai hakutulokset ) ja miltä sivuston pohja näyttää. Valikon ollessa isossa roolissa joomlassa, täysin samaan sivuun viittaaminen toisesta valikosta vaatii sivun valikkonimikkeeseen viittaamisen. 4.1.1 Uuden sivun luonti vaiheittain 4.1.1.1 Luo uusi valikkonimike haluttavaan valikkoon.
4.1.1.2 Valitse valikon nimikkeen tyyppi Valikon nimikkeen tyypin valinta määrittelee mitä sivussa halutaan näyttää. Uusissa artovan sivuissa on luotu muokattuja nimikkeen tyyppejä, jotka sisältävät normaaleja komponentin näkymien lisäksi muutamia parannuksia. Yksittäinen artikkeli Käytä tähän Artikkelit osion alta löytyvää Helka artikkeli näkymää. Tämä luo artikkelille facebook kommenttipalstan, sekä indikaattorit artikkelin suosiosta. Lista artikkeleita Käytä tähän Artikkelit osion alta löytyvää Helka blog näkymää. Näkymä on suunniteltu blogi sivupohjaa mielessä pitäen ja sisältää useita parannuksia, muunmuassa sosiaalisen median kannalta. Tapahtumasivu Käytä tähän Events osion alta (valintaikkunan alimmaisena) löytyvää Helka events näkymää. Tämä näkymä on tyhjä ja mahdollistaa sivun rakentamisen pelkillä moduuleilla. Etusivu Käytä tähän Artikkelit osion alta löytyvää Helka etusivu näkymää. Huomioithan, että uuden valikon nimikkeen tyypin luonti luo UUDEN sivun. Haluttaessa viitata jo valmiiseen sivuun, katso kohta 4.1.2.
4.1.1.3 Valitse valikon sivupohjan tyyli Sivupohjan tyyli suositellaan valittavan valikon nimikkeen tyypin mukaan seuraavasti -Yksittäinen artikkeli Helka artikkeli näkymä Helka Blogs Template 2014 -Lista artikkeleita Helka blog näkymä Helka Blogs Template 2014 -Tapatumasivu Helka events näkymä Helka Events Template 2014 -Etusivu Helka etusivu näkymä Helka Frontpage Template 2014 4.1.1.4 Valitse valikon asetukset Valikossa on useita asetuksia, jolla sivua voi muokata. Tarkempia ohjeita valikoiden asetuksista löytyy Joomlan ohjeistuksessa. Peruskäytön kannalta tarvittava asetus on kategorian valinta. Tämä asetus sanoo, mitä artikkeleita sivulla näytetään ja se tulee olla valittuna sopivaksi. Huomioitavaa on, että tapahtumasivulla ei näy artikkeleita, joten kategorian valinta ei vaikuta sivuun. Muissa asetuksissa haluttavia asetuksia ovat muunmuassa Artikkelin asetukset alta löytyvät asetukset, jonka tarkemmat kuvaukset löytyvät hiiren viedessä tekstien päälle.
4.1.2 Toiseen sivuun viittaaminen Sivuistoissa usein halutaan viittaa jo valmiiseen sivuun. Esimerkiksi Etusivu linkit on yksi tapaus, missä valmiiseen sivuun, Etusivuun, halutaan viittaa toisesta sivusta. Joomlan valikoiden ollessa sivun ankkureina, toiseen sivuun viittaaminen vaatii sivun valikkonimikkeeseen viittaamisen. Tämän voi toteuttaa valitsemalla valikon nimikkeen tyypiksi Valikkoon nimikkeen alias. Valikkoon nimikkeen tyypin jälkeen lisäasetukset ilmestyvät mistä tärkeimpänä on oikealla oleva valikko. Valikosta valitaan valikon nimike, eli sivu, johon luotava valikon nimike halutaan linkata. Huomioitavaa on myös Alias asetus, jota voi tarvittaessa hyödyntää.
4.1.3 Monikielisyys Halutessa luoda monikielisiä sivuja, on suositeltavaa linkittää samat eri kieliset sivut. Valittua valikon nimikkeelle kielen ja kaikille haluttaville kielille omat valikon nimikkeet luotua, Valikkonimikkeiden yhteydet alta löytyy mahdollisuus linkittää luodut menut. Linkitys tapahtuu valitsemalla jokaiselle kielelle haluttava vastakohta.