Ko tad īsti mēs zinām par HTML5?

Kopš HTML4.01 standarta nākšanas klajā ir pagājuši vairāk kā 10 gadi. Šo gadu laikā Internets ir ievērojami mainījies. Sekojot līdzi Interneta tīmekļa pārlāku tendencēm, iespējams apgalvot, ka jaunais, nākamais, HTML standarts ir klāt, un tas ir HTML5. Jaunievedumi no HTML5 jau parādījušies tādos vadošos Interneta tīmekļa pārlūkos, kā, piemēram, Safari, Chrome, Firefox un Opera. Arī vēl klajā nenākušais Internet Explorer 9 atbalstīs atsevišķus tā jaunievedumus. Video un audio atskaņošanai līdz šim nav bijiuši vadošo uzņēmumu organizēti HTML standarti. Tagad tādi ir.

Video un audio

Vadošo Interneta tīmekļa pārlūku izstrādātāji nav vienojušies par vienu kodeku (saspiedatspiedēju) video atskaņošanai HTML5, tāpēc, lai apmierinātu vadošos Interneta tīmekļa pārlūkus, pārlūkos tiks iestrādāti divi video kodeku veidi. Vērtējot video kodeku iestrādāšanas gaitu, izskatās, ka ievērojamu pārsvaru negūs neviens no kodekiem, jo vienu, Ogg, izmanto Firefox, Opera un Chrome Interneta tīmekļa pārluki, savukārt otru, MPEG4, izmanto Safari un Chrome. Tuvākajā nākotnē, visticamāk, MPEG4 izmantos arī Internet Explorer Interneta tīmekļa pārlūks. Ja Internet Explorer izmantos abus — gan Ogg, gan MPEG4, tad Ogg gūs ievērojamu pārsvaru. Interneta tīmekļa pārlūku izstrādātāji nav arī vienojušies par vienu audio kodeku, tie bus trīs — Ogg Vorbis, MP3 un Wav.

Video un audio elementa piemērs:

Controls atribūts paredzēts atskaņošanas, pauzes un skaļuma vadībai. Vēl pieejami autoplay, height, width, loop, preload un src atribūti.

Jauni tagi un atribūti

HTML5 ir jauni tagi. No atbalsta pazūd: acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes, s, strike, tt, u, xmp. Jaunie tagi ir article, aside, audio, canvas, command, datalist, details, embed, fiqcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video u.c.

Jaunie atribūti:
contenteditable - norāda, vai lietotājam ļauts rediģēt saturu;
contextmenu - norāda context izvēlni elementam (specifies the context menu for an element);
data-tava_vērtība - HTML autors var definēt atribūtu pats;
draggable - norāda, vai lietotājam ļauts vilkt elementu;
hidden - norāda, ka elements nav nozīmīgs. Netiek attēlots;
item - izmanto, lai grupētu elementus (used to group elements);
itemprop - izmanto, lai grupētu priekšmetus (used to group items);
spellcheck - norāda, ka jābūt pārbaudītai pareizrakstībai;
subject - norāda elementa atbilstošo priekšmetu (specifies the element's corresponding item).

Jaunie event'i (notikumu apdarinātāji) body:
onafterprint - skripts tiks izpildīts pēc drukāšanas;
onbeforeprint - skripts tiks izpildīts pirms drukāšanas;
onbeforeonload - skripts tiks izpildīts pirms ielādējas;
onerror - skripts tiks izpildīts, kad notiks kļūda;
onhaschange - skripts tiks izpildīts, kad būs izmaiņas;
onmessage - skripts tiks izpildīts, kad ziņa tiks laista darbā (message is triggered);
onoffline - skripts tiks izpildīts, kad būs nesaiste;
ononline - skripts tiks izpildīts, kad būs tiešsaiste;
onpagehide - skripts tiks izpildīts, kad logs ir slēpts;
onpageshow - skripts tiks izpildīts, kad logs kļūst redzams;
onpopstate - skripts tiks izpildīts, kad logu vēsture mainās (window's history changes);
onredo - skripts tiks izpildīts, kad izpilda atcelšanu (performs a redo);
onresize - skripts tiks izpildīts, kad logs tiks samazināts vai palielināts;
onstorage - skripts tiks izpildīts, kad ielādējas;
onundo - skripts tiks izpildīts, kad izpilda atsaukšanu (performs an undo);
onunload - skripts tiks izpildīts, kad lietotājs pamet dokumentu (user leaves the document).

Jaunie event'i formām:
oncontextmenu - skripts tiks izpildīts, kad konteksta izvēlne tiks laista darbā (context menu is triggered);
onformchange - skripts tiks izpildīts, kad forma mainās;
onforminput - skripts tiks izpildīts, kad forma saņem lietotāja input;
oninput - skripts tiks izpildīts, kad elements saņem lietotāja ievadu;
oninvalid - skripts tiks izpildīts, kad elements ir neatbilstošs (invalid).
Onreset - nebūs vairs atbalsta.

Jaunie event'i pelei:
ondrag - skripts tiks izpildīts, kad elements tiks vilkts;
ondragend - skripts tiks izpildīts, kad vilkšana tiek pārstāta;
ondragenter - skripts tiks izpildīts, kad elements tiks aizvilkts līdz valīdam nomešanas mērķim;
ondragleave - skripts tiks izpildīts, kad elements pamet valīdu nomešanas mērķi;
ondragover - skripts tiks izpildīts, kad elements tiek vilkts virs valīda nomešanas mērķa;
ondragstart - skripts tiks izpildīts vilkšanas darbības sākumā;
ondrop - skripts tiks izpildīts, kad vilktais elements ir nomests;
onmousewheel - skripts tiks izpildīts, kad peles bumbiņa tiek rotēta;
onscroll - skripts tiks izpildīts, kad elementa ritjosla rit.

Jaunie event'i media saturam:
oncanplay - skripts tiks izpildīts, kad var sākt atskaņošanu, bet jāpārtrauc buferizācijas dēļ;
oncanplaythrough - skripts tiks izpildīts, kad iespējams nepārtraukt atskaņošanu līdz galam un nav jāpārtrauc atskaņošana buferizācijai;
ondurationchange - skripts tiks izpildīts, kad atskaņošanas ilgums mainījies;
onemptied - skripts tiks izpildīts, kad resurss atskaņošanai kļūst nepieejams (kļūda);
onended - skripts tiks izpildīts, kad sasniegts atskaņošanas gals;
onerror - skripts tiks izpildīts, kad rodas kļūda elementa lādēšanas laikā;
onloadeddata - skripts tiks izpildīts, kad dati atskaņošanai ielādēti;
onloadedmetadata - skripts tiks izpildīts, kad citi elementa media dati ir ielādēti;
onloadstart - skripts tiks izpildīts, kad pārlūks sāk lādēt datus atskaņošanai;
onpause - skripts tiks izpildīts, kad atskaņošana ir iepauzēta;
onplay - skripts tiks izpildīts, kad atskaņošana sāksies;
onplaying - skripts tiks izpildīts, kad atskaņošana notiek;
onprogress - skripts tiks izpildīts, kad pārlūks iegūst media datus;
onratechange - skripts tiks izpildīts, kad media datu atskaņošanas ātrums mainījies;
onreadystatechange - skripts tiks izpildīts, kad stāvoklis-gatavs mainās;
onseeked - skripts tiks izpildīts, kad meklējošais media elementu atribūts vairs nav true, un meklēšana ir beigusies (media element's seeking attribute is no longer true, and the seeking has ended);
onseeking - skripts tiks izpildīts, kad meklējošais media elementu atribūts vairs nav true, un meklēšana ir sākusies (media element's seeking attribute is true, and the seeking has begun);
onstalled - skripts tiks izpildīts, kad media dati aizkavējas (kļūda);
onsuspend - skripts tiks izpildīts, kad pārlūkam, iegūstot media datus, media faila iegūšana vairs nav iespējama (the browser has been fetching media data, but stopped before the entire media file was fetched);
ontimeupdate - skripts tiks izpildīts, kad tiks mainīta atskaņošanas vieta;
onvolumechange - skripts tiks izpildīts, kad notiks skaļuma maiņa vai tiks uzlikts klusums;
onwaiting - skripts tiks izpildīts, kad atskaņošana pārtraukta, bet sagaidāma atskaņošanas turpināšanās;

Grafikas zīmēšana

HTML ir ieviests jauns grafikas "zīmēšanas" elements. Saukts par canvas tagu (elementu), tas izmanto JavaScript, lai "zīmētu" grafiku. Pašam par sevi tam nav "zīmēšanas" pieejamība, tāpēc "zīmēšana" jāveic JavaScript tagos, izmantojot canvas tagu.

Canvas ir četrstūra virsma, kuras katru pikseli iespējams pārvaldīt.

Šis piemērs attēlos 200 px platu un 100px augstu četrstūri ar gradient'am norādītām krāsām:

Datu glabāšana par lietotāju

HTML5 piedāvā divas jaunas datu glabāšanas metodes par lietotāju:
1) localStorage - glabā datus bez laika ierobežojuma;
2) sessionStorage - glabā datus vienai sesijai.
Abos gadījumos jāizmanto JavaScript.

Minēto iespējams izdarīt arī ar cookies, tomēr lieliem datu apjomiem tie nav efektīvi, jo tiek padoti pēc katra pieprasījuma. HTML5 piedāvā nepadot šādus datus pie katra pieprasījuma, padodot infromāciju tikai tad, kad dati tiek pieprasīti. Citu mājaslapu datiem piekļūt nevar.

Piemērs, kurā uzskaita, cik reizes lietotājs ielādējis lapu:

Piemērs, kurā uzskaita, cik reizes lietotājs ielādējis lapu sesijā (kad mājaslapa tiek aizvērta, dati izdzēšas):

Jauni input tipi

Opera Interneta tīmekļa pārlūkam līdz šim ir plašākais HTML5 input tipu atbalsts. Jaunie input nodrošina labāku kontroli un validāciju. Jaunie input tipi ir email, url, number, range, search, color un Date pickers (date, month, week, time, datetime, datetime-local).

Jauni formu elementi

Opera Interneta tīmekļa pārlūkam līdz šim ir plašākais HTML5 formu elementu atbalsts. Jaunie formu elementi ir datalist, keygen un output.

Ieklikšķinot input laukā, datalist elements parāda izvēlnes sarakstu, no kura iespējams izvēlēties sev vēlamo opciju input laukā.

Piemērs:

Keygen elementa mērķis ir nodrošināt drošu veidu kā autentificēt lietotāju. Kad forma ir nosūtīta, tiek ģenerētas divas atlēgas - viena publiska, otra privāta. Privātā tiek saglabāta lietotājam, publiskā tiek nosūtīta glabāšani serverim. Publisko atslēgu iespējams izmantot, lai ģenerētu autentifikācijas sertifikātu lietotājam, izmantojot to nākotnē.

Pašreizējais interneta tīmekļa pārlūku atbalsts šim elementam nav tik pilnīgs, lai tas kļūtu par noderīgu drošības standartu.

Piemērs:

Output elements tiek izmantots dažādu tipu output'iem, piemēram, kalkulāciju un skriptu output'iem.

Piemērs:

Jauni formu atribūti

HTML5 ir jauni form un input tagu atribūti. Ar plašāko atbalstu šajā lauciņā pašlaik izceļas Interneta tīmekļa pārlūks Opera.

Autocomplete atribūts norāda, ka formai vai input laukam jābūt automātiskas aizpildīšanās iespējai.

Autofocus atribūts norāda, ka input laukam pēc lapas ielādes automātiski jātiek izceltam. Piemērs ir Google.

Form atribūts input tagā norāda, ka input tags pieder vienam vai vairākiem form tagiem.

Form override atribūti formaction, formenctype, formmethod, formnovalidate un formtarget ļauj, piemēram, input tagam pārrakstīt atribūtus, kas noteikti form tagā.

Piemēram:

Height un width atribūti norāda augstumu un platumu attēlam, kas izmantots input.

List atribūts padod datalist elementa opciju sarakstu input tagā.

Piemēram:

Min, max un step atribūti tiek izmantoti, lai veiktu ierobežojumus input laukos, kas satur ciparus. Max norāda maksimālo atļauto vērtību input laukā. Min norāda minimālo atļauto vērtību input laukā. Step norāda skaitļa intervālu (soli) input laukā, piemēram, ja step="3", tad atļautie skaitļi būs -3, 0, 3, 6, 9 u.t.t.

Multiple atribūts norāda, ka iespējams norādīt vairākas vērtības. Tas nozīmē, ka, izmantojot Browse, iespējams iezīmēt un padot vairākus failus. Šādas funkcijas vēl pašlaik nav tikai Internet Explorer un Opera.

Pattern atribūts norāda, kādam jābūt satura veidam (pattern), lai input validētos.

Piemēram:

Novalidate atribūts norāda, ka form vai input nav nepieciešamības validēties.

Placeholder atribūts piedāvā minējumu, kas apraksta, kam jābūt rakstītam input laukā.

Required atribūts norāda, ka input laukam jābūt aizpildītam pirms nosūtīšanas.



Uz doto laiku HTML5 vēl netiek ieteikts, jo Interneta tīmekļa pārlūku izstrādātāji nav paspējuši ieviest atbalstu lielāko daļu HTML5 standartu. Bet šis ir tas, kas sagaida mūs tuvākajos gados, un ne tikai šis.

Kā avots izmantota w3schools.com

Saistītie raksti

• Google piedāvā Swiffy – Flash satura pārveidotāju
• Google piedāvā Priority Inbox visiem, kuru tālruņi atbalsta HTML5
• Google atsakās no H.264 atbalsta Chrome pārlūkā
• Stīvs Džobs tiekas ar darbiniekiem
• Photoshop pamācība: Web 2.0 emblēma

Komentāri

#1 Bruno @ 2010.06.20 07:58

Labs raksts, paldies.

#2 bush @ 2010.06.20 08:39

Labs raksts

#12 dibenštekers @ 2010.06.20 23:44

nihuja nesapratu!