SlideShare a Scribd company logo
1 of 45
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.
Chapter 08
Native iOS Enviroment Development


Chapter 09
Native iOS Design Implementation




   http://www.apress.com/9781430232469
Diario Lezioni
            LEZIONE 06

      iOS WebApp Anatomy
 Eumulare l’Interfaccia Nativa iOS
 Interagire con i Servizi Nativi iOS
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=1.0; maximum-scale=1.0; user-scalable=no;"/>
iOS UI Emulation
                 valori viewport* iOS

width=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
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-translucent" />




        * valori possibili: grey, black, black-translucent
iOS UI Emulation
             default: grey
iOS UI Emulation
                     Springboard Icon

<link rel="apple-touch-icon" href="/the-store.png"/>




        * valori possibili: grey, black, black-translucent
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)




           * portrait mode
iOS UI Emulation
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">
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>
iOS UI Emulation
       Native Link Emulation

 *{
      -webkit-user-select: none;
 }

 .copiable {
      -webkit-user-select: text;
 }
iOS UI Emulation
iOS UI Emulation
            Native Scrolling

 .scrollableElement {
     overflow-y: scroll;
     -webkit-overflow-scrolling: touch;
 }
Diario Lezioni
            LEZIONE 06

      iOS WebApp Anatomy
 Eumulare l’Interfaccia Nativa iOS
 Interagire con i Servizi Nativi iOS
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.indexOf('iPhone') != -1)">
1–305-555–5555</a>
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,+pisa,+italy+(Dipartimento
+Informatica)&t=h&z=7">Dipartimento Informatica</a>
iOS Service Interaction
iOS Service Interaction
                     GPS

    possibile accedere alle coordinate GPS
          attraverso API Javascript*




                * da iOS3 in poi
iOS Service Interaction
                  GPS

      metodi definiti sull’oggetto
        navigator.geolocation




             * da iOS3 in poi
iOS Service Interaction
                     GPS

     If (window.navigator.geolocation) {
         /* API available, code here */
     } else {
         /* Fallback message */
     }




                * da iOS3 in poi
iOS Service Interaction
                             GPS*

 window.navigator.geolocation.getCurrentPosition(
    function(position) {
      /* do something using position object data */
    }
 );




          * chiamata asincrona per gestire ritardo GPS
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)
iOS Service Interaction
              GPS: Gestione Errori

   non tutti i dati possono essere disponibili

                  alcuni esempi:
      errori utente (rifiuto tracciamento)
       errori sistema (mancanza di dati)
iOS Service Interaction
          GPS: Gestione Errori

          getCurrentPosition()

     accetta un parametro opzionale
        usato per gestire gli errori
iOS Service Interaction
                            GPS: Gestione Errori

/* Request the user's position */
window.navigator.geolocation.getCurrentPosition(successCallback, failureCallback);

function successCallback(position) {
  /* Do something with position object data */
}

function failureCallback(error) {
  /* Do something with error object */
}
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)
iOS Service Interaction
              GPS: Gestione Errori

          se successCallback() fallisce
        viene chiamata failureCallback()

       controllare da dove viene l’errore
    getCurrentPosition() o successCallback()
Esercitazione
 Utilizzare Guida* di Riferimento
   del Framework e Javascript

1. Implementare le Funzioni Specifiche
2. Implementare la Logica della Dinamica




* versione online e/o formato elettronico
PROSSIMA LEZIONE
         LEGGERE

   Ottimizzazione WebApp
       Offline WebApp
         Mobile SEO

More Related Content

Similar to Corso WebApp iOS - Lezione 07: iOS WebApp Anatomy

Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.agup2009
 
Adopting 3D Touch in your apps
Adopting 3D Touch in your appsAdopting 3D Touch in your apps
Adopting 3D Touch in your appsJuan C Catalan
 
Windows phone 7 series
Windows phone 7 seriesWindows phone 7 series
Windows phone 7 seriesopenbala
 
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...GIS in the Rockies
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Chris Griffith
 
Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Jan Jongboom
 
Slightly Advanced Android Wear ;)
Slightly Advanced Android Wear ;)Slightly Advanced Android Wear ;)
Slightly Advanced Android Wear ;)Alfredo Morresi
 
android level 3
android level 3android level 3
android level 3DevMix
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptfranksvalli
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basicsAnton Narusberg
 
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...mharkus
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCJim Tochterman
 
Bibliotecas Google para iOS: Fanboy é a sua vó
Bibliotecas Google para iOS: Fanboy é a sua vóBibliotecas Google para iOS: Fanboy é a sua vó
Bibliotecas Google para iOS: Fanboy é a sua vóMarcelo Quinta
 
Develop a native application that uses GPS location.pptx
Develop a native application that uses GPS location.pptxDevelop a native application that uses GPS location.pptx
Develop a native application that uses GPS location.pptxvishal choudhary
 
Academy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousAcademy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousBinary Studio
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication developmentGanesh Gembali
 

Similar to Corso WebApp iOS - Lezione 07: iOS WebApp Anatomy (20)

mobl
moblmobl
mobl
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.3 Approaches to Mobile - An A to Z Primer.
3 Approaches to Mobile - An A to Z Primer.
 
Adopting 3D Touch in your apps
Adopting 3D Touch in your appsAdopting 3D Touch in your apps
Adopting 3D Touch in your apps
 
Windows phone 7 series
Windows phone 7 seriesWindows phone 7 series
Windows phone 7 series
 
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...
2013 URISA Track, Kickstarter for JavaScript Web and Mobile GIS Development b...
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5Developing AIR for Mobile with Flash Professional CS5.5
Developing AIR for Mobile with Flash Professional CS5.5
 
Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014Firefox OS and the Internet of Things - NDC London 2014
Firefox OS and the Internet of Things - NDC London 2014
 
Slightly Advanced Android Wear ;)
Slightly Advanced Android Wear ;)Slightly Advanced Android Wear ;)
Slightly Advanced Android Wear ;)
 
android level 3
android level 3android level 3
android level 3
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 
Android app development basics
Android app development basicsAndroid app development basics
Android app development basics
 
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
GDG GeorgeTown Devfest 2014 Presentation: Android Wear: A Developer's Perspec...
 
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NCAndroid Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
Android Development w/ ArcGIS Server - Esri Dev Meetup - Charlotte, NC
 
Bibliotecas Google para iOS: Fanboy é a sua vó
Bibliotecas Google para iOS: Fanboy é a sua vóBibliotecas Google para iOS: Fanboy é a sua vó
Bibliotecas Google para iOS: Fanboy é a sua vó
 
Develop a native application that uses GPS location.pptx
Develop a native application that uses GPS location.pptxDevelop a native application that uses GPS location.pptx
Develop a native application that uses GPS location.pptx
 
Academy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneousAcademy PRO: React native - miscellaneous
Academy PRO: React native - miscellaneous
 
Mobile webapplication development
Mobile webapplication developmentMobile webapplication development
Mobile webapplication development
 

More from Andrea Picchi

The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...
The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...
The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...Andrea Picchi
 
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...Andrea Picchi
 
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...The Evolution of Design Thinking: Shifting from a Product and Service to a Re...
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...Andrea Picchi
 
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...Andrea Picchi
 
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...Andrea Picchi
 
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.Beyond Design Thinking the 3 Dimension of a Design-Driven Company.
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.Andrea Picchi
 
Embedding Design Thinking at Sony to accomplish Business Strategy
Embedding Design Thinking at Sony to accomplish Business StrategyEmbedding Design Thinking at Sony to accomplish Business Strategy
Embedding Design Thinking at Sony to accomplish Business StrategyAndrea Picchi
 
How a Design-Driven Company can Multiply its Business Value
How a Design-Driven Company can Multiply its Business ValueHow a Design-Driven Company can Multiply its Business Value
How a Design-Driven Company can Multiply its Business ValueAndrea Picchi
 
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...The Evolution of Business Strategy: How to use Design Thinking to uncover hid...
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...Andrea Picchi
 
A Cognitive Approach to Ecosystem Design
A Cognitive Approach to Ecosystem DesignA Cognitive Approach to Ecosystem Design
A Cognitive Approach to Ecosystem DesignAndrea Picchi
 
Variabili Cognitive dell'Esperienza Utente
Variabili Cognitive dell'Esperienza UtenteVariabili Cognitive dell'Esperienza Utente
Variabili Cognitive dell'Esperienza UtenteAndrea Picchi
 
Ottimizzazione Cognitiva di Contesti Mobile Touch
Ottimizzazione Cognitiva di Contesti Mobile TouchOttimizzazione Cognitiva di Contesti Mobile Touch
Ottimizzazione Cognitiva di Contesti Mobile TouchAndrea Picchi
 
Ottimizzazione e Analisi Cognitiva di Contesti Mobile Touch
Ottimizzazione e Analisi Cognitiva di Contesti Mobile TouchOttimizzazione e Analisi Cognitiva di Contesti Mobile Touch
Ottimizzazione e Analisi Cognitiva di Contesti Mobile TouchAndrea Picchi
 
Corso WebApp iOS - Lezione 09: Testing iOS WebApp
Corso WebApp iOS - Lezione 09: Testing iOS WebAppCorso WebApp iOS - Lezione 09: Testing iOS WebApp
Corso WebApp iOS - Lezione 09: Testing iOS WebAppAndrea Picchi
 
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
Corso WebApp iOS - Lezione 08: Optimize iOS WebAppCorso WebApp iOS - Lezione 08: Optimize iOS WebApp
Corso WebApp iOS - Lezione 08: Optimize iOS WebAppAndrea Picchi
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Corso WebApp iOS - Lezione 05: Mobile Touch Development
Corso WebApp iOS - Lezione 05: Mobile Touch DevelopmentCorso WebApp iOS - Lezione 05: Mobile Touch Development
Corso WebApp iOS - Lezione 05: Mobile Touch DevelopmentAndrea Picchi
 
Corso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignCorso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignAndrea Picchi
 
Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
Corso WebApp iOS - Lezione 03: Cognitive User Interface DesignCorso WebApp iOS - Lezione 03: Cognitive User Interface Design
Corso WebApp iOS - Lezione 03: Cognitive User Interface DesignAndrea Picchi
 
Corso WebApp iOS - Lezione 02: Design Touch Mobile
Corso WebApp iOS - Lezione 02: Design Touch MobileCorso WebApp iOS - Lezione 02: Design Touch Mobile
Corso WebApp iOS - Lezione 02: Design Touch MobileAndrea Picchi
 

More from Andrea Picchi (20)

The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...
The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...
The New Retail Paradigm: How the Psychological Foundation of Consumer Behavio...
 
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...
The 3 Dimensions of Design: A Model to scale the Human-Centered Problem-Solvi...
 
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...The Evolution of Design Thinking: Shifting from a Product and Service to a Re...
The Evolution of Design Thinking: Shifting from a Product and Service to a Re...
 
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...
Continuous Innovation: Going beyond Agile, Lean, and Design Thinking toward a...
 
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...
The 3 Dimensions of Design: Scaling a Human-Centered Practice across the Orga...
 
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.Beyond Design Thinking the 3 Dimension of a Design-Driven Company.
Beyond Design Thinking the 3 Dimension of a Design-Driven Company.
 
Embedding Design Thinking at Sony to accomplish Business Strategy
Embedding Design Thinking at Sony to accomplish Business StrategyEmbedding Design Thinking at Sony to accomplish Business Strategy
Embedding Design Thinking at Sony to accomplish Business Strategy
 
How a Design-Driven Company can Multiply its Business Value
How a Design-Driven Company can Multiply its Business ValueHow a Design-Driven Company can Multiply its Business Value
How a Design-Driven Company can Multiply its Business Value
 
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...The Evolution of Business Strategy: How to use Design Thinking to uncover hid...
The Evolution of Business Strategy: How to use Design Thinking to uncover hid...
 
A Cognitive Approach to Ecosystem Design
A Cognitive Approach to Ecosystem DesignA Cognitive Approach to Ecosystem Design
A Cognitive Approach to Ecosystem Design
 
Variabili Cognitive dell'Esperienza Utente
Variabili Cognitive dell'Esperienza UtenteVariabili Cognitive dell'Esperienza Utente
Variabili Cognitive dell'Esperienza Utente
 
Ottimizzazione Cognitiva di Contesti Mobile Touch
Ottimizzazione Cognitiva di Contesti Mobile TouchOttimizzazione Cognitiva di Contesti Mobile Touch
Ottimizzazione Cognitiva di Contesti Mobile Touch
 
Ottimizzazione e Analisi Cognitiva di Contesti Mobile Touch
Ottimizzazione e Analisi Cognitiva di Contesti Mobile TouchOttimizzazione e Analisi Cognitiva di Contesti Mobile Touch
Ottimizzazione e Analisi Cognitiva di Contesti Mobile Touch
 
Corso WebApp iOS - Lezione 09: Testing iOS WebApp
Corso WebApp iOS - Lezione 09: Testing iOS WebAppCorso WebApp iOS - Lezione 09: Testing iOS WebApp
Corso WebApp iOS - Lezione 09: Testing iOS WebApp
 
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
Corso WebApp iOS - Lezione 08: Optimize iOS WebAppCorso WebApp iOS - Lezione 08: Optimize iOS WebApp
Corso WebApp iOS - Lezione 08: Optimize iOS WebApp
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Corso WebApp iOS - Lezione 05: Mobile Touch Development
Corso WebApp iOS - Lezione 05: Mobile Touch DevelopmentCorso WebApp iOS - Lezione 05: Mobile Touch Development
Corso WebApp iOS - Lezione 05: Mobile Touch Development
 
Corso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI DesignCorso WebApp iOS - Lezione 04: iOS UI Design
Corso WebApp iOS - Lezione 04: iOS UI Design
 
Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
Corso WebApp iOS - Lezione 03: Cognitive User Interface DesignCorso WebApp iOS - Lezione 03: Cognitive User Interface Design
Corso WebApp iOS - Lezione 03: Cognitive User Interface Design
 
Corso WebApp iOS - Lezione 02: Design Touch Mobile
Corso WebApp iOS - Lezione 02: Design Touch MobileCorso WebApp iOS - Lezione 02: Design Touch Mobile
Corso WebApp iOS - Lezione 02: Design Touch Mobile
 

Recently uploaded

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 

Recently uploaded (20)

Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 

Corso WebApp iOS - Lezione 07: iOS WebApp Anatomy

  • 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. Chapter 08 Native iOS Enviroment Development Chapter 09 Native iOS Design Implementation http://www.apress.com/9781430232469
  • 3. Diario Lezioni LEZIONE 06 iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Nativi iOS
  • 4. iOS UI Emulation compartamento di default <meta name="viewport" content="width=980; user-scalable=1;"/>
  • 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. iOS UI Emulation valori viewport* iOS width=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
  • 8. iOS UI Emulation WebApp in Full-Screen <meta name="apple-mobile-web-app-capable" content="yes" />
  • 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. iOS UI Emulation default: grey
  • 12. iOS UI Emulation Springboard Icon <link rel="apple-touch-icon" href="/the-store.png"/> * valori possibili: grey, black, black-translucent
  • 13. iOS UI Emulation Springboard Icon 72x72px (iPad on) 114x114px (iPhone4 on) 57x57px (iPhone 2G, 3G, 3GS)
  • 16. iOS UI Emulation Startup Image <link rel="apple-touch-startup-image" href="/startup-image.png">
  • 17. iOS UI Emulation Startup Image* 768x1004px (iPad on) 480x940px (iPhone4 on) 320x460px (iPhone 2G, 3G, 3GS) * portrait mode
  • 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. 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. iOS UI Emulation Native Link Emulation *{ -webkit-user-select: none; } .copiable { -webkit-user-select: text; }
  • 23. iOS UI Emulation Native Scrolling .scrollableElement { overflow-y: scroll; -webkit-overflow-scrolling: touch; }
  • 24. Diario Lezioni LEZIONE 06 iOS WebApp Anatomy Eumulare l’Interfaccia Nativa iOS Interagire con i Servizi Nativi iOS
  • 25. iOS Service Interaction Phone App <a href="tel:1–305-555–5555">Call 1–305-555–5555</a>
  • 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>
  • 28. iOS Service Interaction Mail App <a href="mailto:info@andreapicchi.it">Andrea Picchi</a>
  • 29. iOS Service Interaction Mail App <a href="mailto:info@thestore.com">Email the Support</a>
  • 30. iOS Service Interaction Messages App <a href="sms:1–305-555–5555">SMS the Support</a>
  • 31. iOS Service Interaction Maps App <a href="sms:1–305-555–5555">SMS the Support</a>
  • 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>
  • 34. iOS Service Interaction GPS possibile accedere alle coordinate GPS attraverso API Javascript* * da iOS3 in poi
  • 35. iOS Service Interaction GPS metodi definiti sull’oggetto navigator.geolocation * da iOS3 in poi
  • 36. iOS Service Interaction GPS If (window.navigator.geolocation) { /* API available, code here */ } else { /* Fallback message */ } * da iOS3 in poi
  • 37. iOS Service Interaction GPS* window.navigator.geolocation.getCurrentPosition( function(position) { /* do something using position object data */ } ); * chiamata asincrona per gestire ritardo GPS
  • 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. 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. iOS Service Interaction GPS: Gestione Errori getCurrentPosition() accetta un parametro opzionale usato per gestire gli errori
  • 41. iOS Service Interaction GPS: Gestione Errori /* Request the user's 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. 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. iOS Service Interaction GPS: Gestione Errori se successCallback() fallisce viene chiamata failureCallback() controllare da dove viene l’errore getCurrentPosition() o successCallback()
  • 44. Esercitazione Utilizzare Guida* di Riferimento del Framework e Javascript 1. Implementare le Funzioni Specifiche 2. Implementare la Logica della Dinamica * versione online e/o formato elettronico
  • 45. PROSSIMA LEZIONE LEGGERE Ottimizzazione WebApp Offline WebApp Mobile SEO