5. Dr.SabinBuragawww.purl.org/net/busaco
Încărcarea & redarea documentelor
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.
8. Dr.SabinBuragawww.purl.org/net/busaco
politica de caching e specificată de un fișier .appcache
referit prin <html manifest="offline.appcache">
pentru fiecare pagină Web a aplicației
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
# preia conținutul de pe rețea, dacă e posibil
NETWORK:
stiri.html
# conținut alternativ, dacă suntem offline
FALLBACK:
/fallback.html
11. Dr.SabinBuragawww.purl.org/net/busaco
Control asupra cache-ului navigatorului Web
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://appcache.offline.technology/
13. Dr.SabinBuragawww.purl.org/net/busaco
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, 2014)
pentru alte detalii și exemple, a se parcurge și
https://developer.mozilla.org/Web/API/WindowTimers
14. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
interfața Navigator având sub-interfețele:
NavigatorID – identitatea browser-ului
NavigatorLanguage – preferințe lingvistice ale clientului
NavigatorOnline – starea online/offline a navigatorului
NavigatorContentUtils – manipularea conținuturilor
NavigatorStorageUtils – parametri privind stocarea locală
NavigatorPlugins – managementul plugin-urilor
www.w3.org/TR/html5/webappapis.html#system-state-and-capabilities
17. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
remarcă:
“In certain cases, despite the best efforts of the entire
industry, Web browsers have bugs and limitations
that Web authors are forced to work around.” (W3C, 2014)
detectarea clientului trebuie întotdeauna
să ia în considerație versiunile actuale
se presupune că versiunile viitoare/necunoscute
vor fi compatibile cu cea curentă
18. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
registerProtocolHandler () registerContentHandler ()
implicit, într-un URI se permit scheme precum:
bitcoin irc geo mailto magnet mms news nntp sip
sms smsto ssh tel urn webcal xmpp
19. Dr.SabinBuragawww.purl.org/net/busaco
Starea și proprietățile sistemului
protocoalele și/sau tipurile de date
ce pot fi gestionate de navigatorul Web
pot fi manipulate via interfața NavigatorContentUtils
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
20. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
stocarea fragmentelor de date în diverse formate,
în vederea efectuării operațiilor drag & drop
mecanism definit de varianta HTML5 living standard
și nu în recomandarea Consorțiului Web
https://html.spec.whatwg.org/#dnd
21. Dr.SabinBuragawww.purl.org/net/busaco
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
23. Dr.SabinBuragawww.purl.org/net/busaco
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
26. Dr.SabinBuragawww.purl.org/net/busaco
Drag & drop
pentru exemplificări ș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
27. Dr.SabinBuragawww.purl.org/net/busaco
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
http://www.w3.org/TR/html5/editing.html
28. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
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.
29. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
scripting
suport pentru execuția de cod
în contextul unui document HTML:
procesarea elementelor <script>
navigarea via URL-uri folosind schema javascript:
managementul funcțiilor de tratare a evenimentelor
suport pentru scripting în alte limbaje – e.g., SVG
30. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de bază:
scripting
interfața ErrorEvent pentru raportarea erorilor
interface ErrorEvent : Event {
readonly attribute DOMString message;
readonly attribute DOMString filename;
readonly attribute unsigned long lineno;
readonly attribute unsigned long colno;
readonly attribute any error;
};
36. Dr.SabinBuragawww.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 datelor 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 (); maniera generală de
transfer al datelor
37. Dr.SabinBuragawww.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() {
if (socket.bufferedAmount == 0)
socket.send (oferaDate ());
}, 50);
};
oferă numărul de octeți
ce n-au fost transmiși încă
38. Dr.SabinBuragawww.purl.org/net/busaco
WebSocket API
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.
39. Dr.SabinBuragawww.purl.org/net/busaco
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),…
40. Dr.SabinBuragawww.purl.org/net/busaco
WebSocket API
navigatorul poate fi considerat platformă de dezvoltare
a aplicațiilor Internet
oferă suport pentru diverse protocoale bazate pe TCP
(Publish & Subscribe, VNC, XMPP,…)
de studiat WAMP – Web Application Messaging Protocol
http://wamp.ws/
43. Dr.SabinBuragawww.purl.org/net/busaco
WebSocket API
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
https://github.com/naturalist/mempe
46. Dr.SabinBuragawww.purl.org/net/busaco
// verificăm dacă există suport oferit de navigatorul Web
if (!!window.EventSource) {
// instanțiem o sursă de date (un flux)
var flux = new EventSource ("http://news.info/web/today");
// 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…");
}
};
55. Dr.SabinBuragawww.purl.org/net/busaco
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
56. Dr.SabinBuragawww.purl.org/net/busaco
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/
https://html.spec.whatwg.org/multipage/workers.html#workers
63. Dr.SabinBuragawww.purl.org/net/busaco
// worker.js – determină numere prime ad infinitum
var numar = 1;
search: while (true) {
numar++;
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 prog = new Worker('worker.js'); // instanțiem lucrătorul JavaScript
prog.onmessage = function (ev) { // tratăm mesajul recepționat
// plasăm datele (rezultatul) în cadrul elementului HTML cu id='rezultat'
document.getElementById ('rezultat').textContent = ev.data;
};
</script>
72. Dr.SabinBuragawww.purl.org/net/busaco
<textarea id="editor" placeholder="Începeți să tastați...">
</textarea>
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);
80. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
de asemenea, o înregistrare (record) are o valoare
corespunzătoare unui tip de date ECMAScript
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 „.”)
81. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBObjectStore { // specifică maniera de stocare
readonly attribute DOMString name;
readonly attribute DOMString keyPath;
readonly attribute DOMStringList indexNames;
readonly attribute IDBTransaction transaction;
readonly attribute boolean autoIncrement;
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 IDBCursorDirection direction = "next");
IDBIndex createIndex (DOMString name, // operații vizând indecșii
(DOMString or sequence<DOMString>) keyPath,
optional IDBIndexParameters optionalParameters);
IDBIndex index (DOMString name);
void deleteIndex (DOMString indexName);
IDBRequest count (optional any key);
};
82. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBRequest : EventTarget { // modelează o cerere
readonly attribute any result; // rezultatul interogării emise
readonly attribute DOMError error; // eventuala eroare survenită
readonly attribute (IDBObjectStore or IDBIndex or IDBCursor)? source;
readonly attribute IDBTransaction transaction;
// starea interogării: în așteptare ("pending") sau efectuată ("done")
readonly attribute IDBRequestReadyState readyState;
attribute EventHandler onsuccess; // funcții de tratare a evenim.
attribute EventHandler onerror;
};
metode importante specificate de interfața IDBObjectStore:
get () put () add () delete ()
openCursor ()
createIndex () index () deleteIndex ()
clear () count ()
84. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
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
88. Dr.SabinBuragawww.purl.org/net/busaco
interface IDBCursor {
readonly attribute (IDBObjectStore or IDBIndex) source; // sursa datelor
readonly attribute IDBCursorDirection direction; // direcția de iterare
readonly attribute any key; // cheia
readonly attribute any primaryKey; // cheia primară
IDBRequest update (any value); // actualizarea valorilor
void advance ([EnforceRange] unsigned long count);
void continue (optional any key);
IDBRequest delete ();
};
89. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
excepții specifice:
UnknownError ConstraintError DataError
TransactionInactiveError ReadOnlyError VersionError
excepții preluate de la DOM – nivelul 4:
NotFoundError InvalidStateError InvalidAccessError
AbortError TimeoutError QuotaExceededError
SyntaxError DataCloneError
90. Dr.SabinBuragawww.purl.org/net/busaco
Indexed Database API
pentru detalii și exemplificări, a se parcurge:
http://docs.webplatform.org/wiki/apis/indexedDB
https://developer.mozilla.org/docs/IndexedDB
alte resurse de interes:
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/
96. Dr.SabinBuragawww.purl.org/net/busaco
Privire de ansamblu
asupra stocării la nivel de client
Web Storage API: localStorage + sessionStorage
indexedDB
Web SQL – specificație abandonată
Application Cache
File APIs
cookie-uri clasice
vezi și www.sitepoint.com/html5-browser-storage-past-present-future/
98. Dr.SabinBuragawww.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); }
}
);
alte resurse de interes:
https://developer.mozilla.org/docs/WebAPI/Using_Web_Notifications
http://www.paulund.co.uk/html5-notifications
https://github.com/alexgibson/notify.js
http://caniuse.com/#feat=notifications
102. Dr.SabinBuragawww.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
106. Dr.SabinBuragawww.purl.org/net/busaco
DeviceOrientation Event Specification
nu există suport complet oferit de niciun navigator
(e.g., maniera de tratare a coordonatelor e diferită)
exemple practice (dependente de browser):
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/
116. Dr.SabinBuragawww.purl.org/net/busaco
<video id="monitor" autoplay="autoplay"></video>
// accesul la conținut multimedia local furnizat de un senzor
// (cameră Web, microfon) pe baza acordului utilizatorului
navigator.getUserMedia (
{ video: true, // pot fi impuse diverse constrângeri
audio: true }, // în acest caz, dorim și video și audio
prelucreazaFlux, trateazaErori
);
var video = document.getElementById ('monitor');
function prelucreazaFlux (flux) {
video.src = URL.createObjectURL (flux); // ‘alimentăm’ cu flux video
video.onerror = function () { flux.stop (); }; // eroare, deci oprim fluxul
flux.onended = function () { /* transmisia s-a terminat */ };
…
}
125. Dr.SabinBuragawww.purl.org/net/busaco
Web Audio API
pentru detalii + exemple demonstrative, a se parcurge:
http://creativejs.com/resources/web-audio-api-getting-started/
https://developer.mozilla.org/Web/API/Web_Audio_API
https://github.com/WebAudio/demo-list
http://webaudioapi.com/
http://greweb.me/2013/09/beez/
126. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de interes – unele (încă) neimplementate:
Battery Status API
(W3C Candidate Recommendation, decembrie 2014)
www.w3.org/TR/battery-status/
Network Information API
(W3C Working Group Note, aprilie 2014)
www.w3.org/TR/netinfo-api/
Network Service Discovery API
(W3C Working Draft, februarie 2014)
www.w3.org/TR/discovery-api/
127. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de interes – unele (încă) neimplementate:
Push API (W3C Working Draft,
octombrie 2014) – www.w3.org/TR/push-api/
Vibration API (W3C Proposed Recommendation,
decembrie 2014) – www.w3.org/TR/vibration/
Gamepad (W3C Working Draft,
februarie 2014) – www.w3.org/TR/gamepad/
Clipboard API and Events (W3C Working Draft,
decembrie 2014) – www.w3.org/TR/clipboard-apis/
128. Dr.SabinBuragawww.purl.org/net/busaco
Alte API-uri de interes – unele (încă) neimplementate:
Ambient Light Events
(W3C Last Call Working Draft, iunie 2014)
www.w3.org/TR/ambient-light/
Progress Events (W3C Recommandation, aprilie 2014)
www.w3.org/TR/progress-events/
Proximity Events
(W3C Candidate Recommendation, octombrie 2013)
www.w3.org/TR/proximity/
vezi și http://www.w3.org/2009/dap/
131. Dr.SabinBuragawww.purl.org/net/busaco
HTML5
semantic markup
noi marcaje precum <header> <nav> <section> <aside>…
noi tipuri de interacțiune via formulare Web
includerea diverselor tipuri de conținut precum SVG
microdate – vezi inițiativa schema.org
conținut editabil
atribute specifice aplicațiilor: data-
132. Dr.SabinBuragawww.purl.org/net/busaco
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
141. Dr.SabinBuragawww.purl.org/net/busaco
Web Components
elemente specificate de dezvoltator – Custom Elements
(ciornă, ianuarie 2015): www.w3.org/TR/custom-elements/
import de construcții HTML – HTML Imports
(în lucru, martie 2014): www.w3.org/TR/html-imports/
machete de prezentare definite declarativ – <template>
(ciornă, dec. 2014): http://caniuse.com/#feat=template
interacțiune între arborii DOM – Shadow DOM
(în lucru, iunie 2014): www.w3.org/TR/shadow-dom/