WWW-sivut ja WWW-lomakkeet - Luento 4
Luennon aiheina ovat WWW-sivujen tuottaminen sekä WWW-lomakkeet. Aiheeseen liittyy oppimistehtävä 3.
Luentotaltiointi
- tiea361_k20_l4.mp4, 101M, 32:01
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
- Web-julkaiseminen-kurssin luennot:
- Web-julkaiseminen-kurssin pääteohjaukset:
- 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, 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:
- 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
- Vuoden 2016 Opetusteknologia-kurssin Plone-demo
- Digipalveluiden Plone-ohjeet
- PloneFormGen-työkalun manuaalit
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
- Vuoden 2016 Opetusteknologia-kurssin Moodle-demon lomakeosuus
- Moodle-ohjeita (Mediamaisteri)
- Tentti-työkalun ohjeet (Mediamaisteri)
- Tentti-työkalun kysymystyypit (Mediamaisteri)
- Palaute-työkalun ohjeet (Mediamaisteri)
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