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
6. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Pointer Events
unifică maniera de preluare de date – via mouse ori
suprafețe tactile – în urma interacțiunii cu utilizatorul
pointer = a hardware agnostic representation of
input devices that can target
a specific (set of) coordinate(s) on a screen
15. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Clipboard API and Events
tipuri MIME (Media-Types) uzuale ce pot fi folosite
pentru interschimb de date via clipboard:
text/plain text/uri-list text/csv text/html
application/json application/xml text/xml
31. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web Animations
interfețe: Animation KeyframeEffect AnimationTimeline
AnimationEvent DocumentTimeline EffectTiming
animațiile se realizează via metoda animate() și au asociate
diverse proprietăți similare celor oferite de CSS
detalii:
developer.mozilla.org/Web/API/Web_Animations_API/Using_the_Web_Animations_API
45. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
// accesul la conținut multimedia local furnizat de un senzor (cameră Web)
// pe baza acordului utilizatorului
const video = document.querySelector('video');
// pot fi impuse diverse constrângeri (dorim doar video)
let constraints = { audio: false, video: true };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
let videoTracks = stream.getVideoTracks();
console.log ('Am preluat un flux video de la ' + videoTracks[0].label);
stream.onremovetrack = function() { console.log('Flux-ul video s-a terminat. '); };
video.srcObject = stream; // alimentăm <video> cu fluxul captat
})
.catch(function(error) {
if (error.name === 'ConstraintNotSatisfiedError') { // rezoluție necorespunzătoare
}
if (error.name === 'PermissionDeniedError') { // acces la Webcam refuzat
} // de utilizator
}
54. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
MediaStream Recording API
preia date de la un obiect MediaStream
în vederea procesării
poate fi folosită în conjuncție cu WebRTC API
specificație în lucru (24 octombrie 2019)
w3c.github.io/mediacapture-record/
developer.mozilla.org/Web/API/MediaStream_Recording_API/
60. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Streams API
pot fi citite – ReadableStream – de către un consumator,
în regim pull sau push
fragmentele de date (chunks) sunt preluate dintr-o coadă
de mesaje, putând fi citit doar unul la un moment dat
datele binare pot fi citite via un flux de tip BYOB
(Bring Your Own Buffer): ReadableStreamBYOBReader
61. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
class ReadableStream { // definiție ES6
constructor(underlyingSource = {}, { size, highWaterMark } = {})
get locked () // este blocat (are asociat un lacăt)?
cancel (reason) // anulează operația de citire
getReader ()
// suport pentru realizarea de pipe-uri
pipeThrough ({ writable, readable }, options)
pipeTo (dest, { preventClose, preventAbort, preventCancel } = {})
// blochează fluxul, creând 2 fluxuri ramificate ce pot fi consumate
// independent (duplicarea sursei de date) – similar comenzii tee din Unix
tee ()
}
pentru detalii, a se studia:
developer.mozilla.org/Web/API/Streams_API/Concepts
developer.mozilla.org/Web/API/ReadableStream
62. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Streams API
pot fi scrise – WritableStream – de un producător
datele scrise (chunks) se „acumulează” într-un „dren”
(underlying sink) care abstractizează
efectuarea operațiilor I/O de nivel scăzut
starea unui flux de scriere poate fi controlată de
programator via WritableStreamDefaultController
63. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
class WritableStream { // definiție ES6
constructor (underlyingSink = {}, { size, highWaterMark = 1 } = {})
get locked () // este blocat (are asociat un lacăt)?
abort (reason) // abandonează scrierea
getWriter ()
}
detalii + exemple demonstrative:
developer.mozilla.org/Web/API/Streams_API/Using_writable_streams
github.com/mdn/dom-examples/tree/master/streams
jakearchibald.com/2016/streams-ftw/
65. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Streams API
realizează o transformare a datelor – TransformStream –
și constă dintr-o pereche de fluxuri
(unul de scriere, celălalt de citire)
posibile utilizări:
(de)compresie de date prin GZIP, aplicarea în timp-real de efecte
vizuale asupra datelor transmise de Webcam, (de)codificare a
textului într-un sistem P2P conversațional, conversie de formate
(e.g., CSV↔JSON), implementarea unui tunel folosind WebSocket-uri
68. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Se pot defini contexte audio
în care se pot aplica diverse procesări/filtre specifice
exemple:
mixaje
modificări ale volumului (e.g., fade-in)
interschimb de canale stereo
prelucrări în timp-real pe baza MediaStream
integrare cu WebRTC
efecte spațiale (e.g., concert hall, forest, amphitheater)
compresie
…
77. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web Audio API
exemplificări + tutoriale:
scenarii diverse de utilizare
developer.mozilla.org/Web/API/Web_Audio_API/Using_Web_Audio_API
developer.mozilla.org/Web/API/Web_Audio_API/Advanced_techniques
webaudio.github.io/demo-list/
interacțiuni multimedia via camera Web
github.com/chrisjohndigital/OpenLang
vizualizarea datelor sonore
codepen.io/collection/nWRpzj/
80. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web MIDI API
suport pentru protocolul MIDI (Musical Instrument
Digital Interface) ce permite interacțiunea dintre
instrumente/dispozitive muzicale și navigatorul Web
în lucru la Consorțiul Web (16 septembrie 2019)
webaudio.github.io/web-midi-api/
87. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Generic Sensor API
senzor fizic = măsoară anumite cantități fizice și oferă
date neprelucrate (raw sensor readings) privind un aspect
specific utilizatorului sau mediului înconjurător
fiecare informație oferită (observație) are o valoare +
timpul determinării acelei valori – reading timestamp
88. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Generic Sensor API
senzor fizic = măsoară anumite cantități fizice și oferă
date neprelucrate (raw sensor readings) privind un aspect
specific utilizatorului sau mediului înconjurător
fiecare informație oferită (observație) are o valoare +
timpul determinării acelei valori – reading timestamp
discrepanțele cunoscute între datele colectate și valoarea
reală ce trebuie măsurată sunt corectate prin calibrare
90. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Generic Sensor API
senzorii pot fi:
de nivel superior (high-level sensor type)
numiți după datele preluate
exemplificare: geolocalizator
(maniera prin care sunt calculate datele expuse nu este
necesar a fi cunoscută și poate depinde de anumiți factori)
94. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Senzori vizând mediul înconjurător
lumină ambientală (ciornă, 09 august 2019):
Ambient Light Sensor – w3c.github.io/ambient-light/
nivelul de luminozitate e dat de proprietatea illuminance
cu valori numerice în lucși
99. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Senzori de mișcare
în lucru la W3C (decembrie 2019)
de nivel scăzut:
accelerometru – w3c.github.io/accelerometer/
giroscop – w3c.github.io/gyroscope/
magnetometru – w3c.github.io/magnetometer/
detalii în Motion Sensors Explainer (august 2017)
www.w3.org/TR/motion-sensors/
100. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Senzori de mișcare
de nivel superior:
Tip de senzor Senzori fizici folosiți
Relative Orientation Sensor Accelerometer, Gyroscope
Absolute Orientation Sensor
Accelerometer, Magnetometer,
Gyroscope
Geomagnetic Orientation Sensor Accelerometer, Magnetometer
Gravity Sensor Accelerometer, Gyroscope
Linear Acceleration Sensor
Accelerometer, Gyroscope,
Magnetometer
specificații în lucru
109. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Presentation API
acces din browser la ecrane de prezentare a conținutului
(presentation displays) – e.g., proiector, monitor video,
TV conectat prin rețea – atașate clientului prin fir
(HDMI, DVI) sau fără fir (AirPlay, DLNA, Chromecast)
W3C Editor’s Draft (30 septembrie 2019)
w3c.github.io/presentation-api/
developer.mozilla.org/Web/API/Presentation_API
113. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
// informații despre poziția curentă + data observării acesteia
interface Position {
readonly attribute Coordinates coords;
readonly attribute DOMTimeStamp timestamp;
};
// coordonate geografice conform WGS84
interface Coordinates {
readonly attribute double latitude;
readonly attribute double longitude;
readonly attribute double? altitude;
readonly attribute double accuracy;
readonly attribute double? altitudeAccuracy;
readonly attribute double? heading;
readonly attribute double? speed;
};
114. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
// opțiuni privind preluarea poziției geografice
dictionary PositionOptions {
// se dorește acuratețe maximă?
boolean enableHighAccuracy = false;
// timp-limită (în milisecunde); dacă e depășit, se emite eroarea TIMEOUT
[Clamp] unsigned long timeout = 0xFFFFFFFF;
// programul poate accepta o valoare din cache a poziției (0 = poziția actuală)
[Clamp] unsigned long maximumAge = 0;
};
// erori raportate
interface PositionError {
const unsigned short PERMISSION_DENIED = 1;
const unsigned short POSITION_UNAVAILABLE = 2;
const unsigned short TIMEOUT = 3;
readonly attribute unsigned short code;
readonly attribute DOMString message;
};
115. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
navigator.geolocation.getCurrentPosition (
proceseazaDate, // funcție prelucrând datele privind poziția geografică
trateazaErori, // nu s-a putut determina localizarea
{ // diverși parametri de control
enableHighAccuracy: true,
timeout: 10000, // așteaptă max 10000 milisec. pentru a primi date
maximumAge: 8000 // preia din cache date privind poziția
} // dacă nu-s mai vechi de 8000 de milisecunde
);
function proceseazaDate (localizare) {
alert ('latitudine: ' + localizare.coords.latitude +
'longitudine: ' + localizare.coords.longitude);
}
a se folosi watchPosition()
pentru a prelua localizarea geografică în mod continuu
118. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Beacon API
se referă la realizarea de cereri unidirecționale
(one-way requests) pentru a obține date în mod asincron,
non-blocant, minimizând consumul de resurse
în lucru (02 decembrie 2019)
w3c.github.io/beacon/
119. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Beacon API
partial interface Navigator {
// transmite asincron date prin HTTP spre un server Web;
// întoarce true dacă browser-ul a plasat cu succes datele
// în coada de transfer
boolean sendBeacon (USVString url, optional BodyInit? data = null);
};
nu se oferă nicio funcție de tratare a răspunsului
developer.mozilla.org/Web/API/Navigator/sendBeacon
121. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Push API
facilitează trimiterea spre aplicația disponibilă la client
de mesaje via un serviciu de tip push
pe baza HTTP Push (RFC 8030)
aceste mesaje sunt livrate unui service worker
rulând în aceeași origine cu cea a aplicației
W3C Working Draft (03 octombrie 2019)
www.w3.org/TR/push-api/
124. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Vibration API
interfața Navigator este extinsă cu metoda vibrate ()
// vibrează timp de 2000 de milisecunde
navigator.vibrate (2000);
// vibrează 50 milisecunde, așteaptă 200, apoi vibrează 100 milisecunde
navigator.vibrate ([50, 200, 100]); // vibration pattern
// oprește orice acțiune de vibrare
navigator.vibrate (0);
de studiat și developer.mozilla.org/Web/API/Vibration_API
133. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web ubicuu la nivel fizic – physical Web
dispozitiv fizic capabil să expună un URL
e.g., prin Bluetooth pe baza Web Bluetooth API
github.com/WebBluetoothCG/web-bluetooth
scanner/browser = entitate ce scanează, recunoaște,
procesează și prezintă un set de URL-uri
proxy = un serviciu Web (în „nori”) opțional cu rol de
protejare a utilizatorului + îmbunătățire a performanței
134. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web ubicuu la nivel fizic – physical Web
☁
dispo-
zitiv
☗ difuzare
URL
client Web
analiză +
optimizare
proxy
aplicație/serviciu Web
procesare resursă
extragere meta-date
①
②
③
④
diverse direcții de interes:
automatizarea spațiilor de locuit (home automation),
industria auto (smart car), orașe „inteligente” (smart city),
reclame contextuale (smart advertising)
🖼
139. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Payment Request API
procesul de a realiza o plată
e modelat de interfața PaymentRequest
detaliile vizând plata sunt emise asincron
via PaymentRequestUpdateEvent
răspunsul primit de la procesatorul plătii
este specificat de interfața PaymentResponse
PaymentAddress – informații despre adresa poștală
145. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Content Security Policy
poate preveni atacuri – precum XSS (Cross-Site Scripting) –
pe baza câmpului-antet HTTP Content-Security-Policy
pentru detalii + exemple, de studiat:
content-security-policy.com
developers.google.com/web/fundamentals/security/csp/
developer.mozilla.org/Web/HTTP/CSP
146. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Upgrade Insecure Requests
allows authors to instruct a user agent to upgrade
a priori insecure resource requests to secure transport
before fetching them
(de la transferuri de date via HTTP la HTTPS)
www.w3.org/TR/upgrade-insecure-requests/
148. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Tracking Preference Expression (DNT)
vizează acțiunea de user tracking (colectarea datelor
despre utilizator, inclusiv platforma client a acestuia)
pe care o poate realiza un sit/aplicație Web
www.eff.org/issues/do-not-track
detalii la www.w3.org/TR/tracking-dnt/
149. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Tracking Preference Expression (DNT)
alături de câmpul-antet DNT dintr-un mesaj HTTP,
se definește atributul doNotTrack
și se specifică modul în care se poate permite
o operație de tip user tracking
developer.mozilla.org/Web/API/Navigator/doNotTrack
151. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Referrer Policy
regulile de acces – valori "" "same-origin" "strict-origin"
"no-referrer" "no-referrer-when-downgrade" "unsafe-url" etc. –
pot fi precizate în antetul HTTP (Referrer-Policy)
sau în cadrul documentului HTML cu atributul referrerpolicy
asociat elementelor <meta> <a> <img> <iframe> <link>
153. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Web Cryptography API
permite efectuarea de operații criptografice, inclusiv
generare/verificare de semnături, management de chei,
suport pentru tehnici criptografice actuale și altele
W3C Recommendation (2017)
www.w3.org/TR/WebCryptoAPI/
cea mai recentă variantă la w3c.github.io/webcrypto/
156. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Specificații vizând securitatea browser-ului
Web Authentication:
An API for accessing Public Key Credentials
gestionează atribute vizând identitatea utilizatorului
pe baza cheilor publice în scopul autentificării acestuia
recomandare W3C (04 martie 2019)
w3c.github.io/webauthn/
159. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Diverse biblioteci JS de interes
vizând asigurarea securității la nivel de browser Web:
SJCL (Stanford Javascript Crypto Library)
bitwiseshiftleft.github.io/sjcl/
jsSHA – a JS implementation of the SHA family
caligatio.github.io/jsSHA/
PKI.js – Public Key Infrastructure Management
pkijs.org
JS-XSS – sanitizes HTML to prevent Cross-Site Scripting
jsxss.com/en/
DOMPurity – a XSS sanitizer for HTML, MathML and SVG
jsxss.com/en/
160. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Permissions
specificație în lucru la Consorțiul Web (octombrie 2019)
w3c.github.io/permissions/
tipuri de permisiuni stabilite/revocate de utilizator:
geolocation notifications push camera microphone speaker
device-info background-fetch persistent-storage
ambient-light-sensor accelerometer clipboard display etc.
starea unei permisiuni – vezi PermissionStatus:
granted, denied, prompt
163. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Shadow tree (shadow DOM)
arbore DOM al cărui element rădăcină este un nod
(shadow root) – specificat de interfața ShadowRoot
atașat întotdeauna unui arbore de noduri
(nu poate exista de sine-stătător,
ci doar încapsulat de un document)
164. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
shadow tree (shadow DOM)
descris în DOM Living Standard (10 decembrie 2019)
dom.spec.whatwg.org/#shadow-trees
developer.mozilla.org/Web/Web_Components/Using_shadow_DOM
girliemac.com/presentation-slides/webcomponents/shadowdom.html
shadow
root
shadow
host
shadow
tree
168. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Templates (machete de prezentare)
<template> specifică o suită de marcaje HTML
ce pot fi inserate într-un document cu scopul reutilizării
amănunte + exemple:
html.spec.whatwg.org/multipage/scripting.html#the-template-element
developer.mozilla.org/en-US/docs/Web/HTML/Element/template