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

programare Web la nivel de client

API-uri JavaScript în contextul HTML5
C.S. Lewis

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

“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

Dr. Sabin Buragawww.purl.org/net/busaco
...
obiectul Window oferă acces la mediul de redare
proprietăți importante:
window self top parent opener frames
document loca...
obiectul Window oferă acces la mediul de redare
proprietăți importante:
applicationCache
onNumeEveniment
(stabilirea de fu...
obiectul Window oferă acces la mediul de redare
metode folositoare:
open() close() stop()
focus() blur()
alert() confirm()...
ApplicationCache

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

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

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

# conținut alternativ, dacă suntem offline
FALLBACK:
/...
ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul st...
ApplicationCache
evenimente specifice:
checking noupdate downloading progress
cached updateready obsolete error

Dr. Sabin...
ApplicationCache
pentru exemple și alte aspecte de interes, a se consulta:
http://diveintohtml5.info/offline.html
http://w...
WindowTimers
setTimeout() clearTimeout()
setInterval() clearInterval()

http://www.w3.org/TR/html5/webappapis.html#timers
...
WindowTimers
“This API does not guarantee that timers will run exactly
on schedule. Delays due to CPU load, other tasks, e...
Navigator
subinterfețele NavigatorID și NavigatorAbilities

www.w3.org/TR/html5/webappapis.html#system-state-and-capabilit...
interface NavigatorID {
readonly attribute DOMString appName;
readonly attribute DOMString appVersion;
readonly attribute ...
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbil...
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorAbil...
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop

http://www.w3.org/TR/html...
un element HTML poate fi sursă pentru drag & drop
dacă are atașat atributul draggable="true" și are definită
o funcție de ...
datele de transferat vor fi stocate
de un obiect DataTransfer
se permit diverse operații:
copiere (copy copyLink)
mutare (...
destinatarul operațiunii drag & drop va avea definit
atributul dropzone a cărui valoare specifică tipul MIME
al datelor ce...
evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend

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

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

http://www.html5ro...
UndoManager
gestionează istoricul comenzilor efectuate de utilizator
(undo transaction history)

Dr. Sabin Buragawww.purl...
editing API
conținutul poate fi marcat ca fiind editabil
via atributul contenteditable
document.designMode="on"
întreg doc...
editing API
execuția de script-uri asupra selecției curente
sau la poziția curentă a cursorului de text
metode:
execComman...
Dr. Sabin Buragawww.purl.org/net/busaco

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 a...
specificație în stadiul W3C Candidate Recommendation
(20 septembrie 2012)

www.w3.org/TR/websockets/

Dr. Sabin Buragawww...
}

attribute EventHandler onopen;
// funcții de tratare
attribute EventHandler onmessage;
// a evenimentelor
attribute Eve...
transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele UR...
maniera generală de
transfer al datelor

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

// creăm un socket Web
var sock = new W...
Dr. Sabin Buragawww.purl.org/net/busaco

// actualizările de date vor fi trimise cu rata de o actualizare
// la fiecare 5...
diverse instrumente de programare
la nivel de server:
apache-websocket (modul Apache), proiectul APE,
framework-ul Autobah...
diverse instrumente de programare
la nivel de client (aplicații) – API-uri/biblioteci:
Arduino WebSocket (C++), clasa WebS...
navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse protocoale baz...
Dr. Sabin Buragawww.purl.org/net/busaco

detalii la http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
Dr. Sabin Buragawww.purl.org/net/busaco

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.websoc...
mecanism standardizat de transmitere
a unui flux continuu de date de la server spre client
(push events)
tratarea recepțio...
specificație în stadiu de ciornă (15 noiembrie 2013)

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

Dr. Sabin Buragawww.purl.org/...
// tratăm evenimentele
flux.onopen = function () { console.log ("Am deschis fluxul"); }
flux.onmessage = function (evt) {
...
oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare

Dr. Sabin Buragawww.purl.org/n...
specificație a Consorțiului Web
statut Candidate Recommendation (mai 2012)

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

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

Dr. Sabin Buraga...
datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj...
interfața MessageChannel specifică
un canal de transmitere de mesaje
constituit din 2 porturi (sursă și destinație)
vezi ș...
interface MessagePort : EventTarget {
void postMessage (any message, // plasează un mesaj
optional sequence<Transferable> ...
Dr. Sabin Buragawww.purl.org/net/busaco

pentru detalii, a se parcurge și

http://dev.opera.com/articles/view/window-post...
conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScrip...
conceptul de worker Web:
script rulat în fundal – în accepțiunea daemon-ilor Unix –
independent de alte programe JavaScrip...
se oferă un API pentru instanțierea și manipularea
programelor JavaScript de tip worker
specificație W3C Candidate Recomme...
un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScop...
// funcția de tratare a erorilor
attribute Function? onerror;
// tratează lipsa conectivității la rețea
attribute Function...
dedicated worker
“legat” de creatorul lui
interacțiunea cu el se face via porturi de mesaje
– vezi interfața MessagePort

...
[Constructor(in DOMString scriptURL)]
interface Worker : AbstractWorker {
// termină execuția programului (worker-ului)
vo...
shared worker
posedă un nume prin care poate fi referit
de alte script-uri având aceeași origine
vezi interfața DedicatedW...
un worker are acces la API-uri specifice
desemnate prin interfața WorkerUtils

de exemplu, se poate interacționa cu naviga...
Dr. Sabin Buragawww.purl.org/net/busaco

// worker.js – determină numere prime
var numar = 1;
search: while (true) {
numa...
restricții:
nu se poate modifica arborele DOM al paginii
și nu se pot altera variabilele globale
pot fi efectuate transfer...
oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare

Dr. Sa...
recomandare a Consorțiului Web (iulie 2013)

www.w3.org/TR/webstorage/

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

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

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

interface Storage {
// mărimea spațiului de stocare
readonly attribute unsigned ...
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage

Dr. Sabin Buragawww.purl.org/n...
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
stocare nepersistentă
(suport pe...
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
alternativă la cookie-uri

Dr. S...
document.querySelector ('#editor').addEventListener ('keyup',
function (eveniment) { // la fiecare eliberare a tastei…
// ...
față de cookie-uri, datele stocate în localStorage
nu au un timp de viață stabilit a-priori
(pot fi șterse explicit de uti...
datele memorate în localStorage
sunt disponibile numai la nivel local – în browser
(serverul Web nu le poate accesa direct...
suport de stocare de date la nivel obiectual
via un API asincron
W3C Candidate Recommendation (iulie 2013)

http://www.w3....
obiectele de stocare compun baze de date
identificate prin nume

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

Indexed Databas...
IDBObjectStore createObjectStore (DOMString name,
// stocare
optional IDBObjectStoreParameters optionalParameters);
void d...
Dr. Sabin Buragawww.purl.org/net/busaco

Indexed Database API

datele sunt indexate, în sensul că fiecare înregistrare
po...
de asemenea, o înregistrare are o valoare
de un anumit tip simplu sau structurat – e.g., Object
valoarea propriu-zisă e ob...
};

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

interface IDBObjectStore {
readonly attribute DOMString
name;
readonly attri...
accesul la înregistrări se poate realiza și via indecși
meta-datele asociate indecșilor sunt oferite de
interfețele IDBInd...
operațiile asupra datelor din baza de date
se realizează prin intermediul tranzacțiilor
fiecare tranzacție are asociată o ...
attribute Function? onabort;
attribute Function? oncomplete;
attribute Function? onerror;
};

// tratarea evenimentelor

D...
iterarea unui număr de înregistrări se face via un cursor
valorile direcției de parcurgere sunt:
next, nextunique, prev, p...
IDBRequest update (any value);
void advance (unsigned long count);
void continue (optional any key);
IDBRequest delete ();...
pentru detalii și exemplificări, a se parcurge:
http://docs.webplatform.org/wiki/apis/indexedDB
https://developer.mozilla....
suită de API-uri pentru manipularea fișierelor
specificație W3C în stadiu de ciornă (septembrie 2013)
http://www.w3.org/TR...
File
Blob BlobBuilder
FileList
FileReader
FileWriter FileSaver
FileSystem

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

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

interface FileReader : EventTarget {
void readAsArrayBuffer (Blob blob); // meto...
detalii tehnice și exemplificări:
developer.mozilla.org/Using_files_from_web_applications
http://docs.webplatform.org/wiki...
Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
coo...
alertarea utilizatorului în afara contextului paginii Web
asupra apariției unui eveniment
specificație în lucru (septembri...
Dr. Sabin Buragawww.purl.org/net/busaco

Web Notifications
// o notificare afișată 20 de secunde
new Notification ("Ha, h...
determinarea stării curente de vizibilitate a unei pagini
recomandare a Consorțiului Web (octombrie 2013)

http://www.w3.o...
extinde interfața Document cu următoarele facilități:
enum VisibilityState { "hidden", "visible", "prerender", "unloaded" ...
determinarea locației geografice a dispozitivului
W3C Recommendation (octombrie 2013)

http://www.w3.org/TR/geolocation-AP...
Dr. Sabin Buragawww.purl.org/net/busaco

navigator.geolocation.getCurrentPosition (
proceseazaDate, // funcție prelucrând...
de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geo...
tratarea evenimentelor
privind modificarea orientării și mișcarea dispozitivului
W3C Working Draft (decembrie 2011)
http:/...
Dr. Sabin Buragawww.purl.org/net/busaco

date oferite de giroscop, accelerometru, busolă
pe baza evenimentelor
deviceorie...
nu există suport complet oferit de nici un navigator
exemple practice (dependente de browser):

Dr. Sabin Buragawww.purl....
comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer

Dr. Sabin Buragawww.purl....
API de interes:
MediaStream
acces la fluxuri multimedia (e.g., video și/sau audio)
furnizate de un senzor local – tipic, u...
// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utililizatorului...
Dr. Sabin Buragawww.purl.org/net/busaco

implementările curente sunt specifice
fiecărui navigator Web
http://caniuse.com/...
API de interes:
RTCPeerConnection
permite ca doi utilizatori să comunice direct via browser
comunicațiile sunt coordonate ...
API de interes:
RTCPeerConnection
oferă suport și pentru controlul sesiunii de transfer al
datelor, plus trimiterea de mes...
Dr. Sabin Buragawww.purl.org/net/busaco

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/s...
http://iswebrtcreadyyet.com

Dr. Sabin Buragawww.purl.org/net/busaco
tutoriale & exemple demonstrative:
http://www.html5rocks.com/tutorials/webrtc/basics/
www.creativebloq.com/javascript/get-...
procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)

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

Dr...
pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
http...
Battery Status API – www.w3.org/TR/battery-status/
Network Information API – www.w3.org/TR/netinfo-api/
Push API – www.w3....
Dr. Sabin Buragawww.purl.org/net/busaco

Până la urmă, ce înseamnă HTML5?
Dr. Sabin Buragawww.purl.org/net/busaco

“HTML5 should not be considered as a whole.
You should cherry-pick the technolog...
semantic markup
noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
includer...
prezentarea conținutului via foi de stiluri CSS
facilități CSS: animații, tranziții, transformări, coloane,…
www.w3.org/st...
grafica 2D și/sau 3D
<canvas> în contextul 2D raster
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG

Dr. Sabin Buraga...
multimedia
<audio> (MP3, OGG)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRT...
acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
HTML5 în contextul TV + in...
offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching

...
connectivity & real-time
mesaje vehiculate între documente
transfer asincron via XMLHttpRequest – nivelul 2
WebSocket
even...
asigurarea performanței
Web Workers
managementul istoricului navigării
RequestAnimationFrame
înglobarea datelor direct în ...
Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura clientului Web actual
(conform Jeff Jaffe)
Dr. Sabin Buragawww.purl.org/net/busaco

episodul viitor:
performanța aplicațiilor Web la nivel de client
Upcoming SlideShare
Loading in …5
×

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

823 views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
823
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client API-uri JavaScript în contextul HTML5
  2. 2. C.S. Lewis Dr. Sabin Buragawww.purl.org/net/busaco “You are never too old to set another goal or to dream a new dream.”
  3. 3. suplimentar față de obiectul Document, browser-ul Web pune la dispoziție Window Dr. Sabin Buragawww.purl.org/net/busaco Încărcarea & redarea documentelor
  4. 4. obiectul Window oferă acces la mediul de redare proprietăți importante: window self top parent opener frames document location navigator history undoManager Dr. Sabin Buragawww.purl.org/net/busaco Încărcarea & redarea documentelor
  5. 5. obiectul Window oferă acces la mediul de redare proprietăți importante: applicationCache onNumeEveniment (stabilirea de funcții pentru tratarea evenimentelor) exemple: onplay ondrag onprogress etc. Dr. Sabin Buragawww.purl.org/net/busaco Încărcarea & redarea documentelor
  6. 6. obiectul Window oferă acces la mediul de redare metode folositoare: open() close() stop() focus() blur() alert() confirm() prompt() print() showModalDialog() Dr. Sabin Buragawww.purl.org/net/busaco Încărcarea & redarea documentelor
  7. 7. ApplicationCache detalii la http://www.w3.org/TR/html5/browsers.html#offline Dr. Sabin Buragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web
  8. 8. # 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"> Dr. Sabin Buragawww.purl.org/net/busaco 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
  9. 9. ApplicationCache operații asupra cache-ului: update() abort() swapCache() starea cache-ului este furnizată de atributul status Dr. Sabin Buragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web
  10. 10. ApplicationCache evenimente specifice: checking noupdate downloading progress cached updateready obsolete error Dr. Sabin Buragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web
  11. 11. 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/ Dr. Sabin Buragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web
  12. 12. WindowTimers setTimeout() clearTimeout() setInterval() clearInterval() http://www.w3.org/TR/html5/webappapis.html#timers Dr. Sabin Buragawww.purl.org/net/busaco Specificarea contoarelor de timp
  13. 13. 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) Dr. Sabin Buragawww.purl.org/net/busaco Specificarea contoarelor de timp
  14. 14. Navigator subinterfețele NavigatorID și NavigatorAbilities www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities Dr. Sabin Buragawww.purl.org/net/busaco Starea și proprietățile sistemului
  15. 15. interface NavigatorID { readonly attribute DOMString appName; readonly attribute DOMString appVersion; readonly attribute DOMString platform; readonly attribute DOMString product; readonly attribute DOMString userAgent; }; Dr. Sabin Buragawww.purl.org/net/busaco Starea și proprietățile sistemului datele furnizate pot fi folosite la identificarea utilizatorului browser-ul ar trebui să ofere cât mai puține informații
  16. 16. 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 Dr. Sabin Buragawww.purl.org/net/busaco Starea și proprietățile sistemului
  17. 17. 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: Dr. Sabin Buragawww.purl.org/net/busaco Starea și proprietățile sistemului 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
  18. 18. stocarea fragmentelor de date în diverse formate, în vederea efectuării operațiilor drag & drop http://www.w3.org/TR/html5/editing.html#dnd Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  19. 19. 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 Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  20. 20. 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. Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  21. 21. 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 Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  22. 22. evenimente ce pot fi tratate: drop dragenter dragover dragend Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  23. 23. 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 Dr. Sabin Buragawww.purl.org/net/busaco Drag & drop
  24. 24. UndoManager gestionează istoricul comenzilor efectuate de utilizator (undo transaction history) Dr. Sabin Buragawww.purl.org/net/busaco Alte API-uri de bază:
  25. 25. editing API conținutul poate fi marcat ca fiind editabil via atributul contenteditable document.designMode="on" întreg documentul poate fi editat la nivel local Dr. Sabin Buragawww.purl.org/net/busaco Alte API-uri de bază:
  26. 26. 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. Dr. Sabin Buragawww.purl.org/net/busaco Alte API-uri de bază:
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco Există alte specificații/inițiative de interes?
  28. 28. definește un API abstract pentru transmiterea de date pe baza protocolului de transfer WebSocket – RFC 6455 succesor al abordării Comet (Reverse Ajax) Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  29. 29. specificație în stadiul W3C Candidate Recommendation (20 septembrie 2012) www.w3.org/TR/websockets/ Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  30. 30. } 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 Dr. Sabin Buragawww.purl.org/net/busaco [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;
  31. 31. transferul datelor se realizează în regim full duplex (bidirecțional), folosind un singur socket se recurge la schemele URI ws: și wss: Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  32. 32. maniera generală de transfer al datelor Dr. Sabin Buragawww.purl.org/net/busaco // 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 ();
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco // 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); };
  34. 34. 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. Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  35. 35. 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),… Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  36. 36. navigatorul poate fi considerat platformă de dezvoltare a aplicațiilor Internet oferă suport pentru diverse protocoale bazate pe TCP (pub/sub, VNC, XMPP,…) Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco detalii la http://www.infoq.com/articles/Web-Sockets-Proxy-Servers
  38. 38. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura aplicațiilor Web ce recurg la WebSocket conform Peter Lubbers (2012)
  39. 39. 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 Dr. Sabin Buragawww.purl.org/net/busaco WebSocket API
  40. 40. 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 Dr. Sabin Buragawww.purl.org/net/busaco EventSource API (Server-Send Events)
  41. 41. specificație în stadiu de ciornă (15 noiembrie 2013) http://dev.w3.org/html5/eventsource/ Dr. Sabin Buragawww.purl.org/net/busaco EventSource API (Server-Send Events)
  42. 42. // 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…"); } }; Dr. Sabin Buragawww.purl.org/net/busaco // 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");
  43. 43. oferă API-uri pentru realizarea transferului de mesaje între diverse contexte de navigare Dr. Sabin Buragawww.purl.org/net/busaco Web Messaging
  44. 44. specificație a Consorțiului Web statut Candidate Recommendation (mai 2012) http://www.w3.org/TR/webmessaging/ Dr. Sabin Buragawww.purl.org/net/busaco Web Messaging
  45. 45. mesajele pot proveni de la server, via socket-uri Web sau de la alte documente via canale de comunicație Dr. Sabin Buragawww.purl.org/net/busaco Web Messaging
  46. 46. datele privind evenimentul de recepționare a unui mesaj sunt specificate de interfața MessageEvent transmiterea unui mesaj via metoda postMessage () Dr. Sabin Buragawww.purl.org/net/busaco Web Messaging
  47. 47. interfața MessageChannel specifică un canal de transmitere de mesaje constituit din 2 porturi (sursă și destinație) vezi și interfața MessagePort Dr. Sabin Buragawww.purl.org/net/busaco Web Messaging
  48. 48. 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 }; Dr. Sabin Buragawww.purl.org/net/busaco typedef sequence<MessagePort> MessagePortArray;
  49. 49. Dr. Sabin Buragawww.purl.org/net/busaco 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
  50. 50. 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 Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  51. 51. 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 Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  52. 52. 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/ Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  53. 53. un worker – desemnat de interfața Worker – prezintă un domeniu global de execuție specificat de interfața WorkerGlobalScope Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  54. 54. // 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; Dr. Sabin Buragawww.purl.org/net/busaco interface WorkerGlobalScope : EventTarget { readonly attribute WorkerGlobalScope self; readonly attribute WorkerLocation location; void close ();
  55. 55. dedicated worker “legat” de creatorul lui interacțiunea cu el se face via porturi de mesaje – vezi interfața MessagePort Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  56. 56. [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; }; Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  57. 57. shared worker posedă un nume prin care poate fi referit de alte script-uri având aceeași origine vezi interfața DedicatedWorkerGlobalScope Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  58. 58. un worker are acces la API-uri specifice desemnate prin interfața WorkerUtils de exemplu, se poate interacționa cu navigatorul Web Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  59. 59. Dr. Sabin Buragawww.purl.org/net/busaco // 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>
  60. 60. restricții: nu se poate modifica arborele DOM al paginii și nu se pot altera variabilele globale pot fi efectuate transferuri asincrone via XMLHttpRequest Dr. Sabin Buragawww.purl.org/net/busaco Web Workers
  61. 61. oferă mecanisme de stocare (persistentă) a datelor la nivel de client (browser) sub forma de perechi cheie—valoare Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  62. 62. recomandare a Consorțiului Web (iulie 2013) www.w3.org/TR/webstorage/ Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  63. 63. interfața Storage oferă acces la o listă de perechi (itemi) de forma cheie—valoare Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco 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 (); }
  65. 65. maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  66. 66. maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage stocare nepersistentă (suport pentru sesiuni) Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  67. 67. maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage alternativă la cookie-uri Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  68. 68. 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); Dr. Sabin Buragawww.purl.org/net/busaco <textarea id="editor" placeholder="Începeți să tastați..."> </textarea>
  69. 69. 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) Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  70. 70. 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) Dr. Sabin Buragawww.purl.org/net/busaco Web Storage
  71. 71. suport de stocare de date la nivel obiectual via un API asincron W3C Candidate Recommendation (iulie 2013) http://www.w3.org/TR/IndexedDB/ Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  72. 72. obiectele de stocare compun baze de date identificate prin nume Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API fiecare bază de date are asociată o versiune (număr >= 0)
  73. 73. IDBObjectStore createObjectStore (DOMString name, // stocare optional IDBObjectStoreParameters optionalParameters); void deleteObjectStore (DOMString name); // ștergere Dr. Sabin Buragawww.purl.org/net/busaco 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 attribute Function? onerror; // 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 } ); });
  74. 74. Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API datele sunt indexate, în sensul că fiecare înregistrare posedă o cheie unică de tip Array (JavaScript), DOMString (WebIDL), Date (JavaScript) sau float (WebIDL)
  75. 75. 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 „.”) Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  76. 76. }; Dr. Sabin Buragawww.purl.org/net/busaco 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);
  77. 77. accesul la înregistrări se poate realiza și via indecși meta-datele asociate indecșilor sunt oferite de interfețele IDBIndex și IDBIndexSync Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  78. 78. 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 Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  79. 79. attribute Function? onabort; attribute Function? oncomplete; attribute Function? onerror; }; // tratarea evenimentelor Dr. Sabin Buragawww.purl.org/net/busaco 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'
  80. 80. 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 Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  81. 81. 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ă Dr. Sabin Buragawww.purl.org/net/busaco interface IDBCursor { readonly attribute Object source; readonly attribute DOMString direction; readonly attribute any key; readonly attribute any primaryKey; // actualizarea valorilor
  82. 82. 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/ Dr. Sabin Buragawww.purl.org/net/busaco Indexed Database API
  83. 83. suită de API-uri pentru manipularea fișierelor specificație W3C în stadiu de ciornă (septembrie 2013) http://www.w3.org/TR/FileAPI/ Dr. Sabin Buragawww.purl.org/net/busaco File API
  84. 84. File Blob BlobBuilder FileList FileReader FileWriter FileSaver FileSystem Dr. Sabin Buragawww.purl.org/net/busaco File API
  85. 85. Dr. Sabin Buragawww.purl.org/net/busaco 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; };
  86. 86. 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 Dr. Sabin Buragawww.purl.org/net/busaco File API
  87. 87. Web Storage API: localStorage + sessionStorage indexedDB Web SQL – specificație abandonată Application Cache File APIs cookie-uri clasice Dr. Sabin Buragawww.purl.org/net/busaco Privire de ansamblu asupra stocării la nivel de client
  88. 88. alertarea utilizatorului în afara contextului paginii Web asupra apariției unui eveniment specificație în lucru (septembrie 2013) http://www.w3.org/TR/notifications/ Dr. Sabin Buragawww.purl.org/net/busaco Web Notifications
  89. 89. Dr. Sabin Buragawww.purl.org/net/busaco 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
  90. 90. determinarea stării curente de vizibilitate a unei pagini recomandare a Consorțiului Web (octombrie 2013) http://www.w3.org/TR/page-visibility/ Dr. Sabin Buragawww.purl.org/net/busaco Page Visibility
  91. 91. 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 }; Dr. Sabin Buragawww.purl.org/net/busaco Page Visibility
  92. 92. determinarea locației geografice a dispozitivului W3C Recommendation (octombrie 2013) http://www.w3.org/TR/geolocation-API/ Dr. Sabin Buragawww.purl.org/net/busaco Geolocation API
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco navigator.geolocation.getCurrentPosition ( proceseazaDate, // funcție prelucrând datele privind poziția geografică trateazaErori, // nu s-a putut determina localizarea { // diverși parametri de control enableHighAccuracy: true, timeout: 10000, // așteaptă max 10000 milisec. pentru a primi date maximumAge: 8000 // preia din cache date privind poziția } // dacă nu-s mai vechi de 8000 de milisecunde ); function proceseazaDate (localizare) { alert ('latitudine: ' + localizare.coords.latitude + 'longitudine: ' + localizare.coords.longitude); } a se folosi watchPosition() pentru a prelua localizarea în mod continuu
  94. 94. de studiat și experimentat: http://diveintohtml5.info/geolocation.html https://developer.mozilla.org/docs/WebAPI/Using_geolocation http://html5demos.com/geo Dr. Sabin Buragawww.purl.org/net/busaco Geolocation API
  95. 95. tratarea evenimentelor privind modificarea orientării și mișcarea dispozitivului W3C Working Draft (decembrie 2011) http://www.w3.org/TR/orientation-event/ Dr. Sabin Buragawww.purl.org/net/busaco DeviceOrientation Event Specification
  96. 96. Dr. Sabin Buragawww.purl.org/net/busaco date oferite de giroscop, accelerometru, busolă pe baza evenimentelor deviceorientation, devicemotion, compassneedscalibration
  97. 97. nu există suport complet oferit de nici un navigator exemple practice (dependente de browser): Dr. Sabin Buragawww.purl.org/net/busaco 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/
  98. 98. comunicare în timp-real (real time communication) între navigatoare Web în stilul peer-to-peer Dr. Sabin Buragawww.purl.org/net/busaco WebRTC specificație în lucru la Consorțiul Web (septembrie 2013) http://www.w3.org/TR/webrtc/
  99. 99. 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/ Dr. Sabin Buragawww.purl.org/net/busaco WebRTC
  100. 100. // 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 */ }; … } Dr. Sabin Buragawww.purl.org/net/busaco <video id="monitor" autoplay="autoplay"></video>
  101. 101. Dr. Sabin Buragawww.purl.org/net/busaco implementările curente sunt specifice fiecărui navigator Web http://caniuse.com/#feat=stream
  102. 102. 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) Dr. Sabin Buragawww.purl.org/net/busaco WebRTC
  103. 103. 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,… Dr. Sabin Buragawww.purl.org/net/busaco WebRTC
  104. 104. Dr. Sabin Buragawww.purl.org/net/busaco diverse maniere de comunicare specificate de WebRTC detalii la www.webrtc.org
  105. 105. API de interes: RTCDataChannel permite interschimb eficient, în stilul peer-to-peer, de date arbitrare, nu doar audio și/sau video Dr. Sabin Buragawww.purl.org/net/busaco WebRTC
  106. 106. http://iswebrtcreadyyet.com Dr. Sabin Buragawww.purl.org/net/busaco
  107. 107. 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/ Dr. Sabin Buragawww.purl.org/net/busaco WebRTC
  108. 108. procesarea și sintetizarea sunetului la nivel înalt W3C Working Draft (octombrie 2013) http://www.w3.org/TR/webaudio/ Dr. Sabin Buragawww.purl.org/net/busaco Web Audio API
  109. 109. pentru detalii + exemple demonstrative, a se parcurge: http://creativejs.com/resources/web-audio-api-getting-started/ https://github.com/WebAudio/demo-list Dr. Sabin Buragawww.purl.org/net/busaco Web Audio API
  110. 110. 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/ Dr. Sabin Buragawww.purl.org/net/busaco Alte API-uri de interes (unele, neimplementate):
  111. 111. Dr. Sabin Buragawww.purl.org/net/busaco Până la urmă, ce înseamnă HTML5?
  112. 112. Dr. Sabin Buragawww.purl.org/net/busaco “HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” Remy Sharp
  113. 113. 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- Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  114. 114. 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 Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  115. 115. grafica 2D și/sau 3D <canvas> în contextul 2D raster <canvas> 3D (WebGL) conținut grafic scalabil – SVG Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  116. 116. multimedia <audio> (MP3, OGG) <video> (H.264, OGG, WebM) API-uri de procesare a sunetului comunicații în timp-real – WebRTC Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  117. 117. acces la dispozitiv drag & drop orientation geolocation acces la camera Web notificări File API HTML5 în contextul TV + industriei auto Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  118. 118. offline & storage Web Storage (localStorage & Session Storage) baze de date la nivel de client – e.g., indexedDB caching Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  119. 119. connectivity & real-time mesaje vehiculate între documente transfer asincron via XMLHttpRequest – nivelul 2 WebSocket evenimente recepționate de la server (server-side events) Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  120. 120. asigurarea performanței Web Workers managementul istoricului navigării RequestAnimationFrame înglobarea datelor direct în URI controlul disponibilității conexiunii la rețea etc. Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  121. 121. Dr. Sabin Buragawww.purl.org/net/busaco arhitectura clientului Web actual (conform Jeff Jaffe)
  122. 122. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: performanța aplicațiilor Web la nivel de client

×