View
5
Download
0
Category
Preview:
Citation preview
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
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
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
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
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
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
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
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>
<!-- Elemente și atribute SVG specificate în documentul HTML, recunoscute pe baza spațiului de nume SVG -->
<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg"><!-- o zonă rectangulară cu colțuri rotunjite --><rect x="50" y="50" rx="7" ry="7" width="450" height="150"
style="fill: #00CCEE; stroke: #3333CC;"/><!-- conținut textual --><text x="70" y="90" style="stroke: black; fill: gray; font-size: 32pt;">
SVG direct în browser...</text><!-- un cerc galben --><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>
<!-- definim un dégradé (gradient) liniar --><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" /><!-- o cale de redare --><path id="aPath" d="M15 50 C10 0 90 0 90 40" /><!-- un filtru cromatic --> <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
<!-- o formă rectangulară umplută cu dégradé-ul definit anterior --><rect x="1cm" y="1cm" width="6cm" height="1cm" round="1em"
fill="url(#aGradient)" />
<!-- folosim 4 instanțe ale pătratului definit, plasate la diverse coordonate și având diverse proprietăți grafice -->
<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" />
<!-- un text redat conform căii specificate --><text fill="red">
<!-- de studiat și http://www.w3.org/TR/SVG/fonts.html --><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"' />
<!-- tratăm evenimentul error pentru cazul în care nu există
suport pentru redarea unor resurse multimedia -->
<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
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
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
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
Embedded content
elementul track permite specificarea de piste (track-uri)ce pot include subtitrări, descrieri, capitole, meta-date
<!-- prezentare: Bill Parrott, Demystifying CORS (2017) -->
<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
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
Interfața HTMLCanvasElement
stipulată de recomandarea W3C privind HTML5
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Interfața HTMLCanvasElement
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
Interfața HTMLCanvasElement
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
Elementul canvas – interfața CanvasRenderingContext2D
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
Elementul canvas – interfața CanvasRenderingContext2D
manipularea zonelor rectangulare:
strokeRect()
fillRect()
clearRect()
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Elementul canvas – interfața CanvasRenderingContext2D
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
Elementul canvas – interfața CanvasRenderingContext2D
specificarea de conținuturi textuale:
font
textAlign
fillText()
strokeText()
measureText()
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Elementul canvas – interfața CanvasRenderingContext2D
suport pentru redarea umbrelor:
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Elementul canvas – interfața CanvasRenderingContext2D
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
Elementul canvas – interfața CanvasRenderingContext2D
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 < busaco@infoiasi.ro >
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
Interfața HTMLCanvasElement
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
Interfața HTMLCanvasElement
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
Conținut grafic 3D pe baza WebGL
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
Conținut grafic 3D pe baza WebGL
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
Conținut grafic 3D pe baza WebGL
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Conținut grafic 3D pe baza WebGL
un program WebGL constă din perechi de funcții:vertex shader + fragment shader
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
Conținut grafic 3D pe baza WebGL
un program WebGL constă din perechi de funcții:vertex shader + fragment shader
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="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
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
Alte API-uri de bază:
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
Alte API-uri de bază:
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
Alte API-uri de bază:
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
Alte API-uri de bază:
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
Alte API-uri de bază:
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;
};
Recommended