Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
suita de tehnologii HTML5 o privire de ansamblu
Dr. Sabin Buraga www.purl.org/net/busaco
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce reprezintă HTML5?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
un vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web
+ o suită de API-uri facilitând procesarea documentelor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
un vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web
+ o suită de API-uri facilitând procesarea documentelor
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
permite dezvoltarea standardizată de aplicații Web pe baza unor interfețe de programare (API-uri)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
în curs de standardizare la Consortiul Web
statut candidate recommendation (decembrie 2012)
http://www.w3.org/TR/html5/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
diverse specificații HTML5 în lucru:
http://dev.w3.org/html5/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Ce aduce nou HTML5?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Relaxarea corectitudinii la nivel de sintaxă
HTML
și/sau
XHTML
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
specificarea tipului de document se poate realiza în mod simplificat:
<!DOCTYPE html>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Modelul de reprezentare internă este bazat pe DOM
DOM HTML5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Noi elemente de structurare (secțiuni)
în stilul POSH – Plain Old Semantic HTML
article, nav, aside, section, header, footer, hgroup
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<article> <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> <!-- comentariile sunt considerate aici note de subsol --> <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>
un articol disponibil pe un blog
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<figure> <img src="imagine.png" alt="Descriere alternativă" /> <figcaption>O explicație…</figcaption> </figure>
<figure> <!-- conținutul nu trebuie neapărat să fie o imagine --> <video src="http://ferma.info/video/pinguini.mov"></video> <figcaption> Relatare despre <cite>pinguinii FII</cite>. </figcaption> </figure>
specificarea unor figuri
gruparea conținutului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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"> <!-- definim un degrade liniar --> <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" /> <!-- o cale de redare --> </defs> <!-- o formă rectangulară umplută cu degrade-ul de mai sus --> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" /> <!-- folosim instanțe ale pătratului definit --> <use x="40" y="40" xlink:href="#patrat" /> <use x="100" y="80" xlink:href="#patrat" /> <use x="160" y="80" xlink:href="#patrat" /> <use x="220" y="80" xlink:href="#patrat" /> <!-- un text redat conform căii specificate --> <text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text> </svg>
studiu de caz: grafică vectorială SVG
C. Bulancea & S. Buraga, 2004
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
studiu de caz: grafică vectorială SVG
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
un experiment de editare on-line cu instrumentul JS Bin includerea construcțiilor SVG direct în documentul HTML5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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,…
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
caniuse.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
animații SVG realizate dinamic via biblioteca Raphaël
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
math
expresii matematice exprimate via limbajul MathML
un limbaj declarativ bazat pe XML
http://www.w3.org/Math/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
exemplu demonstrativ oferit de Mozilla https://developer.mozilla.org/docs/Mozilla_MathML_Project
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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
codec-uri uzuale: H.264 (MP4 – comercial, susținut de Apple & Microsoft)
www.h264info.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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
codec-uri uzuale: OGG (Theora – disponibil open-source)
www.xiph.org/ogg/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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
codec-uri uzuale: WebM (VP8 – o inițiativă Google)
www.webmproject.org
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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>
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Embedded content
canvas
suport pentru grafica raster (bitmap)
generată dinamic via JavaScript
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<!DOCTYPE html> <html> <head> <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>
generarea unei corole de minuni
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
un posibil rezultat al execuției codului
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
generarea dinamică a unui “mărțișor” Web
Sabin Buraga < [email protected] >
exemple, tutoriale & resurse: www.html5canvastutorials.com
www.canvasdemos.com
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
redarea în canvas a unui grafic cu biblioteca Flotr2
Sabin Buraga < [email protected] > inspectarea documentului HTML5 în Firefox
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Alternativă de redare:
conținut grafic 3D pe baza WebGL
http://get.webgl.org/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
instrumente pentru dezvoltatori: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Formulare HTML5
formularele Web pot include noi tipuri de câmpuri
search
tel url email
datetime date
number
range
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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" />
exemplificări
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Microdata HTML 5
specificație W3C în stadiu de ciornă (Ian Hickson, octombrie 2012)
http://www.w3.org/TR/microdata/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
<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> <!-- conținut propriu-zis --> </article> <footer> <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> </body>
specificarea faptului că Sabin Buraga este o persoană
recurgerea la elemente structurale și scheme de microdate HTML5
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
extragerea/verificarea de date structurate via Structured Data Testing Tool
http://www.google.com/webmasters/tools/richsnippets
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
cunoștințele incluse în paginile Web via microdate HTML5 pot fi folosite la recomandarea altor resurse
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
Până la urmă, ce înseamnă HTML5?
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.” Remy Sharp
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
grafica 2D & 3D
<canvas> în contextul 2D <canvas> 3D (WebGL)
conținut grafic scalabil – SVG
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
multimedia
<audio> (MP3, OGG) <video> (H.264, OGG, WebM)
API-uri de procesare a sunetului comunicații în timp-real – WebRTC
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
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
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
offline & storage
Web Storage (localStorage & Session Storage) baze de date la nivel de client – e.g., indexedDB
caching
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
connectivity & real-time
mesaje vehiculate între documente transferuri asincrone via XMLHttpRequest – nivelul 2
WebSocket evenimente recepționate de la server (server-side events)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
HTML5
asigurarea performanței
Web Workers managementul istoricului navigării
RequestAnimationFrame înglobarea datelor direct în URI
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
arhitectura clientului Web actual (Jeff Jaffe, 2012)
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
suportul oferit de navigatoarele platformelor mobile conform http://mobilehtml5.org/
Web-ul mobil
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
De unde aflu mai multe?
Sabin Buraga < [email protected] > developer.mozilla.org
Sabin Buraga < [email protected] > http://html5weekly.com/
Dr.
Sab
in B
ura
ga
ww
w.p
url
.org
/ne
t/b
usa
co
suita de tehnologii HTML5 spor la lucru & succes
Dr. Sabin Buraga www.purl.org/net/busaco
