Dezvoltarea aplicațiilor Web la nivel de clientbusaco/teach/courses/... · Web Audio API definirea...

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dezvoltarea aplicațiilor Web la nivel de client

API-uri JavaScript oferite de browser (II)

christmasexperiments.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Edward Berard

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTML5

lista API-urilor HTML5 existente: html5index.org

suportul dat de browser Web (mobil): whatwebcando.today

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Aspecte referitoare la interacțiunea cu utilizatorul

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Pointer Events

nivelul 1 – recomandare W3C: www.w3.org/TR/pointerevents/

nivelul 2 – W3C Candidate Rec. (11 dec. 2018)www.w3.org/TR/pointerevents2/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

touch/pointer tests & demospatrickhlauke.github.io/touch/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

PointerLock API

util pentru aplicații de editare/modelare 3D, jocuri 3D,…

recomandare W3C (2016): www.w3.org/TR/pointerlock/

noua variantă (ciornă, decembrie 2018):w3c.github.io/pointerlock/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

exemplificări:developer.mozilla.org/Web/API/Pointer_Lock_API

codepen.io/MSEdgeDev/details/zqYBbb

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Clipboard API and Events

vizează manipularea clipboard-ului în cadrul navigatorului Web

W3C Working Draft (8 noiembrie 2018)www.w3.org/TR/clipboard-apis/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


operațiile se desfășoară în mod sincron

evenimente: copy cut paste

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

accesarea clipboard-ului depinde de navigatorul Web

un ghid de utilizare:www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Notifications

alertarea utilizatorului în afara contextului paginii Webasupra apariției unui eveniment

recomandare a Consorțiului Web (2015)www.w3.org/TR/notifications/

Notifications API HTML5 Living Standard (12 dec. 2018)notifications.spec.whatwg.org/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

[Constructor(DOMString title, optional NotificationOptions options),

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;

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

[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);

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 + exemplificări:developer.mozilla.org/docs/WebAPI/Using_Web_Notifications

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Notifications

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Controlul temporizării animațiilor

animațiile pot fi realizate:

declarativ(e.g., via CSS sau elementul <animate> oferit de SVG)

ori

prin program(implementate de un program JavaScript)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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ă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



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ă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



void cancelAnimationFrame (long handler)

anulează o cerere anterioară de actualizare a animației

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

resurse adiționale:creativejs.com/resources/requestanimationframe/

developer.mozilla.org/Web/API/window.requestAnimationFrame

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Animations

specificație vizând realizarea de animații prin programla nivel de document sau element HTML

în stadiu de ciornă la Consorțiul Web (10 decembrie 2018)drafts.csswg.org/web-animations/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

studiu de caz: Moș Crăciun animat

<div id="moș-crăciun">🎄🎅</div>

…

#moș-crăciun { font-size: 3em; width: 250px; height: 250px;

text-shadow: 0.1em 0.1em 0.3em #693; }

…

var moșCrăciun = document.getElementById ("moș-crăciun");

moșCrăciun.animate ([ // obiecte de tip Keyframe

{ transform: 'translateX(0) translateY(0)', opacity: 0.5, easing: 'ease-out' },

{ transform: 'translateX(100%) translateY(100%) rotate(33deg)' },

{ transform: 'translateX(0) translateY(0)', opacity: 1, easing: 'ease-in' } ],

{ // atribute privind animațiile – vezi AnimationEffectTimingProperties

duration: 10000, // 10 sec.

iterations: Infinity // ad infinitum

}

);

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

studiu de caz: Moș Crăciun animat

codul-sursă este disponibil pe Web în cadrul JSFiddle: jsfiddle.net/busaco/syk2o98z/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

web-animations.github.io/web-animations-demos/

mozdevs.github.io/Animation-examples/

Alice in Web Animation Landcodepen.io/collection/bpEza/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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, 27 septembrie 2018)

www.w3.org/TR/webrtc/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

WebRTC

utilizări:tele-conferințe

interschimb de fișieremanagementul identității utilizatoruluiasistarea/monitorizarea persoanelor

jocuri Web…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

WebRTC

API de interes:

MediaDevices

acces la dispozitivele de intrare conectate (e.g., Webcam, microfon)

developer.mozilla.org/Web/API/MediaDevices

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

WebRTC

API de interes:

MediaDevices

metode: enumerateDevices() getSupportedConstraints()

getDisplayMedia() getUserMedia()

eveniment: ondevicechange

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

[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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

// accesul la conținut multimedia local furnizat de un senzor (cameră Web)

// pe baza acordului utilizatorului

var video = document.querySelector('video');

// pot fi impuse diverse constrângeri (dorim doar video)

var constraints = { audio: false, video: true };

navigator.mediaDevices.getUserMedia(constraints)

.then(function(stream) {

var 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

}

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

tutoriale + exemplificări:developer.mozilla.org/Web/API/MediaDevices/getUserMedia

www.html5rocks.com/en/tutorials/getusermedia/intro/

www.sitepoint.com/introduction-getusermedia-api/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

WebRTC

API de interes:

RTCPeerConnection

oferă suport și pentru controlul sesiunii de transfer aldatelor, plus trimiterea de mesaje speciale (signaling)

transmiterea efectivă poate adopta un anumit protocol bidirecțional – HTTP, SIP, XMPP,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

a se experimenta și biblioteca adapter.jsgithub.com/webrtc/adapter

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

diverse maniere de comunicare specificate de WebRTCdetalii la www.webrtc.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

WebRTC

API de interes:

RTCDataChannel

interfață reprezentând un canal de comunicațiebidirecț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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

github.com/openrtc-io/awesome-webrtc

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

iswebrtcreadyyet.com

suportul oferit de browser pentru diverse facilități WebRTC

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (14 dec. 2018)w3c.github.io/mediacapture-record/

developer.mozilla.org/Web/API/MediaStream_Recording_API/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Streams API

suport pentru crearea, compunerea și prelucrarea fluxurilor de date

HTML5 Living Standard (9 decembrie 2018)streams.spec.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Streams API

fluxurile abstractizează accesul la date stocate parțialavând asociate primitive I/O de nivel scăzut

consumator

flux citibil(readable stream)

date procesate

lacăt

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Streams API

fluxurile pot fi înlănțuite – pipes:ieșirea unui fluxintrarea altuia,

cu blocarea (locking) a acestor fluxuri

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Streams API

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Streams API

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

biblioteci utile:Highland – highlandjs.org

Sequency – winterbe.github.io/sequency/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

procesarea și sintetizarea conținutului sonor

W3C Candidate Recommendation (18 septembrie 2018)www.w3.org/TR/webaudio/

varianta cea mai recentă (16 noiembrie 2018):webaudio.github.io/web-audio-api/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

definirea unui „lanț” de procesări sonore:AudioContext

AudioNode

AudioParam

BaseAudioContext

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

specificarea surselor de sunet:AudioBufferSourceNode

AudioScheduledSourceNode

AudioBuffer

MediaElementAudioSourceNode

MediaStreamAudioSourceNode

OscilattorNode

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

filtre privind aplicarea de efecte audio:DelayNode

DynamicsCompressorNode

PeriodicWave

WaveShaperNode

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

definirea destinației unei prelucrări sonore:AudioDestinationNode

MediaStreamAudioDestinationNode

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

suport pentru analiza de sunet:AnalyserNode

suport privind canalele sonore (mono ↔ stereo):ChannelSplitterNode

ChannelMergerNode

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

realizarea efectelor spațiale (audio spatialization):AudioListener

PannerNode

StereoPannerNode

developer.mozilla.org/Web/API/Web_Audio_API/Web_audio_spatialization_basics

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

suport referitor la diverse procesări JavaScript și/sau Web Assembly via interfața Worklet

(variantă limitată a unui Web worker)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

exemplificări + tutoriale:

scenarii diverse de utilizaredeveloper.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 Webgithub.com/chrisjohndigital/OpenLang

vizualizarea datelor sonorecodepen.io/collection/nWRpzj/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web Audio API

biblioteci JS:Amplitudejs

HowlerMidi.js

SoundManager2 Teoria

WaveSurfer

altele la www.javascripting.com/audio/?sort=rating

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

aplicație Web demonstrativă:turtle.audio

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (18 octombrie 2018)webaudio.github.io/web-midi-api/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Recunoașterea vorbirii

suportul cumulat oferit de navigatoarele Web actualecaniuse.com/#search=speech

exemplificări – dependente de browser:www.audero.it/demo/web-speech-api-demo.html

zenorocha.github.io/voice-elements/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (26 noiembrie 2018)w3c.github.io/sensors/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Generic Sensor API

senzorii pot fi:

de nivel scăzut (low-level sensor type)

caracterizați de implementarea reală

exemplu: giroscop

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Generic Sensor API

ciclul de viață al unui senzor

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Senzori vizând mediul înconjurător

lumină ambientală (W3C Candidate Rec., martie 2018):Ambient Light Sensor – www.w3.org/TR/ambient-light/

nivelul de luminozitate e dat de proprietatea illuminance

cu valori numerice în lucși

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


proximitate (ciornă, 1 martie 2018):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;

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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 ();

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Senzori de mișcareîn lucru la W3C (martie 2018)

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Senzori de mișcarede 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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Orientation Sensor

tratează modificarea orientării dispozitivuluiîn spațiul 3D cartezian

W3C Candidate Recommendation (20 martie 2018) www.w3.org/TR/orientation-sensor/

înlocuiește DeviceOrientation Event Specificationimplementată diferit de fiecare navigator Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

tutoriale, inclusiv exemplificări:developers.google.com/web/updates/2017/09/sensors-for-the-web

intel.github.io/generic-sensor-demos/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

The Screen Orientation API

specificația curentă vizând preluarea datelor despre tipul și unghiul orientării ecranului dispozitivului

W3C Working Draft (14 december 2018)www.w3.org/TR/screen-orientation/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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;

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (18 octombrie 2018)w3c.github.io/presentation-api/

developer.mozilla.org/Web/API/Presentation_API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remote Playback API

privește redarea la distanță a conținutului multimediavia tehnologii de conectare cu/fără fir

extinde API-urile referitoare la conținut audio/video

în lucru (18 octombrie 2018)w3c.github.io/remote-playback/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Geolocation API

determinarea locației geografice a dispozitivului

recomandare a Consorțiului Web (2016)

www.w3.org/TR/geolocation-API/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

exemplu demonstrativ:html5demos.com/geo/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (17 octombrie 2018)w3c.github.io/beacon/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 workerrulând în aceeași origine cu cea a aplicației

W3C Working Draft (26 octombrie 2018)www.w3.org/TR/push-api/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

resurse + exemple:serviceworke.rs/web-push.html

developers.google.com/web/fundamentals/push-notifications/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Battery Status API

manieră standardizată de a obține informații referitoare la starea bateriei dispozitivului gazdă

W3C Editor’s Draft (17 octombrie 2018)w3c.github.io/battery/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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;

};

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Gamepad

vizează interconectarea cu dispozitive de tip gamepadvia USB (Universal Serial Bus)

W3C Working Draft (13 decembrie 2018)w3c.github.io/gamepad/

developer.mozilla.org/Web/API/Gamepad_API

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Gamepad

interfețe: Gamepad

GamepadButton

GamepadEvent

evenimente: gamepadconnected

gamepaddisconnected

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

resurse utile:developer.mozilla.org/Web/API/Gamepad_API/Using_the_Gamepad_API

html5gamepad.com

www.flightarcade.com/learn/gamepad

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Gamepad

suplimentar, se descriu extensii oferind suport pentru interacțiuni mai avansate

(e.g., motion tracking, haptic feedback)

Gamepad Extensions (ciornă W3C, 13 decembrie 2018)w3c.github.io/gamepad/extensions.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web ubicuu la nivel fizic – physical Web

dispozitiv fizic capabil să expună un URLe.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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web ubicuu la nivel fizic – physical Web

☁dispo-zitiv

☗difuzare

URL

client Web

analiză + optimizare

proxy

aplicație/serviciu Webprocesare 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)

🖼

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

specificația Web Bluetooth API nu este oficială

resurse + exemple demonstrative:

google.github.io/physical-web/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

inițiativa neoficială WebUSB pentru comunicarea prin USB cu dispozitivele (în lucru, 17 decembrie 2018)

wicg.github.io/webusb/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Alte API-uri folositoare?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Payment Request API

specifică o manieră standard de efectuare a cererilor de plată direct din cadrul navigatorului Web

W3C Candidate Recommendation (30 august 2018)www.w3.org/TR/payment-request/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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ă

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Payment Request API

specificații adiționale – în lucru:Payment Handler (17 octombrie 2018)

w3c.github.io/payment-handler/

Payment Method: Basic Card (21 noiembrie 2018)w3c.github.io/payment-method-basic-card/

Payment Method Manifest (12 decembrie 2017)w3c.github.io/payment-method-manifest/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



recomandare a Consorțiului Web (2016)www.w3.org/TR/CSP2/

noua versiune în lucru (27 decembrie 2018)w3c.github.io/webappsec-csp/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co



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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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)

recomandare a Consorțiului Web (2015)www.w3.org/TR/upgrade-insecure-requests/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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 Webwww.eff.org/issues/do-not-track

W3C Candidate Recommendation (19 octombrie 2017)www.w3.org/TR/tracking-dnt/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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>

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co


Web Authentication: An API for accessing Public Key Credentials

gestionează atribute vizând identitatea utilizatoruluipe baza cheilor publice în scopul autentificării acestuia

în lucru la Consorțiul Web (15 decembrie 2018)w3c.github.io/webauthn/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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, sep. 2018):

w3c.github.io/webappsec-credential-management/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

aplicații demonstrative:webauthn.bin.coffee

github.com/apowers313/webauthn-simple-app

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 familycaligatio.github.io/jsSHA/

PKI.js – Public Key Infrastructure Managementpkijs.org

JS-XSS – sanitizes HTML to prevent Cross-Site Scriptingjsxss.com/en/

DOMPurity – a XSS sanitizer for HTML, MathML and SVGjsxss.com/en/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Permissionsspecificație în lucru la Consorțiul Web (octombrie 2018)

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

exemple:developer.mozilla.org/Web/API/Permissions_API/Using_the_Permissions_API

developers.google.com/web/updates/2015/04/permissions-api-for-the-web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

shadow tree (shadow DOM)

descris în DOM Living Standard (11 decembrie 2018)dom.spec.whatwg.org/#shadow-trees

developer.mozilla.org/Web/Web_Components/Using_shadow_DOM

girliemac.com/presentation-slides/webcomponents/shadowdom.html

shadow root

shadowhost

shadowtree

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Custom elements

elemente (marcaje) create de programator

incluse în arborele DOM prin extinderea interfeței HTMLElement

parte a specificației HTML5 Living Standardhtml.spec.whatwg.org/multipage/custom-elements.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Custom elements

elementele noi sunt definite/accesate prin program via CustomElementRegistry

detalii + exemple:developer.mozilla.org/Web/API/CustomElementRegistry

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Date post:	17-Oct-2020
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

Dezvoltarea aplicațiilor Web la nivel de clientbusaco/teach/courses/... · Web Audio API definirea...

Documents