Elektronski fakultet u NišuKatedra za računarstvo i informatiku

Profesor:Prof. Dr Milena Stanković

Asistent:Ivan Petković

Predmet:Internet Tehnologije

HTML5

Studenti:Miloš Mitić 12988

HTML5

2

Sadržaj:

1. Uvod 3

2. Istorija 3

3. Šta je HTML5? 4

4. Osnovni principi 5

5. Novi elementi i karakteristika 65.1 Multimedia 65.2 Grafika 85.3 Aplikacije 105.4 Forme, strukture i semantički elementi 135.5 CSS3 u HTML5 20

6. Podrška pretraživača 21

7. Zaključak 22

8. Literatura 23

HTML5

3

1. Uvod

HTML (Hyper Text Markup Language) jezik je osnova svake web stranice, uz pomoć koga seprezentuje izgled i sadržaj iste. Omogućava formatiranje stranice, obradu slika, teksta i još mnogo toga.

W3C (World Wide Web Consortium) je zadužen za odredjivanje standarda, ovo je neophodno iz razloga što ne bi bilo moguće pregledjivati bilo koju stranicu u bilo kom pretraživaču.

HTML 5 je reč koja se sve češće pominje u IT svetu. HTML 5 je predlog novih standarda koji nam pružaju nove mogućnosti, kao i da isprave i nadomeste neke dosadašnje nedostatke. Radi se o novoj verziji HTML-a, koja nam donosi niz novosti i mogućnosti koje do sada nismo mogli koristiti za izradu web sajtova bez dodatnih plugin-ova, kao što je na primer Flash. HTML 5 možemo više smatrati evoluciom HTML 4.01, nego zamenom. Uz dodatna poboljšanja, olakšavanja nekih aspekata, definisanjem nedefinisanog, novim mogućnostima, HTML 5 će svakako obeležiti period pred nama.

2. Istorija

Ne možemo početi priču o HTML5 bez pomena najzaslužnijih ljudi, kao i bez osvrta na prethodne verzije i do danas utvrdjenih standarda.

Na početku priče o najzaslužnijim ljudima za razvoj pre svega Web-a, a zatim i HTML-a, ne možemo a da ne stavimo velikim slovima ime čoveka koji je svakako najzaslužniji za sve ono što danas koristimo iz ove oblasti. Njegovo ime je Tim Berners-Lee. Sve je počelo još 1980 godine, dok je Tim Berners-Lee radio po ugovoru u CERN-u (The European Organization for Nuclear Research). Predložio je prototip sistema za istraživače u CERN-u, uz pomoć koga bi mogli da koriste i dele dokumente.

1989 godine, Tim Berners-Lee je napisao rad kojim predlaže hipertekst (hypertext) sistem baziran na Internetu. U drugoj polovini 1990 godine specificirao je HTML i napisao softver i za server i za pretraživač. Te iste godine Tim Berners-Lee i inženjer informatike u CERN-u Robert Cailliau, su saradjivali i zajedno zahtevali sredstva, ali projekat nije formalno usvojen od strane CERN-a. U svojim ličnim beleškama 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 sačinjavali relativno jednostavan dizajn HTML-a.

HTML je skraćenica od HyperText Markup Language koji web pretraživači koriste da interpretiraju i slože tekst, slike i ostali materijal na web strani. Početne karakteristike za svaki element HTML-a je definisan u pretraživaču, a ove karakteristike se mogu dopuniti i izmeniti korišćenjem CSS-a.Tim Berners-Lee je smatrao HTML kao primenu SGML-a(Standard Generalized Markup Language).

HTML5

4

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 uključivala SGML Document Type Definition da definiše pravila, tj. gramatiku. Pri kraju 1993 godine, Dave Raggett je predložio 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 budućnosti raditi na isti način.

Posle isticanja HTML sa dopunama, na početku 1994 godine IETF je osnovao HTML Working Group, koja je 1995 godine završila „HTML 2.0“, prvu HTML specifikaciju sa namerom da se na njoj temelje sva dalja usavršavanja i izmene. HTML 2.0 je uključio ideje iz HTML, kao i iz HTML sa dopunama, ali sa osnovnom namerom da se razlikuje od predhodnih verzija. Budući razvoj pod okriljem IETF-a je prekinut zbog sukoba interesa.

Od 1996 godine HTML specifikacija je održavana, 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 počinje sa radom na HTML5. Ovom projektu se uz W3C priključila i WHATWG (Web Hypertext Application Technology Working Group) 2007 godine. Mnogi su mislili da će WHATWGnestati kao samostalna organizacija, ali se zadržala kao takva i nastavila rad na specifikaciji HTML 5. Trenutno postoje dve paralelne verzije HTML 5, jedna službena na kojoj radi W3C i neslužbenu na kojoj rade stručnjaci 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 znači da grupe međusobno sarađuju 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 počeo sam da razvija HTML5-icu, može se reći da je HTML5 proizvod saradnje W3 Konzorciuma i WHATWG. HTML5 je još uvek u fazi razvoja, tako da njegovu standardizaciju možemo očekivati 2014 godine, po procenama W3 Konzorciuma. Kao peta verzija HTML-a osnovni cilj je bio unapredjenje ovog jezika, kao i podrška za najnovije multimedijalne sadržaje, a pri tome je cross-platform, tako da nije bitno da li koristite tablet, smartphone, netbook ili Smart TV, bitno je da vaš pretraživač podržava 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 počeli zajedničku saradnju. Tako da se HTML5 može smatrati mešavinom karakteristika i specifikacija HTML-a i XHTML-a.

HTML5

5

Ovome je doprinela zajednička praksa, kao i mnoge greške u postojećim web dokumentima, ovo je takodje i pokušaj da se definiše jedinstveni markup jezik, koji se može pisati i u HTML-u i u XHTML-u.Ovo uključuje detaljne procesne modele da bi ohrabrilo još interoperabilnih implementacija. To proširuje, unapredjuje i racionalizuje označavanje dokumenata, kao što je omogućen 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 možemo a da ne pomenemo integraciju SVG (Scalable Vector Graphics) sadržaja, koji zamenjuje upotrebu object taga. Ove inovacije olakšavaju rukovanje multimedijalnim i grafičkim sadržajem na web-u bez dodatnih plugin-ova i API-a. Neki od elemenata su promenjeni, neki izbačeni, sve u cilju pojednostavljenja organizacije structure dokumenta.

4. Osnovni principi

Na razvoju HTML5 pored pokretača projekta, uključeni su i stručnjaci iz svih većih pretraživača, da bi svojim iskustvom i znanjem doprineli boljem i uspešnijem razvoju. Neke od ideja i principa kojima se vode ljudi koji učestvuju 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 grešaka Više tagova koji bi zamenili skripte HTML5 bi trebalo da ne zavisi od uredjaja na kome se koristi Proces razvoja treba biti dostupan javnosti

HTML5

6

5. Novi elementi i karakteristike

HTML 5 je definitivno standard koji će prilično brzo promeniti pogled na Internet, doprineti lakšem i bržem razvoju ozbiljnih aplikacija, omogućiti apsolutnim početnicima 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 preslušavanje audio fajlova na web strain. Danas se većina audio fajlova preslušava preko plugin-ova (Flash), tako da svaki od pretraživača može imati različite. HTML5 kao jednu od novina sadrži 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 mogućnost regulisanja jačine zvuka. Između krajnjih tagova nije na odmet staviti tekst kojim će korisnici biti obavešteni ukoliko njihov pretraživač ne podržava <audio> element. <audio> element omogućava elemente sa različitih izvora, <source> element nam omogućava da naši audio fajlovi budu na različitim lokacijama, a pretraživač će otvoriti prvi format koji podržava. Na slici 1 je prikazana realizacija audio elementa.

Slika 1. Audio element – Google Chrome

HTML5

7

Video

Kao i sa audio elementom, isti je slučaj 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 pretraživače. Podrška za ovaj element je u razvoju, tako da ga ne podržavaju svi pretraživači još uvek, ali se radi na tome. Najveći problem je u usaglašavanju formata. HTML 5 podržava .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 loše navesti širinu i visinu videa koji će se prikazati u pretraživaču, kako bi prilikom učitavanja pretraživač rezervisao proctor. Izmedju krajnjih elemenata možemo navesti tekst koji će se korisnicima prikazati u koliko njihov pretraživač ne podržava video element. Na slici 2 je prikazana realizacija video elementa.

Slika 2. Video element – Google Chrome

HTML5

8

5.2 Grafika

Do nedavno, web programeri su bili ograničeni 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, više nema potrebe za ovim. Čak šta više sad imamo i nove mogućnosti, nove funkcije koje možemo 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 izvršavaju. JavaScript “engines” su postali dovoljno brzi za pokretanje 3D igara i za manipulaciju videom u realnom vremenu. Programer iskorišćavaju ove olakšice, poplava HTML grafičkih radova se pojavljuje na web-u, od implementacije starih 2D grafičkih 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, kontrolišemo 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 početnom tagu navodimo njegov id, kao i dimenzije Canvas elementa kojim manipulišemo. Kako Canvas element nema crtačkih sposobnosti, za to se koristi

HTML5

9

JavaScript. U skripti navodimo oblike ili putanje koje želimo da iscrtamo, obojimo, kao i druga podešavanja za naše grafičke 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. Omogućava kompatabilnim pretraživačima prikaz interaktivnih 3D animacija. Sastavni je deo Canvas elementa koji omogućava 3D kompjutersku grafiku bez korišćenja plugin-ova, pristupa mu se preko DOM interfejsa. WebGL je zasnovan na OpenGL ES 2.0 i omogućava 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, definiše i grafiku u XML format. SVG grafika ne gubi na kvalitetu u koliko se zumira ili promeni veličina. Svaki element i atribut se može animirati. SVG saradjuje is a ostalim W3C standardima kao što su DOM i XSL. Evo jednostavnog primera koda:

HTML5

10

<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 možemo imati funkcionalnu sličicu kruga, na čijoj površini, klikom miša dobijamo alert poruku “Hello”. Na slici 4 je prikazana realizacija koda.

Slika 4. SVG

5.3 Aplikacije

HTML 5 je na ovom polju učinio ozbiljan pomak i stvaranje web aplikacija učinio lakšim nego ikad. Buduće web aplikacije odlikovaće se nekim od sledećih karakteristika:

Lokalno skladištenje podataka Lokalni pristup fajlovima Lokalna SQL baza podataka Aplikacije sa keširanjem podataka JavaScript “radnici” (workers) XHTMLHttpRequest 2

HTML5

11

Lokalno skladištenje podataka

Od samog početka Web pretaživač je bio namenjen da bude klijent u najosnovnijem smislu reči. Trebao je da prikazuje informacije koje je preuzeo sa udaljenog servera i ne bi radio ništa osim onoga što mu server govori da radi. Programeri su veoma brzo otkrili ova ograničenja pa su obezbedili i mogućnost da se nešto podataka ostavi i sa strane. Nakon toga kreatori su ovom tekstu dali zanimljiv naziv, „kolačić“, ali ni to nije rešilo problem. Kolačići su došli u centar pažnje kada je javnost počela da se pita kako je moguće pratiti svaki njihov potez. Nakon toga korisnici su zatražili mogućnost brisanja kolačića koju su na kraju i dobili što je ograničilo mogućnosti programerima. Na kraju su nastali problemi sa specifikacijama. Kolačići se nisu skladištili samo u računaru – oni su bili slati nazad do servera.

Napredni Web programeri znaju da nema nikakve svrhe od korišćenja većine od tih 4.096 bajtova zbog toga što prihvatanje suviše velike količine podatka dovodi do velikih troškova ali i zagušenosti. Tim koji stoji iza HTML5 standarda odabrao je da reši ove probleme i dizajnira osnovu za konačnu pobedu sofvera baziranog na pretraživaču pružajući JavaScript programeru mogućnost da uskladišti praktične količine podataka na lokalnom računaru.

To jednostavno može biti cache ali može biti i mnogo više. Napredniji programeri mogu omogućiti korisnicima da lokalno uskladište svoje Web strane, podržavajući poslednju veliku karakteristiku desktop softvera pružajući pristup disku pa tako više nema potrebe za instaliranjem bilo kakvog softvera.

HTML5 Web skladištenje i sesija skladištenja je najjednostavniji nivo Web skladištenja koji skladišti podatke za trenutnu sesiju – drugim rečima, sve dok je tab pretraživača ili prozor otvoren. Ovo možda i nije najbolje rešenje budući da specifikacije ostavljaju otvorenu mogućnost pretraživaču da sačuva 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 sličan sessionStorage objektu ali se ponaša potpuno drugačije. Tamo gde sessionStorage zaboravlja, localStorage pamti. Podaci bi trebalo da budu sačuvani čak i nakon što se prozori zatvore i računar isključi.

HTML5 sa sobom donosi veliki broj mogućnosti ali i veliki broj odluka koje dizajneri pretraživača moraju da donesu. Tek tada će korisnici moći da odrede koje su to karakteristike koje su im neophodne, koji je nivo privatnosti i fleksibilnosti koji im odgovara kao i koji je to način na koji se Web efektivno može koristiti. Ipak, odgovori na sva ova pitanja predstavljaju daleku budućnost.

Lokalni pristup fajlovima

HTML5 konačno pruža standardan način za interakciju sa lokalnim fajlovima, uz pomoć File API specifikacije. Kao primer svojih mogućnosti, File API se može upotrebiti za pregled neke slike dok se ona šalje serveru, ili da dozvoli aplikaciji da sačuva referencu fajla dok je korisnik offline. Može se koristiti logika sa strane korisnika (client-side logic) za proveru poklapanja ekstenzije upload-ovanog fajla ili da se ograniči veličina fajla koja se može upload-ovati.

Specifikacija pruža nekoliko interfejsa za pristupanje lokalnim fajlovima: File – individualni fajl; pruža nam informacije kao što su ime, veličina, referenca do file

handle-ra. FileList – niz-kao sekvenca File objekata. Blob – Dozvoljava deljenje fajla na bajtove.

HTML5

12

Kada se koristi u kombinaciji sa gore navedenim strukturama podataka, FileReader interfejs se može koristiti za asinhrono čitanje fajlova kroz poznate JavaScript „rukovaoce“ (handlers)dogadjajima. Dakle, moguće je nadgledati proces čitanja, „hvatanje“ grešaka i prekinuti kada se učitavanje završi. Ovaj API na mnogo načina podseća na XMLHttpRequest model događaja.

Evo deo koda koji proverava da li naš pretraživač podržava 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 keširanjem podataka

Od sve većeg značaja je dostupnost web aplikacija kada smo offline. Svi pretraživači imaju svoje mehanizme za keširanje, ali oni su nepouzdani i neće raditi onako kako želimo. Sa ApplicationCache interfejsom HTML 5 pokušava da reši neke neprijatnosti koje se mogu desiti kada smo offline.

Korišćenje keš interfejsa nam pruža tri prednosti:

Offline pretraživanje – korisnici se mogu kretati po vašoj stranici iako su offline. Speed – keširani podaci su sačuvani na lokalnom disku, tako da se učitavaju brže. Smanjenje opterećenja server – pretraživač skida samo podatke koji su se promenili.

AppCache omogućava programerima da odrede koje fajlove će pretraživač keširati, a koje ne, za njihovu dostupnost kada je korisnik offline. Aplikacija će se učitati i raditi kako treba, čak iako korisnik osveži stranicu.

JavaScript “radnici” (workers)

Web Workers je JavaScript skripta definisana od strane W3C i WHATWG koju izvršava HTML strana u pozadini, nezavisno od ostalih user-interface skipti koje se takodje mogu izvršavati 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 miša ili druge interakcije korisnika. Neprekidanje rada JavaScript “radnika” od strane korisničkih aktivnosti omogućava web stranama da ostanu dostupne u trenutku izvršenja dugih procesa u pozadini. Najjednostavnija primena je u tome da se izvršavaju zahtevni procesi u pozadini bez prekidanja korisničkog interfejsa. W3C i WHATWG trenutno rade na definisanju API-a za web “radnike”.

HTML5

13

XHTMLHttpRequest 2

XMLHttpRequest je API dostupan u jezicima za pisanje skripti za web pretraživače kao što je JavaScript. Koristi se za slanje HTTP ili HTTPS zahteva direktno web serverima, čiji se odgovori vraćaju u skriptu. Podaci sa server se mogu primiti kao XML ili običan tekst. Podaci iy odgovora se mogu direktno koristiti u DOM-u trenutno aktivnog dokumenta u prozoru pretraživača bez učitavanja 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, može 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 dinamičkih web aplikacija. Kao primer primene su aplikacije kao Gmail, Google Maps, Facebook i mnoge druge.

XMLHttpRequest 2 je novi pokušaj da se definiše bolja specifikacija XMLHttpRequest. Ovo je još uvek nacrt specifikacije i biće potrebno mnogo truda dok se ne smatra potpunom. Ali i sada sadrži mnoge aspekte koji su vredni komentara.

5.4 Forme, strukturni i semantički elementi

Za početak priče je najbolje pogledati strukturu nove HTML 5 stranice. Bez dodatnih klasa i objekata.

Slika 5. Struktura stranice

HTML5

14

Novi strukturni elementi

<header>

Header element sadrži informacije o sekciji ili stranici. Tu možete staviti sve, od osnovnih informacija (logo,delatnost,kontakt) do cele tabele sadržaja.

<header> <h1>Dobrodošli na Moj WebSajt</h1> <p>Sve što Vas zanima o webu na jednommestu</p></header>

<nav>

Nav element je rezerviran za deo dokumenta koji sadrži linkove prema drugim stranicama iliodredjenim 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 sličan <div> elementu i koristi za definisanje odredjenih delova strane kao što su vesti i reklame.

<section> <h1>W3C</h1> <p>Organizacija koja definiše standardie na internetu</p></section>

HTML5

15

<article>

Article element predstavlja deo stranice gde se nalaze stvari kao što su članci, komentari ili sličan sadržaj.

<article> <h3>HTML5 tehnologija budućnosti</h3> <p>Vreme je da se upoznate sa novinama...</p></article>

<aside>

Predstavlja sadržaje vezane uz glavno područje dokumenta. Obično sadrže elemente kao što su povezani članci, tag oblaci,citati itd.

<aside> <h4>Web Sajt</h4> Neophodan u današnjemem poslovanju...</aside>

<footer>

Footer element služi za označavanje podnožja strane, ne samo trenutne stranice, već svakog dela te stranice. Dakle, vrlo verovatno da ćete koristi element <footer> više 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 način, to je istina. Ali razlika je u tome što elemente kao što su <header/> i <footer/>možete koristiti više puta na jednoj stranici gde se oni ponašaju više kao klase i drugi HTML elemenati koje možete 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 korišćenja ovih strukturnih elemenata je uglavnom zbog činjenice da su vrlo dobro definisani i pružaju sjajan način za strukturu dokumenta.

HTML5

16

Forme

Tokom izrade web stranica samo pravljenje forme nikada nije bio problem koliko validacija unešenih 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, međutim, sa brzom ekspanizijom broja korisnika interneta i tolikom količinom online servisa, forme su postajale sve korišćenije.

Danas, na primer, po registraciji na neku od drštvenih mreža očekuje vas par dodatnih koraka i popunjavanje na desetine podataka. Ti podaci uglavnom su različitog tipa, počev od imena i prezimena, potom mail adrese, web sajta, pa sve do datuma rođenja, omiljene boje itd. Najčešće korišćena komponenta web formi bila je textbox koja je mogla imati jedno jedino ograničenje, maksimalni uneti broj karaktera. A bilo ih je potrebno mnogo više. Samo oni koji su pisali skripte za pomenutu validaciju podataka u formama znaju koliko je to zamoran posao.

HTML5 donosi pregršt novih tipova elemenata u web formama i u mnogome olakšava njihovu validaciju. Bez velike potrebe za javascript-om, regularnim izrazima ili CSS validacijom sada ćete moći da pravite složene, 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 podršku HTML5 formama ima Opera, mada iz Microsoft-a najavljuju da će u sledećoj verziji Internet Explorer-a akcenat biti baš na HTML5 standardu. Zato, primeri i screenshot-ovi koji slede biće iz Opere (verzija 11).

Za početak, data je jednostavna forma za unos osnovnih podataka o osobi. Verujem da već prvim pogledom na zaista kratak kod, zaključujete gde su napravljene ključne promene. To je atribut type. Očigledno da sada za unos svih najpotrebnijih informacija imamo posebne tipove: name, email, url, tel. Pored ovoga, za prvo polje, primećujete atribut placeholder, čija je namena da postavi dodatne informacije koje se klikom na polje gube (najčešće informacije koje pomažu korisniku u slučaju nedoumica kod unosa).

HTML5

17

Slika 6. Novi Form elementi, Opera 11

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

autofocus/><br /><label for”email”>Email:</label><input type”email” name=”email” id=”email” id=”email” required/><br /><label for=”url”>Your URL:</label><input type=”url” name=”url” id=”url” /><br /><label for=”phone”>Telephone:</label><input type=”tel” name=”phone” id=”phone” required/>

<form>

Samim navođenjem tipa polja, oslobodili smo se potrebe za proverom validnosti podataka. Ipak, da bi bili sigurni da li su podaci uopšte uneti, potrebno je da pored svih polja koja su zahtevana stavimo ključnu reč required. U slučaju da korisnik proba da uradi submit forme a da pritom nije uneo neki od obaveznih podataka biće mu prikazano upozorenje “This is a required field”. Isti je slučaj kada su uneti podaci neispravni npr. neisprvana email adresa, “Please enter a valid email adress”.

Slika 7. Ključna reč "required"

HTML5

18

Dalje, navedeni su primeri za tipove number, range, color i primer za kombinaciju elementa tipa text sa listom ponuđenih mogućnosti. U elementimu tipa number nije moguće uneti nijedan drugi karakter osim cifre. Posebno, ukoliko su vrednosti ograničene između minimalne i maksimalne nije moguće izaći van tog okvira. Pre definisanja novog standarda, za ovako nešto bilo vam je potrebno mnogo dosadnog i uvek istog programiranja. Komponentarange služi za intuitivniji odabir vrednosti između 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; white-space: normal;">

</span></span>

Detalj na koji treba obratiti pažnju je prikaz trenutne vrednosti elementa range. U okviru elementa brojčani prikaz nije obezbeđen, a kako imam utisak da je to potrebno zbog preciznijeg određivanja vrednosti, odvojio sam nekoliko minuta i napisao par linija javascript koda kako bih to omogućio:

<script> var rangeValue = document.getElementById("rangeValue");

var devExperienceRange = document.getElementById("experienceRange");

devExperienceRange.onchange = function() {

rangeValue.innerText = this.value; } rangeValue.innerHTML = devExperienceRange.value;

</script>

HTML5

19

Atribut list sa navedenim imenom u okviru običnog tekst elementa, omogućiće vam da kroz tag datalist ponudite korisniku izbor jedne od opcija. Bitno je napomenuti da korisnik ukoliko to želi može uneti vrednost različitu od ponuđenih. 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.

HTML5

20

U okviru priče o formama ostalo je da pomenemo nekoliko tipova koji se odnose na unos datuma i vremena na različite načine. Svaki od načina 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="2011-01-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 najvažnijih CSS3 modula su:

Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface

HTML5

21

6. Podrška pretraživača

U ovom poglavlju ćemo videti koji nivo podrške za HTML 5 nam pružaju najpopularniji web pretraživači. HTML 5 se veoma brzo menja i web pretraživači podržavaju sve veći broj njegovih funkcionalnosti. U sledećoj tablici je prikazana trenutna podrška web pretraživača za HTML 5.

Slika 10. Podrška web pretraživača

Mnoge nove funkcionalnosti HTML-a 5 imaju veliku podržanost ili implementacije bazirane na web pretraživačima. Poznavanjem korisnika Interneta i mogućnosti njihovih web pretraživača je značajan faktor prilikom odluke kada iskoristiti specifičnu funkcionalnost HTML-a 5. Kako se specifikacija HTML-a 5 svakodnevno menja i dopunjuje tako i web pretraživači prate tu promenu i pružaju podršku za rad sa HTML-om 5. Kako bi ostali u korak sa tim promenama u nastavku teksta su navedene web stranice na kojima se možemo detaljnije upoznati sa podrškom web pretraživači prema HTML-u 5.

-http://fmbip.com/Ovde se može videti podrška za konkretne funkcionalnosti HTML-a 5 kao i CSS-a. Testovi ne obuhvataju sve novine kao nek, ali radi dobar posao testirajući i Macintosh web pretraživače.

-http://samples.msdn.microsoft.com/ietestcenter/Ova Microsoft-ova web stranica je jedan od najboljih centara za uporedjivanje podrške web pretraživačaza HTML 5. Ovde se uporedjuju buduće verzije Internet Explorera sa ostalim web pretraživačima. Nivo detalja, nad kojima se testiranja vrše, je na visokom nivou.

-http://caniuse.comOvde možemo filtrirati rezultat i videti listu web pretraživača baziranu na našoj pretrazi. Bilo koju kategoriju da smo izabrali imali bi smo dodatne linkove na probne (eng. demo) web stranice, članke i test stranice sa odgovarajućim funkcionalnostima.

-http://html5test.comUkoliko želimo testirati naš trenutni web pretraživač, to možemo uraditi posetom ove web stranice. Ova web stranica će rangirati vaš web pretraživač na osnovu podrške za HTML 5.

HTML5

22

7. Zaključak

HTML 5 je još uvek u fazi razvoja, što znači 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 pretraživača: 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 uključio i Microsoft.

Premda će verovatno proteći dosta vremena do konačnog donošenja novog standarda za kreiranje web stranica, uticaj HTML-a 5 na razvoj Interneta već je i danas značajan. Youtube je već dostupan u HTML 5 obliku, a njegov primer slede sve brojnije web stranice posebno one koje korisnicima nude video sadržaj. Kompanije kao što su Google, Apple i Microsoft već pružaju podršku za HTML 5 u svojim klasičnim i mobilnim pretraživačima. Očekuje se da će se u nekoliko narednih godina konačno definirati standard za kreiranje web stranica i načina njihovog pregleda od strane korisnika.

Jedan od glavnih razloga zbog kojih je HTML 5 preuzeo vodeću ulogu od XHTML jezika u kreiranju sadržaja na Internetu je, osim činjenice da omogućava povećanu efikasnost, i da podržava kompatibilnost s prethodnim verzijama HTML-a. To znači da bilo koji pretraživač koji podržava HTML 5 dokumente, takođe podržava i dokumente napisane u bilo kojoj prethodnoj verziji HTML-a, što je vrlo značajno s obzirom da na Internetu postoji vrlo veliki broj ovakvih dokumenata.

HTML5

23

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.