Web. Smartphone. Future. Now Web. Smartphone. Future. Now Mobile Web Development Mobile Web Development Presented by Jason O’Keefe, Senior Mobile Advocate at
Jan 15, 2015
Web. Smartphone. Future. NowWeb. Smartphone. Future. Now
Mobile Web DevelopmentMobile Web Development
Presented by Jason O’Keefe, Senior Mobile Advocate at
Mobile Kicks A**Mobile Kicks A**
……But Who’s your Daddy?!But Who’s your Daddy?!
· · AT&T, Sprint, Verizon Wireless, T-Mobile, MetroPCS AT&T, Sprint, Verizon Wireless, T-Mobile, MetroPCS · Palm, Nokia, Apple, Motorola, RIM, Samsung, LG· Palm, Nokia, Apple, Motorola, RIM, Samsung, LG
· Windows Mobile, iPhone OS, WebOS, Blackberry OS, Symbian· Windows Mobile, iPhone OS, WebOS, Blackberry OS, Symbian
The Web is a developer's futureThe Web is a developer's future Why no more suckage?Why no more suckage?
• HTML5 (incl. CSS3, JavaScript)HTML5 (incl. CSS3, JavaScript)
• WebKit Browser EngineWebKit Browser Engine
• iPhone + Mobile SafariiPhone + Mobile Safari
• App Store*App Store*
• Services*: Geolocation, Camera, Photos, Contacts, PhoneServices*: Geolocation, Camera, Photos, Contacts, Phone
• High performance JavaScript EnginesHigh performance JavaScript Engines
• Smartphones: Android, Blackberry, Nokia, LG, SamsungSmartphones: Android, Blackberry, Nokia, LG, Samsung
The Mobile Web… Sucks No MoreThe Mobile Web… Sucks No More
HTML5 vs. Native - How they Size UpHTML5 vs. Native - How they Size Up
Show me the CodeShow me the Code
• GeolocationGeolocation
• CSS3CSS3
• Local DatabaseLocal Database
• UI FrameworksUI Frameworks
• HTML5 Offline Support with AppCacheHTML5 Offline Support with AppCache
• PhoneGap PhoneGap
Geolocation Example Geolocation Example
CSS 3 – Declarative AwesomenessCSS 3 – Declarative Awesomeness
• Easier to create complex visual effectsEasier to create complex visual effects
• Greater layout flexibilityGreater layout flexibility
• Animation via transformationsAnimation via transformations
• Hardware acceleration Hardware acceleration
• Mobile browser early adoptionMobile browser early adoption
CSS 3 - Backgrounds & BordersCSS 3 - Backgrounds & Borders
Example 1: CSS 3 ButtonExample 1: CSS 3 Button CSS3 properties used
• - border-radius
• - box-shadow
• - text-shadow
• - gradients
CSS 3 - Advanced GraphicsCSS 3 - Advanced Graphics Example #2: 2D TransformationExample #2: 2D Transformation
Web Database - Native SQL ServicesWeb Database - Native SQL Services • Native browser database storage
• SQLite reference implementation
• Transactions
• 5Mb default size
• Makes offline possible
• Web dev gets balls
UI UI FrameworksFrameworks for Mobile Web for Mobile Web What?What?
• Styling, native look and feelStyling, native look and feel
• Form inputForm input
• User events, swipe, touch, orientationUser events, swipe, touch, orientation
Examples of iPhone frameworksExamples of iPhone frameworks
• iUI - code.google.com/p/iuiiUI - code.google.com/p/iui
• jQTouch - www.jqtouch.comjQTouch - www.jqtouch.com
• WebApp.Net - webapp-net.comWebApp.Net - webapp-net.com
• iWebKit - www.iwebkit.netiWebKit - www.iwebkit.net
• iphone-universal - code.google.com/p/iphone-universaliphone-universal - code.google.com/p/iphone-universal
• Magic - www.jeffmcfadden.com/projects/Magic%20FrameworkMagic - www.jeffmcfadden.com/projects/Magic%20Framework
UI Frameworks DemoUI Frameworks Demo
Example #1: MenusExample #1: Menus
UI Frameworks DemoUI Frameworks Demo
Example #2: FormsExample #2: Forms
HTML5 Offline Support - HTML5 Offline Support - AppCacheAppCache • iPhone & Android, others? iPhone & Android, others?
• Offline HTTP caching mechanismOffline HTTP caching mechanism
• Define resources to cache via Manifest fileDefine resources to cache via Manifest file
• Manifest MIME type: text/cache-manifestManifest MIME type: text/cache-manifest
myapp.manifest filemyapp.manifest file
Offline ExampleOffline Example index.html index.html
Hybrid Mobile Web ApplicationsHybrid Mobile Web Applications Mobile web does not solve application requirements for:Mobile web does not solve application requirements for:
• AppStore-readiness
• Native services or sensor access
• Hardware optimization
Consider hybrid mobile web framework:Consider hybrid mobile web framework:
• Package mobile web app as native app
• API for services and sensors
• Hooks to custom native feature implementation
FrameworksFrameworks
• PhoneGap
• Big5
• Rhomobile
• Appcelerator
PhoneGap DemoPhoneGap Demo Example #1: Accelerometer/NotificationExample #1: Accelerometer/Notification
Carrier, App Store and the WebCarrier, App Store and the Web *Credit to Jason Grigsby, Cloud Four blog for charts
Closing RemarksClosing Remarks
……and Please complete an and Please complete an
evaluation evaluation
Questions?Questions?