Microsoft Word - Draft.doc

Universitatea Politehnica Timisoara

Facultatea de Automatica si Calculatoare

Programare WebHTML 5

Laura CONSTANTINESCU Vlad VODAINTRODUCEREInternetul este intr-o continua evolutie. Pe zi ce trece apar site-uri din ce in ce mai inovatoare, care forteaza limitle HTML-ului. Acest lucru se poate explica usor prin faptul ca dezvoltarea limbajului s-a oprit in 1999, la HTML 4. W3C (World Wide Web Consortium) a continuat dezvoltarea XML, precum si a altor limbaje markup cum ar fi: Scalable Vector Graphics (SVG), XForms, and MathML. Programatorii au invatat CSS si limbajul JavaScript pentru a-si crea propriile aplicatii pe framework-uri deja existente care foloseau Asynchronous JavaScript + XML(AJAX). Astfel, HTML nu s-a dezvoltat

in ultimii 8 ani.

Acest lucru avea sa se schimbe in anul 2004, cand 3 dintre cei mai mari producatori de browsere: Apple, Opera si Mozilla au inceput sa lucreze impreuna, formand (Web Hypertext Application Technology Working Group sau WHATWG), pentru dezvoltarea clasicului HTML. Astfel apare HTML 5 (denumit si Web Applications 1.0) care se vrea a 5-a mare revizie a HTML-ului.

Avand ca punct de plecare HTML 5, W3C a fondat, in 2007, HTML working group(

sau W3C HTML WG), care a publicat prima schita a proiectului in 22 Ianuarie 2008.

STRUCTURAHTML 5 introduce un nou set de elemente, care fac mult mai usoara sturcturarea paginilor. Majoritatea paginilor in HTML 4 folosesc structuri cum ar fi headere, footere si coloane.Acestea sunt realizate cu ajutorul tagului , caruia i se adauga atribulete id sau class.

Flosirea tagului se datoreaza faptului ca actula versiune de HTML nu dispune de elemente specializate pentru a descrie fiecare structura (header, footer, coloana) in parte. HTML 5 rezolva aceasta problema introducand elemente noi, dupa cum se poate vedea in imaginea de mai jos:

(elementul div poate fi inlocuit cu: header, nav, section, article, aside ,footer).

Codul pentru o pagina avand structura de mai sus va fi:

......

...

...

...

De exemplu, pentru urmatorea structura markup s-au folosit section incuibat si elemente

h1:

Level 1

Level 2

Level 3

De asemenea, pentru compatibilitate cu browswerele actuale, este posibila folosirea altor elemente de heading (h2 h6) in locul elementelor h1.

Folosind sectiunile(sections), paginile vor deveni mult mai usor navigabile. De exenplu, se poate sari usor de la un articol la altul, fara sa fie necesara folosirea de catre autor a linkurilor de skip. Cei care realizeaza paginile au, de asemenea, de beneficiat pentru ca inlocuitrea div-urilor cu alte elemente face codul mult mai usor de urmarit.

Elementele de header reprezinte headerul unei sectiuni. Headerele pot contine mai mult decat doar headingul unei sectiuni. De exemplu acestea pot include subtitluri sau informatii(nume, functie) despre autor.

A Preview of HTML 5

By Lachlan Hunt

Example BlogInsert tag line here.

Elementele de footer reprezita footerul sectiunii careia i se aplica. De obicei acesta contine informatii despre sectiunea respectiva, despre autor, link-uri si copyright-ul.

2007 Example Inc.

Elemetele de nav reperezinta sectiunea de navigation links.Se foloseste atat pentru navigarea pe site cat si pe post de cuprins.

nav>

Home

Products

Services

About

Elemetul asside este folosit pentru continut care abordeaza aceeasi tematica si este, in general, folosit pentru crearea sidebar-urilor.

Archives

September 2007

August 2007

July 2007

Elementele de section reprezinta o sectiune a documentului sau a aplicatiei, de exemplu un capitol.

Chapter 1: The PeriodIt was the best of times, it was the worst of times,

it was the age of wisdom, it was the age of foolishness,it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness,

...

Un element article reprezinta o sectiune independenta a documentului, paginii sau site- ului. Acesta poate fi folosit pentru a scrie un articol de stiri,un post pe blog, un post pe un forum sau un comentariu.

Chapter 1: The PeriodIt was the best of times, it was the worst of times,it was the age of wisdom, it was the age of foolishness,

it was the epoch of belief, it was the epoch of incredulity,it was the season of Light, it was the season of Darkness,

...

Audio si VideoIn ultimii ani elementele audio si video au devenit din ce in ce mai populare si mai des folosite, datorita unor site-uri precum YouTube, Viddler, Revver, MySpace si altele, care ofera oricui posibilitatea de a crea asemena fisiere. Avand in vedere ca actuala versiune HTML nu ofera posibilitatea de a introduce si a controla asemenea elemente, multe site- uri folosesc Flash-ul pentru a crea aceasta functionalitate. Chiar daca se pot introduce elemente audio/video in pagini flosind mai multe plug-inuri (QuickTime, Windows Media etc.), Flash-ul este singurul care ofera o solutie compatibila cu toate browserele.

Dupa cum s-a vazut in cazul media player-elor bazate pe Flash, programatorii isi doresc sa creeze interfete proprii, originale, care permit, in general, utilizatorului optiunile: play, pause, stop, seek si adjust volume. Ideea este de a pune la dispozitie aceste functionalitati in browsere prin adaugarea de resurse proprii pentru inserarea elementelor audio/video si prin realizarea de DOM API-uri pentru scripturi care sa controleze functionarea lor.

Noile elemente video si audio vor facilita realizarea acestor deziderate.Majoritatea API- urilor sunt comune pentru cele doua elemente, singura deosebire referindu-se la diferentele intre cele doua tipuri de media: vizual si non-vizual.

Cea mai simpla modalitate de a insera un clip video este de a folosi elementul video si de a permite browser-ului sa creeze o interfata default. Atributul controls este un atribut boolean si indica daca programatorul doreste sau nu interfata cu utilzatorul(UI) by default.

Download movie

Atributul optional poster poate fi folosit pentru a specifica o imagine care va fi afista in locul clipului video inainte ca acesta sa inceapa sa ruleze. Desi exista formate video care ofera propriul lor poster frame feature, cum ar fi MPEG-4, solutia propusa de HTML5 va fuctiona pentru orice format.

La fel de simplu se insereaza elemente audio in pagina, folosind audio. Majoritatea atributelor sunt commune intre audio si video. Totusi, din motive evidente, pentru elemental audio lipsesc atributele: width, height si poster.

Download song

HTML5 ofera aributul source, pentru a preciza elementele audio sau video din care browserul poate alege, bazandu-se pe tipurile sale media si pe suportul codecurior.

Pentru programatorii care isi doresc ceva mai mult control asupra interfetei cu utilizatorul astfel incat sa o poata dimensiona in functie de designul paginii, Api-urile suplimentare ofera mai multe metode de a lasa scripturile sa controleze functionarea elementului

media. Cele mai simple metode de folosire sunt: play(), pause(), si a seta currentTime

sa deruleze de la inceput. Urmatorul exemplu ilustreaza cum se port folosi acestea:

var video = document.getElementById("video");

PlayPause