Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Similar to Gup web mobilegis
Similar to Gup web mobilegis (20)
More from GeCo in the Rockies
More from GeCo in the Rockies (20)
Gup web mobilegis
- 1. Getting Started with Web Mobile GIS Andy Gup, Esri @agup
- 3. Andy Gup, Esri Developer Evangelist www.andygup.net github.com/andygup agup@esri.com @agup
- 4. What’s on the agenda? Mobile is NOT desktop Responsive design Progressive enhancement Hybrid Offline
- 5. Why care about mobile? Users/customers demand it Higher productivity Greater user satisfaction More repeat visits
- 6. Examples Field data collection Road/weather conditions app Zoning enforcement Citizen 311 Historical tours … …
- 7. Mobile Web Demo http://www.responsinator.com/?url=www.esri.com
- 9. Mobile Devices Are different… •Physical device •Screen size •Button size
- 10. User Interactions Are different… •Touch •Orientation •Keyboard •Voice
- 11. User Expectations Are different… •App to work like an app •Websites to work like an app
- 12. Design Patterns Need to be different!
- 13. Think mobile first! 320px
- 14. Touch aware map
- 15. HTML5 input types type=“email” type=“tel” type=“date”
- 16. Mobile styling esri/dijit/Geocoder esri/dijit/LocateButton
- 19. A few JavaScript Frameworks Bootstrap (responsive) jQuery Mobile (Progressive Enhancement or responsive) PhoneGap (Hybrid)
- 20. Responsive
- 21. Default Behavior
- 22. Responsive Grid Layouts Vertical Stacking
- 23. Large: 3 Rows - 3 Columns >= 1280px
- 24. Medium: 2 Columns 1024 - 1280px
- 25. Small: Single Column 768 - 1024px
- 26. X-Small: 1 Column, Minimized =< 768px
- 28. Dev Tip: HTML Viewport Settings <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head>
- 29. Bootstrap (Responsive) Single web app that works well across a variety of devices/screen sizes Re-use content and software Considers Device limitations User’s behavior
- 32. Fluid Grid System Layout adapts to: - different screen sizes - Device orientation Based on percentages 12 column / 960px
- 34. CSS Media Queries Detect device screen size and orientation /* Extra small devices (phones, less than 768px) No media query -- Bootstrap default */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
- 38. jQuery Mobile Can be progressively enhanced or responsive If “Progressive”: Built with specific screen sizes in mind Formal control of UX Mimics native app look, feel and behavior Multi-page views **Perfect for use in Hybrid applications
- 39. Progressive enhancement Desktop Phone
- 40. Progressive enhancement Desktop Phone
- 41. Desktop view of mobile app
- 43. Browser/device type Server-side browser/device detection - http://detectmobilebrowsers.com/ Client-side browser/device detection -Modernizr -YepNope
- 44. Single Page View Page structure Apply CSS, roles and themes
- 45. Single Page Map - HTML <div data-role="page" id="home"> //Header <div data-theme="a" data-role="header" data-position="fixed"> <h3>HTML5 Geolocation</h3> </div> //Map <div data-role="content"> <div id="mapDiv"></div> </div> </div>
- 46. Single Page Map - HTML <div data-role="page" id="home"> //Header <div data-theme="a" data-role="header" data-position="fixed"> <h3>HTML5 Geolocation</h3> </div> //Map <div data-role="content"> <div id="mapDiv"></div> </div> </div>
- 47. <div data-role="page" id="home"> //Header <div data-theme="a" data-role="header" data-position="fixed"> <h3>HTML5 Geolocation</h3> </div> //Map <div data-role="content"> <div id="mapDiv"></div> </div> </div> Single Page Map - HTML
- 48. Single Page Map - CSS html,body, div[data-role ="page"] { height: 100%; width: 100%; margin: 0px; padding: 0px; } .ui-header{ margin: 0px !important; padding: 0px !important; float: left; } .ui-content{ height: 100%; width: 100%; margin: 0px; padding: 0px; } #mapDiv { position: absolute; background-color: #EEEEDD; height: 100%; width: 100%; padding: 0px; z-index: 0; left: 0px; }
- 50. JQuery-mobile-map-js https://github.com/Esri/jquery-mobile-map-js var helper = new jQueryHelper(map);
- 51. Hybrid
- 52. What is PhoneGap? Native wrapper around headless browser Cross-device access to storage and sensors Create JavaScript apps for Google Play, App Store Typically used in conjunction with jQuery
- 53. PhoneGap + JavaScript + HTML + CSS + Mobile JavaScript Framework = Android SDK Project
- 55. Access to: GPS Camera SD Card Compass Accelerometer Connection State …
- 56. Why PhoneGap?
- 57. PhoneGap vs Cordova PhoneGap came first Original developer Nitobi Adobe acquired Nitobi (Oct 2011) Apache Cordova open source project (2011) Share same code base Adobe PhoneGap Build (Sep 2012) Becomes top-level Apache Project (Oct 2012)
- 59. Optimize
- 60. ArcGIS Web Optimizer Online tool Single ArcGIS JavaScript library file! Faster download At least 3x smaller
- 61. ArcGIS Web Optimizer <script src="http://localhost/test/dojo.js" data-dojo-config="async: true"> </script>
- 62. ArcGIS Web Optimizer http://jso.arcgis.com/
- 64. Offline JS
- 65. Offline JavaScript? Yes! Lightweight tools for intermittent offline or fully offline Editing of features and tile management Resync edits when internet reestablished Ability to reload or restart offline
- 66. Need full featured, robust offline solution? ArcGIS Runtimes for iOS, Android, Qt and .NET! Includes integrated support for offline editing and synchronization. Fully supports related tables, sub-types, domains and much more.
- 68. Offline trails app Mtn biking Hiking
- 69. Recap Think Mobile first Prototype, prototype and prototype Use ArcGIS Web Optimizer and Grunt Offline JS is possible!
- 70. Questions? Andy Gup, Esri Developer Evangelist www.andygup.net github.com/andygup agup@esri.com @agup