Elektronski fakultet u Niu Katedra za raunarstvo i informatiku Profesor: Prof.

Dr Milena Stankovi Asistent: Ivan Petkovi Predmet: Internet Tehnologije

HTML5

Studenti: Milo Miti 12988

HTML5

Sadraj:
1. Uvod 2. Istorija 3. ta je HTML5? 4. Osnovni principi 5. Novi elementi i karakteristika
5.1 Multimedia 5.2 Grafika 5.3 Aplikacije 5.4 Forme, strukture i semantiki elementi 5.5 CSS3 u HTML5

3 3 4 5 6
6 8 10 13 20

6. Podrka pretraivaa 7. Zakljuak 8. Literatura

21 22 23

HTML5

1. Uvod
HTML (Hyper Text Markup Language) jezik je osnova svake web stranice, uz pomo koga se prezentuje izgled i sadraj iste. Omoguava formatiranje stranice, obradu slika, teksta i jo mnogo toga. W3C (World Wide Web Consortium) je zaduen za odredjivanje standarda, ovo je neophodno iz razloga to ne bi bilo mogue pregledjivati bilo koju stranicu u bilo kom pretraivau. HTML 5 je re koja se sve ee pominje u IT svetu. HTML 5 je predlog novih standarda koji nam pruaju nove mogunosti, kao i da isprave i nadomeste neke dosadanje nedostatke. Radi se o novoj verziji HTML-a, koja nam donosi niz novosti i mogunosti koje do sada nismo mogli koristiti za izradu web sajtova bez dodatnih plugin-ova, kao to je na primer Flash. HTML 5 moemo vie smatrati evoluciom HTML 4.01, nego zamenom. Uz dodatna poboljanja, olakavanja nekih aspekata, definisanjem nedefinisanog, novim mogunostima, HTML 5 e svakako obeleiti period pred nama.

2. Istorija
Ne moemo poeti priu o HTML5 bez pomena najzaslunijih ljudi, kao i bez osvrta na prethodne verzije i do danas utvrdjenih standarda. Na poetku prie o najzaslunijim ljudima za razvoj pre svega Web-a, a zatim i HTML-a, ne moemo a da ne stavimo velikim slovima ime oveka koji je svakako najzasluniji za sve ono to danas koristimo iz ove oblasti. Njegovo ime je Tim Berners-Lee. Sve je poelo jo 1980 godine, dok je Tim Berners-Lee radio po ugovoru u CERN-u (The European Organization for Nuclear Research). Predloio je prototip sistema za istraivae u CERN-u, uz pomo koga bi mogli da koriste i dele dokumente. 1989 godine, Tim Berners-Lee je napisao rad kojim predlae hipertekst (hypertext) sistem baziran na Internetu. U drugoj polovini 1990 godine specificirao je HTML i napisao softver i za server i za pretraiva. Te iste godine Tim Berners-Lee i inenjer informatike u CERN-u Robert Cailliau, su saradjivali i zajedno zahtevali sredstva, ali projekat nije formalno usvojen od strane CERN-a. U svojim linim belekama iz 1990 godine Tim Berners-Lee je nabrojao neke od mnogih oblasti gde se hipertekst koristi, a kao prvu je stavio enciklopediju. Prvi pisani javni dostupni document o HTML-u je bio dokument pod nazivom HTML Tags. Objavio ga je Tim Berbers-Lee u drugoj polovini 1991. U ovom dokumentu je opisano 20 elemenata, koji su sainjavali relativno jednostavan dizajn HTML-a. HTML je skraenica od HyperText Markup Language koji web pretraivai koriste da interpretiraju i sloe tekst, slike i ostali materijal na web strani. Poetne karakteristike za svaki element HTML-a je definisan u pretraivau, a ove karakteristike se mogu dopuniti i izmeniti korienjem CSS-a. Tim Berners-Lee je smatrao HTML kao primenu SGML-a(Standard Generalized Markup Language).

HTML5
Formalno je definisan kao takav od strane IETF-a(Internet Engineering Task Force) radom iz sredine 1993 godine, koji je bio predlog prve specifikacije HTML-a: "Hypertext Markup Language (HTML)" Internet-Draft by Berners-Lee and Dan Connolly, koja je ukljuivala SGML Document Type Definition da definie pravila, tj. gramatiku. Pri kraju 1993 godine, Dave Raggett je predloio standardizaciju ve implementiranih elemenata kao to su tabele i forme. 1994 godine je Beerners-Lee osnovao W3C na Massachusetts Institute of Technology (MIT), koji je usvojen kao standard prema kojem e sve web stranice u budunosti raditi na isti nain. Posle isticanja HTML sa dopunama, na poetku 1994 godine IETF je osnovao HTML Working Group, koja je 1995 godine zavrila HTML 2.0, prvu HTML specifikaciju sa namerom da se na njoj temelje sva dalja usavravanja i izmene. HTML 2.0 je ukljuio ideje iz HTML, kao i iz HTML sa dopunama, ali sa osnovnom namerom da se razlikuje od predhodnih verzija. Budui razvoj pod okriljem IETF-a je prekinut zbog sukoba interesa. Od 1996 godine HTML specifikacija je odravana, dopunjivana od strane tvoraca komercijalnih softvera, kao i od strane W3C (World Wide Web Consortium), iji je osniva Tim Berners-Lee. 2000 godine HTML postaje internacionalni standard (ISO/IEC 15445:2000). HTML 4.01 je objavljen krajem 1999 godine, sa dopunom je objavljena jos jedna verzija 2001 godine. 2004 godine se poinje sa radom na HTML5. Ovom projektu se uz W3C prikljuila i WHATWG (Web Hypertext Application Technology Working Group) 2007 godine. Mnogi su mislili da e WHATWG nestati kao samostalna organizacija, ali se zadrala kao takva i nastavila rad na specifikaciji HTML 5. Trenutno postoje dve paralelne verzije HTML 5, jedna slubena na kojoj radi W3C i neslubenu na kojoj rade strunjaci iz Applea, Mozille, Opere i Googlea, koji imaju velik utjecaj na razvoj Interneta, iako iza sebe nemaju formalnu organizaciju kao to je W3C. Ipak, urednici HTML 5 specifikacije za oba tima su isti ljudi, to znai da grupe meusobno sarauju i da emo na kraju ipak imati jedan standard. Urednici HTML 5 specifikacije su Ian Hickson iz Googlea i David Hyatt koji radi za Apple.

3. ta je HTML5?
Iako je W3C poeo sam da razvija HTML5-icu, moe se rei da je HTML5 proizvod saradnje W3 Konzorciuma i WHATWG. HTML5 je jo uvek u fazi razvoja, tako da njegovu standardizaciju moemo oekivati 2014 godine, po procenama W3 Konzorciuma. Kao peta verzija HTML-a osnovni cilj je bio unapredjenje ovog jezika, kao i podrka za najnovije multimedijalne sadraje, a pri tome je crossplatform, tako da nije bitno da li koristite tablet, smartphone, netbook ili Smart TV, bitno je da va pretraiva podrava HTML5. HTML5 je namenjen da prevazidje ne samo HTML4, nego XHTML1 i HTML DOM. WHATWG je radial na web formama i aplikacijama, dok je W3C radio na XHTML 2.0. 2006 godine su poeli zajedniku saradnju. Tako da se HTML5 moe smatrati meavinom karakteristika i specifikacija HTML-a i XHTML-a.

HTML5
Ovome je doprinela zajednika praksa, kao i mnoge greke u postojeim web dokumentima, ovo je takodje i pokuaj da se definie jedinstveni markup jezik, koji se moe pisati i u HTML-u i u XHTML-u. Ovo ukljuuje detaljne procesne modele da bi ohrabrilo jo interoperabilnih implementacija. To proiruje, unapredjuje i racionalizuje oznaavanje dokumenata, kao to je omoguen i API (application programming interfaces), za kompleksne web aplikacije. Neki od novih elemenata su video, audio, canvas, kao i mnogo drugih, o kojima e biti re kasnije. Pored novih elemenata ne moemo a da ne pomenemo integraciju SVG (Scalable Vector Graphics) sadraja, koji zamenjuje upotrebu object taga. Ove inovacije olakavaju rukovanje multimedijalnim i grafikim sadrajem na web-u bez dodatnih plugin-ova i API-a. Neki od elemenata su promenjeni, neki izbaeni, sve u cilju pojednostavljenja organizacije structure dokumenta.

4. Osnovni principi
Na razvoju HTML5 pored pokretaa projekta, ukljueni su i strunjaci iz svih veih pretraivaa, da bi svojim iskustvom i znanjem doprineli boljem i uspenijem razvoju. Neke od ideja i principa kojima se vode ljudi koji uestvuju u razvoju HTML5 su: Nove karakteristike treba da se baziraju na HTML, CSS, DOM i JavaScript-u Smanjiti potrebu za eksternim plugin-ovima (Flash) Bolja obrada greaka Vie tagova koji bi zamenili skripte HTML5 bi trebalo da ne zavisi od uredjaja na kome se koristi Proces razvoja treba biti dostupan javnosti

HTML5

5. Novi elementi i karakteristike

HTML 5 je definitivno standard koji e prilino brzo promeniti pogled na Internet, doprineti lakem i brem razvoju ozbiljnih aplikacija, omoguiti apsolutnim poetnicima da jednostavno kreiraju sve aktualne komponente na web stranicama, pa ak i one malo zahtjevnije. Kada govorim o HTML 5 standardu, ne govorim samo o HTML-u, ve u o nizu tehnologija implementiranih pod navedenim imenom. Tu su pre svega CSS i JS (JavaScript), ali i sve ono novo i zanimljivo to donosi HTML 5.

5.1 Multimedia
Audio
Do sada nije postojao standard za presluavanje audio fajlova na web strain. Danas se veina audio fajlova presluava preko plugin-ova (Flash), tako da svaki od pretraivaa moe imati razliite. HTML5 kao jednu od novina sadri element <audio>, kojim je definisan standard za audio fajlove na web stranama.
<!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html>

Atribut control dodaje nam audio kontrole kao to su play, pause, kao i mogunost regulisanja jaine zvuka. Izmeu krajnjih tagova nije na odmet staviti tekst kojim e korisnici biti obaveteni ukoliko njihov pretraiva ne podrava <audio> element. <audio> element omoguava elemente sa razliitih izvora, <source> element nam omoguava da nai audio fajlovi budu na razliitim lokacijama, a pretraiva e otvoriti prvi format koji podrava. Na slici 1 je prikazana realizacija audio elementa.

Slika 1. Audio element Google Chrome

HTML5 Video
Kao i sa audio elementom, isti je sluaj i sa video elementom, do sada nije postojao standard za postavljanja videa na web stranama. Do sada su vam bili potrebni razni dodaci (plug-ins), Apple QuickTime, RealPlayer ili Adobe Flash, koji su ugradjeni u pretraivae. Podrka za ovaj element je u razvoju, tako da ga ne podravaju svi pretraivai jo uvek, ali se radi na tome. Najvei problem je u usaglaavanju formata. HTML 5 podrava .ogg, .mpeg4 i .webM, dok je ostale formate potrebno konvertovati.
<!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video> </body> </html>

Atribut control kao i kod audio elementa nam dodaje opcije za kontrolu nad videom, stim to za razliku od audio elementa nije loe navesti irinu i visinu videa koji e se prikazati u pretraivau, kako bi prilikom uitavanja pretraiva rezervisao proctor. Izmedju krajnjih elemenata moemo navesti tekst koji e se korisnicima prikazati u koliko njihov pretraiva ne podrava video element. Na slici 2 je prikazana realizacija video elementa.

Slika 2. Video element Google Chrome

HTML5 5.2 Grafika

Do nedavno, web programeri su bili ogranieni na CSS i JavaScript kod stvaranja animacija i vizuelnih efekata za svoje web stranice, ili prinudjeni da koriste plugin-ove kao to je Flash. Sa dodatkom novih tehnologija kao to su Canvas elementi, Web GL i SVG slike, vie nema potrebe za ovim. ak ta vie sad imamo i nove mogunosti, nove funkcije koje moemo koristiti za grafiku na web-u: 2D Canvas WebGL SVG SMIL (Synchronized Multimedia Integration Language)

Naravno, nijedna od ovih novih tehnologija ne bi bile od koristi da se brzo ne izvravaju. JavaScript engines su postali dovoljno brzi za pokretanje 3D igara i za manipulaciju videom u realnom vremenu. Programer iskoriavaju ove olakice, poplava HTML grafikih radova se pojavljuje na web-u, od implementacije starih 2D grafikih algoritama do najnovijih tehnika stvorenih specijalno za moderni web.

2D Canvas
HTML5 Canvas elementi koriste JavaScript za crtanje raznih oblika na web strain. Canvas pretstavlja platno, pravougaonik nad kojim imamo potpunu kontrolu, kontroliemo svaki piksel. Canvas element ima nekoliko metoda za crtanje putanja, pravougaonih figura, krugova, krivi, karaktera kao i za dodavanje slika.
<canvas id="canvas" width="838" height="220"></canvas> <script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>

Ovo je primer jednog Canvas elementa u ijem poetnom tagu navodimo njegov id, kao i dimenzije Canvas elementa kojim manipuliemo. Kako Canvas element nema crtakih sposobnosti, za to se koristi

HTML5
JavaScript. U skripti navodimo oblike ili putanje koje elimo da iscrtamo, obojimo, kao i druga podeavanja za nae grafike radove. Na slici 3 je prikazana realizacija prethodnog koda.

Slika 3. Canvas element

WebGL
WebGL (Web-based Graphics Library) je biblioteka koja unapredjuje sposobnosti JavaScript-a. Omoguava kompatabilnim pretraivaima prikaz interaktivnih 3D animacija. Sastavni je deo Canvas elementa koji omoguava 3D kompjutersku grafiku bez korienja plugin-ova, pristupa mu se preko DOM interfejsa. WebGL je zasnovan na OpenGL ES 2.0 i omoguava API za 3D grafiku. Evo dela koda jedne 3D animacije:
<canvas id="canvas" width="838" height="220"></canvas> <script> var gl = document.getElementById(canvas).getCintext(experimental-webgl); gl.viewport(0, 0, canvas.width, canvas.height); ... </script>

SVG
SVG (Scalable Vector Graphics) je jezik za opisivanje 2D vektorske grafike. Koristi se za definisanje grafike na web-u koja se bazira na vektorima, definie i grafiku u XML format. SVG grafika ne gubi na kvalitetu u koliko se zumira ili promeni veliina. Svaki element i atribut se moe animirati. SVG saradjuje is a ostalim W3C standardima kao to su DOM i XSL. Evo jednostavnog primera koda:

HTML5
<html> <svg>

<circle id=myCircle class=important cx=50% cy=50% r=100 fill=url(myGradient) onmousedown=alert(Hello); /> </svg> </html>

Kao to se vidi u prethodnom primeru vrlo jednostavno moemo imati funkcionalnu sliicu kruga, na ijoj povrini, klikom mia dobijamo alert poruku Hello. Na slici 4 je prikazana realizacija koda.

Slika 4. SVG

5.3 Aplikacije
HTML 5 je na ovom polju uinio ozbiljan pomak i stvaranje web aplikacija uinio lakim nego ikad. Budue web aplikacije odlikovae se nekim od sledeih karakteristika: Lokalno skladitenje podataka Lokalni pristup fajlovima Lokalna SQL baza podataka Aplikacije sa keiranjem podataka JavaScript radnici (workers) XHTMLHttpRequest 2

10

HTML5
Lokalno skladitenje podataka
Od samog poetka Web pretaiva je bio namenjen da bude klijent u najosnovnijem smislu rei. Trebao je da prikazuje informacije koje je preuzeo sa udaljenog servera i ne bi radio nita osim onoga to mu server govori da radi. Programeri su veoma brzo otkrili ova ogranienja pa su obezbedili i mogunost da se neto podataka ostavi i sa strane. Nakon toga kreatori su ovom tekstu dali zanimljiv naziv, kolai, ali ni to nije reilo problem. Kolaii su doli u centar panje kada je javnost poela da se pita kako je mogue pratiti svaki njihov potez. Nakon toga korisnici su zatraili mogunost brisanja kolaia koju su na kraju i dobili to je ograniilo mogunosti programerima. Na kraju su nastali problemi sa specifikacijama. Kolaii se nisu skladitili samo u raunaru oni su bili slati nazad do servera. Napredni Web programeri znaju da nema nikakve svrhe od korienja veine od tih 4.096 bajtova zbog toga to prihvatanje suvie velike koliine podatka dovodi do velikih trokova ali i zaguenosti. Tim koji stoji iza HTML5 standarda odabrao je da rei ove probleme i dizajnira osnovu za konanu pobedu sofvera baziranog na pretraivau pruajui JavaScript programeru mogunost da uskladiti praktine koliine podataka na lokalnom raunaru. To jednostavno moe biti cache ali moe biti i mnogo vie. Napredniji programeri mogu omoguiti korisnicima da lokalno uskladite svoje Web strane, podravajui poslednju veliku karakteristiku desktop softvera pruajui pristup disku pa tako vie nema potrebe za instaliranjem bilo kakvog softvera. HTML5 Web skladitenje i sesija skladitenja je najjednostavniji nivo Web skladitenja koji skladiti podatke za trenutnu sesiju drugim reima, sve dok je tab pretraivaa ili prozor otvoren. Ovo moda i nije najbolje reenje budui da specifikacije ostavljaju otvorenu mogunost pretraivau da sauva ove podatke tokom ponovnog pokretanja. Svaki dokument dobija sesionStorage objekt uz nekoliko glavnih funkcija a podaci su klonovi trenutnih vrednosti. Prave prednosti dolaze sa pristupm localStorage objektu koji je slian sessionStorage objektu ali se ponaa potpuno drugaije. Tamo gde sessionStorage zaboravlja, localStorage pamti. Podaci bi trebalo da budu sauvani ak i nakon to se prozori zatvore i raunar iskljui. HTML5 sa sobom donosi veliki broj mogunosti ali i veliki broj odluka koje dizajneri pretraivaa moraju da donesu. Tek tada e korisnici moi da odrede koje su to karakteristike koje su im neophodne, koji je nivo privatnosti i fleksibilnosti koji im odgovara kao i koji je to nain na koji se Web efektivno moe koristiti. Ipak, odgovori na sva ova pitanja predstavljaju daleku budunost.

Lokalni pristup fajlovima

HTML5 konano prua standardan nain za interakciju sa lokalnim fajlovima, uz pomo File API specifikacije. Kao primer svojih mogunosti, File API se moe upotrebiti za pregled neke slike dok se ona alje serveru, ili da dozvoli aplikaciji da sauva referencu fajla dok je korisnik offline. Moe se koristiti logika sa strane korisnika (client-side logic) za proveru poklapanja ekstenzije upload-ovanog fajla ili da se ogranii veliina fajla koja se moe upload-ovati. Specifikacija prua nekoliko interfejsa za pristupanje lokalnim fajlovima: File individualni fajl; prua nam informacije kao to su ime, veliina, referenca do file handle-ra. FileList niz-kao sekvenca File objekata. Blob Dozvoljava deljenje fajla na bajtove.

11

HTML5
Kada se koristi u kombinaciji sa gore navedenim strukturama podataka, FileReader interfejs se moe koristiti za asinhrono itanje fajlova kroz poznate JavaScript rukovaoce (handlers)dogadjajima. Dakle, mogue je nadgledati proces itanja, hvatanje greaka i prekinuti kada se uitavanje zavri. Ovaj API na mnogo naina podsea na XMLHttpRequest model dogaaja. Evo deo koda koji proverava da li na pretraiva podrava File API:
// Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // All the File APIs are supported. } else { alert('The File APIs are not fully supported in this browser.'); }

Aplikacije sa keiranjem podataka

Od sve veeg znaaja je dostupnost web aplikacija kada smo offline. Svi pretraivai imaju svoje mehanizme za keiranje, ali oni su nepouzdani i nee raditi onako kako elimo. Sa ApplicationCache interfejsom HTML 5 pokuava da rei neke neprijatnosti koje se mogu desiti kada smo offline. Korienje ke interfejsa nam prua tri prednosti: Offline pretraivanje korisnici se mogu kretati po vaoj stranici iako su offline. Speed keirani podaci su sauvani na lokalnom disku, tako da se uitavaju bre. Smanjenje optereenja server pretraiva skida samo podatke koji su se promenili.

AppCache omoguava programerima da odrede koje fajlove e pretraiva keirati, a koje ne, za njihovu dostupnost kada je korisnik offline. Aplikacija e se uitati i raditi kako treba, ak iako korisnik osvei stranicu.

JavaScript radnici (workers)

Web Workers je JavaScript skripta definisana od strane W3C i WHATWG koju izvrava HTML strana u pozadini, nezavisno od ostalih user-interface skipti koje se takodje mogu izvravati od strane iste HTML strane. W3C i WHATWG su zamislili JavaScript radnike kao skriptu koju ne prekidaju user-interface skripte, skripte koje odgovaraju na klik mia ili druge interakcije korisnika. Neprekidanje rada JavaScript radnika od strane korisnikih aktivnosti omoguava web stranama da ostanu dostupne u trenutku izvrenja dugih procesa u pozadini. Najjednostavnija primena je u tome da se izvravaju zahtevni procesi u pozadini bez prekidanja korisnikog interfejsa. W3C i WHATWG trenutno rade na definisanju API-a za web radnike.

12

HTML5
XHTMLHttpRequest 2
XMLHttpRequest je API dostupan u jezicima za pisanje skripti za web pretraivae kao to je JavaScript. Koristi se za slanje HTTP ili HTTPS zahteva direktno web serverima, iji se odgovori vraaju u skriptu. Podaci sa server se mogu primiti kao XML ili obian tekst. Podaci iy odgovora se mogu direktno koristiti u DOM-u trenutno aktivnog dokumenta u prozoru pretraivaa bez uitavanja dokumenta nove web strane. Dodaci koji se nalaze u odgovorima se takodje mogu razvijati i na klijent strain. Na primer, ako je odgovor formatiran od strane web server kao JSON, moe se lako konvertovati u podatke klijentske strane za dalju upotrebu. XMLHttpRequest ima veliku ulogu u Ajax web programerskoj tehnici, trenutno se koristi od strane mnogih web sajtova za implementacuju dinamikih web aplikacija. Kao primer primene su aplikacije kao Gmail, Google Maps, Facebook i mnoge druge. XMLHttpRequest 2 je novi pokuaj da se definie bolja specifikacija XMLHttpRequest. Ovo je jo uvek nacrt specifikacije i bie potrebno mnogo truda dok se ne smatra potpunom. Ali i sada sadri mnoge aspekte koji su vredni komentara.

5.4 Forme, strukturni i semantiki elementi

Za poetak prie je najbolje pogledati strukturu nove HTML 5 stranice. Bez dodatnih klasa i objekata.

Slika 5. Struktura stranice

13

HTML5
Novi strukturni elementi
<header> Header element sadri informacije o sekciji ili stranici. Tu moete staviti sve, od osnovnih informacija (logo,delatnost,kontakt) do cele tabele sadraja.
<header> <h1>Dobrodoli na Moj WebSajt</h1> <p>Sve to Vas zanima o webu na jednommestu</p> </header>

<nav> Nav element je rezerviran za deo dokumenta koji sadri linkove prema drugim stranicama ili odredjenim delovima iste stranice. Ne treba sve linkove na strani staviti u <nav> element, ve samo glavnu navigaciju.
<nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a> </nav>

<section> Element <section> je veoma slian <div> elementu i koristi za definisanje odredjenih delova strane kao to su vesti i reklame.
<section> <h1>W3C</h1> <p>Organizacija koja definie standardie na internetu</p> </section>

14

HTML5
<article> Article element predstavlja deo stranice gde se nalaze stvari kao to su lanci, komentari ili slian sadraj.
<article> <h3>HTML5 tehnologija budunosti</h3> <p>Vreme je da se upoznate sa novinama...</p> </article>

<aside> Predstavlja sadraje vezane uz glavno podruje dokumenta. Obino sadre elemente kao to su povezani lanci, tag oblaci,citati itd.

<aside> <h4>Web Sajt</h4> Neophodan u dananjemem poslovanju... </aside>

<footer> Footer element slui za oznaavanje podnoja strane, ne samo trenutne stranice, ve svakog dela te stranice. Dakle, vrlo verovatno da ete koristi element <footer> vie puta unutar jedne stranice.
<footer>Copyright 2010 Moj WebSajt</footer>

Kada pogledate ove nove elemente, oni izgledaju kao da su samo zamena za div id, i na neki nain, to je istina. Ali razlika je u tome to elemente kao to su <header/> i <footer/>moete koristiti vie puta na jednoj stranici gde se oni ponaaju vie kao klase i drugi HTML elemenati koje moete koristiti iznova i iznova. Elementi kao to su <header/> i <footer/> nisu predvidjeni da predstavljaju samo vrh i dno trenutne stranice, ve se koriste da predstave <header/> i <footer/> svakog dela dokumenta, kao to kod tabela koristimo <thead/> i <tfoot/>. Prednosti korienja ovih strukturnih elemenata je uglavnom zbog injenice da su vrlo dobro definisani i pruaju sjajan nain za strukturu dokumenta.

15

HTML5
Forme
Tokom izrade web stranica samo pravljenje forme nikada nije bio problem koliko validacija uneenih podataka. Na raspolaganju smo imali nekoliko tipova elemenata formi (text, checkbox, radio button, popup list...), koji su najverovatnije u trenutku u kome su definisani bili dovoljni, meutim, sa brzom ekspanizijom broja korisnika interneta i tolikom koliinom online servisa, forme su postajale sve korienije. Danas, na primer, po registraciji na neku od drtvenih mrea oekuje vas par dodatnih koraka i popunjavanje na desetine podataka. Ti podaci uglavnom su razliitog tipa, poev od imena i prezimena, potom mail adrese, web sajta, pa sve do datuma roenja, omiljene boje itd. Najee koriena komponenta web formi bila je textbox koja je mogla imati jedno jedino ogranienje, maksimalni uneti broj karaktera. A bilo ih je potrebno mnogo vie. Samo oni koji su pisali skripte za pomenutu validaciju podataka u formama znaju koliko je to zamoran posao. HTML5 donosi pregrt novih tipova elemenata u web formama i u mnogome olakava njihovu validaciju. Bez velike potrebe za javascript-om, regularnim izrazima ili CSS validacijom sada ete moi da pravite sloene, a opet dovoljno sigurne i ozbiljne forme. Evo spiska novih tipova: color datalist date datetime datetime-local email month number range search tel time url week

U narednim primerima u predstaviti svaki od elemenata posebno. U ovom trenutku najbogatiju vizuelnu podrku HTML5 formama ima Opera, mada iz Microsoft-a najavljuju da e u sledeoj verziji Internet Explorer-a akcenat biti ba na HTML5 standardu. Zato, primeri i screenshot-ovi koji slede bie iz Opere (verzija 11). Za poetak, data je jednostavna forma za unos osnovnih podataka o osobi. Verujem da ve prvim pogledom na zaista kratak kod, zakljuujete gde su napravljene kljune promene. To je atribut type. Oigledno da sada za unos svih najpotrebnijih informacija imamo posebne tipove: name, email, url, tel. Pored ovoga, za prvo polje, primeujete atribut placeholder, ija je namena da postavi dodatne informacije koje se klikom na polje gube (najee informacije koje pomau korisniku u sluaju nedoumica kod unosa).

16

HTML5

Slika 6. Novi Form elementi, Opera 11

<form> <label <input autofocus/> <br /> <label <input <br /> <label <input <br /> <label <input <form> for=name>Name:</label> type=text namename id=name placeholder=First and Last required

foremail>Email:</label> typeemail name=email id=email id=email required/> for=url>Your URL:</label> type=url name=url id=url /> for=phone>Telephone:</label> type=tel name=phone id=phone required/>

Samim navoenjem tipa polja, oslobodili smo se potrebe za proverom validnosti podataka. Ipak, da bi bili sigurni da li su podaci uopte uneti, potrebno je da pored svih polja koja su zahtevana stavimo kljunu re required. U sluaju da korisnik proba da uradi submit forme a da pritom nije uneo neki od obaveznih podataka bie mu prikazano upozorenje This is a required field. Isti je sluaj kada su uneti podaci neispravni npr. neisprvana email adresa, Please enter a valid email adress.

Slika 7. Kljuna re "required"

17

HTML5
Dalje, navedeni su primeri za tipove number, range, color i primer za kombinaciju elementa tipa text sa listom ponuenih mogunosti. U elementimu tipa number nije mogue uneti nijedan drugi karakter osim cifre. Posebno, ukoliko su vrednosti ograniene izmeu minimalne i maksimalne nije mogue izai van tog okvira. Pre definisanja novog standarda, za ovako neto bilo vam je potrebno mnogo dosadnog i uvek istog programiranja. Komponentarange slui za intuitivniji odabir vrednosti izmeu dve predefinisane. Ispod slike je i kod koji prati sliku.

Slika 8. Jo neki Form elementi

<label for="gradYear">Graduation year:</label> <input type="number" name="gradYear" id="gradYear" min="2000" max="2016" step="1" /> <br /> <label for="experienceRange">HTML5 Experience Range</label> <input type="range" name="experienceRange" id="experienceRange" min="1" max="100" step="1" value="50" /> <span id="rangeValue"></span><span style="color: #666666; font-family: 'Lucida Grande', Verdana, Helvetica, sans-serif;"><span style="font-size: 11px; whitespace: normal;"> </span></span>

Detalj na koji treba obratiti panju je prikaz trenutne vrednosti elementa range. U okviru elementa brojani prikaz nije obezbeen, a kako imam utisak da je to potrebno zbog preciznijeg odreivanja vrednosti, odvojio sam nekoliko minuta i napisao par linija javascript koda kako bih to omoguio:
<script> var rangeValue = document.getElementById("rangeValue"); var devExperienceRange = document.getElementById("experienceRange"); devExperienceRange.onchange = function() { rangeValue.innerText = this.value; } rangeValue.innerHTML = devExperienceRange.value; </script>

18

HTML5
Atribut list sa navedenim imenom u okviru obinog tekst elementa, omoguie vam da kroz tag datalist ponudite korisniku izbor jedne od opcija. Bitno je napomenuti da korisnik ukoliko to eli moe uneti vrednost razliitu od ponuenih. Ispod slike je i kod koji prati sliku.

Slika 9. Tipovi elemenata list, color

<label for="eyeColor">Eye color:</label> <input type="text" name="eyeColor" id="eyeColor" list="colors"/> <datalist id="colors"> <option value="Blue" /> <option value="Black" /> <option value="Green" /> </datalist> <br /> <label for="bgcolor">Background color:</label> <input type="color" name="bgcolor" id="bgcolor" value="rgb(128,0,0)" />

Podrazumevanu boju u okviru elementa tipa color navodite preko atributa value.

19

HTML5
U okviru prie o formama ostalo je da pomenemo nekoliko tipova koji se odnose na unos datuma i vremena na razliite naine. Svaki od naina su predstavljeni kodom koji sledi.
<label for="arrivalDate">Arrival date:</label> <input type="date" name="arrivalDate" id="arrivalDate" value="2011-01-01" min="2011-01-01" max="2023-12-31" /> <br /> <label for="arrivalDT">Arrival date/time:</label> <input type="datetime" name="arrivalDT" id="arrivalDT" value="2011-01-01 09:30:00 UTC" /> <br /> <label for="arrivalDTlocal">Arrival date/time local:</label> <input type="datetime-local" name="arrivalDTlocal" id="arrivalDTlocal" value="201101-01 09:30:00" /> <br /> <label for="arrivalTime">Arrival time:</label> <input type="time" name="arrivalTime" id="arrivalTime" value="09:30:00" /> <br /> <label for="birthMonth">Birth month:</label> <input type="month" name="birthMonth" id="birthMonth" value="1965-04" /> <br /> <label for="vacationWeek">Vacation week:</label> <input type="week" name="vacationWeek" id="vacationWeek" value="2011-W26" />

5.5 CSS3 u HTML5

CSS3 je podeljen na modules. Stara specifikacije je podeljena na manje delove, a neki novi su dodati. Neki od najvanijih CSS3 modula su: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

20

HTML5

6. Podrka pretraivaa
U ovom poglavlju emo videti koji nivo podrke za HTML 5 nam pruaju najpopularniji web pretraivai. HTML 5 se veoma brzo menja i web pretraivai podravaju sve vei broj njegovih funkcionalnosti. U sledeoj tablici je prikazana trenutna podrka web pretraivaa za HTML 5.

Slika 10. Podrka web pretraivaa Mnoge nove funkcionalnosti HTML-a 5 imaju veliku podranost ili implementacije bazirane na web pretraivaima. Poznavanjem korisnika Interneta i mogunosti njihovih web pretraivaa je znaajan faktor prilikom odluke kada iskoristiti specifinu funkcionalnost HTML-a 5. Kako se specifikacija HTML-a 5 svakodnevno menja i dopunjuje tako i web pretraivai prate tu promenu i pruaju podrku za rad sa HTML-om 5. Kako bi ostali u korak sa tim promenama u nastavku teksta su navedene web stranice na kojima se moemo detaljnije upoznati sa podrkom web pretraivai prema HTML-u 5. -http://fmbip.com/ Ovde se moe videti podrka za konkretne funkcionalnosti HTML-a 5 kao i CSS-a. Testovi ne obuhvataju sve novine kao nek, ali radi dobar posao testirajui i Macintosh web pretraivae. -http://samples.msdn.microsoft.com/ietestcenter/ Ova Microsoft-ova web stranica je jedan od najboljih centara za uporedjivanje podrke web pretraivaa za HTML 5. Ovde se uporedjuju budue verzije Internet Explorera sa ostalim web pretraivaima. Nivo detalja, nad kojima se testiranja vre, je na visokom nivou. -http://caniuse.com Ovde moemo filtrirati rezultat i videti listu web pretraivaa baziranu na naoj pretrazi. Bilo koju kategoriju da smo izabrali imali bi smo dodatne linkove na probne (eng. demo) web stranice, lanke i test stranice sa odgovarajuim funkcionalnostima. -http://html5test.com Ukoliko elimo testirati na trenutni web pretraiva, to moemo uraditi posetom ove web stranice. Ova web stranica e rangirati va web pretraiva na osnovu podrke za HTML 5.

21

HTML5

7. Zakljuak
HTML 5 je jo uvek u fazi razvoja, to znai da se o ovom standardu i dalje raspravlja na HTML Working Group i WHATWG mailing-listama. HTML 5 (ponekad nazivan Web Applications 1.0) je tehnologija koju je razvila WHATWG (Web Hypertext Application Technology Working Group), grupa koja je nastala spajanjem 3 giganta u pogledu web pretraivaa: Mozille, Chrome, Opere i Appleovog Saffarija. Iako iza standarda stoji W3C (World Wide Web Consortium), glavni nosioci razvoja su Google, Apple i Mozilla, a tek se kasnije ukljuio i Microsoft. Premda e verovatno protei dosta vremena do konanog donoenja novog standarda za kreiranje web stranica, uticaj HTML-a 5 na razvoj Interneta ve je i danas znaajan. Youtube je ve dostupan u HTML 5 obliku, a njegov primer slede sve brojnije web stranice posebno one koje korisnicima nude video sadraj. Kompanije kao to su Google, Apple i Microsoft ve pruaju podrku za HTML 5 u svojim klasinim i mobilnim pretraivaima. Oekuje se da e se u nekoliko narednih godina konano definirati standard za kreiranje web stranica i naina njihovog pregleda od strane korisnika. Jedan od glavnih razloga zbog kojih je HTML 5 preuzeo vodeu ulogu od XHTML jezika u kreiranju sadraja na Internetu je, osim injenice da omoguava poveanu efikasnost, i da podrava kompatibilnost s prethodnim verzijama HTML-a. To znai da bilo koji pretraiva koji podrava HTML 5 dokumente, takoe podrava i dokumente napisane u bilo kojoj prethodnoj verziji HTML-a, to je vrlo znaajno s obzirom da na Internetu postoji vrlo veliki broj ovakvih dokumenata.

22

HTML5

8. Literatura http://w3schools.com/html5/default.asp, poslednja poseta 1/20/2012. http://w3schools.com/css3/default.asp, poslednja poseta 1/20/2012. http://en.wikipedia.org/wiki/HTML_5, poslednja poseta 1/20/2012. http://en.wikipedia.org/wiki/Html, poslednja poseta 1/20/2012. http://html5doctor.com, poslednja poseta 1/20/2012. http://www.whatwg.org/, poslednja poseta 1/17/2012. http://www.html5rocks.com/en/, poslednja poseta 1/17/2012. http://en.wikipedia.org/wiki/WebGL, poslednja poseta 1/18/2012. http://en.wikipedia.org/wiki/Scalable_Vector_Graphics, poslednja poseta 1/18/20129 http://msacademic.rs/Blog.aspx?id=225, poslednja poseta 1/20/2012.

23