WWW-sivut ja WWW-lomakkeet - Luento 2
Luennon aiheina ovat WWW-sivujen tuottaminen sekä WWW-lomakkeet. Lisäksi esitellään kolmas oppimistehtävä.
Luentotaltiointi
- tiea361_k17_l2.wmv video, 158M
- tiea361_k17_l2.mp4 video, H.264-pakkaus, 94M
- tiea361_k17_l2.mp3 pelkkä ääni, 9M
WWW-sivujen tuottaminen
Miten luon HTML-dokumentin? (kertausta Opetusteknologia-kurssilta)
HTML5-sivun pohja
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="iso-8859-1">
<link href="tyyli.css" rel="StyleSheet" type="text/css">
<title>Sivun otsikko</title>
</head>
<body>
...Sivun sisältö tänne...
</body>
</html>
Yllä olevassa esimerkissä merkistö voisi olla vaihtoehtoisesti utf-8 (valinta riippuu mm. käytettävän editorin asetuksista). Jos taas validaattori herjaa merkistöstä, vaikka dokumentti olisi luotu käyttäen esimerkissä käytettyä iso-8859-1-merkistöä, vaihda merkistö muotoon windows-1252.
Tällä hetkellä WWW-sivuja on siis järkevintä tehdä HTML5-kuvauskielellä, joka on tulevaisuutta ja jonka kehitystyö sai suosituksen aseman (Recommendation) syksyllä 2014. HTML5 kehitettiin korvaamaan vanhentunut HTML4 sekä XHTML. HTML5-kielessä on pyritty yhdistämään HTML:n ja XHTML:n hyvät puolet. Uusimpien selainten tuki HTML5:lle on jo hyvä.
HTML5-esimerkkisivu (katso käytetyt HTML5-elementit sivun lähdekoodista)
Ohjeita WWW-sivujen tekemiseen
CSS-tyylitiedostot
WWW-sivujen ulkoasu toteutetaan CSS-tyyleillä (Cascading Style Sheets). Tyylimääritykset on yleensä järkevää keskittää erilliseen tiedostoon, jolloin puhutaan CSS-tyylitiedostoista. Tällöin koko sivuston ulkoasua voidaan hallinnoida kätevästi keskitetysti. Yksittäisiä sivuja tehdessä tyylimäärityksiä voi upottaa myös HTML-tiedoston sisään.
Tyylimäärityksiä tehdessä tulee muistaa huomioida etenkin mahdolliset selaineroavaisuudet (ei kannata käyttää sellaisia tyylimäärityksiä, joita kaikki yleisimmät selaimet eivät tue) ja sivujen skaalautuvuus (erikokoiset näytöt jne.). CSS 2.1/2.2 -määritykset ovat "varma valinta", mutta myös hyvin tuettuja CSS3-ominaisuuksia voi ja kannattaa käyttää.
Ohjeita CSS-tyylimäärityksiin
- Opetusteknologia-kurssin luennot 3 ja 4
- Opetusteknologia-kurssin demot 5 ja 6
- Esimerkkisivu CSS3-määrityksistä
Koodia kirjoittamalla vaiko valikoista, Notepadillä vaiko Wordillä? ;)
WWW-sivuja voi tuottaa monilla eri ohjelmistoilla aina tekstieditoreista laajoihin WWW-kehitysympäristöihin. Tekstieditorilla koodin kirjoittaminen on työläähköä, mutta omat HTML- ja CSS-taidot harjaantuvat varmasti. WWW-kehitysympäristöillä taas saa tyylikästä jälkeä aikaiseksi, mutta oma HTML- ja CSS-ymmärrys voi jäädä heikommaksi.
Olennaisinta lienee kuitenkin löytää työkalu, joka tukee WWW-sivujen tekemistä parhaalla mahdollisella tavalla juuri sinun näkökulmastasi. Jollekin sopii parhaiten tekstieditori, jollekin taas tapa, jossa HTML-elementtejä voi tuoda sivuille valikoiden ja painikkeiden kautta. Perustaidot HTML- ja CSS-kielistä on hyvä olla hallussa käytettävästä editorista riippumatta.
Kannattaa kuitenkin muistaa, että WWW-dokumentin ei ole tarkoitus olla sama asia kuin tekstinkäsittelydokumentti. HTML-sivujen tekeminen Wordillä tai vastaavalla tekstinkäsittelyohjelmalla ei siis ole se suositeltavin tapa, vaikkakin se on mahdollista. Alla on esimerkkeinä kolme ulkoisesti samanlaista sivua, jotka on tehty kolmella eri editorilla, HTML-Kitillä, Adobe Dreamweaverilla ja Wordillä. Sivujen lähdekoodeja tutkimalla huomaa miten tekstieditori tai WWW-sivujen tuottamiseen tarkoitettu editori tuottaa siistiä jälkeä, kun taas Wordillä tuotetun sivun ylläpitäminen esimerkiksi koodia muokkaamalla olisi melkoisen työlästä.
Yksi mahdollisuus WWW-sivujen tuottamiseen on toki tuottaa niitä jollakin sisällönhallintajärjestelmällä (CMS) kuten Plonella. Tällöin sivuja saa tehtyä kätevästi ilman laajaa HTML- tai CSS-osaamista ja sivujen lähdekoodikin pysyy yleensä siistinä. Ks. esim. Opetusteknologia-kurssin Plone-demo.
Riippumatta siitä, millä editorilla ja tavalla WWW-sivuja teet, muista validoida tuottamasi sivut sekä HTML- että CSS-koodin osalta!
WWW-lomakkeet
WWW-lomakkeilla on opetuskäytössä monia mahdollisuuksia, aina ennakko-osaamisen kartoittamisesta kokeiden pitämiseen saakka. Millä tekniikoilla WWW-lomakkeita voi tehdä?
Lomake HTML-koodia kirjoittamalla
Laajimmat mahdollisuudet lomakkeille saa, jos kirjoittaa ne itse HTML-koodia kirjoittaen. Tällöin lomakkeet voi kustomoida juuri sellaisiksi kuin itse haluaa niin toiminnaltaan kuin ulkoasultaan. HTML5 toi useita uusia käyttökelpoisia ominaisuuksia WWW-lomakkeisiin.
Haasteita:
- Melko työläs tapa.
- Vaatii kohtalaisesti HTML-osaamista.
- Lomakkeen käsittely (kunnollinen validointi ja tietojen tallennus tai edelleenlähetys) vaatii WWW-ohjelmoinnin osaamista.
Esimerkkilomake HTML-koodia kirjoittamalla
Ohjeita
- WWW-lomakkeiden tekeminen HTML-koodia kirjoittamalla
- Lomakkeen käsittely
Lomake sisällönhallintajärjestelmällä
Sisällönhallintajärjestelmällä, kuten Plone, lomake on helpohkoa tehdä. HTML-koodia ei tarvitse osata kirjoittaa. Lomakkeen käyttöoikeudet on helppo antaa vain tietylle käyttäjäryhmälle.
Haasteita:
- Löytyykö aina sopiva sisällönhallintajärjestelmä, jota voi käyttää?
- Ulkoasuun ei yleensä pääse kovin paljon vaikuttamaan.
- Tiedot helppo lähettää esimerkiksi sähköpostiin, mutta tietojen tallennus muualle (kuten tietokantaan) voi olla haastavaa.
Ohjeita
Lomake verkko-oppimisympäristön työkaluilla
Verkko-oppimisympäristöissä, kuten Moodle, on usein työkaluja, joilla lomakkeita voi tehdä melko helposti. HTML-koodia ei tarvitse osata kirjoittaa. Lomakkeen käyttöoikeudet on helppo antaa vain tietylle käyttäjäryhmälle ja lomakkeisiin on kätevä tehdä esimerkiksi automaattinen tarkistus palautteineen.
Haasteita:
- Löytyykö aina sopiva verkko-oppimisympäristö, jota voi käyttää?
- Lomakkeelle päästäkseen tarvitsee yleensä tunnukset kyseiseen verkko-oppimisympäristöön, anonyymi lomake haastavampi tehdä.
- Ulkoasuun ei yleensä pääse vaikuttamaan juuri ollenkaan. Lomakkeita voikin olla vaikea saada näyttämään "perinteisiltä" WWW-lomakkeilta.
- Tiedot tallentuvat helposti verkko-oppimisympäristöön, mutta tietojen vienti pois kyseisestä ympäristöstä voi olla haasteellisempaa.
Esimerkkilomake Moodlen Tentti-työkalulla
Esimerkkilomake Moodlen Palaute-työkalulla
Ohjeita
- Opetusteknologia-kurssin Moodle-demon lomakeosuus
- Moodle-ohjeita (Mediamaisteri)
- Tentti-työkalun ohjeet (Mediamaisteri)
- Tentti-työkalun kysymystyypit
- Palaute-työkalun ohjeet (Mediamaisteri)
- Palaute-työkalun tarkempia ohjeita
Muita lomakemahdollisuuksia
Kolmas oppimistehtävä
Tulee palauttaa viimeistään 30.1.2017.
Käyttäjien kommentit