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č


III


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.


V


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.


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.


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


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


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)

http://www.ietf.org/

http://www.w3.org/


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.


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]


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.




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]


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


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,


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]


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]


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.


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]

http://www.w3.org/


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]


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]


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]

Print

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'); } ,


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]


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

http://findmebyip.com/litmus/


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.


17

Tabela 3 - CSS3 selektroji [13]:

Operacijski

sistem

MAC


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


18

Tabela 4 - CSS3 selektorji [13]:



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č.


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


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


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


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


21

V Tabela 7 gre za prikaz podpore HTML5 grafike in vgradne vsebine.

Tabela 7 - HTML5 grafika in vgradna vsebina [13]:

Operacijski

sistem

MAC


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


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


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]


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]

http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element

http://www.w3.org/TR/2dcontext/

http://www.w3.org/TR/2dcontext/#text

http://www.w3.org/TR/html5/the-iframe-element.html#the-track-element

http://www.w3.org/TR/html5/the-iframe-element.html#dom-video-poster


23

Pa si poglejmo Tabela 10 podprtosti nekaterih gradnikov:

Tabela 10 - test CSS3 [12]


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]


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 .


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


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.


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


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 */

{



}

@-webkit-keyframes myfirst /* Safari and Chrome */

{



}

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


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.


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.


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.

http://www.monitor.si/clanek/prihodnost-%20oblikovne-plati-spleta/

http://www.monitor.si/clanek/prihodnost-%20oblikovne-plati-spleta/

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

http://www.ibm.com/developerworks/web/tutorials/wa-html5/

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

http://www.ironspider.ca/webdesign101/htmlhistory.htm

http://www.w3.org/MarkUp/

http://www.xmluk.org/css-history-information.htm

http://newsletter.blizzardinternet.com/the-history-future-of-css/2008/04/11/

http://newsletter.blizzardinternet.com/the-history-future-of-css/2008/04/11/

http://www.indesignstudies.com/dreamweaver/

http://www.webstandards.org/

http://www.webstandards.org/learn/articles/askw3c/oct2003/


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.

http://html5test.com/

http://css3test.com/

http://findmebyip.com/litmus/

http://html5doctor.com/the-figure-figcaption-elements/

http://html5doctor.com/the-figure-figcaption-elements/

http://www.w3schools.com/html5/html5_draganddrop.asp

http://www.w3schools.com/css3/css3_animations.asp

http://www.slideshare.net/peterlubbers/getting-started-with-html5-in-tech-com-stc-2012


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>


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" >



<figcaption>Fotografija, ki prikazuje uporabo figure</figcaption>

</figure>

Za drag and drop:


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");


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.";}

}


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>


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

{



}


37

@-moz-keyframes myfirst /* Firefox */

{



}

@-webkit-keyframes myfirst /* Safari and Chrome */

{



}

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;


38

text-shadow: 2px 2px 5px #006;

}

article > header time span {

font-size: 10px; font-weight: normal;

text-transform: uppercase;

}

prednosti uporabe html5 in css3 · 2017-11-27 · prednosti uporabe html5 in css3 1 1 uvod nekaj,...

Documents