suita de tehnologii html5
DESCRIPTION
An overview of HTML5. O prezentare generală referitoare la suita de tehnologii HTML5, incluzând aspecte legate de grafică vectorială (SVG) și raster (via și JavaScript), plus informații despre microdatele HTML5 pe baza modelelor schema.org.TRANSCRIPT
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] >
http://diveintohtml5.org/
Sabin Buraga < [email protected] > developer.mozilla.org
Sabin Buraga < [email protected] >
www.html5rocks.com
Sabin Buraga < [email protected] >
http://html5demos.com/
Sabin Buraga < [email protected] >
http://html5boilerplate.com/
Sabin Buraga < [email protected] >
http://jster.net/
Sabin Buraga < [email protected] >
http://html5please.com/
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