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 la

prezentare: 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 XHTML

text/html versus application/xhtml+xml
specificarea tipului de document se poate realiza n mod simplificat
<!DOCTYPE html>
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 informaional

n 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 <article> <header> <h1>Titlul articolului</h1> <p><time pubdate datetime="2011-08-01T07:33"></time></p> </header> <p>Coninutul propriu-zis al articolului</p> <aside>Alte resurse de interes</aside> <section> <h1>Comentarii</h1> <article>  <footer> <p>Tuxy Pinguinescu</p> <p><time pubdate datetime="2011-08-03T01:07-03:03"></time></p> </footer> <p>Un comentariu</p> </article> </section> un articol disponibil pe un blog </article>
exemplu
<figure> <img src="fii-student.png" alt="Sigla FII Student" /> <figcaption>FII Student</figcaption> </figure>
<figure>  <video src="http://ferma.info/video/porci.mov"> </video> <figcaption> Relatare despre <em>porcii viole(n)i</em>. </figcaption> specificarea unor figuri </figure>
elemente care permit scufundarea altor tipuri de coninuturi ntr-o pagin Web
alturi de elementele img, iframe, embed i object, sunt permise audio, video, source
exemplu
<video src="porcii-verzi.ogg" controls autoplay></video> <script> // prelum via DOM obiectul referitor la coninutul video var video = document.getElementsByTagName ('video')[0]; </script> <p> <input type="button" value="Pauz" onclick="video.pause ();"> <input type="button" value="Ruleaz" onclick="video.play ();"> metodele pause() i play() </p> 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 Web
plus: 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
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/
este asociat elementului canvas
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 <html> <head> <title>Corola de minuni</title> <script type="text/javascript" src="discuri.js"></script> </head> <body onclick="javascript:deseneazaDiscuri ()"> <h1>F un click</h1> <canvas id="canvas" height="500" width="375"> </canvas> </body> </html>
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
noi tipuri: search tel url email datetime date number range color
<label>Adrese suplimentare: <input type="email" multiple list="adrese" name="cc" /> </label> <datalist id="adrese"> <option value="tux@pinguin.info" /> <option value="tuxy.pinguinescu@info.uaic.ro" /> <option value="tp@alt.undeva.org" /> </datalist>
exemplu
<input type="date" max="2000-12-31" name="zi-nastere" /> <input type="range" min="1" max="7" step="2" name="premii" />
noi elemente interactive: details summary command menu
ncrcarea & redarea documentelor
suplimentar fa de obiectul Document, se specific Window oferind acces la mediul de redare
API-uri de baz: ApplicationCache

control asupra cache-ului navigatorului Web
API-uri de baz: WindowTimers

ofer suport pentru specificarea contoarelor de timp
API-uri de baz: Navigator

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

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

gestioneaz 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 Messaging
ofer API-uri pentru realizarea transferului de mesaje ntre diverse contexte de navigare
www.w3.org/TR/postmsg/
Web Messaging
mesajele pot proveni de la server, via socket-uri Web sau de la alte documente via canale de comunicaie
Web Workers
muncitor (worker) Web: script rulat n fundal n accepiunea daemon-ilor UNIX independent de alte programe ce pot interaciona cu utilizatorul
Web Workers
mediul de execuie al unui worker e complet separat, codul fiind rulat n paralel, n mod asincron
http://whatwg.org/ww
Web Storage
ofer mecanisme de stocare (persistent) a datelor la nivel de client sub form de perechi cheievaloare
www.w3.org/TR/webstorage/
Web Storage
maniera de stocare a itemilor se precizeaz via atributele sessionStorage i localStorage
Web Storage
stocare nepersistent (suport pentru sesiuni)
Web Storage
alternativ la cookie-uri
exemplu
<textarea id="editor" placeholder="ncepei s tastai..."> </textarea>
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 Database

se 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 Database

dialectul SQL suportat trebuie s fie cel oferit de SQLite
Web SQL Database

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

n 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
<script> new Worker ('actualizator.js'); </script>
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 API
suit 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

Sabin Buraga HTML 5

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sabin Buraga HTML 5

Încărcat de

Drepturi de autor:

Formate disponibile

HTML ?

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

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

suit de API-uri facilitnd procesarea documentelor

coninut structurat avnd prezentri complexe via CSS3

independena de dispozitivubicuitate & accesibilitate

multitudine de coninuturiinteraciune & experien Web

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 la

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

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

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 XHTML

specificarea tipului de document se poate realiza n mod simplificat

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

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

noi elemente descriind fluxul informaional

exemple de evenimente ce pot fi tratate n ceea ce privete coninutul multimedia:

permite generarea dinamic de coninut grafic dependent de rezoluia curent

este asociat elementului canvas

prin JavaScript pot fi efectuate

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

programul JavaScript (discuri.js) genernd coninutul

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

exemple demonstrative & resurse: www.canvasdemos.com

formularele Web pot include cmpuri suplimentare

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: ApplicationCache

ncrcarea & redarea documentelor

API-uri de baz: WindowTimers

ncrcarea & redarea documentelor

API-uri de baz: Navigator

ncrcarea & redarea documentelor

API-uri de baz: DataTransfer

ncrcarea & redarea documentelor

API-uri de baz: UndoManager

Exist i alte specificaii sau iniiative de interes?

<textarea id="editor" placeholder="ncepei s tastai..."> </textarea>

Web SQL Database

Web SQL Database

Web SQL Database

Web SQL Database

<script> new Worker ('actualizator.js'); </script>

De unde aflu mai multe?

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

S-ar putea să vă placă și