HTML ?Dr. Sabin Buraga www.purl.org/net/busaco

HTML !scurt introducere: aspecte eseniale

Ce este HTML5?

vocabular (set de elemente + atribute) pentru marcarea paginilor Web

suit de API-uri facilitnd procesarea documentelor

permite dezvoltarea standardizat de aplicaii Web pe baza unor API-uri specificate formal

coninut structurat avnd prezentri complexe via CSS3

independena de dispozitivubicuitate & accesibilitate

multitudine de coninuturiinteraciune & experien Web

de la Web 2D la Web 3D

API-uri specifice pentru mbuntirea performanei Web

API-uri pentru stocare local (ne)persistent a datelor

conectivitate ntre aplicaii Web i/sau aplicaii clasice

date structurate i modelate conceptual

recurge la tehnologii nrudite referitoare laprezentare: CSS3 model (abstract): DOM procesare: JavaScript

i altele

iniial, o propunere descris de WHATWG compus din Apple, Mozilla, Opera

www.whatwg.org/specs/web-apps/current-work/

actualmente, n curs de standardizare la W3C cu statut de ciorn n lucru (working draft)

www.w3.org/TR/html5/

specificaiile redactate de W3C i de WHATWG sunt diferite

coninut, frecvena actualizrilor, licen de utilizare

Ce aduce nou HTML5?

relaxarea corectitudinii la nivel de sintax

HTML i/sau XHTML

relaxarea corectitudinii la nivel de sintax

HTML i/sau XHTMLtext/html versus application/xhtml+xml

specificarea tipului de document se poate realiza n mod simplificat

modelul de reprezentare intern este bazat pe DOM (Document Object Model)

DOM HTML5

modelul de reprezentare intern este bazat pe DOM (Document Object Model)

eventual, arborele DOM regsit la nivel de browser via un obiect de tip Document poate fi redat (accesat) de o extensie (plug-in)

noi elemente descriind fluxul informaionaln stilul POSH (Plain Old Semantic HTML)

article, aside, audio, canvas, datalist, details, figure, footer, header, keygen, mark, math, meter, nav, output, progress, samp, section, svg, time, video,

exemplu Titlul articolului Coninutul propriu-zis al articolului Alte resurse de interes Comentarii Tuxy Pinguinescu Un comentariu un articol disponibil pe un blog

exemplu

FII Student Relatare despre porcii viole(n)i. specificarea unor figuri

elemente care permit scufundarea altor tipuri de coninuturi ntr-o pagin Webalturi de elementele img, iframe, embed i object, sunt permise audio, video, source

exemplu

// prelum via DOM obiectul referitor la coninutul video var video = document.getElementsByTagName ('video')[0]; metodele pause() i play() sunt specificate de interfaa

HTMLMediaElement

exemple de evenimente ce pot fi tratate n ceea ce privete coninutul multimedia:loadstart progress suspend abort error stalled play pause loadeddata waiting playing seeking canplay seeked timeupdate ended ratechange durationchange volumechange

elemente care permit scufundarea altor tipuri de coninuturi ntr-o pagin Webplus: canvas grafic raster generat dinamic svg coninut grafic vectorial specificat prin SVG math formule matematice exprimate via MathML

interfaa HTMLCanvasElement

permite generarea dinamic de coninut grafic dependent de rezoluia curent

interfaa HTMLCanvasElement

permite generarea dinamic de coninut grafic dependent de rezoluia curent n prezent specificaie W3C (mai 2011): coninut grafic 2D transparent de tip raster www.w3.org/TR/2dcontext/

interfaa HTMLCanvasElement

este asociat elementului canvas

interfaa HTMLCanvasElement

este asociat elementului canvas navigatoarele Web actuale ofer suport relativ complet pentru Internet Explorer (versiuni < 9), se poate recurge la ExplorerCanvas: http://code.google.com/p/explorercanvas/

prin JavaScript pot fi efectuate

transformri geometrice de baz generarea de ci grafice (paths) crearea degrad-urilor & redarea umbrelor specificarea de coninuturi textuale manipularea coninutului grafic i altele

exemplu Corola de minuni F un click

exemplu function deseneazaDiscuri () { // prelum contextul de redare 2D var context = document.getElementById ('canvas').getContext ('2d');

// stabilim parametrii umbrelor context.shadowOffsetX = 3; context.shadowOffsetY = 3; context.shadowBlur = 33;

// stabilim parametrii corpului de liter context.font = "20pt Arial, Helvetica, sans-serif"; context.fillText ("F un click", 5, 30); // translm... context.translate (75, 75);

programul JavaScript (discuri.js) genernd coninutul

for (var i = 1; i < 5; i++) { // generm 'inele' de discuri exemplu // salvm contextul de redare context.save (); // stabilim via CSS3 culoarea de umplere a discului curent // i ajustm aleatoriu transparena (alpha) context.fillStyle = 'rgba(33,' + (51 * i) + ',' + (255 - 51 * i) + ',' + Math.random() + ')'; for (var j = 0; j < i * 6; j++){ // desenm discuri context.rotate (Math.PI * 2 / (i * 6)); context.beginPath (); context.arc (0, i * 12.5, 5, 0, Math.PI * 2, true); context.fill (); } // restaurm contextul de redare context.restore (); programul JavaScript } (discuri.js) genernd coninutul }

un posibil rezultat al execuiei codului (folosind un browser bazat pe WebKit)

exemple demonstrative & resurse: www.canvasdemos.com

interaciunea cu utilizatorul

formularele Web pot include cmpuri suplimentare

interaciunea cu utilizatorul

noi tipuri: search tel url email datetime date number range color

Adrese suplimentare:

exemplu

interaciunea cu utilizatorul

noi elemente interactive: details summary command menu

ncrcarea & redarea documentelor

suplimentar fa de obiectul Document, se specific Window oferind acces la mediul de redare

ncrcarea & redarea documentelor

API-uri de baz: ApplicationCachecontrol asupra cache-ului navigatorului Web

ncrcarea & redarea documentelor

API-uri de baz: WindowTimersofer suport pentru specificarea contoarelor de timp

ncrcarea & redarea documentelor

API-uri de baz: Navigatoracces la starea i proprietile sistemului via sub-interfeele NavigatorID i NavigatorAbilities

ncrcarea & redarea documentelor

API-uri de baz: DataTransferstocheaz fragmente de date n diverse formate (util i pentru efectuarea operaiilor drag & drop)

ncrcarea & redarea documentelor

API-uri de baz: UndoManagergestioneaz istoricul comenzilor efectuate (undo transaction history)

Exist i alte specificaii sau iniiative de interes?

WebSocket API

definete un API abstract pentru transmiterea de date pe baza protocolului de transfer WebSocket: www.whatwg.org/specs/web-socket-protocol/www.w3.org/TR/websockets/

exemplu

// actualizrile de date vor fi trimise cu rata de o actualizare // la fiecare 50ms, dac exist suficient lime de band var socket = new WebSocket ('ws://joc.undeva.info:1974/updates'); socket.onopen = function () { setInterval (function() { if (socket.bufferedAmount == 0) socket.send (oferaDate ()); }, 50); };

Web Messagingofer API-uri pentru realizarea transferului de mesaje ntre diverse contexte de navigare

www.w3.org/TR/postmsg/

Web Messagingmesajele pot proveni de la server, via socket-uri Web sau de la alte documente via canale de comunicaie

Web Workersmuncitor (worker) Web: script rulat n fundal n accepiunea daemon-ilor UNIX independent de alte programe ce pot interaciona cu utilizatorul

Web Workersmediul de execuie al unui worker e complet separat, codul fiind rulat n paralel, n mod asincron

http://whatwg.org/ww

Web Storageofer mecanisme de stocare (persistent) a datelor la nivel de client sub form de perechi cheievaloare

www.w3.org/TR/webstorage/

Web Storagemaniera de stocare a itemilor se precizeaz via atributele sessionStorage i localStorage

Web Storagemaniera de stocare a itemilor se precizeaz via atributele sessionStorage i localStoragestocare nepersistent (suport pentru sesiuni)

Web Storagemaniera de stocare a itemilor se precizeaz via atributele sessionStorage i localStoragealternativ la cookie-uri

exemplu

document.querySelector ('#editor').addEventListener ('keyup', function (e) { // la fiecare eliberare a tastei // stocm coninutul i data editrii localStorage.setItem ('text', this.value); localStorage.setItem ('data', (new Date()).getTime()); }, false);

Web SQL Databasese refer la un set de API-uri pentru managementul asincron al bazelor de date la nivel de client via SQL

www.w3.org/TR/webdatabase/

Web SQL Databasedialectul SQL suportat trebuie s fie cel oferit de SQLite

Web SQL Databaseaccesul la baze de date e abstractizat de interfeele WindowDatabase, WorkerUtilsDatabase, DatabaseCallback

Web SQL Databasen caz de succes, se va crea un obiect de tip: SQLTransaction (tranzacie asincron) sau SQLTransactionSync (tranzacie realizat sincron) rezultatele ntoarse de server n urma execuiei comenzilor SQL se regsesc ntr-un obiect SQLResultSet

new Worker ('actualizator.js');

exemplu

// deschiderea conexiunii cu baza de date var server = new WebSocket ('ws://whatwg.org/database'); var db = openDatabase ('demo', '1.0', 'Date demo', 10240); server.onmessage = function (eveniment) { // datele sunt n format "comanda cheie valoare" var date = eveniment.data.split (' '); switch (date[0]) { // inserare a unei valori pe baza cheii case '+': db.transaction (function (t) { t.executeSql ('INSERT INTO info (cheie, valoare) VALUES (?, ?)', date[1], date[2]); }); case '-': db.transaction (function (t) { // operaia de tergere t.executeSql ('DELETE FROM info WHERE cheie=? AND valoare=?', date[1], date[2]); }); } un worker ce efectueaz operaii asupra }; unei baze de date existente la nivel de client

File APIsuit de API-uri pentru manipularea fiierelor File Blob FileList FileReader BlobBuilder FileWriter FileSaver FileSystem

De unde aflu mai multe?

WHATWG Web Hypertext Application Technology Working Group www.whatwg.org

http://diveintohtml5.org/

http://www.html5rocks.com/

http://html5boilerplate.com/

http://html5demos.com/

mult succes cu

HTML !Dr. Sabin Buraga www.purl.org/net/busaco