HTML5? HTML5!

HTML ?

Dr. Sabin Buraga

www.purl.org/net/busaco

HTML !

“scurtă” introducere: aspecte esențiale

Ce este HTML5?

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

suită de API-urifacilitând procesarea documentelor

permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal

conținut structurat având prezentări complexe via CSS3

independența de dispozitivubicuitate & accesibilitate

multitudine de conținuturiinteracțiune & experiență Web

de la Web 2D la Web 3D

API-uri specifice pentru îmbunătățirea performanței Web

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

conectivitate între aplicații Web și/sau aplicații “clasice”

date structurate și modelate conceptual

recurge la tehnologii înrudite referitoare la

prezentare: CSS3model (abstract): DOMprocesare: JavaScript

…și altele

inițial, o propunere descrisă deWHATWG compus din Apple, Mozilla, Opera

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

actualmente, în curs de standardizare la W3Ccu statut de ciornă în lucru (working draft)

www.w3.org/TR/html5/

specificațiile redactate de W3C și de WHATWGsunt diferite

conținut, frecvența actualizărilor, 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 documentse 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 – regăsit la nivel de browser

via un obiect de tip Document – poate fi redat (accesat)

de o extensie (plug-in)

noi elemente descriind fluxul informaționalî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,…

<article> <header>

<h1>Titlul articolului</h1><p><time pubdate datetime="2011-08-01T07:33"></time></p>

</header> <p>Conținutul 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>

</article> un articol disponibil pe un blog

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>

</figure> specificarea unor figuri

exemplu

elemente care permit “scufundarea”altor tipuri de conținuturi într-o pagină Web

alături de elementele img, iframe, embed și object,

sunt permise audio, video, source

<video src="porcii-verzi.ogg" controls autoplay></video>…<script>// preluăm via DOM obiectul referitor la conținutul videovar video = document.getElementsByTagName ('video')[0];</script><p>

<input type="button" value="Pauză" onclick="video.pause ();">

<input type="button" value="Rulează" onclick="video.play ();">

</p>metodele pause() și play()

sunt specificate de interfața

HTMLMediaElement

exemplu

exemple de evenimente ce pot fi tratateîn ceea ce privește conținutul 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 conținuturi într-o pagină Web

plus:

canvas – grafică raster generată dinamic

svg – conținut grafic vectorial specificat prin SVG

math – formule matematice exprimate via MathML

interfața HTMLCanvasElement

permite generarea dinamică de conținut grafic

dependent de rezoluția curentă


permite generarea dinamică de conținut grafic

dependent de rezoluția curentă

în prezent – specificație W3C (mai 2011):

conținut 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

transformări geometrice de bază

generarea de căi grafice (paths)crearea degradé-urilor & redarea umbrelor

specificarea de conținuturi textuale

manipularea conținutului grafic

…și altele

<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 () {// preluăm contextul de redare 2Dvar context =

document.getElementById ('canvas').getContext ('2d');

// stabilim parametrii umbrelorcontext.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);

// translăm...context.translate (75, 75);

programul JavaScript(discuri.js) generând conținutul

exemplu

for (var i = 1; i < 5; i++) { // generăm 'inele' de discuri// salvăm contextul de redarecontext.save ();// stabilim via CSS3 culoarea de umplere a discului curent// și ajustăm aleatoriu transparența (alpha)context.fillStyle = 'rgba(33,' + (51 * i) + ',' + (255 - 51 * i) + ','

+ Math.random() + ')';

for (var j = 0; j < i * 6; j++){ // desenăm discuricontext.rotate (Math.PI * 2 / (i * 6));context.beginPath ();context.arc (0, i * 12.5, 5, 0, Math.PI * 2, true);context.fill ();

}// restaurăm contextul de redarecontext.restore ();

}}

programul JavaScript(discuri.js) generând conținutul

exemplu

un posibil rezultat al execuției codului

(folosind un browser bazat pe WebKit)

exemple demonstrative & resurse:

www.canvasdemos.com

interacțiunea cu utilizatorul

formularele Web pot include câmpuri 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="[email protected]" /> <option value="[email protected]" /> <option value="[email protected]" />…

</datalist>

<input type="date" max="2000-12-31" name="zi-nastere" /><input type="range" min="1" max="7" step="2"

name="premii" />

exemplu


noi elemente interactive:

details summary command menu

încărcarea & 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 proprietățile sistemului

via sub-interfețele NavigatorID și NavigatorAbilities


API-uri de bază:

DataTransfer

stochează fragmente de date în diverse formate

(util și pentru efectuarea operațiilor drag & drop)


API-uri de bază:

UndoManager

gestionează istoricul comenzilor efectuate

(undo transaction history)

Există și alte specificațiisau inițiative de interes?

WebSocket API

definește 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/

// actualizările de date vor fi trimise cu rata de o actualizare// la fiecare 50ms, dacă există suficientă lățime 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); };

exemplu

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 comunicație

Web Workers

“muncitor” (worker) Web:

script rulat în fundal – în accepțiunea daemon-ilor UNIX –

independent de alte programe

ce pot interacționa cu utilizatorul

Web Workers

mediul de execuție 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 cheie—valoare

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

<textarea id="editor" placeholder="Începeți să tastați..."></textarea>

document.querySelector ('#editor').addEventListener ('keyup', function (e) { // la fiecare eliberare a tastei…

// stocăm conținutul și data edităriilocalStorage.setItem ('text', this.value);localStorage.setItem ('data', (new Date()).getTime());

}, false);

exemplu

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 interfețele

WindowDatabase, WorkerUtilsDatabase, DatabaseCallback

Web SQL Database

în caz de succes, se va crea un obiect de tip:

SQLTransaction (tranzacție asincronă) sau

SQLTransactionSync (tranzacție realizată sincron)

rezultatele întoarse de server în urma execuției

comenzilor SQL se regăsesc într-un obiect SQLResultSet

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

// deschiderea conexiunii cu baza de datevar 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 cheiicase '+': db.transaction (function (t) {

t.executeSql ('INSERT INTO info (cheie, valoare) VALUES (?, ?)', date[1], date[2]); });

case '-': db.transaction (function (t) { // operația de ștergeret.executeSql ('DELETE FROM info WHERE cheie=? AND valoare=?',

date[1], date[2]); }); }

};un worker ce efectuează operații asupra

unei baze de date existente la nivel de client

exemplu

File API

suită de API-uri pentru manipularea fișierelor

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/

HTML !

Dr. Sabin Buraga

www.purl.org/net/busaco

mult succes cu