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?