WWW-sivut ja WWW-lomakkeet - Luento 4

Luennon aiheina ovat WWW-sivujen tuottaminen sekä WWW-lomakkeet. Aiheeseen liittyy oppimistehtävä 3.

Luentotaltiointi

WWW-sivujen tuottaminen

Miten luon HTML-dokumentin? (kertausta Web-julkaiseminen-kurssilta)

HTML5-sivun pohja

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="utf-8">
<link href="tyyli.css" rel="StyleSheet" type="text/css">
<title>Sivun otsikko</title>
</head>
<body>
...Sivun sisältö tänne...
</body>
</html>

Tällä hetkellä WWW-sivuja on järkevintä tehdä HTML5-kuvauskielellä, 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 erittäin 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, Notepad++:lla, 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. Vuoden 2016 Opetusteknologia-kurssin Plone-demo. Toinen hieman Plonea vastaava on esimerkiksi Google Sivustot (Google Sites). Opetuskontekstissa käytetään paljon myös Peda.netiä. Sekä HTML- että CSS-osaamisesta on runsaasti hyötyä myös sisällönhallintajärjestelmiä käytettäessä. Esimerkiksi sisällönhallintajärjestelmillä tehtyjen sivujen ulkoasua voi pystyä muotoilemaan omien CSS-tyylien avulla.

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 hyviä lomakemahdollisuuksia

Kaikki alle linkitetyt palvelut ovat käytettävissä ilmaiseksi Jyväskylän yliopiston opiskelijoille ja henkilökunnalle. Työkalut ovat monipuolisia (Webropol kaikkein monipuolisin) ja niissä on mahdollista tehdä myös anonyymejä kyselyitä.

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/luento4/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
 2019-12-20 16:02:58
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta