HTML5? HTML5!

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

HTML !
“scurtă” introducere: aspecte esențiale

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

suită de API-uri
facilitâ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 dispozitivubicuitate & accesibilitate

multitudine de conținuturiinteracțiune & experiență Web

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: CSS3
model (abstract): DOM
procesare: JavaScript

…și altele

inițial, 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/

specificațiile redactate de W3C și de WHATWG
sunt diferite

conținut, frecvența actualizărilor, licență de utilizare

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 – 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> exemplu
<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

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

exemplu

<video src="porcii-verzi.ogg" controls autoplay></video>
…
<script>
// preluăm via DOM obiectul referitor la conținutul 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 interfața
HTMLMediaElement

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> exemplu
<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>

function deseneazaDiscuri () { exemplu
// preluăm 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);

// translăm...
context.translate (75, 75);
programul JavaScript
(discuri.js) generând conținutul

for (var i = 1; i < 5; i++) { // generăm 'inele' de discuri exemplu
// salvăm contextul de redare
context.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 discuri
context.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 redare
context.restore ();
} programul JavaScript
} (discuri.js) generând conținutul

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

<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

î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ții
sau 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/

exemplu

// 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);
};

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

exemplu

<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ării
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 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

File API

suită de API-uri pentru manipularea fișierelor
File Blob FileList FileReader
BlobBuilder FileWriter FileSaver
FileSystem

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

mult succes cu

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

HTML5? HTML5!

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (18)

Similar to HTML5? HTML5!

Similar to HTML5? HTML5! (20)

More from Sabin Buraga

More from Sabin Buraga (20)

HTML5? HTML5!