Demo 5 - Plone

• Mallivideot
• Plone
  • Asetusten tarkistaminen
  • Kotisivun luonti
  • Lomakkeen luonti
• Lisätehtävä: WWW-lomakkeen muotoilu

Tässä demossa kokeillaan WWW-sivujen ja WWW-lomakkeiden tekemistä sisällönhallintatyökaluilla. Esimerkkinä käytetään Plone-ympäristöä, jonka avulla toteutetaan esimerkiksi Jyväskylän yliopiston WWW-sivujen päivitys.

Plone

Plone on paljon käytetty sisällönhallintajärjestelmä, jolla voidaan siis ylläpitää WWW-sivustoja. Plone rakentuu Zope-sovelluspalvelimen "päälle", minkä vuoksi usein puhutaan Zope/Plone-ympäristöstä pelkän Plonen sijaan.

Kurssillamme käytetään osoitteeseen http://tietopope.it.jyu.fi luotua Plone-sivustoa. Sinulle on tehty järjestelmään käyttäjätunnus, joka on sama kuin yliopiston käyttäjätunnuksesi. Olet saanut sähköpostilla (Korppiin ilmoittamaasi osoitteeseen) järjestelmältä viestin, jossa sinua pyydetään kirjautumaan järjestelmään 168 tunnin (1 viikko) kuluessa. Painaessasi sähköpostiviestissä tullutta linkkiä, pääset antamaan itsellesi salasanan, jonka jälkeen voit kirjautua sisään järjestelmään pääsivulta. Jos et ehtinyt kirjautumaan sisään viikon kuluessa sähköpostiviestin saapumisesta, laita kurssin opettajalle viestiä, niin hän lisää sinut järjestelmään uudelleen. Tutki, mitä kaikkea Plone-järjestelmässä on tarjolla. Plonen käyttöön on myös hyvät ohjeet, joihin kannattaa tutustua.

Muutamia tärkeitä painikkeita, linkkejä ja välilehtiä:

oma kansio (my folder)

Vie hakemistoon Members/omatunnus, jonne on oikeus luoda sisältöä Plone-järjestelmän tarjoamilla erilaisilla komponenteilla.

asetukset (options)

Täältä pääset säätämään omia henkilökohtaisia Plone-asetuksia.

sisältö (contents)

Näyttää kyseisen hakemiston sisältämät objektit ja alihakemistot. Sisältö-sivu mahdollistaa hakemistojen ja objektien siirtämisen paikasta toiseen. Hakemistopolku näkyy myös suoraan selaimen osoiterivillä.

näytä (view), sisältö-välilehden vieressä

Näyttää objektin sisällön.

muokkaa (edit)

Muokkaustila, jossa voidaan muokata objektin sisältöä. Muokkaa-välilehden näkymä riippuu siitä, mitä objektia ollaan muokkaamassa (esim. hakemiston tapauksessa voidaan muokata hakemiston nimeä sekä kuvausta ja web-sivun tapauksessa voidaan tuottaa tekstisisältöä).

ominaisuudet (properties)

Objektin ominaisuuksien muokkaus.

yhteiskäyttö (sharing)

Objektien oikeuksien muokkaustila.

toiminnot (actions)

Objektien ja hakemistojen siirtelyyn liittyvät toimenpiteet.

näytä (display), toiminnot-painikkeen vieressä

Hakemiston esitysmuoto (vrt. Windows Explorerin View-valikon vaihtoehdot)

lisää tänne tai lisää uusi (add item)

Lisää hakemistoon tietyntyyppisen objektin.

tila (state)

Objektin julkaisu ulkopuolisille tai julkaisun peruminen.

Asetusten tarkistaminen

Käy ensin tarkistamassa, että asetuksesi (sähköpostiosoite yms.) ovat kohdallaan. Editoriksi kannattaa valita Kupu.

Kotisivun luonti

Luodaan Plone-järjestelmään web-sivu, jossa on käytetty monipuolisesti XHTML-rakenteita. Sivu voisi olla esimerkiksi seuraavankaltainen:

1. Valitse oma kansio ja luo sen sisälle alihakemisto kuvat valinnalla lisää tänne (tai lisää uusi) | kansio. Hakemiston Tunniste ja Nimike voivat olla molemmat muodossa kuvat. Tunnisteesta tulee sivun osoite selaimille, joten siinä ei tule käyttää ääkkösiä, välilyöntejä tai erikoismerkkejä!
2. Valitse kuvat-hakemisto ja tämän jälkeen lisää uusi | kuva.
3. Valitse jokin kuva omalta koneelta Browse...-painikkeen avulla. Kuva voi olla joku oma kuvasi tai voit käyttää esimerkkikuvaa. Tarkista, että kuvan koko on riittävän pieni ja pienennä kuvaa tarvittaessa. Anna vielä objektille jokin nimi Tunniste- ja Nimike-kohtiin.
4. Siirry takaisin omaan Plone-järjestelmän kotihakemistoosi napauttamalla ylälaidan navigointipalkista oma kansio -linkkiä. Lisää uusi verkkosivu valitsemalla lisää tänne (tai lisää uusi) | sivu.

   

5. Nyt pitäisi avautua tila, jossa käytetään Kupu-XHTML-editoria (vrt. Moodlen RichText-editori). Luo editorilla sivu, jossa on tekstiä, otsikoita, linkkejä, lista, taulukko ja kuva.
   • Otsikot saa viemällä kursorin kappaleen päälle ja valitsemalla alasvetovalikosta Heading (Otsikko) tai Subheading (Alaotsikko).
   • Linkin lisääminen. Ensimmäinen vaihtoehto lisää linkin Plone-järjestelmän sisäisiin objekteihin (esim. sivuihin, kyselyihin, hakemistoihin jne.). Toinen tekee ulkoisen linkin jollekin muulle sivustolle.
   • Numeroitu luettelo ja järjestämätön lista. Sisäkkäisten listojen tekeminen onnistuu sisennyspainikkeilla (). Usealla Enterin painalluksella pääsee listan tekemisestä pois.
   • Taulukon lisääminen. Valitse tyyliksi esimerkiksi listing ja anna sarakkeiden ja rivien määrät. Voit myös lisätä otsikkorivin taulukolle.
   • Lisää kuvan. Valitse Plone-järjestelmästä Current folder, sitten hakemisto, johon olet siirtänyt kuvan, ja napauta kuvaa. Valitse kuvan rivitystapa (Vasen/Oikea = teksti kiertää kuvaa, Sisennetty = kuva tekstin tasossa), koko (pidemmän reunan maksimikoko) ja anna kuvalle tekstiselite (ALT-teksti). Lopuksi paina ok.
   • Antaa mahdollisuuden kirjoittaa sivu suoraan XHTML-koodilla. Tallentaessa kuitenkin suoritetaan eräänlainen "validointi", eli esimerkiksi kovin monimutkaisia tyylikikkailuja ei pysty koodia kirjoittamallakaan tekemään.
6. Anna objektille nimi Tunniste- ja Nimike-kenttiin ja yhteenvetokuvaus. Tallenna sivu tallenna-painikkeesta. Valitse sen jälkeen ominaisuudet-välilehdeltä sivun alalaidasta kommentointimahdollisuus päälle. Tallenna sivu uudelleen tallenna-painikkeesta.
7. Valitse vasemmasta navigointipalkista Members. Hae kaikki kurssilaiset valitsemalla alalaidan alasvetovalikosta ryhmä TIEP161-kurssilaiset. Valitse jonkun kurssilaisen tunnus ja napauta linkkiä, joka vie käyttäjän tekemään testisivuun. Napauta lisää kommentti -painiketta sivun alalaidasta. Kirjoita alalaidan kommentti-kenttään jokin kommentti testisivusta ja hyväksy se painamalla tallenna.

Lomakkeen luonti

Tutustutaan lomakkeiden tekemiseen sisällönhallintajärjestelmissä. Esimerkissä käytetään Plonen form folder -lisäkomponenttia. Pyritään luomaan TV:n katselutottumuskyselyä vastaavat kyselykentät tällä työkalulla.

1. Valitse ensin oma kansio ja lisää sen alle uusi lomake valinnalla lisää tänne (tai lisää uusi) | form folder.
2. Täytä kuvaustiedot, Tunniste (tv_kysely) ja Nimike (TV:n katselutottumuskysely). Submit-nappulan otsikoksi voi laittaa esim. Lähetä. Lomakkeen käsittelyyn voidaan käyttää Mailer-käsittelijää (lomakkeen tiedot lähetetään sähköpostiin). Lisäksi voit määritellä lomakkeen toimintaa Lähetä-painikkeen painamisen jälkeen. Valitse tallenna.
3. Luodaan varsinainen lomake. Poistetaan ensin oletuslomakkeella olevat kentät. Valitse sisältö-välilehti. Ruksita Your E-Mail Address, Subject sekä Comments ja valitse poista-toiminto.
4. Napauta Mailer-käsittelijää ja valitse muokkaa-välilehti. Täydennä kohtaan Recipient's full name oma nimesi ja kohtaan Recipient's email-address oma sähköpostiosoitteesi. Valitse seuraava. Muita vastaanottajia ei tarvita, joten valitse uudelleen seuraava. Kirjoita kohtaan Aihe (Subject) Vastaus Plone-lomakkeelta ja valitse tallenna.

5. 

   Valitse vasemmasta navigointipalkista TV:n katselutottumuskysely. Valitse ylälaidasta lisää uusi. Valitse sopiva kenttä ja täytä kenttään liittyvät tiedot, jonka jälkeen uusi lomake-elementti pitäisi tulla paikalleen. Pyritään luomaan TV:n katselutottumuskyselyä vastaavat kentät. Ulkoasusta ei saada täysin vastaavan näköistä, mutta älä välitä tästä! Lisättäviä kenttiä ovat esim. seuraavat:
   • string field = yhden rivin tekstikenttä
   • selection field = vaihtoehtoinen valinta
     • Options-kohtaan laitetaan valintavaihtoehdot omille riveilleen.
     • Selection list = alasvetovalikko
     • Radio buttons = valintanapit
   • multi-select field = usean kohdan valinta
     • Options-kohtaan laitetaan valintavaihtoehdot omille riveilleen.
     • Rows = kerralla näytettävien vaihtoehtojen määrä
     • Selection list = usean vaihtoehdon lista
     • Checkbox list = valintaruudut
   • text field = monirivinen tekstikenttä
   Lisäksi tarjolla on mm. vaihtoehtoja toteuttaa erilaisia määrämuotoisia kenttiä (esim. saa syöttää vain numeron).
6. Siirry TV:n katselutottumuskyselyyn. Kokeile täyttää oma lomakkeesi ja napauttaa lähetä-painiketta. Käy tarkistamassa sähköpostista saitko postiisi vastauksen lomakkeelta.

Lisätehtävä: WWW-lomakkeen muotoilu

Demossa 3 tehtiin sähköpostilomake, jonka ulkoasua nyt hieman muokataan.

Lomake-elementtien ulkoasun muokkaaminen toimii yleensä ottaen aika huonosti, sillä selaimiin on määrätty usein melko kiinteästi, miltä lomakkeet näyttävät. Hieman asemointia kuitenkin pystyy tekemään:

1. Avaa demossa 3 tehty sähköpostilomake Firefoxiin ja valitse Web Developer -työkalupalkista CSS | Edit CSS.
2. Lisää fieldset-elementille taustasta poikkeava väri. Värin voit valita myös kuvasta tai paletista Firefoxin ColorZilla-työkalun avulla.
3. Muuta kaikkiin lomake-elementteihin (input, option, textarea) tasalevyinen kirjasin eli esimerkiksi Courier New ja yleisvaihtoehto monospace.
4. Määrää erilainen taustaväri toisen fieldset-lohkon sisällä olevalle fieldset-lohkolle.
5. Tasataan lomake-elementit samalle tasolle vaakasuunnassa. Muuta ensin CSS:ssä label-elementin rivittyminen tekstin tasosta (engl. inline) lohkoksi (engl. block). Vinkki: käytä display-ominaisuutta.
6. Määrää label-elementin leveydeksi 30%.
7. Liu'uta (float) label-elementit vasempaan laitaan, jolloin lomake-elementit rivittyvät label-elementtien oikealle puolelle.
8. Estä vielä toisen label-elementin rivittyminen samalle riville toisen label-elementin kanssa. Se onnistuu clear-ominaisuudella.
9. Lisää myös textarea-elementille clear-ominaisuus, jolloin saat sen rivittymään otsikon alapuolelle. Tee textarea-elementistä vielä lohkotason elementti display-ominaisuuden avulla, niin se rivittyy label-elementin alapuolelle isoillakin näytöillä.
10. Tallenna tyylitiedoston muutokset lomake.css-tiedostoon.
11. Testaa lopuksi selaimella, että lomakkeesi näyttää suunnilleen mallikuvan lomaketta vastaavalta.
12. Validoi CSS-tiedostosi ja korjaa mahdolliset virheet.