Prednosti uporabe HTML5 in CSS3 · 2017-11-27 · Prednosti uporabe HTML5 in CSS3 1 1 Uvod Nekaj,...
Transcript of Prednosti uporabe HTML5 in CSS3 · 2017-11-27 · Prednosti uporabe HTML5 in CSS3 1 1 Uvod Nekaj,...
Aleksandra Gornik
PREDNOSTI UPORABE HTML5 IN CSS3
Diplomsko delo
Maribor, september 2012
Prednosti uporabe HTML5 in CSS3
II
PREDNOSTI UPORABE HTML5 IN CSS3
Diplomsko delo
Študent(ka): Aleksandra Gornik
Študijski program: Univerzitetni študijski program
Medijske komunikacije
Smer: Medijska produkcija
Mentor(ica): Doc. dr. Marko Hölbl, univ.dipl. ing.
Somentor(ica): Asist. Jaka Polutnik, univ. dipl. medij. kom.
Lektor(ica): Petra Kneževič
Prednosti uporabe HTML5 in CSS3
III
Prednosti uporabe HTML5 in CSS3
IV
ZAHVALA
Zahvaljujem se predvsem mentorju in somentorju za vso pomoč, ki sta mi jo nudila pri
izdelavi diplomske naloge.
Prav tako se zahvaljujem svojim bližnjim za vso podporo v času študija.
Prednosti uporabe HTML5 in CSS3
V
Prednosti uporabe HTML5 in CSS3
Ključne besede: HTML5, CSS3, Javascript, Adobe Dreamweaver CS5
UDK: 004.43:004.724(043.2)
Povzetek
V diplomski nalogi smo obravnavali področje razvoja HTML5 in CSS3, osredotočili smo se
predvsem na prednosti, raziskali, kako se standarda obneseta v praksi ter kakšna je
podpora brskalnikov. Najprej smo definirali pomen HTML in CSS ter njuno zgodovino,
potem pa smo se osredotočili na novosti, ki sta jih prinesla standarda HTM5 in CSS3, jih
predstavili ter opisali. Naša ugotovitev je, da HTML5 in CSS3 omogočata hitrejšo, krajšo
in boljšo rešitev oblikovanja spletnih strani. Raziskali smo še možnosti podpore
brskalnikov, ki smo jih ponazorili s pomočjo tabel. V sklopu naloge smo tudi izdelali
spletno stran, ki prikazuje prednosti uporabe HTML5 in CSS3, uporabili smo izbrane
gradnike od enostavnejših do kompleksnejših. Ugotovili smo, da so novosti pomembne,
saj poenostavijo izdelavo spletnih strani. Posebej so pomembni gradniki, ki omogočajo
vključitve medijskih vsebin. Na težave smo naleteli zgolj pri slabi podpori, ki jo nudijo
brskalniki. Vedno več snovalcev spletnih strani uporablja HTML5 in CSS3, ki bosta zaradi
novosti, ki jih prinašata, postala nepogrešljiva. Brskalniki bodo sčasoma v celoti podpirali
oba standarda.
Prednosti uporabe HTML5 in CSS3
VI
Advantages of HTML5 and CSS3 usage
Key words:: HTML5, CSS3, Javascript, Adobe Dreamweaver CS5
UDK: 004.43:004.724(043.2)
Abstract
In the diploma work we addressed the field of the development of HTML5 and CSS3, we mainly focused on the strengths, explored how the standards work in practice and what the browsers support. First, we defined the meaning of HTML and CSS and their history, and then we focused on the innovations brought by standards HTML5 and CSS3, which we have presented and described. Our conclusion is that HTML5 and CSS3 allow faster, shorter and better solutions in web design. We explored the possibilities of support in browsers, which we illustrate by using tables. Within the task we also created a website that shows the advantages of using HTML5 and CSS3, we used the selected building blocks from simple to complex. We have found that the innovations are vital to simplify the creation of web pages. The building blocks that allow the inclusion of media content are especially important. The only problems we encountered are in low support provided by browsers. More and more creators of web pages using HTML5 and CSS3, which the innovations will be introduced by, will become indispensable. Browsers will
eventually fully support both standards.
Prednosti uporabe HTML5 in CSS3
VII
Kazalo
1 Uvod .............................................................................................................................. 1
2 HTML in CSS ................................................................................................................. 2
2.1 Označevalni jezik - HTML ........................................................................................... 2
2.1.1 Zgodovina HTML ..................................................................................................... 3
2.1.2 HTML5 .................................................................................................................... 4
2.2 Oblikovna plat spleta – jezik CSS.............................................................................. 10
2.2.1 Zgodovina CSS ...................................................................................................... 10
2.2.2 CSS 3 .................................................................................................................... 11
3 Podpora v brskalnikih ................................................................................................... 15
4 Praktični primer uporabe novih gradnikov .................................................................... 24
5 Zaključek ..................................................................................................................... 30
6 Viri: .............................................................................................................................. 31
Priloga A: ........................................................................................................................ 33
Priloga B: ........................................................................................................................ 36
Prednosti uporabe HTML5 in CSS3
VIII
Kazalo slik:
Slika 1 - uvodna stran ..................................................................................................... 24
Slika 2 - HTML5 .............................................................................................................. 25
Slika 3 - Canvas .............................................................................................................. 25
Slika 4 - Video ................................................................................................................. 26
Slika 5 - Avdio ................................................................................................................. 26
Slika 6 - CSS3 ................................................................................................................ 27
Slika 7 - Prosojnost ......................................................................................................... 27
Slika 8 - Stolpci ............................................................................................................... 27
Kazalo tabel:
Tabela 1 - CSS3 lastnosti [13]: ................................................................................................15
Tabela 2 - CSS3 lastnosti [13]: ................................................................................................16
Tabela 3 - CSS3 selektroji [13]: ...............................................................................................17
Tabela 4 - CSS3 selektroji [13]: ...............................................................................................18
Tabela 5 - HTML5 spletne aplikacije [13]: ...............................................................................19
Tabela 6 - HTML5 spletne aplikacije [13]: ...............................................................................20
Tabela 7 - HTML5 grafika in vgradna vsebina [13]: ........................................................................21
Tabela 8 - HTML5 grafika in vgradna vsebina [13]: ...............................................................21
Tabela 9 - test HTML5 [12] .......................................................................................................22
Tabela 10 - test CSS3 [12] .......................................................................................................23
Prednosti uporabe HTML5 in CSS3
IX
Uporabljene kratice:
HTML - Hypertext markup language (označevalni jezik hiperteksta)
CSS - Cascade styling sheet (nabor kaskadnih stiolov)
SGML - Standard Generalized Markup Language (standardni generalizirani označevalni
jezik)
XHTML -Extensible HyperText Markup Language (razširljiv označevalni jezik hiperteksta)
IETF - Internet Engineering Task Force (internetna inženirska projektna skupina)
RFC - Request for Comments (zahteva za komentarje)
HD - High-definition (visoka resolucija)
MP4 - Mpeg, version 4 (mpeg format verzija 4)
MOV - QuickTime Movie-file extension (pripona datoteke)
MKV- MatrosKa Video
MP3 - MPEG Audio Layer III
AAC - Advanced Audio Coding (napredno kodiranje avdia)
GPS - Global Positioning System (globalni sistem določanja položaja)
MIME - Multipurpose Internet Mail Extensions (večnamenske razširitve spletne pošte)
W3C - World Wide Web Consortium (konzorcij svetovnega spleta)
.ttf - TrueType (pravi tip)
.otf - OpenType (odprti tip)
EOT - Embedded OpenType (vgrajeni odprti tip)
.woff - Web Open Font Format (odprtokodni format fonta oziroma pisave)
SVG - Scalable Vector Graphics (prilagodljiva vektorska grafika)
Prednosti uporabe HTML5 in CSS3
1
1 Uvod
Nekaj, kar smo in bomo vedno potrebovali, so podatki, njihovo pridobivanje in objavljanje
pa ni bilo vedno tako enostavno. Danes se informacije pridobivajo v veliki večini preko
spletnih strani, saj je ta način hiter, ažuren, dostopen in učinkovit. Prav tako je tudi z
objavo informacij, pa naj gre za posameznika ali kakšno podjetje. Najlažje in najhitreje
delimo podatke z objavo na spletni strani in jih tako predstavimo širši javnosti.
Kadar želimo sami postaviti spletno stran s pomočjo HTML (Hypertext markup language
oziroma označevalni jezik hiperteksta) in CSSa (Cascade styling sheet oziroma nabor
kaskadnih stilov), ju je seveda treba dodobra spoznati, hkrati pa uporabiti tudi katero
izmed programskih orodij.
V diplomski nalogi smo obravnavali področje razvoja do zadnjih verzij HTML5 in CSS3,
predvsem smo se osredotočili na prednosti glede na predhodnike in novitete, raziskovali,
kako se obneseta v praksi ter kakšna je podpora brskalnikov.
Metode, ki smo jih uporabili so: študij elektronskih virov, snovanje spletne strani z uporabo
novih gradnikov in vrednotenje rezultatov glede na uporabnost, enostavnost in podporo
novosti v brskalnikih. Raziskali smo veliko člankov ter pregledali kar nekaj tutorialov (učnih
navodil), ki so opisovali in prikazovali izgradnje strani, nato pa izdelali spletno stran in se
nato lotili še vrednotenja gradnikov.
Naš cilj je bil, na izbranem primeru, raziskati in prikazati prednosti uporabe HTML5 in
CSS3 v primerjavi s starejšimi standardi ter analizirati možnosti podpore. Teza, ki smo jo
postavili je bila, da bosta nova standarda izboljšala delovanje in vizualno plat spletne
strani ter da bo z njima izdelovanje spletne strani hitrejše. Predvidevali smo tudi, da bodo
omejitve pri podpori brskalnikov.
V sklopu naloge smo izdelali tudi spletno stran, ki prikazuje in dokazuje prednosti HTML5
in CSS3 ter izpostavi problem podpore in možne rešitve. Uporabili smo programsko
orodje, ki je razširjeno in dovoljuje ter podpira vnos novih standardov. Našli smo tudi
veliko spletnih strani, ki so nam pomagale pri uporabi nove kode in prikazovale delovanje
novosti.
Vedno več snovalcev spletnih strani uporablja in bo uporabljalo HTML5 in CSS3, ki bosta
kmalu postala nepogrešljiva. Brskalniki bodo v celoti podpirali oba standarda.
Prednosti uporabe HTML5 in CSS3
2
2 HTML in CSS
Da se bomo lahko osredotočili na nova standarda HTML5 in CSS3 moramo najprej
spoznati osnove, ki pojasnijo, kaj HTML in CSS sploh sta in zgodovino, ki nam bo podala
kratek pregled razvoja. Pa pričnimo s HTML-jem.
2.1 Označevalni jezik - HTML
Poznavanje označevalnega jezika je osnova za gradnjo spletne strani. Kratice HTML
predstavljajo HyperText Markup Language, kar pomeni da gre za označevalni jezik, ki je
pravzaprav nabor oznak (tags), katerih namen je, da opišejo vsebino strani. Same oznake
predstavljajo razdelke vsebine spletne strani, na nek način torej smiselno ločujejo odseke,
ki so različnih vrst ali pa različnih tem. Na primer header (glava) oznaka pomeni, da je
vsebina, ki se nahaja znotraj te oznake, glava dokumenta oziroma spletne strani. HTML
se seveda vedno bolj razvija, da bi čim lažje gradili spletne strani.4
Od pojava svetovnega spleta v začetku 90. let 20. stoletja je HTML postal močan
označevalni jezik. Ko ga podpremo še z Javascriptom in CSSom, lahko ustvarimo
vizualno privlačne in interaktivne spletne strani ter aplikacije. HTML5 in CSS3 omogočata
hitrejšo, krajšo in boljšo rešitev oblikovanja spletnih strani.[3]
HTML je uradni jezik svetovnega spleta in produkt SGMLja (Standard Generalized
Markup Language ali standardni generalizirani označevalni jezik), kompleksne tehnične
specifikacije, ki opisuje označevalne jezike. Gre za označevalne jezike, ki jih uporabljamo
med izmenjavo, urejanjem in objavljanjem elektronskih dokumentov, za kar je bil HTML
tudi primarno ustvarjen. Še posebej je olajšal izmenjavo z vključitvijo možnosti, da poveže
dokumente elektronsko z uporabo hiperpovezav. Od tod tudi njegovo ime. HTML se je
lahko naučiti, je neodvisen in lahko vključi večje število drugih aplikacij. Z razvojem
svetovnega spleta se je razširil in se hitro vključil v mainstream svetovnega spleta.[5]
Prednosti uporabe HTML5 in CSS3
3
2.1.1 Zgodovina HTML
Kratek pregled prejšnjih različic:
HTML2.0 (RFC 1866) je razvila HTML delovna skupina IETF-a (Internet Engineering Task
Force oziroma internetna inženirska projektna skupina). Postavil je standarde za osnovne
funkcije HTML, ki temeljijo na obstoječi praksi v letu 1994. Upoštevati je potrebno, da je z
izdajo RFC (Request for Comments ali zahteva za komentarje) 2854, RFC 1866 zastaran
in je njegovo trenutno stanje zgodovinsko. Vseboval je torej zgolj osnovne funkcije, zato je
bilo potrebno razviti naslednjo nadgradnjo oziroma različico.. HTML3.2 (1996) je dodal
širok nabor funkcij, kot so tabele, aplikacije, text-flow oziroma lebdenje teksta okrog slik,
nadskript in podskript, hkrati pa je omogočal združljivost s HTML2.0, kar pomeni, da se je
sama funkcionalnost precej razširila. HTML4.0 je bil prvič izdan kot W3C priporočilo 18.
12. 1997, drugič je bil izdan 24. 4. 1998 z nekaterimi spremembami, ki so bile omejene na
uredniške popravke. Nekako je korakal proti temu, da dokumenti postanejo mednarodni in
s tem svetovni splet res postane globalen. HTML4.01 pa je podprl več multimedijskih
možnosti, skriptnih jezikov, stilov in omogočil boljše nastavitve tiskanja ter dostopnost
dokumentov za tiste z omejitvami. [6]
Od verzije HTML3.2. pa do HTML4.01 se je razvoj fokusiral na ločitev strukture in izgleda,
izboljšanje dostopnosti funkcij, izboljšavo osveževanja dokumentov in pa tudi izboljšavo
funkcij za internacionalizacijo dokumentov, kar je prineslo veliko več možnosti snovalcem
spletnih strani.[10]
Za verzijo HTML4.01 pa se je razvil HTML5, ki je najnovejša velika verzija HTML. Seveda
so prejšnje različice vplivale na najnovejšo verzijo in se je ravno zaradi njih razvila.
Odpravila je nekatere pomanjkljivosti in olajšala delo snovalcem spletnih strani.
Prednosti uporabe HTML5 in CSS3
4
2.1.2 HTML5
HTML5 predstavlja precej novih elementov, ki bodo poskrbeli, da bodo strani bolj
semantične, kar bo pripomoglo k lažji navigaciji in izboljšalo samo spletno izkušnjo za
uporabnika. Poleg tega HTML5 vključuje tudi modne funkcije za risanje grafike na
zaslonu, shranjevanje podatkov brez povezave, povleci in spusti ter druge zanimivosti.[2]
Gre torej za nov večji mejnik v razvoju HTML-ja, ki je fokusiran na spletne aplikacije.
Poskrbel je za to, da Javascript v večini primerov ni več nepogrešljiv in za krajši zapis
kode. Je torej predvsem preprost, ogromno stvari je poenostavil. [Kot primer lahko
izpostavimo
<!DOCTYPE HTML>,
ki se je v prejšnjih verzijah HTML-ja zapisal v precej daljši obliki
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4 /loose.dtd">.
Poenostavil je tudi nabor znakov, ki se sedaj zapišejo kot
<meta charset="utf-8">,
v prejšnjih verzijah pa
<meta http-equiv="content-type" content="text/html;charset=UTF-8">.
Prav tako je skrajšal označevanje. Kot primer lahko navedemo naslednji zapis,
<!DOCTYPE HTML>
< meta charset="utf-8">
<title>HTML5</title>
<h1>HTMLv5</h1>
ki je prej zavzel veliko več prostora z zapisom:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
</head>
<body>
<h1>HTMLv5</h1>
</html> [17]
Prednosti uporabe HTML5 in CSS3
5
Naslednja prednost je ta, da je univerzalen, saj nudi podporo za vse jezike. Prav tako je
dobrodošla novost tudi ta, da zagotavlja vgrajeno podporo, ki je bila prej mogoča samo z
vtičniki, s tem imamo v mislih predvsem gradnika video in avdio. Zakaj ta novost nudi
prednost? Ker je vgrajena podpora boljša kot vtičniki, saj lahko pride do zapletov pri
raznih inštalacijah le teh, kot primer lahko izpostavimo Flash. Kako pa je z varnostjo? Nudi
varnost, ki temelji na samem izvoru in definira varno deljenje dokumentov različnega
izvora, se pravi različnih domen. Vse težave so hitro popravljene. Pomembna prednost je
tudi ta, da funkcionalnosti novih oblik HTML5 ne potrebujejo več Javascripta, imajo že
izvorno izbirnike datuma in barv, validacijo odjemalca, funkcije pa so elegantno
razdeljene. Kaj še nudi HTML5? Podporo virtualne tipkovnice in izvorni pripomočki ter
opozorila se izpišejo v vseh jezikih. [17]
Pa si poglejmo opise nekaterih novih gradnikov.
<!doctype html>
Kot prvo novost, ki jo je prinesel, naj izpostavimo to, da se uporabi samo en doctype, ki je
naveden na začetku strani z <!doctype html> in preprosto pove brskalniku, da gre za
HTML dokument. Namesto divov, katerih naloga je bila, da omejijo različne sekcije strani,
pa se sedaj uporabljajo semantične oznake, ki bodo poenostavile prepoznavo elementov
za brskalnike. [2]
<nav>
Oznaka nav se uporablja za navigacijske povezave in je pravzaprav nabor primarnih
povezav na spletni strani in njen namen ni, da se jo uporabi za vse skupine povezav,
ampak samo za večje. Če torej oznaka <footer> že vsebuje navigacijske povezave, ni
potrebna še uporaba oznake nav. [3] Za navigacijo je izrednega pomena, da je jasna in
preprosta, saj je tako stran privlačnejša uporabniku in se na njej dejansko znajde.
Navigacija je označena točno tako, kot bi jo označili v HTML4 ali XHTML (Extensible
HyperText Markup Language (razširljiv označevalni jezik hiperteksta), se pravi z uporabo
neurejenega seznama. Ključnega pomena je, da je list uvrščen znotraj oznake nav.[2]
<section-tag>
Oznaka section-tag se uporablja za označevanje sekcij oziroma odsekov v dokumentu, se
pravi za kakšno poglavje, članek ali tutorial. Lahko vsebuje več vrst oznak in več sekcij je
Prednosti uporabe HTML5 in CSS3
6
lahko ugnezdenih ena v drugo, seveda smiselno ugnezdenih glede na pomembnost v
vsebini. Sekcije so zelo koristne, v kolikor stran zajema vsebino, ki zajema neko širšo
temo, ki jo tako s sekcijami lažje razmejimo in pomensko smiselno ločimo odseke.[2]
<aside>
Oznaka aside je lahko uporabljena za označitev stranskega menija ali druge vsebine, ki je
ločena od vsebine, ki jo obdaja. Dober primer so morda oglasni bloki, saj le ti niso del
vsebine se pa navezujejo nanjo, tako morajo biti na jasen način ločeni od preostale
vsebine strani. [3] Gre torej za označevanje vsebine, ki pa ni osrednja, je pa vseeno del
spletne strani, ki mora biti ločen od ostalega.
<article>
Oznaka <article> se uporablja za opredelitev neodvisnega elementa na strani, ki ga je
mogoče razdeliti na lastno pobudo, kot so reportaža, blog ali komentarji.[3] Torej prinaša
večje razdeljevanje vsebine na spletni strani.
<hgroup>
Oznaka <hgroup> je dobrodošla kadar določena stran potrebuje več naslovov, saj jih
uvrsti v skupino naslovov, v kateri ima vsak naslov svojo funkcijo (na primer glavni naslov
in podnaslov). [3] Tako naslove preprosto porazdelimo v skupine, ki jim določimo lastnosti
glede na prioriteto.
<canvas>
Oznaka <canvas> je bila razvita s strani Appla za uporabo v Mac OS X Dashboard
widgets in v Safariju, vendar je bila kasneje “posvojena” s strani Mozille in Opere za
uporabo v njunih brskalnikih. V HTML5 specifikacijo je bila vključena skupaj s serijo 2D
risanja in ostalimi aplikacijami, ki se lahko uporabijo za ustvarjanje oblik, teksta, tranzicij in
animacij znotraj elementa. Mnogi verjamejo, da je element <canvas> eden izmed
najpomembnejših aspektov HTML5, saj omogoča izdelavo grafov, interaktivnih iger,
aplikacij in ostalega brez potrebe po zunanjih vtičnikih kot je Adobe Flash. Je tudi precej
osnoven, saj definira širino, višino in unikaten ID za objekt. Razvijalec mora potem
uporabiti veliko JavaScripta, da lahko nariše objekt. Programski vmesniki omogočajo
risanje oblik in linij, aplikacijo barve, prosojnosti in prehajanja barve, ustvarjanje teksta,
Prednosti uporabe HTML5 in CSS3
7
spremembe canvas objektov in izvedbo animacij. Dovoljujejo pa tudi interaktivnost in
odgovarjanje na klike miške in na pritisk tipke, pospeševanje izdelave iger ter spletnih
aplikacij na canvasu.[3]
<audio> in <video>
V zadnjih letih je popularnost objavljanja video posnetkov na straneh, kot je YouTube
porasla. Splet ni bil zgrajen z mislijo na objavljanje takšnih vsebin in zato je bil kot
posledica tega video podprt samo s strani Flash Video (.flv) formata in platforme Adobe
Flash. HTML5 pa vključuje podporo za dva nova elementa, in sicer <audio> ter
<video>, kar dovoljuje razvijalcem, da vključujejo multimedijske vsebine brez, da bi se
morali zanašati na dodatno nameščene priključke za brskalnike. Več brskalnikov, kot na
primer Mozilla Firefox, Apple Safari in Google Chrome, je pričelo podpirati nove elemente
in nuditi standardne brskalniške kontrole predvajanja. Omogočen je tudi nabor
standardnih JavaScript programskih vmesnikov, ki dovoljuje razvijalcem, da ustvarijo
svoje predvajalne kontrole. Ključna težava pri teh novih multimedijskih elementih pa je v
kodiranju formatov datotek, saj ima vsak brskalnik podporo za določene formate in tudi
različne kodeke. Pojavlja se še težava licenciranja. Mozzila in Opera uporabljata
odprtokodni Theodora video kodek, ki ne zahteva licenciranja za vključitev kodekov v
spletni brskalnik. Po drugi strani pa Apple in Google nista zadovoljna s kakovostjo Theore,
še posebej, kar se tiče zagotavljanja visoke ločljivosti (HD). Prednjačita kodek H.264, ki
ga običajno vsebujejo MP4 (Mpeg, version 4 ali mpeg format verzija 4), MOV (QuickTime
Movie (file extension) oziroma pripona datoteke) ali MKV (MatrosKa Video) datoteke.
Težave so prisotne tudi pri avdio kodekih. MP3 (MPEG Audio Layer III) in AAC (Advanced
Audio Coding ali napredno kodiranje avdia) formata sta omejena s patenti, medtem ko
Vorbis format ni, vendar le-ta ni tako splošno razširjen, saj ga prenosni predvajalniki in
veliko medijskih programskih aplikacij ne podpirajo. Začasna rešitev leži v tem, da
vključimo čim več različnih formatov.[3]
<figure>
Predstavlja enoto vsebine, ki lahko vsebuje napis in je samostojna. Lahko je odvzeta
strani in s tem ne bo vplivala na bistvo samega dokumenta. Običajno se uporablja za
prikaz ilustracij, slik, diagramov in podobnega.[14]
Prednosti uporabe HTML5 in CSS3
8
Drag and drop ali povleci in spusti
Gre za zelo pogosto uporabljeno funkcijo, ki pa je preprosta, saj gre dobesedno za to, da
se na nek način povleče nek objekt in se ga odloži na drugo lokacijo. V HTML5 gre za del
standarda.[15] Do zdaj je bilo izvajanje povleci in spusti brez vtičnikov odvisno od zelo
zapletenega JavaScript-a ali uporabe knjižnice JavaScript, kot je script.aculo.us.[3]
Web worker ali spletni delavec
Web worker oziroma spletni delavec omogoča JavaScript kodi, da teče v ozadju procesa,
kar olajša razvoj več-nivojskim aplikacijam. Poglavitna prednost, ki jo ponuja razvijalcem
pa je, da se lahko intenzivni izračuni obdelujejo v ozadju, ne da bi negativno vplivali na
hitrost uporabniškega vmesnika.[3]
Geolocation ali geolokacija
HTML5 vključuje Geolocation programski vmesnik, ki omogoča spletni aplikaciji določitev
trenutne geografske lege, ob predpostavki, da naprava ponuja funkcije za iskanje teh
informacij (na primer GPS (Global Positioning System ali globalni sistem določanja
položaja) na mobilnem telefonu. Če nimate naprave, ki podpira to funkcijo (kot je iPhone
ali Android pametni telefon na osnovi 2,0-), lahko uporabite Firefox in prenesete vtičnik, ki
vam omogoča, da svojo lokacijo nastavite ročno. [3]
Cross-document messaging ali med-dokumentno sporočanje
Cross-document messaging dovoljuje, da si dokumenti v različnih oknih (in okvirjih)
pošiljajo sporočila med seboj. Ta funkcija se lahko izkaže za zelo koristno za razvoj
gradnikov in aplikacij, ki gostujejo na strežnikih, ki niso primarni strežnik spletne strani
(podobne Facebook aplikacijam).[3]
Druge nove funkcije, ki jih uvaja HTML5 vključujejo tipe MIME (Multipurpose Internet Mail
Extensions ali večnamenske razširitve spletne pošte) in registracijo upravitelja protokola
tako, da so lahko spletne aplikacije registrirane kot privzete aplikacije za določeno vrsto
datoteke ali protokola; zgodovina upravljanja brskalnika, ki jo je do sedaj bilo treba ročno
izvesti ali pa z uporabo zunanjega JavaScript okvirja ter vrsto drugih novih elementov in
atributov, ki omogočajo lažje življenje spletnim razvijalcem.[3]
Prednosti uporabe HTML5 in CSS3
9
Raziskali in opisali smo izbrane gradnike, vse od tistih enostavnejših do kompleksnejših,
ki prinašajo pomembne prednosti pri izgradnji spletnih strani. Prednosti so prinesli
predvsem zaradi lastnosti, ki jih ponujajo.
Prednosti uporabe HTML5 in CSS3
10
2.2 Oblikovna plat spleta – jezik CSS
CSS je kratica, ki predstavlja Cascading Style Sheets, kar lahko prevedemo kot nabor
kaskadnih stilov. Kakor nakazuje samo ime, je bil CSS narejen z namenom, da pomaga
pri definiranju oblike predstavitve kateregakoli dokumenta, ki je bil napisan v
označevalnem jeziku. Večinoma ga uporabljamo za predstavitev HTML in XHTML
dokumentov. Daje torej vizualno podobo spletnim stranem, ki so napisane v
označevalnem jeziku.[7]
2.2.1 Zgodovina CSS
Nabor kaskadnih stilov se uporablja že vse od razvoja SGML, torej od leta 1975. Kasnejše
verzije CSS-a so bile narejene z namenom, da se vsebina dokumenta in predstavitev
dokumenta strogo ločita. Z razvojem HTML-ja je hkrati tudi CSS pridobival na sami
popularnosti.[7]
Šele v srednjih 90. letih je bil CSS predstavljen W3C-ju (World Wide Web Consortium
oziroma konzorcij svetovnega spleta) in ravno takrat so se člani W3C-ja pričeli vpletati tudi
v njegov razvoj. V poznih 90. se je CSS že realiziral in decembra 1996 je sintaksa postala
uradna. Ob predstavitvi različnih verzij CSS-a, kot so CSS1, CSS2 in CSS3, je bila težava
v samih lastnostih, ki jih brskalniki preprosto niso podpirali. Ustvariti standard za
kompatibilnost CSS-a in brskalnikov je bila tako obveza za uspešno sintakso in stilno
orodje. Z uporabo različic iz vseh oblik CSS-a, je leta 2007 nastal CSS2.1.[8]
Danes je najpomembneje doseči doslednost pri prikazu v vseh internetnih brskalnikih, kar
je tudi razlog za konstantne raziskave in testiranja ob pojavu novih verzij CSS-a. CSS3 je
trenutno še vedno v izgradnji, vključuje pa tudi elemente prejšnjih verzij.[8]
Prednosti uporabe HTML5 in CSS3
11
2.2.2 CSS3
CSS3 temelji na principih stilov, selektorjev in kaskad, ki jih poznamo že pri prejšnjih
različicah. Dodaja na kupe novih funkcij, vključno z novimi selektorji in psevdo razredi ter
lastnostmi.[2] CSS3 znatno spremeni videz spletne strani in je narejen za lažjo uporabo v
brskalnikih. [17]
Predstavlja mnogo novih lastnosti, psevdo razredov in drugih novih konceptov.
Ena izmed zelo dobrodošlih lastnosti je ta, ki omogoča iskanje elementov tudi, če
poznamo samo del vrednosti, kar pomeni, da se sama možnost precej razširi. Izrazi, ki jih
lahko vključimo za iskanje so ^= (išči na začetku), $= (išči na koncu) ali *=
(išči kjerkoli v vrednosti atributa).[1]
Background-size
Naslednja izmed novosti je background-size, ki omogoča prilagoditev velikosti ozadja
(slike). Tega ni bilo mogoče narediti z CSS 2.1 brez semantične oznake in težav z
brskalniki. Zanimiva je gotovo lastnost border-radius oziroma meja radija, ki aplicira
zaobljene robove določenemu elementu. Lahko se določijo različne vrednosti za vsak
vogal posebej ali pa preprosto zaoblite zgolj izbran vogal.[2]
Border-image
Kompleksnejša je border-image: url(border.png) 27 27 27 27 round round, ki je
pravzaprav slika roba. Parameter url določa sliko, ki jo bomo uporabili za rob, števila pa
določajo točke (top, right, bottom, left) robov. Zadnja parametra pa sta uporabljena, da
kopirata sliko in jo hkrati prilagodita glede na robove, ki smo jih določili. Mejo roba oziroma
njeno debelino določimo kar s parametrom border. Border-image omogoča tudi, da za
vsak kot posebej izberemo sliko (npr. z border-top-image), zanimiva pa je prav tako
možnost uporabe border-corner-image, ki pravzaprav omogoči, da se slike v kotih
razlikujejo od slik preostalega roba.[1]
Prednosti uporabe HTML5 in CSS3
12
Opacity
Najbrž je najbolj popularna novost opacity oziroma prosojnost, ki ji lahko določimo stopnjo
prosojnosti (1 - neprosojno, 0 - popolnoma prosojno) in barvo (z #0000FF ali na način rgb
(0,0,255).[1]
Stolpci
Z elementi lahko manipuliramo tudi tako, da niso vidni v tabelah in oznakah. Prej je bilo
nemogoče ločiti več stolpcev teksta brez, da bi le tega razdelili ročno, s CSS3 je sedaj to
lažje, saj je potrebno zgolj dodati div, ki ovije odlomke besedila. Seveda sta lastnosti
column-count in column-gap podprta le s strani Safarija in Firefoxa. Trenutno je potrebno
uporabljati še vendor-specific oziroma upravljavsko specifične lastnosti.[2]
Box-sizing in box-orient
Ker so se pri preteklih različicah CSSa pojavljale težave pri sami definiciji postavitve
spletne strani, je CSS3 prinesel lastnosti kot sta na primer box-sizing in box-orient, ki
nekako izpodbijeta uporabo floata oziroma lebdenja. Pri postavitvi strani koristijo tudi
novosti kot so column-count (štetje stolpcev) oz. column-width (širina stolpca) za
definiranje stolpcev besedil, column-gap za definiranje praznega prostora med stolpci in
column-rule za definiranje črt med stolpci.[1]
Box-shadow
V CSS3 lahko določimo lastnosti box-shadow v obliki pikslov. Prvi "px" pove brskalniku,
kjer želimo, da se senca horizontalno ustavi, druga vrednost pikslov pove, kje želimo
senco navpično ustaviti, zadnji piksli pa kako mora biti zabrisana meja. Če jo nastavimo
na 0, bo to povsem trdna. Nazadnje določimo še barvo sence. Ta barva je seveda
zbledela, odvisno od tega, koliko je senca zabrisana. Verjetno ni presenetljivo, da se ta
lastnost še ne izvaja v vseh brskalnikih. Pravzaprav deluje samo v brskalniku Safari z
uporabo upravljavsko specifičnih lastnosti.[2]
Prednosti uporabe HTML5 in CSS3
13
Zebra-striping
Zebra-striping oziroma poudarjanje vsakega drugega elementa v seriji, je že tradicionalno
vključilo izbiranje elementov preko javascripta, nato pa s pomočjo zanke poudarjanje
vsakega lihega elementa. CSS 3 uvaja psevdo razred “nth-child” oziroma "n otroka",
kar poenostavlja uporabo poudarjanja brez uporabe javascripta. Vrednost »2n+1« je
pravzaprav zelo preprosta, če razumemo da 2n izbere vsak drugi element. Če bi napisali
3n, bi torej izbral vsakega tretjega, in tako naprej. +1 pa pove brskalniku, da naj prične pri
elementu 1. Niz se torej prične z 0.[5] Namesto formul lahko uporabimo tudi ključne
besede even (soda) ali odd (liha).[1]
Animacije
Z CSS3 ustvarimo animacije, ki bodo nadomestile Flash animacije, animirane podobe in
JavaScript. Potrebno je poznati pravilo @keyframes , ki pravzaprav poskrbi, da se animira
element znotraj tega pravila ter tako spremeni sam stil.[16]
Novost, ki je ne gre zanemariti je gotovo ta, ki vpliva na medijske izpise glede na medijske
tipe. Dodatni atributi in logični operatorji pri filtrih omogočajo dodelitev predloga glede na
tip medija, kot na print screen za spletne strani, print za izpis na tiskalniku, handheld za
mobilne naprave in all za vse izhodne naprave. Možno je tudi definirati stilno predlogo za
barvne tiskalnike s pomočjo kode
<link rel="stylesheet" media="print and (color)" "href="..."/>.[1]
Pisave
CSS3 je prinesel tudi svežino na področju pisave, saj omogoča možnost nalaganja pisave
s spleta. Večina brskalnikov to opcijo podpira, vendar samo določene tipe. Na primer
Firefox, Opera, Safari in Chrome podpirajo pisave tipa .ttf (TrueType ali pravi tip) in .otf
(OpenType ali odprti tip). Po drugi strani pa Microsoftov Internet Explorer podpira format
EOT (Embedded OpenType ali vgrajeni odprti tip). Izbrano pisavo definiramo s kodo:
@font-face { font-family: 'MojaPisava'; src: url('MojaPisava.eot'); src:
local('MojaPisava Web Regular'), url('MojaPisava.otf'),
format('opentype'); } ,
Prednosti uporabe HTML5 in CSS3
14
ki je povzeta po Paulu Irishu in omogoča vključitev za vse brskalnike. Font-family nam
omogoča definicijo imena pisave, eot datoteka je specificirana za Explorer, local pa mu
prepreči dostop do drugega dela, ki je namenjen ostalim brskalnikom. Mozilla se je zaradi
zmešnjave formatov odločila definirati kar svoj format .woff (Web Open Font Format
(odprtokodni format fonta oziroma pisave), ki omogoča nadzor nad avtorskimi pravicami.
Prav tako je tukaj ponovno senčenje z lastnostjo text-shadow, s katero torej ustvarimo
senco, ki ji določimo barvo in odmike, omogočena pa je tudi določitev dolžine
zabrisanosti. Primer:
h3 {color: transparent; text-shadow: black 0 0 2px;}.
Te lastnosti ne prepozna brskalnik Internet Explorer.[1]
Prednosti uporabe HTML5 in CSS3
15
3 Podpora v brskalnikih
Pa si poglejmo tabele, ki smo jih zasledili na strani http://findmebyip.com/litmus/. V
tabelah sta ločena operacijska sistema Mac in Windows, brskalniki pa so Safari, Firefox,
Opera Chrome in Internet Explorer. Tabele opisujejo podporo CSS3 lastnosti, CSS3
selektrojev, HTML5 spletnih aplikacij in HTML5 grafike in vgradne vsebine. Obdržali smo
zgolj rezultate, ki so se nam zdeli najpomembnejši.
V Tabela 1 si lahko ogledamo podprtost CSS3 lastnosti brskalnikov Safari, Firefox, Opera
in Chrome. Najmanj podpore je s strani brskalnika Opera. Operacijski sistem je Mac.
V Tabela 2 gre za podporo istih lastnosti, vendar v operacijskem sistemu Windows,
vključene pa so tudi 4 verzije brskalnika Internet Explorer, ki je ravno tisti, ki nudi najmanj
podpore.
Tabela 1 - CSS3 lastnosti [13]:
Operacijski sistem MAC
Brskalnik SAFARI FIREFOX OPERA CHROME
Različica 5.1 11 11.62 18
Background Size
Multiple Backgrounds
Border Image
Border Radius
Box Shadow
Text Shadow
Opacity
CSS Animations X
CSS Columns
CSS Gradients
CSS Transforms
CSS Transitions
Display: table
Overflow Scrolling X X X X
Media Queries
Prednosti uporabe HTML5 in CSS3
16
Tabela 2 - CSS3 lastnosti [13]:
Operacijski sistem WIN
Brskalnik SAFARI IE FIREFOX OPERA CHROME
Različica 5.1 6 7 8 9 11 11,61 18
Background Size X X X
Multiple
Backgrounds
X X X
Border Image X X X X
Border Radius X X X
Box Shadow X X X
Text Shadow X X X X
Opacity X X X
CSS Animations X X X X X
CSS Columns X X X X
CSS Gradients X X X X
CSS Transforms X X X
CSS Transitions X X X X
Display: table X X
Overflow Scrolling X X X X X X X X
Media Queries X X X
V Tabela 3 vidimo podprtost CSS3 selektorjev, ki je odlična. V Tabela 4 pa vidimo, da
ponovno nudi najmanj podpore brskalnik Internet Explorer, vendar je podpora z vsako
verzijo boljša.
Prednosti uporabe HTML5 in CSS3
17
Tabela 3 - CSS3 selektroji [13]:
Operacijski
sistem
MAC
Brskalnik SAFARI FIREFOX OPERA CHROME
Različica 5.1 11 11.62 18
nth-child
nth-last-child
nth-of-type
nth-last-of-type
last-child
first-of-type
last-of-type
only-child
only-of-type
empty
target
enabled
disabled
checked
not
General Sibling
Prednosti uporabe HTML5 in CSS3
18
Tabela 4 - CSS3 selektorji [13]:
Operacijski sistem WIN
Brskalnik SAFARI IE FIREFOX OPERA CHROME
Različica 5.1 6 7 8 9 11 11,61 18
nth-child X X X
nth-last-child X X X
nth-of-type X X X
nth-last-of-type X X X
last-child X X X
first-of-type X X X
last-of-type X X X
only-child X X X
only-of-type X X X
empty X X X
target X X X
enabled X X X
disabled X X X
checked X X X
not X X X
General Sibling X
Ugotovili smo, da najmanj podpore CSS3 nudijo verzije brskalnika Internet Explorer,
Safari in Chrome pa je nudita največ.
Prednosti uporabe HTML5 in CSS3
19
Tabela 5 prikazuje podporo HTML5 spletnih aplikacij. Vidimo, da najmanj podpore nudi
Safari, največ pa Chrome.
Tabela 5 - HTML5 spletne aplikacije [13]:
Operacijski sistem MAC
Brskalnik SAFARI FIREFOX OPERA CHROME
Različica 5.1 11 11.62 18
Local Storage
Session Storage
Post Message
Offline Applications
Workers
Query Selector
WebSQL Database X
Drag and Drop X
GeoLocation
Touch X X X X
File API X
Prednosti uporabe HTML5 in CSS3
20
V Tabela 6 ponovno pridemo do ugotovitve, da najmanj podpore nudi Internet Explorer,
največ pa ponovno Chrome.
Tabela 6 - HTML5 spletne aplikacije [13]:
Operacijski
sistem
WIN
Brskalnik SAFARI IE FIREFOX OPERA CHROME
Različica 5.1 6 7 8 9 11 11,61 18
Local Storage X X
Session Storage X X
Post Message X X
Offline
Applications
X X X X
Workers X X X X
Query Selector X X
WebSQL
Database
X X X X X
Drag and Drop X
GeoLocation X X X
Touch X X X X X X X X
File API X X X X X
Prednosti uporabe HTML5 in CSS3
21
V Tabela 7 gre za prikaz podpore HTML5 grafike in vgradne vsebine.
Tabela 7 - HTML5 grafika in vgradna vsebina [13]:
Operacijski
sistem
MAC
Brskalnik SAFARI FIREFOX OPERA CHROME
Različica 5.1 11 11.62 18
Canvas
Canvas Text
SVG
Audio
Video
V Tabela 8 znova najmanj podpore s strani Internet Explorerja, vendar zadnja verzija
podpira vse gradnike.
Tabela 8 - HTML5 grafika in vgradna vsebina [13]:
Operacijski
sistem
WIN
Brskalnik SAFARI IE FIREFOX OPERA CHROME
Različica 5.1 6 7 8 9 11 11,61 18
Canvas X X X
Canvas
Text
X X X
SVG X X X
Audio X X X
Video X X X
Po pregledu vseh tabel ugotovimo, da je HTML5 ponovno najmanj podprt s strani Internet
Explorerja, najbolj pa s strani brskalnika Chrome.
Brskalniki torej morajo še delati na podpori, saj je le-ta še vedno dokaj omejena. Delo bo
potem lažje, prav tako se ne bo potrebno ukvarjati z raziskovanjem drugih možnosti in
Prednosti uporabe HTML5 in CSS3
22
različnim prikazom in delovanjem glede na brskalnik. Rešitev je torej v implementiranju
gradnikov.
S HTML5 testom (na dan 2. 9. 2012) smo preverili, kako se obnaša izbran brskalnik
Mozzila Firefox, ki nam je naprej povedal, kaj uporabljamo »You are using Firefox 15.0 on
Windows 7« in nakazal podprtost s točkovanjem podpore, ki pravi, da brskalnik doseže
331 in 9 bonus točk od možnih 500 točk. Nato pa sledi pregled, kaj je podprto in kaj ne. Za
lažji pregled si oglejmo Tabelo 9 - test HTML5 podprtosti izbranih gradnikov [11] :
Tabela 9 - test HTML5 [12]
Operacijski sistem WIN
Brskalnik FIREFOX
15.0
<!DOCTYPE html> triggers
standards mode
SVG in text/html
canvas element
(canvas) 2D context
(canvas) Text
video element
(video) Subtitle support X
(video) Poster image support
(video) MPEG-4 support X
(video) H.264 support X
(video) Ogg Theora support
(video) WebM support
[11]
Nadaljevali smo s CSS3 testom, ki nam je povedal, da naš brskalnik podpira 54%, sledil
pa je specifičen pregled podpore. Ta test je zastavljen drugače, saj ob strani že prikazuje
podporo glede na določene segmente. Tako izvemo, da so odlično podprti selektorji,
tranzicije in barve, nekoliko manj medijske poizvedbe, animacije, transformacije, slabo so
podprta ozadja in meje, zelo slabo pa sta podprta osnovni uporabniški vmesnik in več-
stolpna postavitev. Ne podpira pa govora in prilagodljive postavitve škatle. [12]
Prednosti uporabe HTML5 in CSS3
23
Pa si poglejmo Tabela 10 podprtosti nekaterih gradnikov:
Tabela 10 - test CSS3 [12]
Operacijski sistem WIN
Brskalnik FIREFOX
15.0
box-shadow
border-radius
:nth-child
:nth-last-child
animation
text-transform X
text-shadow
opacity
columns
Da je vsaka CSS3 lastnost prepoznana s strani brskalnikov, je potrebno uporabiti različne
predpone: webkit je predpona za brskalnika Safari in Chrome, moz je predpona za
Firefox, o pa za Opero.[2]
Prednosti uporabe HTML5 in CSS3
24
4 Praktični primer uporabe novih gradnikov
Za izdelavo strani je bil uporabljen program Adobe Dreamweaver CS5, ki je programsko
orodje, narejeno z namenom izdelave, oblikovanja ter vzdrževanja strani. Z njim je
enostavno izdelati spletno stran bodisi v oblikovalskem ali kodnem načinu, saj omogoča
spremljanje obojega. Ker je tako enostaven, je postal zelo priljubljen, avtorjem, ki niso
strokovnjaki, pa gotovo koristijo opcije, ki jih v kodi kar sam ponuja.[9]
V sklopu diplomske naloge je torej nastala spletna stran, ki prikazuje prednosti uporabe
standardov HTML5 in CSS3. Uporabljenih je bilo mnogo opisanih novosti, ki so bile hkrati
preizkušene, tako njihovi atributi kot tudi delovanje in podpora v brskalnikih.
Slika 1-uvodna stran
Spletna stran je smiselno vsebinsko razdeljena na uvodno stran (Slika 1), HTML5, CSS3
in podporo brskalnikov. HTML5 (Slika 2) in CSS3 se seveda delita še na več podstrani, ki
predstavljajo uporabljene gradnike, nekaj gradnikov pa je bilo uporabljenih na vsaki izmed
strani in podstrani. HTML5 vsebuje povezave na prikaze kompleksnejših gradnikov, kot so
canvas (Slika 2), video (Slika 3), avdio (Slika 4 ), figure, drag and drop, geolocation in
geolocation-map .
Prednosti uporabe HTML5 in CSS3
25
Slika 2-HTML5
Slika 3-Canvas
Za canvas smo uporabili Koda 1:
<canvas id="myCanvas" width="300" height="200" style="border:1px solid
#333;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Koda 1-canvas
Prednosti uporabe HTML5 in CSS3
26
Slika 4-Video
Koda 2, ki smo jo uporabili za gradnik video:
<video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
<div class="no-html5-video">
</div>
</video>
Koda 2-video
Slika 5-Avdio
Koda 3 za avdio:
<audio src="roll.mp3" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
Koda 3-avdio
CSS3 (Slika 6) vsebuje povezave na prosojnost (Slika 7), uporabo senčenja in škatle
stolpcev (Slika 8) in animacijo. Preostali enostavnejši gradniki so vključeni že v izgradnjo
strani. Kode, ki smo jih uporabili se nahajajo v Prilogi A in B.
Prednosti uporabe HTML5 in CSS3
27
Slika 6-CSS3
Slika 7-Prosojnost
Koda 4 za prosojnost:
#opacity { opacity: 0.8; filter: Alpha(opacity=30); } #opacity2 { opacity: 0.5; filter: Alpha(opacity=30); } Koda 4-prosojnost
Slika 8-Stolpci
Prednosti uporabe HTML5 in CSS3
28
Koda 5 za stolpce:
newspaper
{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
Koda za animacijo:
#animation
{
width:200px;
height:200px;
margin: 10px 0 0 20px;
background:blue;
-moz-border-radius: 40px; -webkit-border-radius: 40px;
animation:myfirst 10s;
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:blue;}
to {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:blue;}
to {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:blue;}
to {background:green;}
}
Koda 5-stolpci
Med izdelavo smo ugotovili, da so gradniki uporabni in jih je mogoče hitro implementirati v
spletno stran. S CSS3 smo lahko oblikovali vizualno podobo, ne da bi morali fotografije ali
predlogo oblikovati predhodno s katerim izmed programov za oblikovanje. Lažje smo
vključili tudi video in avdio datoteke. Težav s samo kodo nismo imeli, le v brskalnikih so se
obnašale različno, seveda odvisno od podpore.
Prednosti so predvsem v lažjem in hitrejšem oblikovanju vizualne plati s pomočjo CSS3
gradnikov, saj smo lastnosti preprosto uravnavali v datoteki stilov. Ni bila potrebna nobena
predhodna obdelava fotografij ali predloge spletne strani, kar je bistveno skrajšalo čas
snovanja spletne strani. HTML5 gradniki pa nudijo veliko vgradnih vsebin, kot na primer
video, avdio, geolocation kar s pomočjo kode, ni torej potrebno polagati pozornosti na
razne nameščene dodatke brskalnikov. Težave se pojavljajo ob preizkušanju različnih
Prednosti uporabe HTML5 in CSS3
29
brskalnikov, saj nekateri ne nudijo podpore. Težavno je tudi to, da sta MP3 in AAC
formata omejena s patenti, začasna rešitev leži v tem, da vključimo čim več različnih
formatov.
Novosti so pomembne, ker so enostavne za uporabo, skrajšajo čas snovanja in jih je
možno prilagoditi popolnoma po lastnih željah. Ravno to pa smo želeli prikazati s to
diplomsko nalogo.
Prednosti uporabe HTML5 in CSS3
30
5 Zaključek
Naše raziskovanje se je seveda pričelo z uporabo spleta in prebiranjem raznih člankov in
tutorialov, ki so opisovali in prikazovali zmogljivost novosti obeh standardov. Hkrati je vso
raziskovanje privedlo do izzivov, s katerimi se ustvarjalci spletnih strani tudi srečujejo, s
tem je mišljena predvsem podpora brskalnikov.
Za prikaz in preizkušnjo novosti je nastala spletna stran, za izdelavo katere je bilo
uporabljeno programsko orodje Adobe Dreamweawer CS5, ker je enostavno za uporabo
in podpira nova standarda. Veliko orodij podpore namreč še ne nudi. Prav tako se
podpora razlikuje od brskalnika do brskalnika. Novosti, ki so bile raziskane in uporabljene
v diplomski nalogi, bodo gotovo olajšale izdelavo spletnih strani. Naš cilj je bil tako
izpolnjen, saj smo prikazali uporabo novih standardov.
Ugotovili smo, da HTML5 in CSS3 omogočata hitrejšo, krajšo in boljšo rešitev oblikovanja
spletnih strani. Prikazali smo novosti in jih ovrednotili, prav tako smo raziskali tudi
možnosti podpore brskalnikov. Predpostavljali smo, da bo omejitev ravno na področju
podpore, ki ni implementirana in tako na nek način omejuje uporabo novih elementov v
vseh brskalnikih.
Ko bodo novosti implementirane, bo izdelava spletnih strani preprostejša in tako tudi
hitrejša. Nekateri dodatki, kot na primer Flash, pa zaradi zmogljivosti novih gradnikov ne
bodo več potrebni.
Z nalogo smo torej raziskali in prikazali prednosti, ki sta jih prinesla nova standarda.
Pokazali smo, kaj se da preprosto narediti, kateri izmed gradnikov so še posebej zanimivi
in jih je ravno zaradi njihove zmogljivosti smotrno uporabljati.
Prednosti uporabe HTML5 in CSS3
31
6 Viri:
[1] Hölbl M.: Prihodnost oblikovne plati spleta http://www.monitor.si/clanek/prihodnost-
oblikovne-plati-spleta/ nazadnje obiskano: 24. 4. 2012.
[2] Kjaer M.: HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-
youll-soon-be-using/ nazadnje obiskano: 24. 4. 2012.
[3] Lenon J.: Create modern Web sites using HTML5 and CSS3
http://www.ibm.com/developerworks/web/tutorials/wa-html5/ nazadnje obiskano: 24. 4.
2012.
[4] w3schools.com: HTML Introduction http://www.w3schools.com/html/html_intro.asp
nazadnje obiskano: 15. 8. 2012.
[5] Darell R.: The History of HTML
http://www.ironspider.ca/webdesign101/htmlhistory.htm nazadnje obiskano: 15. 8. 2012.
[6] W3C: XHTML2 Working Group Home Page http://www.w3.org/MarkUp/ nazadnje
obiskano: 15. 8. 2012.
[7] XML UK: CSS History & Information http://www.xmluk.org/css-history-information.htm
nazadnje obiskano: 15. 8. 2012.
[8] 1Bizzadmin: The History & Future of CSS http://newsletter.blizzardinternet.com/the-
history-future-of-css/2008/04/11/ nazadnje obiskano 15. 8. 2012.
[9] InDesignStudies: Adobe Dreamweaver CS5
http://www.indesignstudies.com/dreamweaver/ nazadnje obiskano: 15.8.2012.
[10] The Web Standards Project: HTML Versus XHTML
http://www.webstandards.org/learn/articles/askw3c/oct2003/ nazadnje obiskano: 21. 8.
2012.
Prednosti uporabe HTML5 in CSS3
32
[11] The HTML5 test: How well does your browser support HTML5? http://html5test.com/
nazadnje obiskano 2. 9. 2012.
[12] The css3 test http://css3test.com/ nazadnje obiskano 2. 9. 2012.
[13] HTML5 & CSS3 Support http://findmebyip.com/litmus/ nazadnje obiskano 28. 8.
2012.
[14] Clark R.: The figure & figcaption elements http://html5doctor.com/the-figure-
figcaption-elements/ nazadnje obiskano 29. 8. 2012.
[15] w3schools.com: HTML5 Drag and Drop
http://www.w3schools.com/html5/html5_draganddrop.asp nazadnje obiskano 29. 8. 2012.
[16] w3schools.com: CSS3 Animations
http://www.w3schools.com/css3/css3_animations.asp nazadnje obiskano 29. 8. 2012.
[17] Lubbers P. : Getting Started with HTML5 in Tech Com (STC 2012)
http://www.slideshare.net/peterlubbers/getting-started-with-html5-in-tech-com-stc-2012
nazdnje obiskano 4. 9. 2012.
Prednosti uporabe HTML5 in CSS3
33
Priloga A:
Za prikaz gradnika canvas je bila uporabljena naslednja koda:
<canvas id="myCanvas" width="300" height="200" style="border:1px solid
#333;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Za gradnik video je bila uporabljena koda:
<video src="http://www.double.co.nz/video_test/transformers480.ogg"
controls autoplay>
<div class="no-html5-video">
</div>
</video>
Za gradnik avdio:
<audio src="roll.mp3" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>
Za gradnik figure:
<figure>
<img src="pina2.jpg" alt="Pina" >
<img src="pina3.jpg" alt="Pina" >
<img src="pina4.jpg" alt="Pina" >
<figcaption>Fotografija, ki prikazuje uporabo figure</figcaption>
</figure>
Za drag and drop:
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
Prednosti uporabe HTML5 in CSS3
34
ev.target.appendChild(document.getElementById(data));
}
</script>
<p>Drag the pic into the rectangle:</p>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="pina2.jpg" draggable="true"
ondragstart="drag(event)" width="200" height="170" pading="50"/>
Za geolocation:
<section>
<p>Use the getCurrentPosition() method to get the user's
position.</p>
</section>
<section>
<p id="demo">Za prikaz tvojih koordinat klikni ta gumb:</p>
<button onClick="getLocation()">Prikaži</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Tvoj brskalnik ne podpira Geolocation.";}
}
function showPosition(position)
{
x.innerHTML="Zemljepisna širina: " + position.coords.latitude +
"<br />Zemljepisna dolžina: " + position.coords.longitude;
}
</script>
</section>
Za geolocation map:
<section>
<p>Use the getCurrentPosition() method to get the user's
position.</p>
</section>
<section>
<p id="demo">Za prikaz tvojih koordinat na zemljevidu klikni ta gumb:</p>
<button onClick="getLocation()">Prikaži</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Tvoj brskalnik ne podpira Geolocation.";}
}
Prednosti uporabe HTML5 in CSS3
35
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'
/>";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Pojavila se je neznana napaka."
break;
}
}
</script>
</section>
</div>
Prednosti uporabe HTML5 in CSS3
36
Priloga B:
Koda za prosojnost:
#opacity {
opacity: 0.8; filter: Alpha(opacity=30);
}
#opacity2 {
opacity: 0.5; filter: Alpha(opacity=30);
}
Koda za senčenje:
pshadow{
text-shadow: #333 2px 2px; font-size: 16px; color: transparent;
text-shadow: black 0 0 2px; }
#box {
width: 800px; word-wrap: break-word; padding: 0 0 20px 50px;
box-shadow: #777 10px 10px 5px; -moz-border-radius: 20px; -webkit-border-
radius: 20px;
}
Koda za stolpce:
.newspaper
{
-moz-column-count:3;
-webkit-column-count:3;
column-count:3;
}
Koda za animacijo:
#animation
{
width:200px;
height:200px;
margin: 10px 0 0 20px;
background:blue;
-moz-border-radius: 40px; -webkit-border-radius: 40px;
animation:myfirst 10s;
-moz-animation:myfirst 10s; /* Firefox */
-webkit-animation:myfirst 10s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:blue;}
to {background:green;}
}
Prednosti uporabe HTML5 in CSS3
37
@-moz-keyframes myfirst /* Firefox */
{
from {background:blue;}
to {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:blue;}
to {background:green;}
}
Ostala uporabljena koda novosti:
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
background-color: #CFF;
position: fixed;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 940px; margin: 40px auto;
min-height: 500px;
height: auto;
color: #00F;
background: -moz-linear-gradient(top, #525252,#DBDBDB );
background: -webkit-linear-gradient(top, #525252,#DBDBDB);
background: -ms-linear-gradient(top, #525252,#DBDBDB);
background: -o-linear-gradient(top, #525252,#DBDBDB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#525252),
to(#DBDBDB));
border-radius: 26px;
box-shadow: 10px 10px 5px #333;
padding-bottom: 20px;
}
nav ul {
list-style: none; padding-top: 7px; display: block;
clear: right; background:-moz-linear-gradient(top, #312945,
#A498C2);background: -webkit-gradient(linear, left top, left bottom,
from(#312945), to(#A498C2)); filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#312945',
endColorstr='#A498C2');
padding-left: 4px; height: 30px; border-radius: 12px;
}
article > header time {
font-size: 14px; display: block; width: 100px;
padding: 4px; text-align: center; background-color: #FF0;
color: #009; font-weight: bold; -moz-border-radius: 6px;
-webkit-border-radius: 6px; border-radius: 6px; float: left;
margin: 10px 10px 10px 10px;
Prednosti uporabe HTML5 in CSS3
38
text-shadow: 2px 2px 5px #006;
}
article > header time span {
font-size: 10px; font-weight: normal;
text-transform: uppercase;
}