Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
7. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
8. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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/TR/?tag=webapi
platform.html5.org
developer.mozilla.org/docs/Web/API
15. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
23. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
24. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<!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>
28. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<!-- 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)
41. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<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-urilor
necesare redării
L. Moreira, A hands-on introduction to video technology (2019)
github.com/leandromoreira/digital_video_introduction
42. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
57. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<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
58. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Embedded content
elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date
<!-- prezentare: Yoav Luft, Does JavaScript Adopt Functional Programming?
(Lambda Days, 14 august 2019) -->
<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>
59. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
65. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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);
};
66. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfața HTMLCanvasElement
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
86. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
89. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
90. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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,…)
91. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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.)
92. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<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>
100. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
101. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
102. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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/
109. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
113. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
121. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
122. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
<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
123. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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
125. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Alte API-uri de bază:
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
126. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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>
127. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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 evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG
128. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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;
};