CMS sivujen ja kyselyjen tuottamisessa

• Plone
  • Kotisivun luonti
  • Lomakkeen luonti
• Oppimistehtävä 3
  • Opettajanäkökulma: verkkolomakkeet opetuksessa
  • Oppilasnäkökulma: WWW-sivujen tuottaminen

Tässä demossa kokeillaan WWW-sivujen ja WWW-lomakkeiden tekemisistä sisällönhallintatyökaluilla. Esimerkkinä käytetään Plone-ympäristöä

Plone

Olet sähköpostilla saanut tunnuksen ja salasanan Ploneen. Kirjaudu sisään järjestelmään. Vaihda salasana, mutta älä käytä ATK-keskuksen salasanaa. Tutki, mitä kaikkea Plone-järjestelmässä on tarjolla.

Muutamia tärkeitä painikkeita:

My Folder

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

Contents

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

View

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

Edit

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

Properties

Objektin ominaisuuksien muokkaus.

Sharing

Objektien oikeuksien muokkaustila.

Actions

Objektien ja hakemistojen siirtelyyn liittyvät toimenpiteet.

Display

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

Add Item

Lisää hakemistoon tietyntyyppisen objektin.

State

Objektin julkaisu ulkopuolisille.

Kotisivun luonti

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

1. Valitse My folder ja luo sen sisälle alihakemisto kuvat valinnalla Add item | Folder.
2. Valitse kuvat-hakemisto ja tämän jälkeen Add item | Image.
3. Valitse jokin kuva omalta kotikoneelta 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 Title-kohtaan.
4. Siirry takaisin omaan Plone-järjestelmän kotihakemistoosi napauttamalla vasemman laidan navigointipalkista omaa tunnustasi tai ylälaidan My folder -linkkiä. Lisää uusi verkkosivu valitsemalla Add item | Page.
5. Nyt pitäisi avautua tila, jossa käytetään Kupu-HTML-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 tai Subheading.
   • 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.
   • Numeroitu luettelo ja järjestämätön lista. Sisemmän listan saa aikaan sarkain-näppäimellä (tab). Vaihto+sarkain siirtää listakohdan ulommaksi. Usealla enterin painalluksella pääsee listan tekemisestä pois.
   • Taulukon lisääminen. Anna rivien ja sarakkeiden määrä. Valitse tyyliksi Vertical listing ja luo sarakeotsikot valinnalla Create Headings.
   • Lisää kuvan. Valitse Plone-järjestelmästä Current folder, sitten hakemisto, johon olet siirtänyt kuvan, ja napauta kuvaa. Valitse kuvan rivitystapa (Left/Right = teksti kiertää kuvaa, Inline = kuva tekstin tasossa) ja lopuksi ok.
6. Anna objektille nimi Title-kenttään ja yhteenvetokuvaus. Valitse sivun alalaidasta kommentointimahdollisuus päälle. Tallenna sivu Save-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 Add comment-painiketta sivun alalaidasta. Kirjoita alalaidan kommentti-kenttään jokin kommentti testisivusta ja hyväksy se.

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 My Folder ja lisää sen alle uusi lomake valinnalla Add item | form folder.
2. Täytä kuvaustiedot ja nimike TV:n katselutottumuskysely. Submit-nappulan otsikoksi voi laittaa esim. Lähetä ja poista tarpeeton Show Cancel Button -valinta. Lomakkeen käsittelyyn voidaan käyttää Mailer-käsittelijää (lomakkeen tiedot lähetetään sähköpostiin). Valitse seuraava. Decoration-välilehdellä voidaan kirjoittaa lomakkeen alkuun ja loppuun ohjetekstejä, mutta näitä ei nyt välttämättä tarvita. Valitse seuraava. Viimeisellä välilehdellä voidaan määritellään lomakkeen toimintaa lähetä-painikkeen jälkeen. Valitse tallenna.
3. Luodaan varsinainen lomake. Poistetaan ensin oletuslomakkeella olevat kentät. Valitse Contents-välilehti. Ruksita Your E-mail Address, Subject ja Comments ja valitse poista-toiminto.
4. Napauta Mailer-käsittelijää, valitse Edit-välilehti ja sieltä [addressing]-linkki. Täydennä kohtaan Recipient's full name oma nimesi ja Recipient's email-address oma sähköpostiosoitteesi. Valitse seuraava. Kirjoita kohtaan Subject Vastaus Plone-lomakkeelta ja valitse tallenna.

5. 

   Valitse vasemmasta navigointipalkista TV:n katselutottumuskysely. Valitse ylälaidasta Add Item. Täytä kenttään liittyvät tiedot, jonka jälkeen uusi lomake-elementti pitäisi tulla paikallaan. 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öpostissa saitko postiisi vastauksen lomakkeelta.

Napauta lopuksi My folder-painiketta ja ota Plone-kotihakemistosi osoite selaimen otsikkoriviltä ja lisää linkki Moodle-keskusteluryhmään Etädemo 5 - Plone-sivujen palautusalue.

Oppimistehtävä 3

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

Opettajanäkökulma: verkkolomakkeet opetuksessa

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

1. Toteuta WWW-sivu, jossa on
   • suunnitelma ja kuvaus oppimistilanteesta
   • tavoite oppiaineen ja tietotekniikan kannalta
   • lyhyt analyysi erilaisten ympäristön soveltuvuudesta lomakkeen toteuttamiseksi
2. Verkkolomakkeen toteutus Moodlella, Zope/Plonella tai suoraan HTML-kieltä kirjoittaen.
3. Siirrä sivu WWW-palvelimelle ja lisää linkit Moodle-keskusteluryhmään Oppimistehtävä 3

Oppilasnäkökulma: WWW-sivujen tuottaminen

Suunnittele annettuun 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.

1. Toteuta WWW-sivu, jossa on
   • suunnitelma ja kuvaus oppimistilanteesta
   • tavoite oppiaineen ja WWW-ympäristön jonkin osa-alueen oppimisen kannalta
   • tehtävänanto
2. Toteuta malliesimerkki WWW-sivusta, jonka oppilas tai oppilasryhmä voisi tuottaa.
3. Siirrä sivut WWW-palvelimelle ja lisää linkki Moodle-keskusteluryhmään Oppimistehtävä 3