28 HTML5 Stvari, Saveta i Tehnika Koje Morate Znati! III


28 HTML5 Stvari, Saveta i Tehnika Koje Morate Znati! III

13. 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.

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

15. 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.

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

17. 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>

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


Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest