Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Download as KEY, PDF65 likes68,410 views
The document discusses the evolution of mobile web applications, emphasizing HTML5 as a viable alternative to native development. It highlights the importance of responsive design and cross-platform standards while exploring various web technologies and frameworks for building mobile applications. Additionally, it addresses challenges such as performance, browser support, and user experience in the context of mobile development.
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
- 1. HTML5 and the dawn of rich mobile web applications SENCHA: HTML5 SVUG April 2011
- 2. 2008
- 3. We must have an iPhone App!
- 7. 2010
- 8. We must have an Android App!
- 11. 2011
- 12. OMG
- 13. Palm Microsoft RIM RIM Android Apple Apple Microsoft Palm Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
- 14. JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft Palm Obj-C Java Android C++ Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
- 15. J2ME C# RIM C/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
- 16. J2ME C# RIM C/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/
- 19. Device diversity
- 20. The Promise of Web Technologies
- 21. The Web Cross-platform Standards-process Familiar skills & tools Decentralized Easily updated Indexed Well-understood ...
- 22. The Web Cross-platform Standards-process Familiar skills & tools Decentralized Easily updated Indexed Mobile: the next era of Well-understood the web as we know it ...
- 25. The mobile web is not a 320px web
- 30. Hypothesis: Web technologies are a viable alternative to native development
- 31. The Web is Evolving...
- 32. The Web is Evolving... Documents Applications
- 33. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM
- 34. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs
- 35. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments
- 36. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization
- 37. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 39. "If you write Web-based applications, I would be interested in hearing about what your needs are. Please let me know" Ian Hickson 2004 WhatWG “Founding Post”
- 40. -webkit accelerometer @page localStorage CSS Text @media manifest transform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
- 43. A New Mobile App Stack CSS Styling & Layout Javascript Semantic HTML
- 44. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML
- 45. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems DBs App Cache
- 46. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker DBs Parallel App Cache Processing
- 47. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker x-App DBs Parallel Messaging App Cache Processing
- 48. A New Mobile App Stack WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Location Javascript Contacts SMS Semantic HTML Orientation File Systems Worker x-App Gyro DBs Parallel Messaging App Cache Processing
- 49. A New Mobile App Stack WebFont 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
- 50. Rich Media & Styling Full Resource Access Parallel Processing Inter-App Communication Full Offline Capability
- 51. Rich Media & Styling R M F O A T Full Resource Access P L A PP Parallel ProcessingRN D E Inter-App M O T E Communication Full P LE M O Offline Capability C
- 55. Web technologies are a viable alternative to native development
- 56. Caveats? Performance Browser support Device access Discoverability Monetization App ‘experience’
- 57. Caveats? Performance Browser support Device access All less of a issue than you might think Discoverability Monetization App ‘experience’
- 59. assumption HTML doc
- 60. assumption HTML JS CSS progressive enhancement app doc
- 61. assumption HTML JS CSS progressive enhancement app doc assumption HTML JS CSS app
- 62. assumption HTML JS CSS progressive enhancement app doc vs assumption HTML JS CSS app
- 63. State of the Art: Mobile HTML5
- 64. Environments ?
- 65. Browsers WebKit Others
- 66. HTML5 Support: Edge IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb @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
- 67. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com Wikipedia Comparison of Layout Engines
- 69. Why use a framework? Provide user interface components Smooth browser inconsistencies Mimic native or server paradigms Create consistent application architectures ...and more
- 70. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 71. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
- 72. 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
- 73. jQTouch Scripts & stylesheets CSS classes for semantics & config
- 74. 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
- 75. jQuery Mobile (alpha) Scripts & stylesheet data-* for semantics & config
- 76. Sencha Touch Self-contained library Programmatic Javascript UI Declared via JSON Standalone MVC applications Browsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7* * to come
- 77. Sencha Touch Data model & records Programmatically create toolbar & list
- 78. What’s in a good Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework
- 79. Components Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video - GeoLocation
- 80. Theming Use CSS3 & SASS - Flexible themes - Highly optimized
- 81. Forms
- 82. Scrolling Momentum/bounce physics Hardware accelerated Throughout all components: - Lists - Carousel - Pickers
- 83. Touch Events Built on native events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
- 84. Data Package Models, Stores, and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL
- 85. “The Kitchen Sink” http://sencha.com/x/5e
- 86. Implementing Mobile Web Sites|Apps
- 87. Evolving sites for mobile Views HTML, CSS... Controlle Models
- 88. Evolving sites for mobile Deskto HTML, Switcher CSS... Mobile Controlle Models
- 89. Mobile detection class ApplicationController < ActionController::Base has_mobile_fu end *.mobile.erb is_mobile_device? in_mobile_view? https://github.com/brendanlim/mobile-fu
- 90. Smart detection & user choice “Switch to our desktop site”
- 91. www.xkcd.com
- 94. Thematic consistency w3c-speak http://mysite.com/posts/123
- 95. Thematic consistency w3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
- 96. Mobile switching http://tinyurl.com/mobswi1 http://tinyurl.com/ mobswi2
- 97. Then to an app... Deskto Switchers Mobile REST JSO Controlle N Models
- 98. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
- 99. The stack of the present req/res User Rendering Business Storage
- 100. The stack of the future User sync Security Business Storage Storage
- 101. The stack of the future User sync Security Business Storage Storage The return of the thick client!
- 102. Brand consistency
- 103. Brand consistency
- 104. Brand consistency
- 105. Getting help from the cloud http://i.tinysrc.mobi/http://mysite.com/ myimage.png http://tinysrc.net/
- 106. Mobile devices are different Geolocation Telephon y Camera Messaging
- 107. Mobile devices are different Geolocation Telephon y Camera Messaging And mobile users are different too!
- 108. Going Hybrid
- 109. PhoneGap, Nimblekit, Libraries that allows you to author native applications with web technologies and get access to device APIs
- 110. +
- 111. Full API list: Accelerometer File Camera Geolocation Compass Media Contacts Network Device Notification Events Storage http://docs.phonegap.com
- 112. 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
- 113. Doing mobile right
- 114. Doing mobile right Everyone loves apps - but native diversity sucks
- 115. Doing mobile right Everyone loves apps - but native diversity sucks This is the year of the mobile web - but caveats apply
- 116. Doing mobile right Everyone loves apps - but native diversity sucks This is the year of the mobile web - but caveats apply HTML5 makes web tech a viable alternative to native apps
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: \n
- #70: \n
- #71: \n
- #72: \n
- #73: \n
- #74: \n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n
- #88: \n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n
- #98: \n
- #99: \n
- #100: \n
- #101: \n