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
×
Technology
36,292 views
Mar. 11, 2011

HTML5 and the dawn of rich mobile web applications

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.

Related Books

Free with a 30 day trial from Scribd

See all
So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community That Will Listen Kristen Meinzer
(5/5)
Free
SAM: One Robot, a Dozen Engineers, and the Race to Revolutionize the Way We Build Jonathan Waldman
(5/5)
Free
The Future Is Faster Than You Think: How Converging Technologies Are Transforming Business, Industries, and Our Lives Peter H. Diamandis
(5/5)
Free
No Filter: The Inside Story of Instagram Sarah Frier
(4.5/5)
Free
Bezonomics: How Amazon Is Changing Our Lives and What the World's Best Companies Are Learning from It Brian Dumaine
(4/5)
Free
Live Work Work Work Die: A Journey into the Savage Heart of Silicon Valley Corey Pein
(4/5)
Free
From Gutenberg to Google: The History of Our Future Tom Wheeler
(2/5)
Free
Talk to Me: How Voice Computing Will Transform the Way We Live, Work, and Think James Vlahos
(3/5)
Free
Future Presence: How Virtual Reality Is Changing Human Connection, Intimacy, and the Limits of Ordinary Life Peter Rubin
(4/5)
Free
Autonomy: The Quest to Build the Driverless Car—And How It Will Reshape Our World Lawrence D. Burns
(5/5)
Free
Life After Google: The Fall of Big Data and the Rise of the Blockchain Economy George Gilder
(4/5)
Free
Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Seth Stephens-Davidowitz
(4/5)
Free
How to Drive: Real World Instruction and Advice from Hollywood's Top Driver Ben Collins
(3.5/5)
Free
Understanding Media: The Extensions of Man Marshall McLuhan
(4/5)
Free
The Art of War Sun Tsu
(3/5)
Free
Uncommon Carriers John McPhee
(4/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
Liftoff: Elon Musk and the Desperate Early Days That Launched SpaceX Eric Berger
(5/5)
Free
Einstein's Fridge: How the Difference Between Hot and Cold Explains the Universe Paul Sen
(4.5/5)
Free
Driven: The Race to Create the Autonomous Car Alex Davies
(4.5/5)
Free
Test Gods: Virgin Galactic and the Making of a Modern Astronaut Nicholas Schmidle
(5/5)
Free
Second Nature: Scenes from a World Remade Nathaniel Rich
(5/5)
Free
Spooked: The Trump Dossier, Black Cube, and the Rise of Private Spies Barry Meier
(5/5)
Free
A World Without Work: Technology, Automation, and How We Should Respond Daniel Susskind
(4.5/5)
Free
Lean Out: The Truth About Women, Power, and the Workplace Marissa Orr
(4/5)
Free
Blockchain: The Next Everything Stephen P Williams
(4/5)
Free
Digital Renaissance: What Data and Economics Tell Us about the Future of Popular Culture Joel Waldfogel
(3.5/5)
Free
User Friendly: How the Hidden Rules of Design Are Changing the Way We Live, Work, and Play Cliff Kuang
(4/5)
Free
Ten Arguments for Deleting Your Social Media Accounts Right Now Jaron Lanier
(4/5)
Free
Bitcoin Billionaires: A True Story of Genius, Betrayal, and Redemption Ben Mezrich
(4.5/5)
Free
The Players Ball: A Genius, a Con Man, and the Secret History of the Internet's Rise David Kushner
(4.5/5)
Free
Cradle to Cradle: Remaking the Way We Make Things Michael Braungart
(4/5)
Free
The Wright Brothers David McCullough
(4.5/5)
Free
no profile picture user

  • Be the first to comment

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

×