Suita de tehnologii HTML5

transcript

suita de tehnologii HTML5 o privire de ansamblu

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

Ce reprezintă HTML5?

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

+ o suită de API-uri facilitând procesarea documentelor

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

+ o suită de API-uri facilitând procesarea documentelor

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

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

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

și/sau

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

<!DOCTYPE html>

Modelul de reprezentare internă este bazat pe DOM

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

un articol disponibil pe un blog

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

specificarea unor figuri

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

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

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

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

expresii matematice exprimate via limbajul MathML

un limbaj declarativ bazat pe XML

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

Embedded content

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

Nu există suport pentru elementul video… :-(

</video>

// preluăm conținutul video

var video = document.getElementById('film');

</script>

<input type="button" value="Oprește"

onclick="video.pause ();" />

<input type="button" value="Rulează"

onclick="video.play ();" />

<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

codec-uri uzuale: OGG (Theora – disponibil open-source)

www.xiph.org/ogg/

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

<track kind="captions" src="..." srclang="en"

label="English for the Hard of Hearing" />

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

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

Sabin Buraga < busaco@infoiasi.ro >

exemple, tutoriale & resurse: www.html5canvastutorials.com

www.canvasdemos.com

redarea în canvas a unui grafic cu biblioteca Flotr2

Sabin Buraga < busaco@infoiasi.ro > inspectarea documentului HTML5 î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

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

exemplificări

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

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

semantic markup

noi marcaje precum <header> <nav> <section> <aside>… noi tipuri de interacțiune via formulare Web

expresii matematice – MathML microdate

conținut editabil

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

grafica 2D & 3D

<canvas> în contextul 2D <canvas> 3D (WebGL)

conținut grafic scalabil – SVG

multimedia

<audio> (MP3, OGG) <video> (H.264, OGG, WebM)

API-uri de procesare a sunetului comunicații în timp-real – WebRTC

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

offline & storage

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

caching

connectivity & real-time

mesaje vehiculate între documente transferuri asincrone via XMLHttpRequest – nivelul 2

WebSocket evenimente recepționate de la server (server-side events)

asigurarea performanței

Web Workers managementul istoricului navigării

RequestAnimationFrame înglobarea datelor direct în URI

arhitectura clientului Web actual (Jeff Jaffe, 2012)

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

Web-ul mobil

De unde aflu mai multe?

http://diveintohtml5.org/

Sabin Buraga < busaco@infoiasi.ro > developer.mozilla.org

www.html5rocks.com

http://html5demos.com/

http://html5boilerplate.com/

http://jster.net/

http://html5please.com/

Sabin Buraga < busaco@infoiasi.ro > http://html5weekly.com/

suita de tehnologii HTML5 spor la lucru & succes

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

Suita de tehnologii HTML5

Technology