Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
حقائق علمية فوزى
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Jason.O Keefe.Genuitec.Presentation.Final

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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?

Views

Total views

2,452

On Slideshare

0

From embeds

0

Number of embeds

81

Actions

Downloads

42

Shares

0

Comments

0

Likes

0

×