html5

1. Novi doctype

Još uvek koristite ovaj dosadan, i teško pamtljiv XHTML set instrukcija (doctype - instrukcije za pretraživače)? <!DOCTYPE html PUBLIC "-/ /W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> Zašto? Prebacite se na novi HTML5 doctype. Biće Vam mnogo lakše. <!DOCTYPE html> U stvari, da li ste znali da  i nema potrebe za HTML5? U upotrebi je samo zbog sadašnjih i starijih pretraživača koji traže određeni tip doctype-a. Pretraživači koji ne razumeju određeni doctype će jednostavno potražiti kod u standardnom modu. Zbog toga se slobodno opustite i prihvatite HTML5! Pogledajte zašto baš HTML5! 

2. Element - figure

Ovo je kod za sliku:<img src="path/to/image" alt="About image" /> <p>Image of Mars. </p>Nažalost, ne postoji lak ili smenatički način da se naziv, stavljen u tag za paragraf, spoji sa samm slikom kao posebnim elementom. HTML5 rešava ovaj problem uvodeći u upotrebu elemenat <figure>. On, u kombinaciji sa <figcaption> elementom, semantički spaja naslove sa odgovarajućom slikom.

3. Redefinisani elemenat <small>

Elemenat <small> je dobio mnogo više odgovarajuću ulogu, a odnosi se na mala slova. To se, recimo, odnosi na izjavu o pravima (copyrights) u dnu Vašeg sajta. Prema novoj HTML5 definiciji, <small> će biti upotrebljen kao omot za ovu informaciju.

4. Nema više Types za skripte i linkove

Sigurno i dalje dodajete atribut Type svojim tagovima za skripte i linkove.<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" /> <script type="text/javascript" src="path/to/script.js"></script>Ovako nešto više nije potrebno. Oba ova taga se odnose na stylesheets i scripts, respektivno. Zbog toga, slobodno možemo da uklonimo atribut Type.<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>

5. Navodnici ili ne?

To je pitanje. Zapamtite, HTML5 nije XHTML. Nemate potrebu da stavljate atribute pod navodnike ako ne želite. Ne morate da zatvarate elemente. Nema ništa pogrešno ukoliko to ipak radite, ako se tako bolje osećate.<p class=myClass id=someId> Start the reactor.Odlučite sami šta Vam se više dopada. Ukoliko više volite struktuirana dokumenta, držite se navoda.

6. Neka Vaš sajt bude pogodan za izmene

Novi pretraživači imaju divan novi atribut koji se može primeniti na elemente, a on se zove contenteditable. Ovim se korisniku omogućava da menja tekst koji se nalazi unutar elementa, uključujući i njegovu decu. Postoji više načina za tako nešto, uključujući i aplikacije sa prostim listama šta treba uraditi:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>untitled</title>
  6. </head>
  7. <body>
  8. <h2> To-Do List </h2>
  9. <ul contenteditable="true">
  10. <li> Break mechanical cab driver. </li>
  11. <li> Drive to abandoned factory
  12. <li> Watch video of self </li>
  13. </ul>
  14. </body>
  15. </html>

7. Email

Ako primenimo type "email" pretraživaču poručujemo da isključivo dopušta validne imejl adrese. Baš tako! Forma za validaciju će uskoro postojati! Ne možemo se 100% osloniti na ovo, iz očiglednih razloga - u starijim pretraživačima koji ne razumeju "email" type sve će se odvijati kroz regularni text box. Treba naglasiti da se pretraživači poprilično razlikuju kada je reč o tome koje atribute i elemente podržavaju. Na primer, Opera podržava imejl validaciju ukoliko je specificirano ime (name) atributa. Sa druge strane, ne podržava atribut "placeholder". Zaključak je da se ipak još ne možemo pouzdati u validaciju formulara.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>[caption id="" align="aligncenter" width="464"] Pretraživači različito podržavaju inovacije, ali sasvakim novitetom, HTML5 je sve više podržan![/caption]

8. Placeholders - plejsholderi

Ranije smo morali da upotrebljavamo JavaScript kako bismo imali plejsholdere u poljima. Naravno, uvek možete da postavite atribut "value", međutim, čim korisnik obriše tekst iz polje, ili klikne negde drugde, unos će nestati. Atribut "placeholder" ispravlja ovaj nedostatak. Naravno, kao i prethodno, pretraživači tek u naznakama počinju da podržavaju ovaj atribut, međutim, to sve uzima zamaha sasvakim novitetom koji se pušta na tržište.<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

9. Lokalno spremište

Zahvaljujući lokalnom spremištu, napredni pretraživači "pamte" šta kucamo, čak iako se zatvore ili osveže stranice. Iako ovu opciju ne podržavaju svi pretraživači, sasvim je izvesno da je možete susresti na Internet Exploreru 8, Safariju 4, i Firefox-u 3.5. Što se tiče starijih pretraživača koji ne prepoznaju lokalno spremište, prvo treba da utvrdite da li postoji window.localStorage.

10. Semantički heder i futer (header i footer)

Ovo su davno prošli dani:<div id="header"> ... </div> <div id="footer"> ... </div>Divovi, sami po sebi, nemaju semantičku strukturu, čak i kad se primeni "id". Uz primenu HTML5 imamo pristup elementima hedera i futera. Sada, kod odgore, može biti zamenjem sledećim kodom:<header> ... </header> <footer> ... </footer> Pokušajte da ne mešate ove elemente sa hederom i futerom Vašeg web sajta. Prosto se odnose na sadržaj. Kao takvi, imaju svoju svrhu kad se radi o meta informacijama koje se nalaze na dnu posta na blogu, u okviru elementa "footer". Isto se odnosi na heder.

11. hgroup

Zamislite da u hederu Vašeg sajta stoji naziv sajta, kojeg odmah potom prati podheder. Iako možemo da koristimo <h1> i <h2> tagove, respektivno, kako bismo napisali kod, i dalje ne postoji (u HTML4) jednostavan način da semantički ilustrujete odnos između njih. Štaviše, upotreba h2 taga još više stvara probleme u pitanju hijerarhije kada je potrebno prikazati još naslova (hedera) na stranici. Upotrebom "hgroup" elementa, možemo zajedno grupisati ove hedinge bez ikakvog remećenja spoljnog izgleda.<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>

12. Atribut required

Formulari dozvoljavaju upotrebu atributa required, koji ukazuje na to da li je određeni sadržaj nužno uneti ili ne, odnosno, da li određeno polje u formularu mora biti popunjeno.

Ovaj kod možete napisati na dva načina:

<input type=„text“ name=„someInput“ required>

ili mnogo više strukturisanim pristupom:

<input type=„text“ name=„someInput“ required=„required“>

Bilo koji od ova dva načina je u redu. Uz ovaj kod, pretraživači koji podržavaju ovaj atribut neće prihvatiti formular u kojem nisu popunjena zahtevana polja.

13. Atribut autofocus

HTML5 otklanja potrebu za upotrebom rešenja koja uključuju Java Script-u. Ako određeni unos treba da bude selektovan, tj. fokusiran, automatski možemo da iskoristimo ovaj atribut autofocus.

<input type=„text“ name=„someInput“ placeholder=„Douglas Quaid“ required autofocus>

14. Audio podrška

U budućnosti neće biti potrebe da se solanjamo na eksterne dodatke kako bismo mogli da imamo zvuk. HTML5 sada nudi elemenat audio, pomoću kojeg ćemo moći da zaboravimo na pluginove. Za sada, tek neki pretraživači nude mogućnost korišćenja ove opcije HTML5. Za sada je dobro još uvek ponuditi neku opciju radi kompatibilnosti, ukoliko pretraživači još uvek ne pružaju podršku.

<audio autoplay=„autoplay“ controls=„controls“>
<source src=„file.ogg“ />
<source src=„file.mp3“ />
<a href=„file.mp3“>Download this file.</a>
</audio>

Mozilla i Webkit još uvek ne podržavaju ovu audio opciju. Firefox će tražiti .oog falj, a Webkit običnu mp3 ekstenziju. To znači da morate, bar za sada, da kreirate dve verzije za reprodukovanje zvuka.Prilikom učitavanja stranice Safari neće prepoznati .oog format i odmah će preći na mp3. Imajte na umu da IE ne prepoznaje ove formate uopšte, kao ni Opera 10 i niže, te da oni rade sa .waw fajlovima.

Uz HTML5 neće biti potreban Fleš za pregled videa na Jutjubu.

15. Video podrška

Baš kao i za audi, HTML5 ima i opciju za video elemenat. Štaviše, ZouTube je nedavno objavio novi HTML5 dodatak za video, za pretraživače koji podržavaju HTML5. Nažalost, pošto HTML5 ne utvrđuje tačne kodeke potrebne za video, to je ostavljeno pretraživačima da sami odrede. Očekuje se da Safari i IE9 podržavaju video u formatu H264 (koje mogu da puštaju Fleš plejeri) Firefox i Opera se drže otvorenog izvora, Teora (Theora) i Vorbis formata. Zato kad puštate HTML5 video, morate da specificirate oba formata.

<video controls preload>

<source src=„cohagenPhoneCall.ogv“ type=„video/ogg; codecs=’vorbis, theora'“ />

<source src=„cohagenPhoneCall.mp4“ type=„video/mp4; ‘codecs=’avc1.42E01E, mp4a.40.2′“ />

<p> Your browser is old. <a href=„cohagenPhoneCall.mp4“>Download this video instead.</a> </p>

</video>

Ovde vredi spomenuti par stvari:
1. Od nas se ne traži da odredimo tip atributa, no ukoliko to ne učinimo, pretraživač će morati sam to da uradi. Zato to jednostavno napravite sami.
2. Ne prepoznaju svi pretraživači HTML5 video. Ispod source elemenata, možete da ponudite link za download, ili da ponudite dodatno i Fleš verziju video, umesto datog. Na Vama je da odlučite.

16. Predučitavanje videa

Atribut preload služi za predučitavanje video sadržaja. Na Vama je da odlučite da li želite da pretraživač unapred učita video. Da li je to potrebno? Možda, ukoliko je posetilac došao na takvu web stranicu na kojoj je primaran video sadržaj. Uz uključenu opciju preload, uštedeli biste posetiocima vreme koje bi potrošili čekajući da se celokupan video sadržaj učita.

<video preload>

17. Prikaži kontrole

Ukoliko upotrebite samo kod iz prethodne tačke, video sadržaj će se pojaviti kao slike, bez prikazanih kontrola za manipulaciju video sadržajem. Kako bi se kontrole prikazale, morate ih odrediti unutar prethodnog koda:

<video preload controls>

Imajte na umu da svaki pretraživač drugačije procesira plejere.

 

Pretraživači različito podržavaju inovacije, ali sasvakim novitetom, HTML5 je sve više podržan!
Jovan Ivezic

E-business and internet marketing specialist.