Prednosti uporabe HTML5 in CSS3

Transkripcija

1 Aleksandra Gornik PREDNOSTI UPORABE HTML5 IN CSS3 Diplomsko delo Maribor, september 2012

2 PREDNOSTI UPORABE HTML5 IN CSS3 Diplomsko delo Študent(ka): Študijski program: Aleksandra Gornik Univerzitetni študijski program Medijske komunikacije Smer: Mentor(ica): Somentor(ica): Lektor(ica): Medijska produkcija Doc. dr. Marko Hölbl, univ.dipl. ing. Asist. Jaka Polutnik, univ. dipl. medij. kom. Petra Kneževič II

3 III

4 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. IV

5 Ključne besede: HTML5, CSS3, Javascript, Adobe Dreamweaver CS5 UDK: : (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. V

6 Advantages of HTML5 and CSS3 usage Key words:: HTML5, CSS3, Javascript, Adobe Dreamweaver CS5 UDK: : (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. VI

7 Kazalo 1 Uvod HTML in CSS Označevalni jezik - HTML Zgodovina HTML HTML Oblikovna plat spleta jezik CSS Zgodovina CSS CSS Podpora v brskalnikih Praktični primer uporabe novih gradnikov Zaključek Viri: Priloga A: Priloga B: VII

8 Kazalo slik: Slika 1 - uvodna stran Slika 2 - HTML Slika 3 - Canvas Slika 4 - Video Slika 5 - Avdio Slika 6 - CSS Slika 7 - Prosojnost Slika 8 - Stolpci 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 VIII

9 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) IX

10 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. 1

11 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] 2

12 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 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 , drugič je bil izdan 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. 3

13 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" " /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] 4

14 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 5

15 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, 6

16 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] 7

17 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] 8

18 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. 9

19 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] Zgodovina CSS Nabor kaskadnih stilov se uporablja že vse od razvoja SGML, torej od leta 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] 10

20 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) 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] 11

21 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] 12

22 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 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 { font-family: 'MojaPisava'; src: url('mojapisava.eot'); src: local('mojapisava Web Regular'), url('mojapisava.otf'), format('opentype');, 13

23 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] 14

24 3 Podpora v brskalnikih Pa si poglejmo tabele, ki smo jih zasledili na strani 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 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 15

25 Tabela 2 - CSS3 lastnosti [13]: Operacijski sistem WIN Brskalnik SAFARI IE FIREFOX OPERA CHROME Različica ,61 18 Background Size X X X Multiple X X X Backgrounds 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. 16

26 Tabela 3 - CSS3 selektroji [13]: Operacijski MAC sistem Brskalnik SAFARI FIREFOX OPERA CHROME Različica 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 17

27 Tabela 4 - CSS3 selektorji [13]: Operacijski sistem WIN Brskalnik SAFARI IE FIREFOX OPERA CHROME Različica ,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č. 18

28 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 Local Storage Session Storage Post Message Offline Applications Workers Query Selector WebSQL Database Drag and Drop GeoLocation X X Touch X X X X File API X 19

29 V Tabela 6 ponovno pridemo do ugotovitve, da najmanj podpore nudi Internet Explorer, največ pa ponovno Chrome. Tabela 6 - HTML5 spletne aplikacije [13]: Operacijski WIN sistem Brskalnik SAFARI IE FIREFOX OPERA CHROME Različica ,61 18 Local Storage X X Session Storage X X Post Message X X Offline X X X X Applications Workers X X X X Query Selector X X WebSQL X X X X X Database Drag and Drop X GeoLocation X X X Touch X X X X X X X X File API X X X X X 20

30 V Tabela 7 gre za prikaz podpore HTML5 grafike in vgradne vsebine. Tabela 7 - HTML5 grafika in vgradna vsebina [13]: Operacijski MAC sistem Brskalnik SAFARI FIREFOX OPERA CHROME Različica 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 WIN sistem Brskalnik SAFARI IE FIREFOX OPERA CHROME Različica ,61 18 Canvas X X X Canvas X X X Text 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 21

31 različnim prikazom in delovanjem glede na brskalnik. Rešitev je torej v implementiranju gradnikov. S HTML5 testom (na dan ) 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 Brskalnik <!DOCTYPE html> triggers standards mode SVG in text/html WIN FIREFOX 15.0 canvas element (canvas) 2D context (canvas) Text video element (video) Subtitle support (video) Poster image support (video) MPEG-4 support (video) H.264 support (video) Ogg Theora support X X X (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] 22

32 Pa si poglejmo Tabela 10 podprtosti nekaterih gradnikov: Tabela 10 - test CSS3 [12] Operacijski sistem Brskalnik box-shadow border-radius :nth-child :nth-last-child WIN FIREFOX 15.0 animation text-transform text-shadow opacity X 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] 23

33 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. 24

34 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 25

35 Slika 4-Video Koda 2, ki smo jo uporabili za gradnik video: <video src=" 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. 26

36 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 27

37 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 px; 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 myfirst { from {background:blue; to myfirst /* Firefox */ { from {background:blue; to 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 28

38 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. 29

39 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. 30

40 6 Viri: [1] Hölbl M.: Prihodnost oblikovne plati spleta oblikovne-plati-spleta/ nazadnje obiskano: [2] Kjaer M.: HTML 5 and CSS 3: The Techniques You ll Soon Be Using nazadnje obiskano: [3] Lenon J.: Create modern Web sites using HTML5 and CSS3 nazadnje obiskano: [4] w3schools.com: HTML Introduction nazadnje obiskano: [5] Darell R.: The History of HTML nazadnje obiskano: [6] W3C: XHTML2 Working Group Home Page nazadnje obiskano: [7] XML UK: CSS History & Information nazadnje obiskano: [8] 1Bizzadmin: The History & Future of CSS nazadnje obiskano [9] InDesignStudies: Adobe Dreamweaver CS5 nazadnje obiskano: [10] The Web Standards Project: HTML Versus XHTML nazadnje obiskano:

41 [11] The HTML5 test: How well does your browser support HTML5? nazadnje obiskano [12] The css3 test nazadnje obiskano [13] HTML5 & CSS3 Support nazadnje obiskano [14] Clark R.: The figure & figcaption elements nazadnje obiskano [15] w3schools.com: HTML5 Drag and Drop nazadnje obiskano [16] w3schools.com: CSS3 Animations nazadnje obiskano [17] Lubbers P. : Getting Started with HTML5 in Tech Com (STC 2012) nazdnje obiskano

42 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=" 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"); 33

43 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."; 34

44 function showposition(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url=" +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> 35

45 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: px 50px; box-shadow: #777 10px 10px 5px; -moz-border-radius: 20px; -webkit-borderradius: 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 px; 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 myfirst { from {background:blue; to {background:green; 36

46 @-moz-keyframes myfirst /* Firefox */ { from {background:blue; to 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; 37

47 text-shadow: 2px 2px 5px #006; article > header time span { font-size: 10px; font-weight: normal; text-transform: uppercase; 38

48

49

50