În Tutoriale

Introducere în HTML5: Partea II

Ce este nou în HTML5?

Continuăm introducerea în HTML5 cu noutățile legate de formulare, conținut multimedia și grafică, precum și cu mai multe resurse utile pentru aprofundarea acestora.

Controalele existente pentru formulare au fost păstrate, dar au fost introduse unele elemente și atribute noi:

Formulare în HTML5
autofocus elementul ce conține acest atribut va obține focus la încărcarea paginii
placeholder atribut al elementelor <input> și <textarea> care furnizează utilizatorului o sugestie de completare
required atribut al elementelor <input>, <select> și <textarea> ce previne trimiterea formularului dacă elementul nu a fost completat
<input type="search"> specific căsuțelor de căutare; browserele bazate pe Webkit vor afișa un „×” care șterge valoarea introdusă când e apăsat
<input type="date"> își propune să faciliteze alegerea unei date prin afișarea unui calendar
<input type="email"> specific introducerii unei adrese de e-mail
<input type="url"> specific introducerii unui URL
<input type="number"> pentru introducerea unei valori numerice. Poate fi limitată prin folosirea atributelor min și max. Browserele vor afișa două butoane în dreptul elementului, reprezentând săgeți orientate în sus și jos, ce pot fi folosite pentru pentru incrementarea sau decrementarea valorii introduse. Valoarea fiecărui pas al incrementării se poate specifica prin atributul step.
<output> se poate folosi pentru a afișa rezultatul unui calcul
<datalist> conține listă de opțiuni care apar ca sugestii când elementul obține focus

Nu toate aceste noutăți sunt implementate în browserele curente, dar folosirea lor nu generează erori, lipsa suportului determinându-le doar „retrogradarea” la input-uri simple. Se recomandă folosirea lor mai ales la formularele ce vor fi accesate cu dispozitive touchscreen, tastaturile virtuale ale acestora adaptându-se tipului de input curent.

În HTML5 e posibilă validarea datelor introduse în formular, de exemplu, un element de tipul email care conține atributul required va întrerupe trimiterea formularului dacă nu conține o adresă de e-mail validă. Ce înseamnă exact „adresă de e-mail validă” depinde, desigur, de browserul  pe care îl întrebi. Se pot adăuga, însă, reguli specializate de validare, folosind atributul pattern și o expresie regulată, prezența acestuia înlocuind regula implicită de validare.

Pentru dezactivarea funcționalității asociate validării unui formular, acesta poate primi atributul novalidate: <form novalidate>.

Noi API-uri JavaScript precum File API, FileReader, FormData și XHR2 permit, de exemplu, alegerea unui fișier prin drag and drop și încărcarea lui pe server automat, oferind în același timp și feedback asupra stadiului încărcării, precum și o previzualizare dacă fișierul ales este o imagine.

Conținut video și audio

Multă vreme un teritoriu rezervat plugin-urilor, conținutul multimedia este posibil în HTML5 prin tag-urile <audio> și <video>. API-urile respective fac posibilă manipularea redării și chiar a procesării audio prin Web Audio API. Astfel, se pot construi playere personalizate care să funcționeze chiar și atunci când browserul nu suportă HTML5, folosind Flash ca variantă de rezervă. Ultimele versiuni de browsere implementează și Fullscreen API, astfel că un videoclip, de exemplu, poate fi urmărit pe ecranul întreg fără a mai fi nevoie de a intra manual (cu F11) în modul clasic de ecran complet.

Conținut offline, stocare locală persistentă

Deși denumirea încă nu e consecventă, putând apărea ca DOM Storage sau Local Storage, Web Storage este un standard (separat de HTML5) care specifică modul în care paginile web pot stoca perechi de tip key/value care persistă chiar și după închiderea browserului. Spre deosebire de cookie-uri, datele salvate astfel nu se transmit automat către server, iar limita de mărime a datelor care pot fi salvate local este mult mai mare (10MB în IE, 5MB în celelalte browsere per domeniu, față de 4KB în cazul cookie-urilor).

Application cache dă posibilitatea aplicațiilor web să ruleze offline, stocând local fișierele necesare și oferind un API pentru JavaScript prin care se poate detecta stadiul de online/offline, urmări și opera asupra cache-ului.

Grafică și 3D — canvas, WebGL și SVG

<canvas> reprezintă ceea ce-i spune și numele: o „pânză” goală pe care se poate așterne orice prin JavaScript. Face posibile pe web aplicații interactive precum editoare foto, jocuri, iar împreună cu WebGL face posibilă grafica 3d, printr-un API ce folosește OpenGL ES 2.0. WebGL beneficiază de capabilitățile hardware ale plăcilor grafice, permițând aplicațiilor ca Google Maps să ofere o experiență superioară variantelor anterioare.

Noutăți în CSS

Împărțite în grupuri, specificațiile CSS în diverse stadii de elaborare propun noutăți interesante: noi moduri de a realiza un layout (Flexible Box, Grid Layout), actualizări ale specificațiilor pentru fonturi, un set de proprietăți utile pentru UI (Basic User Interface Module) ș.a. Deși nu toate fac parte din specificații marcate ca „Stable” sau „Completed”, multe se pot folosi în dezvoltare, implementările fiind în momentul de față suficient de robuste. Alte vești bune au venit recent de la Microsoft, care a anunțat că IE10 va suporta proprietăți standard CSS3 (fără prefixul -ms-): gradients, CSS Animations, CSS Transitions, CSS Transforms.

Resurse

E evident că ritmul în care se dezvoltă tehnologiile web este tot mai accelerat, iar o parte dintre ele se pot folosi chiar astăzi. Nu ne rămâne decât să ne străduim să fim mereu la curent și „cu ochii-n patru”, pentru a putea profita de avantajele pe care le aduc, bineînțeles, dacă este posibil, fără să neglijăm utilizatorii de browsere mai vechi.

Sursă imagine