Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5 and the dawn of rich mobile web applications

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 98 Ad

HTML5 and the dawn of rich mobile web applications

Download to read offline

HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.

HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to HTML5 and the dawn of rich mobile web applications (20)

Advertisement

Recently uploaded (20)

HTML5 and the dawn of rich mobile web applications

  1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. HTML5 and the dawn of rich mobile web applications
  3. or
  4. Everything I know about HTML5 I learned from
  5. How Mobile Rolls
  6. 2008
  7. We must have an iPhone App!
  8. 2010
  9. We must have an Android App!
  10. 2011
  11. omfg
  12. JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft Palm Obj-C Java C++ Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  13. J2ME C# RIM C Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010 http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
  14. Device diversity
  15. App Stores Updates
  16. The Promise of Web Technologies
  17. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... Mobile: the next era of the web as we know it
  18. http://www.victoriassecret.com
  19. http://mobile.victoriassecret.com
  20. The mobile web is not a 320px web
  21. (“responsive web design”)
  22. The Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood ... But wait! Weren’t we talking about apps?
  23. Hypothesis: Web technologies are a viable alternative to native development
  24. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  25. -webkit accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  26. this is uncanny
  27. A New Mobile App Stack WebFonts Video Audio Graphics Device Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX Javascript Contacts Events SMS Semantic HTML Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing
  28. Rich Media & StylingO RM TF LA Full Resource PP P Access A RN ParallelDProcessing E O M Communication Inter-AppTE LE P O ine Capability C Full OM
  29. Web technologies are a viable alternative to native development
  30. Caveats? Performance Browser support Device access All less of a issue than you might think Discoverability Monetization App ‘experience’
  31. Progressive enhancement
  32. assumption HTML JS CSS progressive enhancement app doc vs assumption HTML JS CSS app
  33. State of the Art: Mobile HTML5
  34. Environments ?
  35. Browsers WebKit FOEs
  36. HTML5 support IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2 @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  37. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
  38. Enter The Framework
  39. Why use a framework? Provide user interface components Smooth browser inconsistencies Mimic native or server paradigms Create consistent application architectures ...and more
  40. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  41. jQTouch UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsers http://jQTouch.com
  42. jQTouch Scripts & stylesheets CSS classes for semantics & config
  43. jQuery Mobile (alpha) UI layer on top of jQuery Declarative HTML Library progressively enhances Browsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOS http://jquerymobile.com
  44. jQuery Mobile Scripts & stylesheet data-* for semantics & config
  45. Sencha Touch Self-contained library Programmatic Javascript Standalone MVC applications Browsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7* http://sencha.com/touch * to come
  46. Sencha Touch Data model & records Programmatically create toolbar & list
  47. What’s in a good framework? Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework
  48. Components Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video - GeoLocation
  49. Theming Use CSS3 & SASS - Flexible themes - Highly optimized
  50. Forms
  51. Scrolling Momentum/bounce physics Hardware accelerated Throughout all components: - Lists - Carousel - Pickers
  52. Touch Events Built on native events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
  53. Data Package Models, Stores, and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL
  54. “The Kitchen Sink” http://sencha.com/x/5e
  55. Implementing Mobile Web Sites|Apps
  56. Evolving sites for mobile Views HTML, CSS... Controllers Models
  57. Evolving sites for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  58. Mobile detection class ApplicationController < ActionController::Base has_mobile_fu end *.mobile.erb is_mobile_device? in_mobile_view? https://github.com/brendanlim/mobile-fu
  59. Smart detection & user choice “Switch to our desktop site”
  60. Thematic consistency w3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
  61. Mobile switching http://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2
  62. Then to an app... Desktop Switchers Mobile REST Controllers JSO N Models
  63. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  64. The stack of the present req/res User interface Rendering Business logic Storage
  65. The stack of the future User interface sync Security Business logic Storage Storage The return of the thick client!
  66. Do we have time for some code?
  67. Brand consistency
  68. Getting help from the cloud http://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  69. Mobile devices are di erent Geolocation Telephony Camera Messaging And mobile users are different too!
  70. Going Hybrid
  71. PhoneGap A platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
  72. +
  73. Full API list: Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notification Events Storage http://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap
  74. PhoneGap Build
  75. A word about app stores (pssst: they’re an admission of defeat)
  76. Doing mobile right Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats apply Web technologies are a viable alternative to native apps
  77. built with Apps vs Web technology
  78. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×