jason.o keefe.genuitec.presentation.final
DESCRIPTION
TRANSCRIPT
![Page 1: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/1.jpg)
Web. Smartphone. Future. NowWeb. Smartphone. Future. Now
Mobile Web DevelopmentMobile Web Development
Presented by Jason O’Keefe, Senior Mobile Advocate at
![Page 2: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/2.jpg)
Mobile Kicks A**Mobile Kicks A**
![Page 3: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/3.jpg)
……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
![Page 4: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/4.jpg)
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
![Page 5: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/5.jpg)
HTML5 vs. Native - How they Size UpHTML5 vs. Native - How they Size Up
![Page 6: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/6.jpg)
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
![Page 7: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/7.jpg)
Geolocation Example Geolocation Example
![Page 8: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/8.jpg)
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
![Page 9: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/9.jpg)
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
![Page 10: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/10.jpg)
CSS 3 - Advanced GraphicsCSS 3 - Advanced Graphics Example #2: 2D TransformationExample #2: 2D Transformation
![Page 11: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/11.jpg)
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
![Page 12: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/12.jpg)
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
![Page 13: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/13.jpg)
UI Frameworks DemoUI Frameworks Demo
Example #1: MenusExample #1: Menus
![Page 14: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/14.jpg)
UI Frameworks DemoUI Frameworks Demo
Example #2: FormsExample #2: Forms
![Page 15: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/15.jpg)
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
![Page 16: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/16.jpg)
Offline ExampleOffline Example index.html index.html
![Page 17: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/17.jpg)
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
![Page 18: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/18.jpg)
PhoneGap DemoPhoneGap Demo Example #1: Accelerometer/NotificationExample #1: Accelerometer/Notification
![Page 19: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/19.jpg)
Carrier, App Store and the WebCarrier, App Store and the Web *Credit to Jason Grigsby, Cloud Four blog for charts
![Page 20: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/20.jpg)
Closing RemarksClosing Remarks
……and Please complete an and Please complete an
evaluation evaluation
![Page 21: Jason.O Keefe.Genuitec.Presentation.Final](https://reader036.vdocuments.site/reader036/viewer/2022062617/54b7ae9a4a79590e468b469f/html5/thumbnails/21.jpg)
Questions?Questions?