2. C.S. Lewis
Dr. Sabin Buragawww.purl.org/net/busaco
“You are never too old to set another goal
or to dream a new dream.”
3. suplimentar față de obiectul Document,
browser-ul Web pune la dispoziție Window
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
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 Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
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 Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
6. obiectul Window oferă acces la mediul de redare
metode folositoare:
open() close() stop()
focus() blur()
alert() confirm() prompt()
print()
showModalDialog()
Dr. Sabin Buragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
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 Buragawww.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. ApplicationCache
operații asupra cache-ului: update() abort() swapCache()
starea cache-ului este furnizată de atributul status
Dr. Sabin Buragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
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 Buragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
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 Buragawww.purl.org/net/busaco
Specificarea contoarelor de timp
14. Navigator
subinterfețele NavigatorID și NavigatorAbilities
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
Dr. Sabin Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
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 Buragawww.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. 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 Buragawww.purl.org/net/busaco
Starea și proprietățile sistemului
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 Buragawww.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. 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 Buragawww.purl.org/net/busaco
Drag & drop
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 Buragawww.purl.org/net/busaco
Drag & drop
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 Buragawww.purl.org/net/busaco
Drag & drop
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 Buragawww.purl.org/net/busaco
Drag & drop
22. evenimente ce pot fi tratate:
drop
dragenter
dragover
dragend
Dr. Sabin Buragawww.purl.org/net/busaco
Drag & drop
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 Buragawww.purl.org/net/busaco
Drag & drop
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 Buragawww.purl.org/net/busaco
Alte API-uri de bază:
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 Buragawww.purl.org/net/busaco
Alte API-uri de bază:
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 Buragawww.purl.org/net/busaco
WebSocket API
29. specificație în stadiul W3C Candidate Recommendation
(20 septembrie 2012)
www.w3.org/TR/websockets/
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
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 Buragawww.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. transferul datelor se realizează
în regim full duplex (bidirecțional),
folosind un singur socket
se recurge la schemele URI ws: și wss:
Dr. Sabin Buragawww.purl.org/net/busaco
WebSocket API
32. maniera generală de
transfer al datelor
Dr. Sabin Buragawww.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. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
WebSocket API
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 Buragawww.purl.org/net/busaco
WebSocket API
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 Buragawww.purl.org/net/busaco
WebSocket API
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 Buragawww.purl.org/net/busaco
WebSocket API
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 Buragawww.purl.org/net/busaco
EventSource API (Server-Send Events)
41. specificație în stadiu de ciornă (15 noiembrie 2013)
http://dev.w3.org/html5/eventsource/
Dr. Sabin Buragawww.purl.org/net/busaco
EventSource API (Server-Send Events)
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 Buragawww.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. oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
44. specificație a Consorțiului Web
statut Candidate Recommendation (mai 2012)
http://www.w3.org/TR/webmessaging/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
45. mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
46. datele privind evenimentul de recepționare
a unui mesaj sunt specificate de interfața MessageEvent
transmiterea unui mesaj via metoda postMessage ()
Dr. Sabin Buragawww.purl.org/net/busaco
Web Messaging
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 Buragawww.purl.org/net/busaco
Web Messaging
49. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
Web Workers
53. un worker – desemnat de interfața Worker –
prezintă un domeniu global de execuție
specificat de interfața WorkerGlobalScope
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
interface WorkerGlobalScope : EventTarget {
readonly attribute WorkerGlobalScope self;
readonly attribute WorkerLocation location;
void close ();
55. dedicated worker
“legat” de creatorul lui
interacțiunea cu el se face via porturi de mesaje
– vezi interfața MessagePort
Dr. Sabin Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
Web Workers
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 Buragawww.purl.org/net/busaco
Web Workers
59. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Web Workers
61. oferă mecanisme de stocare (persistentă) a datelor
la nivel de client (browser)
sub forma de perechi cheie—valoare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
62. recomandare a Consorțiului Web (iulie 2013)
www.w3.org/TR/webstorage/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
63. interfața Storage oferă acces la o listă de perechi (itemi)
de forma cheie—valoare
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
64. Dr. Sabin Buragawww.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. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
66. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
stocare nepersistentă
(suport pentru sesiuni)
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
67. maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
alternativă la cookie-uri
Dr. Sabin Buragawww.purl.org/net/busaco
Web Storage
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 Buragawww.purl.org/net/busaco
<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
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 Buragawww.purl.org/net/busaco
Web Storage
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 Buragawww.purl.org/net/busaco
Web Storage
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 Buragawww.purl.org/net/busaco
Indexed Database API
72. obiectele de stocare compun baze de date
identificate prin nume
Dr. Sabin Buragawww.purl.org/net/busaco
Indexed Database API
fiecare bază de date are asociată o versiune (număr >= 0)
74. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Indexed Database API
76. };
Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Indexed Database API
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 Buragawww.purl.org/net/busaco
Indexed Database API
79. attribute Function? onabort;
attribute Function? oncomplete;
attribute Function? onerror;
};
// tratarea evenimentelor
Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Indexed Database API
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 Buragawww.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. 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 Buragawww.purl.org/net/busaco
Indexed Database API
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 Buragawww.purl.org/net/busaco
File API
85. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
File API
87. Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
cookie-uri clasice
Dr. Sabin Buragawww.purl.org/net/busaco
Privire de ansamblu
asupra stocării la nivel de client
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 Buragawww.purl.org/net/busaco
Web Notifications
89. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco
Page Visibility
92. determinarea locației geografice a dispozitivului
W3C Recommendation (octombrie 2013)
http://www.w3.org/TR/geolocation-API/
Dr. Sabin Buragawww.purl.org/net/busaco
Geolocation API
93. Dr. Sabin Buragawww.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. de studiat și experimentat:
http://diveintohtml5.info/geolocation.html
https://developer.mozilla.org/docs/WebAPI/Using_geolocation
http://html5demos.com/geo
Dr. Sabin Buragawww.purl.org/net/busaco
Geolocation API
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 Buragawww.purl.org/net/busaco
DeviceOrientation Event Specification
97. nu există suport complet oferit de nici un navigator
exemple practice (dependente de browser):
Dr. Sabin Buragawww.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. comunicare în timp-real (real time communication)
între navigatoare Web în stilul peer-to-peer
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
specificație în lucru la Consorțiul Web (septembrie 2013)
http://www.w3.org/TR/webrtc/
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 Buragawww.purl.org/net/busaco
WebRTC
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 Buragawww.purl.org/net/busaco
<video id="monitor" autoplay="autoplay"></video>
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 Buragawww.purl.org/net/busaco
WebRTC
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 Buragawww.purl.org/net/busaco
WebRTC
105. API de interes:
RTCDataChannel
permite interschimb eficient, în stilul peer-to-peer,
de date arbitrare, nu doar audio și/sau video
Dr. Sabin Buragawww.purl.org/net/busaco
WebRTC
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 Buragawww.purl.org/net/busaco
WebRTC
108. procesarea și sintetizarea sunetului la nivel înalt
W3C Working Draft (octombrie 2013)
http://www.w3.org/TR/webaudio/
Dr. Sabin Buragawww.purl.org/net/busaco
Web Audio API
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 Buragawww.purl.org/net/busaco
Web Audio API
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 Buragawww.purl.org/net/busaco
Alte API-uri de interes (unele, neimplementate):
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 Buragawww.purl.org/net/busaco
HTML5
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 Buragawww.purl.org/net/busaco
HTML5
115. grafica 2D și/sau 3D
<canvas> în contextul 2D raster
<canvas> 3D (WebGL)
conținut grafic scalabil – SVG
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
116. multimedia
<audio> (MP3, OGG)
<video> (H.264, OGG, WebM)
API-uri de procesare a sunetului
comunicații în timp-real – WebRTC
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
117. acces la dispozitiv
drag & drop
orientation
geolocation
acces la camera Web
notificări
File API
HTML5 în contextul TV + industriei auto
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
118. offline & storage
Web Storage (localStorage & Session Storage)
baze de date la nivel de client – e.g., indexedDB
caching
Dr. Sabin Buragawww.purl.org/net/busaco
HTML5
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 Buragawww.purl.org/net/busaco
HTML5
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 Buragawww.purl.org/net/busaco
HTML5