DIPLOMSKO DELO

(1)

PEDAGOŠKA FAKULTETA

DIPLOMSKO DELO

KSENJA SMOLIČ

(2)

PEDAGOŠKA FAKULTETA

Študijski program: Matematika in tehnika

Didaktično e-gradivo "mehanske lastnosti lesa" v tehnologiji HTML5

DIPLOMSKO DELO

Mentor: dr. Branko Kaučič, doc. Kandidatka: Ksenja Smolič Somentor: dr.Stanislav Avsec

Ljubljana, april, 2013

(3)

Zahvaljujem se svojemu mentorju dr. Branku Kaučiču in somentorju dr. Stanislavu Avscu, za nasvete, strokovno pomoč in vodenje pri opravljanju diplomskega dela.

Hvala staršema in bratu, za vso njihovo podporo v času študija. Hvala Franciju za vse tiste trenutke, ko me je motiviral in podpiral pri pisanju diplomskega dela.

Zahvala pa gre tudi prijateljem – Branki, Darji, Sonji, Anji, Nataši in Gregorju za vso pomoč v času študija in nepozabna študentska leta.

Hvala tudi Mateju Veharju in Andreju Anžlinu.

(4)

i

Izobraževanje postaja ključni dejavnik našega zasebnega in poklicnega vsakdana. Za uspešno in učinkovito izobraževanje potrebujemo hiter ter kvaliteten prenos informacij, kar nam omogoča tudi svetovni splet. V šolstvu se je zato pojavilo tako imenovano e-izobraževanje, katero poteka s pomočjo elektronskih medijev preko omrežja. Zelo pomemben dejavnik učinkovitega e-izobraževanja so predvsem kvalitena e-gradiva.

Diplomsko delo obravnava novi spletni standard HTML5. Najprej je predstavljena zgodovina in razvoj svetovnega spleta. Sledi primerjava med standardoma HTML4 in HTML5. V nadaljevanju je pozornost izključno namenjena novemu standardu in novostim, ki jih prinaša.

Opisana je uporaba novih značk ter podkrepljena s primeri za vsako posamezno uporabo le- teh. Rdeča nit celotnega dela je ena izmed pomembnih novosti prihajajočega standarda, značka <canvas>. Sledi podroben opis platna, uporaba ter opis posameznih možnosti, ki nam jih ponuja - od risanja statičnih elementov, do vstavljanja in kreiranja animacij.

Z uporabo novega spletnega standarda HTML5 in značke <canvas> smo izdelali didaktično e- gradivo, katero je namenjeno učiteljem tehnike in tehnologije (TiT). V interaktivni animaciji smo predstavili temo »Mehanske lastnosti lesnih gradiv«. Ugotovili smo, da je animacija primerna za predvajanje v osnovni šoli, saj je v njej zajeta prožnost, ostale animacije pa lahko učencem predvajamo kot zanimivost oz. za boljše razumevanje pojma trdnosti. Z uporabo animacije prispevamo k hitrejšemu in celovitejšemu usvajanju snovi zlasti na višjih kognitivnih nivojih. Pri ocenjevanju posameznih karakteristik se je animacija izkazala za dobro, seveda, pa so še vedno dobrodošle izboljšave. Učitelji novega standarda še ne poznajo, vendar so se pripravljeni o njem izobraževati in ga uporabiti pri svojem delu. Dobili smo tudi odgovor, da je HTML5 primeren za izdelavo animacij v osnovni šoli. HTML5 in značka <canvas> sta dokazala izbor. Omogočata vstavljanje video in audio gradiv, vstavljanje teksta in izdelovanje animacij. Vsebujeta vse karakteristike, ki jih potrebuje učitelj za izdelavo e-gradiv. S predstavitvijo novega standarda želimo učiteljem TiT približati novo tehnologijo, katero bodo lahko uporabili pri svojem poučevanju. Pri spletnih gradivih je pomembno, da ja gradivo preneseno končnemu uporabniku po računalniku z uporabo internetnih tehnologij.

Težava nastane, ker potrebujemo za prikaz e-gradiv programske vmesnike, kateri s časoma zastarijo in se vsebine zato ne predvajajo. Podajanje vsebine je lahko problematično. HTML5 je rešitev, ki ustrezno nadomesti spletne vtičnike in omogoči lažje, hitrejše in učinkovitejše komuniciranje z učenci preko spletnih učilnic s pomočjo didaktičnih e-gradiv.

Ključne besede: informacijsko komunikacijska tehnologija, svetovni splet, HTML5, canvas, animacija, tehnika in tehnologija, preskušanje mehanskih lastnosti.

(5)

ii

HTML5 TECHNOLOGY ABSTRACT

Education is becoming a key factor in our everyday personal and professional life. For efficient and effective education we need a fast and high-quality information transfer, which is made possible by the World Wide Web. Therefore, the schools offer e-education or e- learning through the use of electronic media via network. Quality of e-resource is a very important factor for effective e-learning.

The diploma work deals with the new web standard HTML5. Initially, it presents the history and development of the World Wide Web, followed by a comparison between HTML4 and HTML5 standards. Afterwards, our focus is dedicated to the new standard and the innovations it brings. The use of the new badges is described and supported with some examples for each individual use. The badge canvas is the main part of diploma work study.

The canvas and the possibilities of its use are explained in details – from drawing static elements to inserting and creating animations.

Using the new web standard HTML5 and badges <canvas> we developed an e-teaching material which is intended for teachers of Design and Technology (DT). We presented the theme "Mechanical properties of wood-based materials." in the interactive animation. We found that the animation is suitable for presentation in elementary school, because it was flexible. Other animations can also be presented to the students for the sake of curiosity or for a better understanding of the concept of stress. Use of animation contributes to a faster and more comprehensive learning of materials, especially at higher cognitive levels.

Although the animation proved to be good, from assessment of its individual characteristics, improvements are always welcome. Teachers are not yet familiar with the new standard, but are willing to educate themselves about it and use it in their work. We also received the feedback that HTML5 is suitable for making animations in elementary school.HTML5 and badge <canvas> have demonstrated selection capability. It allows the insertion of video and audio material, inserting text and creating animations. It contains all the characteristics needed to enable teachers to create e-learning materials. With the introduction of the new standard we want DT teachers to be aware of new technology, which they can use in their teaching. For online resources, it is important that the material is available and can be downloaded by the end user to a computer using Internet technologies. Sometimes, web plug-ins become obsolete, leading to difficulties in playing or obtaining e-resources. HTML5 is a solution that can adequately replace web plug-ins and enable easier, faster and more efficient communication with students through virtual classrooms via e-teaching materials.

Key words: information-communication technology, World Wide Web, HTML5, canvas, simulation, Design and technology, testing of mechanical properties of wood

(6)

iii

1 UVOD ... 1

1.1 PROBLEMSKO PODROČJE ... 1

1.2 NAMEN IN CILJI DIPLOMSKEGA DELA ... 3

1.4 ZGRADBA DIPLOMSKEGA DELA ... 3

2 SVETOVNI SPLET ... 5

2.1 ZGODOVINSKI PREGLED RAZVOJA SVETOVNEGA SPLETA ... 6

2.2. HTML ... 7

3 HTML5 ... 9

3.1 HTML 4 napram HTML5 ... 10

3.3 NOVOSTI HTML5... 12

3.3.1 SHEMATIČNO OZNAČEVANJE ... 12

3.3.2 MULTIMEDIJSKE ZNAČKE ... 16

3.3.3 RUBY ELEMENTI ... 18

3.3.4 SPLETNI OBRAZCI ... 18

3.3.5 SVG IN MathML ... 22

3.3.6 GEOLOKACIJA ... 22

3.3.7 SPLETNA SHRAMBA IN SPLETNE APLIKACIJE V BREZPOVEZAVE NAČINU ... 23

4 CANVAS... 25

4.1 CANVAS NA SPLETNI STRANI ... 25

4.2 ČRTE ALI SLEDI (Paths) ... 27

4.3 KRIVULJE ... 29

4.3.1 BEZIERJEVA KRIVULJA ... 29

4.4.2 KROŽNI LOK IN KROŽNICA ... 30

4.4. TEKST ... 31

4.5 PRELIVI ... 32

4.6 PROSOJNOST ELEMENTOV ... 33

4.7 SENČENJE ... 34

4.8 VSTAVLJANJE SLIK ... 35

4.9 TRANSFORMACIJA SLIK ... 37

4.10 KOMPONIRANJE ... 38

4.11 VZORCI (Patterns) ... 40

4.12 MANIPULIRANJE S PIKSLI ... 41

4.13 ANIMACIJE ... 44

4.13.1 JAVASCRIPT ... 44

4.13.2 ZNAČKI <CANVAS> IN <VIDEO> ... 44

4.13.3 ANIMACIJE NA ZNAČKI CANVAS ... 45

5 DIDAKTIČNO E-GRADIVO ... 50

5.1 NAVEZAVA NA UČNI NAČRT ... 50

5.2 VSEBINA DIDAKTIČNEGA E-GRADIVA ... 50

5.2.1 NATEZNA TRDNOST ... 53

(7)

iv

5.2.3 UPOGIBNA TRDNOST... 55

5.2.4 STRIŽNA TRDNOST ... 56

5.2.5 PROŽNOST ... 56

5.3 FORMULE IN IZRAČUNI PO KATERIH DELUJE ANIMACIJA ... 57

5.3.2 TLAČNA TRDNOST ... 61

5.3.5 PROŽNOST ... 73

5.4 IZDELAVA ANIMACIJE - KODA ... 76

5.4.2 TLAČNA TRDNOST ... 83

5.4.5 PROŽNOST ... 93

5.4.6 FUNKCIJE ... 97

5.5 EVALVACIJA DIDAKTIČNEGA E-GRADIVA ... 100

5.5.1 REZULTATI ANKETE IN INTERPRETACIJA ... 100

6 DISKUSIJA ... 115

6 ZAKLJUČEK ... 117

7 VIRI... 118

7.1 SPLETNI VIRI... 119

PRILOGA A: KODA CELOTNE ANIMACIJE ... 121

PRILOGA B: ANKETNI VPRAŠALNIK ... 157

PRILOGA C: E-GRADIVO "MEHANSKE LASTNOSTI LESA" ... 160

(8)

v

SLIKA 1:POTREBA PO NADGRADNJI PREDVAJALNIKA ADOBE FLASH PLAYER. ... 9

SLIKA 2:POTREBA PO NOVEJŠEM PROGRAMSKEM VMESNIKU. ... 10

SLIKA 3:POTREBA PO NOVEJŠI RAZLIČICI JAVE. ... 11

SLIKA 4:HTML5 IN SPLETNE APLIKACIJE. ... 12

SLIKA 5:SEMANTIČNO OZNAČEVANJE STRANI. ... 14

SLIKA 6:GRAFIČNI VMESNIK ZA PRIKAZ AVDIO ZNAČKE V SPLETNEM BRSKALNIKU MOZILA FIREFOX. ... 16

SLIKA 7:LEVO – VRSTE ATRIBUTOV, DESNO – PRIMER UPORABE <INPUT> ZNAČKE. ... 21

SLIKA 8:INTEGRACIJA SVG IN MATHML. ... 22

SLIKA 9:PLATNO NA SPLETNI STRANI. ... 26

SLIKA 11:LEVO – UPORABA STROKERECT, DESNO – UPORABA CLEARRECT. ... 27

SLIKA 12:PRIKAZ OBLIKOVANJA ČRT. ... 28

SLIKA 13:ČRKA H, NARISANA S POMOČJO LINETO IN MOVETO. ... 29

SLIKA 14:KVADRATNA KRIVULJA. ... 29

SLIKA 15:KUBIČNA KRIVULJA. ... 30

SLIKA 16:KROŽNI LOK. ... 31

SLIKA 17:OBLIKOVANJE TEKSTA Z ATRIBUTOM TEKSTBASELINE . ... 31

SLIKA 18:TEKST NA PLATNU. ... 32

SLIKA 19:LINEARNI PRELIV ŠTIRIH BARV. ... 33

SLIKA 20:RADIALNI PRELIV ŠTIRIH BARV. ... 33

SLIKA 21:PROSOJNOST ZA ALFA VREDNOSTI 0.3,0.6,0.9 IN 1.0. ... 34

SLIKA 22:SENČENJE LIKA IN SENČENJE TEKSTA. ... 35

SLIKA 23:IZRISOVANJE SLIK Z METODO DRAWIMAGE. ... 36

SLIKA 24:MANIPULIRANJE S SLIKO Z METODO DRAWIMAGE. ... 37

SLIKA 25:TRANSFORMACIJA – SKALIRANJE. ... 37

SLIKA 26:TRANSFORMACIJA – ROTACIJA PREKO IZHODIŠČA (0,0). ... 38

SLIKA 27:TRANSFORMACIJA – PREMIK NA POLJUBNO TOČKO (X,Y). ... 38

SLIKA 28:MOŽNOSTI KOMPONIRANJA ... 39

SLIKA 29:KOMPONIRANJE Z ATRIBUTOM »LIGHTER«. ... 40

SLIKA 30:VZOREC SESTAVLJEN IZ ZELENE KROGLICE. ... 40

SLIKA 31:UPORABA VZORCA PRI RISANJU TEKSTA NA PLATNO. ... 41

SLIKA 32:GRAFIČNI PRIKAZ CANVASPIXELARRAY. ... 42

SLIKA 33:PRIMER MANIPULACIJE S SLIKOVNIMI PIKAMI. ... 43

SLIKA 34:ZAČETNA OZ. GLAVNA STRAN ANIMACIJE. ... 52

SLIKA 35:SPREMINJANJE PARAMETROV PRI PRESKUŠANCU S KVADRATNIM PREREZOM. ... 52

SLIKA 36:SPREMINJANJE PARAMETROV PRI PRESKUŠANCU Z OKROGLIM PREREZOM. ... 53

SLIKA 37:NATEZNA TRDNOST: PRIKAZ PRESKUŠANCA PRI PLASTIČNI DEFORMACIJI. ... 54

SLIKA 38:TLAČNA TRDNOST: PRIKAZ PRESKUŠANCA PRI PLASTIČNI DEFORMACIJI (LEVO) IN UKLONU (DESNO). ... 55

SLIKA 39:UPOGIBNA TRDNOST: PRIKAZ PRESKUŠANA PRI PLASTIČNI DEFORMACIJI. ... 55

SLIKA 40:STRIŽNA TRDNOST: PRIKAZ UGREZA REZILA ZA 6,67MM. ... 56

(9)

vi

SLIKA 42:PRESKUŠANEC S KVADRATNIM PREREZOM (ZGORAJ) IN PRESKUŠANEC Z OKROGLIM PREREZOM

(SPODAJ)... 58

SLIKA 43:OBREMENITEV PRI PRESKUŠANJU UPOGIBNE TRDNOSTI. ... 68

SLIKA 44:OBREMENITEV PRI PRESKUŠANJU PROŽNOSTI LESA. ... 73

SLIKA 45:MNENJE ANKETIRANCEV O POSAMEZNIH ANIMACIJAH. ... 101

SLIKA 46:NAZORNOST OZ. RAZUMLJIVOST VSAKE POSAMEZNE ANIMACIJE. ... 102

SLIKA 47:OCENITEV POSAMEZNIH KARAKTERISTIK ZA ANIMACIJO NATEZNE TRDNOSTI. ... 103

SLIKA 48:OCENITEV POSAMEZNIH KARAKTERISTIK ZA ANIMACIJO TLAČNE TRDNOSTI. ... 104

SLIKA 49:OCENITEV POSAMEZNIH KARAKTERISTIK ZA ANIMACIJO UPOGIBNE TRDNOSTI. ... 104

SLIKA 50:OCENITEV POSAMEZNIH KARAKTERISTIK ZA ANIMACIJO STRIŽNE TRDNOSTI. ... 105

SLIKA 51:OCENITEV POSAMEZNIH KARAKTERISTIK ZA ANIMACIJO PROŽNOSTI. ... 106

SLIKA 52:OCENITEV POSAMEZNE ANIMACIJE GLEDE NA KARAKTERISTIKE. ... 106

SLIKA 53:UPORABA ANIMACIJE PRI POUČEVANJU PREDMETA TEHNIKE IN TEHNOLOGIJE. ... 107

SLIKA 54:PRISPEVANJE RAZUMEVANJU Z ANIMACIJO. ... 108

SLIKA 55:POZNAVANJE NOVEGA STANDARDA HTML5. ... 109

SLIKA 56:IZDELAVA ANIMACIJ. ... 110

SLIKA 57:PRIMERNOST UPORABE JEZIKA HTML5 ZA IZDELAVO ANIMACIJ. ... 111

SLIKA 58:PRIPRAVLJENOST ZA IZOBRAŽEVANJE O HTML5. ... 112

SLIKA 59:UPORABA OPERACIJSKEGA SISTEMA PRI PREDVAJANJU ANIMACIJE. ... 113

SLIKA 60:UPORABA SPLETNEGA BRSKALNIKA PRI PREDVAJANJU ANIMACIJE. ... 113

(10)

vii

TABELA 1:PODPORA ZVOČNIH FORMATOV V SPLETNIH BRSKALNIKIH. ... 16

TABELA 2:PODPORA VIDEO FORMATOV V SPLETNIH BRSKALNIKIH. ... 17

TABELA 3:PODPORA ZNAČKE <CANVAS> V SPLETNIH BRSKALNIKIH. ... 25

TABELA 4:ATRIBUTI KOMPONIRANJA IN NJIHOV POMEN. ... 39

TABELA 5:VREDNOSTI TRDNOSTI SMREKOVINE VZPOREDNO Z VLAKNI PRI VLAŽNOSTI MED 10% IN 15%. NAVEDENE SO SREDNJE VREDNOSTI LOMNE TRDNOSTI. ... 57

TABELA 6:VZTRAJNOSTNI MOMENT GLEDE NA PREREZ NOSILCA. ... 63

TABELA 7:FAKTOR ZMANJŠANJA NOSILNOSTI. ... 63

TABELA 8:ODPORNOSTNI MOMENT GLEDE NA PREREZ NOSILCA. ... 68

(11)

1

1 UVOD

Izobraževanje postaja čedalje pomembnejši dejavnik v našem življenju. Že Komensky je dejal:

»Vse naše življenje je nenehna šola«. [13] Če pogledamo v zgodovino izobraževanja natančneje potek načina prenosa informacij, bomo opazili velike spremembe. Začetki prenosa informacij so bili počasni vse do razvoja tehnologije, ki je pretok podatkov drastično pospešila. Informacijsko-komunikacijska tehnologija (IKT) je v zadnjih dveh desetletjih pomembna spremljevalka in oblikovalka našega vsakdanjika. Pojavil se je nov način prenosa informacij, tako v vsakdanjem življenju, kakor tudi v vzgojno-izobraževalnih ustanovah. V šolah je prišlo do novih metod izobraževanja, pojavilo se je tako imenovano elektronsko izobraževanje, e-izobraževanje ali tudi e-učenje, kjer poteka učenje s pomočjo elektronskih medijev preko omrežja – svetovnega spleta (World Wide Web). Vsebina je na spletu podana v različnih oblikah, od besedila, videa, zvoka, do animacij ipd. Uporaba IKT v vzgoji in izobraževanju omogoča racionalno in učinkovito organizacijo pouka, ter olajša procese poučevanja in učenja. Kljub mnogim pozitivnim učinkom, ki jih prinaša uporaba IKT, pa zasledimo tudi določene slabosti. V diplomskem delu se bomo osredotočili na težave, nastale zaradi tehnične nepodprtosti e-gradiv, katera so sestavni del e-izobraževanja. Predstavili bomo rešitev in jo podkrepili s primerom.

1.1 PROBLEMSKO PODROČJE

Za celovito razumevanje celotnega problema si pobližje poglejmo pojem e-izobraževanja.

V Slovarju informatike najdemo naslednjo definicijo: (angl. electronic education, e-education) izobraževanje z uporabo informacijske tehnologije, običajno na spletu [35].

E-izobraževanje je izobraževanje, ki ga izvajamo s pomočjo IKT. Izobraževalne vsebine in komunikacija med udeleženci ter mentorji so v elektronski obliki. Sestavni del e- izobraževanja so e-gradiva. To so elektronska učna gradiva (učbeniki, delovni zvezki, učni pripomočki za učence – animacije, simulacije, preglednice, …), katera znatno olajšajo pridobivanje znanja [40].

E-izobraževanje je povezovalne narave, kar omogoča takojšnje ažuriranje, shranjevanje, iskanje in distribucijo informacij. Preneseno je končnemu uporabniku po računalniku z uporabo internetnih tehnologij. Osredotoča se na najširše razumevanje učenja, katera presegajo tradicionalne izobraževalne paradigme. Prostorska ločenost učitelja in učenca v izobraževalnem procesu omogoča večjo prožnost v času, kraju in tempu izobraževanja (angl.

just-in-time learning, just-in-place learning). V učni proces omogoča vpeljevanje sodobnih pedagoških modelov in prilagajanje učnih pristopov posameznikovim potrebam [1].

(12)

2

E-izobraževanje postaja z naprednimi tehnologijami neizbežno. Prišli smo do t.i. internetne generacije učencev, kateri ne dopuščajo izpuščanje interneta iz izobraževalnih dejavnosti [9].

SURS v raziskavi za prvo četrtletje 2011 ugotavlja, da v Sloveniji internet uporablja kar 69%

populacije v starosti od 10 – 74 let [41].

Odkar je na voljo svetovni splet, spletni brskalniki prikazujejo besedilo na spletnih straneh.

Prvi brskalnik, ki je podprl prikazovanje spletne grafike, je bil Mosaic in na njegovi podlagi temelji splet že več desetletij. Za predvajanje avdio in video posnetkov pa potrebujemo različne programske vmesnike oz. vtičnike [32].

Vtičniki pomagajo obdelati posebne vrste spletne vsebine (npr. datoteke Flash ali Windows Media) in se ne posodabljajo samodejno (razen Google Chroome) in tako sčasoma zastarijo [55].

Podajanje vsebine na spletu je postalo problematično, saj ni univerzalnega spletnega brskalnika in univerzalne platforme, ki bi prikazovale vsebine, ustvarjene z različnimi napravami.

Učenci in učitelji se v prvi fazi ne srečujejo s problematiko poznavanja uporabe IKT. Tehnične težave so tiste, katere je potrebno odstraniti oziroma jih vsaj potrebno spraviti na minimum.

E-gradiva, ki niso podprta na vseh napravah, prinašajo e-izobraževanju nepotrebne prepreke, in preprečujejo hiter, ter učinkovit prenos informacij. Tako se srečamo z e-gradivi pripravljenim v Adobe Flashu, katera se ne izvajajo na Apple-ovih računalnikih, z e-gradivi, ki so zastarela, gradiva, ki so razvita kot Java applet in ne delujejo na tablicah itd. [32].

Do težav je prihajalo že v preteklosti, katere so uspešno odpravili in omogočili spletu

»preskok« na višji nivo. Med posameznim prestopi so se izoblikovale tri izrazite razvojne meje spleta. Prva stopnja, Splet 1.0, za katero je značilna množica datotek, ki jih razvrščamo na dokumente in podatke. Dokumenti so distribuirani po spletu, podatki pa so centralizirani.

Spletne strani so statične in namenjene branju. Druga stopnja, Splet 2.0, je stopnja v kateri se trenutno nahajamo. Spletne strani so razgibane, obogatene z dinamičnimi vsebinami, dostop do podatkov je olajšan s pomočjo tehnologij RSS in vmesnikov API, ter na voljo so nam raznorazne spletne aplikacije. Pomanjkljivost: splet je še vedno zgolj spletišče posameznih dokumentov in aplikacij, ki centralizirane podatke hrani le zase. V prihodnosti pa bomo stopili stopničko višje, prešli bomo v tretjo stopnjo, imenovano Splet 3.0 ali semantičen splet – to je splet za ljudi in inteligentne agente, ki znajo te podatke razumeti, analizirati in ponuditi ljudem [14].

In tukaj je naša rešitev. Splet 3.0 temelji na tehnologiji HTML5, ki je naslednja generacija HTML standarda.

(13)

3

1.2 NAMEN IN CILJI DIPLOMSKEGA DELA

Namen diplomskega dela je preveriti, ali sta novi spletni standard HTML5, značka <canvas>

in njuna uporaba ustrezna (ali predstavljata celovito orodje) pri pripravljanju izobraževalnega gradiva pri predmetu Tehnika in tehnologija. S tem bomo učiteljem TiT ponudili orodje za kvalitetno izdelavo didaktičnih e-gradiv, kar jim bo prihranilo čas in trud, saj bodo gradiva izdelana z novo tehnologijo, na spletu, praktično neminljiva.

Cilji ( C1-5 ), ki jih želimo v diplomskem delu doseči:

C1: Prikazati godovinski pregled in razvoj svetovnega spleta in interneta.

C2: Predstavitev novosti jezika HTML5.

C3: Predstaviti in uporabiti novo značke <canvas>.

C4: Izdelati e-gradiva za izobraževanje v OŠ pri predmetu Tehnika in tehnologija.

C5: Predstaviti izdelano e-gradivo učiteljem TiT in izvesti evalvacijo.

1.3 METODOLOGIJA DELA

Izvedba diplomskega dela bo potekala po naslednjih korakih:

• pridobivanje ustrezne literature (knjižni in spletni viri)

• študij izbrane literature

• preučevanje okolja HTML5 in značke <canvas>

• zasnova didaktičnega e-gradiva

• izdelava didaktičnega e-gradiva

• evalvacije e-gradiva s strani učiteljev TIT

1.4 ZGRADBA DIPLOMSKEGA DELA

Po uvodnem poglavju se bomo posvetili svetovnemu spletu. Predstavili bomo pojem svetovnega spleta in interneta, ter njuno razliko. Sprehodili se bomo skozi njuno zgodovino razvoja ter spoznali potek razvoja in osebnosti, brez katerih splet danes ne bi bil to kar je.

Poleg tega si bomo pogledali kaj je standard HTML in kako smo skozi zgodovino prišli do ideje za razvoj novega standarda HTML5.

V naslednjem, tretjem poglavju, se bomo seznanili z novih HTML standardom. Opredelili bomo zakaj je tako pomemben, podkrepili njegove prednosti s primeri in ga primerjali s starejšo različico – HTML4. Spoznali bomo novosti, ki jih prinaša HTML5: semantično

(14)

4

označevanje, multimedijske značke, ruby elemente, spletne obrazce, SVG in MathML, geolokacijo, spletno shrambo (angl. web storage) in spletne aplikacije (angl. web applications).

V četrtem poglavju bomo podrobneje spoznali značko <canvas>. Poglavje Canvas je razdeljeno na trinajst podpoglavij, v katerih so opisane novosti in podkrepljene s primeri. Na začetku se bomo seznanili, kaj je canvas in ga na splošno opisali. Sledi razlaga in opis posameznih možnosti, ki jih ponuja. Pogledali si bomo risanje črt, krivulj, teksta, prelive, prosojnost elementov, senčenje, vstavljanje in transformiranje slik, komponiranje, vzorčenje ter manipuliranje s piksli. V zadnjem podpoglavju se bomo lotili animacije na platnu. Najprej sledi kratek opis JavaScripta, ki ga uporabljamo pri izdelavi animacij in simulacij in nato kako se izdelujejo animacije in simulacije. Prva možnost bo vstavljanje animacije na platno z uporabo značke <canvas> in značke <video>, nato pa se bomo lotili risanja animacije na sami znački <canvas>.

Peto poglavje bo predstavljalo praktični del diplomskega dela in bo namenjeno predstavitvi izdelanega didaktičnega e-gradiva z uporabo nove značke <canvas>. Tema izdelave e-gradiva bo predstavitev preizkušanja mehanskih lastnosti lesnih gradiv. Didaktično gradivo bomo umestili v učni načrt in opisali prednosti takšnega načina dela pri pouku. Sledila bo predstavitev izdelave e-gradiva, po posameznih sklopih in na koncu poglavja evalvacija didaktičnega e-gradiva. Na koncu sledi še zaključni del diplomskega dela.

(15)

5

2 SVETOVNI SPLET

Svetovni splet, World Wide Web, je internetna storitev, ki omogoča dostop do spletnih strani, spletnih dokumentov, povezanih s hiperpovezavami v porazdeljeni informacijski sistem [35].

WWW, W3 ali svetovni splet je storitev interneta, ki predstavlja ogromen sistem med seboj povezanih računalniških dokumentov. Dokumente, ki jih imenujemo tudi spletne strani, med seboj povezuje programski jezik HTML (Hyper Text Markup Language). Spletni brskalniki (Firefox, Internet Explorer, Opera, ...) pa so tisti, ki nam omogočajo dostopati do vsebin svetovnega spleta [55].

Osnovna organizacijska enota za informacije v spletu je spletna stran. Urejenost spleta temelji na tem, da se z lahkoto sprehajamo z ene spletne strani na drugo po dobro označenih povezavah. Informacije na spletni strani so lahko v obliki besedila, podob, zvočnih posnetkov, videoposnetkov, itd. Da bi vse te vrste podatkov prikazali, pa moramo imeti v svojem računalniku spletni pregledovalnik z vsemi vstavljenimi večpredstavnimi programi. Za pravilen prikaz strani na naših zaslonih morajo biti dokumenti zapisani skladno s HTML jezikom [4].

Pojem svetovni splet in internet se v vsakdanjiku uporabljata kot istopomenska pojma.

Dejstvo pa je, da gre za popolnoma ločena, ampak med seboj povezana pojma [54].

Internet je globalni sistem med seboj povezanih računalniških omrežij. Združuje na tisoče krajevnih omrežij in strežnikov, ter milijone osebnih računalnikov in delovnih postaj. Med seboj povezuje omrežja različnejših vrst in velikosti, ki uporabljajo isti nabor komunikacijskih protokolov TCP/IP in drugih. Je skupek vseh storitev, ki jih uporabniki uporabljajo v njegovem okviru [4].

Splet pa je ena izmed storitev, ki za svoje delovanje uporablja internet in predvsem protokol HTTP. Na kratko, svetovni splet je ena izmed uporabljenih uslug, ki jih omogoča internet [54].

Čeprav veliko ljudi pojmuje internet in svetovni splet kot istopomensko, konec koncev sploh ni tako narobe, saj trdijo, da bo splet preplavil internet in postal glavni uporabniški vmesnik za dostop do vseh njegovih storitev – splet bo s tem postal sopomenka za internet [4].

Do spletnih strani uporabnik dostopa s pomočjo spletnih brskalnikov, preko URL naslovov, ki so sestavljeni iz protokola, spletnega naslova in absolutne poti. Ko uporabnik vpiše URL naslov v svoj brskalnik, ta pošlje zahtevo po IP naslovu želene strani. To dobi s pomočjo DNS (Domain Name System). Spletni strežnik pa mu nato pošlje odgovor v obliki spletne strani [53].

(16)

6

2.1 ZGODOVINSKI PREGLED RAZVOJA SVETOVNEGA SPLETA

Internet se je začel razvijati na začetku 60-tih let prejšnjega stoletja. Prvi so ga začeli razvijati v ZDA, pri ameriškem obrambnem ministrstvu ARPA (angl. Advanced Research Projects Agency Network) v vojaške namene. Omrežje se je imenovalo ARPA oz. ARPANET, ki je sprva uporabljal protokol NCP [20].

ARPANET prične delovati leta 1969, sprva sicer samo zato, da bi na praktičnem primeru raziskali zmožnosti računalniških mrež. V naslednjih letih pričnejo postavljati vozlišča in dve leti kasneje je v ARPANET-u že 15 vozlišč, to je 23 računalnikov. Leta 1971 Ray Tomlinson napiše program za pošiljanje elektronske pošte, leto kasneje pa ustvari prvi mednarodni priključek na ARPANET. Pričnejo se razvijati prve skice o arhitekturi mednarodnega omrežja.

Leta 1974 se izdela načrt za protokol TCP (angl. Transmission Control Protocol) in leta 1982 postane protokol TCP/IP realnost, ki je srce in duša izmenjave podatkov po internetu še danes. Pojavi se definicija Interneta. Razvijejo prvi strežnik (name server). Leta 1986 razvijejo protokol NNTP, takoj za tem pa pričnejo z vpeljavo novih protokolov OSI, katera naj bi nadomestili TCP/IP, vendar se to ni nikoli zgodilo. V letu 1989 razvijejo sistem IRC za spletno komuniciranje in prične delovati omrežje Archie. Pojavi se prvi komercialni ponudnik - The World priklopa na internet preko modema. Leto 1991 se zaznamuje kot leto z mnogimi novimi internetnimi storitvami (WAIS, Gopher, WWW). V letu 1992 se na internet priključi svetovna banka in tudi Slovenija se priključi na NFSNET. Popularnost interneta močno zviša prvi spletni brskalnik Mosaic. S prihodom spletnega brskalnika pa odpremo vrata tudi novim virusom. Na internetu se pojavijo spletne trgovine, nezaželena pošta, reklame, … Od leta 1995 zasledimo internet vsepovsod. Svetovni splet postane najbolj izkoriščena storitev na internetu [56].

Svetovni splet se je rodil maja 1989 v CERNu. Začetno idejo o spletu je podal Tim Berners–

Lee. Vodila ga je ideja o poenostavitvi dostopa do knjižnih informacij, ki so bile dostopne na različnih strežnikih v CERNu. Razvil je sistem ENQUIRE (angl. Enquire Within Upon Everything). ENQUIRE se je precej razlikoval od današnjega spleta, vendar pa osnova temelji na podobnih principih. Novembra 1990 je Tim Berners–Lee predstavil dodelan predlog za splet in dan kasneje tudi izdelal prvo spletno stran. Do konca leta 1990 je izdelal vsa potrebna orodja za delovanje spleta in projekt World Wide Web je bil zaključen. Temeljne zamisli hiperteksta so razvijali že prej, vendar je Tim Berners–Lee v tem naredil velik preskok, hipertekst je združil z internetom, spotoma pa razvil še sistem globalnih enoličnih identifikatorjev za vire v spletu (URL). 6. avgusta 1991 je v novičarski skupini alt.hypertext objavil povzetek projekta World Wide Web in ta datum velja kot otvoritev javno dostopnih storitev na internetu. Tim Berners–Lee je rešil potrebo po standardizirano povezanemu informacijskemu sistemu, do katerega lahko dostopamo preko različnih operacijskih sistemov [54].

Marc Andreesen je drugi pomembni mož za razvoj spleta. S sodelavci je predstavil slikovno različico spletnega pregledovalnika NCSA Mosaic, ki deluje v okolju Windows, Macintosh in

(17)

7

Unix. Po zaslugi Mosaica se je splet spremenil iz enega od številnih sistemov za iskanje informacij v internetu v zametek glavnega današnjega orodja za dostop do svetovnega omrežja. Čez noč je postal priljubljenec raziskovalcev in študentov [4].

2.2. HTML

HTML (angl. hypertext markup language) je označevalni jezik za oblikovanje večpredstavnostnih dokumentov, ki omogoča povezave znotraj dokumenta ali med dokumenti [35].

Uporablja se za pisanje oz. izdelavo spletnih strani. »HyperText pomeni povezano besedilo, Markup pa je angleška beseda za označevanje. Torej, HTML nam omogoča, da označujemo in določamo lastnosti besedila [16].

HTML dokumenti so spisani s pomočjo HTML elementov in imajo končnico .html ali .htm. Ti elementi imajo dve osnovni lastnosti, atribute in vsebino, ter začetno in končno oznako, katere vstavimo v kotne oklepaje (npr. <html> </html>). Atributi elementa so zapisani v začetni oznaki, vsebina elementa pa je zapisana med obema oznakama. Znotraj posameznih elementov se lahko vstavljajo tudi drugi elementi, tu gre za t.i. gnezdenje [49].

Naloga spletnih brskalnikov je, da HTML dokumente prebere in jih sestavi v vidno ter slušno spletno stran. Brskalniki ne prikazujejo HTML oznak, jih pa uporabljajo za razlago vsebine strani [24].

HTML je jezik, ki je že od samega začetka doživel precej sprememb, katere so bistveno vplivale na razvoj spletnih strani.

Leta 1990 je Tim Berners-Lee razvil prvo različico jezika HTML, imenovano HTML 1.0. Jezik je bil zelo preprost, saj se je v njem dalo opisati le najnujnejše elemente spletnih strani. Prvi spletni brskalnik, ki ga je podpiral, je bil Mosaic [25].

HTML 2.0 (1994) je bil naslednik HTML 1.0 in je bil standard za razvoj spletnih strani vse do leta 1997. Obdržal je vse elemente predhodnika, dodani pa so mu bili elementi, kot so nalaganje dokumentov, izdelava tabel, itd. Velikega odziva poslovne javnosti ni bilo, dokler Marc Andreessen ni ustanovil podjetja Netscape in izdelal svoj prvi spletni brskalnik.

Netscape prinese nove razsežnosti – internet je nekaj, kar lahko uporablja vsak in ne samo akademiki ter znanstveniki [57].

V letu 1996 je skupina, ki jo je vodil Dave Raggett, predstavila HTML 3.0. Jeziku HTML so dodali precej novih zmožnosti. S tem pa so se pričele tudi prve težave. Brskalniki so bili prepočasni, da bi novosti prišle do izraza. Večina je vgradila samo nekatere od novosti, kar pa

(18)

8

je med razvijalci spletnih strani pripeljalo do prave zmede. Zaradi tega se HTML 3.0 ni nikoli dobro uveljavil.

Elementov in lastnosti, ki so jih podpirali samo nekateri brskalniki, je bilo vedno več. Da bi se to končalo, je bil ustanovljen W3C – World Wide Web Consortium, ki naj bi standardiziral jezik in nadziral njegov razvoj. Predstavijo HTML 3.2, pri čemer so zavrgli večino elementov, ki sta jih pokrivala Netscape in Microsoft. HTML 3.2 postane leta 1997 prvi uradni standard, ki ga danes praktično podpirajo vsi brskalniki v celoti.

Velike spremembe v jeziku prinese HTML 4.0. Najpomembnejša novost je CSS (angl. . Cascading Style Sheets). Microsoft ga je v svojem spletnem brskalniku Internet Explorer presenetljivo hitro podprl, medtem ko Netscapu to ni uspelo in je njegov brskalnik kmalu propadel.

Zadnja različica klasičnega jezika HTML, imenovanega HTML 4.01 je prinesla samo nekaj manjših popravkov.

S prihodom XML je bilo potrebno posodobiti tudi HTML. Rezultat te posodobitve je XHTML 1.0, ki ni nič drugega, kot HTML 4.01, zapisan po pravilih XML. Jezik XHTML 1.0 ne prinaša novih elementov in dodatnih možnosti, temveč samo nova pravila, kako morajo biti elementi opisani [25].

XML je vseboval elemente MIME, imenovan »application/xhtml+xml«. W3C je v svojih specifikacijah določil, da morajo vsi dokumenti strani XHTML zadostiti najstrožjim kriterijem, kar se tiče napak. Ne smejo si privoščiti, da se ob najmanjši napaki spletna stran ne bo prikazala. V kar 99% spletnih strani pa je prišlo ravno do tega. Ta odstotek je bil tako velik, da je bilo snovalcem spletnih strani lažje in ceneje ne uporabiti »application/xhtml+xml«. Prav zato je spletnih strani, ki so dejansko uporabljajo specifikacije XML malo. XHTML 1.0 se je razvil v 1.1 in pojavili so se poskusi izdelave XHTML 2.0, vendar ni iz projektov zraslo nič obetavnega. Porajalo pa se je vprašanje, ali ne bi bilo bolje nadgraditi nekaj kar je delovalo in še deluje? Zato so se pri W3C fokusirali na izdelavo novega in še boljšega HTML5.

Ideja o nadgradnji standarda HTML sega v leto 2004. Na konferenci »Workshop on Web Applications and Compound Documents« so predstavniki razvijalcev različnih brskalnikov in spletnih aplikacij predstavili svoje vizije prihodnosti spleta. Nove ideje niso požele aplavza in W3C je predloge zavrnil. Vendar se razvijalci niso dali. Ustanovili so skupino WHATWG (angl.

Web Hypertext Application Technology Working Group), katera se bo ukvarjala z inovativnimi idejami za »preobrazbo« HTML. Ko je bila zadeva »zrela« so jo predstavili W3C, kateri je predlog sprejel. Sprejeti predlogi so postali osnova za predlog standarda HTML5. Načrti so izredno zanimivi in na oko izredno prijazni uporabnikom HTML5. Uporabnikom ne bo potrebno čakati na to, da bo celoten standard izdelan in sprejet, saj bodo razvijalci posamezne komponente v brskalnike vključevali sproti [57].

(19)

9

3 HTML5

HTML5 je naslednja generacija HTML standarda, ki nadomešča starejše standarde. Je nadgradnja HTML4, katerega danes uporabljala že večina spletnih strani. Spletne strani prehajajo postopoma na novi standard in se sproti prilagajajo vsem novostim. HTML5 lahko uporabljamo in pregledujemo na poljubnem operacijskem sistemu. Potrebujemo le spletni brskalnik. Veliko lastnosti HTML5 podpirajo vse zadnje različice brskalnikov: Firefox, Opera, Safari, Chrome in v bodoče Internet Explorer 10.0. Prav tako nudijo odlično podporo novemu standardu mobilni spletni brskalniki [17].

HTML5 prinaša veliko novosti. Vedno manj bo potreb po programskih vmesnikih drugih proizvajalcev, saj bo znal več stvari prikazati že brskalnik sam. Novi standard ustvarja platformo, ki je neodvisna od strojne naprave. Med večje novosti spada podpora za predvajanje videa in avdia ter geolokacija [23].

HTML5 bo na novo definiral spletne vsebine, saj naj bi tehnologije, kot so Adobe PDF, Microsoft Sliverlight in Java FX, postale preteklost, vsi brskalniki naj bi uporabljali en sam video kodek, ki bo bliže odprtim standardom (slika 1) [34].

Slika 1: Potreba po nadgradnji predvajalnika Adobe Flash Player.

(20)

10

3.1 HTML 4 napram HTML5

HTML5 je za razliko od HTML 4 novejša različica spletnega standarda. HTML5 sta razvila World Wide Web consortium in skupina WHATWG. Slednja pa je sodelovala že pri razvoju njegovega predhodnika, skupaj v sodelovanju s W3C HTML WG. V novi različici spletnega standarda so odstranili nekatere nepotrebne elemente in jih nadomestili z novimi [26].

Novi elementi so: header, footer, section, article, nav, aside, video, avdio, progress, meter, time, cavas, mark, output, time itd., katerih funkcija je točno določena in edinstvena [58].

Struktura dokumenta je v primerjavi s HTML 4 zelo preprosta. HTML5 vsebuje elemente, ki olajšujejo strukturo strani. Brskalniki imajo tako večji nadzor nad prikazom spletne vsebine in hitrejši čas nalaganja. Svojo stran enostavno oblikujemo z uporabo oznak, ko so: <header>,

<nav>, <article>, <aside>, <footer>, itd. [21].

HTML5 DOCTYPE je enostaven in kratek. Na začetku dokumenta moramo napisati le

<!DOCTYPE HTML>.

Za razliko od HTML4, kateri ima DOCTYPE občutno daljši in bolj zapleten [50]:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE HTML PUBLIC“-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

Za predvajanje glasbenih in zvočnih vsebin s HTML4 potrebujemo številne programske vmesnike (slika 2). Kadar na računalniku nimamo nameščenih ustreznih vmesnikov, se vsebina dokumenta ne prikaže.

Slika 2: Potreba po novejšem programskem vmesniku.

(21)

11

Za nemoteno delovanje in prikaz spletnih vsebin potrebujemo programske vmesnike, najpogostejši so: Adobe Flash Player, Adobe PDF, Java, Silverlight in Media Player (slika 3).

Novi standard reši zagato z združenjem vseh funkcij v eno in enotno platformo [51].

Slika 3: Potreba po novejši različici Jave.

Vendar HTML5 nudi še več. Poleg lastnega prevajanja avdio in video vsebin, omogoča tudi prikazovanje iger v spletnem brskalniku, brez dodatnih programskih vmesnikov [58].

V HTML5 so dodani tudi novi API-ji, kateri omogočajo risanje 2D slik, shranjevanje podatkov v brskalniku, urejanje, povleci-in-spusti (angl. drag-and-drop), delo z omrežjem, predvajanja avdio in video posnetkov, itd. [52].

Ker HTML5 še ni uradni standard in brskalniki še nimajo polne podpore, lahko na spletni strani THE HTML TEST – HOW WELL DOES YOUR BROWSER SUPPORT HTML5? na naslovu http://html5test.com/index.html s testom preverimo, kako dobro naš brskalnik podpira prihajajoči standard. Test testira nove funkcije in za vsako delujočo oz. podprto funkcijo dodeli točko ali več. Maksimum doseženih točk je 500, ter možne so še dodatne točke. Test samodejno prepozna spletni brskalnik, preračuna doseženo število točk in poda rezultat.

Test poleg rezultata poda še nazoren prikaz podpore za vsako funkcijo posebej [46].

Največjo podporo HTML5 trenutno nudi spletni brskalnik Google Chrome (86%), sledi Safari (79%), ter Mozila Firefox. Malo za njimi zaostaja Opera (72%), daleč v ozadju pa jim sledi še Internet Explorer (26%) (slika 4) [22].

(22)

12

Slika 4: HTML5 in spletne aplikacije [22].

3.3 NOVOSTI HTML5

Največja novost HTML5 so značke. Prihajajo številne nove, obstoječe z manjšimi spremembami in že poznane vdelane značke.

3.3.1 SHEMATIČNO OZNAČEVANJE

Značke so namenjene izboljšanju strukture dokumenta (slika 5). Novo definirane značke služijo za izboljšanje prikaza strukture dokumenta in so kot smiselna alternativa značke

<div>.

Poglejmo si nove značke in njihov pomen [7,11]:

• <address> označuje kontaktne informacije o avtorju dela. Značka je namenjena za označevanje znotraj celotne vsebine strani ali znotraj segmenta.

Pedagoška fakulteta Ljubljana <br/>

Ljubljana

</address>

• <article> uporablja se za navedbo vsebine. Vsebina je lahko članek, novica, besedilo iz bloga in drugo.

(23)

13

<h1>HTML5 – značka article </h1>

<p>Tu vnesemo poljubno vsebino.</p>

</article>

• <aside> določa vsebino, ki se povezuje z ostalo vsebino (komentarji, opombe).

<aside>

To je komentar.

</aside>

• <footer> določa nogo na strani. Navadno jo uporabimo na dnu strani, kjer so navedeni avtorjevi kontaktni podatki. Brskalnik sam ne določi, kje leži noga, to določi CSS.

<h2>Footer</h2>

Ksenija Smolič </br>

ksenijasmolic@gmail.com </a>

</address>

</footer>

• <header> določa glavo na strani oz. uvod v dokument. Brskalnik sam ne določi, kje leži, to določi CSS.

<h1>Glava dokumenta</h1>

</header>

• <hgroup> omogoča združevanje naslovov in podnaslovov.

<h1>Naslov</h1>

<h2>Podnaslov</h2>

</hgroup>

• <menu> se uporablja za prikaz menijev, orodnih vrstic, za upravljanje obrazcev in ukazov. Značko <menu> uporabljamo skupaj z značko <command>, Trenutno še noben brskalnik ne podpira prikaza menija skupaj z ukazom <command>.

<menu>

(24)

14

<command label = “one”

onclick = “alert(‘ena’)”>

<command label = “two”

onclick = “alert(‘dva’)”>

<command label = “three”

onclick = “alert(‘tri’)”>

</menu>

• <nav> določa navigacijo (povezave) do ostalih podstrani. Element nima privzetega oblikovanja, to bo rešil CSS.

<nav>

<h2>Navigation</h2>

<ul>

</ul>

</nav>

• <section> določa poglavje, odsek v članku. Vsak članek ima lahko več odsekov.

Primer, spletna stran podjetja ima poglavje kjer predstavijo podjetje, poglavje kjer objavljajo novice in poglavje s kontaktnimi podatki.

<h2>Prvo poglavje </h2>

<p>Vsebina poglavja...</p>

</section>

Slika 5: Semantično označevanje strani [27].

(25)

15

• <command> se uporablja v kontekstu z značko <menu>. Lahko pa se uporabi tudi kot samostojna značka za določitev bližnjic na tipkovnici.

• <dfn> uporabimo jo kadar želimo določen pomen opredeliti oziroma definirati.

<p>

<dfn>Značka (angl. tag):</dfn> sestavina označevalnih jezikov, npr. HTML.

</p>

• <figure> določi skupino medijskih vsebin in njihov opis. Uporabimo jo kadar želimo združiti več skupnih elementov, npr. več slik.

<img src = "gradivo/HTML5.jpg" alt = "Logotip HTML5"

width = "250" height = "228">

</figure>

• <summary> označuje naslov ali povzetek znotraj značke <details>. Ko uporabnik klikne na povzetek, vse druge vsebine v elementu s podrobnostmi, ki so bile prej skrite, postanejo vidne.

<p> HTML5 je naslednja generacija HTML standarda, ki nadomešča starejše standarde </p>

</details>

• <time> prikazuje datum, uro ali oboje hkrati.

<p>

Predavanje se prične ob <time>8:15</time> v predavalnici 212.

</p>

• <wbr> se uporablja za deljenje besed. Značko vstavimo v besedo, na mesto kjer želimo delitev. Značke ne podpira še noben brskalnik.

<p>

Značko <wbr> vstavimo v besedo, kjer želimo delitev, npr. inter<wbr>nacionalni.

</p>

(26)

16 3.3.2 MULTIMEDIJSKE ZNAČKE

Najbolj pričakovana novost v HTML5 so ravno medijski elementi. HTML5 nam z njimi ponudi nove možnosti in razsežnosti, saj ne potrebujemo dodatne programske opreme.

Nove multimedijske značke [7,11]:

• <audio> dovoljuje, da zvočno datoteko vstavimo neposredno v spletni brskalnik.

Značka med drugim podpira: autoplay (zvočna vsebina se prične predvajati takoj ko brskalnik naloži spletno stran), controls (prikaže navigacijske gumbe) in preload (zvok se prične prašnati takoj ob prihodu na spletno stran, vendar se ne prične predvajati samodejno) (slika 6).

<audio>

</audio>

Značka <audio> je praktično podprta že na vseh glavnih brskalnikih. Podpora zvočnih formatov v posameznih brskalnikih pa je različna (tabela 1). Težavo rešimo z značko <source>, tako, da vključimo več zvočnih virov. Značka <source> omogoča, da brskalnik preizkusi vsak vir posebej, dokler ne najde takšnega, da ga lahko uporabi.

Tabela 1: Podpora zvočnih formatov v spletnih brskalnikih [47].

Brskalnik Zvočni format

MP3 WebM Ogg

Internet Explorer 10.0 da ne ne

Mozila Firefox 19 ne da da

Google Chrome 25 da da da

Apple Safari 6.0 da ne ne

Opera 12.10 ne da da

Ko na spletno stran integriramo <audio> element, lahko vstavimo dodatne JavaScript funkcije:

• play – predvajanje avdio vsebine,

• pause – premor,

• setAtribute– omogoča spremembe lastnosti, ki jih določa značka <audio>,

• currentTime – prikaz (v sekundah) kako daleč je predvajanje,

Slika 6: Grafični vmesnik za prikaz avdio značke v spletnem brskalniku Mozila Firefox.

(27)

17

• volume – glasnost od 0 (tišina) do 100 (maksimum).

• <video> omogoča predvajanje video vsebin neposredno na spletni strani brez dodatne uporabe programskih vmesnikov. Podobno kakor pri znački <audio>, posamezni brskalniki ne podpirajo vseh video formatov, zato uporabimo značko

<source> (tabela 2). Z uporabo značke <embed> lahko prenesemo video s predvajalnikom Flash.

Tabela 2: Podpora video formatov v spletnih brskalnikih [47].

Brskalnik Video format

MP4 WebM Ogg

Internet Explorer 10.0 ne ne ne

Mozila Firefox 19 ne da da

Google Chrome 25 ne da da

Apple Safari 6.0 da ne ne

Opera 12.10 ne da da

MP4 = MPEG 4: datoteka mpeg, katera uporablja video kodek H.264 in AAC avdio kodek.

WebM: uporablja VP8 video kodek in Vorbis avdio kodek.

Ogg: uporablja Theora video kodek in Vorbis avdio kodek.

Za upravljanje video elementa uporabimo JavaScript (podobno kakor pri znački

<audio>).

• <canvas> omogoča prikaz 2D in 3D (še v razvoju) grafike, grafike v igrah in ostalih vizualnih elementov s pomočjo JavaScripta.

var c = document.getElementById('myCanvas');

var ctx = c.getContext('2d');

ctx.fillStyle = '#FF0000';

ctx.fillRect(0, 0, 80, 100);

ctx.fillStyle = '#FF1010';

ctx.fillRect(50, 60, 80, 100);

</script>

(28)

18

• <embed> omogoča prikaz zunanjih aplikacij ali interaktivnih vsebin. Vgradimo lahko medij, ki ga ostale medijske značke ne podpirajo.

Style = "width:100%;">

• <svg> omogoča risanje vektorskih grafik neposredno na spletni strani z uporabo SVG, ki temelji na XML.

<circle cx = "100" cy = "70" r = "50"

stroke = "black" stroke-width = "2" fill = "yellow" />

</svg>

3.3.3 RUBY ELEMENTI

Ruby elementi so namenjeni prikazovanju tipografije jugovzhodne Azije [7,11]:

• <ruby> označuje segment kode, ki vsebuje tipografijo jugovzhodne Azije.

• ^<rt> oznaka se umesti znotraj značke <ruby> in označuje razlago znakov (npr.

kitajskih).

• ^<pr> uporabimo jo, kadar brskalnik ne podpira značke <rt>.

<ruby>

漢<rt>ㄏㄢˋ</rt>

</ruby>

3.3.4 SPLETNI OBRAZCI

Na spletu se nenehno srečujemo s spletnimi obrazci. Želimo opraviti spletni nakup, se vpisati v spletno skupino, v brskalniku poiskati zadetke za želeno temo in še bi lahko naštevali, vendar brez spletnih obrazcev bi bilo to nemogoče. HTML5 prinaša nove in izpopolnjene elemente za vnos različnih tipov podatkov v spletne obrazce [7,11]:

• <datalist> omogoča, da razvijalec priloži seznam predlogov za besedilo. Takoj ko pričnemo vnašati tekst v polje, se prikaže seznam možnosti za izbiranje. S klikom nanj izberemo želeni predlog.

<label for = “txtList”>Ime:

<input type = “text”

list = “Imena”

id = “Seznam/>

(29)

19

</datalist>

</label>

• <fieldset> definira skupino polj, katera se obnašajo kot celota. Prikaže se kot pravokotnik z robom, znotraj katerega so razvrščena vsa polja te skupine.

<legend>Osebni podatki:</legend>

Ime: <input type = "text"><br>

Email: <input type = "text"><br>

Datum rojstva: <input type = "text">

</fieldset>

• <keygen> je oznaka za zgeneriran ključ, ki uporablja še parametre <keytype> za določitev šifriranja (RSA standard) in <challenge> za povezavo z javnim ključem. Za enkrat še ni vgrajen v vse brskalnike in tudi ni še rečeno, če bo sploh postal del standarda HTML5.

<label for = “key”>ključ

<keygen id = “key”

keytype = “rsa”

challenge = “openSesame”/>

</label>

• <label> (podobnost z značko <fieldset>) določa besedilo, ki se bo pojavilo v seznamu izbir.

<option value = "...">nove značke</option>

<option value = "...">odstranjene značke</option>

</optgroup>

<option value = "...">novi atributi</option>

<option value = "...">odstr. atributi</option>

</optgroup>

</select>

(30)

20

• <meter> določa meritve oz. številčno vrednost v določenem območju. Podpira več atributov: value, max, min, high, low in optimum. Vrednosti atributov value, low, high in optimum morjo biti v območju med vrednostjo atributa min in max

<p>Korak:</p>

• <output> omogoča izpis podatkov, ki nam jih na primer vrne skripta ali preprost matematični izraz.

<input type = "range" name = "a" value = "50"> +

<input type = "number" name = "b" value = "50">=

• <progress> prikazuje potek procesa (pri prenašanju datoteke prikazuje kolikšen del je prenesen).

Nameščanje:

</progress>

3.3.4.1 ATRIBUTI SPLETNIH OBRAZCEV

Poleg novih elementov, prihajajo še novi atributi, kateri določajo želeno obnašanje ali označevanje dodatnih lastnosti elementa [7, 11]:

• <autofocus> omogoča, da se ob naložitvi spletne strani, kazalec samodejno premakne v prvo vnosno polje.

<label> Ime

</label>

</br>

<label>Email

</label>

</fieldset>

</form>

(31)

21

• <pattern> omogoča določitev regularnega izraza, ki je dovoljen za vnos v polje. Poleg atributa <pattern> uporabimo atribut <title>, s katerim določimo obliko vnosa.

<input type = “text” pattern = “\(\d{3}\) +\d{3}-\d{4}”

title = “(ddd) ddd-dddd”/>

• <placeholder> omogoča vnos privzete vrednosti. Vrednost atributa je namig, ki razloži pričakovano vrednost vnosnega polja. S klikom nanj, namig izgine.

• <required> zahteva, da mora biti vnosno polje izpolnjeno med pošiljanjem. Na prazno vnosno polje brskalnik opozori z rdečim obarvanjem le-tega.

• <validation> omogoča, da uporabnik vnese podatke pravilno (npr. e-pošta). Pri preverjanju pravilnosti si programerji pomagajo z JavaScript kodo.

3.3.4.2 VHODNI <INPUT> ELEMENTI

Vhodni elementi omogočajo uporabniku prijazno in enostavno uporabo brskalnika. <input>

podatki omogočajo vnosno polje, kjer lahko uporabnik vnese podatke (slika 7). Vnosna polja se razlikujejo, glede na vrsto atributa.

Slika 7: Levo – vrste atributov, desno – primer uporabe <input> značke [11].

(32)

22 HTML5 ponuja sledeče vhodne elemente [7,11,17]:

• <input type = ˝color˝> za izbirnik barve,

• <input type = ˝date˝> za datumski izbirnik,

• <input type = ˝datetime˝> za točen, absolutni datum in čas,

• <input type = ˝datetime-local˝>za lokalni datum in čas,

• <input type = ˝email˝> za poštne naslove,

• <input type = ˝month˝> za mesece,

• <input type = ˝number˝> za vnos števil v nekem obsegu,

• <input type = ˝range˝>za drsnik,

• <input type = ˝search˝> za iskalna polja,

• <input type = ˝time˝> za čas,

• <input type = ˝url˝>za spletne naslove,

• <input type = ˝week˝> za tedne.

3.3.5 SVG IN MathML

Omenimo le integracijo SVG in MathML v HTML5. MathML omogoča prikaz matematičnih formul, SVG pa grafičen prikaz le-teh (slika 8). Prizadevajo si za izvajanje obeh komponent v brskalniku [11].

Slika 8: Integracija SVG in MathML [11].

3.3.6 GEOLOKACIJA

HTML5 Geolokacija API se uporablja za pridobitev geografskega položaja uporabnika. Za preveritev delovanja geolokacije v brskalniku potrebujemo le JavaScript in kodo:

<p id = "demo">Klikni na gumb za pridobitev koordinat:</p>

(33)

23

var x = document.getElementById("demo");

function pridobiLokacijo() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(prikaziPolozaj);

}

else{x.innerHTML = "Geolocation is not supported bthis browser.";}

}

function prikziPolozaj(position) {

x.innerHTML = "Latitude: " + position.coords.latitude +

<br>Longitude: " + position.coords.longitude;

}

</script>

Brskalnik preveri podprtost geolokacije. V primeru podprtosti prične s klicanjem getCurrentPosition. Prikaže se okno, v katerem izberemo, ali bomo delili informacijo o lokaciji, ali ne. V obvestilu brskalnik sporoča, katera stran zahteva informacijo o geolokaciji, in sprašuje ali želimo informacijo posredovati naprej. S pozitivno potrditvijo sprožimo nadaljnji klic za prikaz geografske širine in dolžine našega trenutnega nahajanja [7,11].

3.3.7 SPLETNA SHRAMBA IN SPLETNE APLIKACIJE V BREZPOVEZAVE NAČINU

Spletna shramba (angl. web storage je aplikacijski programski vmesnik za obstojno shranjevanje podatkov v spletnih brskalnikih. Koncept je podoben piškotkom, s to razliko da je namenjen večjemu obsegu informacij. HTML5 shramba ostaja na računalniku, spletne strani pa lahko dostopajo do nje s pomočjo JavaScripta. Spletna shramba prinaša dva nova atributa:

• senssionStorage: atribut uporabimo za kratkoročno ohranitev podatkov. Podatki ostanejo shranjeni le za eno sejo, ko zapremo okno, se podatki izbrišejo.

• localStorage: atribut uporabimo za dolgoročno ohranitev podatkov. Podatki ostanejo v brskalnikovem pomnilniku in se po končani seji ne izbrišejo.

Spletne aplikacije v brezpovezavnem načinu (angl. offline web applications) omogočajo delovanje spletnih aplikacij tudi kadar nismo povezani z spletom. Pri statičnih straneh pregledovanje v brezpovezavnem načinu ni problematično, drugače pa je s spletnim aplikacijami kot sta Gmail in Facebook. HTML5 omogoča, da brskalnik prenese vse potrebne datoteke za delovanje aplikacije v brezpovezavnem načinu. Pri ponovni povezavi na splet, pa se lahko na strežnik prenesejo morebitne spremembe, ki so se zgodile v času brez povezave.

(34)

24

Za delovanje spletne aplikacije v brezpovezavnem načinu je potrebno določiti datoteko, ki se imenuje manifest.

<!DOCTYPE HTML>

V datoteki manifest je zapisano katere datoteke je potrebno prenesti za delovanje v brezpovezavnem načinu [7,11].

(35)

25

4 CANVAS

Element <canvas> je ena najbolj zanimivih novosti v HTML5. V prihajajoči standard je vpeljal nove razsežnosti, kjer lahko predstavljamo vsebino brez dodatnih programskih vmesnikov.

Canvas (platno) je risalna površina, vidna na ekranu. S spreminjanjem velikosti platna določamo veličino okvirja slike [35].

Canvas lahko definiramo tudi kot resolucijsko-odvisno bitno platno, ki je namenjeno prikazu grafike. Je pravokotnik na spletni strani, kamor s pomočjo JavaScripta rišemo poljubne elemente [17].

Canvas poleg risanja 2D grafike omogoča tudi dinamične predstavitve vsebin in izdelavo spletnih iger. Element <canvas> sam po sebi nima risarskih zmožnosti, za to moramo uporabiti JavaScript [29].

Canvas podpirajo vsi novejši spletni brskalniki in pametni telefoni (tabela 3). [2].

Tabela 3: Podpora značke <canvas> v spletnih brskalnikih [47].

FireFox IE Chrome Safari Opera iPhone Android BlackBerry

3.0 10.0 25 6.0 12.10 6.0 2.3 10

4.1 CANVAS NA SPLETNI STRANI

Dokler česa ne narišemo, je platno prazen, bel pravokotnik (slika 9). Značka <canvas>

definira širino: width, višino: height in atribut id:

Platno se prikaže kot prazen list, na kateremu nimamo označb do kje sega. Obrobimo ga na naslednji način:

<canvas id = "myCanvas" width = "300" height = "200"

style = "border:solid 1px #ccc;"></canvas>

(36)

26

Slika 9: Platno na spletni strani.

V dokumentu imamo lahko več platen, ki jih med seboj ločujemo po atributu id. Dostop do njih je enak kot do vseh elementov v DOM-u [17]. DOM (angl. Document Object Model) definira, kateri atributi so povezani z določenim objektom in kako se atributi spreminjajo.

Objekte lahko naslavlja in z njimi manipulira. Npr. DOM omogoča, da ko na spletni strani izpolnjujemo obrazce, se nam v primeru, če ne izpolnimo vsa obvezan polja, pojavi obvestilo o manjkajočih podatkih [38].

Primer dostopa do zgornjega platna:

var c = document.getElementById("myCanvas")

Canvas predstavlja koordinatno mrežo z izhodiščem (0,0), v levem zgornjem kotu mreže (slika 10).

Slika 10: Koordinatna mreža na platnu z izhodiščem (0,0) [17].

(37)

27

Sprememba višine in širine platna pobriše trenutno vsebino in postavi vse lastnosti risalnega konteksta na privzete vrednosti. Da nam ni potrebno spreminjati širine, ji lahko priredimo kar trenutno vrednost:

canvas.width = "canvas.width"

Narišimo moder pravokotnik:

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.fillStyle = "blue";

context.fillRect(50, 25, 150, 100);

Prva vrsticavar canvas = document.getElementById("myCanvas") poišče element

<canvas> v DOM-u. V drugi vrstici var context = canvas.getContext("2d") določimo referenco na objekt v tretji vrstici. Z context.fillStyle = "blue"določimo barvo polnitve in v zadnji vrstici context.fillRect(50, 25, 150, 100) narišemo pravokotnik. Element fillRect določa koordinate za risanje: fillRect(x, y, širina, višina) [11, 17].

Podobna ukaza kakor je fillRect, sta še [11, 17]:

• context.strokeRect(x, y, dolžina, višina) – pravokotna obroba brez polnitve,

• context.clearRect(x, y, dolžina, višina) – pravokotnik brez polnitve (slika 11).

Slika 11: Levo – uporaba strokeRect, desno – uporaba clearRect.

4.2 ČRTE ALI SLEDI (Paths)

Canvas omogoča risanje črt na podoben princip kakor je risanje s svinčnikom. Črte na platno narišemo tako, da definiramo kje bodo potekale. Za risanje ravnih črt uporabimo dve metodi:

(38)

28

• moveTo(x, y) – definira izhodiščno točko risanja, in

• lineTo(x, y) – nariše črto iz izhodišča do definirane končane točke risanja,

kateri vstavimo med beginPath() in closePath(). Omenjeni metodi uporabimo v poljubnem zaporedju, da pridemo do želenega lika [19].

Črte oblikujemo z elementi (slika 12) [19]:

• strokeStyle – barva črte,

• ^lineWidth – debelina črte,

• ^lineJoin – zaobljenost robov (bevel, round, miter),

• ^lineCap – zaobljenost na koncu črte (butt ,round, square).

Slika 12: Prikaz oblikovanja črt [11].

Narišimo črko H (slika 13):

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.lineWidth = 15;

ctx.strokeStyle = "#FF00FF";

ctx.lineCap = "round";

ctx.beginPath();

ctx.moveTo(30, 30);

ctx.lineTo(30, 260);

ctx.moveTo(30, 150);

ctx.stroke();

(39)

29

Slika 13: Črka H, narisana s pomočjo lineTo in moveTo.

4.3 KRIVULJE

Canvas med drugim omogoča tudi risanje raznovrstnih krivulj. Rišemo lahko poljubne loke, kroge, krivulje in podobno.

4.3.1 BEZIERJEVA KRIVULJA

Canvas pozna dve vrsti Bezierjevih krivulj [11]:

• kvadratna krivulja (slika 14): context.quadraticCurveTo(cpx, cpy, x, y) var c = document.getElementById("myCanvas");

ctx.lineWidth = 2;

ctx.beginPath();

ctx.quadraticCurveTo(100, 400, 200, 200);

ctx.stroke();

Slika 14: Kvadratna krivulja [11].

(40)

30

• kubična krivulja (slika15): context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y).

ctx.lineWidth = 2;

ctx.beginPath();

ctx.bezierCurveTo(40, 40, 160, 120, 20, 120);

ctx.stroke();

Slika 15: Kubična krivulja [11].

4.4.2 KROŽNI LOK IN KROŽNICA Krožni lok narišemo z metodo

context.arc(x, y, radius, startAngle, endAngle, clockwise).

Komponenti x, y določata središče krožnega loka, radius definira velikost radija, s startAngle določimo začetek in z endAngle označimo konec krožnega loka. Clockwise definira smer risanja.

ctx.lineWidth = 2;

ctx.beginPath();

ctx.arc(200, 200, 70, 1*Math.PI, 2*Math.PI, true);

ctx.stroke();

(41)

31

Slika 16: Krožni lok.

Krožnico narišemo z metodo arc tako, da vrednost startAngle postavimo na nič in vrednost endAngle na 2*Math.PI [2].

arc(x, y, 0, Math.pi*2, true)

4.4. TEKST

Platno omogoča tudi risanje teksta. Oblike pisave določamo z atributi (slika 17) [2]:

• ^font – določa slog pisave, različico, debelino in velikost pisave, višino vrstice in družine pisav.

• ^textAlign – določa horizontalno poravnavo besedila, katerega omogočimo z atributi:

start, end,left, right in center,

• tekstBaseline – določa vertikalno poravnavo besedila (top, hanging, middle, alphabetic, ideograpihc in bottom.

Slika 17: Oblikovanje teksta z atributom tekstBaseline [31].

Narišmo tekst na platno (slika 18):

context.font = "bold 100px arial";

context.textAlign = "center";

context.lineWidth = "4";

context.strokeStyle = "red";

context.strokeText("HTML5", 220, 140);

context.font = "bold 50px arial";