WWW-sivut ja WWW-lomakkeet - Luento 2

Luennon aiheina ovat WWW-sivujen tuottaminen sekä WWW-lomakkeet. Lisäksi esitellään kolmas oppimistehtävä.

Luentotaltiointi

Ongelmia videon katselussa?

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

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:

Esimerkkilomake HTML-koodia kirjoittamalla

Ohjeita

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:

Esimerkkilomake Plonella

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:

Esimerkkilomake Moodlen Tentti-työkalulla

Esimerkkilomake Moodlen Palaute-työkalulla

Ohjeita

Muita lomakemahdollisuuksia

Kolmas oppimistehtävä

Tulee palauttaa viimeistään 30.1.2017.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/ope/luennot/luento2/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2017-01-23 14:19:39
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta