Tallinna Ülikool Informaatika Instituut

Veebilehtede loomise lühikursus

üldhariduskooli õpilastele WYSIWYG

veebitoimetaja baasil

Bakalaureusetöö

Autor: Mihkel Savendi

Juhendaja: Andrus Rinde

Autor: .................................................................................... ,, .......... ,, 2014

Juhendaja: .............................................................................. ,, .......... ,, 2014

Instituudi direktor: .................................................................. ,, .......... ,, 2014

Tallinn 2014

2

Autorideklaratsioon

Deklareerin, et käesolev bakalaureusetöö on minu töö tulemus ja seda ei ole kellegi teise poolt

varem kaitsmisele esitatud. Kõik töö koostamisel kasutatud autorite tööd, olulised seisukohad,

kirjandusallikatest ja mujalt pärinevad andmed on viidatud.

.............................. ....................................

(kuupäev) (autori allkiri)

3

Sisukord

Sissejuhatus................................................................................................................................. 4

1. Veebidisaini ja veebilehtede loomise temaatika üldhariduskoolides ................................. 6

1.1 Võimalikud raskuskohad veebilehtede loomise ja veebidisaini õpetamisel

üldhariduskoolides .................................................................................................................. 7

1.2 Veebidisaini ja veebilehtede loomise õpetamise võimalused üldhariduskoolides

põhikooli ja gümnaasiumi tasemel ......................................................................................... 8

1.3 Autori nägemus veebidisaini ja veebilehtede loomise õpetamisest ........................... 10

2. WYSIWYG ehk „mida näed, seda saad“ ......................................................................... 12

2.1 WYSIWYG veebitoimetaja eelised ja nõrkused ........................................................ 12

3. Lühikursuse koostamine ................................................................................................... 15

3.1 Vajalikud eelteadmised .............................................................................................. 15

3.2 Mida käsitletakse lühikursuses? ................................. Error! Bookmark not defined.

3.3 Teadmised, mis omandatakse lühikursuse käigus ..... Error! Bookmark not defined.

3.4 Lühikursuse sihtgrupp................................................................................................ 17

3.5 Keerukus ülesannete koostamisel .............................................................................. 17

3.6 Ülesannete lahendamiseks planeeritav võimalik ajakulu........................................... 18

4. Veebitoimetaja valimine kursuse jaoks ............................................................................ 19

4.1 Kursuse jaoks tarkvara valiku kriteeriumid ............................................................... 19

4.2 Ülevaade vabavaralistest veebitoimetajatest.............................................................. 20

4.3 Lühikursuse jaoks tarkvara valimine ......................................................................... 20

4.3.1 MS Expression Web 4 eelised ja nõrkused lühikursusel kasutamiseks .............. 21

4.3.2 BlueGriffon- i eelised ja nõrkused lühikursusel kasutamiseks ............................ 23

Kokkuvõte................................................................................................................................. 25

Summary ................................................................................................................................... 26

Kasutatud kirjandus .................................................................................................................. 27

4

Sissejuhatus

Veebidisaini ja veebilehtede loomise osatähtsus infotehnoloogia valdkonnas aina kasvab.

Veebipõhiste teenuste valik üha suureneb ning kasvab ka nende teenuste tarbijate hulk. Iga

IT-valdkonna inimene puutub vähemal või suuremal määral kokku veebilehtede loomisega.

Disaini tähtsus veebilehel suureneb konkurentsi kasvu tõttu ning iga veebilehe eesmärgiks on

eristuda teistest, olla külastajatele atraktiivne ja leida potentsiaalseid uusi kliente

Huvi tekitamiseks tulevastes veebidisainerites või veebilehtede loojates, tuleks seda

temaatikat õpetada võimalikult varakult, andes baasteadmised juba põhikoolis või

gümnaasiumis. Ühtlasi võimaldaks veebilehtede loomise õpetamine populariseerida kogu IKT

valdkonda noorte seas, aidates omakorda kaasa ka infoühiskonna arengule.

Eesti üldhariduskoolides ei leia veebilehtede loomine ja veebidisain praeguste riiklike

õppekavade kohaselt peaaegu üldse kajastamist. Siiski leidub mõningaid koole, kus õpetakse

antud teemat või sellega tihedalt seotud aineid nagu arvutigraafika. Autor leiab, et üheks

võimalikuks põhjuseks, miks seda ei õpetata on asjaolu, et puuduvad tehniliselt lihtsad

õppematerjalid - praegu kättesaadavad õppematerjalid on eelkõige programmeerimisest.

Üldhariduskoolides kasutatavad IT õppematerjalid peaksid olema lihtsad ning sellised, mis ei

kurnaks vaid innustaks.

Antud bakalaureusetöö eesmärgiks on luua üldhariduskoolidele just selline õppematerjal,

mille järgi oleks lihtne õpetada ning õppida, olles samal ajal loov ja huvitav. Bakalaureusetöö

raames sai loodud lühikursus veebilehtede loomisest, mis põhineb WYSIWYG (What You See

Is What You Get) ehk „mida näed, seda saad“ veebitoimetajal.

Eesmärgi saavutamiseks analüüsib autor hetkel kehtivaid riiklikke õppekavasid. Autor uurib,

kas vabavaraliste WYSIWYG veebitoimetajatega on võimalik luua ilusaid, praktilisi ning

valideeritavaid veebilehti nii, et ei kirjutata ühtegi rida koodi. Selleks teeb autor töö käigus

läbi põhilised algajatele mõeldud koodinäited graafilises keskkonnas ning koostab nende

põhjal vastava õppematerjali

Töö käigus selgitab autor, millised on koostatava kursuse vajadused tarkvara osas, millega

õpetada veebilehtede loomist. Analüüsides neid vajadusi selgitab autor välja parima tarkvara

kursuse jaoks.

5

Bakalaureusetöö tulemusena valmib lühikursus, mille abil on võimalik õpetada veebilehtede

loomist graafiliste vahenditega. Lühikursuse materjalidega saab õpetada veebilehtede loomist

eraldi lühikursusena või kasutada neid materjale lisaks mõnes muus aines veebilehtede

loomise õpetamiseks.

Töö esimeses osas kirjeldatakse IT-d, veebilehtede loomise ja veebidisaini temaatikat

üldhariduskoolides ning pakutakse välja võimalusi nende õpetamiseks. Teises osas seletab

autor lahti WYSIWYG olemuse ning toob välja veebitoimetajate eelised ja nõrkused.

Kolmandas osas räägib autor ülesannete loomisest, nendega seotud keerukusest, sisust ning

sellest, mida peaks kursuse läbija eelnevalt teadma ja mida kursuse lõpuks oskama. Neljandas

osas kirjeldab autor kursuse jaoks veebitoimetaja valimist. Loodud kursuse õppematerjalid on

töö lisas.

6

1. Veebidisaini ja veebilehtede loomise temaatika

üldhariduskoolides

Veebidisainil ja veebilehtede loomisel on märkimisväärne tähtsus IKT (Infotehnoloogia- ja

kommunikatsioonitehnoloogia) valdkonnas. Selle ala spetsialistide järele on suur nõudlus

ning lisaks karjäärivõimaluste avardamisele, pakuks see õpilastele ka baasteadmisi

veebilehtede loomisest, kas siis era- või ärihuvides. Samas on seda võimalik integreerida ka

erinevatesse õppeainetesse, nagu kunstiõpetusse, informaatikasse või isegi matemaatikasse,

kuid sellegipoolest ei leia see peaaegu üldse kajastamist Eesti üldhariduskoolides. Riiklikes

õppekavades pole otseselt veebidisaini ega veebilehtede loomist mainitudki, isegi mitte

informaatika valikaines [16]. Põhjuseid võib olla mitmeid.

Eesti riiklik õppekava (RÕK) ei kohusta koole õpetama informaatikat põhikoolis ega ka

gümnaasiumis, rääkimata siis veebidisainist või veebilehtede loomisest. Alates „Põhikooli

riikliku õppekava“ määruse loomisest 2011. aastal on informaatika olnud üks valikainetest,

samas on seda õpetatud paljudes koolides ka varem [18]. Seda seetõttu, et varasem „Põhikooli

ja gümnaasiumi riikliku õppekava“ määrus võimaldas ka põhikoolidel koostada oma

valikainete ja -kursuste kavad ning koolil oli õigus õpetada informaatikat eraldi õppeainena

[14]. Gümnaasiumis sellist ainet nagu informaatika pole, kuid on erinevaid IKT valdkonda

kuuluvaid valikkursusi, näiteks rakenduste loomise ja programmeerimise aluste kursus ning

arvuti kasutamine uurimustöös [5]. Samas on gümnaasiumidel suurem vabadus oma

valikkursuste korraldamisel.

„Gümnaasiumi riikliku õppekava“ määrus paragrahv 11 lõige 6 sätestab: „Gümnaasium

võimaldab lisaks lõikes 4 nimetatud valikkursustele vähemalt 11 kursuse mahus valikkursusi,

mis arvestavad kooli omapära ja piirkondlikku eripära. Nimetatud valikkursuste hulgas

võivad olla nii riiklikus õppekavas kirjeldatud valikkursused kui ka kooli õppekavast

tulenevad valikkursused. Nende valikkursuste õpe tuleb korraldada vähemalt 12 soovija

olemasolul“ [5]. Sellest tulenevalt pakuvad paljud koolid valikkursusi, mida nende

pedagoogid on võimelised õpetama. See on ka üheks põhiliseks põhjuseks, miks mõnes koolis

õpetatakse arvutigraafikat, veebidisaini või veebilehte loomist ning teises koolis seda ei tehta,

kuna puuduvad vastavad õpetajad.

7

Koolides, kus õpetatakse arvutigraafikat, veebidisaini või veebilehtede loomist kasutatakse

tavaliselt vabavaralisi vahendeid ning õpetajateks on enamasti kooli informaatika või

kunstiõpetuse õpetajad.

1.1 Võimalikud raskuskohad veebilehtede loomise ja veebidisaini

õpetamisel üldhariduskoolides

Autori arvates on üldhariduskoolidel kolm põhilist raskuskohta veebilehtede loomise ja

veebidisaini õpetamise osas, mis tihti kehtivad ka teiste IKT ainete või kursuste kohta.

Esimene neist on vajaliku inimese puudumine, kes valdaks antud teemat ja oskaks

seda ka õpetada.

Teiseks on vastavate õppematerjalide puudumine.

Kolmandaks võib olla vajaliku riistvara puudumine. Järgnevas peatükis leiab autor

neile probleemidele võimalikud lahendused.

Veebilehtede loomise ja veebidisaini õpetamise jaoks vastava pedagoogi leidmist lihtsustab

„Põhikooli- ja gümnaasiumiseadus“. „Põhikooli- ja gümnaasiumiseaduse“ § 74. lõike 7

kohaselt saab direktori poolt korraldatud konkursi korral täita vaba ametikoha tähtajalise

lepinguga, kuni üks aasta, ka keskharidusega isikuga, kui konkursi korras ei leita vastava

ametikoha kvalifikatsiooninõuetele vastavat õpetajat [15], nõuded sätestatakse määruses

„Direktori, õppealajuhataja, õpetajate ja tugispetsialistide kvalifikatsiooninõuded“ [2].See

tähendab, et koolil on võimalik palgata kursust õpetama spetsialist, kellel puudub formaalne

kvalifikatsioon.. Samas on võimalik ka olemasolevatel õpetajatel juhendada veebilehtede

loomist või veebidisaini, kui on olemas vastavad õppematerjalid. Sellisel juhul puudub koolil

vajadus uue inimese palkamise järele ning koolil ei tekiks lisakulutusi.

Lisaks pedagoogi leidmisele tuleb kokku panna ka vastav kursus. Samal eesmärgil kirjutaski

autor oma bakalaureusetöö - soov pakkuda abi pedagoogidele sobiva kursuse koostamisel.

Ülesandeid võivad kasutada ka teiste ainete õpetajad selleks, et õpilastele tutvustada

veebilehtede loomist ühel kõige lihtsamal viisil, milleks on veebilehtede loomine WYSIWYG

veebitoimetaja abil.

Riist- ja tarkvara nõuete tõttu ei pea kindlasti veebidisaini ja veebilehtede loomise õpetus ära

jääma. Tänu vabavaralistele vahenditele peaks kõigil koolidel olema tehnilised võimalused

veebidisaini ja veebilehtede loomise õpetamise jaoks. Vabavaraliste vahendite soetamine ei

8

too koolidele kaasa lisakulutusi ning samuti on vabavaraliste vahendite miinimumnõuded

riistvarale tihi madalamad võrreldes kommertstarkvaraga. See võimaldab kaasaegsete

vahenditega õpetamist ka vananenud arvutiklassides.

1.2 Veebidisaini ja veebilehtede loomise õpetamise võimalused

üldhariduskoolides põhikooli ja gümnaasiumi tasemel

Veebidisaini ja veebilehtede loomise oskus on tänapäeval väga vajalik ning selle olulisus aina

kasvab. Seetõttu tuleks anda vastavad baasteadmised võimalikult varakult järgides, et

õpetatav oleks õpilaste jaoks lihtne ja huvitav.

Praeguste õppekavade kohaselt on veebidisaini ja veebilehtede loomise õpetamiseks

gümnaasiumis kaks valikut, kas põimida need teistesse ainetesse või luua eraldi valikkursus.

Põhikoolis pole praeguse õppekava kohaselt võimalik luua eraldi valikkursust veebilehtede

loomisest või veebidisainist. Põhikoolis saaks veebidisaini põimida kunstiõpetusse ja

veebilehtede loomise informaatika valikainesse. Samas juba ainuüksi veebilehte disainides

valmibki staatiline veebileht, seda küll ainult oma välimuselt. Selleks, et taoline veebileht

töötaks nagu tavapärane veebileht, tuleks see integreerida veebilehtede loomise õpetusega ,

mille käigus luuakse lehele vajalik programmikood. Viimast saaks käsitleda näiteks

informaatika valikaines, soovitatavalt läbi graafiliste vahendite.

Veebidisaini oleks suhteliselt lihtne põimida kunstiõpetusega juba seetõttu, et nii põhikooli

kui ka gümnaasiumi RÕK-i kuuendas lisas „Kunstiained“ on ettenähtud digitaalse

tehnoloogia kasutamine. Täpsemalt, põhikooli kunstiõpetuse III kooliastme (7. – 9. klass)

õppesisus on ettenähtud digitaalsete tehnoloogiate kasutamine loovtöödes (foto, video,

animatsioon, digitaalgraafika) ning teksti ja pildi koosmõju graafilises disainis [17]. Oma

olemuselt võikski see katta nii veebidisaini teooriat kui ka praktilist osa, sest veebileht ongi

tihti oma välimuselt piltide ja tekstide kogum.

Gümnaasiumi astmes on kunstiaine õppesisus disaini rohkem käsitletud kui põhikoolis ning

seetõttu leidub seal hulgaliselt veebidisaini toetavaid teemasid, nagu graafiline disain ning

meedia tarbija kui mõjutaja ja mõjutatav. Loominguliste ja uurimuslike projektide all on ära

toodud ka pildi ja teksti koosmõjud, milleks võib olla graafiline kujundus, logo või

kirjakujundus, mis kõik on iseenesest ka osa veebilehest ja veebidisainist. Samuti on mainitud

probleemilahenduslikud disainiülesanded (mudel, joonis, eksperiment materjalidega jne), mis

9

võiks autori arvates olla ka veebilehe praktiline kujundus, kus õpilased leiaksid parima

vajadustele vastava disaini [4].

Autor leiab, et kui kunstiõpetuse õppekavas on mõned elemendid veebidisainist juba sees, siis

võiks neid ka käsitleda veebidisainina kunstiõpetuses - arendab õpilaste loovust vägagi

praktilisest ja eluks vajalikust küljest. Arvestades tundide arvu piirangut ja kunstiõpetuses

läbitavat suurt mahtu, ei leia autor, et lisaks veebidisainile oleks võimalik mahutada sinna

sisse ka veebilehtede loomise õpetus. Seega tuleks seda käsitleda mõnes muus aines nagu

informaatikas või mõnes teises IKT aines.

Põhikooli RÕK lisa valikaine „Informaatika“ veebilehtede loomist kui läbivat teemat ei

käsitle. Küll propageeritakse veebipõhiste õpikeskkondade kasutamist, tehtud tööde

üleslaadimist, esitluste läbiviimist, mille käigus õpilane loob endale isikliku e-portfoolio [16].

Autori arvates võiksid õpilased luua endale õppetöö käigus ka isikliku veebilehe, mida

õpilased saaksid kasutada esitluste läbiviimiseks või mõnel muul moel õppetööd toetavaks

tegevuseks. Kuid selleks tuleks veebilehtede loomine selgelt välja tuua põhikooli riiklikus

õppekavas informaatika osas, mis eeldab informaatika valikainet puudutava määruse

muutmist. See muidugi ei tähenda, et seda ei võiks õpetaja soovi korral käsitleda mõnes muus

aines.

Tänu Tiigrihüppe Sihtasutuse programmi Progetiiger raames loodud õppematerjalidele saavad

1.-12. klassi õpilased tutvust teha programmeerimisega, veebirakenduste ning veebilehtede

loomisega. Hariduse Infotehnoloogia Sihtasutuse ehk HITSA Innovatsioonikeskuse

(varasemalt, Tiigrihüppe Sihtasutus) õppematerjalide alt võib leida veebilehtede loomise ja

disaini kursuse III ja IV kooliastme jaoks, mille on koostanud Merike Hein, võimaldades seda

õpetada varasemates kooliastmetes [6]. Samas leiab autor, et need õppematerjalid on liiga

keerulised III kooliastme õpilaste jaoks, kuna nende õppematerjalide järgi luuakse veebilehti

läbi programmeerimise, mis ei pruugi liigse keerukuse tõttu õpilastes IKT vastu huvi äratada.

Autori arvates oleks õpilastel kasulikum alustada veebilehtede loomist läbi graafiliste

vahendite ning seejärel liikuda edasi programmeerimise juurde.

Gümnaasiumis on olukord veebilehtede loomise osas parem, mis tuleneb paljuski

gümnaasiumide vabadusest koostada valikkursusi. Mõnes koolis ei õpetata otseselt

veebilehtede loomist, kuid õpetatakse sellega tihedalt seotud ainet nagu meedia-arvutigraafika

Tallinna Arte Gümnaasiumis, mille sisse oleks lihtne põimida elemente veebilehtede

loomisest [13]. Teistes koolides, nagu Tartu Jaan Poska Gümnaasiumis, on eraldi

10

veebilehtede loomist käsitlev kursus. Tartu Jaan Poska Gümnaasiumis on selleks veebidisaini

valikkursus, mis põhineb HITSA Innovatsioonikeskuse õppematerjalidel ning mille raames

käsitletakse ka veebilehtede loomist [9].

1.3 Autori nägemus veebidisaini ja veebilehtede loomise

õpetamisest

Teistesse ainetesse põimimise tulemusena näeks autor veebidisaini ja veebilehtede loomise

õpetamist ette sellisena, et kunstiõpetuses tehakse valmis kavand tulevasest veebilehest nii, et

seda oleks hiljem võimalik kasutada veebilehe loomisel. Kavand võib olla ka paberil

kujundatud, kui on hiljem võimalik see mõnes graafikatöötlusprogrammis valmis teha,

parimal juhul võiks seda teha arvutigraafika tunnis.

Vastavas aines, kus juba õpetatakse või on võimalik õpetada veebilehtede loomist, tuleks

loodud kavand üles seada ning panna see toimima kui üks terviklik veebileht. Seda kõike

tuleks teha võimalikult lihtsalt, et õpilastel tekiks huvi IKT ja veebilehtede loomise vastu.

Siinkohal leiab autor, et kõige lihtsam viis alustada veebilehtede loomisega on kasutada

selleks graafilisi WYSIWYG veebitoimetajaid ning võimalusel vältida üldse koodi

kirjutamist.

Veebilehtede loomist võiks õpetada ka täiesti eraldi valikkursusena gümnaasiumis, sarnaselt

Tartu Jaan Poska Gümnaasiumile. Seni kuni pole võimalik anda eraldi kursust veebilehtede

loomisest, võiks seda käsitleda kunstiõpetuses või mõnes muus veebilehtede loomist toetavas

aines. Seda võiks uurida vähemalt kahe-kolme tunni ulatuses, mis annaks õpilastele

mingisugusegi ettekujutuse sellest, kuidas veebilehti koostatakse. Eraldi kursusena

gümnaasiumis võiks veebilehtede loomist käsitleda juba põhjalikumalt, kui selles töös on

kirjeldatud, kuid sissejuhatuseks oleks mõistlik seda siiski lähemalt uurida. Iseseisva kursuse

puhul ei peaks veebilehtede disaini niivõrd põhjalikult käsitlema, kui seda oleks võimalik juba

eelnevalt teha kunstiõpetuse või arvutigraafika tunnis. Keskendudes rohkem veebilehtede

ülesehitamisele algul graafiliste vahendite abil ning seejärel koodikirjutamisega.

Veebidisaini käsitlemine kunstiõpetuses annaks nii praktilisi kui ka teoreetilisi teadmisi

veebidisaini osas, võimaldades õpilastel end sedasi virtuaalmaailmas paremini väljendada.

Esmane tutvus veebilehtede loomisega tuleks teha juba põhikooli informaatika tunnis.

Gümnaasiumides võiks olla ka eraldi 35 tunnine (RÕK min) veebilehtede loomise valikkursus

[5], mis keskenduks rohkem veebilehtede loomisele, vähem disainile.

11

Autori arvates peaksid õpilased saama algteadmised veebist põhikoolis ning gümnaasiumis

seda juba veidi põhjalikumalt käsitlema. Niisugune ülesehitus annaks üldhariduskooli

õpilastele ettekujutuse, mida kujutab endast veebilehtede loomine ning laiemalt IKT

valdkond, võimaldades neil paremini teha edasisi karjääri või haridustee valikuid. Autori

väidet toetab ka „Gümnaasiumi riikliku õppekava“ määruse paragrahv 3 lõige 2, mis sätestab

et, gümnaasiumi õpetuse ja kasvatuse põhitaotluseks on see, et õpilased leiaksid endale huvi

ja võimetekohase tegevusvaldkonna, millega siduda enda edasine haridustee [5].

12

2. WYSIWYG ehk „mida näed, seda saad“

„WYSIWYG tuleneb ingliskeelsest fraasist „What You See Is What You Get„ ehk eesti keeles

„mida näed, seda saad“. See tähendab, et dokument näeb pärast printimist või veebi

ülespanemist täpselt samasugune välja, nagu see oli arvuti ekraanil [24]. WYSIWYG alla

kuuluvad ka levinud tekstitöötlusprogrammid nagu MS Word ja LibreOffice, samuti ka

erinevad esitlusprogrammid.

Antud töö kontekstis tähendab see seda, et veebilehe loomine käib graafiliselt ning eelnevalt

pole vaja koodi kirjutada. Toimingud, mis on tehtud disainivaates, kajastuvad brauseris

veebilehte kuvades täpselt nii nagu need olid kuvatud disainivaates. Seega „mida teed, seda

näed ja seda ka saad“.

Veebitoimetajate puhul tähendab WYSIWYG, et disainivaates tehtud muudatustele

genereeritakse muudatusi kajastav kood HTML-is (HyperText Markup Language) ehk

hüpertekst-märgistuskeeles ja/või CSS-is (Cascading Style Sheets) ehk kaskaadlaadistikus.

Sellisteks muudatusteks võivad olla kujunduse vormindamine, toimingud sisu elementidega

jms. Vastav genereeritud kood peaks hiljem veebibrauseris välja nägema samasugune nagu

see oli veebitoimetaja disaini keskkonnas. Koodis tehtud muudatused kuvatakse jälle

disainivaates. Mõned WYSIWYG veebitoimetajad ei toeta disainivaates muudatuste tegemist,

selle asemel kuvavad nad reaalajas koodis tehtud muudatusi eelvaates, nagu Aptana Studio

või CoffeeCup HTML Edior. Antud töö puudutab neid WYSIWYG veebitoimetajaid, mis

võimaldavad teha muudatusi disainivaates.

2.1 WYSIWYG veebitoimetaja eelised ja nõrkused

Kuigi on olemas laias valikus WYSIWYG veebitoimetajaid, siis leidub ka neid, kes eelistavad

WYSIWYG veebitoimetajatele programmeerimist. Siin on ära toodud mõned WYSIWYG

veebitoimetaja võimalikud eelised ja nõrkused võrreldes programmeerimisega. Vastu ja poolt

argumendid põhinevad Jennifer Kyrnin’i artiklitel [10; 11] ning autori oma kogemustest

erinevate WYSIWYG veebitoimetajatega.

Eelised:

WYSIWYG veebitoimetajad on tunduvalt kergemini õpitavad. Põhilised asjad saab

selgeks suurema vaevata, vajamata selleks teadmisi programmeerimises. Kasutaja

13

saab hõlpsasti soovitud elemendid vajalikule kohale lohistada [10]. See on ühtlasi üks

peamisi põhjusi, miks autori arvates on WYSIWYG veebitoimetaja parim õppevahend

üldhariduskoolis veebilehtede loomise õpetamiseks.

Mõningate muudatuste tegemisel kiirem kui programmeerimisel, nagu tabelite, piltide

või muude elementide lisamisel. Võimaldades neid lihtsalt ja koheselt vastavalt

vajadusele redigeerida.

Algajatel on mugavam kasutada, veebilehe disaini- või koodivaates on lihtne ringi

liikuda ja teostada soovitud muudatusi, võrreldes tekstiredaktorist õige koodirea

otsimisega.

Nii koodis kui ka disainivaates tehtud muudatused kuvatakse koheselt disainivaates -

ei pea salvestama ega avama lehte uuesti brauseris nagu see on tavalise HTML

programmeerimise puhul.

Veebilehel paiknevaid elemente on lihtne paigutada. Ei pea neid koodis pikslite kaupa

paika panema.

Professionaalsed veebitoimetajad nagu Adobe Dreamweaver on väga laialdaste

võimalustega.

Nõrkused:

Kõik programmid ei paku piisavalt võimalusi, et läbi graafilise liidese saaks kasutada

kõiki HTML-i või CSS-i elemente.

Enamik WYSIWYG veebitoimetajatest on tasulised. Häid tasuta alternatiive on vähe

ning enamasti on nende arendus seiskunud.

Veebitoimetajad võivad genereerida liigset koodi, mis võib raskendada veebilehtede

lugemist mõnedel brauseritel. See viga esines rohkem varasematel WYSIWYG

veebitoimetajatel, uuemad võimaldavad kasutajal liigseid märgendeid (tags)

automaatselt eemaldada [10].

Kood ei pruugi olla täielikult valideeritav ehk standarditele vastav. See oli suureks

probleemiks varasematel WYSIWYG veebitoimetajatel, enamus kaasaegseid

veebitoimetajaid genereerivad põhiliselt standarditele vastavat koodi. Mõned uuemad

veebitoimetajad võimaldavad ise valida standardi, millele leht peaks vastama ja

programm teeb ise vastavad muudatused ning puhastuse [10].

Kunagi ei saavutata päris „mida näed, seda saad“ efekti, kuna brauserid on niivõrd

erinevad, siis kõigis brauserites ei näe veebileht kindlasti samasugune välja [10].

14

Muudatuste tegemine võib olla ajakulukas. Võrreldes programmeerimisega võib vea

parandamine või muudatuse tegemine kauem aega võtta, kuna serveris olev fail tuleb

avada kohalikus arvutis WYSIWYG veebitoimetajaga, sisse viia muudatus, salvestada

ning siis tagasi serverisse üles panna. Koodis saaks muudatuse koheselt teha [11].

Professionaalsed programmid võivad olla niivõrd võimalusterohked, et kogu

programmi tundma õppimine võib võtta üpris kaua aega [10].

Kokkuvõte

Inimesed, kellel puuduvad teadmised HTML-ist, võiksid kasutada lihtsama veebilehe

loomisel WYSIWYG veebitoimetajat, samuti võiks see sobida veebidisaineritele. Samas

need, kes soovivad hakata veebilehtede loomisega tõsisemalt tegelema peaksid endale selgeks

tegema ka programmeerimise.

15

3. Lühikursuse koostamine

Autori nägemus sellest, kuidas veebilehtede loomist tuleks või saaks õpetada, on kirjeldatud

alapeatükis „Autori nägemus veebidisaini ja veebilehtede loomise õpetamisest“ (vt ptk 1.3, lk

10). Lühikursuse õppematerjalid on loodud selliselt, et neid saab kasutada nii eraldi kursuse

läbiviimisel kui ka teistesse ainetesse osadena integreerimisel. See võimaldab õpetajal valida

endale sobivad ülesanded, mida õpilastega jagada, andes neile teadmised sellest, kuidas saab

luua veebilehti WYSIWYG veebitoimetaja abil, ühegi koodirea kirjutamiseta.

Ülesannete koostamisel lähtus autor paljuski W3C (World Wide Web Consortium)

definitsioonidest, kirjeldustest ja õppematerjalidest ning nende ülesehitusest [20; 21; 19].

W3C on põhiline rahvusvaheline organisatsioon, mis tegeleb veebi-standardite välja

töötamisega, mis tagab õppematerjali kaasaegsuse ning standarditele vastavuse. Samuti peab

autor seda kõige objektiivsemaks allikaks HTML-i ja CSS-iga seotud teemade puhul. Lisaks

W3C-le kasutas autor vähesel määral ka w3schools õppematerjale ja definitsioone ning

kirjeldusi [23; 22].

Kursuse loogilisemaks ülesehituseks oli autor sunnitud valima lühikursusel kasutatava

programmi, milleks osutus Microsoft Expression Web 4. Tarkvara valikut kirjeldab autor

peatükis „Veebitoimetaja valimine kursuse jaoks“ (vt ptk 4, lk 19) ning lähemalt alapeatükis

„Lühikursuse jaoks tarkvara valimine“ (vt ptk 4.3, lk 20).

3.1 Vajalikud eelteadmised

Kuigi tegemist on võrdlemisi lihtsa kursusega IKT valdkonnas, eeldab see siiski mõningaid

eelteadmisi ja oskusi. Eelpool sai mainitud, et ka levinud tekstitöötlusprogrammid kuuluvad

WYSIWYG programmide alla, seega on kindlasti vajalik varasem kokkupuude

tekstitöötlusprogrammide või muude WYSIWYG programmidega, mille käigus on

omandatud oskused lisada ja redigeerida teksti, tabeleid ning pilte. See lihtsustab oluliselt

õppimist antud lühikursuse õppematerjalide abil, sest siis on paljud toimingud õpilaste jaoks

juba tuttavad. Lisaks tuleb kasuks graafikatöötlusprogrammide kasutamise oskus, kuna nende

abil saab veebilehele luua põnevaid ja intrigeerivaid kujunduselemente. Viimane ei ole

kohustuslik, sest õppematerjalidega on kaasas autori poolt loodud ja Creative Commons Deed

CC0 [1] alusel väljastatud materjalid Pixabay saidilt [12].

16

3.2 Lühikursuse planeeritavad teemad

Lühikursuse jooksul antakse lühiülevaade sellest, mida kujutavad endast HTML, CSS ja

nende standardid ning kuidas on nende abil võimalik veebilehti luua visuaalses keskkonnas.

Lühikursuse lõpuks valmib terviklik veebileht.

Lühikursuse õppematerjalides käsitletakse põhilisi HTML elemente ja märgendeid, mille abil

elemendid kirja pannakse. See peaks andma õpilastele baasteadmised HTML-iga töötamisel.

Samuti tutvustatakse lühidalt ka CSS-i, mida kasutatakse HTML elementide ja veebilehe

kujundamisel. Õpitakse kasutama visuaalset veebitoimetajat. Antud lühikursuses kasutatakse

MS Expression Web 4, kus disainivaates rakendatakse erinevaid HTML ja CSS elemente,

millele omistatakse vastavad märgendid.

Kursus on oma olemuselt praktikum, kus teooriale on pööratud vähem tähelepanu. Lühikursus

algab HTML-i ja CSS-i tutvustavast sissejuhatusest, seejärel liigutakse edasi HTML-i

harjutuste juurde, millele järgnevad harjutused CSS-iga ning lõpptulemusena peaks valmima

terviklik veebileht koos kujundusega. Käsitlevate teemade valikul ja järjestusel nii HTML kui

ka CSS osas lähtus autor paljuski W3C koodinäidete õppematerjalidest [21; 19].

Käsitletavad teemad:

Sissejuhatus – Mis on HTML, mis on CSS ja nende standardid

Teksti ja loendite kasutamine

Hüperlinkide kasutamine

Meedia kasutamine

Tabelite kasutamine

Metaandmete kasutamine

Kaskaadlehestiku linkimine veebilehele, sõltumatus sisust

HTML elemendile laadi lisamine ning selle kasutamine

Sisu paigutamine lehel

Elementide grupeerimine

Videote lisamine Youtube-i keskkonnast ja Google Maps-i kasutamine veebilehel

17

3.3 Lühikursuse oodatavad õpiväljundid

Kursuse läbinud õpilane omab baasteadmisi HTML-is ja CSS-is ning oskab neid teadmisi ja

oskusi rakendada iseseisvalt või koostöös teistega reaalses elus.

Õpilane oskab iseseisvalt koostada lihtsamaid veebilehti visuaalsete vahendite abil. Lisaks

teab, mida kujutavad endast erinevad veebielemendid ning oskab neid kasutada veebilehe

loomisel. Kursuse läbijal peaks tekkima ettekujutus ka sellest, mismoodi käib objektide

paigutus veebilehel. Lisaks saadakse oskused visuaalse veebitoimetaja kasutamisel.

3.4 Lühikursuse sihtgrupp

Lühikursuse koostamisel proovis autor olla võimalikult mitmekülgne, et tagada võimalikult

lai sihtgrupp. Lühikursuse sihtgrupina näeb autor eelkõige algajaid- põhikooli kui ka

gümnaasiumi õpilasi ning teisi, kellel on huvi veebilehtede loomise vastu ja kellel on

omandatud eelpool mainitud teadmised.

Lühikursuse õppematerjalid on koostatud selliselt, et neid saaks käsitleda gümnaasiumiastmes

eraldi valikkursusena või veebiprogrammeerimise/veebilehtede loomise valikkursuse

sissejuhatava osana, millele järgneb veebilehtede loomise kursus programmeerimise kaudu.

Teistesse ainetesse põimituna saaks kursuse materjale kasutada nii põhikoolis kui ka

gümnaasiumis. Kuna ainetesse põimumine seab teatud ajalised piirangud, peab õppematerjale

käsitlev õpetaja ise valima lühikursuse õppematerjalide hulgast välja need teemad, mida ta

peab õpilaste jaoks vajalikuks ning jõukohaseks.

3.5 Keerukus ülesannete koostamisel

Ülesannete loomise tegi keeruliseks see, et ülesanded tuli koostada WYSIWYG põhimõttel.

Seega tuli autoril koodinäited ringi teha nii, et neid saaks rakendada Expression Web 4

disainivaates, andes sama tulemuse, mille saavutaks programmeerides. Sellegi poolest

õnnestus autoril koostada terve lühikursus puhtalt visuaalsete vahendite abil ning töö käigus ei

kirjutatud ühtegi rida koodi. Sellisel viisil loodud veebilehed valideerisid ka kenasti. Seega

genereeris programm nõuete kohast koodi.

Kuna autor ei olnud varem Expression Web-i kasutanud, võttis lihtsate asjade tegemine üpris

kaua aega. Autoril kulus ülesannete koostamisele kokku rohkem kui 35 tundi. Samas leidis

18

autor, et Expression Web-is oli HTML-i koodinäited üpriski lihtne ja loogiline läbi teha [21].

Autor kasutas ka W3C CSS koodnäiteid CSS harjutuste koostamisel, kuid seda minimaalselt

[19], sest neid oli liigselt keeruline või ei saanud neid üldse disainivaates kasutada. Seega

kombineeris autor ise CSS harjutused, mida HTML elementidega siduda. Selleks pidi autor

palju katsetama Expression Web-i CSS-i erinevate kasutusviisidega, et leida sobivad

lihtsamad asjad, mida kursusel saaks kasutada.

3.6 Ülesannete lahendamiseks planeeritav ajakulu

Ülesanded on ülesehitatud loogilises järjestuses, alustades lihtsamatest ning liikudes edasi

keerukamate juurde. Teadmiste kontrolliks mõeldud ülesandeid võib lahendada nii koolis kui

ka kodus, grupitööna või individuaalselt, vastavalt sellele, kuidas õpetaja paremaks peab.

Ülesannete lahendamiseks on oluline läbi töötada ülesannetele eelnevad harjutused. Parem

oleks ülesandeid lahendada koolitunnis, kus õpetaja saab õpilasi vajadusel abistada.

Võimalik orienteeruv ajakava harjutuste lahendamisel 45 minuti pikkuste tundide puhul

(ülesanded asuvad lisas). Tegelik ajakulu sõltub paljuski juba õpetaja ning õpilaste

võimekusest.

Tund Harjutused Teema

1 Sissejuhatus HTML, CSS ja nende standardid

2 Harjutus 1 ja 2 Orienteerumine tarkvaras, uues saidi lisamine

3 Harjutused 3 ja 4 Tekst ja hüperlingid

4 Iseseisev ülesanne 2 Omandatud teadmiste kasutamine

5 Harjutus 5 Meedia elemendid

6 Harjutus 6 ja 7 Tabelid ja metaandmed

7 Iseseisev ülesanne 2 Omandatud teadmiste kasutamine

8 Harjutus 8 ja 9 Laadilehed, kujundus

9 Harjutus 10 ja 11 Päis ja menüüriba

10 Harjutused 12 kuni 14 Jalus, sisu paigutamine lehel ja lehestiku loomine

11-12 Lisaharjutus Youtube-i videod ja Google Maps-i kaardid

13-14 Iseseisev ülesanne 3 Võtab kokku kursuse käigus omandatud teadmised

19

4. Veebitoimetaja valimine kursuse jaoks

Erinevaid WYSIWYG veebitoimetajaid on hulgaliselt, kuid selliseid mis sobiksid

üldhariduskoolile, pole nii palju. Mitmed ei sobi seetõttu, et on tasulised, harjumatu

kasutajaliidesega või vähese funktsionaalsusega.

Järgnevates peatükkides kirjeldab autor kursuse jaoks sobivaima tarkvara leidmist.

4.1 Kursuse jaoks tarkvara valiku kriteeriumid

Üldhariduskoolis peaks eelkõige kasutama vabavaralist või tasuta tarkvara. RÕK seda ei

kohusta, vaid soovitab koolidel võimaluse korral kasutada vabavaralisi vahendeid. Põhikooli

riikliku õppekava lisa 10 kohaselt on üheks informaatika õpetamise põhimõtteks põhikoolis

vabatarkvara ja avatud sisu, mille kohaselt eelistatakse võimaluse korral kommertstarkvarale

vabatarkvara [16]. Vabavara kasutamise eeliseks üldhariduskoolides on, et see ei too koolile

ega ka õpilastele ja nende vanematele kaasa lisakulutusi. See võimaldab õpilastel end

arendada sõltumata nende pere sissetulekust, ainukeseks eelduseks on siiski sellise arvuti

kasutamisvõimalus, mis toetaks õppetöös kasutatavat tarkvara.

Üldhariduskoolides kasutatav tarkvara ei tohiks olla liialt keerukas. Liigne keerukus teeb

õpilaste jaoks õppimise raskeks ning õpetaja jaoks õpetamise , mistõttu peaks tarkvara olema

suhteliselt kergesti kasutatav. Tarkvara keerukust hindab autor kasutajaliidese põhjal, sest

antud kursusel käivad praktiliselt kõik toimingud läbi graafilise kasutajaliidese.

Kasutajaliidest hindab autor selle põhjal, kui palju sarnaneb tarkvara teiste levinud

tarkvaradega ning kas toimingute teostamine on lihtne ja loogiline.

Tarkvara peab võimaldama põhiliste HTML ja CSS elementide kasutamist disainivaates liigse

keerukuseta. Oluline selleks, et tarkvara saaks kasutada lühikursusel õpetamiseks. Elemente,

mille kasutamist peab tarkvara võimaldama on kirjeldatud peatükis „Lühikursuse koostamine“

(vt ptk 3, lk 15) alapeatükis „Lühikursuse planeeritavad teemad“ (vt ptk 3.2, lk 16).

Tarkvara poolt genereeritud kood peab olema valideeritav, tagades loodava veebilehe

standarditele vastavuse ning seeläbi töökindluse erinevates brauserites ja seadmetes. Vastasel

juhul võib loodav veebileht olla „ebastabiilne“ - töötab ühes brauseris või seadmes, kuid

teises mitte.

20

4.2 Ülevaade vabavaralistest veebitoimetajatest

Selgitamaks välja, milliseid vabavaralisi WYSIWYG veebitoimetajaid üldse olemas on,

teostas autor otsinguid otsingumootoris Google. Otsingu teostamisel kasutas autor märksõnu,

nagu „best free WYSIWYG web editors“, „free WYSIWYG web editors“, „top free WYSIWYG

editors“, „open source WYSIWYG web editors“ jne. Otsingutulemuste põhjal jaotas autor

vabavaralised WYSIWYG veebitoimetajad kahte rühma:

1. Sisuhaldussüsteemides kasutatavad ja veebipõhised.

2. Eraldi seisvad veebitoimetajad – disainivaatega, kus muudatusi saab teostada ja

eelvaatega, kus kajastatakse reaalajas koodis tehtud muudatused.

Esimesse rühma kuuluvad veebitoimetajad ei sobinud kursuse läbiviimiseks seetõttu, et nad

pakkusid vähest funktsionaalsust. Lisaks tuli disainivaates loodava veebilehe kood kopeerida

eraldi faili ning alles siis oli seda võimalik kuvada kui veebilehte. Sisuhaldussüsteemides

kasutatavad programmid eeldasid eelkõige sisuhaldussüsteemi olemasolu, mis antud kursuse

jaoks ei olnud vajalik.

Antud töö jaoks olid olulised teise rühma kuuluvad disainivaatega vabavaralised

veebitoimetajad. Otsingu käigus leidis autor veidi üle kümne erineva veebitoimetaja, mis

kuulusid teise rühma. Samas selgus disainivaate olemasolu enamasti peale tarkvara

paigaldamist, seetõttu tuli sobilike tarkvarade leidmiseks üle vaadata hulk erinevaid

programme.

Järgmise sammuna sorteeris autor oma arvutisse paigaldatud veebitoimetajate seast välja

need, mis võiksid rahuldada lühikursuse olemusest tulenevaid tingimusi. Seejärel tutvus autor

programmide kasutajaliidestega ning proovis lisada mõningaid kursusel kasutatavaid

elemente, saades seeläbi parema ülevaate tarkvara funktsionaalsusest.

4.3 Lühikursuse jaoks tarkvara valimine

Peale lähemat tutvumist paigaldatud veebitoimetajatega jäi sõela põhjale kaks tarkvara, mis

sobiksid lühikursuse läbi viimiseks. Nendeks olid vabavaraline BlueGriffon ja Microsofti

Expression Web 4, mis on alates 2012. aasta detsembrist kõigile vabavaraliselt kättesaadav.

Peamine põhjus, miks teised vabavaralised veebitoimetajad ei sobinud oli see, et neid pole

aastaid kaasajastatud ega edasi arendatud. Seetõttu olid nende võimalused väga piiratud - ei

21

toetanud HTML5-t ning olid iganenud kasutajaliidesega, mis meenutasid MS Windows 98 või

Windows 2000 aegseid programme.

4.3.1 MS Expression Web 4 eelised ja nõrkused lühikursusel kasutamiseks

MS Expression Web 4 on vabavaraline veebitoimetaja, mis varem oli tasuline

kommertstarkvara. Autor selgitas välja tarkvara sobivuse kursuse jaoks, selle tulemusena

koostas autor loetelu tarkvara eelistest ja nõrkustest.

Eelised:

MS Expression Web 4 kasutajaliides on mugav ja loogiline - sarnaneb teiste levinud

tarkvaradega.

Programm sarnaneb teiste professionaalsete WYSIWYG veebitoimetajatega –

tegevused MS Expression Web 4 keskkonnas on väga sarnased tegevustele Adobe

Dreamweaver keskkonnas, mis on enim kasutatav professionaalne WYSIWYG

veebitoimetaja.

Veebilehe elementide lisamisel saab kasutada puksimise meetodit (drag & drop).

Disainivaates saab elementide suurust hõlpsasti muuta.

Pakub suurt funktsionaalsust.

Visuaalsete vahendite abil saab kasutada enamikke HTML-i ja CSS-i elemente.

Programmi kasutamise kohta on olemas hulgaliselt õppematerjale nii eesti kui ka

inglise keeles. Kahjuks leidub eesti keeles vaid koodi kirjutamise alaseid

õppematerjale.

Disainivaates on laade ehk vormindusparameetrite kogumeid (style) lihtne

taaskasutada.

Programmi poolt genereeritud veebilehed olid ühed paremini valideeritavad.

Toetab Adobe Flash-i.

Visuaalsete vahendite abil saab lisada videoid otse Youtube-i keskkonnast.

MS Expression Web 4 toetab HTML 5 skeemi (schema).

22

Tarkvarale on võimalik paigaldada lisasid (add-in).

Nõrkused:

MS Expression Web 4 ei arendata enam edasi.

Programm toetab ainult MS Windows platvormi.

Visuaalsete vahendite abil pole võimalik kasutada kõiki HTML5 elemente. HTML5

heli ja videot ei ole võimalik lisada graafilise liidese kaudu, kuid seda saab teha

kodeerides.

Kõiki HTML-i elemente pole võimalik kasutada graafilise liidese kaudu.

Kokkuvõte

Võimalusterohke ning mugav vabavaraline WYSIWYG veebitoimetaja, mis osutus autori

arvates parimaks veebitoimetajaks lühikursuse läbiviimisel. Põhjuseks on, et õpilaste jaoks

peaksid mõned toimingud juba tuttavad olema läbi tekstiredaktori kasutamise, mis teeb

tarkvaraga ümber käimise lihtsamaks. Samuti sarnaneb see väga palju Adobe

Dreamweaveriga, mis võimaldab kursuse läbinutel hõlpsasti üle minna professionaalsele

kommertstarkvarale. Lisaks on Expression Web 4-l palju sarnasusi ka MS Visual Studio-ga,

mis on samuti levinud professionaalne veebiarendus tarkvara.

Suurimaks miinuseks programmi juures on kindlasti see, et ei toeta paljusid HTML5-e

elemente graafilises liideses. Arenduse seiskumise tõttu ei ole ka lootust, et see võimalus

kunagi tekiks. Seni kuni pole loodud ühtegi võrdväärset alternatiivi Expression Web-le, mille

kaudu veebilehtede loomist õpetada läbi graafilise liidese, sobib Expression Web selleks

ideaalselt.

Lisaks MS Expression Web 4-le tehti vabavaraliseks tema sõsarprogramm Expression Design

4, mis on graafika töötlusprogramm, mille abil saab veebilehele luua kujundus- elemente.

Eesti keelsed lisaõppematerjalid

Eesti keelsed Expression Deisgn-i ja Expression Web 4 (programmeerimine) alased

õppematerjalid on kättesaadavad Eneta ja Moodle keskkonnas [3; 8; 7]. Moodle keskkonnas

on õppematerjalid eraldi põhikooli ja gümnaasiumi jaoks. Moodle-s on vaja eelnevalt sisse

logida oma kasutajaga ja seejärel registreerida end kursusele, külalise parool on Tiigrike ja

õppija parool on opilane123.

23

4.3.2 BlueGriffon-i eelised ja nõrkused lühikursusel kasutamiseks

BlueGriffon on kaasaegne vabavaraline veebitoimetaja. Autor selgitas välja tarkvara sobivuse

lühikursuse jaoks ning koostas selle põhjal loetelu tarkvara eelistest ning nõrkustest.

Eelised:

BlueGriffon võimaldab kergesti lisada HTML5 videot ja heli.

Programm toetab erinevaid platvorme.

Tarkvarale on võimalik paigaldada hulgaliselt lisasid, kuid kõik on tasulised.

Sisaldab sisseehitatud SVG (Scalable Vector Graphics) ehk mastabeeritav

vektorgraafika funktsiooni, mis võimaldab teha vektorgraafilisi joonistusi ning need

lisada veebilehele, millele genereeritakse vastav kood.

BlueGriffon pakub suurt funktsionaalsust kaskaadlaadistikega töötamisel läbi

graafilise liidese. Võrreldes teiste WYSIWYG veebitoimetajatega pakub enim

võimalusi laadilehtedega töötamisel.

Nõrkused:

Tarkvara on harjumatu kasutajaliidesega. Tegevused ei sarnane teiste levinud

tarkvaradega, mis teeb programmi kasutamise keerukamaks.

Ei võimalda lisada videoid Youtube-i keskkonnast, isegi mitte programmeerimise

kaudu.

BlueGriffon ei toeta Adobe Flash-i.

Kõiki HTML-i elemente pole võimalik kasutada graafilise liidese kaudu.

Eesti keelseid õppematerjale antud programmile ei leidu.

Paljude elementide suurust ei saa lohistamise abil graafilise liidese kaudu muuta.

Ei toeta puksimise meetodit.

24

Kokkuvõte

BlueGriffon on CSS ja HTML5 suunitlusega hea vabavaraline WYSIWYG veebitoimetaja,

mis pakub võimalusi, mida teised WYSIWYG veebitoimetajad ei paku. Autori arvates ei ole

tegemist lihtsa ja mugava tarkvaraga. See on ka põhiline põhjus, miks see programm ei

sobinud autori arvates kursuse läbiviimiseks. Lisaks ei sarnanenud see teiste professionaalsete

tarkvaradega, mistõttu pole sellest palju abi kui hiljem soovitakse üle minna professionaalse

kommertstarkvara peale. Samas arendatakse BlueGriffon-it veel edasi ning on võimalik, et

tulevikus võib sellest saada väga lihtsa ja mugava veebitoimetaja, mille abil saab õpetada

veebilehtede loomist algajatele.

25

Kokkuvõte

Käesoleva bakalaureusetöö eesmärgiks oli luua lühikursus veebilehtede loomisest

üldhariduskoolidele, seejuures uuris autor veebilehtede loomise ja veebidisaini õpetamise

temaatikat üldhariduskoolides. Seejärel lõi autor vastava kursuse WYSIWYG veebitoimetaja

abil, mis lähtub veebilehtede loomisel puhtalt visuaalsetest vahenditest.

Püstitatud eesmärkide saavutamiseks uuris autor riiklikke õppekavasid, millest tõi autor välja

olulisema selle kohta, mis puudutab veebilehtede loomise probleeme ja võimalusi

üldhariduskoolides. Vastavalt neile võimalustele koostas autor lühikursuse, mida oleks

võimalik õpetada nii põhikoolis kui ka gümnaasiumis. Lühikursuse jaoks vajalike teemade

leidmiseks uuris autor W3C koodinäiteid ning tegi nende põhjal valiku teemadest, mis

annaksid õpilastele baasteadmised veebilehtede loomisest lühikursuse raames. Lisaks annab

autor edasi teadmised, mille abil kursuse läbinud oleksid võimelised ise veebilehti looma,

kasutades mõnd WYSIWYG veebitoimetajat. Nende teadmiste edasi andmiseks, tuli autoril

leida ka sobiv kursusel kasutatav tarkvara.

Töö tulemusena valmis lühikursus veebilehtede loomisest, mis sisaldab põhiliselt praktilisi

harjutusi ning ülesandeid. Kõik harjutused ja ülesanded said loodud visuaalsete vahendite

abil, mida pakkus MS Expression Web 4. Selle tulemusel valmis õppematerjal veebilehtede

loomisest, mille käigus ei käsitleta üldse koodi kirjutamist. Veebilehed, mis said sellisel viisil

loodud, valideerusid ka kenasti HTML5-e standardile. Lühikursuse materjalid ei ole piiratud

ainult üldhariduskooli õpetajatele ja õpilastele, need sobivad kasutamiseks kõigile, kes

soovivad õppida veebilehtede loomist visuaalsete vahendite abil. Eelkõige on loodud

õppematerjal siiski mõeldud algajatele.

Töö edasiarendusena võiks luua tervikliku veebilehtede loomise kursuse, kus jooksvalt

liigutakse visuaalsetelt vahenditelt üle programmeerimisele. Samuti võib edasiarendusena

integreerida lühikursusele põhjalikuma veebidisaini käsitleva osa mõne graafika

töötlusprogrammi abil, mille käigus käsitletakse nii veebidisaini teooriat kui ka praktilist osa.

26

Summary

The main purpose of this bachelor thesis was to create a short course about building web sites.

In order to so, author researched the opportunities of teaching web pages in public schools.

The outcome of this research was then used in putting together the short course about creating

web pages with WYSIWYG web editor.

The author started out with a research upon state wide curricula in order to find out the main

issues and possibilities to integrate the learning of creating web pages into classes in public

schools. According to the possibilities found, the author worked out a short course, that can be

used in both, in primary school and in secondary school. In order to develop the short course,

the author researched the examples of W3C code and sorted out the main topics that could be

used to teach the basic knowledge of creating a web page. Additionally to the basic

knowledge, the author has sorted out the main topics that students need to learn in order to

successfully create their own web sites while using a WYSIWYG editor.

The outcome of this work is a short course about building web sites. The work mainly

consists of assignments and exercises. All of the assignments and exercises have been

developed using only MS Expression Web 4 visual design tools. The short course does not

use any kind of programming, but the created example pages were all successfully validated

according to the HTML5 standard. The short course can be used by anyone who has the

interest in learning how to create a web page using WYSIWYG programs. The main focus of

the course is still directed towards the beginners.

The follow up for this work could be a web page creating course that starts with WYSIWYG

visual tools and end ups in programming HTML5 and CSS3 or even PHP. Or integrating a

more design orientated course into this short course using a free graphics editor, making the

whole course more advanced and longer.

27

Kasutatud kirjandus

1. Creative Commons. Creative Commons – CC0 1.0 Universal. Loetud 01.05.14

aadressil: http://creativecommons.org/publicdomain/zero/1.0/deed.en

2. Direktori, õppealajuhataja, õpetajate ja tugispetsialistide kvalifikatsiooninõuded.

(2013). Riigi Teataja. Avaldamismärge: RT I, 30.08.2013, 5. Loetud 25.04.14

aadressil: https://www.riigiteataja.ee/akt/130082013005

3. Eneta. Veebistuudium: Veebidisain. Loetud 02.05.14 aadressil:

http://www.eneta.ee/oppimine/veebistuudium/Lehed/veebidisain.aspx

4. Gümnaasiumi riiklik õppekava lisa 6: Ainevaldkond „Kunstiained“. (2011). Riigi

Teataja. Loetud 20.04.14 aadressil:

https://www.riigiteataja.ee/aktilisa/1200/9201/1002/VV2_lisa6.pdf

5. Gümnaasiumi riiklik õppekava. (2011). Riigi Teataja. Avaldamismärge: RT I,

25.03.2014, 11RT I, 20.09.2011, 2. Loetud 25.04.14 aadressil

https://www.riigiteataja.ee/akt/125032014011

6. Hariduse Infotehnoloogia Sihtasutuse Innovatsioonikeskus. Õppematerjalid.

Loetud 25.04.14 aadressil: http://www.innovatsioonikeskus.ee/et/oppematerjalid-0

7. Hein, M. ProgeTiiger gümnaasiumis: Veebilehtede loomine ja disain. Loetud

02.05.14 aadressil: https://moodle.e-ope.ee/enrol/index.php?id=5410

8. Hein, M. ProgeTiiger põhikoolis: Veebilehtede loomine ja disain. Loetud 02.05.14

aadressil: https://moodle.e-ope.ee/enrol/index.php?id=5487

9. Hein, M. Veebidisain. Tartu Jaan Poska Gümnaasium. Loetud 21.04.14 aadressil:

https://sites.google.com/site/poskavalikained/ii-periood-2/veeb

10. Kyrnin, J. Common Myths and Facts About Modern WYSIWYG Editors: Separate

the facts from the Fiction about WYSIWYG Editors. Loetud 25.04.14 aadressil:

http://webdesign.about.com/od/htmleditors/a/aa031407.htm

11. Kyrnin, J. Why Do Hiring Managers Prefer Hand Coding Experience?:

WYSIWYG vs Hand Coding, The Great Debate. Loetud 25.04.14 aadressil:

http://webdesign.about.com/cs/htmleditors/a/aa021400a_2.htm

12. Pixabay. Free Images – Pixabay. Loetud 01.05.14 aadressil: http://pixabay.com/

13. Puur, A. Meedia-arvutigraafika. Tallinna Arte Gümnaasium. Loetud 21.04.14

aadressil: http://www.arte.edu.ee/et/node/1642

28

14. Põhikooli ja gümnaasiumi riiklik õppekava. (2002). Riigi Teataja.

Avaldamismärge: RT I 2002, 20, 116. Loetud 25.04.14 aadressil:

https://www.riigiteataja.ee/akt/162998

15. Põhikooli- ja gümnaasiumiseadus. (2014). Riigi Teataja. Avaldamismärge: RT I,

13.12.2013, 21. Loetud 25.04.14 aadressil:

https://www.riigiteataja.ee/akt/113122013021

16. Põhikooli riiklik õppekava lisa 10: Valikaine „Informaatika“. (2011). Riigi

Teataja. Loetud 21.04.14 aadressil:

https://www.riigiteataja.ee/aktilisa/1200/9201/1009/VV1_lisa10.pdf

17. Põhikooli riiklik õppekava lisa 6: Ainevaldkond „Kunstiained“. (2011). Riigi

Teataja. Loetud 20.04.14 aadressil:

https://www.riigiteataja.ee/aktilisa/1200/9201/1009/VV1_lisa6.pdf

18. Põhikooli riiklik õppekava. (2011). Riigi Teataja. Avaldamismärge: RT I,

14.01.2011, 1. Loetud 25.04.14 aadressil:

https://www.riigiteataja.ee/akt/114012011001

19. W3C. CSS/Training. Loetud 01.05.14 aadressil:

http://www.w3.org/community/webed/wiki/CSS/Training

20. W3C. HTML & CSS. Loetud 01.05.14 aadressil:

http://www.w3.org/standards/webdesign/htmlcss

21. W3C. HTML/Training. Loetud 02.05.14 aadressil:

http://www.w3.org/community/webed/wiki/HTML/Training

22. W3schools. CSS examples. Loetud 02.05.14 aadressil:

http://www.w3schools.com/css/css_examples.asp

23. W3schools. HTML Examples. Loetud 02.05.14 aadressil:

http://www.w3schools.com/html/html_examples.asp

24. Vallaste, H. WYSIWYG. e-teatmik: IT ja sidetehnika seletav sõnaraamat. Loetud

25.04.14 aadressil: http://vallaste.ee/sona.asp?Type=UserId&otsing=1234