Corso WebApp iOS              “iOS WebApp Anatomy”                                    Lezione 07/10”if everything seems un...
Chapter 08Native iOS Enviroment DevelopmentChapter 09Native iOS Design Implementation   http://www.apress.com/9781430232469
Diario Lezioni            LEZIONE 06      iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Na...
iOS UI Emulation                  compartamento di default<meta name="viewport" content="width=980; user-scalable=1;"/>
iOS UI Emulation                esempio di alcune proprietà<meta name="viewport" content="width=device-width;initial-scale...
iOS UI Emulation                 valori viewport* iOSwidth=768 (device-width in px for iPad on)width=480 (device-width in ...
iOS UI Emulation
iOS UI Emulation                   WebApp in Full-Screen<meta name="apple-mobile-web-app-capable" content="yes" />
iOS UI Emulation
iOS UI Emulation                    Custom* Status Bar<meta name="apple-mobile-web-app-status-bar-style"content="black-tra...
iOS UI Emulation             default: grey
iOS UI Emulation                     Springboard Icon<link rel="apple-touch-icon" href="/the-store.png"/>        * valori ...
iOS UI Emulation        Springboard Icon  72x72px (iPad on)  114x114px (iPhone4 on)  57x57px (iPhone 2G, 3G, 3GS)
iOS UI Emulation
iOS UI Emulation
iOS UI Emulation            Startup Image<link rel="apple-touch-startup-image"href="/startup-image.png">
iOS UI Emulation          Startup Image*  768x1004px (iPad on)  480x940px (iPhone4 on)  320x460px (iPhone 2G, 3G, 3GS)    ...
iOS UI Emulation
iOS UI Emulation            Desktop to WebApp Redirection (Media Query)<link rel="stylesheet" media="all and (max-device-w...
iOS UI Emulation               Desktop to WebApp Redirection (Javascript)<script>if ((navigator.userAgent.indexOf(iPhone) ...
iOS UI Emulation       Native Link Emulation *{      -webkit-user-select: none; } .copiable {      -webkit-user-select: te...
iOS UI Emulation
iOS UI Emulation            Native Scrolling .scrollableElement {     overflow-y: scroll;     -webkit-overflow-scrolling: ...
Diario Lezioni            LEZIONE 06      iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Na...
iOS Service Interaction                     Phone App<a href="tel:1–305-555–5555">Call 1–305-555–5555</a>
iOS Service Interaction                          Phone App<a href="tel:1–305-555–5555"onclick="return (navigator.userAgent...
iOS Service Interaction
iOS Service Interaction                       Mail App<a href="mailto:info@andreapicchi.it">Andrea Picchi</a>
iOS Service Interaction                       Mail App<a href="mailto:info@thestore.com">Email the Support</a>
iOS Service Interaction                  Messages App <a href="sms:1–305-555–5555">SMS the Support</a>
iOS Service Interaction                    Maps App <a href="sms:1–305-555–5555">SMS the Support</a>
iOS Service Interaction                     Maps App<a href="http://maps.google.com/maps?q=largo+bruno      +pontecorvo+43...
iOS Service Interaction
iOS Service Interaction                     GPS    possibile accedere alle coordinate GPS          attraverso API Javascri...
iOS Service Interaction                  GPS      metodi definiti sull’oggetto        navigator.geolocation             * ...
iOS Service Interaction                     GPS     If (window.navigator.geolocation) {         /* API available, code her...
iOS Service Interaction                             GPS* window.navigator.geolocation.getCurrentPosition(    function(posi...
iOS Service Interaction                               GPS: Proprieta Oggetto Position      position.timestamp             ...
iOS Service Interaction              GPS: Gestione Errori   non tutti i dati possono essere disponibili                  a...
iOS Service Interaction          GPS: Gestione Errori          getCurrentPosition()     accetta un parametro opzionale    ...
iOS Service Interaction                            GPS: Gestione Errori/* Request the users position */window.navigator.ge...
iOS Service Interaction                  GPS: Gestione Errori   error.code                    error.UNKNOWN_ERROR (0)     ...
iOS Service Interaction              GPS: Gestione Errori          se successCallback() fallisce        viene chiamata fai...
Esercitazione Utilizzare Guida* di Riferimento   del Framework e Javascript1. Implementare le Funzioni Specifiche2. Implem...
PROSSIMA LEZIONE         LEGGERE   Ottimizzazione WebApp       Offline WebApp         Mobile SEO
Upcoming SlideShare
Loading in...5
×

Corso WebApp iOS - Lezione 07: iOS WebApp Anatomy

985

Published on

iOS WebApp Anatomy
Eumulare l’Interfaccia Nativa iOS
Interagire con i Servizi Nativi iOS

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Corso WebApp iOS - Lezione 07: iOS WebApp Anatomy

  1. 1. Corso WebApp iOS “iOS WebApp Anatomy” Lezione 07/10”if everything seems under control....you’re not going fast enought!” Mario Andretti 1978 Formula 1 World Champion.
  2. 2. Chapter 08Native iOS Enviroment DevelopmentChapter 09Native iOS Design Implementation http://www.apress.com/9781430232469
  3. 3. Diario Lezioni LEZIONE 06 iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Nativi iOS
  4. 4. iOS UI Emulation compartamento di default<meta name="viewport" content="width=980; user-scalable=1;"/>
  5. 5. iOS UI Emulation esempio di alcune proprietà<meta name="viewport" content="width=device-width;initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>
  6. 6. iOS UI Emulation valori viewport* iOSwidth=768 (device-width in px for iPad on)width=480 (device-width in px for iPhone4 on)width=320 (device-width in px for iPhone 2G, 3G, 3GS) * portrait mode
  7. 7. iOS UI Emulation
  8. 8. iOS UI Emulation WebApp in Full-Screen<meta name="apple-mobile-web-app-capable" content="yes" />
  9. 9. iOS UI Emulation
  10. 10. iOS UI Emulation Custom* Status Bar<meta name="apple-mobile-web-app-status-bar-style"content="black-translucent" /> * valori possibili: grey, black, black-translucent
  11. 11. iOS UI Emulation default: grey
  12. 12. iOS UI Emulation Springboard Icon<link rel="apple-touch-icon" href="/the-store.png"/> * valori possibili: grey, black, black-translucent
  13. 13. iOS UI Emulation Springboard Icon 72x72px (iPad on) 114x114px (iPhone4 on) 57x57px (iPhone 2G, 3G, 3GS)
  14. 14. iOS UI Emulation
  15. 15. iOS UI Emulation
  16. 16. iOS UI Emulation Startup Image<link rel="apple-touch-startup-image"href="/startup-image.png">
  17. 17. iOS UI Emulation Startup Image* 768x1004px (iPad on) 480x940px (iPhone4 on) 320x460px (iPhone 2G, 3G, 3GS) * portrait mode
  18. 18. iOS UI Emulation
  19. 19. iOS UI Emulation Desktop to WebApp Redirection (Media Query)<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"><link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
  20. 20. iOS UI Emulation Desktop to WebApp Redirection (Javascript)<script>if ((navigator.userAgent.indexOf(iPhone) != -1) || (navigator.userAgent.indexOf(iPod) != -1)|| (navigator.userAgent.indexOf(iPad) != -1)) { document.location = "http://www.mobile.thestore.com/"; }</script>
  21. 21. iOS UI Emulation Native Link Emulation *{ -webkit-user-select: none; } .copiable { -webkit-user-select: text; }
  22. 22. iOS UI Emulation
  23. 23. iOS UI Emulation Native Scrolling .scrollableElement { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
  24. 24. Diario Lezioni LEZIONE 06 iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Nativi iOS
  25. 25. iOS Service Interaction Phone App<a href="tel:1–305-555–5555">Call 1–305-555–5555</a>
  26. 26. iOS Service Interaction Phone App<a href="tel:1–305-555–5555"onclick="return (navigator.userAgent.indexOf(iPhone) != -1)">1–305-555–5555</a>
  27. 27. iOS Service Interaction
  28. 28. iOS Service Interaction Mail App<a href="mailto:info@andreapicchi.it">Andrea Picchi</a>
  29. 29. iOS Service Interaction Mail App<a href="mailto:info@thestore.com">Email the Support</a>
  30. 30. iOS Service Interaction Messages App <a href="sms:1–305-555–5555">SMS the Support</a>
  31. 31. iOS Service Interaction Maps App <a href="sms:1–305-555–5555">SMS the Support</a>
  32. 32. iOS Service Interaction Maps App<a href="http://maps.google.com/maps?q=largo+bruno +pontecorvo+43,+pisa,+italy+(Dipartimento+Informatica)&t=h&z=7">Dipartimento Informatica</a>
  33. 33. iOS Service Interaction
  34. 34. iOS Service Interaction GPS possibile accedere alle coordinate GPS attraverso API Javascript* * da iOS3 in poi
  35. 35. iOS Service Interaction GPS metodi definiti sull’oggetto navigator.geolocation * da iOS3 in poi
  36. 36. iOS Service Interaction GPS If (window.navigator.geolocation) { /* API available, code here */ } else { /* Fallback message */ } * da iOS3 in poi
  37. 37. iOS Service Interaction GPS* window.navigator.geolocation.getCurrentPosition( function(position) { /* do something using position object data */ } ); * chiamata asincrona per gestire ritardo GPS
  38. 38. iOS Service Interaction GPS: Proprieta Oggetto Position position.timestamp Time at which the location information was determined (milliseconds) position.coords.accuracy The accuracy of the latitude/longitude information returned (meters; the lower, the better) position.coords.latitude The user’s current latitude (decimal degrees) position.coords.longitude The user’s current longitude (decimal degrees)position.coords.altitudeAccuracy The accuracy of the altitude information returned (meters). This is often set to null position.coords.altitude The user’s current altitude (meters). The same restrictions apply position.coords.heading The direction in which the user is heading (decimal degrees). This is often set to null position.coords.speed The user’s current speed. The same restrictions apply (meters/second)
  39. 39. iOS Service Interaction GPS: Gestione Errori non tutti i dati possono essere disponibili alcuni esempi: errori utente (rifiuto tracciamento) errori sistema (mancanza di dati)
  40. 40. iOS Service Interaction GPS: Gestione Errori getCurrentPosition() accetta un parametro opzionale usato per gestire gli errori
  41. 41. iOS Service Interaction GPS: Gestione Errori/* Request the users position */window.navigator.geolocation.getCurrentPosition(successCallback, failureCallback);function successCallback(position) { /* Do something with position object data */}function failureCallback(error) { /* Do something with error object */}
  42. 42. iOS Service Interaction GPS: Gestione Errori error.code error.UNKNOWN_ERROR (0) error.PERMISSION_DENIED (1) error.POSITION_UNAVAILABLE (2) error.TIMEOUT (3) error.message A message describing what happened (debug purpose)
  43. 43. iOS Service Interaction GPS: Gestione Errori se successCallback() fallisce viene chiamata failureCallback() controllare da dove viene l’errore getCurrentPosition() o successCallback()
  44. 44. Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript1. Implementare le Funzioni Specifiche2. Implementare la Logica della Dinamica* versione online e/o formato elettronico
  45. 45. PROSSIMA LEZIONE LEGGERE Ottimizzazione WebApp Offline WebApp Mobile SEO

×