Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5

456 views

Published on

Detalii despre cele mai importante API-uri JavaScript standardizate specifice HTML5 pe care le oferă navigatoarele Web actuale, inclusiv diverse exemple. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Software
  • Be the first to comment

CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5

  1. 1. Dr.SabinBuragawww.purl.org/net/busaco Dezvoltarea aplicațiilor Web la nivel de client ⁂ programare Web API-uri JavaScript în contextul HTML5
  2. 2. Dr.SabinBuragawww.purl.org/net/busaco “You are never too old to set another goal or to dream a new dream.” C.S. Lewis
  3. 3. Dr.SabinBuragawww.purl.org/net/busaco Încărcarea & redarea documentelor suplimentar față de obiectul Document, browser-ul Web pune la dispoziție Window https://developer.mozilla.org/Web/API/Window
  4. 4. Dr.SabinBuragawww.purl.org/net/busaco Încărcarea & redarea documentelor obiectul Window oferă acces la mediul de redare proprietăți importante: window self top parent opener frames document location navigator history undoManager
  5. 5. Dr.SabinBuragawww.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.
  6. 6. Dr.SabinBuragawww.purl.org/net/busaco Încărcarea & redarea documentelor obiectul Window oferă acces la mediul de redare metode folositoare: open() close() stop() focus() blur() alert() confirm() prompt() print() showModalDialog()
  7. 7. Dr.SabinBuragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web ApplicationCache detalii la http://www.w3.org/TR/html5/browsers.html#offline
  8. 8. Dr.SabinBuragawww.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
  9. 9. Dr.SabinBuragawww.purl.org/net/busaco Control asupra cache-ului navigatorului Web ApplicationCache operații asupra cache-ului: update() abort() swapCache() starea cache-ului este furnizată de atributul status
  10. 10. Dr.SabinBuragawww.purl.org/net/busaco checking The user agent is checking for an update, or attempting to download the manifest for the first time. This is always the first event in the sequence. noupdate The manifest hadn’t changed. downloading The user agent has found an update and is fetching it, or is downloading the resources listed by the manifest for the first time. progress Downloading resources listed by the manifest. The event object’s total attribute returns the total number of files to be downloaded. The event object’s loaded attribute returns the number of files processed so far. cached The resources listed in the manifest have been downloaded, and the application is now cached. updateready The resources listed in the manifest have been newly redownloaded, and the script can use swapCache() to switch to the new cache. obsolete The manifest was found to have become a 404 or 410 page, so the application cache is being deleted. error The manifest was a 404 or 410 page, so the attempt to cache the application has been aborted. The manifest hadn’t changed, but the page referencing the manifest failed to download properly. A fatal error occurred while fetching resources listed in the manifest. The manifest changed while the update was being run.
  11. 11. Dr.SabinBuragawww.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/
  12. 12. Dr.SabinBuragawww.purl.org/net/busaco Specificarea contoarelor de timp WindowTimers setTimeout() clearTimeout() setInterval() clearInterval() http://www.w3.org/TR/html5/webappapis.html#timers
  13. 13. Dr.SabinBuragawww.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. 14. Dr.SabinBuragawww.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
  15. 15. Dr.SabinBuragawww.purl.org/net/busaco Starea și proprietățile sistemului interface NavigatorID { readonly attribute DOMString appName; readonly attribute DOMString appVersion; readonly attribute DOMString platform; readonly attribute DOMString product; // întoarce "Gecko" readonly attribute DOMString userAgent; };
  16. 16. Dr.SabinBuragawww.purl.org/net/busaco Starea și proprietățile sistemului remarcă: datele furnizate pot fi folosite la identificarea utilizatorului implicații asupra intimității (privacy) browser-ul ar trebui să ofere cât mai puține informații
  17. 17. Dr.SabinBuragawww.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. 18. Dr.SabinBuragawww.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. 19. Dr.SabinBuragawww.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. 20. Dr.SabinBuragawww.purl.org/net/busaco Managementul istoricului navigării interface History { readonly attribute unsigned long length; attribute ScrollRestoration scrollRestoration; readonly attribute any state; void go(optional long delta = 0); void back(); void forward(); void pushState(any data, DOMString title, optional DOMString? url = null); void replaceState(any data, DOMString title, optional DOMString? url = null); }; html.spec.whatwg.org/multipage/browsers.html#dom-history-pushstate
  21. 21. Dr.SabinBuragawww.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
  22. 22. Dr.SabinBuragawww.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. 23. Dr.SabinBuragawww.purl.org/net/busaco Drag & drop datele de transferat vor fi stocate de un obiect DataTransfer se permit diverse operații: copiere (copy copyLink) mutare (move linkMove), realizarea unei legături (link) etc.
  24. 24. Dr.SabinBuragawww.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
  25. 25. Dr.SabinBuragawww.purl.org/net/busaco Drag & drop o soluție alternativă: ținta operației drop poate trata evenimentele dragenter și, eventual, dragover pentru a oferi un feedback vizual utilizatorului
  26. 26. Dr.SabinBuragawww.purl.org/net/busaco Drag & drop evenimente ce pot fi tratate: drop dragenter dragover dragend
  27. 27. Dr.SabinBuragawww.purl.org/net/busaco Drag & drop pentru exemplificări și alte detalii, a se vizita: http://dev.opera.com/articles/view/drag-and-drop/ https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop http://www.html5rocks.com/tutorials/dnd/basics/ http://html5demos.com/drag
  28. 28. Dr.SabinBuragawww.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
  29. 29. Dr.SabinBuragawww.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.
  30. 30. Dr.SabinBuragawww.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
  31. 31. Dr.SabinBuragawww.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; };
  32. 32. Dr.SabinBuragawww.purl.org/net/busaco Există alte specificații/inițiative de interes?
  33. 33. Dr.SabinBuragawww.purl.org/net/busaco WebSocket API definește un API abstract pentru transmiterea de date pe baza protocolului de transfer WebSocket – RFC 6455 succesor al abordării Comet (Reverse Ajax)
  34. 34. Dr.SabinBuragawww.purl.org/net/busaco WebSocket API detalii disponibile în specificația HTML5 Living Standard (14 decembrie 2015) https://html.spec.whatwg.org/multipage/comms.html#network
  35. 35. Dr.SabinBuragawww.purl.org/net/busaco [Constructor(DOMString url, optional (DOMString or sequence<DOMString>) protocols), Exposed=(Window,Worker)] 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; 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 }
  36. 36. Dr.SabinBuragawww.purl.org/net/busaco WebSocket API transferul datelor se realizează în regim full duplex (bidirecțional), folosind un singur socket se recurge la schemele URI ws: și wss:
  37. 37. Dr.SabinBuraga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 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.error ("A survenit o eroare…"); }; // trimitem date sock.send ("Salutări hibernale! :)"); // am închis conexiunea sock.close (); maniera generală de transfer al datelor
  38. 38. Dr.SabinBuraga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:19740/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ă
  39. 39. Dr.SabinBuragawww.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
  40. 40. Dr.SabinBuragawww.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),…
  41. 41. Dr.SabinBuragawww.purl.org/net/busaco WebSocket API navigatorul poate fi considerat platformă de dezvoltare a aplicațiilor Internet oferă suport pentru diverse paradigme de comunicare via protocoalele Internet: RPC (Remote Procedure Call) + Pub/Sub (Publish/Subscribe)
  42. 42. Dr.SabinBuragawww.purl.org/net/busaco WebSocket API de studiat WAMP – Web Application Messaging Protocol http://wamp.ws/ exemple de instrumente software folositoare: Autobahn.js – client WAMP crossbar.io – router WAMP
  43. 43. Dr.SabinBuragawww.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
  44. 44. Dr.SabinBuragawww.purl.org/net/busaco EventSource API (Server-Send Events) 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
  45. 45. Dr.SabinBuragawww.purl.org/net/busaco EventSource API (Server-Send Events) detalii disponibile în specificația HTML5 Living Standard (14 decembrie 2015) https://html.spec.whatwg.org/multipage/comms.html#server-sent-events
  46. 46. Dr.SabinBuragawww.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.error ("A survenit o eroare…"); } };
  47. 47. Dr.SabinBuragawww.purl.org/net/busaco Web Messaging oferă API-uri pentru realizarea transferului de mesaje între diverse contexte de navigare
  48. 48. Dr.SabinBuragawww.purl.org/net/busaco Web Messaging recomandare a Consorțiului Web (mai 2015) http://www.w3.org/TR/webmessaging/ de studiat și HTML5 Living Standard (14 decembrie 2015) https://html.spec.whatwg.org/multipage/comms.html#web-messaging
  49. 49. Dr.SabinBuragawww.purl.org/net/busaco Web Messaging mesajele pot proveni de la server, via socket-uri Web sau de la alte documente via canale de comunicație documentele HTML5 pot transmite date unul altuia, chiar dacă aparțin unor domenii Internet diferite
  50. 50. Dr.SabinBuragawww.purl.org/net/busaco Web Messaging datele privind evenimentul de recepționare a unui mesaj sunt specificate de interfața MessageEvent transmiterea unui mesaj via metoda postMessage ()
  51. 51. Dr.SabinBuragawww.purl.org/net/busaco Web Messaging interfața MessageChannel specifică un canal de transmitere de mesaje constituit din 2 porturi (sursă și destinație) vezi și interfața MessagePort
  52. 52. Dr.SabinBuragawww.purl.org/net/busaco typedef sequence<MessagePort> MessagePortArray; 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 // tratează evenimentul recepționării unui mesaj attribute EventHandler onmessage; };
  53. 53. Dr.SabinBuragawww.purl.org/net/busaco un exemplu succint: http://tutorials.jenkov.com/html5/messaging.html
  54. 54. Dr.SabinBuragawww.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 nu interacționează direct cu utilizatorul
  55. 55. Dr.SabinBuragawww.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. 56. Dr.SabinBuragawww.purl.org/net/busaco Web Workers se oferă un API pentru instanțierea și manipularea programelor JavaScript de tip worker specificație W3C Working Draft (septembrie 2015) http://www.w3.org/TR/workers/ https://html.spec.whatwg.org/multipage/workers.html
  57. 57. Dr.SabinBuragawww.purl.org/net/busaco Web Workers un worker – desemnat de interfața Worker – prezintă un domeniu global de execuție specificat de interfața WorkerGlobalScope
  58. 58. Dr.SabinBuragawww.purl.org/net/busaco interface WorkerGlobalScope : EventTarget { readonly attribute WorkerGlobalScope self; readonly attribute WorkerLocation location; // originea worker-ului readonly attribute WorkerNavigator navigator; void importScripts(DOMString... urls); void close (); // tratarea evenimentelor attribute EventHandler onerror; attribute EventHandler onlanguagechange; attribute EventHandler onoffline; attribute EventHandler ononline; attribute EventHandler onrejectionhandled; attribute EventHandler onunhandledrejection; }; un obiect WorkerGlobalScope are asociate: un URL (inițial null) și o stare HTTPS (modern, deprecated, none)
  59. 59. Dr.SabinBuragawww.purl.org/net/busaco Web Workers dedicated worker „legat” de creatorul lui interacțiunea se face via canale de comunicație prin intermediul porturilor de mesaje vezi interfața MessagePort
  60. 60. Dr.SabinBuragawww.purl.org/net/busaco [Constructor (in DOMString scriptURL), Exposed=(Window,Worker)] interface Worker : EventTarget { // 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 EventHandler onmessage; }; Worker implements AbstractWorker; “Dedicated web workers are instantiated by the main process and they can communicate only with it.” (Guillaume Cedric Marty, 2015)
  61. 61. Dr.SabinBuragawww.purl.org/net/busaco Web Workers : cod partajabil – shared worker “Shared workers can be reached by all processes running on the same origin (different browser tabs, iframes or other shared workers).”
  62. 62. Dr.SabinBuragawww.purl.org/net/busaco Web Workers service worker lucrător responsabil cu accesarea serviciilor Web specificație W3C în regim de ciornă (iunie 2015) http://www.w3.org/TR/service-workers/ https://jakearchibald.github.io/isserviceworkerready/resources.html
  63. 63. Dr.SabinBuragawww.purl.org/net/busaco Web Workers un worker poate importa programe și biblioteci via importScripts (adreseWeb) de exemplu, se poate interacționa cu navigatorul Web identificat prin interfața WorkerNavigator
  64. 64. Dr.SabinBuragawww.purl.org/net/busaco var numar = 1; // worker.js – determină numere prime ad infinitum 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> G. Marty, How fast are Web workers? (2015) – context: performanță https://hacks.mozilla.org/2015/07/how-fast-are-web-workers/
  65. 65. Dr.SabinBuragawww.purl.org/net/busaco Web Workers observații: nu se poate modifica arborele DOM al paginii și nu se pot altera variabilele globale pot fi efectuate transferuri asincrone via XMLHttpRequest
  66. 66. Dr.SabinBuragawww.purl.org/net/busaco Web Storage oferă mecanisme de stocare (persistentă) a datelor la nivel de client (browser) sub forma de perechi cheie—valoare
  67. 67. Dr.SabinBuragawww.purl.org/net/busaco Web Storage recomandare a Consorțiului Web (noiembrie 2015) www.w3.org/TR/webstorage/
  68. 68. Dr.SabinBuragawww.purl.org/net/busaco Web Storage interfața Storage oferă acces la o listă de perechi (itemi) de forma cheie—valoare
  69. 69. Dr.SabinBuraga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 (); }
  70. 70. Dr.SabinBuragawww.purl.org/net/busaco Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage
  71. 71. Dr.SabinBuragawww.purl.org/net/busaco Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage stocare nepersistentă (suport pentru sesiuni)
  72. 72. Dr.SabinBuragawww.purl.org/net/busaco Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage alternativă la cookie-uri
  73. 73. Dr.SabinBuragawww.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);
  74. 74. Dr.SabinBuragawww.purl.org/net/busaco Web Storage 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)
  75. 75. Dr.SabinBuragawww.purl.org/net/busaco Web Storage datele memorate în localStorage sunt disponibile numai la nivel local – în browser (serverul Web nu le poate accesa direct decât via un program ce le transferă explicit prin HTTP)
  76. 76. Dr.SabinBuragawww.purl.org/net/busaco (în loc de) pauză
  77. 77. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API suport de stocare de date la nivel obiectual via un API asincron, inclusiv pentru WebWorker recomandare a Consorțiului Web (ianuarie 2015) http://www.w3.org/TR/IndexedDB/
  78. 78. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API obiectele de stocare compun baze de date identificate prin nume fiecare bază de date are asociată o versiune (număr >= 0)
  79. 79. Dr.SabinBuragawww.purl.org/net/busaco interface IDBDatabase : EventTarget { readonly attribute DOMString name; readonly attribute unsigned long version; readonly attribute DOMStringList objectStoreNames; IDBObjectStore createObjectStore (DOMString name, // stocare optional IDBObjectStoreParameters optionalParameters); void deleteObjectStore (DOMString name); // ștergere IDBTransaction transaction ((DOMString or sequence<DOMString>) storeNames, optional IDBTransactionMode mode = "readonly"); void close (); attribute EventHandler onabort; // abandonarea unei operații attribute EventHandler onerror; // tratează posibile erori attribute EventHandler onversionchange; // tratează actualizările }; interfață modelând o conexiune la baza de date, rezultând o tranzacție
  80. 80. Dr.SabinBuragawww.purl.org/net/busaco interface IDBDatabase : EventTarget { readonly attribute DOMString name; readonly attribute unsigned long version; readonly attribute DOMStringList objectStoreNames; IDBObjectStore createObjectStore (DOMString name, // stocare optional IDBObjectStoreParameters optionalParameters); void deleteObjectStore (DOMString name); // ștergere IDBTransaction transaction ((DOMString or sequence<DOMString>) storeNames, optional IDBTransactionMode mode = "readonly"); void close (); attribute EventHandler onabort; // abandonarea unei operații attribute EventHandler onerror; // tratează posibile erori attribute EventHandler onversionchange; // tratează actualizările }; var db = indexedDBSync.open ('Agenda', 1, function (tranz, versVeche) { tranz.db.createObjectStore ('Adrese', { keyPath: 'id', autoIncrement: true } ); });
  81. 81. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API datele sunt indexate, în sensul că fiecare înregistrare posedă o cheie unică de tip Number, String, Date ori Array (conform specificației ECMAScript)
  82. 82. Dr.SabinBuragawww.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 „.”)
  83. 83. Dr.SabinBuragawww.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); };
  84. 84. Dr.SabinBuragawww.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 ()
  85. 85. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API accesul la înregistrări se poate realiza și via indecși specificați de interfața IDBIndex
  86. 86. Dr.SabinBuragawww.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
  87. 87. Dr.SabinBuragawww.purl.org/net/busaco interface IDBTransaction : EventTarget { // modul de efectuare a tranzacției: readonly, readwrite, versionchange readonly attribute IDBTransactionMode mode; readonly attribute IDBDatabase db; readonly attribute DOMError error; // include eroarea apărută IDBObjectStore objectStore (DOMString name); void abort (); // tratarea evenimentelor attribute EventHandler onabort; attribute EventHandler oncomplete; attribute EventHandler onerror; };
  88. 88. Dr.SabinBuragawww.purl.org/net/busaco interface IDBTransaction : EventTarget { // modul de efectuare a tranzacției: readonly, readwrite, versionchange readonly attribute IDBTransactionMode mode; readonly attribute IDBDatabase db; readonly attribute DOMError error; // include eroarea apărută IDBObjectStore objectStore (DOMString name); void abort (); // tratarea evenimentelor attribute EventHandler onabort; attribute EventHandler oncomplete; attribute EventHandler onerror; }; 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'
  89. 89. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API iterarea unui număr de înregistrări se face via un cursor valorile direcției de parcurgere sunt specificate via IDBCursorDirection: next, nextunique, prev, prevunique
  90. 90. Dr.SabinBuragawww.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 (); };
  91. 91. Dr.SabinBuragawww.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
  92. 92. Dr.SabinBuragawww.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 exemplu în contextul WebGL: www.webappers.com/2014/01/02/how-to-use-indexeddb-to-handle-3d-webgl-assets/
  93. 93. Dr.SabinBuragawww.purl.org/net/busaco Indexed Database API
  94. 94. Dr.SabinBuragawww.purl.org/net/busaco File API suită de API-uri pentru manipularea fișierelor specificație W3C în stadiu de ciornă (aprilie 2015) http://www.w3.org/TR/FileAPI/
  95. 95. Dr.SabinBuragawww.purl.org/net/busaco File API interfețe de interes: File – consultarea informațiilor vizând un fișier Blob – consultarea datelor binare FileList – lista unor fișiere, eventual via <input type="file"> FileReader – citirea datelor dintr-un File sau Blob se poate folosi în conjuncție cu XMLHttpRequest, postMessage, drag & drop, WebWorker
  96. 96. Dr.SabinBuragawww.purl.org/net/busaco interface FileReader : EventTarget { void readAsArrayBuffer (Blob blob); // metode de citire asincronă void readAsText (Blob blob, optional DOMString label); 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; // rezultatul obținut: File sau Blob readonly attribute (DOMString or ArrayBuffer)? result; readonly attribute DOMError error; attribute [TreatNonCallableAsNull] EventHandler onloadstart; attribute [TreatNonCallableAsNull] EventHandler onprogress; attribute [TreatNonCallableAsNull] EventHandler onload; attribute [TreatNonCallableAsNull] EventHandler onabort; attribute [TreatNonCallableAsNull] EventHandler onerror; attribute [TreatNonCallableAsNull] EventHandler onloadend; };
  97. 97. Dr.SabinBuragawww.purl.org/net/busaco 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
  98. 98. Dr.SabinBuragawww.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
  99. 99. Dr.SabinBuragawww.purl.org/net/busaco Web Notifications alertarea utilizatorului în afara contextului paginii Web asupra apariției unui eveniment recomandare a Consorțiului Web (octombrie 2015) http://www.w3.org/TR/notifications/
  100. 100. Dr.SabinBuraga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); } } ); 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
  101. 101. Dr.SabinBuragawww.purl.org/net/busaco Page Visibility determinarea stării curente de vizibilitate a unei pagini recomandare a Consorțiului Web (octombrie 2013) http://www.w3.org/TR/page-visibility/
  102. 102. Dr.SabinBuragawww.purl.org/net/busaco Page Visibility extinde interfața Document cu următoarele facilități: enum VisibilityState { "hidden", "visible", "prerender", "unloaded" }; // la definiția interfeței Document se adaugă următoarele: partial interface Document { readonly attribute boolean hidden; // documentul e ascuns? readonly attribute VisibilityState visibilityState; // starea vizibilității };
  103. 103. Dr.SabinBuragawww.purl.org/net/busaco Geolocation API determinarea locației geografice a dispozitivului recomandare a Consorțiului Web (octombrie 2013) http://www.w3.org/TR/geolocation-API/
  104. 104. Dr.SabinBuraga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
  105. 105. Dr.SabinBuragawww.purl.org/net/busaco Geolocation API de studiat și experimentat: http://diveintohtml5.info/geolocation.html https://developer.mozilla.org/docs/WebAPI/Using_geolocation http://html5demos.com/geo
  106. 106. Dr.SabinBuragawww.purl.org/net/busaco DeviceOrientation Event Specification tratarea evenimentelor privind modificarea orientării și mișcarea dispozitivului în lucru la Consorțiul Web (decembrie 2011) http://www.w3.org/TR/orientation-event/
  107. 107. Dr.SabinBuragawww.purl.org/net/busaco date oferite de giroscop, accelerometru, busolă pe baza evenimentelor deviceorientation, devicemotion, compassneedscalibration
  108. 108. Dr.SabinBuragawww.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/
  109. 109. Dr.SabinBuragawww.purl.org/net/busaco
  110. 110. Dr.SabinBuragawww.purl.org/net/busaco Controlul temporizării animațiilor realizate via JavaScript (timing control for script-based animations) specificație în regim de ciornă (septembrie 2015) http://www.w3.org/TR/animation-timing/ parte a standardului HTML 5.1 – în lucru www.w3.org/TR/html51/webappapis.html#animation-frames
  111. 111. Dr.SabinBuragawww.purl.org/net/busaco Controlul temporizării animațiilor animațiile pot fi realizate: declarativ (e.g., via CSS sau elementul <animate> oferit de SVG) ori programatic (implementate de un program JavaScript)
  112. 112. Dr.SabinBuragawww.purl.org/net/busaco Controlul temporizării animațiilor apare necesitatea de a cunoaște la nivel de cod care e frecvența ideală de a actualiza conținutul dorit a fi animat (animation frame update) în funcție de capabilitățile disponibile la nivel de browser
  113. 113. Dr.SabinBuragawww.purl.org/net/busaco Controlul temporizării animațiilor metode noi specificate de interfața Window: long requestAnimationFrame (FrameRequestCallback funcție) semnalează navigatorului Web că o animație realizată prin program trebuie să fie planificată actualizarea va fi realizată o singură dată
  114. 114. Dr.SabinBuragawww.purl.org/net/busaco Controlul temporizării animațiilor metode noi specificate de interfața Window: void cancelAnimationFrame (long handler) anulează o cerere anterioară de actualizare a animației
  115. 115. Dr.SabinBuragawww.purl.org/net/busaco resurse adiționale: http://creativejs.com/resources/requestanimationframe/ developer.mozilla.org/Web/API/window.requestAnimationFrame
  116. 116. Dr.SabinBuragawww.purl.org/net/busaco WebRTC comunicare în timp-real (real time communication) între navigatoare Web în stilul peer-to-peer specificație în lucru la Consorțiul Web (februarie 2015) http://www.w3.org/TR/webrtc/
  117. 117. Dr.SabinBuragawww.purl.org/net/busaco WebRTC API de interes: MediaStream acces la fluxuri multimedia (e.g., video și/sau audio) furnizate de un senzor local – tipic, Webcam http://www.w3.org/TR/mediacapture-streams/
  118. 118. Dr.SabinBuragawww.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 */ }; … }
  119. 119. Dr.SabinBuragawww.purl.org/net/busaco implementări curente specifice fiecărui navigator Web http://caniuse.com/#feat=stream
  120. 120. Dr.SabinBuragawww.purl.org/net/busaco WebRTC API de interes: RTCPeerConnection permite ca doi utilizatori să comunice direct via browser comunicațiile sunt coordonate pe baza unui canal (e.g., instanțiat de un program via XMLHttpRequest)
  121. 121. Dr.SabinBuragawww.purl.org/net/busaco WebRTC API de interes: RTCPeerConnection oferă suport și pentru controlul sesiunii de transfer al datelor, plus trimiterea de mesaje speciale (signaling) transmiterea efectivă poate adopta un anumit protocol bidirecțional – HTTP, SIP, XMPP,…
  122. 122. Dr.SabinBuragawww.purl.org/net/busaco diverse maniere de comunicare specificate de WebRTC detalii la www.webrtc.org
  123. 123. Dr.SabinBuragawww.purl.org/net/busaco WebRTC API de interes: RTCDataChannel permite interschimb eficient, în stilul peer-to-peer, de date arbitrare, nu doar audio și/sau video
  124. 124. Dr.SabinBuragawww.purl.org/net/busaco http://iswebrtcreadyyet.com
  125. 125. Dr.SabinBuragawww.purl.org/net/busaco WebRTC tutoriale și exemple demonstrative: http://www.html5rocks.com/tutorials/webrtc/basics/ https://developer.mozilla.org/Web/API/WebRTC_API/ https://webrtc.github.io/samples/
  126. 126. Dr.SabinBuragawww.purl.org/net/busaco WebRTC realizarea unei aplicații Web multimedia conversaționale (proiect de licență al absolventului Bogdan Cernat, 2015) http://pixelwav.es/licenta/ https://github.com/bogdancernat/licenta studiu de caz
  127. 127. Dr.SabinBuragawww.purl.org/net/busaco Web Audio API procesarea și sintetizarea sunetului la nivel înalt W3C Working Draft (octombrie 2013) http://www.w3.org/TR/webaudio/
  128. 128. Dr.SabinBuragawww.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 http://webaudio.github.io/demo-list/ http://webaudioapi.com/ http://chimera.labs.oreilly.com/books/1234000001552/
  129. 129. Dr.SabinBuragawww.purl.org/net/busaco Alte API-uri de interes – unele (încă) neimplementate: Battery Status API (W3C Candidate Rec., 2014) – 64% www.w3.org/TR/battery-status/ Network Information API (în lucru la W3C, 2014) – 19% www.w3.org/TR/netinfo-api/ Network Service Discovery API (în lucru, feb. 2014) www.w3.org/TR/discovery-api/ Beacon API (în lucru, 9 decembrie 2015) – 56% http://www.w3.org/TR/beacon/
  130. 130. Dr.SabinBuragawww.purl.org/net/busaco Alte API-uri de interes – unele (încă) neimplementate: Push API (W3C Working Draft, aprilie 2015) – 45% www.w3.org/TR/push-api/ Vibration API (recomandare W3C, februarie 2015) – 68% www.w3.org/TR/vibration/ Gamepad (W3C Working Draft, aprilie 2015) – 58% www.w3.org/TR/gamepad/ Clipboard API & Events (ciornă W3C, aprilie 2015) – 82% www.w3.org/TR/clipboard-apis/
  131. 131. Dr.SabinBuragawww.purl.org/net/busaco Alte API-uri de interes – unele (încă) neimplementate: Ambient Light Events (în lucru, sep. 2015) – 8% www.w3.org/TR/ambient-light/ Progress Events (W3C Recommandation, aprilie 2014) www.w3.org/TR/progress-events/ Proximity API (în lucru, septembrie 2015) – 9% www.w3.org/TR/proximity/ Web Cryptography API (Candidate Rec., dec. 2014) – 74% www.w3.org/TR/WebCryptoAPI/
  132. 132. Dr.SabinBuragawww.purl.org/net/busaco Până la urmă, ce înseamnă HTML5?
  133. 133. Dr.SabinBuraga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
  134. 134. Dr.SabinBuragawww.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-
  135. 135. Dr.SabinBuragawww.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
  136. 136. Dr.SabinBuragawww.purl.org/net/busaco HTML5 grafica 2D și/sau 3D <canvas> în contextul 2D raster <canvas> 3D (WebGL) conținut grafic scalabil – SVG
  137. 137. Dr.SabinBuragawww.purl.org/net/busaco HTML5 multimedia <audio> (MP3, OGG,…) <video> (H.264, OGG, WebM) API-uri de procesare a sunetului comunicații în timp-real – WebRTC
  138. 138. Dr.SabinBuragawww.purl.org/net/busaco HTML5 acces la dispozitiv drag & drop orientation geolocation acces la camera Web notificări File API contexte: TV, industria auto, console de jocuri
  139. 139. Dr.SabinBuragawww.purl.org/net/busaco HTML5 offline & storage Web Storage (localStorage & Session Storage) baze de date la nivel de client: indexedDB caching
  140. 140. Dr.SabinBuragawww.purl.org/net/busaco HTML5 connectivity & real-time mesaje vehiculate între documente transfer asincron via XMLHttpRequest transfer de date via WebSocket evenimente recepționate de la server (server-side events)
  141. 141. Dr.SabinBuragawww.purl.org/net/busaco HTML5 asigurarea performanței Web Workers managementul istoricului navigării RequestAnimationFrame înglobarea datelor direct în URI controlul disponibilității conexiunii la rețea etc.
  142. 142. Dr.SabinBuragawww.purl.org/net/busaco tehnologii implementate de navigatorul Web actual, inclusiv la nivelul dispozitivelor mobile http://www.w3.org/Mobile/mobile-web-app-state/ vezi și Device APIs Working Group: www.w3.org/2009/dap/
  143. 143. Dr.SabinBuragawww.purl.org/net/busaco Web Components suita de tehnologii HTML5 oferă premisele implementării de componente Web la nivel de client ce pot fi împachetate și reutilizate în funcție de context http://webcomponents.org/ http://w3c.github.io/webcomponents/
  144. 144. Dr.SabinBuragawww.purl.org/net/busaco Web Components elemente specificate de dezvoltator – Custom Elements (ciornă, decembrie 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, 15 decembrie 2015): www.w3.org/TR/shadow-dom/
  145. 145. Dr.SabinBuragawww.purl.org/net/busaco   ❄ ❄ ❄ ❄ ❄ ❄  episodul viitor: vacanța de iarnă ☃ ❄

×