gup web mobilegis
DESCRIPTION
TRANSCRIPT
Getting Started with Web Mobile GIS
Andy Gup, Esri @agup
What’s on the agenda?
Mobile is NOT desktop
Responsive design
Progressive enhancement
Hybrid
Offline
Why care about mobile?
Users/customers demand it Higher productivity Greater user satisfaction More repeat visits
Examples
Field data collection Road/weather conditions app Zoning enforcement Citizen 311 Historical tours … …
Mobile Web Demo
http://www.responsinator.com/?url=www.esri.com
Mobile Devices Are different…
• Physical device
• Screen size
• Button size
User Interactions Are different…
• Touch
• Orientation
• Keyboard
• Voice
User Expectations Are different…
• App to work like an app
• Websites to work like an app
Design Patterns Need to be different!
Think mobile first!
320px
Touch aware map
HTML5 input types
type=“email” type=“tel” type=“date”
Mobile styling
esri/dijit/Geocoder
esri/dijit/LocateButton
Mobile Popups
esri/dijit/PopupMobile
Custom components
A few JavaScript Frameworks
Bootstrap (responsive)
jQuery Mobile (Progressive Enhancement or responsive)
PhoneGap (Hybrid)
Responsive
Default Behavior
Responsive Grid Layouts
Vertical Stacking
Large: 3 Rows - 3 Columns
>= 1280px
Medium: 2 Columns
1024 - 1280px
Small: Single Column
768 - 1024px
X-Small: 1 Column, Minimized
=< 768px
Responsive HTML5 Application
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>
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
Bootstrap (Responsive)
Bootstrap (Responsive)
Fluid Grid System
Layout adapts to:
- different screen sizes
- Device orientation
Based on percentages
12 column / 960px
Fluid Grid System
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) { ... }
bootstrap-map-js
https://github.com/Esri/bootstrap-map-js
Progressive Enhancement
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
Progressive enhancement
Desktop Phone
Progressive enhancement
Desktop Phone
Desktop view of mobile app
Browser detection
Browser/device type
Server-side browser/device detection
- http://detectmobilebrowsers.com/
Client-side browser/device detection
- Modernizr
- YepNope
Single Page View
Page structure
Apply CSS, roles and themes
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>
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>
<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
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;
}
JQuery-mobile-map-js
https://github.com/Esri/jquery-mobile-map-js
var helper = new jQueryHelper(map);
Hybrid
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
PhoneGap + JavaScript
+ HTML + CSS +
Mobile JavaScript
Framework
= Android SDK
Project
Native deployment
Access to:
GPS Camera SD Card Compass Accelerometer Connection State …
Why PhoneGap?
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)
Quickstart-map-phonegap
https://github.com/Esri/quickstart-map-phonegap
Optimize
ArcGIS Web Optimizer
Online tool
Single ArcGIS JavaScript library file!
Faster download
At least 3x smaller
ArcGIS Web Optimizer
<script
src="http://localhost/test/dojo.js"
data-dojo-config="async: true">
</script>
Offline JS
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
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.
Offline-editor-js
https://github.com/Esri/offline-editor-js
Offline trails app
Mtn biking
Hiking
Recap
Think Mobile first Prototype, prototype and prototype Use ArcGIS Web Optimizer and Grunt Offline JS is possible!
Questions? Andy Gup, Esri Developer Evangelist www.andygup.net github.com/andygup [email protected] @agup