Lanuti.fi Lapin nuorisotiedotus. TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi

Transkriptio

1 Lanuti.fi 2015 Lapin nuorisotiedotus TIETOTALO INFOCENTER OY HTC Keilaniemi Keilaranta 17, Espoo Teknotie 14 16, Napapiiri, Rovaniemi Y-tunnus

2 Päivämäärä Versio Kuvaus Tekijä Kuvataan käyttöliittymän toiminnot sekä moduulit Susanna Lämsä 2

3 1. KÄYTTÖLIITTYMÄ... 4 Etusivun ulkoasu... 4 Alasivujen ulkoasu... 5 Käyttöliitymäasetukset... 6 Etusivun sivuteema... 6 Piilota sivun otsikko... 6 Väriteema... 7 Etusivun karuselli... 7 Alatunniste... 8 Responsiivisuus Tablet (leveys pienempi kuin 768px) Puhelin (leveys pienempi kuin 480px) MODUULIT Valikko ja linkkimoduulien linkkien palstoitus Asemoitus sisältö Nosto.xml -sivupohja Facebook LikeBox sivupohja Bannercarousel.xml sivupohja

4 1. Käyttöliittymä Etusivun ulkoasu 4

5 Etusivun kaltaisen ulkoasun saa käyttöön valikoimalla käyttöliittymäasetuksista Etusivun sivuteeman + palstamallin 10. Alasivujen ulkoasu Alasivuilla hyödynnetään yläkuvia. Yläkuva voidaan vaihtaa sivun asetuksista, käyttöliittymä välilehdeltä. Kuvan suosituskoko on 878 px x 300 px. 5

6 Käyttöliitymäasetukset Etusivun sivuteema Tätä asetusta käytetään sivuilla (esim etusivu), joissa ei tarvita vasemmassa reunassa olevaa alavalikkoelementtiä Piilota sivun otsikko Sivuilla näkyvän yläkuvan avoinna olevalta sivulta näkyvistä. Kuva: Sivun otsikkokuva piilotettu 6

7 Kuva: Sivun otsikkokuva näkyvissä Väriteema Tämä vaihtaa logon sekä käyttöliittymän väriteeman vihreäksi, siniseksi tai violetiksi. Etusivun karuselli Sisältöä ylläpidetään karuselli nimisellä sivulla. Karuselli -sivun sisältö heijastetaan yhtä tasoa ylemmälle sivulle. Jokainen kunta voi siis tehdä omalle kunnalle karusellisivun. Kuva: Esimerkiksi Suomeksi sivun alasivulle luotu karuselli sivun sisällöt heijastuvat Suomeksi sivulle. Etusivun karuselli -toimintoa ylläpidetään karuselli sivulla asemoitu sisältö moduulissa. 7

8 Kentän nimi Tyyppi Kommentti Link Linkki Karusellin kuvakkeen linkki Title Teksti Karusellitietueessa näkyvä otsikko Image Kuva Karusellin kuvat skaalautuvat automaattisesti oikeaan kokoon. Esimerkeissä kaikki kuvat ovat kokoa 380 px x 174 px. Jos kuva on korkea, niin karuselli pienentää kuvan oikeassa suhteessa niin, että leveys on aina 380 px, korkeus mukautuu leveyteen. Text Teksti Teksti joka generoituu kuvan alle. Alatunniste Sisältöä ylläpidetään footer nimisen sivun kautta. Footer -sivun sisältö heijastetaan kaikille samassa sivuhaarassa oleville sivuille, sivun alaosaan. Jokainen kunta voi siis tehdä oman footer sivun kunta sivun alasivuksi, josta tieto välittyy koko kunnan sivualueen alaosaan. 8

9 9

10 Somelinkit toimintoon voi kerätä esimerkiksi eri some osoitteita näkyviin (twitteri, instagram yms). - Icon Erilaisia ikonikuvakkeita suorakaiteen sisään voi valikoida osoitteesta: Lisää ikoni muodossa fa-tähänikonintunnus Huom. pikalinkkien ei ole pakko olla somelinkkejä, siihen voi muodostaa mitä mielikuvituksellisempia linkkejä. Responsiivisuus Käyttöliittymä mukautuu pienille näytöille. Mukautuminen alkaa yleisestä table laiteiden pystymallin leveydestä 768px. 10

11 Tablet (leveys pienempi kuin 768px) Yleisesti pienennetään elementtien marginaaleja Palstaleveyksien suhteita muokataan Alasivujen sisällössä palstoitus poistetaan ja moduulit allekkain. 11

12 Puhelin (leveys pienempi kuin 480px) Päävalikko ja apuvalikko pudotusvalikoksi painikkeen taakse. Palstoitus poistetaan sisällöstä ja moduulit allekkain Alatunnisteen elementit allekkain 12

13 2. Moduulit Valikko ja linkkimoduulien linkkien palstoitus Valikkomoduuli sijaitsee etusivulla palstassa 2, paikassa 1. Linkki moduuli sijaitsee etusivulla palstassa 3, paikassa 2. Valikko moduulin ja linkkimoduulin linkit saadaan järjestymään palstoittain kirjoittamalla moduulin asetuksiin Css-tyyliin tekstin kunta. 13

14 Asemoitus sisältö Nosto.xml -sivupohja Sisältöä ylläpidetään nosto.xml -sivupohjan kautta. 14

15 Kentän nimi Tyyppi Kommentti Teksti Kuva Vapaa tekstialue Linkki Linkki Linkkiteksti Teksti Linkin otsikko Etusivulla toiminto sijaitsee palstassa 1, paikalla 1. 15

16 Facebook LikeBox sivupohja Sisältöä ylläpidetään Facebook LikeBox-sivupohjassa. 16

17 Kentän nimi Tyyppi Kommentti URL Linkki Facebook sivun osoite yllä esimerkin mukaisessa muodossa Width Leveys pixeleinä Merkitään fb-toiminnon leveys pixeleinä. Etusivulla toiminto sijaitsee palstassa 2, paikalla 2. Show faces Show stream Show header Valinta Valinta Valinta 17

18 Bannercarousel.xml sivupohja Kentän nimi Tyyppi Kommentti Link Linkki Image Kuva Kuvat skaalautuvat automaattisesti oikeaan kokoon. 18