timotej majcen - connecting repositories · 2017. 11. 28. · referenčna zbirka elementov...

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Timotej Majcen

Referenčna zbirka elementov standarda

HTML5

Diplomsko delo

Maribor, september 2014

Referenčna zbirka elementov standarda HTML5

Diplomsko delo

Študent: Timotej Majcen

Študijski program: Univerzitetni, Medijske komunikacije

Smer: Vizualna komunikacija

Mentor: doc. dr. Marko Hölbl, univ. dipl. inž. rač. in inf.

Lektorica: Sanda Gajsar, prof. slov.

ZAHVALA

Zahvaljujem se mentorju, doc. dr. Marku Hölblu,

za pomoč pri izdelavi diplomskega dela

in čas, ki mi ga je namenil.

Hvala tudi očetu in mami,

ki sta mi v vseh teh letih stala ob strani

in mi omogočila študij.

i


Ključne besede: HTML5, CSS3, JavaScript, zbirka primerov

UDK: 004.439:004.55HTML(043.2)

Povzetek

V diplomskem delu smo ustvarili zbirko primerov uporabe standarda HTML5. Zgradili smo

ogrodje, ki omogoča prikaz in razlago posameznih elementov, ter aplikacijo, s katero smo

lahko podrobneje prikazali delovanje kode. Novosti smo ločili v ustrezne podskupine,

predstavili njihovo delovanje ter ustvarili primer uporabe za posamezne elemente. Zbirko

smo na koncu prevedli v angleški jezik.

Z gradnjo zbirke smo ugotovili, da HTML5 omogoča gradnjo kompleksnejših spletnih

strani, vendar zaradi njegove odvisnosti od drugih tehnologij še vedno ni primeren za

gradnjo resnejših aplikacij.

ii

Reference of HTML5 elements

Key words: HTML5, CSS3, JavaScript, collection of examples

UDK: 004.439:004.55HTML(043.2)

Abstract

Within the thesis, a collection of examples that showcases the use of the HTML5 standard

was created. We built a framework that allows us to display individual elements and an

application with which we can further demonstrate and explain the code used. Individual

elements were separated into appropriate subgroups and explain their functionalities with

detailed examples. Finally we translated the collection into English.

Through the construction of the collection, we found that HTML5 allows developers to

build complex web pages, but because of its dependence on other technologies is still not

suitable for building serious applications.

iii

KAZALO

1 UVOD .................................................................................................................................... 1

2 NAČRTOVANJE ZBIRKE ..................................................................................................... 2

2.1 Gradnja aplikacije za prikaz kode znotraj zbirke ...................................................... 2

2.2 Ogrodje zbirke ............................................................................................................. 5

3 ZBIRKA HTML5 .................................................................................................................... 7

3.1 Semantični elementi .................................................................................................... 9

3.2 Multimedijski elementi .............................................................................................. 15

3.3 Oblikovanje elementov ............................................................................................. 20

3.4 Grafični elementi ....................................................................................................... 27

3.5 Aplikacijski in podporni elementi ............................................................................ 30

4 SKLEP ................................................................................................................................. 34

LITERATURA IN VIRI ................................................................................................................. 36

iv

KAZALO SLIK

Slika 2.1: Del generirane ubežne kode z označbami za oblikovanje ................................. 3

Slika 2.2: Prikaz posameznih opisov za določen del kode ................................................ 3

Slika 2.3: Izvorna koda znotraj tekstovne datoteke ........................................................... 4

Slika 2.4: Primer opisov posameznih delov kode .............................................................. 4

Slika 2.5: Ogrodje zbirke ................................................................................................... 5

Slika 3.1: Primer zagotavljanja funkcionalnosti še nestandardiziranih lastnosti v vseh

priljubljenih brskalnikih ...................................................................................................... 8

Slika 3.2: Izluščeni podatki iz vsebine HTML dokumenta .................................................11

Slika 3.3: Koda za upravljanje uporabniškega vmesnika videa ........................................17

Slika 3.4: Prikaz rezultata dogodka ob uporabi Web speech API .....................................19

Slika 3.5: Primer aplikacije za prepoznavanje govora ......................................................20

Slika 3.6: Primer oblikovanja HTML elementa ..................................................................22

Slika 3.7: Primer transformacije elementa ........................................................................22

Slika 3.8: Lastnosti transition animacije ...........................................................................24

Slika 3.9: Primer sintakse za deklaracijo keyframe animacije ...........................................25

Slika 3.10: Primer uporabe media query ..........................................................................27

Slika 3.11: Primer izdelka s SVG ob kodi za animacijo barv .............................................29

Slika 3.12: Del kode za animacijo barv ............................................................................29

Slika 3.13: Primer vstavljanja osebe v podatkovno bazo ..................................................32

Slika 3.14: Pretvorba lokalne fotografije v Data:URL ........................................................33


1

1 UVOD

Hyper Text Markup Language oziroma HTML je označevalni jezik in osnovni gradnik za

prikazovanje spletnih strani. Njegov izvor sega v leto 1990, ko je Tim Berners-Lee označil

njegovo uporabo za povezavo vsebine dokumentov s pomočjo hiperpovezav [1]. V zadnjih

dveh desetletjih se je skozi različice razvil v obsežno tehnologijo in v svoje značilnosti

vnesel ogromno izboljšav. Njegova temeljna naloga je označitev vsebine in njen učinkovit

prikaz znotraj različnih brskalnikov.

Združenje World Wide Web Consortium je pod imenom HTML5 objavilo nov standard, ki

je bil ustvarjen, da nadomesti HTML4, XHTML in HTML DOM Level 2. Obsega vse od

predvajanja zvoka in videa, naprednih uporabniških vmesnikov, semantičnih oznak,

podpore za programsko risanje, animacije, do gradnje kompleksnih spletnih aplikacij.

Namen standarda je omogočiti razvijalcem bogato uporabo funkcionalnosti brez potrebe

po dodatnih vtičnikih. HTML5 še ni dokončno formiran, vendar je zrelo različico mogoče

pričakovati do konca leta 2014 [2].

Virov za delo s HTML5 je sicer veliko, vendar so zelo razpršeni po spletu in morda niso

razumljivi. Ta razpršenost in dejstvo, da standard še ni dokončno oblikovan, lahko

marsikoga odvrne od uporabe novosti. Standard prav tako ni poenoten med brskalniki, kar

dodatno otežuje njegov razvoj. Veliko težavo, s katero se srečujejo razvijalci, ki bi želeli

začeti uporabljati HTML5, predstavlja dejstvo, da ne poznajo vseh možnosti, ki jih ponuja

standard, oziroma so primeri uporabe razpršeni po spletu.

Osrednji namen diplomskega dela je preučiti večino možnosti standarda HTML5 in

posamezne elemente preko primerov predstaviti na preprost in razumljiv način. Dostop do

te zbirke želimo omogočiti vsakomur, zato bo objavljena na spletu in dokumentirana v

angleškem jeziku.

V naslednjih poglavjih bomo predstavili ogrodje, ki smo ga sestavili za opis novosti.

Dokumentirali in pojasnili bomo delovanje aplikacije, ki smo jo izdelali za razlago kode.

Nato bomo izbrane elemente razdelili in postavili v smiselne kategorije. Elemente bomo

na kratko opisali in ob gradnji zbirke primerov hkrati predstavili naše delo.


2

2 NAČRTOVANJE ZBIRKE

Cilj diplomskega dela je bil razvoj referenčne zbirke primerov HTML5 novosti, ki bo

uporabnikom zgled za gradnjo spletnih strani. Želeli smo predstaviti posamezne

funkcionalnosti ter hkrati prikazati njihovo uporabo v praksi. Omejili smo se na elemente,

ki jih lahko testiramo s strojno opremo, ki jo imamo na voljo. Prav tako nismo posebne

pozornosti posvečali elementom, ki so razvijalcem običajnih spletnih strani nepomembni

in bi znotraj primerov uporabe težko prikazali njihovo funkcionalnost. Ker predvidevamo,

da bo naša referenčna zbirka objavljena na spletu, smo za njeno gradnjo uporabljali

HTML, JavaScript in CSS ter poizkušali v predstavitveno ogrodje vnesti čim več novosti

standarda HTML5. Za razvoj smo uporabljali urejevalnik kode Sublime Text, ki je ne

preverja, vendar vseeno vključuje funkcionalnosti za dokončanje pogostih delov kode.

Zbirko bomo na koncu prevedli v angleški jezik, tako da bo dostopna širšemu krogu

uporabnikov.

2.1 Gradnja aplikacije za prikaz kode znotraj zbirke

Kot vzgled smo si vzeli strani, ki so podobne naši, in hitro ugotovili, da bo največji izziv

prikazati daljše segmente kode in jih opisati na učinkovit način. Prav tako smo želeli

izboljšati berljivost kode tako, da se izogibamo komentarjev znotraj nje ter jo obarvamo na

podoben način, kot to počnejo urejevalniki izvorne kode. Ob vsem tem pa smo želeli

uporabniku omogočiti, da lahko kodo brez težav označi in kopira, če to želi.

Prikazovanje izvorne kode znotraj HTML dokumenta zahteva pretvarjanje posebnih

znakov v tako imenovano ubežno kodo, ki ne proži svojega izvajanja. Prav tako zahteva

ustrezno barvanje posameznih delov kode, njeno označevanje ter oblikovanje s pomočjo

CSS. Če bi takšno pretvarjanje izvajali ročno, bi zanj porabili preveč časa, zato smo razvili

aplikacijo, ki z JavaScriptom to stori namesto nas.

Izvorno kodo, za katero želimo, da bo obarvana, smo shranili v tekstovno datoteko ter

poskrbeli, da se ohranijo zamiki ter prehodi v novo vrstico, tako kot zahtevajo pravila

programiranja. Datoteko smo uvozili v naš dokument z elementom ter njegovo

vsebino prebrali z DOM. Nato smo ustvarili funkcijo, ki bo našo kodo prebrala in jo

pretvorila v ubežno ter hkrati obarvala njene posamezne dele z določeno barvo. Za to

smo uporabili metodo replace(), ki je zamenjala znake, kot sta < in >. Ker vemo, da znaka


3

predstavljata eno značko, smo ob njuna ubežna znaka dodali še začetno in končno

značko , ki nam služi kot sidro za barvanje s CSS. Podobno kot z značkami smo

narekovaje obdali z elementom in mu s CSS spremenili barvo in tako povzročili,

da se razlikujejo od preostale kode. Nato smo zamenjali tabulatorje s tremi znaki za

presledek ter prehode v novo vrstico z značko
. Ob preoblikovanju kode za

JavaScript kode smo še dodatno ustvarili tri sezname pogostih besed in vsako od njih

obdali z različnim elementom ter tako dodatno povečali berljivost kode. Delni

rezultat te funkcije lahko vidimo na sliki 2.1.

uporabili navadne oklepaje in tako zagotovili, da jih ne bo

prepisala funkcija, ki ju zamenjuje z njuno ubežno obliko. Kot vidimo na sliki 2.3, je naša

označba sestavljena iz začetne in končne značke ter vsebuje edinstveno trimestno število.


4

(desc001)(/desc)

(desc002)(/desc)

Slika 2.3: Izvorna koda znotraj tekstovne datoteke

Vse označbe je nato treba izluščiti skupaj z njihovim identifikatorjem. To omogoča objekt

Regular Expresion, ki opisuje določen vzorec znakov [3]. Znotraj metode replace() smo

postavili pravilo, ki poišče vse nize znakov, ki se nahajajo znotraj oklepajev, vsebujejo

besedo »desc« in se končajo s tremi števkami. Na te števke se nato lahko sklicujemo in

jih uporabimo kot id znotraj elementa , s katerim bo naša oznaka zamenjana.

Zaključno označbo smo na koncu zamenjali z majhno sliko, ki nakazuje na to, da se v kodi

pred njo skriva opis, kot je vidno na sliki 2.2.

Generirano ubežno kodo smo za tem vstavili v naš HTML dokument in v njej poiskali vse

označbe, ki predstavljajo del kode z opisom. To smo storili z metodo querySelectorAll().

Ta ustvari polje elementov, nad katere postavimo eventListener, ki čaka na klik miške.

Ostal nam je le še seznam opisov. Njegove posamezne elemente smo označili z

ustreznimi identifikatorji ter jih po potrebi oblikovali s CSS, kot lahko vidimo na sliki 2.4.

Najprej smo zaradi boljše preglednosti dokumenta opise primerov shranili v posebno

datoteko, ki smo jo nato uvozili z značko , vendar smo jo opustili zaradi

slabe podpore med brskalniki [4]. Zato smo se odločili za preprostejšo rešitev, kjer smo

seznam opisov shranili v glavni dokument ter jih skrili s pomočjo atributa hidden.

The first description.

The second description.

Slika 2.4: Primer opisov posameznih delov kode

Aplikacijo smo med razvojem testirali s programom XAMPP, ki nam je simuliral izvajanje

na strežniku, kjer je delovala brezhibno. Vseeno želimo, da naša zbirka pred njenim

morebitnim prehodom na splet deluje lokalno, zato smo jo testirali še tako, da smo HTML

dokument odprli na lokalnem disku, kjer so se pojavile težave. Ugotovili smo, da uvažanje

vsebine lokalnih datotek ni mogoče brez uporabe brskalnika v načinu za razvijalce, saj bi


5

to predstavljalo varnostno tveganje. Zato smo morali vsebino tekstovnih datotek kopirati v

HTML dokument. Za začasno hrambo smo uporabili element , ki je bil opuščen že

znotraj HTML3.2 specifikacije, vendar ga še vedno podpira večina priljubljenih

brskalnikov. To je edini element, ki svoje vsebine ne interpretira, temveč jo izriše brez

potrebe po pretvorbi v ubežno kodo [5]. Ker gre za začasno rešitev, smo ocenili, da je

takšna implementacija naše aplikacije ustrezna, vseeno pa ob prehodu zbirke na splet

priporočamo uporabo prvotne implementacije.

2.2 Ogrodje zbirke

Ker naša zbirka deluje tudi brez povezave, ne bomo gradili spletne platforme oziroma

zbirke postavili na strežnik. Vseeno pa želimo posamezne elemente predstaviti v

preglednem okolju, zato smo ustvarili osnovno predlogo, ki smo jo uporabljali skozi

celotno zbirko in tako zagotovili, da deluje enotno. Kot vidimo na sliki 2.5, smo uporabljali

kombinacijo elementov, ki so gnezdeni eden v drugem, ter jih ločili z uporabo sence. Tako

smo, kljub preprostosti predloge, ohranili privlačen videz.

Slika 2.5: Ogrodje zbirke

Izhodišče zbirke predstavlja seznam vseh vključenih novosti, ki služijo kot povezava na

primer uporabe in opis sintakse, ki ju lahko vidimo na sliki 2.5. Ta seznam bo služil kot

glavno navigacijsko orodje skozi zbirko, dokler ne bo morebiti postavljena na splet. Tam

se lahko za indeksiranje zbirke in dobro navigacijo uporabijo ustreznejša orodja. Ker je

elementov veliko, smo opis sorodnih združili v en dokument in elemente predstavili kot

smiselno celoto. Za hiter dostop do posameznih elementov znotraj enega dokumenta smo

ustvarili stranski meni, ki nam stran pomakne na ustrezen položaj. V ta namen smo

uporabili element , ki namesto URL povezave prejme id posameznega elementa. Tudi

nekatere primere uporabe smo, podobno kot opise, združili, saj bi sicer težje zagotovili


6

interakcijo z uporabnikom. Posledično smo lahko posamezen primer uporabili ob opisu

več elementov, kar nam je olajšalo delo.


7

3 ZBIRKA HTML5

Novosti, ki jih ponuja HTML5, so izjemne, če jih primerjamo s tem, kar je ponujal njegov

predhodnik. Novi elementi omogočajo natančnejšo razporeditev elementov v dokumentu,

kot tudi označevanje njene vsebine. Množica novih vnosnih polj in atributov olajša delo

uporabnikom ob izpolnjevanju obrazcev. Standard omogoča prikazovanje novih

multimedijskih elementov, kot sta zvok in video, brez potrebe po zunanjih sredstvih. Dobro

se odziva na mobilne naprave in omogoča uporabo strojne opreme, ki jo vsebujejo. Nove

možnosti oblikovanja omogočajo izgradnjo novodobnih spletnih strani brez drugih orodij.

Prav tako brez zunanjih tehnologij omogoča izrisovanje grafičnih elementov in vsebuje

orodja za hrambo podatkov ter elemente, ki na splošno težijo k izboljšavi uporabniške

izkušnje.

Ob pregledu in preučitvi vseh elementov smo se odločili, da bomo vsakega od njih

razvrstili v eno izmed naslednjih skupin:

Semantični elementi. V to kategorijo elementov bomo vstavili tiste, ki vsebino

dokumenta označijo, ampak hkrati ne predstavljajo spremembe ob njihovem

prikazu oziroma če jo, ta ni tako velika, da bi element morali postaviti v novo

kategorijo.

Multimedijski elementi. Sem bomo postavili elemente, ki služijo predvajanju

dinamičnih medijskih vsebin oziroma so z njimi povezani.

Oblikovanje elementov. Ta kategorija je namenjena vsem novostim, ki oblikujejo

videz HTML elementov preko CSS oziroma vplivajo nanj.

Grafični elementi. V to kategorijo spadajo elementi, ki omogočajo prikazovanje

grafike, kot sta svg in canvas.

Aplikacijski in podporni elementi. V zadnjo kategorijo bomo vstavili tehnologije,

ki so se pred HTML5 znotraj spletnih strani vključevale z drugimi orodji in s

skriptnimi jeziki. Tukaj bodo prav tako dobrodošli elementi, ki izboljšujejo

uporabniško izkušnjo, vendar za njih nismo našli ustreznejše kategorije.

Na tem mestu je smiselno omeniti, da nekatere funkcionalnosti HTML5 še niso

standardizirane, jih pa včasih vseeno lahko uporabljamo v različnih brskalnikih. Če

brskalnik podpira določeno nestandardizirano funkcijo, potem navadno za njeno izvajanje


8

zahteva začasno predpono [6]. Chrome, Safari in Opera1 uporabljajo -webkit-, Firefox -

moz- ter Internet Explorer -ms-. To je lahko za razvijalce zelo nadležno, saj morajo

določeno funkcionalnost uporabiti kar štirikrat, če želijo njeno izvajanje zagotoviti v vseh

brskalnikih, kot vidimo na sliki 3.1.

-webkit-transition-duration: 2s;

-moz-transition-duration: 2s;

-ms-transition-duration: 2s;

transition-duration: 2s;

Slika 3.1: Primer zagotavljanja funkcionalnosti še nestandardiziranih lastnosti v vseh priljubljenih brskalnikih

Kot vemo, lahko do posameznih CSS lastnosti dostopamo kar preko DOM na način:

[element].style.[CSS lastnost]. Vendar je pri lastnostih, ki v imenu vsebujejo pomišljaje,

zahtevana posebna previdnost. Te je treba preleviti v CamelCase, kar pomeni, da

izpustimo pomišljaje, vsaka nova beseda, razen prve, pa se začne z veliko začetnico [7].

Na podoben način se med brskalniki pojavljajo nestandardizirani elementi, ki jih prožimo

znotraj JavaScripta. Tudi ti uporabljajo predpone, vendar se že od začetka pojavljajo v

CamelCaseu.

Primere uporabe smo testirali z brskalnikom Chrome in ugotovili, da podpira vse

dokumentirane elemente. Naša zbirka je prilagojena brskalnikom, ki temeljijo na Webkitu,

zato za njeno uporabo poleg Chroma priporočamo še Safari in Opero.

Pred gradnjo zbirke smo si zastavili naslednje cilje, ki so nas vodili skozi izdelavo izdelka:

seznanitev z možnostmi standarda HTML5,

razdelitev posameznih elementov v smiselne podskupine,

postavitev zbirke primerov uporabe elementov HTML5,

dokumentacija primerov na preprost in razumljiv način.

1 Opera je pred prehodom na Webkit v različici 15 uporabljala predpono -o-, ki jo morajo dodajati

uporabniki starejših različic tega brskalnika [42].


9

3.1 Semantični elementi

Kot bomo videli v nadaljevanju, semantični elementi navadno ne vsebujejo uporabniku

vidnih funkcij oziroma ne dopuščajo velike mere interaktivnosti. Zato smo se morali pri

predstavitvi zbirke zadovoljiti z opisom sintakse in pri tem paziti, da ne zasujemo

uporabnika z odvečnimi podatki. Vseeno pa smo semantične elemente poskušali

implementirati v ostale primere, kadar je to bilo mogoče. Kot bomo videli v nadaljnjih

poglavjih, smo znotraj zbirke velikokrat uporabljali vnosna polja, tipa range, ki uporabniku

omogočajo interaktivnost na zelo preprost in hiter način. Elemente znotraj tega poglavja

smo razdelili v štiri sklope.

Elementi, namenjeni označevanju dokumenta

Razvijalci dele spletnih strani pogosto razdelijo in označijo. V ta namen je že od nekdaj

uporabljen element [8]. Ta sicer dele strani razdeli, vendar ne pove nič o njihovi

vsebini, zato jih je v večini primerov treba poimenovati z identifikatorji id in class. S

statistiko najpogostejših identifikatorjev so nastali novi semantični elementi [8]. Brskalniki

vsebine teh elementov ne prikazujejo drugače, saj nimajo posebne funkcije, vseeno pa

prikažejo strukturo dokumenta. HTML5 specifikacija predpisuje, v kakšnih okoliščinah naj

bi se vsak izmed teh elementov uporabljal [9], zato smo jo znotraj zbirke povzeli in razložili

tako kot v nadaljevanju.

Element predstavlja tematsko povezano vsebino in navadno vsebuje

druge semantične elemente.

označuje del dokumenta, ki je smiseln, tudi ko odstranimo vse elemente

okoli njega. V enem dokumentu jih je navadno več in lahko stojijo eden ob

drugem, kot na primer članki spletnega dnevnika.

predstavlja glavno vsebino dokumenta in navadno nadomesti osrednji

.

vsebuje glavne navigacijske elemente na strani.

označuje del dokumenta, ki ni ključen za razumevanje glavne vsebine,

vseeno pa je z njo povezan. Med drugim lahko vsebuje oglase.

vsebuje elemente, ki uporabniku pomagajo navigirati skozi vsebino

dokumenta. Navadno se v njem pojavljajo naslovi, imena avtorjev in kazalo

vsebine.

vsebuje podatke o delu vsebine, ki ji pripada. Tukaj pogosto najdemo

kontaktne informacije in pravila uporabe.


10

V primeru uporabe znotraj zbirke smo ustvarili predlogo spletne strani, ki nazorno prikaže,

na kakšen način naj bi posamezni elementi bili gnezdeni znotraj dokumenta. Razvijalec

lahko posamezne elemente uporablja po želji, vendar je upoštevanje specifikacije

priporočeno, saj služi lažjemu indeksiranju naše strani, kar koristi prihodnjim uporabnikom

[9].

HTML5 specifikacija vsebuje še nekaj elementov, katerih funkcija ni le semantične narave,

vendar se nam je njihova vključitev v to poglavje zdela smiselna. Prvi element, ki smo ga

vključili je . Omogoča označitev drugih elementov in jim preko značke

doda opis, ki se samodejno razporedi pod njih brez potrebe po dodatnem

oblikovanju [10], zato smo ga večkrat uporabili pri gradnji zbirke.

Drugi, ne popolnoma semantični element, ki smo ga uporabljali, je . Ta svojo

vsebino skriva, dokler ne kliknemo na puščico, ki jo prikaže, kar nam je omogočilo, da

smo nekatere daljše segmente opisane kode sprva skrili in tako izboljšali preglednost

dokumenta. V lahko po želji vstavimo element , ki vsebuje besedilo

ob puščici, ki bo vedno prikazano. Kadar smo želeli, da se naša stran naloži z odprto

vsebino elementa , smo ji dodali atribut open [11].

Zadnji element, ki ga bomo omenili v tem sklopu, je . Namenjen je označevanju

delov besedila, na katere želimo v določenem trenutku usmeriti pozornost uporabnika

[12]. Pred uvedbo tega elementa je bilo dele besedila mogoče poudariti le s CSS, medtem

ko samodejno obarva ozadje označenega besedila v rumeno. Ta element s

pridom uporabljajo strani, ki vključujejo iskalnike, saj lahko z njim označijo iskane besede

v rezultatu iskanja.

Mikropodatki

Še ena semantična novost standarda HTML5 so mikropodatki. Z njimi je mogoče vsebino

dokumenta označiti tako, da postane berljiva računalniku. Iskalniki lahko iz nje izločijo

podatke in jih uporabijo znotraj opisa rezultatov iskanja [13]. To lahko olajša brskanje po

spletu in izboljša uporabniško izkušnjo.

Uporabo mikropodatkov je treba napovedati z atributom itemscope in mu pripisati slovar,

ki bo določil tip objekta in ga opisoval. Otroci elementa s tem atributom lahko nato nosijo

podatke o tem objektu. Z itemprop nato povemo, kaj posamezni podatek pomeni. V

primeru na sliki 3.2 smo opisali osebo, ki ima ime, sliko in spletno stran. Mikropodatki

prepoznajo elemente, v katerih se nahajajo, in znajo podatke izluščiti iz ustreznih

atributov, kadar je to treba [13]. Teh podatkov uporabnik med brskanjem ne bo opazil,


11

zato naš zgled ne vsebuje interaktivnosti. Vseeno pa lahko v primeru uporabe vidimo, s

katerimi podatki bi naša stran lahko bila opremljena, če bi jo našli v iskalniku.

Slika 3.2: Izluščeni podatki iz vsebine HTML dokumenta

Podatki po meri

Pred prihodom HTML5 so si razvijalci velikokrat poenostavili programirane JavaScripta

tako, da so elementu znotraj atributov rel ali class vstavljali podatke, saj njuna uporaba ni

ključna pri izdelovanju spletnih strani [14]. Zato HTML5 prinaša podatke po meri oziroma

Custom Data. Zdaj lahko poljubnemu elementu pripnemo atribut data-*, do njegove

vrednosti pa lahko preprosto dostopamo preko DOM. Ime atributa mora vsebovati

predpono data- in je lahko sestavljeno iz poljubnega števila malih črk ter pomišljajev. Vanj

lahko shranimo poljuben niz znakov, do katerega dostopamo preko DOM metode

getAttribute() oziroma ga spremenimo z metodo setAttribute() [14]. To nam pride zelo

prav, kadar za hrambo določenih vrednosti ne najdemo primernejšega obstoječega

atributa. Vseeno pa niso primerni za prenos občutljivih podatkov, saj lahko do njih vsakdo

brez težav dostopa.

Naša aplikacija za pretvarjanje izvorne kode prav tako vsebuje podatke po meri, saj z

njihovo pomočjo ugotovi, v katerem oknu mora prikazati ustrezen opis. Znotraj primerov

uporabe pa smo jih uporabili na aplikaciji, kjer lahko na poljubno fotografijo nanašamo

različne filtre in nadziramo njihovo moč. Do različnih filtrov dostopamo preko spustnega

menija , njihov vpliv pa uravnavamo z drsnikom , ki ima razpon vrednosti

med 0 in 100.


12

Različni filtri potrebujejo za svoj učinek različne razpone vrednosti in enote. Zato bi morali

za pravilen vnos uporabiti množico if stavkov, kar bi naredilo našo kodo manj pregledno,

oziroma uporabiti več drsnikov, česar pa nismo želeli. Namesto teh smo uporabili data-*.

Znotraj vsake možnosti smo dodali atributa data-unit ter data-mod, v katera vstavimo

enoto ter vrednost, s katero moramo pomnožiti naš razpon vrednosti.

Zdaj lahko do teh vrednosti dostopamo preko getAttribute("data-unit") in

getAttribute("data-mod") ter njuno vrednost brez težav predamo funkciji, ki spreminja moč

filtrov.

Vnosna polja

Naslednji element, ki smo ga dokumentirali znotraj zbirke, je vnosno polje . Ta

element smo sicer poznali že dalj časa, vendar je s prihodom HTML5 pridobil nove tipe

vnosnih polj ter preverjanje vnosa znotraj HTML [15]. Ti novi elementi sicer ne izrinejo

JavaScripta in njegove vloge pri kompleksnejšem preverjanju uporabnikovega vnosa,

vendar so velik korak v pravo smer. Na zelo preprost način zmanjšujejo možnost, da se

bo uporabnik pri vnosu zmotil. Prav tako nekateri mobilni brskalniki prepoznajo vnosna

polja in ob pritisku na njih prilagodijo tipkovnico. Tako se na primer ob pritisku na polje tipa

number tipkovnica spremeni v tako, ki prikazuje le števke [15]. Sintaksa vnosnega polja je

ostala enaka, vendar lahko v atribut type vnesemo več tipov, ki si jih bomo ogledali v

nadaljevanju.

Search se obnaša kot iskalno polje. Ko vanj začnemo vnašati iskalni niz, se

prikaže spustni meni in nam ponuja podobne vrednosti, ki smo jih uporabili v

preteklosti. Prav tako se nam prikaže znak »x« za hiter izbris trenutnega vnosa.

Email je na prvi pogled navadno tekstovno polje, ki pa prinaša nekaj preverjanja.

Od uporabnika namreč zahteva, da vnese veljavni elektronski naslov. Polje javi

napako, če znotraj vtipkanega niza ni znaka @.

Url je podoben polju email, saj od uporabnika zahteva, da vnese veljavni URL

naslov. Preverjanje je tukaj za uporabnika rahlo nadležno, saj trenutno zahteva, da

se niz začne s »http://«, kar je dandanes pri vpisovanju naslova v URL vrstico

nepotrebno.

Tel trenutno ne prinaša nikakršnega preverjanja, saj se telefonske številke po

svetu razlikujejo. Vseeno pa se na nekaterih mobilnih napravah ob pritisku nanj

namesto navadne tipkovnice pokaže tipkovnica, podobna tisti, ki jo uporabljamo za

vnašanje telefonske številke z velikimi tipkami [15].


13

Number predstavlja polje, v katerega lahko vnašamo le števila. Ob njem navadno

najdemo puščice, ki nam omogočajo spreminjanje vrednosti z miško. To polje

navadno spremljajo atributi min, max in step, ki predstavljajo množico možnih

vrednosti ter korak, s katerim lahko povečujemo oziroma zmanjšujemo vrednost.

Range je podoben polju tipa number, saj lahko hrani le številske vrednosti, vendar

se razlikuje po tem, da jih vnesemo z drsnikom, kar je prijaznejše do uporabnika.

Polje navadno ne prikazuje svoje številske vrednosti, zato mora zanjo posebej

poskrbeti razvijalec. Internet Explorer to vrednost še dinamično prikazuje nad

drsnikom.

Date uporabniku omogoča vnos datuma s pomočjo tipkovnice ali okna, ki prikaže

koledar, po katerem se je možno premikati z miško. Temu vnosnemu polju lahko

prav tako nastavimo atributa min in max.

Month deluje na podoben način kot date, z razliko, da lahko uporabnik vnese le

leto in mesec.

Week je podoben vnosnima poljema date in month, z razliko, da lahko uporabnik

tukaj vnese le leto in teden v letu.

Time je podoben vnosnemu polju number, z razliko, da vsebuje dve polji, v katera

lahko uporabnik vnese ure in minute. Nabor vrednosti, ki jih uporabnik lahko

vnese, je ustrezno omejen.

Datetime-local združi funkcionalnosti date in time v eno. Kako bo uporabnik

izvedel vnos, je odvisno od brskalnika.

Color omogoča uporabniku vnos barve preko pogovornega okna, kjer lahko

označi poljubno barvo ali sam vnese vrednosti HSL ali RGB.

Na tem mestu moramo omeniti še en element, ki je dodan vnosnim obrazcem. To je

. Omogoča prikazovanje rezultata operacije znotraj HTML. Prej tega brez

uporabe JavaScripta ni bilo mogoče izvesti [16]. za svoje delovanje potrebuje

vnosni obrazec z atributom oninput, znotraj katerega se operacija izvede. Za

sklicevanje na vrednosti posameznih elementov se uporablja njihov atribut name in ne id,

kot smo običajno navajeni. Vrednost znotraj značke se prikaže takoj, ko

spremenimo vrednost enega izmed izbranih elementov.


14

V specifikaciji HTML5 so bili, ob različnih vnosnih tipih, prav tako dodani novi atributi, ki so

uporabnikom v dodatno pomoč pri izpolnjevanju obrazcev. V nadaljevanju si bomo

ogledali nekatere izmed njih.

Autocomplete je atribut, ki ga lahko uporabimo pri vsakem tekstovnem vnosnem

polju. Uporabniku s spustnim menijem predlaga nize, ki jih je vpisal v prejšnjih

sejah. Vnosna polja navadno samodejno uporabljajo autocomplete, zato ga lahko,

če to želimo, ročno izklopimo z autocomplete="off" [17].

Autofocus pove brskalniku, da se naj ob zagonu strani s kazalcem premakne na

izbrano vnosno polje. Uporabnik lahko takoj začne z izpolnjevanjem obrazca.

Required od uporabnika zahteva, da v izbrano polje obvezno vnese vsebino.

Sicer ne more potrditi obrazca. Pojavi pa se tudi oblaček z opozorilom.

Pattern nam omogoča, da od uporabnika zahtevamo določen vzorec vnosa glede

na pravilo, ki ga postavi razvijalec [14]. Uporablja Regular Expresion, ki smo ga

omenili že v prejšnjem poglavju ob gradnji ogrodja.

Atribut multiple tekstovnemu vnosnemu polju pove, da lahko prejme več

vrednosti, če so ločene z vejico. Preverjanje se proži nad vsako vrednostjo

posebej.

Novalidate in formnovalidate povesta brskalniku, da preverjanje na vnosnem

obrazcu oziroma posameznih vnosnih poljih ni potrebno. To je koristno, ko želimo

uporabiti dodatne funkcionalnosti mobilnih aplikacij, vendar ne želimo preverjanja.

List in element omogočata uporabo spustnega menija znotraj

tekstovnega vnosnega polja, ki pa vsebuje le vrednosti, ki jih je določil razvijalec.

Uporabnik lahko še vedno vnese poljubno vrednost, če to želi.

Kot vidimo, je novih vnosnih tipov kar veliko, vseeno pa njihova podpora ni najboljša v

nekaterih brskalnikih. Webkit brskalniki so jih prikazovali brezhibno, medtem ko Firefox in

Internet Explorer nista znala prikazati polj za vnos časa. Internet Explorer je odpovedal pri

vnosu barv. Vnosna polja ne omogočajo interaktivnosti, zato so v naši zbirki le

dokumentirana in vidno prikazana. Vseeno pa se nam je v primer uporabe zdelo smiselno

dodati funkcionalnost, ki uporabniku pokaže, v kakšnem formatu se prikažejo rezultati

posameznih vnosnih obrazcev.


15

3.2 Multimedijski elementi

V tem delu bomo predstavili elemente, ki so namenjeni predvajanju medijskih vsebin in

omogočajo njihovo delovanje. Njihova največja vrednost je v preprostosti uporabe in

dejstvu, da se nam za njihovo predvajanje ni treba zanašati na zunanje tehnologije. V tem

poglavju bomo prav tako omenili funkcionalnosti, ki se na njih navezujejo oziroma so jim v

podporo. Vseeno je treba omeniti, da so bili ti elementi ustvarjeni z namenom uporabe na

spletu, saj smo pri njihovem preizkušanju na lokalnem računalniku naleteli na težave.

Video in avdio

Prvi multimedijski element znotraj naše zbirke je . Preko njega je mogoče na

preprost način v spletno stran vdelati video posnetek. Včasih je bila uporaba vtičnika flash

oziroma drugih sorodnih tehnologij skoraj obvezna, hkrati pa je postal element , v

katerega se je video umestil, zelo nepregleden [18]. Posnetek lahko vdelamo znotraj ene

same značke, saj za predvajanje potrebujemo le atribut src, v katerega vstavimo

povezavo do videa2. Vseeno je priporočljiva uporaba več možnih virov, v primeru, da

brskalnik ne podpira določenega tipa. To omogoča element , v katerem atribut

type predstavlja pot do vira. Tako lahko brskalnik takoj ugotovi, če je sposoben predvajati

določen format. Sicer mora najprej prenesti datoteko in nato ugotoviti, kakšnega formata

je [19], kar lahko upočasni delovanje. Priporočena je vključitev formatov WebM in MP4,

saj vsi popularni brskalniki podpirajo vsaj enega izmed njiju [19].

Element lahko, podobno kot različne vire videa, vsebuje različne podnapise formata

WebVTT. V ta namen se uporablja 3. Gre za datoteke, ki jih lahko urejamo z

vsakim urejevalnikom besedila. Vsebujejo časovno oznako, ki pove, kdaj naj bo besedilo

vidno, identifikator posameznega napisa in rezervirano besedo WEBVTT, ki se mora

pojaviti v prvi vrstici dokumenta. V nadaljevanju si bomo ogledali pogoste atribute, ki se

pojavljajo znotraj videa.

Autoplay pove brskalniku, naj video predvaja takoj, ko je to mogoče. Gre za manj

priljubljeno možnost med uporabniki, zato se na večini mobilnih brskalnikih ne

upošteva [19].

2 Če je vir lokalna datoteka, potem drsnik za iskanje po videu ne deluje.

3 Podnapisi morajo izvirati iz strežnika in ne bodo delovali, če jih želimo vdelati iz lokalne datoteke

[41].


16

Preload uporabljajo razvijalci, ki predvidevajo, da si bo uporabnik video želel

ogledati. Ta atribut povzroči, da se video začne prenašati, še preden uporabnik

klikne na gumb za predvajanje.

Poster omogoča izbiro slike, ki bo prikazana, preden se video začne predvajati.

Controls omogoča prikaz uporabniškega vmesnika za predvajanje videa, ki je

prevzeto skrit. Uporabnik lahko vmesnik kadar koli prikaže ali skrije, kadar klikne

na video z desnim miškinim gumbom. Vsak brskalnik prikazuje obliko vmesnika po

svoje, zato lahko ustvarimo svojega, če želimo enotni videz v vseh brskalnikih.

Height in width določata višino in širino predvajalnika. Kadar nista definirana, bo

predvajalnik prevzel velikost vira, ki ga predvaja.

Loop se uporablja, kadar razvijalec želi, da se video ob koncu ogleda začne

ponovno predvajati.

Video prinaša metode, ki se lahko prožijo preko DOM v JavaScriptu. Tako je mogoče, kot

smo to prikazali v primeru uporabe, ustvariti prilagojen uporabniški vmesnik. Za njegovo

izdelavo smo najprej postavili ogrodje, ki je sestavljeno iz gumbov za predvajanje oziroma

premor, utišanje videa in ogled v celozaslonskem načinu ter drsnika za iskanje po videu in

nastavitev. Na njih smo postavili eventListener, ki ob uporabniškem vnosu proži ustrezno

metodo. Pri gumbu za predvajanje videa smo najprej ugotavljali, če se le-ta že predvaja, s

preverbo atributa paused, ki je tipa boolean. Nato smo uporabili metodi play() ali pause(),

odvisno od stanja videa. Za uravnavanje glasnosti smo spreminjali vrednost atributa

volume oziroma muted. Ogled videa v celozaslonskem načinu nam je omogočal

Fullscreen API, ki spada pod standard HTML5 in ga lahko prožimo nad vsakim HTML

elementom z metodo requestFullscreen(). Nazadnje smo še implementirali možnost

pomikanja po časovni osi videa tako, da smo spreminjali atribut currentTime, kot je

prikazano na sliki 3.3. Vrednost tega atributa smo hkrati uporabili za samodejno

premikanje drsnika, kadar se video predvaja. To je mogoče tako, da smo na video

element postavili eventListener, ki čaka na dogodek timeupdate.


17

function playPause(){

if(video.paused)

video.play();

else

video.pause();

} // predvajanje in premor videa

function mute(){

if(video.muted)

video.muted = false;

else

video.muted = true;

} // utišanje videa

function fullScreen(){

video.requestFullscreen();

} // celozaslonski način

function seek(){

video.currentTime = (video.duration/100) * seekBar.value;

} // premikajnje po časovni osi videa

function timeUpdate(){

seekBar.value = (100/video.duration) * video.currentTime;

} // premik drsnika glede na trenuten čas videa

function volume(){

video.volume = volumeBar.value;

} // uravnavanje glasnosti

Slika 3.3: Koda za upravljanje uporabniškega vmesnika videa

Ker je HTML element, ga lahko urejamo s CSS, kar nam omogoča, da na njem

uporabimo različne učinke, kot so na primer filtri. To smo demonstrirali tudi v primeru

uporabe, vendar smo filtre podrobneje opisali v naslednjem poglavju.

Naslednji element znotraj naše zbirke je , ki omogoča vgrajevanje zvočnih

posnetkov v spletno stran in je po načinu uporabe zelo podoben elementu ter

med drugim omogoča tudi prikazovanje napisov s pomočjo elementa . Razlikujeta

se le po tem, da sta atributa height in width tukaj neuporabna. Povečevanje privzetega

uporabniškega vmesnika je možno le z uporabo CSS. zna predvajati datoteke

tipa mp3, wav in ogg. Večina priljubljenih brskalnikov podpira vsaj enega izmed teh

formatov [20]. Znotraj zbirke smo ga predstavili tako, da smo ustvarili predvajalnik glasbe,

kjer smo prav tako implementirali funkcionalnosti vnosnega polja, ki vsebuje element

. Temu JavaScript menjuje atribut src, s čimer se zamenja trenutna skladba.

Uporabnik ima možnost neposredno vpisati naslov želene skladbe. Če je ni na seznamu

predvajanja, se bo dodala seznamu želenih.


18

Web speech API

Web speech API4 v HTML5 dodaja spletni strani funkcijo prepoznave govora [21]. Tako je

omogočena glasovna interakcija s spletno stranjo. Primerna je zlasti za uporabnike s

posebnimi potrebami. Do nje dostopamo z JavaSciptom. Znotraj zbirke smo zgradili

aplikacijo, ki uporabniku omogoča vnos besedila po mikrofonu v enem izmed treh možnih

jezikov. Aplikacija znotraj strani prikaže to besedilo, ki ga je mogoče urejati in na koncu

ponovno predvajati. Za pogon API smo ustvarili novo instanco objekta speechRecognition

in mu s šifro države5 nastavili jezik. Nato smo prepoznavanje govora pognali z metodo

start(), ki povzroči, da nas brskalnik vpraša za dovoljenje o uporabi mikrofona in nas

začne poslušati. Rezultat shrani znotraj dogodka onresult, iz katerega bo treba izluščiti

pridobljeno besedilo. Besedilo se nahaja znotraj objekta na mestu

event.results[0][0].transcript, kot lahko vidimo na sliki 3.4. Ker želimo, da nas API posluša

dalj časa, smo mu nastavili vrednost spremenljivke continuous na true, kar povzroči, da se

bo dogodek prožil vsakič, ko bo uporabnik po mikrofonu vnesel novo besedno zvezo, kot

je vidno na sliki 3.4. Ker se nova besedna zveza nahaja na drugem mestu, smo uporabili

for zanko, da smo izluščili celotni govor uporabnika in ga na koncu zlepili. Prav tako smo

izluščili vrednost spremenljivke confidence, ki nam pove stopnjo zanesljivosti prepoznave

besedila. S tem lahko od uporabnika zahtevamo, da besedo ponovi, če je zanesljivost

prenizka. Vseeno smo se znotraj primera uporabe temu odrekli, saj smo z večkratnim

testiranjem različnih jezikov ugotovili, da je visoka stopnja zanesljivosti za govorca, ki

izgovarjave ne obvlada, težko dosegljiva.

4 Datoteka, znotraj katere poganjamo API, se mora nahajati na strežniku, saj sicer aplikacija ne

deluje. 5 Med podprtimi jeziki trenutno ni slovenščine, lahko pa med drugimi najdemo angleški, nemški in

tudi hrvaški jezik.


19

Slika 3.4: Prikaz rezultata dogodka ob uporabi Web speech API

Pridobljeno besedilo smo preko DOM sproti dodajali v element z atributom

contenteditable, postavljenim na true. To omogoča, da lahko uporabnik besedilo znotraj

tega elementa ureja, kot da je v vnosnem polju. Zdaj lahko računalnik to besedilo zvočno

ponovi. To omogoča API SpeechSynthesis znotraj HTML5 standarda [22]. Za njegovo

uporabo smo ustvarili novo instanco objekta SpeechSynthesisUtterance, ki v konstruktor

prejme besedilo, za katero želimo, da nam ga računalnik izgovori. Nastavili smo mu

ustrezen jezik in ga pognali z metodo speak(). Uporabnik lahko izbere jezik vnosa in

branja, kar smo omogočili z uporabo vnosnega polja . Kodo aplikacije lahko

vidimo na sliki 3.5.


20

/*Poslušanje govora*/

var recognition = new webkitSpeechRecognition();

recognition.lang = "en-GB";

recognition.continuous = true;

recognition.onresult = function(event) {

for (var i = 0 ; i < event.results.length; ++i) {

trans = event.results[i][0].transcript;

conf.innerHTML = event.results[i][0].confidence;

}

rezultat.innerHTML += transcript;

}

/*Branje besedila*/

var message = new SpeechSynthesisUtterance(rezultat.innerHTML);

message.lang = "en-GB";

window.speechSynthesis.speak(message);

English

German

Croatian

Start new recording

Stop recording

Transcript..

confidence: 0%

Read it back to me

Slika 3.5: Primer aplikacije za prepoznavanje govora

3.3 Oblikovanje elementov

V to kategorijo spadajo novosti, ki HTML elementom spreminjajo videz oziroma njihovo

postavitev. To so večinoma nove lastnosti in funkcionalnosti, ki jih omogoča CSS3.

Oblikovanje besedila

Znotraj spletnih strani je mogoče, s HTML5 funkcionalnostjo WebFonts, vključiti poljubne

pisave, ne da so naložene na uporabnikovem računalniku. Včasih je bilo treba za uporabo

nestandardnih pisav uporabljati rešitve, ki so brskalniku onemogočale njihovo berljivost

oziroma urejanje [23]. Danes pa vse to omogoča funkcija @font-face. Za njeno uporabo jo

je treba le definirati znotraj CSS dokumenta, kjer pokažemo na lokacijo .ttf datoteke in

definiramo poljubno ime, ki se bo sklicevalo na pisavo. Brskalnik lahko nato to pisavo

uporablja z že poznano CSS lastnostjo font-family, znotraj katerega koli HTML elementa.

Besedilu lahko zdaj dodamo tudi nove lastnosti o barvi, velikosti in označbi. Med te

spadata obroba in polnilo, ki ju nastavimo s text-stroke in text-fill-color. Vsakemu besedilu

lahko s CSS3 prav tako dodamo učinek sence z lastnostjo text-shadow. Ob oblikovanju

znakov vsebuje CSS3 še nove lastnosti za postavitev besedila. Tega je zdaj mogoče


21

porazdeliti v stolpce [24]. Column-count predpisuje število stolpcev, column-gap nadzoruje

razmik, column-rule pa videz delilne črte na način, kot smo ga vajeni pri lastnosti border.

Vse te lastnosti smo prikazali znotraj zbirke tako, da smo zgradili preprost urejevalnik

besedila, v katerem lahko uporabnik oblikuje besedilo z vnosnimi polji.

Oblikovanje elementov

V prejšnjem sklopu smo obravnavali oblikovanje besedila. Podobne funkcionalnosti lahko

uporabimo na vseh HTML elementih. Njihovo podobo smo sicer lahko spreminjali že od

nekdaj, toda navadno smo se zadovoljili le s spremembo velikosti in barve. Danes CSS3

omogoča mnogo več. Da bi čim bolje prikazali nove lastnosti oblikovanja elementov, smo

ustvarili primer, v katerega smo postavili element in mu nastavili začetno obliko ter

ob njega dodali vnosna polja, kot je to prikazano na sliki 3.6. Ti spreminjajo vrednosti

novih CSS3 elementov. Prva dva določata višino in širino objekta. Element ima tudi

senco, ki se spreminja sorazmerno z njegovo velikostjo.

Prva lastnost v zgledu tega sklopa je učinek padanja sence box-shadow. Tej lastnosti

lahko nastavimo odmik sence v x in y osi, njeno razpršenost in barvo. Naslednja lastnost

je border-radius, ki nam zaobli kote lika in uporabniku omogoča, da ustvari popoln krog.

Na koncu smo uporabniku omogočili barvanje lika. To bi sicer lahko storili z background-

color, vendar CSS3 nudi nekaj zanimivejšega. Uporabljamo lahko gradiente oziroma

prelivanje barv iz ene v drugo z uporabo linear-gradient, ki kot vrednost prejme rotacijo

preliva ter seznam barv, med katerimi se preliva. Za vsako dano barvo znotraj gradienta

lahko dodamo še vrednost v odstotkih. Ta pove, na katerem mestu naj bo izbrana barva

najintenzivnejša. To nam omogoča, da ustvarimo neenakomerne prelive. Barvne

vrednosti lahko prav tako določimo na različne načine. Namesto heksadecimalne

vrednosti lahko na primer uporabimo obliko rgba(0, 255, 0, 0), ki ob barvi določa tudi

prosojnost. V našem primeru smo uporabili tri barve. Na linear-gradient se ne sklicujemo

neposredno preko DOM, saj gre za vrednost, ki jo lahko nastavimo kateri koli lastnosti. V

našem primeru je to background. Če bi želeli, bi lahko uporabili tudi radial-gradient, ki

preliva barve iz središča do roba elementa.


22

Slika 3.6: Primer oblikovanja HTML elementa

Še ena lastnost, ki jo lahko dodamo HTML elementom, je box-reflect. Z njeno uporabo

lahko element prezrcalimo preko enega izmed svojih robov. To omogoča gradnjo še

zanimivejših spretnih strani.

CSS3 ne omogoča le oblikovanja prikazanega v prejšnjem primeru. Vsebuje še

funkcionalnosti za prave 2D preobrazbe. Med te spadajo translacija oziroma premik,

vrtenje, sprememba velikosti in deformacija glede na koordinatni osi [25]. V zbirki

primerov smo na podoben način kot prej pripravili drsnike za upravljanje transformacij. Za

vsakega od načinov transformiranja smo uporabili dva drsnika, in tako omogočili

transformacijo po obeh koordinatnih oseh. Izjema je rotacija, ki ima samo en drsnik, s

katerim določamo kot rotacije. Za transformacijo je uporabljena lastnost transform, ki kot

vrednost prejme več ukazov za njeno izvedbo. Vsak od ukazov se začne z angleškim

imenom za način transformacije, ki mu sledi ustrezna vrednost. Kot vidimo na sliki 3.7, je

mogoče hkrati izvesti več transformacij.

transform : rotate(-105deg) skew(15deg, 35deg) scale(-1.9, 2.9) translate(-66px, 0 px)";

Slika 3.7: Primer transformacije elementa


23

Opazili smo, da se transformacije ne ozirajo na sosednje elemente, in jih zato brez težav

sekajo. Zato moramo pri njihovi implementaciji biti pozorni na začetni položaj elementa.

Prav tako vidimo, da je transformirano besedilo znotraj elementa še vedno mogoče

označiti in urejati, če element to omogoča.

Filtri

Filtri ponujajo še eno možnost oblikovanja naših elementov in se lahko, kot ostale CSS3

novosti, aplicirajo na vse vidne HTML elemente [26]. Z njimi smo lahko znotraj zbirke na

preprost način ustvarili primer za obdelavo fotografij s filtri, ki jih bomo opisali v

nadaljevanju.

Grayscale s svojo vrednostjo določi stopnjo sivine, izraženo v odstotkih.

Sepia s svojo vrednostjo določi stopnjo učinka sepije, izraženo v odstotkih.

Saturate povečuje nasičenost barv. Vrednosti nad 100 % dajo najzanimivejše

rezultate.

Hue-rotate. Ta učinek zavrti barvni krog s predpisanim kotom, tako se barvna

shema slike lahko popolnoma spremeni.

Invert barvam postopoma nastavlja obratno vrednost. Pri 50 % slika postane

popolnoma siva, pri 100 % pa dobimo negativ.

Opacity elementu manjša prozornost, dokler ne postane neviden. Čeprav je

element neviden, je »fizično« še vedno prisoten na svojem mestu in ima normalno

interakcijo z ostalimi elementi.

Brightness nastavlja svetlost elementa. Pri vrednostih nad 100 % je uporaben za

osvetljevanje temnih fotografij.

Contrast elementu spreminja kontrast. Vrednosti nad 100 % lahko popestrijo

fotografije.

Blur razostri element. Večja vrednost zmanjša ostrino.

Filtre lahko tako uporabimo na katerem koli elementu znotraj HTML. Večina filtrov se

izvede razmeroma hitro, vseeno pa moramo upoštevati, da so filtri, kot je na primer blur,

zahtevnejši. Ta mora vsakemu pikslu poiskati soseda in generirati njuno mešano barvo,

kar lahko pri velikih fotografijah upočasni delovanje strani [26]. Našo aplikacijo smo

zgradili tako, da uporabniku omogoča izbiro fotografije preko vnosnega polja in na njej

testira razne filtre ter njihove vrednosti.


24

Animacija

V prejšnjih poglavjih smo si ogledali nekaj primerov oblikovanja elementov s CSS. Vse pa

je mogoče med drugim še animirati. Ena vrsta animacij so prehodi, ki jih dosežemo z

lastnostjo transition. Ti omogočajo, da se sprememba med dvema vrednostma iste

lastnosti ne zgodi nenadoma, temveč se v brskalniku animira prehod med njima [27].

Kadar animacijo uvedemo, jo sproži vsakršna sprememba te lastnosti, zato nam ni treba

posebej določati prožilnega dogodka. Za uporabo animacije je treba definirati lastnosti,

prikazane na sliki 3.8.

transition-property: all;

transition-duration: 2.5s;

transition-timing-function: linear;

transition-delay: 0s;

Slika 3.8: Lastnosti transition animacije

Primer na sliki 3.8 nam pove, naj se animira vsaka sprememba vrednosti katere koli

lastnosti. Prehod oziroma animacija naj traja 2,5 sekunde in se naj izvede linearno ter

brez zakasnitve. Ker navadno ne želimo animirati vseh prehodov med vrednostmi, lahko

lastnosti transition-property predpišemo, katere spremembe se naj animirajo. Prav tako je

mogoče izbirati med različnimi tipi prehodov. Ti se med seboj razlikujejo v delih animacije,

kjer naj jo pospešijo oziroma upočasnijo.

Znotraj zbirke smo animacijo predstavili s preprosto igro, katere cilj je uloviti krog, ki beži

od miškinega kazalca. V JavaScriptu smo jo sprogramirali tako, da se lastnost, ki določa

položaj kroga, spremeni takoj, ko se ga dotaknemo z miškinim kazalcem. Če uporabniku

uspe klikniti na krog, se igra konča. Brez uporabe transition za prehod bi se lik v trenutku

premaknil na novo mesto, tako pa se do svojega končnega položaja premika z

zakasnitvijo. To da uporabniku možnost, da krog ujame.

Ob transition poznamo še en način animacije. To je animacija preko ključnih okvirjev

oziroma keyframov in vsebuje več različnih sklicnih točk, na katerih se bo animacija

izvedla [28]. Ta se sproži samodejno in ne čaka na spremembo atributov. Uporaba takšne

animacije se deklarira na začetku CSS3 dokumenta s sintakso, kot jo vidimo na sliki 3.9.


25

@-webkit-keyframes myAnimation {

0% { height: 80px; width: 80px; border-radius: 80px; }

100% { height: 130px; width: 130px; border-radius: 130px; }

}

#myDiv{

animation-name: myAnimation;

animation-duration: 2s;

animation-timing-function: linear;

animation-delay: 1s;

} Slika 3.9: Primer sintakse za deklaracijo keyframe animacije

Ime deklaracije animacije je lahko poljubno in se v našem primeru imenuje myAnimation.

V pravilih smo določili, naj ima animacija tri začetne in tri končne vrednosti za navedene

lastnosti. Značilno za keyframe animacijo je, da se prehod med vrednostmi interpolira

oziroma je zvezen kot pri transitions. Ta pravila ne povzročijo ničesar, ampak moramo za

njihovo proženje uporabiti lastnost animation znotraj elementa, ki ga želimo animirati. Na

sliki 3.9 vidimo, da element #myDiv uporablja animacijo z imenom myAnimation.

To kodo smo vključili v primer uporabe z igro. Tako smo povzročili, da bo krog po eni

sekundi ob končanem nalaganju strani pridobil vse lastnosti, ki so definirane pri 0 %. V

naslednjih 3 sekundah se bo počasi spreminjal v obliko, kot je definirana pri 100 %.

Flexbox

Poglejmo si, kako CSS3 skrbi za postavitev elementov znotraj dokumenta.

Funkcionalnost, ki to omogoča, se imenuje flexbox. Prinaša možnosti natančnejšega

razporejanja elementov znotraj njim nadrejenega elementa na preprostejši način, kot smo

ga bili vajeni pred HTML5. Flexbox omogočimo tako, da nadrejenemu elementu dodamo

lastnost display in jo postavimo na vrednost flex. S tem povemo, naj se vsi neposredni

otroci okvirja razporedijo po določenih pravilih [29]. Zdaj lahko istemu elementu dodajamo

nove lastnosti, ki bodo omogočile natančno razporejanje podelementov. Opisali jih bomo v

nadaljevanju [29].

Flex-direction vsebuje vrednost, ki določi razvrstitev podelementov po vrsticah ali

stolpcih.

Justify-content določa razmik med posameznimi podelementi nadrejenega

elementa. Lahko so pomaknjeni v določeno smer, centrirani ali pa si sami

enakovredno razporedijo prazen prostor.

Align-items določi razporeditev podelementov nadrejenega elementa v osi, ki je

pravokotna tisti, na kateri se trenutno nahajajo. Če so podelementi nadrejenega


26

elementa postavljeni drug ob drugem, bi lastnost align-items povedala, koliko

prostora naj imajo otroci pod in nad sabo.

Flex-wrap lahko povzroči, da vsebina okvirja postane večvrstična. Podelementi se

začnejo postavljati v novo vrstico, če jim na primer levo in desno zmanjka prostora.

Order je lastnost, ki jo uporabimo znotraj podelementov nadrejenega elementa. Z

njo povemo, kateri po vrsti naj bo prikazan.

Align-self se prav tako uporablja znotraj podelementa in predstavlja položaj

elementa na osi, ki je pravokotna tisti, na kateri se nahaja.

Flex je še ena lastnost znotraj podelementa in pove, kolikšen delež nadrejenega

elementa naj zaseda. Če je ta lastnost definirana znotraj elementa, se mu bodo

sosedi prilagajali na najboljši možni način.

Kot vidimo, je flexbox funkcionalnost, ki omogoča veliko prilagodljivost in smo jo ob gradnji

zbirke pogosto uporabljali. Znotraj zbirke smo ustvarili primer galerije fotografij, ki ji

uporabnik lahko nastavi širino okvirja oziroma nadrejenega elementa. Spreminja lahko

nekatere lastnosti in opazuje obnašanje posameznih elementov.

Media queries

Zadnja funkcionalnost, ki jo bomo predstavili v tem poglavju, se imenuje media query. Ta

omogoča razvijalcem, da uporabijo različen CSS slog na različnih napravah, kar zelo

olajša prilagoditve spletnih strani različnim dimenzijam zaslonov. Media query zazna tip

prikazovalnika, na katerem se vsebina strani prikazuje, in njegovo resolucijo [30]. S temi

podatki lahko izboljšamo uporabniško izkušnjo, saj se vsebina prilagodi posamezni

napravi za prikazovanje.

Sintakso media query zapišemo znotraj datoteke CSS oziroma na element , s

katerim dostopamo do sloga. Za besedo @media vstavimo enega ali več argumentov,

skupaj z logičnimi operatorji, kot lahko vidimo na sliki 3.10. Če parametri ustrezajo

uporabnikovemu tipu zaslona, se bo izvedel notranji CCS oziroma ga bo brskalnik v

nasprotnem primeru ignoriral [30]. Takšen media query se lahko nahaja kjer koli znotraj

našega CSS dokumenta in se na tistem mestu tudi izvede ter upošteva vse prejšnje CSS

stavke. Tako ni treba za vsak tip zaslona ustvariti novega CSS dokumenta, temveč lahko

glede na zaslon spreminjamo le tiste lastnosti, ki jih potrebujemo.

Že znanemu primeru znotraj naše zbirke, ki prikazuje pravilno uporabo in postavitev

semantičnih elementov, smo dodali media query. Predstavljeni semantični elementi v

primeru so bili, brez media query, namenjeni le računalniškim zaslonom, ki so dovolj široki


27

za pregleden prikaz celotnega dokumenta, ne pa tudi mobilnim napravam. Če smo pred

uporabo media query pomanjševali velikost okna brskalnika, smo videli, da se vsebina

začne zoževati in postaja vse manj pregledna, dokler na ekranu ne vidimo le

podolgovatega zmazka.

@media screen and (max-width: 750px) {

#flexOkvir {

flex-direction: column;

min-width: 340px;

}

}

Slika 3.10: Primer uporabe media query

Znotraj primera, ki je viden na sliki 3.10, bo notranji CSS začel delovati, če bo

prikazovalnik tipa screen in če bo njegova širina manjša od 750 px. Takrat se smer

flexboxa obrne iz horizontalne v vertikalno in povzroči, da se navigacijski meni postavi na

vrh strani, element pa na dno, kar uporabnikom z manjšimi ekrani olajša branje

vsebine. Hkrati smo še nastavili minimalno širino našega flexbox okvirja, kar preprečuje,

da bi postal preozek. Media query se ne uporablja samo pri zaslonskem prikazu, ampak

ga uporabimo tudi takrat, kadar uporabnik želi vsebino strani natisniti. Tako smo v našem

primeru uporabili media query, ki bo pri tiskanju dokumenta skril navigacijski meni in

omogočal več prostora glavni vsebini. Ker naša zbirka trenutno ni prilagojena uporabi na

mobilnih napravah, pozovemo uporabnika, naj poskusi zmanjšati okno brskalnika oziroma

poskuša dokument natisniti, da bo opazil želen učinek.

3.4 Grafični elementi

Grafični elementi predstavljajo okvir znotraj dokumenta, v katerem se prikazuje grafika.

Brez uporabe zunanjih virov oziroma vtičnikov omogočajo prikaz zahtevnejših grafik in

animacij. Znotraj zbirke smo se osredotočili na elementa SVG in canvas.

Svg

Najprej si oglejmo SVG ali Scalable Vector Graphics, ki je namenjen prikazovanju

vektorskih slik, shranjenih v formatu XML [31]. Največja prednost tega formata je, da se

kakovost prikaza slike s povečevanjem ne spreminja [32]. Preden se lotimo primera

uporabe v naši zbirki, si v nadaljevanju poglejmo ukaze oziroma funkcionalnosti, ki jih

SVG podpira.


28

Začnimo s črto. V lahko ustvarimo element , ki vsebuje podatke o točkah,

skozi katere se bo premikal risalnik. Potek poti opisujemo v atributu d, ki vsebuje serijo

koordinat z ukazom, ki pove, kakšen premik se naj med točkami dogaja. Med pogostejše

ukaze spadajo naslednji:

M – Risalnik se v naslednjo točko koordinatnega sistema le postavi in ne nariše

črte do njih. S tem ukazom lahko rišemo prekinjene črte, prav tako pa služi kot

začetna točka.

L – Risalnik premaknemo v naslednjo točko in do nje potege ravno črto.

A – Naslednji del poti, ki jo bomo izrisali, bo krivulja. Ta ukaz prejme več vrednosti.

Te so ukrivljenost, usmerjenost loka in končna točka.

Z – Ta ukaz risalniku pove, naj pot zaključi tako, da jo poveže s svojim izhodiščem

in ustvari obliko.

Če želimo pot prikazati v dokumentu, ji je treba dodati oblikovanje, kar je mogoče znotraj

atributa style. Tukaj se med drugim nastavlja barva črte, njena širina in polnilo vsebine

oblike, ki je nastala. Naslednji element, ki se pojavlja, je . Ta omogoča izris oziroma

izpis besedila, saj ga lahko nato označimo in kopiramo. Določiti mu je treba le njegov

začetni položaj in besedilo. Prav tako lahko znotraj vstavljamo like, kot sta in

oziroma pravokotnik ter krog, ki jima določimo začetni položaj in polnilo.

SVG omogoča tudi animacijo. Elemente je mogoče preoblikovati na podoben način, kot

smo to obravnavali v poglavju za oblikovanje elementov in njihovo transformacijo. Znotraj

to povzroči značka , ki mora biti znotraj elementa, ki ga želimo

transformirati, in mu preko atributov predpiše tip animacije in njen potek. Podobno kot pri

CSS animaciji lahko tudi animiramo posamezne atribute elementov, vendar tokrat

uporabimo značko in jo implementiramo na enak način kot

. Ob vsem tem si je treba zapomniti, da so znotraj elementa

vse značke zaključene, kar znotraj HTML5 ni zahtevano. To zahteva XML standard, ki

nezaključenih značk ne tolerira [31].

Znotraj zbirke primerov smo to znanje uporabili tako, da smo z JavaScriptom postopoma

gradili risbo, ki je sestavljena iz krogov. Ti se znotraj platna pojavljajo tako, da na trenutnih

miškinih koordinatah postavijo krog, naključne velikosti, vanj vstavijo naključen gradient

barv ter na koncu prelive med njimi animirajo, kot lahko vidimo na sliki 3.11.


29

Slika 3.11: Primer izdelka s SVG ob kodi za animacijo barv

Elemente smo ustvarjali z metodo createElementNS() in jih ustrezno gnezdili z

appendChild(). Animacijo prelivov nam je omogočala značka oziroma

, v katero smo ugnezdili zaporedje značk . V njih se nahajajo

posamezne barve. Znotraj teh smo nato postavili značke , s katerimi smo

naključno menjavali barve znotraj . Delna koda za prikaz serije barv znotraj

gradienta pa je prikazana na sliki 3.12.

Slika 3.12: Del kode za animacijo barv

Canvas

Drugi element, ki smo ga obravnavali v naši zbirki, se imenuje . Za razliko od

SVG prikazuje rastrske slike. To pomeni, da se bo njihova kakovost s povečevanjem

izgubila. Še ena bistvena razlika med njima je v načinu uporabe. Na platno SVG smo

lahko risali kar znotraj HTML, s canvasom pa brez JavaScripta ne moremo početi ničesar

[33]. Vseeno so koncepti prikazovanja elementov podobni.

Najprej je treba preko DOM pridobiti njegov HTML element in klicati metodo

getContext("2d"), s katero se omogoči risanje po platnu oziroma canvasu. Vse elemente,


30

ki jih narišemo, je na koncu treba potrditi, da postanejo vidni [33]. Podobno kot SVG

canvas za risanje črte uporablja »risalnik«, ki služi kot navidezno pisalo. Za načrtovanje

črte se uporabi kombinacija metod moveTo() in lineTo(), ki na platnu povezujeta točke.

Prva metoda navidezno pisalo postavi na določeno točko, medtem ko druga poveže

prejšnjo točko z naslednjo. Če bi želeli začeti risati nov element, ki ni povezan s prejšnjim,

uporabimo metodo beginPath(). Canvas prav tako omogoča risanje likov, kot je na primer

rect(), ki izriše pravokotnik določenih dimenzij na določenem mestu. Med drugim element

omogoča še vstavljanje slik in besedila, ki pa jih ni mogoče označiti, kot pri

SVG. Vsem tem elementom lahko pred njihovo potrditvijo dodamo različne sloge, kot sta

na primer polnilo ter obroba [33].

V zbirki smo ustvarili aplikacijo, ki uporabniku omogoča risanje po platnu in nanj postavlja

elemente, kot sta slika in besedilo. Za vsak element smo uporabniku omogočili, da jim

določi barvo in velikost preko vnosnih polij. Nizanje teh elementov na platno je mogoče,

saj smo pridobili koordinate miškinega kazalca in ob dogodkih za klik, spust ter premik

miške uporabili ustrezne metode za risanje.

3.5 Aplikacijski in podporni elementi

HTML5 je prinesel funkcionalnosti, do katerih so razvijalci prej lahko dostopali le z

uporabo strežniških oziroma skriptnih jezikov, kot je na primer PHP, in lokalno niso bile na

voljo. V to kategorijo spadajo podatkovne baze in hramba podatkov na uporabnikovi

strani.

V to kategorijo smo prav tako vstavili druge podporne elemente, ki jih do zdaj nismo uspeli

uporabiti znotraj naše zbirke.

Lokalna hramba

Ena izmed aplikacijskih funkcionalnosti je Local Storage, ki deluje na podoben način kot

piškotki v brskalniku. Shranjuje pare ključev in vrednosti, ki so dostopne v brskalniku. Za

razliko od piškotkov, ki imajo na razpolago veliko manj prostora za hranjenje, se podatki

Local Storage ne prenesejo na strežnik, razen če uporabnik to stori ročno [34]. Namen

njihove uporabe je hranjenje stanja trenutne seje. Za dostop do local storage uporabljamo

spremenljivki localStorage in sessionStorage, ki lahko hranita nize. Poglavitna razlika med


31

njima je, da se vsebina sessionStorage pobriše ob zaprtju brskalnika, medtem ko vsebina

v localStoragu ostane, dokler je uporabnik iz brskalnika ne pobriše [34].

V naši zbirki smo za primer uporabe ustvarili element , ki je viden uporabniku, saj

smo mu nastavili vrednost display:block. Prav tako smo na njem vključili lastnost

contenteditable, ki omogoča urejanje vsebine elementa na neposreden način brez

JavaScripta. Tako smo uporabniku omogočili urejanje CSS predloge tega dokumenta. Ob

smo postavili element , ki mu lahko uporabnik preko zgornjega CSS

spreminja obliko, za katero želimo, da bo ohranjena skozi vse naslednje seje. Za hrambo

vsebine elementa smo uporabili spremenljivko localStorage. Kot smo omenili na

začetku, se podatki shranjujejo v parih ključev in vrednosti. Tako lahko s proženjem

metode setItem() shranimo vsebino elementa in shranjeno vrednost pobrišemo z

metodo removeItem(), kadar to želimo.

Podatkovna baza IndexedDB

Še ena aplikacijska novost standarda HTML5, ki omogočajo lokalno hrambo, so

podatkovne baze. Lahko jih ustvarjamo kar znotraj brskalnika, prav tako pa za njihov

dostop ni več zahtevana uporaba skriptnih jezikov, kot sta na primer PHP ali AJAX. Sprva

sta se v specifikaciji hkrati uporabljala dva načina hranjenja podatkov v bazi. Prvi je bil

Web SQL Storage, ki je omogočal hranjenje in dostop do podatkov na podoben način, kot

smo navajeni z MySQL in PHP. Zaradi podobnosti je bil novembra 2010 opuščen [35].

Drugi je IndexedDB, ki je še vedno vključen v standard. Za razliko od SQL podatkov ne

shranjuje znotraj tabel in stolpcev, temveč uporablja Object Store oziroma hrambo

objektov [36]. Tako lahko podatke, ki pripadajo isti entiteti, hrani znotraj enega objekta.

Kot primer uporabe znotraj zbirke smo postavili preprosto bazo, ki omogoča shranjevanje

novih podatkov, njihovo prikazovanje ter brisanje. Ob gradnji baze smo spoznali načelo

delovanja in razlike v sintaksi med SQL bazami ter IndexedDB. IndexedDB za ustvarjanje

novih objektov, ki so namenjeni hrambi, imenovanih objectStore, uporablja načelo

nadgradnje. Če smo želeli spremeniti objectStore (kar je IndexedDB ekvivalent SQL

tabel), smo morali posodobiti različico baze. IndexedDB API nato primerja šifri različic. Če

ugotovi, da je v brskalniku uporabljena starejša različica, sproži dogodek

onupgradeneeded, ki omogoča vstavljanje novih objektov za hrambo podatkov. Če sta

navedena in uporabljena različica enaki, omogoči proženje poizvedb. Rezultati poizvedb

se prenašajo preko transakcij, ki vsebujejo način dostopa, in se povežejo na ustrezen

objectStore ter tam izvedejo zahtevano operacijo. Na sliki 3.13 smo prikazali osnovne

gradnike funkcionalne podatkovne baze, ki omogoča dodajanje oseb.


32

var db;

var dbOpen = indexedDB.open("myDB", 2); //odpiranje baze

dbOpen.onupgradeneeded = function(e){ //posodabljanje baze

var thisDB = e.target.result;

if(!thisDB.objectStoreNames.contains("people")) { //objectStore

thisDB.createObjectStore("people", {autoIncrement:true});

}

}

dbOpen.onsuccess = function(e){ //proženje poizvedb

db = e.target.result;

addButton.addEventListener('click', addPerson);

}

}

function addPerson(){

var transaction = db.transaction(["people"], "readwrite");

var store = transaction.objectStore("people");

var person = { //ustvarimo podatek - objekt

name:personName.value,

age:age.value,

created:""+new Date()

}

var request = store.add(person); //vnos objekta v bazo

}

Slika 3.13: Primer vstavljanja osebe v podatkovno bazo

Page visibility API

Med podpornimi funkcionalnostmi HTML5 lahko omenimo Page visibility API. Ta

prepozna, če je trenuten zavihek oziroma okno, na katerem se API izvaja, odprto ali je

skrito nekje v ozadju [37]. To funkcionalnost lahko izkoristimo, če želimo zagotoviti, da

uporabnik res opazuje našo stran. Ko je ne, lahko določene stvari izklopimo, kot na primer

predvajanje videa. To funkcionalnost preverjamo znotraj DOM z document.visibilityState,

ki vsebuje vrednosti visible ali hidden [37].

V zbirki smo delovanje tega API predstavili z dvema števcema. Prvi šteje sekunde, ko je

stran odprta in prikazana v našem brskalniku, drugi pa takrat, ko se nahaja nekje v

ozadju.

Drag and drop

Pri drag and drop (povleci in spusti) gre za premik enega elementa v drugega. S to

funkcionalnostjo je mogoče določen element označiti kot odložišče in njegovo novo

vsebino prejeti skozi dogodek tipa drop [38]. Med elemente, ki jih je mogoče povleči v

odložišče, lahko spadajo tudi drugi HTML elementi, besedilo in datoteke z namizja.

Uporabo drag and drop na primer dopušča vnosno polje tipa file, in tako uporabnikom

olajša vnos datotek. Opazili smo, da ta funkcionalnost ni pogosto uporabljena oziroma


33

zanjo uporabniki ne vedo, saj zanjo ne obstaja nikakršen indikator. Zato je na njo treba

uporabnika vedno posebej opozoriti.

Znotraj zbirke smo ustvarili primer, v katerem se nahajajo trije elementi, ki jih lahko

uporabnik povleče v ciljni element, ki čaka na dogodek drop. Ob proženju tega dogodka

smo najprej preprečili njegove prevzete nastavitve, ki jih morda uporablja naš brskalnik.

Brez tega koraka drag and drop ne deluje pravilno [38]. Nato smo v našo funkcijo dodali

ukaz dropBox.innerHTML = event.dataTransfer.getData('text/html'), ki bo vsebino

povlečenega elementa prikazal znotraj ciljnega elementa. V ciljni element lahko

potegnemo kateri koli element z naše HTML strani. Vlečenim elementom je prav tako

mogoče prirediti vrednost, ki jo nosijo, preko event.dataTransfer.setData(). V našem

primeru smo na tak način enemu izmed elementov priredili pozdravno sporočilo, ki se bo

pojavilo znotraj ciljnega elementa, če bo uporabnik element potegnil vanj. V nadaljevanju

smo ta primer še razširili z uporabo API File.

File API

Z uporabo File API je mogoče doseči interaktivnost med datotekami, ki so shranjene

lokalno na našem disku in brskalniku. API z vmesnikom FileReader omogoča branje

datotek ter jih lahko kot sekvence bajtov shrani [39]. File je včasih deloval v navezi s File

Writer API, vendar je bil aprila 2014 ukinjen, saj je predstavljal varnostno tveganje na

uporabnikovem računalniku [40].

Primer uporabe drag and drop smo nadgradili tako, da ciljni element omogoča spust

lokalnih datotek vase. Dogodek vsebuje datoteko, do katere smo dostopali preko

event.dataTransfer.files[0]. Na tem mestu smo morali preveriti njen tip in se nato odločiti,

kaj bomo z njo storili. Če gre za tekstovno datoteko, jo je mogoče prebrati in prikazati

njeno vsebino. Če gre za sliko, video ali zvočni posnetek, ga je treba pretvoriti v binarno

datoteko in ga spremeniti v obliko data:URL [39]. V takšni obliki je datoteko mogoče

vstaviti kot vir , ali elementa in jo prikazati oziroma predvajati, kot

smo prikazali na sliki 3.14.

var file = event.dataTransfer.files;

console.log(file);

var fr = new FileReader();

if (file[0].type.match('image.*')) {

fr.addEventListener('load', function(){

console.log(fr);

dropBox.innerHTML="";

sentData.value=file[0].type + ": " + file[0].name;

});

fr.readAsDataURL(file[0]);

Slika 3.14: Pretvorba lokalne fotografije v Data:URL


34

4 SKLEP

Standard HTML5 prinaša mnogo novosti in poenostavitev glede na prejšnje različice, ki so

za konkretno delo zahtevale uporabo zunanjih virov. Čeprav aplikacijski del standarda

prinaša rešitve, ki omogočajo uporabo prej ekskluzivno strežniških funkcionalnosti, s

HTML5 ne moremo izdelati pravih lokalnih aplikacij, saj bi te zaradi svoje odprtosti

predstavljale varnostno luknjo v sistemu. Prav tako ne pokriva vseh področij in ne

omogoča popolne neodvisnosti od strežniških jezikov, zato se za izdelovanje resnejših

aplikacij ne moremo zanašati le na HTML5. Žal še ni poenoten, zato je še vedno težko

ustvariti spletno stran, ki ima enako podporo v vseh brskalnikih. Potreba po uporabi

predpon za implementacijo določenih funkcionalnosti prav tako otežuje delo razvijalcem.

Vseeno z vsemi svojimi funkcionalnostmi omogoča postavitev kompleksnejših spletnih

strani na preprost način in vsebuje množico novosti, ki uporabnikom in razvijalcem

izboljšajo izkušnjo.

Med iskanjem obstoječih primerov za opis novih funkcionalnosti smo odkrili, da so zelo

razpršeni po spletu in predvsem namenjeni tistim razvijalcem, ki se že dalj časa ukvarjajo

z gradnjo spletnih strani ter aplikacij. Predvsem zahtevnejši primeri, ki razlagajo uporabo

nekaterih API, zahtevajo dobro poznavanje konceptov programiranja z JavaScriptom.

Prav tako so nekateri obstoječi primeri, zaradi pogostih posodobitev standarda, v zadnjih

letih izgubili svojo relevantnost, zato smo se morali za natančno obrazložitev situacije

večkrat obrniti na obsežen in manj pregleden slovar, objavljen na W3C.

Med spoznavanjem novosti in izdelavo primerov je bila velikokrat zelo uporabna metoda

console.log(), ki nam je skozi konzolo brskalnika na hiter način prikazala, kako določena

funkcionalnost deluje in kakšna je vsebina dogodkov, ki jo prožijo. Skozi izdelavo ogrodja

zbirke smo ugotovili, da je nekatere stvari lažje oziroma bolj intuitivno implementirati tako,

da kršijo določila standarda HTML5. Prav tako so nekateri opuščeni elementi še vedno

dobrodošli. Njihova implementacija je morda odsvetovana, vendar smo bili včasih zaradi

pomanjkanja enakovrednih alternativ primorani v njihovo uporabo.

V zbirko nismo vključili vseh novosti, zato jo bo v bodoče mogoče še razširiti. Med njimi so

funkcionalnosti za delo z napravami, ki nam pri izdelavi diplomskega dela niso bile na

razpolago. Prav tako predvidevamo, da bo treba zbirko po dokončnem formiranju in

uveljavitvi standarda HTML5 posodobiti.


35

V diplomskem delu smo ustvarili referenčno zbirko elementov standarda HTML5, ki bo

uporabnikom na preprost način omogočala vpogled v njegove možnosti. Menimo, da smo

primere prikazali in opisali na dovolj preprost način. Uporaba zbirke pa predstavlja tudi

dobro odskočno desko v svet razvoja spletnih strani.


36

LITERATURA IN VIRI

[1] T. Berners-Lee, „Information Management: A Proposal,“ 5 1990. [Elektronski].

Available: http://www.w3.org/History/1989/proposal.html.

[Poskus dostopa 20. 8. 2014].

[2] W3C, „W3C Confirms May 2011 for HTML5 Last Call, Targets 2014 for HTML5

Standard,“ 14. 2. 2014. [Elektronski]. Available: http://www.w3.org/2011/02/htmlwg-

pr.html. [Poskus dostopa 25. 8. 2014].

[3] w3schools.com, „JavaScript RegExp Reference,“ [Elektronski]. Available:

http://www.w3schools.com/jsref/jsref_obj_regexp.asp. [Poskus dostopa 15. 8. 2014].

[4] caniuse.com, 7. 2014. [Elektronski]. Available: http://caniuse.com/#feat=imports.


[5] MDN, „,“ [Elektronski]. Available: https://developer.mozilla.org/en-

US/docs/Web/HTML/Element/xmp. [Poskus dostopa 16. 8. 2014].

[6] J. Kyrnin, „CSS Vendor Prefixes,“ [Elektronski]. Available:

http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm.


[7] Wikipedia, „CamelCase,“ [Elektronski]. Available:

http://en.wikipedia.org/wiki/CamelCase. [Poskus dostopa 18. 8. 2014].

[8] M. Robinson, „Let’s Talk about Semantics,“ 18. 4. 2012. [Elektronski]. Available:

http://html5doctor.com/lets-talk-about-semantics/. [Poskus dostopa 3. 8. 2014].

[9] M. Pilgrim, „WHAT DOES IT ALL MEAN?,“ [Elektronski]. Available:

http://diveintohtml5.info/semantics.html. [Poskus dostopa 3. 8. 2014].

[10] R. Clark, „The figure & figcaption elements,“ 13. 4. 2010. [Elektronski]. Available:

http://html5doctor.com/the-figure-figcaption-elements/. [Poskus dostopa 3. 8. 2014].


37

[11] T. Leadbetter, „The details and summary elements,“ 9. 8. 2011. [Elektronski].

Available: http://html5doctor.com/the-details-and-summary-elements/.


[12] M. Robinson, „Draw attention with mark,“ 18. 8. 2009. [Elektronski]. Available:

http://html5doctor.com/draw-attention-with-mark/. [Poskus dostopa 18. 8. 2014].

[13] M. Pilgrim, „“Distributed,” “Extensibility,” And Other Fancy Words,“ [Elektronski].

Available: http://diveintohtml5.info/extensibility.html. [Poskus dostopa 3. 8. 2014].

[14] C. Bewick, „HTML5 Custom Data Attributes (data-*),“ 27. 5. 2010. [Elektronski].

Available: http://html5doctor.com/html5-custom-data-attributes/.


[15] R. Clark, „HTML5 forms input types,“ 28. 2. 2013. [Elektronski]. Available:

http://html5doctor.com/html5-forms-input-types/. [Poskus dostopa 3. 8. 2014].

[16] R. Clark, „The output element,“ 20. 12. 2011. [Elektronski]. Available:

http://html5doctor.com/the-output-element/. [Poskus dostopa 3. 8. 2014].

[17] R. Clark, „HTML5 forms introduction and new attributes,“ 26. 2. 2013. [Elektronski].

Available: http://html5doctor.com/html5-forms-introduction-and-new-attributes/.


[18] T. Leadbetter, „The video element,“ 18. 6. 2009. [Elektronski]. Available:

http://html5doctor.com/the-video-element/. [Poskus dostopa 3. 8. 2014].

[19] P. LePage, „HTML5 Video,“ 3. 8. 2010. [Elektronski]. Available:

http://www.html5rocks.com/en/tutorials/video/basics/. [Poskus dostopa 3. 8. 2014].

[20] w3schools.com, „HTML5 Audio,“ [Elektronski]. Available:

http://www.w3schools.com/html/html5_audio.asp. [Poskus dostopa 3. 8. 2014].

[21] G. Shires, „Voice Driven Web Apps: Introduction to the Web Speech API,“

14. 1. 2013. [Elektronski]. Available: http://updates.html5rocks.com/2013/01/Voice-

Driven-Web-Apps-Introduction-to-the-Web-Speech-API. [Poskus dostopa 4. 8. 2014].


38

[22] E. Bidelman, „Web apps that talk - Introduction to the Speech Synthesis API,“

14. 1. 2014. [Elektronski]. Available: http://updates.html5rocks.com/2014/01/Web-

apps-that-talk---Introduction-to-the-Speech-Synthesis-API. [Poskus dostopa 4. 8.

2014].

[23] P. Irish, „Quick guide to webfonts via @font-face,“ 2. 8. 2010. [Elektronski]. Available:

http://www.html5rocks.com/en/tutorials/webfonts/quick/.


[24] w3schools.com, „CSS3 Multiple Columns,“ [Elektronski]. Available:

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


[25] CSS3files, „transform,“ [Elektronski]. Available: http://www.css3files.com/transform/.


[26] A. Danilo, „Understanding CSS Filter Effects,“ 25. 5. 2012. [Elektronski]. Available:

http://www.html5rocks.com/en/tutorials/filters/understanding-css/.


[27] D. Catuhe, „Introduction to CSS3 Transitions,“ 27. 2. 2013. [Elektronski]. Available:

http://blogs.msdn.com/b/eternalcoding/archive/2011/11/01/css3-transitions.aspx.


[28] css-tricks.com, „Keyframe Animation Syntax,“ 18. 7. 2014. [Elektronski]. Available:

http://css-tricks.com/snippets/css/keyframe-animation-syntax/.


[29] G. Smith, „Dive into Flexbox,“ 21. 7. 2014. [Elektronski]. Available:

http://bocoup.com/weblog/dive-into-flexbox/. [Poskus dostopa 3. 8. 2014].

[30] MDN, „CSS media queries,“ [Elektronski]. Available: https://developer.mozilla.org/en-

US/docs/Web/Guide/CSS/Media_queries. [Poskus dostopa 3. 8. 2014].

[31] P. Collingridge, „SVG Tutorial,“ [Elektronski]. Available:

http://www.petercollingridge.co.uk/book/export/html/560.



39

[32] A. Danilo, „Splash V

timotej majcen - connecting repositories · 2017. 11. 28. · referenčna zbirka elementov...

Documents