Introducere in HTML5

In acest tutorial voi prezenta succint principalele noutati aduse de HTML5 in comparatie cu versiunile anterioare.

Tehnologia evolueaza rapid, intr-un ritm alert, in toate domeniile, si cum era de asteptat web development-ul nu putea sa fie mai prejos. HTML-ul este limbajul markup cel mai folosit in acest moment pentru paginile web, insa acesta a "suferit" un upgrade simtitor prin intermediul HTML5.

Nu o sa intru in istoria si pasii evolutivi ai acestui limbaj, deoarece in opinia mea, cunoasterea acestora nu fac scopul principal al unui web developer (insa nu afirm ca trebuiesc total ignorate aceste informatii).

Avand la baza principiile dupa care a fost dezvoltat HTML, ultima versiune a acestuia - HTML5 - se bazeaza pe structura, sens si continut, asa cum CSS (respectiv CSS3, despre care voi prezenta mai multe informatii intr-un tutorial separat) trebuie folosit numai pentru a modifica felul in care continutul este afisat. Cu alte cuvinte, HTML5 trebuie sa descrie ce este un element in pagina iar CSS3 sa descrie cum trebuie sa arate acel element.

Prin urmare, avand aceste linii bine definite, schimbari au fost facute pentru a veni in sprijinul dezvoltatorilor si designerilor. O parte din tagurile deja cunoscute au fost scoase, iar altele au fost proaspat introduse. In acest tutorial mi-am propus sa prezint schimbarile ce fac din HTML5 un "limbaj cu o mai mare putere de exprimare".

Incepem cu inceputul. Doctype-ul sau Document Type Declaration nu mai este atat de complicat si greu de retinut, cum a fost in versiunile anterioare de HTML sau XHTML, ci pur si simplu:

Aceasta ar trebui sa fie prima linie de cod in fisierul html. Teoretic ea poate lipsi, insa un validator html va trebui apoi sa "ghiceasca" ce versiune de html a fost folosita.

Sectiunea este rezervata titlului paginii, informatiilor meta, javascripturilor si css-urilor. De asemenea este o buna practica includerea charset-ului pentru a indica browserului ce tip de caractere sa afiseze la incarcarea paginii.

Sectiunea ramane in continuare principala sectiune a paginii html.

Noile elemente in HTML5

Cele mai cunoscute noutati aduse de HTML5 sunt elementele de continut header, article si footer, ce compun tagurile cu aceleasi nume. Omoloagele lor media: audio, canvas, figure si video ne scapa in sfarsit de scripturile de embed (in cazul fisierelor video/audio) si ne aduc functionalitati noi precum "desenarea" direct in pagina (cum este cazul canvas-ului).

Mai jos am alcatuit o lista detaliata a acestor elemente:

- container de continut de sine-statator;

- defineste continutul relationat de article, dar independent de acesta;

- container pentru continut audit;

- container pentru dezvoltare grafica;

- defineste o comanda, tasta (combinatie de taste), radio button etc;

- defineste o lista de optiuni predefinite pentru elementul de tip input;

- defineste detaliile unui element;

- container pentru aplicatii externe sau continut interactiv;

- defineste titlul sau legenda elementului figure;

- container pentru continut media (in mare parte imagini);

- container pentru footer-ul unei pagini sau al unei sectiuni;

- container pentru header-ul unei pagini sau al unei sectiuni;

- grupeaza elementele de tip heading;

- defineste un generator de perechi de key pentru formulare;

- defineste texte sau portiuni de text marcate, evidentiate;

- defineste un indicator pentru masurari scalare in cadrul unui interval sau pentru valori fractionale;

- container pentru sectiunea de navigare a paginii;

- defineste rezultatul unei operatii sau calcul, precum rezultatul unui script;

- defineste evolutia unui proces;

- defineste ce afiseaza browserul atunci cand nu suporta adnotari Ruby;

- defineste componenta de text Ruby din cadrul unei adnotari;

- defineste o adnotare Ruby;

- defineste o sectiune in cadrul paginii;

- specifica resursele pentru elementele media;

- defineste un header vizibil pentru informatiile din elementul details;

- container pentru data/timp;

- container pentru continut video;

- specifica locul optim intr-un text sau cuvant mai lung in care browserul poate introduce rand nou sau cratima.O buna parte din elementele de mai sus au proprietatea ca se pot folosi impreuna cu CSS3 si Javascript, ba chiar numai impreuna cu acestea pot duce la rezultate uimitoare.

Spuneam la inceput ca anumite elemente au fost scoase, cu precadere cele ce tineau mai mult de aspect si nu de continut. Acestea se regasesc in lista de mai jos:

- inlocuit de - inlocuit de

- inlocuit de

- inlocuit de

- inlocuit de

Bun, am vazut ce a intrat, am vazut ce a iesit. Acum sa vedem ce putem face, in linii mari cu HTML5.

In principal, putem sa oferim inteles semantic superior paginii noastre - o pagina compusa din div-uri imbricate in div-uri imbricate in div-uri nu ofera nici o informatie despre structura continutului acelei pagini. Asta cu toate ca, cel mai probabil, div-urile noastre au un id="header", id="footer" etc.

HTML5 vine si "face lumina" cu nou , sau . Cand incepem si conectam parti si bucati diferite, intelesul semantic capata proportii, si vom vrea sa stim care este rezultatul. Pentru aceasta, un standard HTML este o modalitate mai mult buna de a determina sensul decat niste texte arbitrare folosite ca valori pentru atributele de id.

Dispozitive mobile

In ceea ce priveste acest aspect, prin simpla mentionare a notiunilor de mai sus, aducerea unui continut mult mai bogat (cel putin din punct de vedere media) pe dispozitivele mobile, devine extrem de usoara si reprezinta un mare avantaj. Dar nu se termina aici.

HTML5 are si in aceasta situatie ce sa prezinte. Hainele de defilare sunt compuse din suport de geolocatie, aplicatii offline si local storage. Ce inseamna asta?

Pai, vom putea dezvolta aplicatii web care vor avea in spate un mecanism similar bazelor de date, pentru a stoca datele offline si a le livra serverelor abia cand acestea sunt disponibile. Vom putea crea o pagina web in care sa ii precizam utilizatorului locatia folosind latitudinea si longitudinea, apoi sa i le afisam pe o harta folosind Google Maps.