Jason.O Keefe.Genuitec.Presentation.Final

2,307 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,307
On SlideShare
0
From Embeds
0
Number of Embeds
81
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jason.O Keefe.Genuitec.Presentation.Final

  1. 1. Web. Smartphone. Future. Now Mobile Web Development Presented by Jason O’Keefe, Senior Mobile Advocate at
  2. 2. Mobile Kicks A**
  3. 3. … But Who’s your Daddy?! · AT&T, Sprint, Verizon Wireless, T-Mobile, MetroPCS · Palm, Nokia, Apple, Motorola, RIM, Samsung, LG · Windows Mobile, iPhone OS, WebOS, Blackberry OS, Symbian
  4. 4. The Web is a developer's future <ul><li>Why no more suckage? </li></ul><ul><li>HTML5 (incl. CSS3, JavaScript) </li></ul><ul><li>WebKit Browser Engine </li></ul><ul><li>iPhone + Mobile Safari </li></ul><ul><li>App Store* </li></ul><ul><li>Services*: Geolocation, Camera, Photos, Contacts, Phone </li></ul><ul><li>High performance JavaScript Engines </li></ul><ul><li>Smartphones: Android, Blackberry, Nokia, LG, Samsung </li></ul>The Mobile Web… Sucks No More
  5. 5. HTML5 vs. Native - How they Size Up
  6. 6. Show me the Code <ul><li>Geolocation </li></ul><ul><li>CSS3 </li></ul><ul><li>Local Database </li></ul><ul><li>UI Frameworks </li></ul><ul><li>HTML5 Offline Support with AppCache </li></ul><ul><li>PhoneGap  </li></ul>
  7. 7. Geolocation Example
  8. 8. CSS 3 – Declarative Awesomeness <ul><li>Easier to create complex visual effects </li></ul><ul><li>Greater layout flexibility </li></ul><ul><li>Animation via transformations </li></ul><ul><li>Hardware acceleration  </li></ul><ul><li>Mobile browser early adoption </li></ul>
  9. 9. CSS 3 - Backgrounds & Borders <ul><li>Example 1: CSS 3 Button </li></ul><ul><li>CSS3 properties used </li></ul><ul><li>- border-radius </li></ul><ul><li>- box-shadow </li></ul><ul><li>- text-shadow </li></ul><ul><li>- gradients </li></ul>
  10. 10. CSS 3 - Advanced Graphics <ul><li>Example #2: 2D Transformation </li></ul>
  11. 11. Web Database - Native SQL Services <ul><li>Native browser database storage </li></ul><ul><li>SQLite reference implementation </li></ul><ul><li>Transactions </li></ul><ul><li>5Mb default size </li></ul><ul><li>Makes offline possible </li></ul><ul><li>Web dev gets balls </li></ul>
  12. 12. UI Frameworks for Mobile Web <ul><li>What? </li></ul><ul><li>Styling, native look and feel </li></ul><ul><li>Form input </li></ul><ul><li>User events, swipe, touch, orientation </li></ul><ul><li>Examples of iPhone frameworks   </li></ul><ul><li>iUI - code.google.com/p/iui </li></ul><ul><li>jQTouch - www.jqtouch.com </li></ul><ul><li>WebApp.Net - webapp-net.com </li></ul><ul><li>iWebKit - www.iwebkit.net </li></ul><ul><li>iphone-universal - code.google.com/p/iphone-universal </li></ul><ul><li>Magic - www.jeffmcfadden.com/projects/Magic%20Framework </li></ul>
  13. 13. UI Frameworks Demo Example #1: Menus
  14. 14. UI Frameworks Demo Example #2: Forms
  15. 15. HTML5 Offline Support - AppCache <ul><li>iPhone & Android, others?  </li></ul><ul><li>Offline HTTP caching mechanism </li></ul><ul><ul><li>Define resources to cache via Manifest file </li></ul></ul><ul><ul><li>Manifest MIME type: text/cache-manifest </li></ul></ul>myapp.manifest file
  16. 16. Offline Example index.html
  17. 17. Hybrid Mobile Web Applications <ul><li>Mobile web does not solve application requirements for: </li></ul><ul><li>AppStore-readiness </li></ul><ul><li>Native services or sensor access </li></ul><ul><li>Hardware optimization </li></ul><ul><li>Consider hybrid mobile web framework: </li></ul><ul><li>Package mobile web app as native app </li></ul><ul><li>API for services and sensors </li></ul><ul><li>Hooks to custom native feature implementation </li></ul><ul><li>Frameworks </li></ul><ul><li>PhoneGap </li></ul><ul><li>Big5 </li></ul><ul><li>Rhomobile </li></ul><ul><li>Appcelerator </li></ul>
  18. 18. PhoneGap Demo Example #1: Accelerometer/Notification
  19. 19. Carrier, App Store and the Web   *Credit to Jason Grigsby, Cloud Four blog for charts
  20. 20. Closing Remarks <ul><li>… and Please complete an evaluation  </li></ul>
  21. 21. Questions?

×