la nivel de client - Alexandru Ioan Cuza Universitybusaco/teach/courses/cliw/...ga .ro / ~ co HTML5 permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dezvoltarea aplicațiilor Webla nivel de client

suita de tehnologii HTML5codepen.io/soulwire/pen/Ffvlo

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Walt Disney

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

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

profs.in

fo.uaic.ro/~busa

co

HTML5

permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5

permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal

API-urile sunt definite de interfețedescrise cu limbajul declarativ WebIDL

W3C Recommendation, 2016

www.w3.org/TR/WebIDL/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5 Web API

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5 Web API


resurse de interes:www.w3.org/standards/techs/js

platform.html5.org

developer.mozilla.org/docs/Web/API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5

inițial, o propunere independentă de Consorțiul Web

WHATWG (Web Hypertext Application TechnologyWorking Group)

compus din Apple, Google, Mozilla, Microsoft

www.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

html.spec.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5

actualmente, standard al Consorțiului Web

W3C Recommendation (2014)www.w3.org/TR/html5/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5

actualmente, standard al Consorțiului Web

specificația cea mai recentă: HTML 5.2 (2017)www.w3.org/TR/html52/

în lucru (W3C Working Draft): HTML 5.3 (octombrie 2018)www.w3.org/TR/html53/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Ce aduce nou HTML5?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Relaxarea corectitudinii la nivel de sintaxă

HTML – text/html

și/sau

XHTML – application/xhtml+xml

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

specificarea tipului de documentse 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 numerămâne neschimbat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Câteva amănunte despre noile elemente HTML5?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Noi elemente de structurare (secțiuni)

în stilul POSH – Plain Old Semantic HTML

article, nav, aside, section, header, footer etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<!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 lawww.w3.org/TR/html/links.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<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: 06 decembrie 2018 /

<a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" title="…">CC</a>

<span itemscope="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 Buraga</span></a>

</span></h6>

</footer></body></html>

microdate HTML5folosind vocabularele schema.org

(vezi unul din cursurile anterioare)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

„scufundarea” altor tipuri de conținuturiîntr-un document HTML

conținut grafic – raster și/sau vectorialconținut sonorconținut video

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

svg

conținut grafic vectorialspecificat prin SVG (Scalable Vector Graphics)

un limbaj descriptiv bazat pe XML

www.w3.org/Graphics/SVG/

developer.mozilla.org/docs/Web/SVG

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

svg

se oferă inclusiv o suită de interfețe DOM specificeSVGCircleElement SVGEllipseElement SVGLineElement

SVGRectElement SVGMaskElement SVGDefsElement

SVGAnimateElement SVGStyleElement SVGFilterElement

și altele

developer.mozilla.org/Web/API/Document_Object_Model#SVG_interfaces

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

redarea conținutului grafic vectorial SVG

Firefoxla nivel de desktop

(Windows 10)

Safari pe platforma mobilă iOS 12 (iPhone)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm">

<title>Grafică vectorială cu SVG</title><defs>

<linearGradient id="aGradient">

<stop offset="33%" stop-color="#ADA" /><stop offset="74%" stop-color="#369" />

</linearGradient><rect id="aRectangle" width="15px" height="15px" rx="2" ry="2" fill="green" /><path id="aPath" d="M15 50 C10 0 90 0 90 40" /> <filter id="visualFilter"><feColorMatrix in="SourceGraphic" type="matrix"

values="0 0 0 0 01 0 1 1 00 1 1 0 00 0 0 1 0" />

</filter></defs>

C. Bulancea & S. Buraga (2004, 2014)

comenzi grafice(e.g., M=mută, C=cerc)

aplicarea unui filtruwww.w3.org/TR/SVG/filters.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

svg

specificația curentă: SVG 1.1 2nd Edition (2011)www.w3.org/TR/SVG/

SVG 2.0 (Candidate Rec., 4 octombrie 2018) www.w3.org/TR/SVG2/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

svg

specificații adiționale – detalii la svgwg.org

SVG AnimationsSVG IntegrationSVG StreamingSVG Markers

SVG PathsSVG Strokes

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

resurse + exemple demonstrative: github.com/willianjusten/awesome-svg

suportul cumulat pentru SVG în cadrul navigatoarelor, inclusiv pe platforme mobile: caniuse.com/#search=svg

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

examinarea codului SVG generat de Snap.svgfolosind instrumentele furnizate de browser

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

math

expresii matematice exprimate via limbajul MathMLspecificația curentă: MathML 3.0 (2010)

un limbaj declarativ bazat pe XML

www.w3.org/Math/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

o listă a instrumentelor software lawww.w3.org/Math/Software/

exemplu notabil: proiectul MathJaxwww.mathjax.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

elementele audio și video

implementează interfața HTMLMediaElement

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 șimetode ale interfeței

HTMLMediaElement

www.w3.org/TR/html5/semantics-embedded-content.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<video id="film" src="/media/tux.ogv"

controls="controls" autoplay="autoplay">

Nu există suport pentru elementul video… :-(

</video>

…

<script>

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

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<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-urilornecesare redării

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 parcurge www.w3.org/TR/html5/semantics-embedded-content.html#the-source-element

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Codec-uri uzuale:

H.264

MPEG4 – format comercial, susținut de Apple și Microsoft

actualmente, orice browser Web modern îl acceptă

www.h264info.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Codec-uri uzuale:

OGG

format deschis, de tip container, pentru stream-uri de conținuturi multimedia

www.xiph.org/ogg/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Codec-uri uzuale:

WebMo 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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coAlte 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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coAlte 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-201802-I/en

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Alte codec-uri:

AOMedia Video 1 (AV1)

format deschis de compresie a conținutului video dezvoltat de Alliance for Open Media

(Amazon, Apple, ARM, Cisco, Google, IBM, Intel, Microsoft, Mozilla, Netflix, NVIDIA)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coAlte codec-uri:

AOMedia Video 1 (AV1)

axat pe performanță, în special transfer de date multimedia în timp-real (WebRTC)

succesor al VP9 și alternativă la H.265

aomedia.org/av1-features/get-started/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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, mai 2018)

www.w3.org/TR/webvtt1/

developer.mozilla.org/Web/API/WebVTT_API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Embedded content

canvas

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Interfața HTMLCanvasElement

scop:generarea dinamică de conținut grafic

dependent de rezoluția curentă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


stipulată de recomandarea W3C privind HTML5

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

typedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;

interface HTMLCanvasElement : HTMLElement { // specifică zona rectangulară de redare a conținutului graficattribute unsigned long width; attribute unsigned long height;

// metodă care oferă contextul redării conținutuluiRenderingContext? getContext (DOMString contextId, any... args);

// metodă ce întoarce un URL folosind schema data:// pentru accesul la conținutul generatDOMString toDataURL

(optional DOMString type, any... args);// metodă oferind manieră de serializare (e.g., salvare) a imaginiivoid toBlob (FileCallback? _callback,

optional DOMString type, any... arguments); };

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


este asociată elementului HTML5 canvas

contextul 2D de redare a conținutului generat dinamicde script-urile operând asupra obiectului canvas este

specificat formal de interfața CanvasRenderingContext2D

developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Elementul canvas – interfața CanvasRenderingContext2D

transformări geometrice de bază:

scale()

rotate()

translate()

transform()

setTransform()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


generarea de căi grafice (paths):

lineTo() moveTo() rect() arc() fill() stroke() clip()

arcTo() quadraticCurveTo() bezierCurveTo()

beginPath() closePath()

isPointInPath()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


manipularea zonelor rectangulare:

strokeRect()

fillRect()

clearRect()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


crearea dégradé-urilor:

createLinearGradient()

createRadialGradient()

createPattern()

plus addColorStop() – oferită de interfața CanvasGradient

vezi și CSS3

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


specificarea de conținuturi textuale:

font

textAlign

fillText()

strokeText()

measureText()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


suport pentru redarea umbrelor:

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


manipularea conținutului grafic:

createImageData()

getImageData()

putImageData()

vezi interfața ImageData

developer.mozilla.org/docs/Web/API/ImageData

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


operații cu imagini:

drawImage()

save()

restore()

globalAlpha

globalCompositeOperation

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<!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 discuricontext.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 discurilorcontext.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 clickdocument.body.addEventListener ("click", deseneazaDiscuri);

corola de minuni

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Sabin Buraga < [email protected] >

o suită de tutoriale:www.html5canvastutorials.com

Sabin Buraga < [email protected] >

Resurse suplimentare:

developer.mozilla.org/docs/Web/API/Canvas_API

goalkicker.com/HTML5CanvasBook/

github.com/raphamorim/awesome-canvas

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Specificație suplimentară:

Compositing and Blending Level 1(W3C Candidate Recommendation, 2015)

compunere și suprapunere a mai multor elemente grafice în cadrul unei zone de redare

www.w3.org/TR/compositing-1/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

în cazul <canvas>

operațiile grafice se pot preciza via proprietatateaglobalCompositeOperation

developer.mozilla.org/Web/API/CanvasRenderingContext2D/globalCompositeOperation

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

implementare JavaScript a standarduluiOpenGL ES (Embedded Accelerated 3D Graphics)

www.khronos.org/opengles/

suport: Apple, AMD, Fujitsu, Google, Intel, NVIDIA, Samsung, Sony,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


alternativă de redare:

conținut grafic 2D/3D pe baza WebGL

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Conținut grafic 3D pe baza WebGL

specificație furnizată de Khronos GroupWebGL 1.0 (standard curent – din 2014)WebGL 2.0 (în lucru, 26 octombrie 2018)

www.khronos.org/webgl/wiki/

developer.mozilla.org/docs/Web/WebGL

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


API HTML5 oferit de navigatoarele Web actuale via procesări grafice efectuate la nivel de GPU

tutoriale de interes:webglfundamentals.org

webgl2fundamentals.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



acestea sunt scrise în limbajul GLSL ES(Graphics Library Shader Language for Embedded Systems)

inspirat de C/C++specificat de OpenGL ES

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<script id="shader-vs" type="x-shader/x-vertex">

// codul-sursă implementând un vertex shader (GLSL ES)

</script>

<script id="shader-fs" type="x-shader/x-fragment">

// codul-sursă al unui fragment shader (GLSL ES)

</script>

<script type="application/javascript">

// cod JavaScript recurgând la WebGL

</script>

…

<body onload="webGLStart ();">

<canvas id="spatiu3D" width="1024" height="768"></canvas>

</body>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Shader Editor inclus în Firefoxfolosit la inspectarea shader-elor

editate cu instrumentul online Shdrshdr.bkcore.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

depanarea codului WebGL via instrumentul oferit de Firefox pentru vizualizarea conținutului redat în <canvas>

aici: tdhooper.github.io/dragon-snake/preview/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

medii Web de dezvoltare:WebGL Playground – webglplayground.net

WebGLStudio.js – github.com/jagenjo/webglstudio.js

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

biblioteci + 3D engines: BabylonJS, c3DL, CopperLicht, CubicVR, OSG, PhiloGL, SceneJS, Three.js,…

www.babylonjs-playground.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

resurse la Awesome WebGLgithub.com/sjfricke/awesome-webgl

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coExperimente + alte aspecte de interes:

13 Games in ≤ 13kB of JavaScript – js13kGames 2018blog.github.com/2018-10-05-js13kgames-highlights-2018/

Web Audio Visualizations WebGL (Three.js)/Canvascodepen.io/collection/nWRpzj/

WebGL Insightswebglinsights.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Realitate virtuală/îmbogățită/mixtă cu WebXR

specificație deschisă – în lucru la W3C (noiembrie 2018) –permițând crearea de lumi virtuale pe desktop/mobil

în browser recurgând la senzori/dispozitive de tip headset

inițiativă anterioară: WebVR

immersive-web.github.io/webxr/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coRealitate virtuală cu WebXR

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coRealitate virtuală cu WebVR

suportul curent oferit de navigatoarele Web: webvr.rocks

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

API-uri HTML5 folositoare în contextulredării conținutului multimedia

de către browser-ul Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Fullscreen API

specificație în lucru (2 noiembrie 2018), dar implementată de majoritatea navigatoarelor

fullscreen.spec.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Fullscreen API

metode: requestFullscreen() exitFullscreen()

proprietăți: fullScreenElement fullScreenEnabled

evenimente: onfullscreenchange onfullscreenerror

detalii la developer.mozilla.org/Web/API/Fullscreen_API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Page Visibility

determinarea stării curente de vizibilitate a unei pagini

Page Visibility Level 1recomandarea inițială (2013)

Page Visibility Level 2specificație în curs de standardizare (octombrie 2018)

w3c.github.io/page-visibility/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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; // documentul e ascuns?

readonly attribute VisibilityState visibilityState; // starea vizibilității

// tratarea evenimentului schimbării vizibilității

attribute EventHandler onvisibilitychange;

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

// auto-rulare a filmului dacă documentul e vizibil

if (document.visibilityState == "visible") {

video.play ();

}

function trateazăModificareaVizibilității () {

if (document.visibilityState == "hidden") { // dacă e ascuns, oprim filmul

video.pause ();

} else {

video.play ();

}

}

document.addEventListener ('visibilitychange',

trateazăModificareaVizibilității, false);

de studiat developer.mozilla.org/Web/API/Page_Visibility_API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

www.w3.org/TR/html5/forms.html

diveintohtml5.info/forms.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<label>Adrese suplimentare:<input type="email" multiple

list="adrese" name="cc" /></label><datalist id="adrese">

<option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

bibliotecă JavaScript (polyfill):github.com/GoogleChrome/dialog-polyfill

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Atribute definite de programator(custom HTML5 attributes)

într-un document HTML5 pot fi incluse atribute propriiprefixate cu data-

pot stoca valori private disponibile la nivel de pagină/aplicație Web

developer.mozilla.org/Learn/HTML/Howto/Use_data_attributes

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


editing API

document.designMode="on"

întreg documentul poate fi editat la nivel local

amănunte lawww.w3.org/TR/html5/editing.html#user-interaction-editing

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


editing API

execuția de script-uri asupra selecției curentesau la poziția curentă a cursorului de text

metode: execCommand()

queryCommandEnabled() queryCommandState()

queryCommandSupported() etc.

developer.mozilla.org/Web/API/Document/execCommand

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


editing API

suport pentru verificare ortografică (spelling checking)atributul spellCheck + metoda forceSpellCheck()

<div contenteditable="true">

<span spellcheck="false">Hell</span><em>o!</em>

</div>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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 evenimentelorsuport pentru scripting în alte limbaje – e.g., SVG

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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;

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

testarea suportului pentru HTML5: html5test.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

episodul viitor: API-uri JavaScript în contextul HTML5

Documents

la nivel de client - Alexandru Ioan Cuza Universitybusaco/teach/courses/cliw/...ga .ro / ~ co HTML5 permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate