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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

API-uri JavaScript în contextul HTML5

programare Web la nivel de client

Dr.

Sab

in B

ura

ga


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

C.S. Lewis

Dr.

Sab

in B

ura

ga


Încărcarea & redarea documentelor

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

Dr.

Sab

in B

ura

ga



obiectul Window oferă acces la mediul de redare

proprietăți importante:window self top parent opener frames

document location navigator

history undoManager

Dr.

Sab

in B

ura

ga




proprietăți importante:applicationCache

onNumeEveniment

(stabilirea de funcții pentru tratarea evenimentelor)exemple: onplay ondrag onprogress etc.

Dr.

Sab

in B

ura

ga




metode folositoare:open() close() stop()

focus() blur()

alert() confirm() prompt()

print()

showModalDialog()

Dr.

Sab

in B

ura

ga


Control asupra cache-ului navigatorului Web

ApplicationCache

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

Dr.

Sab

in B

ura

ga


politica de caching e specificată de un fișier .appcache

referit prin <html manifest="offline.appcache">

CACHE MANIFEST# versiunea 1.0.1 # resurse (proprii / din alte domenii) ce pot fi plasate în cacheindex.htmlcache.htmlhtml5.cssfigura.jpgimg/sigla.pnghttp://www.undeva.info/stiluri.css

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

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

Dr.

Sab

in B

ura

ga



ApplicationCache

operații asupra cache-ului: update() abort() swapCache()

starea cache-ului este furnizată de atributul status

Dr.

Sab

in B

ura

ga



ApplicationCache

evenimente specifice: checking noupdate downloading progress

cached updateready obsolete error

Dr.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga


Specificarea contoarelor de timp

WindowTimers

setTimeout() clearTimeout()

setInterval() clearInterval()

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

Dr.

Sab

in B

ura

ga


Specificarea contoarelor de timp

WindowTimers

“This API does not guarantee that timers will run exactlyon schedule. Delays due to CPU load, other tasks, etc.

are to be expected.” (W3C, 2013)

Dr.

Sab

in B

ura

ga


Starea și proprietățile sistemului

Navigator

subinterfețele NavigatorID și NavigatorAbilities

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

Dr.

Sab

in B

ura

ga



interface NavigatorID {

readonly attribute DOMString appName;

readonly attribute DOMString appVersion;

readonly attribute DOMString platform;

readonly attribute DOMString product;

readonly attribute DOMString userAgent;

};

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

Dr.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga



protocoalele și/sau tipurile de date ce pot fi gestionate de navigatorul Web

pot fi manipulate via interfața NavigatorAbilities

tipuri MIME uzuale suportate de browser:application/x-www-form-urlencoded application/xhtml+xml application/xml

image/gif image/jpeg image/png image/svg+xml

text/cache-manifest text/css text/html text/plain text/xml

Dr.

Sab

in B

ura

ga


Drag & drop

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.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Drag & drop

datele de transferat vor fi stocatede un obiect DataTransfer

se permit diverse operații:copiere (copy copyLink)mutare (move linkMove),

realizarea unei legături (link) etc.

Dr.

Sab

in B

ura

ga


Drag & drop

destinatarul operațiunii drag & drop va avea definitatributul 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 caracteresau file:image/jpeg pentru un fișier JPEG

Dr.

Sab

in B

ura

ga


Drag & drop

evenimente ce pot fi tratate:drop

dragenter

dragover

dragend

Dr.

Sab

in B

ura

ga


Drag & drop

pentru exemple și alte detalii, a se vizita:

https://developer.mozilla.org/docs/DragDrop/Drag_and_Drop

http://www.html5rocks.com/tutorials/dnd/basics/

http://dev.opera.com/articles/view/drag-and-drop/

http://html5demos.com/drag

Dr.

Sab

in B

ura

ga


Alte API-uri de bază:

UndoManager

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

Dr.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga



editing API

execuția de script-uri asupra selecției curentesau la poziția curentă a cursorului de text

metode:execCommand()

queryCommandEnabled() queryCommandState()

queryCommandSupported() etc.

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


WebSocket API

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

succesor al abordării Comet (Reverse Ajax)

Dr.

Sab

in B

ura

ga


WebSocket API

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

www.w3.org/TR/websockets/

Dr.

Sab

in B

ura

ga


[Constructor(DOMString url, optional (DOMString or DOMString[ ]) protocols)]

interface WebSocket : EventTarget { readonly attribute DOMString url; const unsigned short CONNECTING = 0; // constante: starea conexiuniiconst 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 tratareattribute EventHandler onmessage; // a evenimentelorattribute EventHandler onerror; // privitoare la comunicareaattribute EventHandler onclose; // prin rețeareadonly attribute DOMString protocol; void send (in (DOMString or Blob or ArrayBuffer) data); // trimite datevoid close (optional unsigned short code, optional DOMString reason);

// închide conexiunea}

Dr.

Sab

in B

ura

ga


WebSocket API

transferul datelor se realizeazăîn regim full duplex (bidirecțional),

folosind un singur socket

se recurge la schemele URI ws: și wss:

Dr.

Sab

in B

ura

ga


// creăm un socket Webvar sock = new WebSocket ("ws://www.undeva.info/");// asociem funcțiile de tratare a evenimentelorsock.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 datesock.send ("Salutări flaușate!");// am închis conexiuneasock.close ();

maniera generală de transfer al datelor

Dr.

Sab

in B

ura

ga


// 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țice n-au fost transmiși încă

Dr.

Sab

in B

ura

ga


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.

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


WebSocket API

navigatorul poate fi considerat platformă de dezvoltarea aplicațiilor Internet

oferă suport pentru diverse protocoale bazate pe TCP(pub/sub, VNC, XMPP,…)

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


EventSource API (Server-Send Events)

mecanism standardizat de transmiterea unui flux continuu de date de la server spre client

(push events)

tratarea recepționării datelor provenite de la serverse realizează via evenimente DOM

Dr.

Sab

in B

ura

ga


EventSource API (Server-Send Events)

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

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

Dr.

Sab

in B

ura

ga


// 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");

// 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.

Sab

in B

ura

ga


Web Messaging

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

Dr.

Sab

in B

ura

ga


Web Messaging

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

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

Dr.

Sab

in B

ura

ga


Web Messaging

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

Dr.

Sab

in B

ura

ga


Web Messaging

datele privind evenimentul de recepționarea unui mesaj sunt specificate de interfața MessageEvent

transmiterea unui mesaj via metoda postMessage ()

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

attribute Function? onmessage; // tratează evenimentele

};

Dr.

Sab

in B

ura

ga


pentru detalii, a se parcurge șihttp://dev.opera.com/articles/view/window-postmessage-messagechannel/

http://msdn.microsoft.com/en-us/library/ie/hh781494%28v=vs.85%29.aspx

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Web Workers

se oferă un API pentru instanțierea și manipulareaprogramelor JavaScript de tip worker

specificație W3C Candidate Recommendation (mai 2012)

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

Dr.

Sab

in B

ura

ga


Web Workers

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

specificat de interfața WorkerGlobalScope

Dr.

Sab

in B

ura

ga


interface WorkerGlobalScope : EventTarget {

readonly attribute WorkerGlobalScope self;

readonly attribute WorkerLocation location;

void close ();

// 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.

Sab

in B

ura

ga


Web Workers

dedicated worker“legat” de creatorul lui

interacțiunea cu el se face via porturi de mesaje– vezi interfața MessagePort

Dr.

Sab

in B

ura

ga


Web Workers

[Constructor(in DOMString scriptURL)]

interface Worker : AbstractWorker {

// termină execuția programului (worker-ului)

void terminate ();

// plasează un mesaj

void postMessage (any message,

optional sequence<Transferable> transfer);

// tratează apariția unui mesaj ce poate fi procesat

attribute Function? onmessage;

};

Dr.

Sab

in B

ura

ga


Web Workers

shared workerposedă un nume prin care poate fi referit

de alte script-uri având aceeași origine

vezi interfața DedicatedWorkerGlobalScope

Dr.

Sab

in B

ura

ga


Web Workers

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

de exemplu, se poate interacționa cu navigatorul Web

Dr.

Sab

in B

ura

ga


// worker.js – determină numere primevar 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 primpostMessage (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 JavaScriptworker.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>

Dr.

Sab

in B

ura

ga


Web Workers

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.

Sab

in B

ura

ga


Web Storage

oferă mecanisme de stocare (persistentă) a datelorla nivel de client (browser)

sub forma de perechi cheie—valoare

Dr.

Sab

in B

ura

ga


Web Storage

recomandare a Consorțiului Web (iulie 2013)

www.w3.org/TR/webstorage/

Dr.

Sab

in B

ura

ga


Web Storage

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

Dr.

Sab

in B

ura

ga


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 ();

}

Dr.

Sab

in B

ura

ga


Web Storage

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

Dr.

Sab

in B

ura

ga


Web Storage


stocare nepersistentă(suport pentru sesiuni)

Dr.

Sab

in B

ura

ga


Web Storage


alternativă la cookie-uri

Dr.

Sab

in B

ura

ga


<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);

Dr.

Sab

in B

ura

ga


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)

Dr.

Sab

in B

ura

ga


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)

Dr.

Sab

in B

ura

ga


Indexed Database API

suport de stocare de date la nivel obiectualvia un API asincron

W3C Candidate Recommendation (iulie 2013)

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

Dr.

Sab

in B

ura

ga



obiectele de stocare compun baze de date identificate prin nume

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

Dr.

Sab

in B

ura

ga


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

IDBObjectStore createObjectStore (DOMString name, // stocareoptional IDBObjectStoreParameters optionalParameters);

void deleteObjectStore (DOMString name); // ștergere

IDBTransaction transaction (any storeNames, optional DOMString mode);void close ();

attribute Function? onabort; // abandonarea unei operațiiattribute Function? onerror; // tratează posibile erori survenite attribute Function? onversionchange; // tratează actualizările

};var db = indexedDBSync.open ('Agenda', 1,

function (tranz, versVeche) {

tranz.db.createObjectStore ('Adrese',

{ keyPath: 'id', autoIncrement: true } ); });

Dr.

Sab

in B

ura

ga



datele sunt indexate, în sensul că fiecare înregistrareposedă o cheie unică de tip Array (JavaScript),

DOMString (WebIDL), Date (JavaScript) sau float (WebIDL)

Dr.

Sab

in B

ura

ga



de asemenea, o înregistrare are o valoarede un anumit tip simplu sau structurat – e.g., Object

valoarea propriu-zisă e obținută prin evaluareaașa-numitei căi asociate cheii (key path)

(uzual, un șir de caractere ori șiruri delimitate de „.”)

Dr.

Sab

in B

ura

ga


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 cheileIDBRequest 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);

};

Dr.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga


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

attribute Function? onabort; // tratarea evenimentelorattribute Function? oncomplete; attribute Function? 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'

Dr.

Sab

in B

ura

ga



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.

Sab

in B

ura

ga

www.purl.org/net/busacointerface IDBCursor {

readonly attribute Object source; // sursa datelorreadonly attribute DOMString direction; // direcția de iterarereadonly attribute any key; // cheiareadonly attribute any primaryKey; // cheia primară

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

};

Dr.

Sab

in B

ura

ga



pentru detalii și exemplificări, a se parcurge:http://docs.webplatform.org/wiki/apis/indexedDB

https://developer.mozilla.org/docs/IndexedDBhttp://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.

Sab

in B

ura

ga


File API

suită de API-uri pentru manipularea fișierelor

specificație W3C în stadiu de ciornă (septembrie 2013)

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

Dr.

Sab

in B

ura

ga


File API

File

Blob BlobBuilder

FileList

FileReader

FileWriter FileSaver

FileSystem

Dr.

Sab

in B

ura

ga


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 stareconst unsigned short LOADING = 1; const unsigned short DONE = 2; readonly attribute unsigned short readyState; readonly attribute any result; // rezultatul obținut: File sau Blobreadonly attribute DOMError error;attribute [TreatNonCallableAsNull] Function? onloadstart; attribute [TreatNonCallableAsNull] Function? onprogress; attribute [TreatNonCallableAsNull] Function? onload; attribute [TreatNonCallableAsNull] Function? onabort; attribute [TreatNonCallableAsNull] Function? onerror; attribute [TreatNonCallableAsNull] Function? onloadend;

};

tratareaevenimen-

telor

Dr.

Sab

in B

ura

ga


File API

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.

Sab

in B

ura

ga


Privire de ansambluasupra stocării la nivel de client

Web Storage API: localStorage + sessionStorageindexedDB

Web SQL – specificație abandonatăApplication Cache

File APIs

cookie-uri clasice

Dr.

Sab

in B

ura

ga


Web Notifications

alertarea utilizatorului în afara contextului paginii Webasupra apariției unui eveniment

specificație în lucru (septembrie 2013)

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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/

Dr.

Sab

in B

ura

ga


Page Visibility

extinde interfața Document cu următoarele facilități:

enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };

partial interface Document {

readonly attribute boolean hidden; // documentul e ascuns?

readonly attribute VisibilityState visibilityState; // starea vizibilității

};

Dr.

Sab

in B

ura

ga


Geolocation API

determinarea locației geografice a dispozitivului

W3C Recommendation (octombrie 2013)

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Geolocation API

de studiat și experimentat:

http://diveintohtml5.info/geolocation.html

https://developer.mozilla.org/docs/WebAPI/Using_geolocation

http://html5demos.com/geo

Dr.

Sab

in B

ura

ga


DeviceOrientation Event Specification

tratarea evenimentelorprivind modificarea orientării și mișcarea dispozitivului

W3C Working Draft (decembrie 2011)

http://www.w3.org/TR/orientation-event/

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacodate oferite de giroscop, accelerometru, busolă

pe baza evenimentelor deviceorientation, devicemotion, compassneedscalibration

Dr.

Sab

in B

ura

ga


DeviceOrientation Event Specification

nu există suport complet oferit de nici un navigator

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/

Dr.

Sab

in B

ura

ga


WebRTC

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

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

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

Dr.

Sab

in B

ura

ga


WebRTC

API de interes:

MediaStream

acces la fluxuri multimedia (e.g., video și/sau audio) furnizate de un senzor local – tipic, un Webcam

http://www.w3.org/TR/mediacapture-streams/

Dr.

Sab

in B

ura

ga


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

// 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.

Sab

in B

ura

ga


implementările curente sunt specifice fiecărui navigator Web

http://caniuse.com/#feat=stream

Dr.

Sab

in B

ura

ga


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)

Dr.

Sab

in B

ura

ga


WebRTC

API de interes:

RTCPeerConnection

oferă suport și pentru controlul sesiunii de transfer aldatelor, plus trimiterea de mesaje speciale (signaling)

transmiterea efectivă poate adopta un anumit protocol bidirecțional – HTTP, SIP, XMPP,…

Dr.

Sab

in B

ura

ga


diverse maniere de comunicare specificate de WebRTCdetalii la www.webrtc.org

Dr.

Sab

in B

ura

ga


WebRTC

API de interes:

RTCDataChannel

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

Dr.

Sab

in B

ura

ga


http://iswebrtcreadyyet.com

Dr.

Sab

in B

ura

ga


WebRTC

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.

Sab

in B

ura

ga


Web Audio API

procesarea și sintetizarea sunetului la nivel înalt

W3C Working Draft (octombrie 2013)

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

Dr.

Sab

in B

ura

ga


Web Audio API

pentru detalii + exemple demonstrative, a se parcurge:

http://creativejs.com/resources/web-audio-api-getting-started/

https://github.com/WebAudio/demo-list

Dr.

Sab

in B

ura

ga


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

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.

Sab

in B

ura

ga


Până la urmă, ce înseamnă HTML5?

Dr.

Sab

in B

ura

ga


“HTML5 should not be considered as a whole. You should cherry-pick the technology

that suits the solution to your problem.”Remy Sharp

Dr.

Sab

in B

ura

ga


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 SVGmicrodate – vezi inițiativa schema.org

conținut editabilatribute specifice aplicațiilor: data-

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


HTML5

grafica 2D și/sau 3D

<canvas> în contextul 2D raster<canvas> 3D (WebGL)

conținut grafic scalabil – SVG

Dr.

Sab

in B

ura

ga


HTML5

multimedia

<audio> (MP3, OGG)<video> (H.264, OGG, WebM)

API-uri de procesare a sunetuluicomunicații în timp-real – WebRTC

Dr.

Sab

in B

ura

ga


HTML5

acces la dispozitiv

drag & droporientationgeolocation

acces la camera WebnotificăriFile API

HTML5 în contextul TV + industriei auto

Dr.

Sab

in B

ura

ga


HTML5

offline & storage

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

caching

Dr.

Sab

in B

ura

ga


HTML5

connectivity & real-time

mesaje vehiculate între documentetransfer asincron via XMLHttpRequest – nivelul 2

WebSocketevenimente recepționate de la server (server-side events)

Dr.

Sab

in B

ura

ga


HTML5

asigurarea performanței

Web Workersmanagementul istoricului navigării

RequestAnimationFrameînglobarea datelor direct în URI

controlul disponibilității conexiunii la rețeaetc.

Dr.

Sab

in B

ura

ga


arhitectura clientului Web actual(conform Jeff Jaffe)

Dr.

Sab

in B

ura

ga


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

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

Technology

Transcript of Dezvoltarea aplicaţiilor Web la nivel de client (cursul #12): Programare Web. API-uri JavaScript...