STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II)

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Full-Stack Web Development
christmasexperiments.com
API-uri JavaScript – partea II
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

“Walking on water and developing software
from a specification are easy if both are frozen.”
Edward Berard

Ce alte specificații/inițiative privind HTML5
pot fi folosite?

HTML5
lista API-urilor HTML5 existente: html5index.org
suportul dat de browser Web (mobil): whatwebcando.today

Aspecte referitoare la
interacțiunea cu utilizatorul

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

Pointer Events
recomandări W3C
nivelul 1:
www.w3.org/TR/pointerevents/
nivelul 2 (4 aprilie 2019):
www.w3.org/TR/pointerevents2/

interface PointerEvent : MouseEvent {
readonly attribute long pointerId;
readonly attribute double width;
readonly attribute double height;
readonly attribute float pressure;
readonly attribute float tangentialPressure;
readonly attribute long tiltX;
readonly attribute long tiltY;
readonly attribute long twist;
readonly attribute DOMString pointerType; // mouse, pen, touch
readonly attribute boolean isPrimary;
};
evenimente:
gotpointercapture lostpointercapture
pointerdown pointerup pointercancel
pointermove pointerover pointerout
pointerenter pointerleave

touch/pointer tests & demos
patrickhlauke.github.io/touch/

PointerLock API
oferă acces la date primare vizând mișcările mouse-ului
atunci când interacțiunea se axează (e „blocată”)
asupra unui element specific fără a se reda cursorul

PointerLock API
util pentru aplicații de editare/modelare 3D, jocuri 3D,…
recomandare W3C (2016):
www.w3.org/TR/pointerlock/
noua variantă (ciornă, 28 august 2019):
www.w3.org/TR/pointerlock-2/

exemplificări:
developer.mozilla.org/Web/API/Pointer_Lock_API
codepen.io/MSEdgeDev/details/zqYBbb

Clipboard API and Events
vizează manipularea clipboard-ului
în cadrul navigatorului Web
W3C Working Draft (5 iunie 2019)
www.w3.org/TR/clipboard-apis/

operațiile se desfășoară în mod sincron
evenimente: copy cut paste

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

accesarea clipboard-ului depinde de navigatorul Web
un ghid de utilizare:
www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Web Notifications
alertarea utilizatorului în afara contextului paginii Web
asupra apariției unui eveniment
recomandare a Consorțiului Web (2015)
www.w3.org/TR/notifications/
Notifications API HTML5 Living Standard (24 sept. 2019)
notifications.spec.whatwg.org/

[Exposed=(Window, Worker)] // notificările pot fi emise și de un worker Web
interface Notification : EventTarget {
static readonly attribute NotificationPermission permission;
[Exposed=Window] static Promise<NotificationPermission> requestPermission
(optional NotificationPermissionCallback deprecatedCallback);
static readonly attribute unsigned long maxActions;
attribute EventHandler onclick;
attribute EventHandler onshow;
attribute EventHandler onerror;
attribute EventHandler onclose;
readonly attribute DOMString title;
readonly attribute DOMString lang;
readonly attribute DOMString body;
readonly attribute DOMString tag;
readonly attribute USVString image;
readonly attribute USVString icon;
readonly attribute USVString badge;
[SameObject] readonly attribute FrozenArray<unsigned long> vibrate;
vezi Vibration API

[SameObject] readonly attribute FrozenArray<unsigned long> vibrate;
readonly attribute DOMTimeStamp timestamp;
readonly attribute boolean renotify;
readonly attribute boolean silent;
readonly attribute boolean requireInteraction;
[SameObject] readonly attribute any data;
[SameObject] readonly attribute FrozenArray<NotificationAction> actions;
void close();
};
// permisiuni privind notificările
enum NotificationPermission { "default", "denied", "granted" };
dictionary NotificationAction {
required DOMString action;
required DOMString title;
USVString icon;
};
callback NotificationPermissionCallback =
void (NotificationPermission permission);

// o notificare importantă
const notif = new Notification ("🎄 Web", {
body: "Ho, ho, ho! Vine vacanța!",
tag: "mesaj",
icon: "https://image.flaticon.com/icons/svg/2324/2324300.svg"
});
// închidem notificarea după 10 sec.
setTimeout (notif.close.bind(notif), 10000);
cod-sursă JS disponibil la jsfiddle.net/busaco/tf2uc1xy/

Web Notifications
tutorial + exemplificări:
developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
de experimentat și suita de exemple disponibile la
github.com/AurelioDeRosa/HTML5-API-demos

Controlul temporizării animațiilor
realizate via JavaScript
(timing control for script-based animations)
parte a standardului HTML 5.2
www.w3.org/TR/html52/webappapis.html#animation-frames

animațiile pot fi realizate:
declarativ
(e.g., via CSS sau elementul <animate> oferit de SVG)
ori
prin program
(implementate de un program JavaScript)

apare necesitatea de a cunoaște la nivel de cod
care e frecvența ideală de a actualiza conținutul
dorit a fi animat (animation frame update)
în funcție de capabilitățile disponibile la nivel de browser

metode noi specificate de interfața Window:
long requestAnimationFrame (FrameRequestCallback funcție)
semnalează navigatorului Web că o animație
realizată prin program trebuie să fie planificată

long requestAnimationFrame (FrameRequestCallback funcție)
semnalează navigatorului Web că o animație
realizată prin program trebuie să fie planificată
actualizarea va fi efectuată o singură dată

void cancelAnimationFrame (long handler)
anulează o cerere anterioară de actualizare a animației

resurse adiționale:
creativejs.com/resources/requestanimationframe/
developer.mozilla.org/Web/API/window.requestAnimationFrame

Web Animations
specificație vizând realizarea de animații prin program
la nivel de document sau element HTML
în stadiu de ciornă la Consorțiul Web (28 octombrie 2019)
drafts.csswg.org/web-animations/

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

studiu de caz: Moș Crăciun animat
<div id="moș-crăciun">🎄🎅</div>
…
#moș-crăciun { font-size: 3em; width: 133px; height: 133px;
text-shadow: 0.1em 0.1em 0.33em #693; }
…
const moșCrăciun = document.getElementById ("moș-crăciun");
moșCrăciun.animate ([ // obiecte de tip Keyframe
{ transform: 'translateX(0) translateY(0)', opacity: 0.74, easing: 'ease-out' },
{ transform: 'translateX(100%) translateY(100%) rotate(360deg)' },
{ transform: 'translateX(0) translateY(0)', opacity: 1, easing: 'ease-in' } ],
{ // atribute privind animațiile – vezi AnimationEffectTimingProperties
duration: 10000, // 10 sec.
iterations: Infinity // ad infinitum
}
);

studiu de caz: Moș Crăciun animat
codul-sursă este disponibil pe Web în cadrul JSFiddle:
jsfiddle.net/busaco/syk2o98z/

web-animations.github.io/web-animations-demos/
mozdevs.github.io/Animation-examples/
Alice in Web Animation Land
codepen.io/collection/bpEza/

WebRTC
comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer
WebRTC 1.0:
Real-time Communication Between Browsers
(specificație în lucru, 06 decembrie 2019)
w3c.github.io/webrtc-pc/

WebRTC
permite preluarea în timp-real a fluxurilor de date
audio/video și interschimbul acestora
între browser-ele Web fără a necesita un intermediar

WebRTC
utilizări:
tele-conferințe
interschimb de fișiere
managementul identității utilizatorului
asistarea/monitorizarea persoanelor
jocuri Web
…

WebRTC
API de interes:
MediaDevices
acces la dispozitivele de intrare conectate
(e.g., Webcam, microfon)
developer.mozilla.org/Web/API/MediaDevices

WebRTC
API de interes:
MediaDevices
metode: enumerateDevices() getSupportedConstraints()
getDisplayMedia() getUserMedia()
eveniment: ondevicechange

WebRTC
API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio)
furnizate de un senzor local – tipic, Webcam
Media Capture & Streams (W3C Candidate Rec., iulie 2019)
www.w3.org/TR/mediacapture-streams/

[Exposed=Window,
Constructor,
Constructor(MediaStream stream),
Constructor(sequence<MediaStreamTrack> tracks)]
interface MediaStream : EventTarget {
readonly attribute DOMString id;
sequence<MediaStreamTrack> getAudioTracks ();
sequence<MediaStreamTrack> getVideoTracks ();
sequence<MediaStreamTrack> getTracks ();
MediaStreamTrack? getTrackById (DOMString trackId);
void addTrack (MediaStreamTrack track);
void removeTrack (MediaStreamTrack track);
MediaStream clone ();
readonly attribute boolean active;
attribute EventHandler onaddtrack;
attribute EventHandler onremovetrack;
};
developer.mozilla.org/docs/Web/API/Media_Streams_API

[Exposed=Window]
interface MediaStreamTrack : EventTarget {
readonly attribute DOMString kind;
readonly attribute DOMString label;
attribute boolean enabled;
readonly attribute boolean muted;
attribute EventHandler onmute;
attribute EventHandler onunmute;
readonly attribute MediaStreamTrackState readyState;
attribute EventHandler onended;
MediaStreamTrack clone ();
void stop ();
MediaTrackCapabilities getCapabilities ();
MediaTrackConstraints getConstraints ();
MediaTrackSettings getSettings ();
Promise<void> applyConstraints
(optional MediaTrackConstraints constraints);
};

[Exposed=Window]
interface MediaStreamTrack : EventTarget {
readonly attribute DOMString kind;
readonly attribute DOMString label;
attribute boolean enabled;
readonly attribute boolean muted;
attribute EventHandler onmute;
attribute EventHandler onunmute;
readonly attribute MediaStreamTrackState readyState;
attribute EventHandler onended;
MediaStreamTrack clone ();
void stop ();
MediaTrackCapabilities getCapabilities ();
MediaTrackConstraints getConstraints ();
MediaTrackSettings getSettings ();
Promise<void> applyConstraints
(optional MediaTrackConstraints constraints);
}; width height aspectRatio frameRate latency
channelCount noiseSuppression etc.

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

tutoriale + exemplificări:
developer.mozilla.org/Web/API/MediaDevices/getUserMedia
www.html5rocks.com/en/tutorials/getusermedia/intro/
www.sitepoint.com/introduction-getusermedia-api/

WebRTC
API de interes:
RTCPeerConnection
permite ca doi utilizatori să comunice direct via browser
comunicațiile sunt coordonate pe baza unui canal
(e.g., instanțiat de un program via XMLHttpRequest/Fetch)

WebRTC
API de interes:
RTCPeerConnection
oferă suport și pentru controlul sesiunii de transfer al
datelor, plus trimiterea de mesaje speciale (signaling)
transmiterea efectivă poate adopta
un anumit protocol bidirecțional – HTTP, SIP, XMPP,…

a se experimenta și biblioteca adapter.js
github.com/webrtchacks/adapter

diverse maniere de comunicare specificate de WebRTC
detalii la www.webrtc.org

WebRTC
API de interes:
RTCDataChannel
interfață reprezentând un canal de comunicație
bidirecțională – via un protocol specific –
între două puncte terminale (peers)
permite interschimb eficient, în stilul peer-to-peer,
de date arbitrare, nu doar audio și/sau video

WebRTC
tutoriale + exemple (mai avansate):
www.html5rocks.com/en/tutorials/webrtc/basics/
developer.mozilla.org/Web/API/WebRTC_API/
webrtc.github.io/samples/
www.youtube.com/watch?v=PEXnbTyygi4
blog.mozilla.org/webrtc/learn-more/

iswebrtcreadyyet.com
suportul oferit de browser pentru diverse facilități WebRTC

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/

aplicație demonstrativă:
github.com/mdn/web-dictaphone

Streams API
suport pentru crearea, compunerea și prelucrarea
fluxurilor de date
HTML Living Standard (12 noiembrie 2019)
streams.spec.whatwg.org

Streams API
fluxurile abstractizează accesul la date stocate parțial
având asociate primitive I/O de nivel scăzut
consumator
flux citibil
(readable stream)
date
procesate
lacăt

Streams API
fluxurile pot fi înlănțuite – pipes:
ieșirea unui fluxintrarea altuia,
cu blocarea (locking) a acestor fluxuri

Streams API
backpressure = controlul „debitului” mesajelor
transmise prin pipe-uri

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

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

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

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/

Streams API
realizează o transformare a datelor – TransformStream –
și constă dintr-o pereche de fluxuri
(unul de scriere, celălalt de citire)

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

biblioteci utile:
Highland – highlandjs.org
Sequency – winterbe.github.io/sequency/

Web Audio API
procesarea și sintetizarea conținutului sonor
W3C Candidate Recommendation (18 septembrie 2018)
www.w3.org/TR/webaudio/
varianta cea mai recentă (02 decembrie 2019):
webaudio.github.io/web-audio-api/

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
…

Web Audio API
definirea unui „lanț” de procesări sonore:
AudioContext
AudioNode
AudioParam
BaseAudioContext

Web Audio API
specificarea surselor de sunet:
AudioBufferSourceNode
AudioScheduledSourceNode
AudioBuffer
MediaElementAudioSourceNode
MediaStreamAudioSourceNode
OscilattorNode

Web Audio API
filtre privind aplicarea de efecte audio:
DelayNode
DynamicsCompressorNode
PeriodicWave
WaveShaperNode
…

Web Audio API
definirea destinației unei prelucrări sonore:
AudioDestinationNode
MediaStreamAudioDestinationNode

Web Audio API
suport pentru analiza de sunet:
AnalyserNode
suport privind canalele sonore (mono ↔ stereo):
ChannelSplitterNode
ChannelMergerNode

Web Audio API
realizarea efectelor spațiale (audio spatialization):
AudioListener
PannerNode
StereoPannerNode
developer.mozilla.org/Web/API/Web_Audio_API/Web_audio_spatialization_basics

Web Audio API
suport referitor la diverse procesări
JavaScript și/sau Web Assembly via interfața Worklet
(variantă limitată a unui Web worker)

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/

Web Audio API
biblioteci JS:
Amplitudejs
Howler
Midi.js
SoundManager2
Teoria
WaveSurfer
altele la www.javascripting.com/search?q=audio

o aplicație Web demonstrativă: turtle.audio

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/

Recunoașterea & generarea vorbirii
specificații neoficiale:
Speech Recognition API
Speech Synthesis API
resurse pentru studiu:
www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
developer.mozilla.org/Web/API/Web_Speech_API/Using_the_Web_Speech_API

Recunoașterea vorbirii
exemplificări – dependente de browser:
www.audero.it/demo/web-speech-api-demo.html
zenorocha.github.io/voice-elements/

(în loc de) pauză

Există API-uri vizând interacțiunea cu
mediul în care rulează browser-ul Web?

Generic Sensor API
definește maniera generică a interacțiunii cu senzori
și de preluare a datelor de la aceștia
W3C Editor’s Draft (10 decembrie 2019)
w3c.github.io/sensors/

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

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

Generic Sensor API
senzorii pot fi:
de nivel scăzut (low-level sensor type)
caracterizați de implementarea reală
exemplu: giroscop

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)

[SecureContext, Exposed=Window]
interface Sensor : EventTarget {
readonly attribute boolean activated;
readonly attribute boolean hasReading;
readonly attribute DOMHighResTimeStamp? timestamp;
void start ();
void stop ();
attribute EventHandler onreading;
attribute EventHandler onactivate;
attribute EventHandler onerror;
};
dictionary SensorOptions {
double frequency;
};

Generic Sensor API
ciclul de viață vizând un senzor

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

proximitate (ciornă, 09 august 2019):
Proximity Sensor – w3c.github.io/proximity/
[Constructor (optional SensorOptions sensorOptions),
SecureContext, Exposed=Window]
interface ProximitySensor : Sensor {
readonly attribute double? distance;
readonly attribute double? max;
readonly attribute boolean? near;
};

Proximity Sensor
// șablon de utilizare
let senzor = new ProximitySensor ();
senzor.start ();
// la apariția datelor, scriem la consolă distanța
senzor.onreading = () => console.log (senzor.distance);
// semnalăm posibilele erori
senzor.onerror = ev => console.error (ev.error.name, ev.error.message);
…
senzor.stop ();

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/

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

Orientation Sensor
tratează modificarea orientării dispozitivului
în spațiul 3D cartezian
specificație în lucru (20 noiembrie 2019)
w3c.github.io/orientation-sensor/
înlocuiește DeviceOrientation Event Specification
implementată diferit de fiecare navigator Web

// tipul matrice de rotație
typedef (Float32Array or Float64Array or DOMMatrix) RotationMatrixType;
[SecureContext, Exposed=Window]
interface OrientationSensor : Sensor {
// 4 componente vizând orientarea dispozitivului
readonly attribute FrozenArray<double>? quaternion;
void populateMatrix(RotationMatrixType targetMatrix);
};
// sistemul local de coordonate poate fi dat de dispozitiv ori ecran
enum OrientationSensorLocalCoordinateSystem { "device", "screen" };
dictionary OrientationSensorOptions : SensorOptions {
OrientationSensorLocalCoordinateSystem referenceFrame = "device";
};

tutoriale, inclusiv exemplificări:
developers.google.com/web/updates/2017/09/sensors-for-the-web
intel.github.io/generic-sensor-demos/

The Screen Orientation API
specificația curentă vizând preluarea datelor
despre tipul și unghiul orientării ecranului dispozitivului
W3C Working Draft (02 noiembrie 2019)
www.w3.org/TR/screen-orientation/

la interfața Screen – specifică CSSOM (CSS Object Model) –
se include atributul orientation de tip ScreenOrientation
[Exposed=Window]
interface ScreenOrientation : EventTarget {
Promise<void> lock (OrientationLockType orientation);
void unlock ();
readonly attribute OrientationType type;
readonly attribute unsigned short angle;
attribute EventHandler onchange;
};

// tipuri vizând orientarea ecranului
enum OrientationType {
"portrait-primary", "portrait-secondary",
"landscape-primary", "landscape-secondary"
};
// tipuri referitoare la blocarea orientării ecranului
enum OrientationLockType {
"any", "natural", "landscape", "portrait",
"portrait-primary", "portrait-secondary",
"landscape-primary", "landscape-secondary"
};
pentru amănunte, a se parcurge:
developer.mozilla.org/Web/API/Screen/orientation

let redă = function() {
console.log ("Tip orientare: " + screen.orientation.type);
console.log ("Unghi orientare: " + screen.orientation.angle);
}
// afișarea noii orientări la fiecare schimbare a acesteia
screen.orientation.addEventListener ("change", redă);
// …plus redarea stării inițiale la încărcarea documentului
window.onload = redă;
caz tipic la platforma
de tip desktop

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

Remote Playback API
privește redarea la distanță a conținutului multimedia
via tehnologii de conectare cu/fără fir
extinde API-urile referitoare la conținut audio/video
în lucru (14 noeimbrie 2019)
w3c.github.io/remote-playback/

Geolocation API
determinarea locației geografice a dispozitivului
www.w3.org/TR/geolocation-API/

partial interface Navigator { // se include proprietatea la obiectul Navigator
readonly attribute Geolocation geolocation;
};
interface Geolocation {
// furnizează poziția geografică actuală
void getCurrentPosition (PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
// observă poziția curentă
long watchPosition (PositionCallback successCallback,
optional PositionErrorCallback errorCallback,
optional PositionOptions options);
// anulează observarea poziției geografice curente
void clearWatch (long watchId);
};
callback PositionCallback = void (Position position);
callback PositionErrorCallback = void (PositionError positionError);

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

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

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

Geolocation API
observații:
informațiile vor fi furnizate doar dacă programul rulează
într-un context „sigur” (HTTPS)
obținerea poziției geografice se realizează
numai cu acordul utilizatorului
developer.mozilla.org/Web/API/Geolocation/Using_geolocation

exemplu demonstrativ:
html5demos.com/geo/

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/

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

exemplificare:
googlechrome.github.io/samples/beacon/

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/

resurse + exemple:
serviceworke.rs/web-push.html
developers.google.com/web/fundamentals/push-notifications/

Vibration API
permite efectuarea de vibrații la nivel de dispozitiv
atunci când e necesar feedback tactil
W3C Recommendation (2016)
www.w3.org/TR/vibration/

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

un tutorial de interes:
code.tutsplus.com/tutorials/html5-vibration-api--mobile-22585

Battery Status API
manieră standardizată de a obține informații
referitoare la starea bateriei dispozitivului gazdă
W3C Editor’s Draft (25 septembrie 2019)
w3c.github.io/battery/

partial interface Navigator {
Promise<BatteryManager> getBattery();
};
[Exposed=Window]
interface BatteryManager : EventTarget {
readonly attribute boolean charging;
readonly attribute unrestricted double chargingTime;
readonly attribute unrestricted double dischargingTime;
readonly attribute double level;
attribute EventHandler onchargingchange;
attribute EventHandler onchargingtimechange;
attribute EventHandler ondischargingtimechange;
attribute EventHandler onlevelchange;
};

this feature is no longer
recommended (MDN, nov. 2019)

Gamepad
vizează interconectarea cu dispozitive de tip gamepad
via USB (Universal Serial Bus)
W3C Working Draft (14 noiembrie 2019)
w3c.github.io/gamepad/
developer.mozilla.org/Web/API/Gamepad_API

Gamepad
interfețe:
Gamepad
GamepadButton
GamepadEvent
evenimente:
gamepadconnected
gamepaddisconnected

resurse utile:
developer.mozilla.org/Web/API/Gamepad_API/Using_the_Gamepad_API
html5gamepad.com
www.flightarcade.com/learn/gamepad

Gamepad
suplimentar, se descriu extensii oferind suport
pentru interacțiuni mai avansate
(e.g., motion tracking, haptic feedback)
Gamepad Extensions (ciornă W3C, 14 noiembrie 2019)
w3c.github.io/gamepad/extensions.html

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

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

specificația Web Bluetooth API
nu este oficială
resurse +
exemple demonstrative:
google.github.io/physical-web/

inițiativa neoficială WebUSB pentru comunicarea
prin USB cu dispozitivele (în lucru, 03 decembrie 2019)
wicg.github.io/webusb/

Alte API-uri folositoare?

Payment Request API
specifică o manieră standard de efectuare
a cererilor de plată direct din cadrul navigatorului Web
în lucru la Consorțiul Web (06 decembrie 2019)
www.w3.org/TR/payment-request/
w3c.github.io/payment-request/

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ă

Payment Request API
resurse de interes
(tutoriale, exemple de cod, practici comune, ghiduri,…):
github.com/w3c/payment-request-info
biblioteci de tip polyfill:
digitalbazaar.com/wp-polyfill/

tutorial:
developers.google.com/web/fundamentals/payments/

Payment Request API
specificații adiționale – în lucru:
Payment Handler (29 noiembrie 2019)
w3c.github.io/payment-handler/
Payment Method: Basic Card (20 noiembrie 2019)
w3c.github.io/payment-method-basic-card/
Payment Method Manifest (09 septembrie 2019)
w3c.github.io/payment-method-manifest/

Specificații vizând securitatea browser-ului
Content Security Policy
a mechanism by which Web developers can control
the resources which a particular page can fetch or execute

www.w3.org/TR/CSP2/
noua versiune în lucru: CSP Level 3 (28 februarie 2019)
w3c.github.io/webappsec-csp/

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

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/

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/

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

Referrer Policy
definește maniera de acces la valoarea câmpului Referer
din rațiuni de securitate, intimitate etc.
specificație în lucru (04 decembrie 2019)
w3c.github.io/webappsec-referrer-policy/

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>

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/

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/

utilizează criptografie asimetrică cu chei publice și autentificare
multi-factor pentru managementul informațiilor de tip credentials
– a se consulta și Credential Management API (în lucru, ian. 2019):
www.w3.org/TR/credential-management-1/

aplicații demonstrative:
webauthn.bin.coffee
github.com/apowers313/webauthn-simple-app

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/

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

exemple:
developer.mozilla.org/Web/API/Permissions_API/Using_the_Permissions_API
developers.google.com/web/updates/2015/04/permissions-api-for-the-web

Web Components
componente software rulate de navigatorul Web
concepute în ECMAScript și bazate pe HTML, CSS, DOM
împachetate și reutilizate în funcție de context
github.com/w3c/webcomponents/

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)

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

Custom elements
elemente (marcaje) create de programator
incluse în arborele DOM
prin extinderea interfeței HTMLElement
parte a specificației HTML Living Standard
html.spec.whatwg.org/multipage/custom-elements.html

Custom elements
elementele noi sunt definite/accesate prin program
via CustomElementRegistry
detalii + exemple:
developer.mozilla.org/Web/API/CustomElementRegistry

exemple:
github.com/mdn/web-components-examples/

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

episodul viitor:
performanța aplicațiilor Web la nivel de client

STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II)

More Related Content

What's hot (6)

Similar to STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II) (20)

More from Sabin Buraga (20)

STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II)