SlideShare a Scribd company logo
Agenda

 Goal: You’ll get an A to Z mobile web primer

 Why build mobile map apps?

 3 Approaches

 Frameworks

 CSS3 & HTML5

 Hybrid Map apps
Who are your presenters?

   Antoon Uijtdehaag, Esri Nederland
   Technical Consultant

   Email: auijtdehaag@esri.nl
   Twitter @uijtdehaag



   Andy Gup, Esri
   Tech Lead for Web APIs and Android
   Esri Developer Network

   Email: agup@esri.com
   Twitter: @agup
Who are you?
Why mobile?

Recommended for you

Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...

The European Developer Summit in Rotterdam will provide information about developing applications using the ArcGIS Platform APIs. The presentations will cover the ArcGIS Portal API for accessing portal content and services, ArcGIS web and runtime APIs for building customized web and mobile mapping applications, and developing applications from ArcGIS Online web maps. Demos will show working with the ArcGIS REST API to search, manage content and users, and add new items. Security best practices for applications that access secured user or application content will also be discussed.

developerapiesri
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GISNDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS

ArcGIS Pro is a new 64-bit desktop GIS application that combines 2D and 3D mapping, analysis, and editing in one application. It has a contextual ribbon interface and allows users to work with multiple maps and layouts simultaneously. ArcGIS Pro can perform the same analysis, editing, mapping, and sharing capabilities as ArcMap but with improved performance. It is intended to replace ArcMap as the primary desktop GIS software. Users can import existing ArcMap documents and customize ArcGIS Pro. It is licensed through ArcGIS Online or Portal and can be virtualized. Future development will focus on new functionality being added to ArcGIS Pro rather than ArcMap.

geographygisgeospatial
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...

The document provides a roadmap for the ArcGIS platform in 2014. It outlines Esri's commitment to continued development of the platform with regular updates. The roadmap details planned releases for apps like ArcGIS Pro, Collector, and ArcGIS Online. It discusses drivers like user needs, technology advances, and enterprise readiness. Long term themes are also outlined around 3D capabilities, usability improvements, performance, and offline functionality. The vision is to develop a comprehensive online and offline GIS platform to help businesses solve problems using geographic approaches.

eamonn doyleesrigis developments
Demo
Mobile usage stats for my website?




Web Server logs


Web analytic tools
Sample web-site stats from esri.com
Your 3 Approaches


                        Web app
     1.                     +
                    Native mobile app



                       Web app
     2.                     +
                    Web mobile app
                     (a.k.a Hybrid)



     3.              Web app only
                     (Responsive)

Recommended for you

NDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS Pro

This document provides an overview of ArcGIS Pro, a new desktop GIS application from Esri. The summary includes: - ArcGIS Pro is a 64-bit application with improved performance for mapping, visualization, editing, and analysis tasks. - It is integrated with ArcGIS Online and ArcGIS Enterprise and allows combined 2D/3D experiences. - ArcGIS Pro has additional capabilities over ArcMap like improved charting and runs alongside ArcMap as part of the ArcGIS Desktop application.

gisndgisuc2017arcgis
Working with arcgis online
Working with arcgis onlineWorking with arcgis online
Working with arcgis online

This document provides an overview and agenda for a session on working with ArcGIS Online. It introduces the presenters and the types of users attending. The agenda covers an overview of ArcGIS Online, available content and how it can be used, ArcGIS sharing capabilities, and the ArcGIS Online infrastructure. Key points include discussions of basemaps, imagery, tools, and a new system for storing and sharing geographic information online through ArcGIS sharing.

ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014

The document summarized the key updates and new capabilities in ArcGIS Server 10.2.x, including two new server extensions for real-time event processing and enabling on-premises web GIS via Portal for ArcGIS. It also previewed some of the planned updates for ArcGIS Server and Portal in upcoming 10.3 release, such as new metrics dashboard, stream service, 3D services, and scalable data store tier.

arcgis for serveresriesri norsk brukerkonferanse 2014
Many different screen sizes and pixel densities




                            1920x1080
Wait…how do I pan and zoom the map??
Hmmm…how many map layers do I load?




                     VS.




       1 GB RAM                   16 GB RAM
How come my map loads so slooow?




                        VS.




     Mostly connected              Always connected

Recommended for you

Portal vs. ArcGIS Online
Portal vs. ArcGIS OnlinePortal vs. ArcGIS Online
Portal vs. ArcGIS Online

An ArcGIS portal can be implemented either through ArcGIS Online (the cloud-based version) or Portal for ArcGIS (an on-premise installation). Both provide a web-based interface for accessing and sharing enterprise mapping applications and data. The document discusses various architectures and authentication methods for setting up a portal, including using a virtual private network and integrating with Active Directory. It also outlines three approaches for using a portal: manually registering services, federating with ArcGIS Server, or designating the portal as a hosted server.

gisutilitiesutility
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence

ArcGIS Enterprise is a foundational, powerful, and flexible platform for building collaborative web GIS systems. It includes a web portal for sharing and accessing maps, data, and apps from any browser as well as server software for hosting web services, performing analysis, and managing data. ArcGIS Enterprise can be deployed on-premises or in various cloud environments and includes tools for efficient content management, security, and scalability. Proper planning that considers organizational needs, resources, and IT environment is important for deploying an ArcGIS Enterprise system.

geographygisgeospatial
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC

The document summarizes new and improved capabilities in Esri's ArcGIS platform. Key updates include enhanced analytics, AI/machine learning, and real-time capabilities in ArcGIS Pro, ArcGIS Online, ArcGIS Enterprise, and various ArcGIS apps. It also previews new apps for indoor mapping, urban planning, and business intelligence to support focused workflows. Overall, the document highlights Esri's comprehensive geospatial platform and increasing integration of new technologies like AI.

geographygisgeospatial
My survey crews use GPS heavily…




                       VS.




     Limited battery               Unlimited power
resources.arcgis.com




      1440 x 900       480 x 800 hdpi
Mobile app – flip view port easily




   Portrait                          Landscape
Desktop app on smartphone

Recommended for you

Working with ArcGIS Online
Working with ArcGIS OnlineWorking with ArcGIS Online
Working with ArcGIS Online

This document summarizes a presentation about working with ArcGIS Online. It discusses ArcGIS Online as an integrated part of ArcGIS that allows users to create and share intelligent web maps on any device. The presentation demonstrates how to use ArcGIS.com to search data, create web maps, and embed maps in websites. It also shows how to use templates to showcase maps in a public gallery. The road ahead section discusses upcoming enhancements to ArcGIS Online, including hosting and portals for organizations to collaborate on maps and data in the cloud.

 
by Esri
arcgis onlinearcigs.comtechnical sessions
The 21st Century Harvard Map
The 21st Century Harvard MapThe 21st Century Harvard Map
The 21st Century Harvard Map

Delivered by Peter Siebert, GIS Applications Developer at Harvard University Planning Office (UPO), on December 9th, 2009 in Lamont Library, Forum Room.

harvardmapsgis
Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016

This document provides an overview and best practices for Portal for ArcGIS. It discusses choosing between AGOL and Portal, setting up Portal for administrative tasks such as customizing the home page and enabling basemaps, utility services, and GeoEnrichment services. It also covers advanced Portal customization options using the config.js file, licensing ArcGIS Pro, Portal architecture, security, and scaling options for high availability. Demo sections provide examples of administrative tasks, the Activity Dashboard, data store, and hosted server configuration.

ArcGIS API for JavaScript - Compact




          http://esriurl.com/compactJS




<script type="text/javascript"
    src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact">
Why use the compact library?


         32 modules vs. 80 modules


                    Size   Latency

        Compact




        Full
Many mobile frameworks, such as…
The challenge
Mobile frameworks help with…



           Views

           Visual Components

           Themes

Recommended for you

Collector for ArcGIS
Collector for ArcGISCollector for ArcGIS
Collector for ArcGIS

This document discusses using Collector for ArcGIS to enable field data collection and empower utility operations. Collector allows users to collect data using mobile devices and publish it to ArcGIS Online or Portal for use across the organization. While Collector currently only supports connected access, Esri is working on offline support which is not yet suitable for most utility workflows due to limitations like an inability to use dynamic map services. The document provides recommendations for implementing Collector, including publishing editable feature services and creating web maps for use in the app.

arcgisgisarcfm
ArcGIS Server Javascript API
ArcGIS Server Javascript APIArcGIS Server Javascript API
ArcGIS Server Javascript API

Utilizing a powerful and proven development framework, ArcGIS Server opens itself up to the Javascript world. With the new Javascript API, users can take advantage of an incredibly robust development environment to build and deploy web mapping applications within an organization. This session will explore the utilization of existing Javascript developer libraries that can be utilized to make simple yet powerful GIS web applications, showcase the performance increases that users will see with ArcGIS Server and introduce a simple mash up environment with Google Maps and Microsoft Virtual Earth

 
by ewug
serverarcgisgis
Esriuk_track5_pro_launch
Esriuk_track5_pro_launchEsriuk_track5_pro_launch
Esriuk_track5_pro_launch

ArcGIS Pro is the next generation ArcGIS desktop application that provides a clean, intuitive interface for 2D and 3D GIS workflows. It offers improved performance, productivity and customization over previous ArcGIS desktop applications. ArcGIS Pro can run alongside existing ArcGIS applications like ArcMap. Users with an ArcGIS Desktop license on maintenance are entitled to use ArcGIS Pro as well. Resources and training are available to help users transition to and take advantage of the new application.

Views




        Image courtesy Dojo
Views



<div id="mapView" dojoType="dojox.mobile.View“
        style="width:100%;height:100%;">
    <h1 dojoType="dojox.mobile.Heading"
        back="Back" moveTo="mainView">
        5 + 10 minute Drive Times
    </h1>
    <div id="map“ style="width:100%; height:100%;“/>
</div>
Visual Components



<div dojoType="dojox.charting.widget.Chart2D"
     theme="dojox.charting.themes.Claro" id="viewsChart"
     style="width: 550px; height: 550px;">

    
    <div class="plot" name="default" type="Pie"
     radius="200" fontColor="#000" labelOffset="-20"></div>

    
    <div class="series" name="Last Week's Visits"
        array="chartData">
    </div>

</div>
Themes



<div data-role="dialog" id="legendDialog"
  data-theme="f">
  <div data-role="header">
    <h1>Legend</h1>
  </div>
  <div data-role="content" >
    <div id="legendDiv"></div>
  </div>
</div>

Recommended for you

An Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based ServicesAn Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based Services

A presentation of Web 2.0 technology relating to location based services (LBS) and GIS. Both Web and mobile applications are discussed.

location based servicesapplication developmentflex
High Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector AppHigh Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector App

Eastern Panhandle GIS Users Group Meeting held on 14 September 2016 in Martinsburg, WV. Presenter Christine Iksic, Precision Laser & Instrument, Inc.

epan 2016
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.

A must see A to Z mobile web primer. If you still only have one website built for desktop then you need to review this presentation. Examples are about mapping but the concepts apply to everyone!

androidmobileweb
The view port
Setting the mobile view port




<meta name="viewport" content="width=device-width,
   initial-scale=1, maximum-scale=1, user-scalable=no"/>
Setting the mobile view port

                             Minimum view port




<meta name="viewport" content="width=device-width,
   initial-scale=1, maximum-scale=1, user-scalable=no"/>




Zoom level on page load

                               Force map to scale - not the page
No viewport   With viewport

Recommended for you

Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa

Presented by Ben Butchart and Murray King at the Institutional Web Managers Workshop, 12 July 2010, Sheffield

Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web

This document discusses best practices for mobile web development. It begins by noting limitations of mobile devices like less CPU/memory and smaller screens. It then provides tips for configuring the viewport, using media queries to separate styles, and detecting device properties in JavaScript. The document also covers HTML5 features like geolocation, media capture, and input types. It gives recommendations for images, gestures, and performance optimizations like minimizing redirects, requests, files sizes and using Gzip compression.

pinkoicoscupmobile web
Gup web mobilegis
Gup web mobilegisGup web mobilegis
Gup web mobilegis

The document discusses getting started with web mobile GIS. It covers responsive design principles like mobile-first design and progressive enhancement. It also discusses hybrid mobile app development using PhoneGap/Cordova to wrap web apps with native functionality. Additionally, it provides examples of jQuery Mobile and Bootstrap for building responsive web apps, techniques for offline editing of geospatial data on mobile devices, and tools for optimizing web content for mobile like the ArcGIS Web Optimizer.

Map touch events


               No Change!



function init() {
        var map = new esri.Map(...);
        dojo.connect(map, "onClick", myClickHandler);
}
Styling via resolution & rotation


          CSS3 Media Queries
CSS3 Media Queries
Target specific devices by screen width

@media screen and (min-device-width:768px) and (max-device-width:1024px) {
/* styles go here */
}



Apply styles by device orientation

@media (orientation: landscape) {
/* styles go here */
}



Target high density screens such as iPhone 4

@media (-webkit-min-device-pixel-ratio: 2) {
/* high resolution device styles go here */
}
Listen for device rotation

var supportsOrientationChange = "onorientationchange" in window,
        orientationEvent =
            supportsOrientationChange ? "orientationchange" : "resize";

       window.addEventListener(orientationEvent,
               dojo.hitch(this,function(){
                    //... TODO
                    this.orientationChanged = orientationChanged;
                }), false
        );

Recommended for you

Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인

The document discusses responsive web design, which involves creating websites that automatically adapt their layout to different screen sizes and devices using flexible grids, flexible images and media, and media queries. The key ingredients of responsive web design are a flexible grid-based layout, flexible images and media that resize appropriately, and media queries which allow the application of CSS styles based on characteristics of the device. Responsive design aims to provide an optimized viewing and interaction experience across a wide range of devices without the need for separate mobile sites.

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...

Join us and have fun learning how you can easily get started building JavaScript web and mobile GIS applications. We'll walk through some new quick start tools and resources that can shave off hours and even weeks of ramp-up time. There will be discussions on how to create and publish maps in minutes, as well as understanding how JavaScript and GIS services work together. Liberally sprinkled throughout the session will be lots of tips-and-tricks, and lessons learned.

Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more

This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.

readermobile application developmentweb applications
Responsive Frameworks…(partial list)

                        The Boiler
   Boostrap                       Less+
                             Wirefy

              Foundation 3
                                      Titan
      Susy
                        Skeleton              Ingrid
Less Framework 4

                    jQuery
Demo
Putting it all together
Hybrid Web Apps




   Wrap your app with native framework.   Deploy to multiple platforms!
Hybrid Web Apps

Recommended for you

Web app and more
Web app and moreWeb app and more
Web app and more

This document discusses various techniques for making web applications work offline and with unreliable network connections, including: - The application cache manifest which allows specifying cached resources to work offline - Issues with the current manifest specification and potential enhancements - The window.applicationCache API for caching resources and monitoring cache status - Detecting online/offline status using the navigator.onLine property In 3 sentences or less, it summarizes approaches for offline web applications using the application cache manifest, applicationCache API, and navigator.onLine property.

web application
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape

A talk I was asked to give on the various options for building mobile applications / getting content onto mobile devices. I chose to organize it as gradient surveying the spectrum from web to native, all the stuff in between. Unfortunately for native I've only had experience with iOS so I couldn't really speak towards the other platforms. I do think that non native solutions can take care of 95% of the use cases, and this gap will only narrow as time goes on - I'm thinking back to early 2010 when cross platform SDKs like Appcelerator Titanium came onto the scene and how much has changed.

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

Extended version of my "Making your site mobile-friendly" talk, including a short look at native applications vs web apps, for the UKOLN DevCSI event "Developing for Mobile Applications in Education" in Reading http://www.ukoln.ac.uk/events/devcsi/mobile_applications/

web appweb standardshtml5
Hybrid Web Apps

                  Direct access to:

                  GPS
                  Camera
                  Storage
                  Notification
Examples of Hybrid Web Apps
        http://www.phonegap.com/app
build.phonegap.com
Demo
Phonegap build

Recommended for you

openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010

This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.

html5 css3 widget widgets mobile
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

This document provides guidance on developing mobile applications using Adobe AIR for mobile platforms. It discusses key considerations for touch interfaces like larger touch targets. It also covers platform-specific development setup and tools for Android and iOS. The document reviews AIR capabilities for mobile like gestures, location services and hardware integration. It provides optimization tips for performance like bitmap caching and GPU acceleration.

adobe flashandroidadobe
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile

This document discusses HTML5 on mobile devices. It begins by explaining why mobile web is growing and why HTML5 is well-suited for mobile. It then provides an overview of what HTML5 is and examples of features like forms, multimedia, geolocation that can be used on mobile. It also discusses considerations for mobile web development like responsive design and frameworks. The document recommends tools for mobile debugging and testing performance.

html5mobile
HTML5

        HTML + CSS3 + JavaScript




                                   HTML5 Logo by W3C
HTML5 APIs
•   Several new APIs
    -   Drag and drop API
    -   FileSystem API(s)
    -   Geolocation API
    -   Web Storage: localStorage/sessionStorage
    -   Web Workers (threaded JavaScript!)
    -   Cross-Origin Resource Sharing (CORS)
    -   Browser History
Web Storage API
•   5 MB limit vs. 4 KB per regular cookie
•   Stores key/value pairs
•   localStorage and sessionStorage

// Put the object into storage
localStorage.setItem(“address”, someAddress);

// Retrieve the object from storage
var userAddress = localStorage.getItem(“address”);


// Save data to a the current session's store
sessionStorage.setItem("username", "John");


// Access some stored data
var userName = sessionStorage.getItem("username"));
Geolocation API
•   Provides user’s approximate location
•   Opt-in only!




navigator.geolocation.getCurrentPosition(
    zoomToLocation, locationError
);

watchId = navigator.geolocation.watchPosition(
    updateLocation, locationError
);

Recommended for you

Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla

This document summarizes the Firefox OS, an open web platform for building mobile apps and customizing the user interface using HTML5, CSS, and JavaScript. It outlines key web APIs, the process for developing and publishing open web apps, and the different types of apps including regular web apps, installed web apps, and privileged web apps with additional capabilities. Security levels and permissions for APIs are also discussed.

apiweb apiapis
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn

This document provides an overview of developing apps for the iPad using web technologies like HTML5, CSS3, and JavaScript compared to developing native apps. It discusses key differences like the APIs available, performance, costs, updating processes, and more. It then provides best practices for web design on iPads, including considerations for touch targets, orientations, animations, images, and more. It also covers specific technologies like HTML5, CSS3, JavaScript, and backend development approaches. The overall message is that web development for iPads is very capable with modern techniques.

Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air

A general overview of HTML5, CSS 3, CSS Meedia Queries, mobile, DAP. You might find the organically-grown hand-selected list-of-links-o-rama™ at http://my.opera.com/ODIN/blog/over-the-air-2010-bruce-lawsons-web-developments-2-0-talk to be useful.

appshtml5css
Geolocation API
Understanding browsers




          !=         !=
caniuse.com
Feature detection pattern

useLocalStorage = supports_local_storage();

function supports_local_storage() {
   try {
     return 'localStorage' in window &&
        window['localStorage'] !== null;
   }
   catch( e ){
     return false;
   }
}

function doSomething() {
    if(useLocalStorage == true){
       //write to local storage
    }
    else {
         //degrade gracefully
    }
}

Recommended for you

HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1

Mobile applications are evolving to leverage HTML5 and rich web technologies. While native mobile applications currently have advantages in terms of performance and access to device features, HTML5 allows building applications that work across mobile devices and platforms using web standards. Frameworks like jQuery Mobile and Sencha Touch demonstrate how to build mobile-optimized interfaces using HTML, CSS, and JavaScript. HTML5 applications have the potential for broader reach and less development effort compared to building separate native apps, though performance compromises remain versus truly native apps.

w2e
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)

The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.

html5mobile
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework

Presented June 8, 2012 (Online) at the 'Access by Touch: Delivering Library Services Through Mobile Technologies' conference sponsored by Amigos Library Services. Description: By the end of 2012, it is expected that more than 80% of the world’s population will have access to a smartphone. Your library users will assume that your library can be accessible from anywhere, at any time, and on any device. Now is the time to be ready! During this webinar, you will: - learn what a mobile framework is. - acquire best practices in mobile Web development. - understand the various technologies (HTML, CSS, JavaScript) and how they work together to build mobile Web apps. - recognize the differences between native and web apps. - have an opportunity to continue to work with Chad after the webinar to demonstrate what you learned. - gain access after the webinar to a free Web server so you can see your mobile Web app live.

frameworksjquery mobilemobile web
Test on different devices
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag
Antoon Uijtdehaag, Esri Nederland
Technisch Consultant

auijtdehaag@esri.nl
@esrinederland



Andy Gup, Esri
Tech Lead for Web APIs and Android
Esri Developer Network

agup@esri.com
http://blog.andygup.net
@agup
Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

Recommended for you

Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it

This document discusses how to create mobile apps that feel native using only web technologies. It covers supporting features in Mobile Safari like local storage, CSS3 features, and geolocation. It recommends using web technologies over native due to quicker iteration times. Specific techniques covered include detecting browser type, adding home screen icons, startup images, going full screen, and viewport settings. The document also discusses frameworks like jQuery Mobile but notes native DOM APIs may be sufficient. It covers input features, touch vs click, animations, locking orientation, and performance tips. It acknowledges limitations of Android and webOS and recommends testing on actual devices. Finally, it discusses hybrid mobile frameworks like PhoneGap and Titanium that allow developing for multiple platforms using one code

androidmobileiphone
Het verhaal achter kaarten
Het verhaal achter kaartenHet verhaal achter kaarten
Het verhaal achter kaarten

Het verhaal achter kaarten vertelt het verhaal van Esri Nederland. In beeld gebracht met een aantal foto's.

geschiedenistoekomstesri
EGC2013 Mark Herbold
EGC2013 Mark HerboldEGC2013 Mark Herbold
EGC2013 Mark Herbold

More Related Content

What's hot

Navteq Developer Days - ArcGIS + POI
Navteq Developer Days - ArcGIS + POINavteq Developer Days - ArcGIS + POI
Navteq Developer Days - ArcGIS + POI
Allan Laframboise
 
Building ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the CloudBuilding ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the Cloud
Allan Laframboise
 
Architecting the ArcGIS Platform
Architecting the ArcGIS PlatformArchitecting the ArcGIS Platform
Architecting the ArcGIS Platform
Esri UK
 
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Esri Nederland
 
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GISNDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
North Dakota GIS Hub
 
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland
 
NDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS Pro
North Dakota GIS Hub
 
Working with arcgis online
Working with arcgis onlineWorking with arcgis online
Working with arcgis online
zmmin383
 
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
Geodata AS
 
Portal vs. ArcGIS Online
Portal vs. ArcGIS OnlinePortal vs. ArcGIS Online
Portal vs. ArcGIS Online
SSP Innovations
 
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
North Dakota GIS Hub
 
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
North Dakota GIS Hub
 
Working with ArcGIS Online
Working with ArcGIS OnlineWorking with ArcGIS Online
Working with ArcGIS Online
Esri
 
The 21st Century Harvard Map
The 21st Century Harvard MapThe 21st Century Harvard Map
The 21st Century Harvard Map
Harvard Web Working Group
 
Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016
Geodata AS
 
Collector for ArcGIS
Collector for ArcGISCollector for ArcGIS
Collector for ArcGIS
SSP Innovations
 
ArcGIS Server Javascript API
ArcGIS Server Javascript APIArcGIS Server Javascript API
ArcGIS Server Javascript API
ewug
 
Esriuk_track5_pro_launch
Esriuk_track5_pro_launchEsriuk_track5_pro_launch
Esriuk_track5_pro_launch
Esri UK
 
An Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based ServicesAn Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based Services
webmapsolutions
 
High Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector AppHigh Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector App
WV Assocation of Geospatial Professionals
 

What's hot (20)

Navteq Developer Days - ArcGIS + POI
Navteq Developer Days - ArcGIS + POINavteq Developer Days - ArcGIS + POI
Navteq Developer Days - ArcGIS + POI
 
Building ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the CloudBuilding ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the Cloud
 
Architecting the ArcGIS Platform
Architecting the ArcGIS PlatformArchitecting the ArcGIS Platform
Architecting the ArcGIS Platform
 
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
Developer’s Guide to the ArcGIS Portal API, Esri, Julie Powell, Antoon Uijtd...
 
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GISNDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
NDGeospatialSummit2019 - ArcGIS Pro – Next-Generation Desktop GIS
 
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
Esri Ireland "ArcGIS - The Platform Story" Roadmap Session - Eamonn Doyle, Es...
 
NDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS ProNDGISUC2017 - Introducing ArcGIS Pro
NDGISUC2017 - Introducing ArcGIS Pro
 
Working with arcgis online
Working with arcgis onlineWorking with arcgis online
Working with arcgis online
 
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
 
Portal vs. ArcGIS Online
Portal vs. ArcGIS OnlinePortal vs. ArcGIS Online
Portal vs. ArcGIS Online
 
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location IntelligenceNDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
NDGeospatialSummit2019 - ArcGIS Enterprise – Power Your Location Intelligence
 
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
NDGeospatialSummit2019 - What’s New with ArcGIS – Highlights From the 2019 UC
 
Working with ArcGIS Online
Working with ArcGIS OnlineWorking with ArcGIS Online
Working with ArcGIS Online
 
The 21st Century Harvard Map
The 21st Century Harvard MapThe 21st Century Harvard Map
The 21st Century Harvard Map
 
Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016Portal for ArcGIS – beste praksis - BK2016
Portal for ArcGIS – beste praksis - BK2016
 
Collector for ArcGIS
Collector for ArcGISCollector for ArcGIS
Collector for ArcGIS
 
ArcGIS Server Javascript API
ArcGIS Server Javascript APIArcGIS Server Javascript API
ArcGIS Server Javascript API
 
Esriuk_track5_pro_launch
Esriuk_track5_pro_launchEsriuk_track5_pro_launch
Esriuk_track5_pro_launch
 
An Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based ServicesAn Overview of Web GIS and Location Based Services
An Overview of Web GIS and Location Based Services
 
High Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector AppHigh Accuracy Data Collection with Esri's Collector App
High Accuracy Data Collection with Esri's Collector App
 

Similar to Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

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
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
EDINA, University of Edinburgh
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Gup web mobilegis
Gup web mobilegisGup web mobilegis
Gup web mobilegis
GeCo in the Rockies
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
Daum DNA
 
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
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
Yan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and more
faming su
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
Ambert Ho
 
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
Patrick Lauke
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
Patrick Lauke
 
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
Chris Griffith
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
Adam Lu
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
Robert Nyman
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
Critical Mass
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
brucelawson
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
St. Petersburg College
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
Jonathan Snook
 

Similar to Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag (20)

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.
 
Location Based Services Without the Cocoa
Location Based Services Without the CocoaLocation Based Services Without the Cocoa
Location Based Services Without the Cocoa
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Gup web mobilegis
Gup web mobilegisGup web mobilegis
Gup web mobilegis
 
Devon 2011-f-1 반응형 웹 디자인
Devon 2011-f-1  반응형 웹 디자인Devon 2011-f-1  반응형 웹 디자인
Devon 2011-f-1 반응형 웹 디자인
 
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...
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
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
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
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
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Web APIs & Apps - Mozilla
Web APIs & Apps - MozillaWeb APIs & Apps - Mozilla
Web APIs & Apps - Mozilla
 
Cm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learnCm i padwebdev_lunch_learn
Cm i padwebdev_lunch_learn
 
Bruce lawson-over-the-air
Bruce lawson-over-the-airBruce lawson-over-the-air
Bruce lawson-over-the-air
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Fake it 'til you make it
Fake it 'til you make itFake it 'til you make it
Fake it 'til you make it
 

More from Esri Nederland

Het verhaal achter kaarten
Het verhaal achter kaartenHet verhaal achter kaarten
Het verhaal achter kaarten
Esri Nederland
 
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction toArcGIS for Developers, Esri, Charles van der Put, Jim BarryIntroduction toArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Esri Nederland
 
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn BoogaardFlex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
Esri Nederland
 
Building good web_maps, Esri, Joris Bak
Building good web_maps, Esri, Joris BakBuilding good web_maps, Esri, Joris Bak
Building good web_maps, Esri, Joris Bak
Esri Nederland
 
Open data, nu!
Open data, nu!Open data, nu!
Open data, nu!
Esri Nederland
 
Open data workshop modellen
Open data workshop modellenOpen data workshop modellen
Open data workshop modellen
Esri Nederland
 

More from Esri Nederland (8)

Het verhaal achter kaarten
Het verhaal achter kaartenHet verhaal achter kaarten
Het verhaal achter kaarten
 
EGC2013 Mark Herbold
EGC2013 Mark HerboldEGC2013 Mark Herbold
EGC2013 Mark Herbold
 
Gin presentatie
Gin presentatieGin presentatie
Gin presentatie
 
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction toArcGIS for Developers, Esri, Charles van der Put, Jim BarryIntroduction toArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
 
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn BoogaardFlex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
Flex en silverlight viewer configuratie, Esri, Mark Jagt, Boudewijn Boogaard
 
Building good web_maps, Esri, Joris Bak
Building good web_maps, Esri, Joris BakBuilding good web_maps, Esri, Joris Bak
Building good web_maps, Esri, Joris Bak
 
Open data, nu!
Open data, nu!Open data, nu!
Open data, nu!
 
Open data workshop modellen
Open data workshop modellenOpen data workshop modellen
Open data workshop modellen
 

Recently uploaded

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
Bert Blevins
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 

Recently uploaded (20)

UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
Password Rotation in 2024 is still Relevant
Password Rotation in 2024 is still RelevantPassword Rotation in 2024 is still Relevant
Password Rotation in 2024 is still Relevant
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 

Building mobile apps with the ArcGIS api for Javascript, Esri, Andy Gup and Antoon Uijtdehaag

  • 1. Agenda Goal: You’ll get an A to Z mobile web primer Why build mobile map apps? 3 Approaches Frameworks CSS3 & HTML5 Hybrid Map apps
  • 2. Who are your presenters? Antoon Uijtdehaag, Esri Nederland Technical Consultant Email: auijtdehaag@esri.nl Twitter @uijtdehaag Andy Gup, Esri Tech Lead for Web APIs and Android Esri Developer Network Email: agup@esri.com Twitter: @agup
  • 6. Mobile usage stats for my website? Web Server logs Web analytic tools
  • 7. Sample web-site stats from esri.com
  • 8. Your 3 Approaches Web app 1. + Native mobile app Web app 2. + Web mobile app (a.k.a Hybrid) 3. Web app only (Responsive)
  • 9. Many different screen sizes and pixel densities 1920x1080
  • 10. Wait…how do I pan and zoom the map??
  • 11. Hmmm…how many map layers do I load? VS. 1 GB RAM 16 GB RAM
  • 12. How come my map loads so slooow? VS. Mostly connected Always connected
  • 13. My survey crews use GPS heavily… VS. Limited battery Unlimited power
  • 14. resources.arcgis.com 1440 x 900 480 x 800 hdpi
  • 15. Mobile app – flip view port easily Portrait Landscape
  • 16. Desktop app on smartphone
  • 17. ArcGIS API for JavaScript - Compact http://esriurl.com/compactJS <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2compact">
  • 18. Why use the compact library? 32 modules vs. 80 modules Size Latency Compact Full
  • 19. Many mobile frameworks, such as… The challenge
  • 20. Mobile frameworks help with… Views Visual Components Themes
  • 21. Views Image courtesy Dojo
  • 22. Views <div id="mapView" dojoType="dojox.mobile.View“ style="width:100%;height:100%;"> <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="mainView"> 5 + 10 minute Drive Times </h1> <div id="map“ style="width:100%; height:100%;“/> </div>
  • 23. Visual Components <div dojoType="dojox.charting.widget.Chart2D" theme="dojox.charting.themes.Claro" id="viewsChart" style="width: 550px; height: 550px;"> <!-- Pie Chart: add the plot --> <div class="plot" name="default" type="Pie" radius="200" fontColor="#000" labelOffset="-20"></div> <!-- pieData is the data source --> <div class="series" name="Last Week's Visits" array="chartData"> </div> </div>
  • 24. Themes <!--Legend Dialog--> <div data-role="dialog" id="legendDialog" data-theme="f"> <div data-role="header"> <h1>Legend</h1> </div> <div data-role="content" > <div id="legendDiv"></div> </div> </div>
  • 26. Setting the mobile view port <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
  • 27. Setting the mobile view port Minimum view port <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> Zoom level on page load Force map to scale - not the page
  • 28. No viewport With viewport
  • 29. Map touch events No Change! function init() { var map = new esri.Map(...); dojo.connect(map, "onClick", myClickHandler); }
  • 30. Styling via resolution & rotation CSS3 Media Queries
  • 31. CSS3 Media Queries Target specific devices by screen width @media screen and (min-device-width:768px) and (max-device-width:1024px) { /* styles go here */ } Apply styles by device orientation @media (orientation: landscape) { /* styles go here */ } Target high density screens such as iPhone 4 @media (-webkit-min-device-pixel-ratio: 2) { /* high resolution device styles go here */ }
  • 32. Listen for device rotation var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, dojo.hitch(this,function(){ //... TODO this.orientationChanged = orientationChanged; }), false );
  • 33. Responsive Frameworks…(partial list) The Boiler Boostrap Less+ Wirefy Foundation 3 Titan Susy Skeleton Ingrid Less Framework 4 jQuery
  • 35. Hybrid Web Apps Wrap your app with native framework. Deploy to multiple platforms!
  • 37. Hybrid Web Apps Direct access to: GPS Camera Storage Notification
  • 38. Examples of Hybrid Web Apps http://www.phonegap.com/app
  • 41. HTML5 HTML + CSS3 + JavaScript HTML5 Logo by W3C
  • 42. HTML5 APIs • Several new APIs - Drag and drop API - FileSystem API(s) - Geolocation API - Web Storage: localStorage/sessionStorage - Web Workers (threaded JavaScript!) - Cross-Origin Resource Sharing (CORS) - Browser History
  • 43. Web Storage API • 5 MB limit vs. 4 KB per regular cookie • Stores key/value pairs • localStorage and sessionStorage // Put the object into storage localStorage.setItem(“address”, someAddress); // Retrieve the object from storage var userAddress = localStorage.getItem(“address”); // Save data to a the current session's store sessionStorage.setItem("username", "John"); // Access some stored data var userName = sessionStorage.getItem("username"));
  • 44. Geolocation API • Provides user’s approximate location • Opt-in only! navigator.geolocation.getCurrentPosition( zoomToLocation, locationError ); watchId = navigator.geolocation.watchPosition( updateLocation, locationError );
  • 48. Feature detection pattern useLocalStorage = supports_local_storage(); function supports_local_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch( e ){ return false; } } function doSomething() { if(useLocalStorage == true){ //write to local storage } else { //degrade gracefully } }
  • 49. Test on different devices
  • 51. Antoon Uijtdehaag, Esri Nederland Technisch Consultant auijtdehaag@esri.nl @esrinederland Andy Gup, Esri Tech Lead for Web APIs and Android Esri Developer Network agup@esri.com http://blog.andygup.net @agup

Editor's Notes

  1. Demographics app
  2. http://www.esri.com/site/pdfs/visitorprofile_q3_2011.pdf
  3. http://mobile.businessweek.com/articles/2012-09-13/the-4g-era-arrives-how-much-will-you-pay
  4. Arcgis.com
  5. Arcgis.comhttp://help.arcgis.com/en/webapi/javascript/arcgis/index.htmlhttp://help.arcgis.com/en/webapi/javascript/arcgis/mobile/index.html&lt;Ctrl&gt;+&lt;PageUp&gt;&lt;Ctrl&gt;+&lt;PageDown&gt;&lt;Crtl&gt;+&lt;Shift&gt;+M
  6. http://esriurl.com/compactJSIf your are building Mobile Apps using the ArcGIS Api for Javascript. You can go for the compact build of the serverapi.This compact version of the JavaScript API was designed for building applications where slower internet speeds and network latency is an issue.For example, on a 3G mobile device, where you want the smallest possible download. This compact build is also a great option if you want to leverage a JavaScript toolkit other than Dojo.To use the compact build, add the following script tag to your application.
  7. What are the primary differences between compact build and standard build.The compact build removes the dependency on the dijit namespace upon initial download, meaning that if you don&apos;t need the dojo dijits they won&apos;t be loaded. A side-effect of this is that a new info window and slider are provided.The compact build includes 32 of the commonly used modules (compared to 80 in the standard). If your application requires objects from modules not included in the compact build you will need to load them using dojo.require. For example, if you want to perform geoprocessing with the compact build you will need to add the following dojo.require statement to your application.dojo.require(&quot;esri.tasks.gp&quot;);These two features reduce the size of the build by 53 Kb gzipped. Less JavaScript code to execute means less work the browser has to do.
  8. To help you rapidly deploy cross-platform mobile apps and websites, there’s a wide range of JavaScript frameworks you can take advantage of.Some common characteristics of JavaScript mobile web development frameworks:Optimized for touchscreen devices: Fingers as input devices instead of mouse cursors provide an extra set of challenges in user interface design. Mobile web development frameworks provide standard UI elements and event-handling specifically for mobile device platforms.Cross-platform: Support for multiple mobile device platforms such iOS and Android allows you to get your app to a wide range of users.Lightweight: Because of current bandwidth limitations, a stronger emphasis on lowering file weight is placed into mobile web development frameworks.Uses HTML5 and CSS3 standards: Most mainstream mobile devices have web browsers that support HTML5 and CSS3, and so mobile web development frameworks take advantage of new features available in these upcoming W3C specifications for a better user experience.http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/http://www.sencha.com/http://jquerymobile.com/http://dojotoolkit.org/features/mobile
  9. http://dojotoolkit.org/reference-guide/1.8/dojox/mobile.htmlhttp://docs.sencha.com/touch/2-0/#!/api
  10. jQuery
  11. Locks entire window. Focuses pinch zoom on components (e.g. map).Pinch zoom not available on Android 3+ until ArcGIS API for JavaScript v3.2
  12. https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
  13. Andy
  14. http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
  15. http://edn1.esri.com/jsdevstarter/device_sim/index.html
  16. Let’s talk about building Hybrid Web App. You can wrap your Javascriptapp with a native framework. And deploy it to multiple platforms, like iOS, Android and Windows Phone.
  17. You can do the same thing with iOSAntoon
  18. http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/From the outside a hybrid app acts like a native app. Once build the app acts as native app and can be sold or given away in the various app stores.
  19. http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/Big advantage of using a hybrid framework is that its enables you to access device specific features. Like the Camera or Gallery. Direct access to storage of even use notifications.
  20. http://venturebeat.com/2012/05/02/linkedin-ipad-app-engineering/#s:1-linkedin-ipadhttp://www.mobilemarketer.com/cms/news/software-technology/13786.htmlOne of the frameworks out there is PhoneGap.PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.There are a lot of apps out there using this Hybrid technology. But recently facebook decided to redesign their apps and go native. Not an easy path to go.
  21. Theres a cloud based solution for packaging your apps is called PhoneGap build.WithPhoneGap build, the packaging process can be done in the cloud.Simply upload your HTML5, CSS, and JavaScript assets to the Adobe® PhoneGap™ Build cloud service and they do the work of compiling for you.
  22. http://edn1.esri.com/jsdevstarter/device_sim/index.html
  23. Andy
  24. Modernizr
  25. Be careful when reusing desktop content on the mobile web