Universitatea Politehnica Timisoara Facultatea de Automatica si Calculatoare

Programare Web

HTML 5

Laura CONSTANTINESCU Vlad VODA

INTRODUCERE

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

STRUCTURA

HTML 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 <div>, caruia i se adauga atribulete id sau class.

Flosirea tagului <div> 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:

<body> <header>...</header> <nav>...</nav> <article> <section> ...

</section> </article> <aside>...</aside> <footer>...</footer> </body>

De exemplu, pentru urmatorea structura markup s-au folosit section incuibat si elemente
h1: <section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section>

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.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>

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.
<footer>© 2007 Example Inc.</footer>

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

nav> <ul> <li><a <li><a <li><a <li><a </ul>

href="/">Home</a></li> href="/products">Products</a></li> href="/services">Services</a></li> href="/about">About</a></li>

</nav>

Elemetul asside este folosit pentru continut care abordeaza aceeasi tematica si este, in general, folosit pentru crearea sidebar-urilor.
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>

Elementele de section reprezinta o sectiune a documentului sau a aplicatiei, de exemplu un capitol.
<section> <h1>Chapter 1: The Period</h1> <p>It 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, ...</p> </section>

Un element article reprezinta o sectiune independenta a documentului, paginii sau siteului. Acesta poate fi folosit pentru a scrie un articol de stiri,un post pe blog, un post pe un forum sau un comentariu.
<section> <h1>Chapter 1: The Period</h1> <p>It 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, ...</p> </section>

Audio si Video

In 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 siteuri 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 APIurilor 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.
<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>

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.
<audio src="music.oga" controls> <a href="music.oga">Download song</a>

</audio>

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.
<video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio>

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:
<video src="video.ogg" id="video"></video> <script> var video = document.getElementById("video"); </script> <p><button type="button" onclick="video.play();">Play</button> <button type="button" onclick="video.pause();">Pause</button> <button type="button" onclick="video.currentTime = 0;"> << Rewind</button>

Reprezentarea Documentelor

Spre deosebire de variantele anterioare HTML si XHTML, care sunt definite in termeni de sintaxa, HTML5 e definit in termeni de Document Object Model (DOM) —cele trei reprezentari folosite de browsere pentru a defini un document.De exemplu, considerand un document format din title, heading si paragraph, asa ar arata reprezentarea DOM:

Arborele DOM include un element titlu in head si elemente h1 si p in body. Avantajul de a defini HTML5 in trermeni de DOM este ca limbajul insusi poate fi definit independent de sintaxa. Exista, in principal, doua sintaxa care pot fi folosite pentru a reprezenta documente HTML: HTML serialisation (sau HTML 5) si XML serialisation (sau XHTML 5). HTML serialisation se refera la sintaxa inspirata din sintaxa SGML(a vresiunilor anterioare HTML)
<!DOCTYPE html> <html> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document. </body> </html>

XML serialization se refera la o sintaxa care foloseste XML 1.0 si namespaces, ca si XHTML 1.0.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>An HTML Document</title> </head> <body> <h1>Example</h1> <p>This is an example HTML document.</p> </body> </html>

Browserele folosesc tipul MIME pentru a face deosebire intre cele 2.Orice document text/html trebuie se sa conformeze cerintelor HTML serialisation si orice document de tipul XML MIME, cum ar fi application/xhtml+xml trebuie sa fie conform cu cerintele standardului XML serialisation.

Bibliografie
1: 2: 3: 4: http://www.alistapart.com/articles/previewofhtml5 http://www.ibm.com/developerworks/library/x-html5/ http://www.w3.org/TR/2008/WD-html5-diff-20080122/ http://www.pcworld.com/article/id,140408-

pg,1/article.html