Suita de tehnologii HTML5

suita de tehnologii HTML5
o privire de ansamblu

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

Ce reprezintă HTML5?


HTML5

un vocabular (set de elemente + atribute)
folosit pentru marcarea paginilor Web
+
o suită de API-uri facilitând procesarea documentelor

HTML5

permite dezvoltarea standardizată de aplicații Web
pe baza unor interfețe de programare (API-uri)

HTML5

recurge la tehnologii înrudite referitoare la

prezentare via foi de stiluri în cascadă: CSS – nivelul 3
model conceptual: DOM (Document Object Model)
procesare la nivel de navigator Web: JavaScript

…și altele

HTML5

în curs de standardizare la Consortiul Web

statut candidate recommendation (decembrie 2012)

http://www.w3.org/TR/html5/

diverse specificații HTML5
în lucru:
http://dev.w3.org/html5/

Ce aduce nou HTML5?


Relaxarea corectitudinii la nivel de sintaxă

HTML

și/sau

XHTML

HTML5

specificarea tipului de document
se poate realiza în mod simplificat:

<!DOCTYPE html>

Modelul de reprezentare internă este bazat pe DOM

DOM HTML5

HTML5

lista elementelor (marcajelor) poate fi consultată la
http://dev.w3.org/html5/markup/spec.html

a se vizita si HTML5 Doctor
http://html5doctor.com/

Antetul documentului poate include meta-date

diverse construcții privind maniera de
prezentare/comportamentul conținutului
sau relația documentului curent cu alte resurse Web

Antetul documentului poate include meta-date

diverse construcții privind maniera de
prezentare/comportamentul conținutului
sau relația documentului curent cu alte resurse Web

title, base, link, meta, style, script, noscript

Noi elemente de structurare (secțiuni)

în stilul POSH – Plain Old Semantic HTML

article, nav, aside, section, header, footer, hgroup

<article>
un articol disponibil pe un blog
<header>
<h1>Titlul articolului</h1>
<p><time pubdate datetime="2013-01-07T07: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>Autor: Tuxy Pinguinescu</p>
<p><time pubdate
datetime="2013-01-10T01:07-03:03"></time></p>
</footer>
<p>Un comentariu</p>
</article>
</section>
</article>

specificarea unor figuri

<figure>

<img src="imagine.png" alt="Descriere alternativă" />
<figcaption>O explicație…</figcaption>
</figure>

<figure>

<video src="http://ferma.info/video/pinguini.mov"></video>
<figcaption>
Relatare despre <cite>pinguinii FII</cite>.
</figcaption>
</figure>

gruparea conținutului

Embedded content

“scufundarea” altor tipuri de conținuturi
într-un document HTML

conținut grafic – raster și/sau vectorial
conținut sonor
conținut video

Embedded content

svg

conținut grafic vectorial
specificat prin SVG (Scalable Vector Graphics)

un limbaj descriptiv bazat pe XML

http://www.w3.org/Graphics/SVG/

studiu de caz: grafică vectorială SVG
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm">
<title>Conținut grafic SVG</title>

<defs>
<linearGradient id="unGradient"> 
<stop offset="20%" stop-color="#3FF" />
<stop offset="90%" stop-color="#F3F" />
</linearGradient>
<rect id="patrat" width="15px" height="15px" fill="navy" />
<path id="cale" d="M15 50 C10 0 90 0 90 40" /> 
</defs>

<rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" />

<use x="40" y="40" xlink:href="#patrat" />

<text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text>
</svg> C. Bulancea & S. Buraga, 2004

studiu de caz: grafică vectorială SVG


un experiment de editare on-line cu instrumentul JS Bin
includerea construcțiilor SVG direct în documentul HTML5

Embedded content

svg

specificația curentă: SVG 1.1 2nd Edition
în contextul dispozitivelor mobile: SVG Tiny

suport în cadrul navigatoarelor moderne
Opera, Firefox, Safari (inclusiv pentru iOS), Chrome, IE9+

instrumente: Apache Batik, Inkscape, Raphaël.js,…

caniuse.com


animații SVG realizate dinamic via biblioteca Raphaël

Embedded content

math

expresii matematice exprimate via limbajul MathML

un limbaj declarativ bazat pe XML

http://www.w3.org/Math/

Embedded content

math

specificația curentă: MathML 3.0 (2010)

suport nativ în Firefox și Chrome

o listă a instrumentelor software la
http://www.w3.org/Math/Software/

exemplu demonstrativ oferit de Mozilla
https://developer.mozilla.org/docs/Mozilla_MathML_Project

Embedded content

alături de elementele img, iframe, embed și object,
sunt permise audio, video, source
ce pot fi utilizate la includerea de conținut multimedia

<video id="film" src="/media/tux.ogg" controls autoplay>
Nu există suport pentru elementul video… :-(

</video>
…
<script type="text/javascript">
// preluăm conținutul video
var video = document.getElementById('film');
</script>
<p>
<input type="button" value="Oprește"
onclick="video.pause ();" />
<input type="button" value="Rulează"
onclick="video.play ();" />
</p>

<source src='fii-absolvent.mp4'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />

<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"' />
<source src='discursul-lui-tux.oga'
type='audio/ogg; codecs=flac' />

precizarea codec-urilor
necesare redării



necesare redării

codec-uri uzuale:
H.264 (MP4 – comercial, susținut de Apple & Microsoft)
www.h264info.com



necesare redării

codec-uri uzuale:
OGG (Theora – disponibil open-source)
www.xiph.org/ogg/



necesare redării

codec-uri uzuale:
WebM (VP8 – o inițiativă Google)
www.webmproject.org

Embedded content

elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date

<video src="…">
<track kind="subtitles" src="..." srclang="en" label="English" />
<track kind="captions" src="..." srclang="en"
label="English for the Hard of Hearing" />
<track kind="subtitles" src="..." srclang="ro" label="Românește" />
</video>

Embedded content

canvas

suport pentru grafica raster (bitmap)
generată dinamic via JavaScript

Embedded content

canvas

suport pentru grafica raster (bitmap)
generată dinamic via JavaScript

funcționalitățile privind redarea graficii sunt oferite de
interfața de programare HTMLCanvasElement

Interfața HTMLCanvasElement

specificație W3C: candidate recommendation
(decembrie 2012)

context de redare:
conținut grafic 2D transparent de tip raster

www.w3.org/TR/2dcontext/

<!DOCTYPE html>
<html> generarea
<head> unei corole de minuni
<title>Corola de minuni</title>

</head>
<script type="text/javascript" src="discuri.js"></script>
<body onclick="javascript:deseneazaDiscuri()">
<h1>Un click…</h1>
<canvas id="canvas"
height="500"
width="375">
</canvas>
</body>
</html>

function deseneazaDiscuri() {
// preluăm contextul de redare 2D

var context =
document.getElementById ('canvas').getContext ('2d');

// stabilim parametrii corpului de literă
context.font = "20pt sans-serif";
context.fillText ("o minune", 5, 30);

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

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

for (var i = 1; i < 5; i++) { // vom genera 'inele' de discuri
// 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

generarea dinamică a unui “mărțișor” Web

exemple, tutoriale & resurse:
www.html5canvastutorials.com
www.canvasdemos.com

Sabin Buraga < busaco@infoiasi.ro >

redarea în canvas a unui grafic cu biblioteca Flotr2

inspectarea documentului HTML5
Sabin Buraga < busaco@infoiasi.ro > în Firefox

Alternativă de redare:

conținut grafic 3D pe baza WebGL

http://get.webgl.org/

instrumente pentru dezvoltatori: CopperLicht, CubicVR,
PhiloGL, SceneJS, TDL (ThreeD Library), Three.js

Formulare HTML5

formularele Web pot include noi tipuri de câmpuri

search
tel url email
datetime date
number
range

<label>Adrese suplimentare: exemplificări
<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" />

Microdata HTML 5

specificație W3C în stadiu de ciornă
(Ian Hickson, octombrie 2012)

http://www.w3.org/TR/microdata/

Microdata HTML 5

posibilitatea de a specifica perechi de proprietăți
(nume, valoare) “scufundate” în HTML
menite a fi “înțelese” de software
(e.g., motoarele de căutare)

Microdata HTML 5

grupurile de perechi de proprietăți nume—valoare
sunt denumite items

creare via atributul itemscope
specificarea unei proprietăți prin atributul itemprop
referire cu ajutorul atributului itemref

Microdata HTML 5

grupurile de perechi de proprietăți nume—valoare
sunt denumite items

asocierea unui tip de date se face cu atributul itemtype

pentru identificarea unui item se folosește itemid

schema.org

colecție de vocabulare (scheme de date)
– e.g., Book, Event, LocalBusiness, Movie, Offer, Person,
Place, Recipe, Review, TVSeries,… – recunoscute și
indexate de roboții principalelor motoare de căutare

Bing, Google, Yahoo!, Yandex

<body itemscope itemtype="http://schema.org/WebPage">
<header>
<h1 itemprop="name">
<a href="index.html" title="…">Dezvoltarea aplicațiilor Web
la nivel de client</a>

</h1>
<p class="slogan" itemprop="description">prezentările aferente cursului</p>
</header>
<article>

</article> specificarea faptului că Sabin Buraga
<footer> este o persoană
<h6>
<span itemscope itemtype="http://schema.org/Person">
<a href="http://www.purl.org/net/busaco" title="…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin Buraga</span>
</a>
</span>
</h6>
</footer> recurgerea la elemente structurale și
</body> scheme de microdate HTML5

extragerea/verificarea de date structurate
via Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets

cunoștințele incluse în paginile Web via microdate HTML5
pot fi folosite la recomandarea altor resurse

Până la urmă, ce înseamnă HTML5?


“HTML5 should not be considered as a whole.
You should cherry-pick the technology
that suits the solution to your problem.”
Remy Sharp

HTML5

semantic markup

noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
expresii matematice – MathML
microdate
conținut editabil

HTML5

prezentarea conținutului via foi de stiluri CSS

facilități aduse de CSS3: tranziții, transformări, coloane,…
media queries
utilizarea fonturilor externe – Web fonts

HTML5

grafica 2D & 3D

<canvas> în contextul 2D
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG

HTML5

multimedia

<audio> (MP3, OGG)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC

HTML5

device access

drag & drop
orientation
geolocation
acces la camera Web
notificări
acces la fișierele gazdei – File API
HTML5 în contextul TV & industriei auto

HTML5

offline & storage

Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching

HTML5

connectivity & real-time

mesaje vehiculate între documente
transferuri asincrone via XMLHttpRequest – nivelul 2
WebSocket
evenimente recepționate de la server (server-side events)

HTML5

asigurarea performanței

Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în URI

arhitectura clientului Web actual (Jeff Jaffe, 2012)

Web-ul mobil

suportul oferit de navigatoarele platformelor mobile
conform http://mobilehtml5.org/

De unde aflu mai multe?


http://diveintohtml5.org/


developer.mozilla.org

www.html5rocks.com


http://html5demos.com/


http://html5boilerplate.com/


http://jster.net/


http://html5please.com/

http://html5weekly.com/

suita de tehnologii HTML5
spor la lucru & succes

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

Suita de tehnologii HTML5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (7)

Similar a Suita de tehnologii HTML5

Similar a Suita de tehnologii HTML5 (20)

Más de Sabin Buraga

Más de Sabin Buraga (20)

Suita de tehnologii HTML5