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.

[b]Video un audio[/b]

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:

[img]/images/upload/20100619233412.png[/img]
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.

[b]Jauni tagi un atribūti[/b]

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 [i]true[/i], 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 [i]true[/i], 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;

[b]Grafikas zīmēšana[/b]

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 [i]gradient[/i]’am norādītām krāsām:

[img]/images/upload/20100619235645.png[/img]

[b]Datu glabāšana par lietotāju[/b]

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 [i]cookies[/i], 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:

[img]/images/upload/20100620000804.png[/img]

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

[img]/images/upload/20100620001035.png[/img]

[b]Jauni input tipi[/b]

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

[b]Jauni formu elementi[/b]

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:

[img]/images/upload/20100620002114.png[/img]

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:

[img]/images/upload/20100620003109.png[/img]

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

Piemērs:

[img]/images/upload/20100620004019.png[/img]

[b]Jauni formu atribūti[/b]

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.

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

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

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

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

Piemēram:

[img]/images/upload/20100620010012.png[/img]

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

[u]List[/u] atribūts padod datalist elementa opciju sarakstu input tagā.

Piemēram:

[img]/images/upload/20100620011015.png[/img]

[u]Min, max[/u] un [u]step[/u] 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.

[u]Multiple[/u] 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.

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

Piemēram:
[img]/images/upload/20100620011704.png[/img]

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

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

[u]Required[/u] 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 [url=http://w3schools.com/html5/default.asp]w3schools.com[/url]

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Atbildēt

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti kā *

Datuve.lv – IT un Tehnoloģiju ziņas || Copyright © 2004-2020 || Kontaktinformācija: info@datuve.lv  || Contact Us