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.
James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
HTML5 and the dawn of rich mobile web applications
or
Everything I know about HTML5 I learned from
How Mobile Rolls
2008
We must have an iPhone App!
2010
We must have an Android App!
2011
omfg
JS C# Palm J2ME Microsoft RIM RIM Android ...
J2ME C# RIM C Microsoft Nokia Python ...
Device diversity
App Stores Updates
The Promise ofWeb Technologies
The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... Mobi...
http://www.victoriassecret.com
http://mobile.victoriassecret.com
Themobile web is not a320px web
(“responsive web design”)
The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... ...
Hypothesis: Web technologies are a viable alternativeto native development
The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates API...
-webkit accelerometer @page localStorage ...
this is uncanny
A New Mobile App Stack WebFonts Video Audio GraphicsDevice Access ...
Rich Media & StylingO RM TF LA Full Resource PP P Access ...
Web technologies are a viable alternativeto native development
Caveats?PerformanceBrowser supportDevice access All less of a issue than you might thinkDiscove...
Progressive enhancement
assumption HTML JS CSS progressive enhancement ...
State of the Art: Mobile HTML5
Environments ?
Browsers WebKit FOEs
HTML5 support IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2@font-fa...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
Enter The Framework
Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate ...
Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs ...
jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBer...
jQTouch Scripts & stylesheets CSS classes for semantics & config
jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) An...
jQuery Mobile Scripts & stylesheet data-* for semantics & config
Sencha TouchSelf-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android Bl...
Sencha Touch Data model & records Programmatically create toolbar & l...
What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMV...
ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- G...
ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
Forms
ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotat...
Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON...
“The Kitchen Sink” http://sencha.com/x/5e
Implementing Mobile Web Sites|Apps
Evolving sites for mobile Views HTML, CSS... Controllers Models
Evolving sites for mobile DesktopSwitcher HTML, CSS... Mobile Controllers ...
Mobile detectionclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mo...
Smart detection & user choice“Switch to our desktop site”
Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2
Then to an app... DesktopSwitchers Mobile REST Controllers JSO ...
Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
The stack of the present req/resUser interface RenderingBusiness logic Storage
The stack of the future User interface syncSecurity Business logicStorage ...
Do we have time for some code?
Brand consistency
Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
Mobile devices are di erent Geolocation Telephony Camera Messag...
Going Hybrid
PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs ...
+
Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice N...
PhoneGap Build
A word about app stores (pssst: they’re an admission of defeat)
Doing mobile right Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats app...
built withApps vs Web technology
James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
Upcoming SlideShare
Loading in …5
×

HTML5 and the dawn of rich mobile web applications

32,916 views

Published on

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.

Published in: Technology
no profile picture user
  • 1 Weird Diet Trick Heals Vitiligo Fast ▶▶▶ https://bit.ly/3kTNHDZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 1 Weird Diet Trick Eliminates Vitiligo ✔✔✔ https://j.mp/3kTNHDZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Free Video Reveals 1 Weird Trick To Heal Vitiligo Forever! Click Here: ☀☀☀ https://j.mp/3kTNHDZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 1 Weird Diet Trick Heals Vitiligo Fast ❤❤❤ https://bit.ly/3kTNHDZ
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you’re looking for a great essay service then you should check out ⇒ www.WritePaper.info ⇐. A friend of mine asked them to write a whole dissertation for him and he said it turned out great! Afterwards I also ordered an essay from them and I was very happy with the work I got too.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
Show More
Show More

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 AppleApple Air Microsoft PalmObj-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 2010http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
  14. Device diversity
  15. App Stores Updates
  16. The Promise ofWeb Technologies
  17. The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... Mobile: the next era of the web as we know it
  18. http://www.victoriassecret.com
  19. http://mobile.victoriassecret.com
  20. Themobile web is not a320px web
  21. (“responsive web design”)
  22. The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... But wait! Weren’t we talking about apps?
  23. Hypothesis: Web technologies are a viable alternativeto 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 manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  26. this is uncanny
  27. A New Mobile App Stack WebFonts Video Audio GraphicsDevice 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 CommunicationInter-AppTE LE P O ine Capability C Full OM
  29. Web technologies are a viable alternativeto native development
  30. Caveats?PerformanceBrowser supportDevice access All less of a issue than you might thinkDiscoverabilityMonetizationApp ‘experience’
  31. Progressive enhancement
  32. assumption HTML JS CSS progressive enhancement app doc vs assumptionHTML 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-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
  37. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  38. Enter The Framework
  39. Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate 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. jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsershttp://jQTouch.com
  42. jQTouch Scripts & stylesheets CSS classes for semantics & config
  43. jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com
  44. jQuery Mobile Scripts & stylesheet data-* for semantics & config
  45. Sencha TouchSelf-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: 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 & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  48. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  49. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  50. Forms
  51. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  52. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  53. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily 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 DesktopSwitcher HTML, CSS... Mobile Controllers Models
  58. Mobile detectionclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
  59. Smart detection & user choice“Switch to our desktop site”
  60. Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
  61. Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2
  62. Then to an app... DesktopSwitchers 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/resUser interface RenderingBusiness logic Storage
  65. The stack of the future User interface syncSecurity Business logicStorage Storage The return of the thick client!
  66. Do we have time for some code?
  67. Brand consistency
  68. Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  69. Mobile devices are di erent Geolocation Telephony Camera MessagingAnd mobile usersare different too!
  70. Going Hybrid
  71. PhoneGapA 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 FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://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 applyWeb technologies are a viable alternative to native apps
  77. built withApps vs Web technology
  78. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×