Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5

Dr. Sabin Buragawww.purl.org/net/busaco

programare Web la nivel de client

API-uri JavaScript în contextul HTML5

C.S. Lewis


“You are never too old to set another goal
or to dream a new dream.”

suplimentar față de obiectul Document,
browser-ul Web pune la dispoziție Window


Încărcarea & redarea documentelor

obiectul Window oferă acces la mediul de redare
proprietăți importante:
window self top parent opener frames
document location navigator
history undoManager



proprietăți importante:
applicationCache
onNumeEveniment
(stabilirea de funcții pentru tratarea evenimentelor)
exemple: onplay ondrag onprogress etc.



metode folositoare:
open() close() stop()
focus() blur()
alert() confirm() prompt()
print()
showModalDialog()



ApplicationCache

detalii la http://www.w3.org/TR/html5/browsers.html#offline


Control asupra cache-ului navigatorului Web

# preia conținutul de pe rețea, dacă e posibil
NETWORK:
stiri.html

# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html

politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">


CACHE MANIFEST
# versiunea 1.0.1
# resurse (proprii / din alte domenii) ce pot fi plasate în cache
index.html
cache.html
html5.css
figura.jpg
img/sigla.png
http://www.undeva.info/stiluri.css

ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status



ApplicationCache
evenimente specifice:
checking noupdate downloading progress
cached updateready obsolete error



ApplicationCache
pentru exemple și alte aspecte de interes, a se consulta:
http://diveintohtml5.info/offline.html
http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://appcachefacts.info/



WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()

http://www.w3.org/TR/html5/webappapis.html#timers


Specificarea contoarelor de timp

WindowTimers
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, etc.
are to be expected.” (W3C, 2013)


Specificarea contoarelor de timp

Navigator
subinterfețele NavigatorID și NavigatorAbilities

www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities


Starea și proprietățile sistemului

interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute DOMString platform;
readonly attribute DOMString product;
readonly attribute DOMString userAgent;
};



datele furnizate pot fi folosite la identificarea utilizatorului
browser-ul ar trebui să ofere cât mai puține informații

protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
implicit, într-un URI se permit schemele:
bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp



protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbilities
tipuri MIME uzuale suportate de browser:



application/x-www-form-urlencoded application/xhtml+xml application/xml
image/gif image/jpeg image/png image/svg+xml
text/cache-manifest text/css text/html text/plain text/xml

stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop

http://www.w3.org/TR/html5/editing.html#dnd


Drag & drop

un element HTML poate fi sursă pentru drag & drop
dacă are atașat atributul draggable="true" și are definită
o funcție de tratare a evenimentului dragstart
ce stochează datele ce vor fi transferate către destinație


Drag & drop

datele de transferat vor fi stocate
de un obiect DataTransfer
se permit diverse operații:
copiere (copy copyLink)
mutare (move linkMove),
realizarea unei legături (link) etc.


Drag & drop

destinatarul operațiunii drag & drop va avea definit
atributul dropzone a cărui valoare specifică tipul MIME
al datelor ce vor fi acceptate
e.g., string:text/plain pentru a accepta orice șir de caractere
sau file:image/jpeg pentru un fișier JPEG


Drag & drop

evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend


Drag & drop

pentru exemple și alte detalii, a se vizita:
https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop

http://www.html5rocks.com/tutorials/dnd/basics/
http://dev.opera.com/articles/view/drag-and-drop/

http://html5demos.com/drag


Drag & drop

UndoManager
gestionează istoricul comenzilor efectuate de utilizator
(undo transaction history)


Alte API-uri de bază:

editing API
conținutul poate fi marcat ca fiind editabil
via atributul contenteditable
document.designMode="on"
întreg documentul poate fi editat la nivel local



editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode:
execCommand()
queryCommandEnabled() queryCommandState()
queryCommandSupported() etc.




Există alte specificații/inițiative de interes?

definește un API abstract pentru transmiterea de date
pe baza protocolului de transfer WebSocket – RFC 6455

succesor al abordării Comet (Reverse Ajax)


WebSocket API

specificație în stadiul W3C Candidate Recommendation
(20 septembrie 2012)

www.w3.org/TR/websockets/


WebSocket API

}

attribute EventHandler onopen;
// funcții de tratare
attribute EventHandler onmessage;
// a evenimentelor
attribute EventHandler onerror;
// privitoare la comunicarea
attribute EventHandler onclose;
// prin rețea
readonly attribute DOMString protocol;
void send (in (DOMString or Blob or ArrayBuffer) data); // trimite date
void close (optional unsigned short code, optional DOMString reason);
// închide conexiunea


[Constructor(DOMString url,
optional (DOMString or DOMString[ ]) protocols)]
interface WebSocket : EventTarget {
readonly attribute DOMString url;
const unsigned short CONNECTING = 0; // constante: starea conexiunii
const unsigned short OPEN
= 1;
const unsigned short CLOSING
= 2;
const unsigned short CLOSED
= 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:


WebSocket API

maniera generală de
transfer al datelor


// creăm un socket Web
var sock = new WebSocket ("ws://www.undeva.info/");
// asociem funcțiile de tratare a evenimentelor
sock.onopen = function (evt) {
/* socket-ul a fost deschis, transferul poate începe… */ };
sock.onclose = function (evt) {
console.log ("Socket-ul a fost închis; cod de stare: " + evt.code)
};
sock.onmessage = function (evt) {
console.log ("Am recepționat mesajul: " + evt.data);
};
sock.onerror = function (evt) {
console.log ("A survenit o eroare…");
};
// trimitem date
sock.send ("Salutări flaușate!");
// am închis conexiunea
sock.close ();


// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 50ms, dacă rețeaua oferă suficientă lățime de bandă
var socket =
new WebSocket ('ws://joc.undeva.org:1974/updates');
socket.onopen = function () {
setInterval (function() {
oferă numărul de octeți
if (socket.bufferedAmount == 0)
ce n-au fost transmiși încă
socket.send (oferaDate ());
}, 50);
};

diverse instrumente de programare
la nivel de server:
apache-websocket (modul Apache), proiectul APE,
framework-ul Autobahn (Web, aplicații mobile, IoT),
HornetMQ, Kaazing, Jetty, Juggernaut, MigratoryData,
PHPWebsocket, socket.io (bazat pe Node.js),
websockify etc.


WebSocket API

diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:
Arduino WebSocket (C++), clasa WebSocket (Dart),
Java API for WebSocket (JSR 356), libwebsockets (C),
ScalaWebSockets (framework-ul Play), Web-socket-js,
WebSocket Sharp (.NET), ZTWebSocket (Objective-C),…


WebSocket API

navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse protocoale bazate pe TCP
(pub/sub, VNC, XMPP,…)


WebSocket API


detalii la http://www.infoq.com/articles/Web-Sockets-Proxy-Servers


arhitectura aplicațiilor Web ce recurg la WebSocket
conform Peter Lubbers (2012)

pentru diverse exemple și resurse de interes, a se studia:
https://developer.mozilla.org/docs/WebSockets
http://www.websocket.org/aboutwebsocket.html
http://html5demos.com/web-socket


WebSocket API

mecanism standardizat de transmitere
a unui flux continuu de date de la server spre client
(push events)
tratarea recepționării datelor provenite de la server
se realizează via evenimente DOM


EventSource API (Server-Send Events)

specificație în stadiu de ciornă (15 noiembrie 2013)

http://dev.w3.org/html5/eventsource/


EventSource API (Server-Send Events)

// tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (evt) {
console.log ("Am primit date de la server: " + evt.data);
}
flux.onerror = function (evt) {
if (evt.eventPhase != EventSource.CLOSED)
console.log ("A survenit o eroare…");
}
};


// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) { // eventual, Modernizr.eventsource
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://stiri.info/web/today");

oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare


Web Messaging

specificație a Consorțiului Web
statut Candidate Recommendation (mai 2012)

http://www.w3.org/TR/webmessaging/


Web Messaging

mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație


Web Messaging

datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()


Web Messaging

interfața MessageChannel specifică
un canal de transmitere de mesaje
constituit din 2 porturi (sursă și destinație)
vezi și interfața MessagePort


Web Messaging

interface MessagePort : EventTarget {
void postMessage (any message, // plasează un mesaj
optional sequence<Transferable> transfer);
void start ();
// deschide canalul de comunicație
void close ();
// închide canalul
attribute Function? onmessage; // tratează evenimentele
};


typedef sequence<MessagePort> MessagePortArray;


pentru detalii, a se parcurge și

http://dev.opera.com/articles/view/window-postmessage-messagechannel/
http://msdn.microsoft.com/en-us/library/ie/hh781494%28v=vs.85%29.aspx

conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
nu interacționează direct cu utilizatorul


Web Workers

conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScript
mediul de execuție a unui worker e complet separat,
codul fiind rulat concurent/paralel, în mod asincron


Web Workers

se oferă un API pentru instanțierea și manipularea
programelor JavaScript de tip worker
specificație W3C Candidate Recommendation (mai 2012)
http://www.w3.org/TR/workers/


Web Workers

un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope


Web Workers

// funcția de tratare a erorilor
attribute Function? onerror;
// tratează lipsa conectivității la rețea
attribute Function? onoffline;
// tratează disponibilitatea conectivității la rețea
attribute Function? ononline;
};
WorkerGlobalScope implements WorkerUtils;


interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location;
void close ();

dedicated worker
“legat” de creatorul lui
interacțiunea cu el se face via porturi de mesaje
– vezi interfața MessagePort


Web Workers

[Constructor(in DOMString scriptURL)]
interface Worker : AbstractWorker {
// termină execuția programului (worker-ului)
void terminate ();
// plasează un mesaj
void postMessage (any message,
optional sequence<Transferable> transfer);
// tratează apariția unui mesaj ce poate fi procesat
attribute Function? onmessage;
};


Web Workers

shared worker
posedă un nume prin care poate fi referit
de alte script-uri având aceeași origine
vezi interfața DedicatedWorkerGlobalScope


Web Workers

un worker are acces la API-uri specifice
desemnate prin interfața WorkerUtils

de exemplu, se poate interacționa cu navigatorul Web


Web Workers


// worker.js – determină numere prime
var numar = 1;
search: while (true) {
numar += 1;
for (var i = 2; i <= Math.sqrt (numar); i++)
if (numar % i == 0)
continue search;
// a fost determinat un număr prim
postMessage (numar); // transmitem valoarea lui printr-un mesaj
}

<p>Cel mai mare număr prim calculat: <div id="rezultat"></div></p>
<script>
var worker = new Worker('worker.js'); // instanțiem lucrătorul JavaScript
worker.onmessage = function (event) { // tratăm mesajul recepționat
// plasăm datele (rezultatul) în cadrul elementului HTML cu id='rezultat'
document.getElementById ('rezultat').textContent = event.data;
};
</script>

restricții:
nu se poate modifica arborele DOM al paginii
și nu se pot altera variabilele globale
pot fi efectuate transferuri asincrone via XMLHttpRequest


Web Workers

oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare


Web Storage

recomandare a Consorțiului Web (iulie 2013)

www.w3.org/TR/webstorage/


Web Storage

interfața Storage oferă acces la o listă de perechi (itemi)
de forma cheie—valoare


Web Storage


interface Storage {
// mărimea spațiului de stocare
readonly attribute unsigned long length;
// cheie pentru acces la date
DOMString? key (unsigned long index);
// consultarea unui item
getter DOMString getItem (DOMString key);
// asignarea de valori pentru un item
setter creator void setItem (DOMString key, DOMString value);
// eliminarea unui item
deleter void removeItem (DOMString key);
// ștergerea spațiului de stocare
void clear ();
}

maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage


Web Storage

stocare nepersistentă
(suport pentru sesiuni)


Web Storage

alternativă la cookie-uri


Web Storage

document.querySelector ('#editor').addEventListener ('keyup',
function (eveniment) { // la fiecare eliberare a tastei…
// stocăm conținutul și data editării
localStorage.setItem ('valoare', this.value);
localStorage.setItem ('data', (new Date ()).getTime ());
}, false);


<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>

față de cookie-uri, datele stocate în localStorage
nu au un timp de viață stabilit a-priori
(pot fi șterse explicit de utilizator sau prin program)


Web Storage

datele memorate în localStorage
sunt disponibile numai la nivel local – în browser
(serverul Web nu le poate accesa direct decât
via un program ce le transferă explicit prin HTTP)


Web Storage

suport de stocare de date la nivel obiectual
via un API asincron
W3C Candidate Recommendation (iulie 2013)

http://www.w3.org/TR/IndexedDB/


Indexed Database API

obiectele de stocare compun baze de date
identificate prin nume



fiecare bază de date are asociată o versiune (număr >= 0)

IDBObjectStore createObjectStore (DOMString name,
// stocare
optional IDBObjectStoreParameters optionalParameters);
void deleteObjectStore (DOMString name);
// ștergere


interface IDBDatabase : EventTarget {
readonly attribute DOMString name;
readonly attribute unsigned long version;
readonly attribute DOMStringList objectStoreNames;

IDBTransaction transaction (any storeNames, optional DOMString mode);
void close ();
attribute Function? onabort;
// abandonarea unei operații
// tratează posibile erori survenite
attribute Function? onversionchange; // tratează actualizările
};
var db = indexedDBSync.open ('Agenda', 1,
function (tranz, versVeche) {
tranz.db.createObjectStore ('Adrese',
{ keyPath: 'id', autoIncrement: true } ); });



datele sunt indexate, în sensul că fiecare înregistrare
posedă o cheie unică de tip Array (JavaScript),
DOMString (WebIDL), Date (JavaScript) sau float (WebIDL)

de asemenea, o înregistrare are o valoare
de un anumit tip simplu sau structurat – e.g., Object
valoarea propriu-zisă e obținută prin evaluarea
așa-numitei căi asociate cheii (key path)
(uzual, un șir de caractere ori șiruri delimitate de „.”)



};


interface IDBObjectStore {
readonly attribute DOMString
name;
readonly attribute DOMString
keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
readonly attribute boolean
autoIncremenent;

IDBRequest put (any value, optional any key); // operații privind cheile
IDBRequest add (any value, optional any key);
IDBRequest delete (any key);
IDBRequest get (any key);
IDBRequest clear ();
IDBRequest openCursor (optional any? range,
optional DOMString direction);
IDBIndex createIndex (DOMString name, any keyPath,
optional IDBIndexParameters optionalParameters);
IDBIndex index (DOMString name);
void deleteIndex (DOMString indexName);
IDBRequest count (optional any key);

accesul la înregistrări se poate realiza și via indecși
meta-datele asociate indecșilor sunt oferite de
interfețele IDBIndex și IDBIndexSync



operațiile asupra datelor din baza de date
se realizează prin intermediul tranzacțiilor
fiecare tranzacție are asociată o conexiune
o tranzacție poate fi deschisă (inițiată) în modurile:
readonly, readwrite, versionchange



attribute Function? onabort;
attribute Function? oncomplete;
};

// tratarea evenimentelor


interface IDBTransaction : EventTarget {
readonly attribute DOMString mode; // modul de efectuare
readonly attribute IDBDatabase db;
readonly attribute DOMError error; // include eroarea apărută
IDBObjectStore objectStore (DOMString name);
void abort ();

var tran = db.transaction (); // crearea unei tranzacții
var adr = tran.objectStore ('Adrese');
var loc = adr.add ( { nume: 'Copou', numar: '11' } );
var locatie = adr.get (1);
// locatie.nume === 'Copou'

iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt:
next, nextunique, prev, prevunique
a se vedea interfețele IDBCursor și IDBCursorSync



IDBRequest update (any value);
void advance (unsigned long count);
void continue (optional any key);
IDBRequest delete ();
};

// sursa datelor
// direcția de iterare
// cheia
// cheia primară


interface IDBCursor {
readonly attribute Object source;
readonly attribute DOMString direction;
readonly attribute any key;
readonly attribute any primaryKey;

// actualizarea valorilor

pentru detalii și exemplificări, a se parcurge:
http://docs.webplatform.org/wiki/apis/indexedDB
https://developer.mozilla.org/docs/IndexedDB
http://net.tutsplus.com/tutorials/javascript-ajax/working-with-indexeddb/
www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/



suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (septembrie 2013)
http://www.w3.org/TR/FileAPI/


File API

File
Blob BlobBuilder
FileList
FileReader
FileWriter FileSaver
FileSystem


File API


interface FileReader : EventTarget {
void readAsArrayBuffer (Blob blob); // metode de citire asincronă
void readAsBinaryString (Blob blob);
void readAsText (Blob blob, optional DOMString encoding);
void readAsDataURL (Blob blob);
void abort ();
const unsigned short EMPTY = 0;
// coduri de stare
const unsigned short LOADING = 1;
const unsigned short DONE = 2;
readonly attribute unsigned short readyState;
readonly attribute any result;
// rezultatul obținut: File sau Blob
readonly attribute DOMError error;
attribute [TreatNonCallableAsNull] Function? onloadstart;
attribute [TreatNonCallableAsNull] Function? onprogress;
attribute [TreatNonCallableAsNull] Function? onload;
tratarea
attribute [TreatNonCallableAsNull] Function? onabort;
evenimentelor
attribute [TreatNonCallableAsNull] Function? onerror;
attribute [TreatNonCallableAsNull] Function? onloadend;
};

detalii tehnice și exemplificări:
developer.mozilla.org/Using_files_from_web_applications
http://docs.webplatform.org/wiki/apis/file
html5demos.com/file-api

https://github.com/coremob/camera


File API

Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
cookie-uri clasice


Privire de ansamblu
asupra stocării la nivel de client

alertarea utilizatorului în afara contextului paginii Web
asupra apariției unui eveniment
specificație în lucru (septembrie 2013)
http://www.w3.org/TR/notifications/


Web Notifications


Web Notifications
// o notificare afișată 20 de secunde
new Notification ("Ha, ha! Ai primit o notă la CLIW!", {
iconUrl: "nota10.png",
onshow: function() { setTimeout (notification.close (), 20000); }
}
);
exemple + amănunte:
https://developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
http://www.html5rocks.com/tutorials/notifications/quick/
http://caniuse.com/#feat=notifications

determinarea stării curente de vizibilitate a unei pagini
recomandare a Consorțiului Web (octombrie 2013)

http://www.w3.org/TR/page-visibility/


Page Visibility

extinde interfața Document cu următoarele facilități:
enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };
partial interface Document {
readonly attribute boolean hidden;
// documentul e ascuns?
readonly attribute VisibilityState visibilityState; // starea vizibilității
};


Page Visibility

determinarea locației geografice a dispozitivului
W3C Recommendation (octombrie 2013)

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


Geolocation API


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 în mod continuu

de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo


Geolocation API

tratarea evenimentelor
privind modificarea orientării și mișcarea dispozitivului
W3C Working Draft (decembrie 2011)
http://www.w3.org/TR/orientation-event/


DeviceOrientation Event Specification


date oferite de giroscop, accelerometru, busolă
pe baza evenimentelor
deviceorientation, devicemotion, compassneedscalibration

nu există suport complet oferit de nici un navigator
exemple practice (dependente de browser):


DeviceOrientation Event Specification

developer.mozilla.org/docs/Web/Guide/Events/Orientation_and_motion_data_explained
http://www.html5rocks.com/en/tutorials/device/orientation/
http://people.opera.com/richt/release/demos/orientation/marinecompass/

comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer


WebRTC

specificație în lucru la Consorțiul Web (septembrie 2013)

http://www.w3.org/TR/webrtc/

API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio)
furnizate de un senzor local – tipic, un Webcam
http://www.w3.org/TR/mediacapture-streams/


WebRTC

// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utililizatorului
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 */ };
…
}


<video id="monitor" autoplay="autoplay"></video>


implementările curente sunt specifice
fiecărui navigator Web
http://caniuse.com/#feat=stream

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


WebRTC


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

API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,
de date arbitrare, nu doar audio și/sau video


WebRTC

http://iswebrtcreadyyet.com


tutoriale & exemple demonstrative:
http://www.html5rocks.com/tutorials/webrtc/basics/
www.creativebloq.com/javascript/get-started-webrtc-1132857
http://mozilla.github.io/webrtc-landing/

http://webrtcdemo.com/


WebRTC

procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)

http://www.w3.org/TR/webaudio/


Web Audio API

pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
https://github.com/WebAudio/demo-list


Web Audio API

Battery Status API – www.w3.org/TR/battery-status/
Network Information API – www.w3.org/TR/netinfo-api/
Push API – www.w3.org/TR/push-api/
Vibration API – www.w3.org/TR/vibration/

Ambient Light Events – www.w3.org/TR/ambient-light/
Progress Events – www.w3.org/TR/progress-events/
Proximity Events – www.w3.org/TR/proximity/
vezi și http://www.w3.org/2009/dap/


Alte API-uri de interes (unele, neimplementate):


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

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


HTML5

acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
HTML5 în contextul TV + industriei auto


HTML5

offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching


HTML5

connectivity & real-time
mesaje vehiculate între documente
transfer asincron via XMLHttpRequest – nivelul 2
WebSocket
evenimente recepționate de la server (server-side events)


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


arhitectura clientului Web actual
(conform Jeff Jaffe)


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

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5

More Related Content

What's hot (20)

Similar to Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5 (20)

More from Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript în contextul HTML5