STAW 08/12: Programare Web. Suita de tehnologii HTML5

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
codepen.io/soulwire/pen/Ffvlo
Full-Stack Web Development
suita de tehnologii HTML5
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

“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/
noua versiune în lucru (nov. 2019): heycam.github.io/webidl/

HTML5 Web API
suita de API-uri JavaScript (ECMAScript) disponibile
– la nivel de client – pentru dezvoltarea de aplicații

HTML5 Web API
arii de interes: grafică și tipografie, multimedia,
interacțiune cu utilizatorul, stocare și fișiere, transfer
în timp-real, componente Web, performanță, securitate

HTML5 Web API
resurse de interes:
www.w3.org/TR/?tag=webapi
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, Google, Mozilla, Microsoft
www.whatwg.org

html.spec.whatwg.org

HTML5
actualmente, standard al Consorțiului Web
W3C Recommendation (2014)
www.w3.org/TR/html5/

HTML5
actualmente, standard al Consorțiului Web
specificația cea mai recentă: HTML 5.2 (2017)
în lucru (W3C Working Draft): HTML 5.3 (octombrie 2018)

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/TR/?tag=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
main, 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 materiei / STAW</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Sabin Buraga - https://profs.info.uaic.ro/~busaco/" />
<link rel="stylesheet" href="./web.css" />
</head>
<body>
<header>
<h1 lang="en">Full-Stack Web Development</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="#week9" title="…">Săptămâna 9</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="https://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: 26 noiembrie 2019 /
<a rel="license"
href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="…">CC</a>
<span itemid="#busaco" itemscope="" itemtype="http://schema.org/Person">
<a href="https://profs.info.uaic.ro/~busaco/" title="Spre situl Web al titularului…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin-Corneliu Buraga</span></a>
</span>
</h6>
</footer>
</body>
</html>
microdate HTML5
folosind vocabularele schema.org
(vezi unul din cursurile viitoare)

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

Embedded content
svg
se oferă inclusiv o suită de interfețe DOM specifice
SVGCircleElement SVGEllipseElement SVGLineElement
SVGRectElement SVGMaskElement SVGDefsElement
SVGAnimateElement SVGStyleElement SVGFilterElement
și altele
developer.mozilla.org/Web/API/Document_Object_Model#SVG_interfaces

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

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

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

SVG Filter Playground – yoksel.github.io/svg-filters/

Embedded content
svg
specificația curentă: SVG 1.1 2nd Edition (2011)
în lucru: SVG 2.0 (Candidate Rec., 4 octombrie 2018)
www.w3.org/TR/SVG/
resurse + exemple demonstrative:
github.com/willianjusten/awesome-svg

Embedded content
svg
specificații adiționale – detalii la svgwg.org
SVG Animations
SVG Integration
SVG Streaming
SVG Markers
SVG Paths
SVG Strokes

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 Snap.svg
folosind instrumentele furnizate de browser

Embedded content
math
expresii matematice exprimate via limbajul MathML
specificația curentă: MathML 3.0 (2010)
un limbaj declarativ bazat pe XML
www.w3.org/Math/

o listă a instrumentelor software la
www.w3.org/wiki/Math_Tools
exemplu notabil: proiectul MathJax
www.mathjax.org

Embedded content
alături de elementele img, iframe, embed și object,
sunt permise picture, 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
www.w3.org/TR/html5/semantics-embedded-content.html

<video id="film" src="/media/tux.ogv"
controls="controls" autoplay="autoplay">
Nu există suport pentru elementul video… :-(
</video>
…
<script>
// preluăm conținutul video
let 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

<video controls autoplay>
<source src='fii-absolvent.mp4'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

<source src='fii-absolvent.mkv'
type='video/x-matroska; codecs="theora, vorbis"'
onerror="fallback(parentNode)" />
<source src='fii-absolvent.oga'
type='audio/ogg; codecs=flac' />
…
</video>
precizarea codec-urilor
necesare redării
L. Moreira, A hands-on introduction to video technology (2019)
github.com/leandromoreira/digital_video_introduction

function fallback(video) {
// replace <video> with its contents via DOM
while (video.hasChildNodes()) {
if (video.firstChild instanceof HTMLSourceElement)
video.removeChild(video.firstChild);
else
video.parentNode.insertBefore(video.firstChild, video);
}
video.parentNode.removeChild(video);
}
pentru amănunte, a se studia
html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

Codec-uri uzuale:
H.264
MPEG4 – format comercial, susținut de Apple și Microsoft
actualmente, orice browser Web modern îl acceptă
www.h264info.com

Codec-uri uzuale:
OGG
format deschis, de tip container,
pentru stream-uri de conținuturi multimedia
www.xiph.org/ogg/

suportul cumulat oferit de navigatoarele Web (mobile)
pentru Ogg Vorbis audio și Ogg/Theora video

Codec-uri uzuale:
WebM
o inițiativă Google – open source
format structurat inspirat de Matroska,
pentru înmagazinarea de conținuturi audio – compresate
cu Opus ori Vorbis – și/sau video – compresate cu
codec-urile VP8 sau VP9
www.webmproject.org

Alte codec-uri:
WebP
format propus de Google pentru imagini cu/fără pierderi,
oferind suport și pentru animații sau transparență
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
tools.ietf.org/html/rfc6716

Alte codec-uri:
HEVC/H.265
standard de compresie video eficientă propus de ITU
(International Telecommunication Union)
succesor al H.264
www.itu.int/rec/T-REC-H.265

Alte codec-uri:
AOMedia Video 1 (AV1)
format deschis de compresie a conținutului video
dezvoltat de Alliance for Open Media
(fondatori: Amazon, Apple, ARM, Cisco, Google, IBM,
Intel, Microsoft, Mozilla, Netflix, NVIDIA, Tencent)

Alte codec-uri:
AOMedia Video 1 (AV1)
axat asupra performanței, în special transfer de date
multimedia în timp-real (WebRTC)
succesor al VP9 și alternativă la H.265
aomedia.org/av1-features/get-started/

Embedded content
elementul picture e un container ce poate include surse
multiple de imagini ce vor fi redate de clientul Web în
funcție de context: rezoluție, format,…

responsive images
resurse de interes:
responsiveimages.org

<picture>
<source media="print" srcset="peisaj_maxim.jpg" />
<source media="(max-width: 480px)" srcset="peisaj_mic.jpg" />
<source media="(max-width: 640px)" srcset="peisaj_mediu.jpg" />
<source media="(max-width: 1024px)"
srcset="peisaj_mare.jpg, peisaj_super_mare.jpg 2x" />
<img src="peisaj_mare.jpg" alt="Peisaj din Iași" />
</picture>
exemple demonstrative la
responsiveimages.org/demos/
media queries

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/javascript-functional-programming/">
<track kind="subtitles" src="subs.vtt" srclang="en" label="English" />
<track kind="captions" src="..." srclang="en"
label="English for the Hard of Hearing" />
<track kind="subtitles" src="subs-ro.vtt" srclang="ro" label="Românește" />
</video>

Embedded content
maniera de redare a conținutului textual (e.g., subtitrări)
asociat resurselor multimedia se precizează
via formatul WebVTT – Web Video Text Tracks
(W3C Candidate Recommendation, aprilie 2019)
www.w3.org/TR/webvtt1/
developer.mozilla.org/Web/API/WebVTT_API

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 >
o suită de tutoriale:
www.html5canvastutorials.com

Sabin Buraga < busaco@infoiasi.ro >
Resurse suplimentare:
developer.mozilla.org/docs/Web/API/Canvas_API
goalkicker.com/HTML5CanvasBook/
github.com/raphamorim/awesome-canvas

exemple de biblioteci:
Fabric.js iio.js Konva p5.js Paper.js
Pixi.js Processing.js Rekapi Sketch

Specificație suplimentară:
Compositing and Blending Level 1
(în lucru la Consorțiul Web, decembrie 2018)
compunere și suprapunere a mai multor elemente grafice
în cadrul unei zone de redare
drafts.fxtf.org/compositing-1/

în cazul <canvas>
operațiile grafice se pot
preciza via proprietatatea
globalCompositeOperation
developer.mozilla.org/Web/API/CanvasRenderingContext2D/globalCompositeOperation

(în loc de) pauză

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

alternativă de redare:
conținut grafic 2D/3D pe baza WebGL

Conținut grafic 3D pe baza WebGL
specificație furnizată de Khronos Group
WebGL 1.0 (standard curent – din 2014)
WebGL 2.0 (în lucru, 10 mai 2019)
www.khronos.org/webgl/wiki/
developer.mozilla.org/docs/Web/WebGL

API HTML5 oferit de navigatoarele Web actuale
via procesări grafice efectuate la nivel de GPU
tutoriale de interes:
webglfundamentals.org
webgl2fundamentals.org

un program WebGL constă din perechi de funcții:
vertex shader + fragment shader

acestea sunt scrise în limbajul GLSL ES
(Graphics Library Shader Language for Embedded Systems)
inspirat de C/C++
specificat de OpenGL ES

vertex shader – calculează poziții de obiecte de tip vertex
pentru a reda (rasterize) primitive grafice
– puncte, linii, triunghiuri –
conform unor atribute specificate via valori
ale unor tipuri de date (float, vec2, vec3, vec4, mat2, mat3,…)

fragment shader – calculează culoarea
pentru fiecare pixel al primitivei grafice desenate
(în funcție de anumiți factori: transparență, luminozitate,
textură, compoziție grafică etc.)

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

depanarea codului WebGL via instrumentul oferit de
Firefox pentru vizualizarea conținutului redat în <canvas>
aici: tdhooper.github.io/dragon-snake/preview/

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

biblioteci + 3D engines: BabylonJS, c3DL, CopperLicht,
CubicVR, OSG, PhiloGL, SceneJS, Three.js,…
www.babylonjs-playground.com

statistici privind suportul pentru WebGL 2 (desktop,
platforme mobile, console de jocuri) – webglstats.com

verificarea suportului vizând WebGL 2
oferit de browser-ul Web curent: webglreport.com/?v=2

resurse la Awesome WebGL
github.com/sjfricke/awesome-webgl

Experimente + alte aspecte de interes:
Games in ≤ 13kB of JavaScript – Js13kGames
js13kgames.com
Web Audio Visualizations WebGL (Three.js)/Canvas
codepen.io/collection/nWRpzj/
WebGL Insights
webglinsights.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ă/îmbogățită/mixtă cu WebXR
specificație deschisă – în lucru la W3C (21 nov. 2019) –
permițând crearea de lumi virtuale pe desktop/mobil
în browser recurgând la senzori și/sau
dispozitive de tip headset
inițiativă anterioară: WebVR
immersive-web.github.io/webxr/

în lipsa dispozitivului real, se poate recurge la emulatoare
oferite ca extensii pentru navigatorului Web
WebXR Emulator
blog.mozvr.com/webxr-emulator-extension/

Realitate virtuală cu WebXR
framework-uri/platforme de dezvoltare:
A-Frame – aframe.io
PlayCanvas – playcanvas.com
React 360 – facebook.github.io/react-360/
Sketchfab – sketchfab.com
Vizor – vizor.io
resurse pentru programatori:
webvr.info/developers/
developer.mozilla.org/docs/Web/API/WebXR_Device_API

Realitate virtuală cu WebVR
suportul curent oferit de
navigatoarele Web: webvr.rocks

API-uri HTML5 folositoare în contextul
redării conținutului multimedia
de către browser-ul Web?

Fullscreen API
specificație HTML Living Standard (29 septembrie 2019),
implementată (parțial) de navigatoarele moderne
fullscreen.spec.whatwg.org

Fullscreen API
metode: requestFullscreen() exitFullscreen()
proprietăți: fullScreenElement fullScreenEnabled
evenimente: onfullscreenchange onfullscreenerror
detalii la developer.mozilla.org/Web/API/Fullscreen_API

Fullscreen API
<video controls="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

Page Visibility
determinarea stării curente de vizibilitate a unei pagini
Page Visibility Level 1
recomandarea inițială (2013)
Page Visibility Level 2
specificație în curs de standardizare (8 octombrie 2019)
w3c.github.io/page-visibility/

Page Visibility
extinde interfața Document cu următoarele facilități:
enum VisibilityState { "hidden", "visible" };
// la definiția interfeței Document se adaugă următoarele:
partial interface Document {
readonly attribute boolean hidden; // proprietate demodată
readonly attribute VisibilityState visibilityState; // starea vizibilității
// tratarea evenimentului schimbării vizibilității
attribute EventHandler onvisibilitychange;
};

exemplu demonstrativ:
www.audero.it/demo/page-visibility-api-demo.html

Interactivitate
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
html.spec.whatwg.org/multipage/forms.html
diveintohtml5.info/forms.html

<label for="adr">Adrese:</label>
<input type="email" list="adrese"
name="adr" id="adr" />
<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

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

Interactivitate
HTML 5.2 include elementul <dialog>
pentru interacțiunea cu utilizatorul
interface HTMLDialogElement : HTMLElement {
attribute boolean open;
attribute DOMString returnValue;
void show(optional (MouseEvent or Element) anchor);
void showModal(optional (MouseEvent or Element) anchor);
void close(optional DOMString returnValue);
};
www.w3.org/TR/html52/interactive-elements.html#the-dialog-element

exemple: keithjgrant.com/posts/2018/01/meet-the-new-dialog-element/

bibliotecă JavaScript (polyfill):
github.com/GoogleChrome/dialog-polyfill
alte exemplificări:
demo.agektmr.com/dialog/

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 = '1998-12-06'; // 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

Alte API-uri de bază:
editing API
interface ElementContentEditable {
attribute DOMString contentEditable;
readonly attribute boolean isContentEditable; // conținutul este editabil?
};
conținutul unui element poate fi marcat ca fiind editabil
via atributul element.contentEditable

editing API
document.designMode="on"
întreg documentul poate fi editat la nivel local
detalii la html.spec.whatwg.org/multipage/interaction.html

editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode: execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.
developer.mozilla.org/Web/API/Document/execCommand

editing API
suport pentru verificare ortografică (spelling checking)
atributul spellCheck + metoda forceSpellCheck()
<div contenteditable="true">
<span spellcheck="false">Hell</span><em>o!</em>
</div>

scripting
suport pentru execuția de cod
în contextul unui document HTML:
procesarea elementelor <script>
navigarea via URL-uri folosind schema javascript:
managementul funcțiilor de tratare a evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG

scripting
interfața ErrorEvent pentru raportarea erorilor
interface ErrorEvent : Event {
readonly attribute DOMString message;
readonly attribute DOMString filename;
readonly attribute unsigned long lineno;
readonly attribute unsigned long colno;
readonly attribute any error;
};

testarea suportului pentru HTML5: html5test.com

episodul viitor:
API-uri JavaScript în contextul HTML5

STAW 08/12: Programare Web. Suita de tehnologii HTML5

More Related Content

What's hot (11)

Similar to STAW 08/12: Programare Web. Suita de tehnologii HTML5 (20)

More from Sabin Buraga (19)

STAW 08/12: Programare Web. Suita de tehnologii HTML5