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
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
6
interakcijo z uporabnikom. Posledično smo lahko posamezen primer uporabili ob opisu
več elementov, kar nam je olajšalo delo.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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].
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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,
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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].
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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].
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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,
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
Referenčna zbirka elementov standarda HTML5
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.
[Poskus dostopa 15. 8. 2014].
[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.
[Poskus dostopa 3. 8. 2014].
[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].
Referenčna zbirka elementov standarda HTML5
37
[11] T. Leadbetter, „The details and summary elements,“ 9. 8. 2011. [Elektronski].
Available: http://html5doctor.com/the-details-and-summary-elements/.
[Poskus dostopa 3. 8. 2014].
[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/.
[Poskus dostopa 3. 8. 2014].
[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/.
[Poskus dostopa 3. 8. 2014].
[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].
Referenčna zbirka elementov standarda HTML5
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/.
[Poskus dostopa 3. 8. 2014].
[24] w3schools.com, „CSS3 Multiple Columns,“ [Elektronski]. Available:
http://www.w3schools.com/css/css3_multiple_columns.asp.
[Poskus dostopa 3. 8. 2014].
[25] CSS3files, „transform,“ [Elektronski]. Available: http://www.css3files.com/transform/.
[Poskus dostopa 3. 8. 2014].
[26] A. Danilo, „Understanding CSS Filter Effects,“ 25. 5. 2012. [Elektronski]. Available:
http://www.html5rocks.com/en/tutorials/filters/understanding-css/.
[Poskus dostopa 3. 8. 2014].
[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.
[Poskus dostopa 3. 8. 2014].
[28] css-tricks.com, „Keyframe Animation Syntax,“ 18. 7. 2014. [Elektronski]. Available:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/.
[Poskus dostopa 3. 8. 2014].
[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.
[Poskus dostopa 18. 8. 2014].
Referenčna zbirka elementov standarda HTML5
39
[32] A. Danilo, „Splash V
Top Related