CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
suita de tehnologii HTML5

“If you can dream it, you can do it.”
Walt Disney

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 API-uri specificate formal

HTML5
permite dezvoltarea standardizată de aplicații Web
pe baza unor API-uri specificate formal
API-urile sunt definite de interfețe
descrise cu limbajul declarativ WebIDL
W3C Recommendation, 2016
www.w3.org/TR/WebIDL/

HTML5 Web API
suita de API-uri JavaScript (ECMAScript) disponibile
– la nivel de client – pentru dezvoltarea de aplicații
arii de interes: grafică și tipografie, multimedia,
interacțiune cu utilizatorul, stocare și fișiere, transfer
în timp-real, componente Web, performanță, securitate
www.w3.org/standards/techs/js
platform.html5.org
developer.mozilla.org/docs/Web/API

HTML5
inițial, o propunere independentă de Consorțiul Web
WHATWG (Web Hypertext Application Technology
Working Group) compus din Apple, Mozilla, Opera
www.whatwg.org

www.whatwg.org/specs/web-apps/current-work/

HTML5
actualmente, standard al Consorțiului Web
W3C Recommendation (2014)
www.w3.org/TR/html5/
varianta cea mai recentă: HTML 5.1
www.w3.org/TR/html/

Ce aduce nou HTML5?

Relaxarea corectitudinii la nivel de sintaxă
HTML – text/html
și/sau
XHTML – application/xhtml+xml

specificarea tipului de document
se poate realiza în mod simplificat:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
<head>
<title>…</title>
<meta charset="utf-8" />
…
</head>
<body>
…
</body>
</html>
spațiul de nume
rămâne neschimbat

HTML5
detalii privind elementele (marcajele)
și atributele aferente:
www.w3.org/standards/techs/html
a se (re)vedea prezentarea
Sabin Buraga, HTML5 în XXX de minute (2015)
www.slideshare.net/busaco/html5-in-xxx-de-minute

Câteva amănunte
despre noile elemente HTML5?

Noi elemente de structurare (secțiuni)
în stilul POSH – Plain Old Semantic HTML
article, nav, aside, section, header, footer etc.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro" xml:lang="ro">
<head>
<title>Filmul disciplinei | Dezvoltarea aplicaţiilor Web la nivel de client</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Sabin Buraga – http://www.purl.org/net/busaco" />
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<header>
<h1>Dezvoltarea aplicaţiilor Web la nivel de client</h1>
<p class="slogan">prezentările aferente cursului</p>
</header>
<article>
<p>Filmul desfăşurării materiei este prezentat mai jos.</p>
<nav>
<ul>
<li><a href="#week14" title="…">Săptămâna 14</a></li>
…
<li><a href="#week1" title="…">Săptămâna 1</a></li>
</ul>
</nav>
detalii despre atributul rel la
www.w3.org/TR/html/links.html

<section id="week1">
<h2>▣ Săptămâna 1</h2>
<ul>
<li><aside class="menu">reamintire:
<a href="http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html"
title="Spre situl disciplinei">Tehnologii Web</a></aside>
<p>…</p>
</li>
</ul>
</section>
</article>
<footer>
<h6>Ultima actualizare: 04 decembrie 2017 /
<a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="…">CC</a>
<span itemscope="itemscope" itemtype="http://schema.org/Person">
<a href="http://www.purl.org/net/busaco" title="Spre situl Web al titularului…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin Buraga</span></a>
</span>
</h6>
</footer>
</body>
</html>
microdate HTML5
folosind vocabularele schema.org
(vezi unul din cursurile anterioare)

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
www.w3.org/Graphics/SVG/
developer.mozilla.org/docs/Web/SVG

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>HTML + SVG</title></head>
<body>
<h1>SVG într-o pagină Web</h1>

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">

<rect x="50" y="50" rx="7" ry="7" width="450" height="150"
style="fill: #00CCEE; stroke: #3333CC;"/>

<text x="70" y="90" style="stroke: black; fill: gray; font-size: 32pt;">
SVG direct în browser...</text>

<circle cx="400" cy="150" r="33" style="fill: yellow;" />
</svg>
<p>De utilizat un navigator Web oferind suport nativ pentru SVG.</p>
</body>
</html>

vizualizarea în navigatorul Web a ilustrației SVG
via instrumentul JS Bin

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

<use x="40" y="40" xlink:href="#aRectangle" />
<use x="100" y="80" xlink:href="#aRectangle" filter="url(#visualFilter)" />
<use x="160" y="80" xlink:href="#aRectangle" fill-opacity="0.33" />
<use x="220" y="80" xlink:href="#aRectangle" />

<text fill="red">

<textPath xlink:href="#aPath">❤ Web ★</textPath>
</text>
</svg>
C. Bulancea & S. Buraga (2004, 2014)

redarea conținutului grafic vectorial SVG
Firefox
la nivel de desktop
(Windows 10)
Safari pe platforma
mobilă iOS 11 (iPhone)

Embedded content
svg
specificația curentă: SVG 1.1 2nd Edition (2011)
www.w3.org/TR/SVG/
în lucru: SVG 2.0 (noiembrie 2017) – svgwg.org/svg2-draft/
în contextul dispozitivelor mobile: SVG Tiny 1.2 (2008)
www.w3.org/TR/SVGTiny12/

resurse + exemple demonstrative:
github.com/willianjusten/awesome-svg
suportul cumulat pentru SVG în cadrul navigatoarelor,
inclusiv pe platforme mobile: caniuse.com/#search=svg

Embedded content
svg
biblioteci JavaScript importante:
Raphaël.js – raphaeljs.com
Snap.svg – snapsvg.io
svg.js – svgjs.com
a se considera și Bonsai, Fabric.js, Vivus etc.
www.javascripting.com/search?q=svg

examinarea codului SVG generat de biblioteca Snap.svg
folosind instrumentele de depanare furnizate de browser

Embedded content
math
expresii matematice exprimate via limbajul MathML
un limbaj declarativ bazat pe XML
www.w3.org/Math/

Embedded content
math
specificația curentă: MathML 3.0 (2010)
o listă a instrumentelor software la
www.w3.org/Math/Software/
exemplu notabil: proiectul MathJax – www.mathjax.org

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

Embedded content
elementele audio și video
implementează interfața HTMLMediaElement

interface HTMLMediaElement : HTMLElement {
readonly attribute MediaError error;
attribute DOMString src;
readonly attribute DOMString currentSrc;
attribute DOMString preload;
readonly attribute TimeRanges buffered;
attribute double currentTime;
readonly attribute double duration;
readonly attribute boolean paused;
attribute boolean autoplay;
attribute boolean loop;
attribute boolean controls;
attribute double volume;
attribute boolean muted;
void load ();
void play ();
void pause ();
};
principalele atribute și
metode ale interfeței
HTMLMediaElement

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

Embedded content
principalele evenimente ce pot fi tratate
în ceea ce privește conținutul audio/video:
loadstart progress suspend abort error
stalled play pause loadeddata
waiting playing seeking
canplay seeked timeupdate ended
ratechange durationchange volumechange

<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 (MPEG4 – comercial, susținut de Apple și Microsoft;
actualmente, orice browser Web modern îl acceptă)
www.h264info.com

necesare redării
codec-uri uzuale:
OGG (open-source; implementat de Chrome, Firefox
(inclusiv pe Android) și Opera; fără suport în IE/ Edge și
Safari ori pe platforme mobile) – www.xiph.org/ogg/
audio
video

necesare redării
codec-uri uzuale:
WebM (o inițiativă Google – open source; suport oferit
de Chrome, Firefox și Opera, dar nu și de Safari)
www.webmproject.org

Alte codec-uri:
WebP (Google – format grafic cu/fără pierderi,
oferind suport și pentru animații sau transparență;
implementat doar de Chrome și Opera,
inclusiv pe plaforme mobile)
https://developers.google.com/speed/webp/

Alte codec-uri:
Opus (specificație IETF liberă
asigurând calitatea ridicată a conținutului audio;
implementat de toate navigatoarele Web importante)
http://tools.ietf.org/html/rfc6716

suportul cumulat: caniuse.com/#search=codec

statistici în raportul The State of HTML5 Video (feb. 2017)
developer.jwplayer.com/articles/html5-report/

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

<video src="https://www.infoq.com/presentations/cors">
<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
elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date
conținutul textual se precizează în formatul WebVTT
(ciornă W3C, noiembrie 2017)
www.w3.org/TR/webvtt1/

În ceea ce privește redarea conținutului video,
de interes poate fi și Fullscreen API
specificație în lucru (septembrie 2017),
dar implementată de majoritatea navigatoarelor
fullscreen.spec.whatwg.org

În ceea ce privește redarea conținutului video,
de interes poate fi și Fullscreen API
<video controls id="video">
<source src="video.webm"></source>
<source src="video.mp4"></source>
</video>
…
var elem = document.getElementById("video");
if (elem.requestFullscreen) { // există suport?
elem.requestFullscreen(); // se pot emite evenimentele
} // fullscreenchange sau fullscreenerror
developer.mozilla.org/Web/API/Fullscreen_API

Specificații adiționale:
Media Source Extensions (recomandare W3C, 2016)
scop: crearea dinamică a fluxurilor audio/video
(adaptive bitrate streaming) prin program
www.w3.org/TR/media-source/
algoritmi importanți:
Apple HLS (HTTP Live Streaming)
MPEG DASH (Dynamic Adaptive Streaming over HTTP)

hls.js – implementare JS a HLS
github.com/video-dev/hls.js/

suport aproape inexistent
oferit de browser-ele curente

dash.js – implementare JS de referință (polyfill)
github.com/Dash-Industry-Forum/dash.js

Specificații adiționale:
Encrypted Media Extensions (recomandare W3C, 2017)
scop: criptarea conținutului audio/video și
redarea lui pe baza unei licențe de utilizare
www.w3.org/TR/encrypted-media/

tutorial: developers.google.com/web/fundamentals/media/eme

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

Interfața HTMLCanvasElement
scop:
generarea dinamică de conținut grafic
dependent de rezoluția curentă

stipulată de recomandarea W3C privind HTML5

stipulată de recomandarea W3C privind HTML5
context de redare:
conținut grafic 2D transparent de tip raster
(W3C Recommendation, 2015)
www.w3.org/TR/2dcontext/

typedef (CanvasRenderingContext2D or
WebGLRenderingContext) RenderingContext;
interface HTMLCanvasElement : HTMLElement {
// specifică zona rectangulară de redare a conținutului grafic
attribute unsigned long width;
attribute unsigned long height;
// metodă care oferă contextul redării conținutului
RenderingContext? getContext (DOMString contextId, any... args);
// metodă ce întoarce un URL folosind schema data:
// pentru accesul la conținutul generat
DOMString toDataURL
(optional DOMString type, any... args);
// metodă oferind manieră de serializare (e.g., salvare) a imaginii
void toBlob (FileCallback? _callback,
optional DOMString type, any... arguments);
};

este asociată elementului HTML5 canvas
contextul 2D de redare a conținutului generat dinamic
de script-urile operând asupra obiectului canvas este
specificat formal de interfața CanvasRenderingContext2D
developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D

Elementul canvas – interfața CanvasRenderingContext2D
transformări geometrice de bază:
scale()
rotate()
translate()
transform()
setTransform()

generarea de căi grafice (paths):
lineTo() moveTo() rect() arc() fill() stroke() clip()
arcTo() quadraticCurveTo() bezierCurveTo()
beginPath() closePath()
isPointInPath()

manipularea zonelor rectangulare:
strokeRect()
fillRect()
clearRect()

crearea dégradé-urilor:
createLinearGradient()
createRadialGradient()
createPattern()
plus addColorStop() – oferită de interfața CanvasGradient
vezi și CSS3

specificarea de conținuturi textuale:
font
textAlign
fillText()
strokeText()
measureText()

suport pentru redarea umbrelor:
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur

manipularea conținutului grafic:
createImageData()
getImageData()
putImageData()
vezi interfața ImageData
developer.mozilla.org/docs/Web/API/ImageData

operații cu imagini:
drawImage()
save()
restore()
globalAlpha
globalCompositeOperation

<!DOCTYPE html>
studiu de caz: CanvasDemo
<canvas id="canvas" width="680" height="480"></canvas>
…
function deseneazaDiscuri() {
var context = document.getElementById('canvas').getContext('2d');
context.font = "3em serif"; // stabilirea parametrilor corpului de literă
context.strokeText("minune", 7, 33);
context.translate(74, 74); // ...plus translare
for (let i = 1; i < 5; i++) { // generarea 'inelelor' de discuri
context.save(); // salvarea contextului de redare
// stabilirea via CSS a culorii de umplere a discului curent + ajustarea aleatorie a transp.
context.fillStyle = 'rgba(33, ' + (74 * i) + ',' + (255 - 74 * i) + ',' + Math.random() + ')';
for (let j = 0; j < i * 6; j++) { // desenarea discurilor
context.rotate(Math.PI * 2 / (i * 6));
context.beginPath();
context.arc(0, i * 12.5, 5, 0, Math.PI * 2, true);
context.fill();
}
context.restore(); // restaurarea contextului de redare
}
}
// tratarea evenimentului click
document.body.addEventListener ("click", deseneazaDiscuri);
corola de minuni

un posibil rezultat al execuției programului
codul complet la jsfiddle.net/busaco/vwhz4a5c/

Sabin Buraga < busaco@infoiasi.ro >
de studiat și
developer.mozilla.org/docs/Web/API/Canvas_API
perfectionkills.com/exploring-canvas-drawing-techniques/
o suită de tutoriale:
www.html5canvastutorials.com

exemple de biblioteci:
Fabric Flotr2 Kinetic Paper
libCanvas Processing.js Rekapi
github.com/raphamorim/awesome-canvas

alternativă de redare:
conținut grafic 3D pe baza WebGL
implementare JavaScript a standardului
OpenGL ES 2.0 (Embedded Accelerated 3D Graphics)
www.khronos.org/opengles/
suport: Apple, AMD, Fujitsu, Google, Intel, NVIDIA, Samsung, Sony,…

alternativă de redare:
conținut grafic 3D pe baza WebGL
specificație furnizată de Khronos Group
WebGL 1.0 (curent), WebGL 2.0 (în lucru)
www.khronos.org/webgl/wiki/
developer.mozilla.org/docs/Web/WebGL

statistici privind suportul pentru WebGL
la nivel de desktop, platforme mobile, console de jocuri
webglstats.com

medii Web de dezvoltare:
WebGL Playground – webglplayground.net
WebGLStudio.js – github.com/jagenjo/webglstudio.js

Shader Editor inclus în Firefox
folosit la inspectarea shader-elor
editate cu instrumentul online Shdr
shdr.bkcore.com

Awesome WebGL – github.com/sjfricke/awesome-webgl
biblioteci / 3D engines: BabylonJS, c3DL, CopperLicht,
CubicVR, OSG, PhiloGL, SceneJS, Three.js,…
www.babylonjs-playground.com

Folosind WebGL se oferă premisele dezvoltării de aplicații
vizând realitatea virtuală (VR – Virtual Reality) și
realitatea îmbogățită (AR – Augmented Reality)
reality-virtuality continuum (Milgram & Kishino, 1994)
realitate mixtă (mixed reality)
www.slideshare.net/busaco/from-virtual-to-augmented-reality

Realitate virtuală cu WebVR
specificație deschisă – în lucru la W3C (octombrie 2017) –
permițând crearea de lumi virtuale pe desktop/mobil
în browser recurgând la senzori/dispozitive de tip headset

framework-uri/platforme de dezvoltare:
A-Frame – aframe.io
PlayCanvas – playcanvas.com
Sketchfab – sketchfab.com
Vizor – vizor.io
resurse pentru programatori:
webvr.info/developers/
developer.mozilla.org/Web/API/WebVR_API

suportul curent oferit de navigatoarele Web: webvr.rocks

Formulare HTML5
formularele Web pot include noi tipuri de câmpuri
(search tel url email date time number range color),
valorile putând fi eventual auto-completate
și/sau validate de browser
www.w3.org/TR/html5/forms.html
diveintohtml5.info/forms.html

<label>Adrese suplimentare:
<input type="email" multiple
list="adrese" name="cc" />
</label>
<datalist id="adrese">
<option value="tux@pinguin.info">tux@pinguin.info</option>
<option value="tuxy.pingu@pol.org">tuxy.pingu@pol.org</option>
<option value="tp@alt.undeva.org">tp@alt.undeva.org</option>
</datalist>
<input type="date" max="2001-12-31" name="zi-nastere" />
<input type="range" min="1" max="7" step="2" name="premii" />
<input type="color" name="culoare" />
<input type="search" pattern="[A-Za-z]+" placeholder="Caută cadouri..." />
nu există încă suport complet
pentru toate tipurile de controale de interacțiune
atributul multiple poate fi folosit
și la upload-ul mai multor fișiere

formulare HTML5 – testarea facilităților:
miketaylr.com/code/input-type-attr.html

Atribute definite de programator
(custom HTML5 attributes)
într-un document HTML5 pot fi incluse atribute proprii
prefixate cu data-
pot stoca valori private
disponibile la nivel de pagină/aplicație Web
developer.mozilla.org/Learn/HTML/Howto/Use_data_attributes

<div id="utilizator" data-id="1234" data-user="tux" data-date-of-birth>
Tuxy Pinguinescu</div>
var elem = document.querySelector ('#utilizator'); // obținem datele
// elem.id == 'utilizator'
// elem.dataset.id === '1234'
// elem.dataset.dateOfBirth === '' (data de naștere n-a fost precizată)
elem.dataset.dateOfBirth = '1994-12-17'; // stabilim când s-a născut
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
folosirea consolei navigatorului Web pentru
accesarea și modificarea atributelor data-
via obiectul dataset

testarea suportului pentru HTML5: html5test.com

episodul viitor:
API-uri JavaScript în contextul HTML5

CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5

More Related Content

What's hot (20)

Similar to CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5 (20)

More from Sabin Buraga (19)

CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5