HTML5

Seminar

Sto je novo u HTML5?

Kada govorimo o HTML-u opcenito, vazno je znati da on kao takav nije jedna velika zatvorena cjelina. Teoretski svatko od nas moze kreirati svoj vlastiti HTML element. Kada nastane poveci broj korisnih elemenata koji nisu u sluzbenoj verziji, tada izlazi sluzbena verzija odobrena od strane organizacije W3C i ti elementi postaju sluzbeni. HTML5 je upravo to: HTML + n novih elemenata. Taj "n" nije mali, a HTML5 je u svakom slucaju dosljedan nasljednik HTML-a 4.01 kakvog smo do sada poznavali. Daleko najveci napredak ostvaren je u podrucju integracije multimedije. Neki od najznacajnijih novih elemenata su: <audio>, <video>, <canvas>, <header>, <footer>, <nav>, <section>, <article>, <aside> itd. Dodana je mogucnost odabira tipa unosa za <input> elemente. Pomocu navedenog mozemo tipom atributa specificirati da se radi o e-mail adresi ili naprimjer URL-u. Primjer velike prednosti je kod zaslona osjetljivih na dodir koji na temelju tipa unosa prikazuju prikladnu tipkovnicu. Jedna od zanimljivih mogucnosti je svakako i drag-and-drop. Poboljsano je i rukovanje pogreskama. Vazno je spomenuti i WebGL - JavaScript API za renderiranje 2D i 3D grafike koji je neizostavan u ovoj verziji HTML-a. HTML5 standard jos uvijek je u izradi, a ove godine (2014.) se ocekuje konacna verzija.

Canvas

Canvas je element (tag) unutar HTML-a 5 sa oznakom <canvas>. Predstavlja "rastersku povrsinu za crtanje ovisno o rezoluciji koja se moze koristiti za iscrtavanje grafova, grafike igara i drugih slika tokom izvrsavanja"(1). Drugim rijecima, to je pravokutnik u kojem mozemo crtati sve sto zelimo jer postoji definiran skup funkcija koje djeluju nad tim pravokutnikom (API crtace povrsine) za crtanje raznih oblika, definiranje staza, izradu prijelaza i ono sto je najbitnije za projektni dio rada: podrzava primjenu transformacija. Canvas uz video i geolokacijski tag predstavlja jednu od osnovnih razlika u odnosu na prijasnju verziju HTML-a. Temelj Canvasa je JavaScript jezik. Razvio ga je Apple i predstavio u verziji Safarija 1.3. Upravo zbog Canvasa, flash bi uskoro mogao postati povijest.

Podrska preglednika

Poznato je da preglednik prilikom iscrtavanja Web stranice konstruira Document Object Model (DOM) model objekata. Svaki element je u DOM-u predstavljen drukcijim objektom. Za provjeru podrzava li preglednik Canvas, postoje 4 osnovne tehnike prepoznavanja (1):

1. 1.  Provjera postoji li odredjeno svojstvo na globalnom objektu (kao sto je window ili navigator).
2. 2.  Izrada elementa i zatim provjeravanje postoji li odredjeno svojstvo na tom elementu.
3. 3.  Izrada elementa, provjeravanje postoji li odredjena metoda na tom elementu, pozivanje metode i provjeravanje vrijednosti koju vraca.
4. 4.  Izrada elementa, postavljanje svojstva na odredjenu vrijednost i zatim provjera je li svojstvo zadrzalo vrijednost.

Biblioteka Modernizr sluzi za prepoznavanje svojstava HTML5, pa tako i Canvasa. Dok ovo citate vjerojatno niste ni svjesni da ste tu biblioteku vec koristili, a rezultat jedne od njenih funkcija (Modernizr.canvas) vidljiv je u donjem lijevom kutu ekrana. Lijevi smile pokazuje podrzava li Vas preglednik Canvas, te ovisno o tome daje izraz lica. Sretan je samo ako je Canvas podrzan :). Desni smile pokazuje podrzava li preglednik Canvas text, odnosno odredjene nove funkcije za rad sa tekstom. Ukoliko preglednik ne odrzava Canvas, sigurno je da ne podrzava niti Canvas text, dok obrnuto ne vrijedi. Canvas podrzavaju Internet Explorer 9+, Firefox, Opera, Chrome i Safari.

Svojstva, rad sa slikom, tekstom i gradijentom

Element Canvas sam po sebi nije vidljiv, vec mu je potrebno dodati odredjena svojstva. Najmanje sto mozemo nacrtati unutar Canvasa je tocka, pravac, pravokutnik, krug i slicno. Za to postoje predefinirane funkcije (svojstva) kojima iscrtavamo i oblikujemo objekte, a neke od njih su (1):

1. - fillStyle - moze biti CSS boja, uzorak ili gradijent
2. - shadowColor - boja sjene objekta
3. - fillRect(x, y, sirina, visina) - crta pravokutnik ispunjen podrazumijevanim stilom
4. - strokeRect(x, y, sirina, visina) - kao fillRect, ali crta samo rub, bez ispune
5. - clearRect(x, y, sirina, visina) - brise piksele u zadanom pravokutniku

Vise o svojstvima na (3). Podrucje ispod ovog teksta je prazan Canvas element. Klikom na njegovu povrsinu pojaviti ce se FOI logo kao rezultat jednostavne funkcije. Rad sa slikom u Canvasu se temelju upravo na tom nacinu.

U nastavku cu se bazirati na elemente koji ce biti potrebni u projektnom dijelu rada. Prva stvar koja je nuzna svakako je koordinatni sustav. Kreiramo jos jednu crtacu povrsinu, ovaj puta dimenzija 500 * 500. U skripti pronalazimo element u DOM-u i uzimamo njegov kontekst crtanja. Ovdje u igru dolaze i staze (eng. Stage) koje su takodjer nova znacajka. Predstavljaju metodu "olovke", tj. svojevrstan predlozak koji ce konacno biti nacrtan tek kada upotrijebimo neku od metoda "tinte". Jedna od tih je stroke() metoda koja je koristena u ovom primjeru. Nakon sto nacrtamo sve sto zelimo, pozivamo tu metodu i dobivamo konacan rezultat. U PDF prezentaciji su dostupni dijelovi koda. Nakon sto je nacrtana mreza slijedi iscrtavanje koordinata. Dodajemo novu stazu, mijenjamo boju u crveno i iscrtavamo koordinatne osi. Dovoljna nam je jedna staza za obje koordinate. Tekst je takodjer obiljezje Canvasa, pa je primjenjen u imenovanju koordinatnih osi i oznavacanju tocaka.

Za kreiranje mreze koristene su dvije standardne metode, to su:

• 1.  moveTo(x,y) - pomice olovku na zadanu pocetnu tocku
• 2.  lineTo(x,y) - povlaci crtu do zadane zavrsne tocke

U radu sa tekstom, neke od metoda su:

• 1.  fillText(string,x,y) - postavlja tekst na zadane koordinate
• 2.  measureText(font, size, text) - mjeri sirinu teksta
• 3.  fontAscent(font, size) - velicina teksta uzlazno
• 4.  fontDescent(font, size) - velicina teksta silazno
• 5.  strokeText(string, xsize, ysize) - specijalni efekti
• 6.  fillStyle() - definira vrijednost odredjenog atributa

Vazno je primjetiti da se radi o koordinatnom sustavu gdje je ishodiste u gornjem lijevom kutu. U projektnom dijelu cu po potrebi racunati zaslonske koordinate. Gradijent je vec poznata tehnika u racunalnoj grafici, sada dostupna i u HTML-u. Razlikujemo linearne i gradijalne gradijente. U nastavku je primjenjen linearni gradijent. Kreiramo novi Canvas. Definiramo pocetnu tocku od kuda gradijent krece, u ovom slucaju (0,0) i do kuda ide. Kraj je definiran funkcijama canvas.width i canvas.height sto ustvari znaci "do kraja Canvasa".

Drag and Drop

Iako nije usko vezana za temu, ova tehnologija svakako privlaci pozornost i izaziva znatizelju. Prva stvar koja je u radu potrebna jest Kinetic biblioteka (5). Nakon toga definiramo funkciju u kojoj kreiramo kineticku stazu (prostor crtace Canvas povrsine) i kineticki sloj. Ta dva pojma su kljucna kako bi ova tehnologija radila korektno. Osim toga, neophodno je naravno dodati sliku koju zelimo pomicati, a definiramo ju takodjer kao kineticku. Nakon toga ju dodajemo na sloj, pa sloj na stazu i na taj nacin dobijamo privid pomicanja umjesto iscrtavanja po stazi. FOI logo je za ovu priliku moguce "drag-and-dropati".

Transformacije

Bitna stvar za projektni dio zadatka svakako su transformacije koje omogucuje HTML5. Translate omogucava da objekte pomicemo sa jednom jedinom metodom. Translacija ustvari radi na principu premjestanja konteksta i iscrtavanja na njemu nakon te radnje. Scale metoda skalira objekte za zadani x i y. Rotate rotira objekte za stupanj izrazen u radijanima. Custom Transform sluzi za transformacije putem 3x3 matrica. Shear koristi transform() metodu sa sx(nagib po osi x) i sy(nagib po osi y) parametrima. Mirror je zanimljiva funkcija koja zrcali pogled na objekt. Reset Transform koristi za usporedbu stanja prije i poslije transformacije. State Stack je stog na koji mozemo staviti sva stanja transformacija i uzimati zadnje stanje po potrebi. Oval objektima daje ovalni oblik. U primjeru koji slijedi koristene su translacija i rotacija. Prvo je objekt translatiran u ishodiste, pa rotiran za 45 stupnjeva i takvog ga iscrtavamo. Nakon toga slijedi ponistenje transformacije i postavljanje objekta crvene boje na "pocetno mjesto".

Animacije

Slijedi prikaz jedne naizgled jednostavne animacije u Canvasu (6). Vidimo da je Canvas stvarno razonodan i da nudi puno grafickih mogucnosti. Ova animacija mi se ucinila zanimljiva jer na temelju jedne slike koja sadrzi sve kutove gledanja stvara osjecaj da se kovanica rotira.

Zanimljiv je i primjer sa Matrix screenom (7). Unosi se poveci broj kineskih znakova kao string. Nakon toga se splita znak po znak. Izmedju ostalog, definira se velicina fonta, te ovisno o sirini canvasa racuna se i broj stupaca u kojima ce znakovi padati. Nakon toga se petljom prolazi kroz redove i ispisuju se znakovi.

Canvas vs SVG

Analizom karakteristika i jedne i druge tehnologije postavlja se pitanje, koji je bolji? Odgovor: ovisno o onome sto radimo. Postoje stvari u kojima je bolji Canvas, kao i one u kojima je bolji SVG. Usporedio bi to sa jednom drugom domenom - protokolima transportnog sloja u racunalnim mrezama. Ne mozete reci da je TCP protokol bolji od UDP-a ili obratno. Svaki ima svoju ulogu, tako je i kod navedenih grafickih tehnologija. Canvasu je temelj JavaScript, dok se SVG temelji na XML-u. SVG je i nesto stariji od Canvasa, tako da je trenutno dosta rasireniji. Canvas radi na principu "prikazi i zaboravi", dok SVG sve pamti u memoriji. Za 2D grafiku je bolji Canvas. Krucijalna razlika je u manipulaciji pikselima, koju SVG ne podrzava. Jos je vazno napomenuti da Canvas koristi rastersku grafiku, dok SVG koristi vektorsku grafiku. Slika u nastavku (4) pokazuje razlicite performanse u razlicitm podrucjima primjene.

Vidimo razlike koje ovise o broju objekata koji se renderiraju (bolji Canvas) i velicini podrucja renderiranja (bolji SVG). Na slici ispod (4) vidimo koja je tehnologija bolja za sto i moze nam dobro posluziti ukoliko se dvoumimo koju tehnologiju upotrijebiti. Sto se tice projektnog dijela, vidimo da u 2D grafici Canvas ima prednost.