Your SlideShare is downloading. ×
0
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
HTML5, il lato client della forza...
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5, il lato client della forza...

1,235

Published on

Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript

Introduzione alle tecnologie client & server side che possono essere utilizzate epr la realizzazione di applicazioni mobile crossplatform usando HTML5 e Javascript

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

No Downloads
Views
Total Views
1,235
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5, il lato client della forza...Marco Vito Moscaritolomarco@agavee.com@mavimo
  • 2. /usr/bin/whoami Marco Vito Moscaritolo “Sviluppatore” web server side con tendenze a testare tutte le nuove tecnologie che si trovano nella rete con particolare interesse verso le tecnologie mobile (altrimenti che ci faccio qui?) Twitter: @mavimo Mail: marco@agavee.com Blog: http://mavimo.org
  • 3. Tanti device, tanti OS differenti (e per ognuno più versioni), e noi? IMPAZIAMO!
  • 4. usa la forza
  • 5. “HTML5” è crossplatform... figo! Qualche cosa ci viene in aiuto, HTML5 è una definizione che verosimilmente possiamo considerare standard (e anche i vendor di device se ne sono resi conto)! HTML5 non è solo quello che si vede, ma (sopratutto?) quello che NON si vede
  • 6. Nel clientHTML5, quindi tutti i fantastici tag Javascript non è più unche conosciamo, ma non ci interessa “abbellimento”, sta diventandoquesto (in questo caso!) sempre più utile (e fondamentale) per realizzare le webapp - WebSocket - WebStorage - WebSQL (R.I.P. † ) - IndexedDB - Manifest file (File API, WebWorkers, … ci sono ma nel mobile per ora non hanno molto senso/interesse)
  • 7. Nota:Parliamo di WebApp, ma nel caso specifico di siti/servizi web fruibili da mobile
  • 8. Una webapp per il mobile, ok... ...come faccio?Ottimizzo la mia applicazione Creo un applicazione appositacorrente per funzionare su per la versione mobiledispositivi mobile
  • 9. Applicazione ottimizzataTutto viene sempre fornito albrowser che eventualmente lopresenterà in maniera differente.Non fornisco un esperienza dusonecessariamente ottimizzataDevo “mediare” con linterfacciaclassica della mia webapp
  • 10. Applicazione ad-hocPosso replicare linterfaccia delsistema nellapplicazione(esperienza utente più simile aquella calssica del device)Posso modificare ilcomportamento dellapplicazionein funzione del device con cuiaccedo (idem come sopra)
  • 11. Messaggio subliminaleMessaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminale Messaggio subliminaleApplicazione customMessaggio subliminale Messaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminaleMessaggio subliminale è meglio Messaggio subliminale Messaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminale Messaggio subliminale Messaggio subliminaleMessaggio subliminale Messaggio subliminale Messaggio subliminale
  • 12. Browser detection www.mysite.tdlRiconoscere il browser che staarrivando sul sito della webapp edeventualmente redirigerlo nellasezione/sito apposito mobi.mysite.tdlhttp://wurfl.sourceforge.net/http://detectmobilebrowser.com/
  • 13. WebSocket (1)
  • 14. WebSocket (2) – Sul clientUsabili fin da ora var socket = new io.Socket(null { port: 8080, rememberTransport: falseSupportati su diversi device });mobile (Android, iOS) socket.connect();Permettono comunicazioni socket.on(message, function(obj){in tempo reale verso/da // Do some stuffserver (servizi in push) });Facili (proprio FACILI) da socket.on(connect, onConnectFn);implementare con alcune socket.on(disconnect, onDisconnectFn); socket.on(reconnect, onReconnectFn);librerie come http://socket.io // ...
  • 15. WebSocket (3) - Sul serverServizi che var http = require(http),permettano di io = require(socket.io), Server, // … ;mantenrepersistenza della server = http.createServer( … );connessione con server.listen(8080);costo macchinamolto basso var io = io.listen(server); io.on(connection, function(client) { client.send({ … });Node.JS sembra client.broadcast({ … });fatto apposta :) client.on(message, onMessageFn); client.on(disconnect, onDisconnectFn); });
  • 16. WebStoragePermette di salvare dati sul var nv =client sottoforma di coppia localStorage[num_view];key-value if (typeof nv == undefined)Facile da usare, supportato nv = 0su molti device nv += 1;Limiti di spazio utilizzabile esopratutto non permettericerche nei valori inseriti localStorage[num_view] = nv;
  • 17. WebSQL (1) Sintassi SQL-like Supportato sui vari device mobile (Yeah!) Il W3C ha deciso di abbandonarlo in favore di IndexedDB (che non è supportato da nessun browser mobile) #fail #quasifail #happyvar db = openDatabase(whymca, 1.0, WHYMCA database, 2 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS attendee (id unique, name, mail)); tx.executeSql(INSERT INTO attendee (id, name, mail) VALUES (1, "Marco", "marco@agavee.com));});
  • 18. WebSQL (2)Ho smesso anni fa di scrivere SQL, non me lo ricordo più, mica dovròstudiarmelo nuovamente??!!??!!http://persistencejs.org/ (*)http://code.google.com/p/orm-html5/http://impel.simulacre.org/var allTasks = Task.all().filter("done", =, true).prefetch("category") .order("name", false).limit(10);allTasks.list(null, function (results) { results.forEach(function (r) { console.log(r.name) window.task = r; });});
  • 19. IndexedDB (1)Non supportato dai browsermobile attuali, MA parecchivendor si stanno attrezzando alriguardoDatabase documentale, e datoche sono che sono tornati tantodi moda ora, con il “NoSQL”Sintassi molto verbosa la anchese abbastanza semplice nelleoperazioni che si fannonormalmente
  • 20. IndexedDB (2)Permette di storare oggetti sulserver così come sono archiviatisul client (DB documentale construttura come IndexedDB)Tramite interrogazione diretta daremoto è possibile inserire /leggere i dati presenti nel DBPermette connessioni persistentiper ricevere da remoto lenotifiche in push dei risultatidella ricerca http://goo.gl/t57zD
  • 21. Ma quindi i dati e lapplicazione?Che fine fanno?Cambio di paradigma rispettoalle applicazioni “classiche”Controller e model finiscono sulclient che “si sincronizza” con ilserver... chi ci lavora deveabituarsi a qusto cambio, quindiallinizio prendiamoconsapevolezza che sbaglieremoparecchio
  • 22. Testate Sperimentate NON aspettate (alcune cose si possono già usare ora) NON pensate di sapere le cose (cambiano talmente in fretta che le vostre certezze cadono in men che non si dica)Mettetevi in discussione, altrimenti...
  • 23. La forza può fare brutti scherzi
  • 24. Demo(se avanza un attimo di tempo)
  • 25. Domande?Marco Vito Moscaritolo @mavimo marco@agavee.com
  • 26. RefsAlcuni links:http://www.openmobilealliance.org/Technical/release_program/docs/Browsinhttp://validator.w3.org/mobile/http://www.w3.org/TR/mobile-bp/http://www.w3.org/TR/mwabp/https://github.com/janmonschke/backbone-couchdb/https://developer.mozilla.org/en/IndexedDBhttp://www.jsday.it (cercate slideshare ed i video)

×