CLIW 2017-2018 (11/12) Programare Web. API-uri JavaScript în contextul HTML5 (II)

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web la nivel de client
API-uri JavaScript oferite de browser – continuare
christmasexperiments.com

“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?

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
recomandare W3C: www.w3.org/TR/pointerevents/
în lucru (din 2016): 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
util pentru aplicații de editare/modelare 3D, jocuri 3D,…
recomandare W3C (2016): www.w3.org/TR/pointerlock/
Editor’s Draft (august 2017): www.w3.org/TR/pointerlock-2/

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

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

// extinde interfața Navigator cu proprietatea clipboard
partial interface Navigator {
[SecureContext, SameObject] readonly attribute Clipboard clipboard;
};
[SecureContext, Exposed=Window] interface Clipboard : EventTarget {
// preluarea datelor din clipboard
Promise<DataTransfer> read ();
Promise<DOMString> readText ();
// scrierea datelor în clipboard
Promise<void> write (DataTransfer data);
Promise<void> writeText (DOMString data);
};
operațiile se desfășoară în mod asincron
evenimente: copy cut paste

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

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 (august 2017)
notifications.spec.whatwg.org/

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 onerror;
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;
readonly attribute USVString sound;
[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);

Web Notifications
// o notificare de interes
var notif = new Notification ("Ha, ha! Ai primit o notă la CLIW!",
{ icon: "nota10.svg", tag: "mesaj" });
onclick = function () { afișeazăMesaj (this); };
tutorial + exemple:
developer.mozilla.org/docs/WebAPI/Using_Web_Notifications

Web Notifications
de experimentat și suita de exemple disponibile la
github.com/AurelioDeRosa/HTML5-API-demos

Page Visibility
determinarea stării curente de vizibilitate a unei pagini
Page Visibility Level 1
recomandarea inițială (2013)
Page Visibility Level 2
specificație în curs de standardizare (2017)
www.w3.org/TR/page-visibility/

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

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

Controlul temporizării animațiilor
realizate via JavaScript
(timing control for script-based animations)
parte a standardului HTML 5.2
(W3C Recommendation, 14 decembrie 2017)
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 realizată 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
în stadiu de ciornă la Consorțiul Web (4 decembrie 2017)
drafts.csswg.org/web-animations-1/

WebRTC
comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer
WebRTC 1.0: Real-time Communication Between Browsers
(W3C Candidate Recommendation, noiembrie 2017)
www.w3.org/TR/webrtc/

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
permite preluarea în timp-real a fluxurilor de date
audio/video și interschimbul acestora
între browser-ele Web fără a necesita un intermediar
utilizări:
tele-conferințe
interschimb de fișiere
managementul identității utilizatorului
…

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., oct. 2017)
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 id;
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);
attribute EventHandler onoverconstrained;
};

<video id="monitor" autoplay="autoplay"></video>
// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon,…) pe baza acordului utilizatorului
navigator.getUserMedia (
{ video: true, // pot fi impuse diverse constrângeri
audio: true }, // în acest caz, dorim și video și audio
prelucreazaFlux, trateazaErori
);
var video = document.getElementById ('monitor');
function prelucreazaFlux (flux) {
video.src = URL.createObjectURL (flux); // ‘alimentăm’ cu flux video
video.onerror = function () { flux.stop (); }; // eroare, deci oprim fluxul
flux.onended = function () { /* transmisia s-a terminat */ };
…
}

exemplificări privind MediaStream:
developer.mozilla.org/Web/API/MediaDevices/getUserMedia
www.html5rocks.com/en/tutorials/getusermedia/intro/

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)

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

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

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

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

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 la Consorțiul Web (octombrie 2017)
www.w3.org/TR/mediastream-recording/

interface MediaRecorder : EventTarget {
readonly attribute MediaStream stream;
readonly attribute DOMString mimeType;
readonly attribute RecordingState state; // "inactive", "recording" sau "paused"
attribute EventHandler onstart;
attribute EventHandler onstop;
attribute EventHandler ondataavailable;
attribute EventHandler onpause;
attribute EventHandler onresume;
readonly attribute unsigned long videoBitsPerSecond;
readonly attribute unsigned long audioBitsPerSecond;
void start (optional long timeslice);
void stop ();
void pause ();
void resume ();
void requestData ();
static boolean isTypeSupported (DOMString type);
};
developer.mozilla.org/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API

un exemplu:
github.com/mdn/web-dictaphone

Streams API
suport pentru crearea, compunerea și prelucrarea
fluxurilor de date
HTML5 Living Standard (6 decembrie 2017)
streams.spec.whatwg.org
în lucru la Consorțiul Web (noiembrie 2016)
www.w3.org/TR/streams-api/

Streams API
fluxurile abstractizează accesul la date stocate parțial
având asociate primitive I/O de nivel scăzut
suplimentar, fluxurile pot fi înlănțuite – pipes:
ieșirea unui fluxintrarea altuia,
cu blocarea (locking) a acestor fluxuri
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 socket-uri Web

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

Web Audio API
procesarea și sintetizarea conținutului sonor
W3C Working Draft (2015)
www.w3.org/TR/webaudio/
varianta cea mai recentă (8 decembrie 2017):
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
webaudio.github.io/demo-list/
interacțiuni multimedia via camera Web
github.com/chrisjohndigital/OpenLang
vizualizarea datelor sonore
developer.mozilla.org/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

Web Audio API
biblioteci JS:
Amplitudejs
Howler
Midi.js
SoundManager2
Teoria
WaveSurfer
altele la www.javascripting.com/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 (7 noiembrie 2017)
webaudio.github.io/web-midi-api/

bibliotecă pentru browser-ele ce nu oferă suport (polyfill):
WebMIDIAPIShim – github.com/cwilso/WebMIDIAPIShim

Recunoașterea & generarea vorbirii
specificații neoficiale:
Speech Recognition API
Speech Synthesis API
resurse pentru studiu:
www.w3.org/community/speech-api/

Recunoașterea vorbirii
suportul cumulat oferit de navigatoarele Web actuale
caniuse.com/#search=speech
exemplificări – dependente de browser:
www.audero.it/demo/web-speech-api-demo.html
zenorocha.github.io/voice-elements/

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 (14 decembrie 2017)
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;
};
dictionary SensorOptions {
double frequency;
};

Generic Sensor API
ciclul de viață al unui senzor

Senzori vizând mediul înconjurător
lumină ambientală (ciornă, 18 octombrie 2017):
Ambient Light Sensor – www.w3.org/TR/ambient-light/
window.addEventListener ('devicelight', ev => {
var html = document.getElementsByTagName('html')[0];
if (ev.value < 50) { // schimbăm tema vizuală în funcție de luminozitatea mediului
html.classList.add ('intunecat'); html.classList.remove ('luminos');
} else {
html.classList.add ('luminos'); html.classList.remove ('intunecat');
}
});

proximitate (ciornă, 16 octombrie 2017):
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.log (ev.error.name, ev.error.message);
…
senzor.stop ();

Senzori de mișcare
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 – neimplementate

Orientation Sensor
tratează modificarea orientării dispozitivului
în spațiul 3D cartezian
Editor’s Draft (18 octombrie 2017)
w3c.github.io/orientation-sensor/
înlocuiește DeviceOrientation Event Specification
implementată diferit de fiecare navigator Web

(în loc de) pauză

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/

The Screen Orientation API
specificația curentă vizând preluarea datelor
despre tipul și unghiul orientării ecranului dispozitivului
W3C Working Draft (noiembrie 2017)
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

var 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 (8 noiembrie 2017)
w3c.github.io/presentation-api/

Presentation API
interfețe de interes:
Presentation PresentationRequest PresentationAvailability
PresentationConnectionAvailableEvent PresentationConnection
PresentationConnectionCloseEvent PresentationReceiver
PresentationConnectionList

Presentation API
evenimente ce pot fi tratate:
change
sessionavailable
sessionconnect
alte amănunte la
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
W3C Candidate Recommendation (19 octombrie 2017)
www.w3.org/TR/remote-playback/

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
W3C Candidate Recommendation (13 aprilie 2017)
www.w3.org/TR/beacon/

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

Push API
permite 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 (15 decembrie 2017)
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 (octombrie 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]);
// oprește orice acțiune de vibrare
navigator.vibrate (0);
de studiat și developer.mozilla.org/Web/API/Vibration_API

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

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;
};
de considerat aspectele vizând intimitatea (privacy)

Gamepad
vizează interconectarea cu dispozitive de tip gamepad
via USB (Universal Serial Bus)
W3C Working Draft (26 iulie 2017)
www.w3.org/TR/gamepad/
developer.mozilla.org/Web/API/Gamepad_API

Gamepad
interfețe:
Gamepad
GamepadButton
GamepadEvent
evenimente:
ongamepadconnected
ongamepaddisconnected

Gamepad
suplimentar, se descriu extensii oferind suport
pentru interacțiuni mai avansate
(e.g., motion tracking, haptic feedback)
Gamepad Extensions (ciornă W3C, 27 octombrie 2017)
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, 24 septembrie 2017)
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
W3C Candidate Recommendation (21 septembrie 2017)
www.w3.org/TR/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/

Payment Request API
specificații adiționale – în lucru:
Payment Handler (3 decembrie 2017)
w3c.github.io/payment-handler/
Payment Method: Basic Card (29 noiembrie 2017)
w3c.github.io/payment-method-basic-card/
Payment Method Manifest (12 decembrie 2017)
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/
în lucru w3c.github.io/webappsec-csp/

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/en-US/docs/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
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
W3C Candidate Recommendation (19 octombrie 2017)
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.
W3C Candidate Recommendation (26 ianuarie 2017)
www.w3.org/TR/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 (26 ianuarie 2017)
www.w3.org/TR/WebCryptoAPI/

Până la urmă, ce înseamnă HTML5?

“HTML5 should not be considered as a whole.
You should cherry-pick the technology
that suits the solution to your problem.”
Remy Sharp

HTML5
semantic markup
noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
includerea diverselor tipuri de conținut precum SVG
microdate – vezi inițiativa schema.org
conținut editabil
atribute specifice aplicațiilor: data-

HTML5
prezentarea conținutului via foi de stiluri CSS
facilități CSS: animații, tranziții, transformări, coloane,…
www.w3.org/standards/techs/css#w3c_all
interogări privind mediile de redare (media queries)
suport pentru designul Web responsiv
utilizarea fonturilor externe – Web fonts

HTML5
grafica 2D și/sau 3D
<canvas> în contextul 2D raster
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG

HTML5
multimedia
<audio> (MP3, OGG,…)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC
realitate virtuală – WebVR

HTML5
acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
contexte: TV, industria auto, console de jocuri

HTML5
offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client: indexedDB
caching

HTML5
connectivity & real-time
mesaje vehiculate între documente
transfer asincron via XMLHttpRequest
transfer de date via WebSocket
evenimente recepționate de la server (server-side events)
și multe altele

HTML5
asigurarea performanței
Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în URI
controlul disponibilității conexiunii la rețea
etc.

HTML5
de parcurs lista API-urilor HTML5 existente:
html5index.org

tehnologii implementate de navigatorul Web,
inclusiv la nivelul dispozitivelor mobile

Web Components
suita de tehnologii HTML5 oferă premisele
implementării de componente Web la nivel de client
ce pot fi împachetate și reutilizate în funcție de context
webcomponents.org
www.w3.org/wiki/WebComponents/

Web Components
elemente specificate de dezvoltator – Custom Elements
(ciornă, octombrie 2016):
www.w3.org/TR/custom-elements/
import de construcții HTML – HTML Imports
(în lucru, februarie 2016):
www.w3.org/TR/html-imports/
interacțiune între arborii DOM – Shadow DOM
(în lucru, septembrie 2017):
www.w3.org/TR/shadow-dom/
a se vedea și DOM Living Standard – dom.spec.whatwg.org

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

CLIW 2017-2018 (11/12) Programare Web. API-uri JavaScript în contextul HTML5 (II)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (13)

Similaire à CLIW 2017-2018 (11/12) Programare Web. API-uri JavaScript în contextul HTML5 (II)

Similaire à CLIW 2017-2018 (11/12) Programare Web. API-uri JavaScript în contextul HTML5 (II) (20)

Plus de Sabin Buraga

Plus de Sabin Buraga (20)

CLIW 2017-2018 (11/12) Programare Web. API-uri JavaScript în contextul HTML5 (II)