Verkkokurssin tuotantoprosessi kurssin harjoitustyönä suunniteltu toteutettavissa oleva verkkokurssi. HTML5 & CSS3 perusteet Sisältö: 1. Ideointi 2. Tausta-analyysi 3. Sisällön suunnittelu 4. Pedagoginen suunnittelu 5. Tekninen suunnittelu 6. Toteutuksen rajaus Ideointi Ideointi vaiheessa mietin, mistä aiheesta tietäisin niin paljon, että voisin rakentaa ja mahdollisesti toteuttaa siitä verkkokurssin. Kuuden vuoden työkokemus mainostoimistosta erilaisten www-sivustojen parissa suuntasi katseet verkkosivu tekniikoihin. HTML5 ja CSS 3 ovat hyvin perustason asioita verkkosivujen teossa. Ne ovat myös mielestäni opittavissa itsenäisesti ja etänä verkkokurssin kautta. Tältä pohjalta päädyin suunnittelemaan kyseisen kurssin. Tausta-analyysi Kurssi on suunnattu jokaiselle www-sivujen teosta ja HTML5 sekä CSS3 tekniikoista kiinnostuneille. Kurssi on alkeiskurssi, joten sillä ei oikeastaan ole mitään pohjatietovaatimuksia. Kurssin suorittamiseen tarvitaan tietokone, jossa nettiyhteys, selain ja jokin tekstieditori. Notepad++ on hyvä ilmaisohjelma, joka soveltuu erinomaisesti kurssin käyttötarpeisiin. Osa kurssin materiaaleista on englanniksi, joten englannin kielen osaaminen edesauttaa kurssin suorittamista. Kurssi toteutetaan verkossa, jolloin se ei ole paikka- eikä aikariippuvainen vaan tarjoaa joustavan mahdollisuuden perehtyä aiheeseen haluttuna ajankohtana. Kurssin aineisto on verkossa ja kurssin käyttämä materiaali on joko kurssin suunnittelijan itsensä tuottamaa tai hyödynnetään verkossa valmiiksi olevaa, tekijänoikeuslakien sallimaa materiaalia. Osa materiaalista on englanninkielistä. Kurssi sisältää 8 osa-aluetta, joista jokaisen suorittaminen kestää n. 3-5 tuntia. Kurssin laajuus olisi siten 1 opintopiste. Osaamistavoitteet: Kurssi tarjoaa valmiudet staattisten www-sivujen luomiselle. Kurssilla käydään HTML5 ja CSS3 perusominaisuuksia läpi niin, että opiskelija voi kurssin jälkeen lähteä syventymään web tekniikoihin haluamallaan tavalla. Kurssin suoritettuaan opiskelija ymmärtää www-sivun rakenteen ja ulkoasullisen 1
eroavuuden ja osaa tehdä rakenteeltaan ja ulkoasumäärityksiltään valideja sivuja. Elementtien ulkoasu, asettelu ja lomakkeiden luonti tulee kurssin aikana opiskelijalle tutuksi. Alustava sisältösuunnitelma: 1. Johdanto HTML ja CSS maailmaan a. Tehtävänä esitellä miten käyttäjä palvelin prosessi käyttäjän & selaimen näkökulmasta toimii b. Kirjalliset vastaukset kysymyksiin: i. Mikä on xhtml:n ja HTML:n ero? ii. Miksi CSS kehiteltiin? 2. HTML:n perusteet a. HTML5 dokumentin perusrakenne i. <html>, <head> ja <body> ii. <meta> ja <title> iii. otsikko <h(n)> ja kappale <p> elementit 3. HTML5 sivusto a. Esittely sivun tekeminen itsestä i. kaksi alasivua ii. <ul>, <li>, <a>, <table> ja <img> elementtien käyttö iii. elementin attribuutit 4. Sivun ulkoasullinen muokkaus CSS:llä a. Tyylimäärittelyt & niiden liittäminen html tiedostoon b. CSS valitsimet c. Elementtien ulkoasu d. Elementtien asettelu 5. CSS3 a. Transitiot b. Transformaatiot 6. HTML5 lomake a. Lomakkeen teko 7. HTML5 media & grafiikka a. video, audio, canvas ja svg elementit 8. Vapaa valintainen HTML5 API perehtyminen a. Opiskelija perehtyy vapaavalintaisesti johonkin HTML5 API ominaisuuteen 2
Sisältösuunnitelma Kurssin sisältö koostuu 8 moduulista, jotka rakentavat opiskelijalle pala palalta ymmärrystä www-sivun rakenteesta sekä siihen liittyvistä ulkoasullisista määrityksistä. 1. Johdanto HTML ja CSS maailmaan Ensimmäisessä moduulissa on tarkoitus saada käsitys siitä, miten selaimen ja palveliminen yhteys toimii ja miten www sivu siirtyy palvelimelta asiakkaalle ja mikä on selaimen osuus tässä prosessissa. Tämän yhteyden ymmärtäminen on olennaista, jotta www-tekniikoiden kokonaisuus avautuu ja ymmärretään HTML:n ja CSS:n rooli www-sivun näkymisessä selaimessa. Tämä varmistetaan siten, että opiskelija joutuu palauttamaan opettajalle sähköpostitse kirjallisen kuvauksen palvelin-asiakas prosessista Internetissä. Lisäksi, jotta opiskelija saa riittävän pohjaymmärryksen HTML:stä ja CSS:stä, hän kirjoittaa kirjalliset vastaukset kysymyksiin: i. Mikä on xhtml:n ja HTML:n ero? ii. Miksi CSS kehiteltiin? iii. Miten Internet asiakas - palvelin (client - server) malli toimii? Näin varmistetaan se, että ymmärretään HTML:n ja CSS:n merkitys ja rooli www-sivun teossa. On hyvä ymmärtää, miksi jokin asia tehdään sen lisäksi, että tiedetään, miten se tehdään. 2. HTML:n perusteet Toisessa moduulissa perehdytään perus HTML-dokumentin rakenteeseen sekä HTML5 dokumenttityypin määritykseen. HTML-dokumentin vaaditut elementit <html> sekä sen lapsielementit <head> ja <body> käydään läpi sekä head-osan pakolliset <meta> ja <title> elementit ja niiden merkitys. Lisäksi opetellaan otsikko tason elementit sekä kappale elementti <p>, jotta saadaan tehtyä pieni www-sivu, joka palautetaan opettajalle. Tehtävänä on kertoa sivulla lyhyesti, miksi suorittaa 3
kurssia. 3. HTML5 sivusto Toisessa moduulissa rakennetaan pieni www-sivusto, jossa on pääsivun lisäksi kaksi alasivua. Moduulissa hyödynnetään aiemmin opittua sekä opetellaan lisäksi <ul>, <li>, <a>, <table> ja <img> elementtien käyttö. Tarkoitus on tehdä listaelementtien avulla navigaatiot alasivuille linkki elementin avulla. Taulukkoa käytetään toisella alasivulla ja kuvaa toisella. Uusien elementtien lisäksi käydään läpi elementteihin liittyviä attribuutteja. Kuva- ja linkkielementit toimivat tässä hyvinä esimerkkeinä. Opiskelija tekee kolmen sivun kokonaisuuden ja laittaa sen opettajalle paketoituna sähköpostiin. 4. Sivun ulkoasullinen muokkaus CSS:llä Neljännessä moduulissa muokataan kolmannessa moduulissa tehtyä www-sivustoa CSS tyylimääritysten avulla. Tässä vaiheessa myös edellisessä moduulissa opitut attribuuttien käyttö on tarpeellinen, sillä CSS valitsimien käytön yhteydessä opetellaan class- ja id-attribuutit, joilla saadaan yksilöityä ja rajattua tyylimääritykset haluttuihin elementteihin. Opiskelija oppii moduulissa muokkaamaan sekä elementtien ulkoasua erilaisilla CSS määrityksillä että sijoittelemaan elementtejä dokumentissa CSS:n avulla. Moduulin tehtävänä on muokata edellisen moduulin sivustoa CSS:llä ja palauttaa sivusto pakattuna opettajalle sähköpostiin. 5. CSS3 Viidennessä moduulissa tutustutaan CSS3 tuomiin mahdollisuuksiin hioa www-sivun ulkoasua ja lisätä siihen käyttäjäkokemusta rikastuttavia elementtejä. Tarkastelun ja oppimisen kohteena ovat CSS3:n monipuoliset transformaatio ja transaktio ominaisuudet. Opiskelijan tehtävänä on muokata edellisten moduulien aikana tehtyä www-sivustoa sisältämään CSS3:n transaktio ja transformaatio ominaisuuksia. sivusto palautetaan opettajalle pakattuna sähköpostiin. 6. HTML5 lomake Kuudennessa moduulissa tutustutaan yhteen HTML5 vahvuuksiin eli kehittyneisiin lomakeelementteihin ja attribuutteihin. HTML5 myötä www-lomakkeiden teko on entistä tehokkaampaa ja turvallisempaa. Monipuoliset elementit ja huolella suunnitellut attribuutit antavat erinomaiset välineet www-lomakkeen toteutukselle. Opiskelijan tehtävänä on luoda www-lomake hyödyntäen monipuolisesti HTML5 lomakeelementtejä ja määritellä niihin tarvittavat attribuutit. Valmis lomake palautetaan opettajalle sähköpostitse. 7. HTML5 media & grafiikka HTML5 on myös pyritty kehittämään www-sivujen media ja grafiikka toiminnallisuuksia. 4
Seitsemännessä moduulissa tutustutaankin näihin tekniikoihin ja perehdytään siihen, miten videokuvaa sekä ääntä saadaan liitettyä mukaan www-sivuun. Lisäksi tutustutaan HTML5:n <canvas> sekä <svg> elementteihin ja niiden tarjoamiin mahdollisuuksiin rikastuttaa www-sivun käyttäjäkokemusta. Opiskelijan tulee lisätä moduuleissa 3-5 tekemään sivustoonsa kaksi alasivua, joista toisessa käytetään HTML5 media elementtejä ja toisessa tehdään jotain canvas ja svg elementeillä. Valmis työ palautetaan opettajalle pakattuna sähköpostiin. 8. HTML5 API HTML5 sisältää rajapintoja (API), joiden kautta www-sivua voi entisestään rikastuttaa. Kahdeksannessa moduulissa opiskelija valitsee jonkin näistä rajapinnoista (Geolocation, Drag/Drop, Web Storage ja App Cache). Opiskelija lisää tekemälleen www-sivustolle valitsemallaan API:lla tehdyn toteutuksen ja palauttaa sivuston paketoituna opettajalle sähköpostiin kertoen viestikentässä vähän toteutuksestaan. Pedagoginen suunnitelma Verkkokurssi on tarkoitus tehdä mahdollisimman itsenäiseksi kokonaisuudeksi, jolloin sen voi suorittaa milloin ja mistä vain. Opettaja on tavoitettavissa sähköpostin välityksellä ja kurssille luodaan keskustelupalsta, joihin voi kommentoida ja josta voi löytää tukea ja apua myös muilta kurssilaisilta. Opetusteot Opettaja koostaa kurssin sivuston niin, että kurssin suorittajat kykenevät suoriutumaan kurssista. Sivusto sisältää lähdemateriaaleja moduulien asiasisältöihin, tehtävien annot sekä vinkkejä tehtävien tekoon, keskustelupalsta kurssiin ja sen tehtäviin liittyen sekä kurssin kuvauksen tavoitteineen, sisältöineen ja arvosteluperusteluineen. Opettaja on tavoitettavissa sähköpostitse ja antaa sähköpostin kautta ohjausta, palautetta sekä arvioinnin. Opettajan tehtävä on myös huolehtia, että sivusto, jolla kurssin materiaalit ovat, on oppilaiden käytössä ja sisältää tarvittavat tiedot kurssin läpäisemiseksi. Ohjausteot Opettaja lukee kurssin keskustelupalstoja säännöllisesti ja kommentoi sinne tulevia viestejä. Lisäksi hän lukee kurssilaisten sähköposteja ja reagoi niihin mahdollisimman nopeasti. Viesteissä on ohjaava ote, joka tarkoittaa, ettei vastauksia anneta suoraan vaan koitetaan saada oppilas pääsemään jyvälle, mistä kyse ja tämän jälkeen hän osaisi itse edetä tehtävässä ja löytää tarvitsemiaan vastauksia. Tehtävien annot tulee suunnitella ja toteuttaa niin, että ne ovat selkeät, yksiselitteiset sekä motivoivat. Tehtävät eivät saa olla liian vaikeita, mutteivat myöskään liian helppoja. Tehtävien pitää edetä loogisesti niin, että oppiminen rakentuu konstruktiivisesti, jolloin aiemmin opittua voidaan hyödyntää seuraavassa vaiheessa. tällöin oppimiseen syntyy positiivinen kierre ja motivaatio tehdä tehtäviä säilyvät. 5
Oppimisteot Oppilas varmistaa oppimisensa, kun hän syventyy kurssin materiaaleihin, paneutuu tehtäviin ja kirjoittaa oppimispäiväkirjaa. Oppimispäiväkirjan rooli on toimia ajattelun kehittäjänä ja ymmärryksen lisääjänä. Kun oppilas kirjoittaa oppimispäiväkirjaa, hän prosessoi tuotostaan ja valintojaan. tämä itserefelektointi syventää oppimisprosessia eikä asioiden tekeminen jää pintapuoliseksi suorittamiseksi. Oppimispäiväkirjaan kirjoitetaan lopuksi itsearvioi kurssista. Oppilas huolehtii, että tehtävät ovat vaatimusten mukaiset ja palauttaa ne sovitulla tavalla opettajalle. Oppimistehtävät Kurssin jokaiselle moduulille on suunniteltu tehtävä, joka tulee palauttaa opettajalle arvioitavaksi. Nämä tehtävät sisältävät moduulin olennaisten asioiden siirtämistä käytäntöön. Lisäksi kurssilaisten tulee pitää oppimispäiväkirjaa, joka tukee asioiden sisäistämistä vaatimalla vähän syvällisempää ajattelua. Kurssin lopuksi tehtävä itsearvio on myös pakollinen ja sen avulla koitetaan kasvattaa opiskelijoista oppimisen oppijoita. Arviointi Opettaja arvioi moduulien tehtävät hyväksytty/hylätty periaatteella. Lisäksi opettaja antaa lyhyen kommentin tehtyyn tehtävään. Oppilas voi kommentin saatuaan muokata tehtäväänsä ennen lopullista arviota. Perustuen oppilaan tehtäviin, oppimispäiväkirjaan sekä oppilaan tekemään itsearvioon, opettaja arvioi kurssin samalla hyväksytty/hylätty periaatteella. Kurssin tehtävät ovat niin rakenteellisesti rajattuja ja tarkkaan ohjeistettuja, että hyväksytyissä tehtävissä ei ole juurikaan eroja. Siksi jonkin asteikollinen arviointi esim. 1-5 ei ole perusteltua, koska tasollisia eroja ei opiskelijoiden välille synny. Tekninen suunnitelma Kurssi toteutetaan www-sivustona, jonka rakenne on seuraavanlainen: 6
Sivustolla on yksitoista sivua, joista index.html sisältää kaiken yleisen tiedon kurssista. Moduuleille 1-8 on omat sivunsa ja sivuston tyylitykselle on oma css-kansio ja samoin kuville oma img-kansio. Kurssilla on myös Usein kysytyt kysymykset -sivu, jolle on oma faq.html tiedosto. Keskustelu.html sisältää kurssin keskustelupalstat, joiden kautta opiskelijat saavat sekä vertaisiltaan että opettajalta ohjausta ja tukea kurssin asioissa. Palautteen pystyy antamaan kurssin lopuksi palaute-lomakkeella, joka on palaute.html tiedostossa. Jokaisella sivulla on vasemmassa reunassa navigointi kurssin muille sivuille. Sivujen alareunassa on yhteystiedot. Kaiken kaikkiaan kurssin sivusto on hyvin yksinkertainen ja pelkistetty. Sivuston tarkoituksena on jakaa riittävästi informaatiota riittävän selkeästi, jotta opiskelijat löytävät olennaisen tiedon kurssin suorittamiseen. Yksinkertainen sivuston rakenne ja toteutus takaa myös sen, että sivusto toimii ongelmitta erilaisilla laitteilla, näyttää selkeältä erikokoisilla näytöillä sekä avautuu hyvin kaikilla selaimilla. Täten laitteistovaatimukset kurssin suorittamisen osalta voidaan pitää mahdollisimman keveinä. Kuva etusivusta: 7
Moduulisivut Moduuleiden alasivuilla on linkkejä aihealueen tutustumiseen Internetissä. HTML5:stä ja CSS3:sta on niin hyviä sivustoja olemassa, ettei ole mitään järkeä lähteä keksimään ja rakentamaan pyörää uudelleen. Toisaalta on myös tärkeää oppia hyödyntämään nettiä tietolähteenä, jos aikoo www-kehittäjäksi suunnata, sillä tekniikat kehittyvät koko ajan ja uusia tapoja toimia kehitellään jatkuvasti ja netti on se paikka, missä pitää osata olla ja liikkua, jotta pysyy kehityksen aallonharjalla mukana. Tehtävä sivujen alla on myös ohjeistus moduulin sisältämään tehtävään, sen vaatimuksiin ja palautusohjeistus. Moduulisivun sisällön rakenne on seuraavanlainen: FAQ-sivu Otsikko Moduulin tavoitteet Moduulin asioiden esittely lyhyesti Linkki vinkit Tehtävän anto FAQ-sivulle on kerätty yleisimpiä kysymyksiä ja niiden vastauksia. Sivua päivitetään sen mukaan, millaisia asioita keskustelupalstalla tai sähköposteissa nousee esiin. Sisältöön keskittyvä sivu tämäkin ja toteutetaan pääsääntöisesti tekstinä. Keskustelut 8
Keskustelut sivulle tehdään keskustelupalsta hyödyntäen tal.ki palvelua, jossa voi luoda keskustelupalstan ja upottaa sen omalle sivustolleen. Tal.ki käyttää upotuksessa javascriptiä, joka on nykyään hyvin tuettu eri selaimissa, joten se ei muodosta suurta käytettävyys estettä. Esimerkki tal.ki palvelun upotetusta keskustelupalstasta: Palaute-sivu Palaute-sivulla puolestaan hyödynnetään Google Form-palvelun upotus mahdollisuutta. Palautelomake luodaan Google Form:na ja sitten se upotetaan sivustolle. Näin saadaan käyttöön Googlen lomakkeen analysointi ominaisuudet. Toteutuksen rajaus Sivusto toteutetaan perusrakenteeltaan etusivun, moduuli1:n, keskustelupalstan sekä palaute sivun osalta. Muut moduulit sekä FAQ sivu jäävät toteutuksen ulkopuolelle tässä vaiheessa. Sivusto löytyy osoitteesta: http://users.jyu.fi/~reholapp/ties463/ 9