Demo 6 - Plone ja 3. oppimistehtävä

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.

Demo ja oppimistehtävä on tehtävä viimeistään 28.9.2008 mennessä!

Plone

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

Kurssiamme varten on luotu Plone-sivusto osoitteeseen http://tietopope.it.jyu.fi. 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 myös tutustua.

Plone-sisällönhallintajärjestelmän perusnavigointivaihtoehdot

Muutamia tärkeitä painikkeita:

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ö-painikkeen 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.

Plone-sisällönhallintajärjestelmän henkilökohtaiset asetukset

Kotisivun luonti

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

Esimerkki Plone-sivusta

  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 esimerkiksi OT1:ssä tekemäsi käsitekartta tai voit käyttää esimerkkikäsitekarttaa. Tarkista, että kuvan koko on riittävän pieni (kuvaa voi pienentää esim. ilmaisella Ifranview-ohjelmalla, kts. ohjeet). Anna vielä objektille jokin nimi Tunniste- ja Nimike-kohtiin.
  4. Siirry takaisin omaan Plone-järjestelmän kotihakemistoosi napauttamalla ylälaidan navigointipalkista omaa tunnustasi tai oma kansio -linkkiä. Lisää uusi verkkosivu valitsemalla lisää tänne (tai lisää uusi) | sivu.

    Sivun muokkaaminen Plonella

  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.
    • Kupu-tyylit Otsikot saa viemällä kursorin kappaleen päälle ja valitsemalla alasvetovalikosta Heading (Otsikko) tai Subheading (Alaotsikko).
    • Kupu-linkit Linkin lisääminen onnistuu. Ensimmäinen vaihtoehto lisää linkin Plone-järjestelmän sisäisiin objekteihin (esim. sivuihin, kyselyihin, hakemistoihin jne.). Toinen tekee ulkoisen linkin jollekin muulle sivustolle.
    • Kupu-listat Numeroitu luettelo ja järjestämätön lista. Sisemmän listan saa aikaan sarkain-näppäimellä (tabulaattori). Vaihto+sarkain siirtää listakohdan ulommaksi. Usealla Enterin painalluksella pääsee listan tekemisestä pois.
    • Kupu-taulukko Taulukon lisääminen. Anna rivien ja sarakkeiden määrä. Valitse tyyliksi esimerkiksi listing ja anna sarakkeiden ja rivien määrät. Voit myös lisätä otsikkorivin taulukolle.
    • Kupu-kuva 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) ja anna kuvan ALT-teksti. Lopuksi paina ok.
    • Kupu-html 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ä 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 seuraava.
  3. Luodaan varsinainen lomake. Poistetaan ensin oletuslomakkeella olevat kentät. Valitse Sisältö-välilehti. Ruksita Your E-Mail Address, Subject ja 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 Subject Vastaus Plone-lomakkeelta ja valitse tallenna.
  5. Form Folderin vaihtoehdot

    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.
    • 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.

Napauta lopuksi oma kansio-painiketta ja ota Plone-kotihakemistosi osoite selaimen otsikkoriviltä ja lisää se linkkinä tehtävälle varattuun Moodlen keskusteluryhmään.

Oppimistehtävä 3

Miten WWW-sivujen tuottamista tai verkkolomakkeita voidaan hyödyntää opetuskäytössä? Valitse jompi kumpi seuraavista tehtävistä:

Opettajanäkökulma: verkkolomakkeet opetuksessa

Suunnittele valitsemaasi oppiaineeseen liittyen oppimistilanne, jossa käytetään opettajan tuottamaa verkkolomaketta. Pohdi, miten toteuttaisit verkkolomakkeen. Analysoi ensin miten Plone, Moodle ja itse kirjoitettu XHTML soveltuvat kyseisen lomakkeen toteuttamiseksi. Onnistuuko edes kaikilla?

  1. Toteuta WWW-sivu, jossa on
    • suunnitelma ja kuvaus oppimistilanteesta,
    • tavoite oppiaineen ja tietotekniikan kannalta sekä
    • lyhyt analyysi erilaisten ympäristöjen soveltuvuudesta lomakkeen toteuttamiseksi.
  2. Verkkolomakkeen toteutus Moodlella, Plonella tai suoraan XHTML-kieltä kirjoittaen.
  3. Siirrä itse tehty sivu WWW-palvelimelle tai julkaise Plone/Moodle-lomake kaikkien nähtäväksi. Lisää linkit Moodlen keskusteluryhmään.

Oppilasnäkökulma: WWW-sivujen tuottaminen

Suunnittele valitsemaasi oppiaineeseen liittyen oppimistilanne, jossa oppilaat tuottavat WWW-sivuja. Oppimistilanteen tietoteknisessä tavoitteessa pitää olla jokin WWW-ympäristön oppimisen kannalta olennainen tavoite (esim. suhteellinen viittaus, sisäkkäiset listat, navigointi, CSS, lomakkeet, multimedian upotus, esteettömyys jne.). Pelkkä tekstinkäsittely toisessa muodossa ei siis kelpaa tässä tehtävässä tavoitteeksi.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/ope/demot/demo6/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tjlahton@mit.jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2008-09-24 17:21:08
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto