Download - Sabin Buraga HTML 5
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