Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Jason.O Keefe.Genuitec.Presentation.Final

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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?

    Als Erste(r) kommentieren

    Loggen Sie sich ein, um Kommentare anzuzeigen.

Aufrufe

Aufrufe insgesamt

2.441

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

81

Befehle

Downloads

42

Geteilt

0

Kommentare

0

Likes

0

×