Sviluppare applicazioni mobile native in html e java script

5,478
-1

Published on

Slide del Talk "Sviluppare Applicazioni Mobile Native in HTML e JavaScript" a BetterSoftware2010 di Fabio Franzini (ITA)

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,478
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sviluppare applicazioni mobile native in html e java script

  1. 1. Fabio Franzini<br />Sviluppare Applicazioni Mobile Native in HTML e JavaScript<br />
  2. 2. Presentazioni<br />Fabio Franzini<br />Consulente, Programmatore e MCT Trainer su piattaforma .NET<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />
  3. 3. START!!<br />
  4. 4. Background<br />Evoluzione del “Mobile Web”<br />Albori: WAP, cHTML, mHTML<br />Phone’s WEB Browser<br />WAP: puah!!<br />
  5. 5. WAP, cHTML, mHTML<br />
  6. 6. Mobile Web Oggi<br />Smart Phones<br />Sistemi Operativi Mobile completi<br />iPhone OS, Android, Simbian OS, Blackberry, Windows Mobile, WebOS, Maemo, ecc..<br />Cross-platform Web Browser (Webkit!!)<br />3G, WiFi<br />
  7. 7. Smart Phones<br />
  8. 8. Sviluppare oggi per il Mobile Web<br />Powerfull Web Browser<br />Web 2.0<br />Social<br />Geo-localization<br />Ecc..<br />
  9. 9. Vantaggi<br />HTML<br />CSS<br />JavaScript<br />Deploy semplice<br />Ecc..<br />
  10. 10. Limitazioni<br /><ul><li>Web Browser??
  11. 11. Sandbox indipendente dal resto del OS</li></li></ul><li>Soluzione<br />Native App!!!<br />
  12. 12. Native App e App. Store<br />
  13. 13. Ok, ma…<br />iPhone: Objective-C<br />Android, Blackberry: Java<br />Nokia Symbian: C / JavaScript<br />Sony Ericsson: Java<br />Window Mobile: .NET / C++ / VB<br />
  14. 14.
  15. 15. …quindi!!<br />
  16. 16. Native App VS Web App<br />
  17. 17. Ok, capito!! Ma allora?<br />
  18. 18. Confusi??<br />
  19. 19. Native App Cross-Platform<br />HTML, CSS, JavaScript, Images, ecc..<br />+<br />API native del telefono (Geo-localizzazione, Contatti, Accelerometro, Fotocamera, Vibrazione, ecc ..)<br />=<br />Wrapper sul Web Browser con supporto alle API del telefono.<br />
  20. 20. Un esempio?<br />PhoneGap<br />
  21. 21. Cos’è PhoneGap<br />PhoneGap è uno strumento di sviluppo opensource, realizzato da Nitobi, utile per la costruzione veloce e facile di Applicazioni Mobile con JavaScript<br />
  22. 22. PhoneGap in dettaglio 1/2<br />E’ un container con wrapper sul Web Browser del dispositivo<br />Espone un insieme di API del dispositivo, astraendo le medesime, e le rende disponibili tramite JavaScript<br />
  23. 23. PhoneGap in dettaglio 2/2<br />In base alla piattaforma con la quale dovrà interfacciarsi, l’implementazione sarà di sviluppata in: Objective C, Java e così via; <br />L’implementazione è fornita dallo stesso framework, il runtime si appoggia sul Web Browser e sulle estensioni per quella piattaforma.<br />Il risultato è un pacchetto composto di due elementi principali: <br />il runtime si occupa di dialogare direttamente con il dispositivo<br />le parti statiche (HTML, JavaScript, ecc) offrono l’interfaccia verso l’utente.<br />
  24. 24. PhoneGap in dettaglio<br />
  25. 25.
  26. 26. Piattaforme supportate<br />iPhone / iPad??<br />Android<br />Blackberry<br />Palm ~<br />Symbian ~<br />Windows Mobile ~<br />
  27. 27. iPhone???<br />http://bit.ly/7wmgsv<br />“The recent changes to Apple’s iPhone developer agreement, this has ZERO impact on PhoneGap!”<br />“Apps built with PhoneGap will continue to be reviewed based on their own merits and NOT dismissed/rejected because they use PhoneGap.”<br />
  28. 28. Features<br />Accelerometro<br />Audio<br />Camera<br />Contacts<br />File IO<br />SMS<br />Settings<br />
  29. 29. Features Supportate<br />
  30. 30. Esampio di API 1/3<br /><ul><li>Platform
  31. 31. document.getElementById("platform").innerHTML = device.platform;
  32. 32. Alert
  33. 33. navigator.notification.alert(“Mio Messaggio", “Attenzione", "Ok");
  34. 34. Vibration
  35. 35. navigator.notification.vibrate(1000);
  36. 36. Media
  37. 37. var media = Media.new("hammer_time.wav", win, fail);
  38. 38. media.play();
  39. 39. media.stop();</li></li></ul><li>Esempio di API 2/3<br /><ul><li>GetCurrentPosition
  40. 40. function getLocation() </li></ul>{<br /> var win = function(p)<br /> { <br /> alert( p.coords.latitude + " " + p.coords.longitude ); <br /> }; <br /> var fail = function(){ //default query }; navigator.geolocation.getCurrentPosition(win, fail);<br /> }<br />
  41. 41. Esempio di API 3/3<br /><ul><li>GetCurrentAcceleration
  42. 42. function getAccel() </li></ul>{ <br /> var win = function(a)<br /> { document.getElementById('x').innerHTML = a.x; document.getElementById('y').innerHTML = a.y; document.getElementById('z').innerHTML = a.z; <br /> }; <br /> var fail = function(){};<br /> navigator.accelerometer.getCurrentAcceleration(win, fail); <br /> }<br />
  43. 43. Framework di supporto?<br />XUI<br />jQuery<br />jQuery UI<br />jQTouch<br />QuelloCheVolete.js<br />
  44. 44. Alcuni numeri<br />iPhone App = 364 kb<br />Html, CSS, JavaScript, Media = 124 kb<br />Stessa Web App + PhoneGap = 240 kb<br />
  45. 45. Applicazioni già sviluppate<br />
  46. 46. Applicazioni già sviluppate<br />http://phonegap.com/projects<br />
  47. 47. Vantaggi di PhoneGap<br />Sviluppo con semplice conoscenza di HTML, CSS, JavaScript<br />Creazione di Applicazioni Native!!!<br />Multi Piattaforma!!!!<br />Applicazioni accettate dall’Apple AppStore!!!! ;-)<br />
  48. 48. Svantaggi di PhoneGap<br />Documentazione in costruzione<br />Non realmente all’altezza per applicazioni con uso massivo di grafica (almeno per adesso).<br />
  49. 49. … è l’unico runtime? No, ma…<br />PhoneGap<br />Nokia WRT<br />Appcelerator<br />Nokia S60<br />iPhone<br />Android<br />Blackberry<br />Windows Mobile<br />
  50. 50. PhoneGap<br />Demo<br />
  51. 51. Domande??Tutto chiaro??<br />
  52. 52. Ciao, alla prossima!! ;-)<br />Fabio Franzini<br />www.fabiofranzini.com<br />fabio@fabiofranzini.com<br />@franzinifabio<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×