Sviluppare applicazioni mobile native in html e java script
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sviluppare applicazioni mobile native in html e java script

  • 6,539 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,539
On Slideshare
6,509
From Embeds
30
Number of Embeds
2

Actions

Shares
Downloads
36
Comments
0
Likes
2

Embeds 30

http://www.slideshare.net 29
http://www.linkedin.com 1

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