HTML5 and the dawn of rich mobile web applications pt 1

  • 18,731 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • good information was shared.nice
    sharepoint training institute in hyderabad

    msbi training institute in hyderabad
    Are you sure you want to
    Your message goes here
  • Are you looking beautiful Christmas flowers send for some one special dearest friend you can also free online order so hurry up click this link:http://www.onlineflowersdeliveryuk.co.uk/occasion/christmas-flowers.html
    Are you sure you want to
    Your message goes here
  • @Lea, that's true, of course. I am totally aware of Opera Mini's dominance for 'classic' web browsing. However, it's difficult to talk about it in the context of richer, client-side mobile web apps given that it uses a proxy-based rendering approach: there's no way to run a self-contained JS-based app on it. (jQuery mobile supports progressively enhanced mobile experiences on it, and I mentioned that in the session).

    Opera Mobile of course rocks, but has a relatively small penetration and no (afaik) factory device installations yet.
    Are you sure you want to
    Your message goes here
  • Can we hear the audio?!
    Are you sure you want to
    Your message goes here
  • No mention of the biggest mobile browser (Opera) in a talk about mobile? That's kind of funny. In a bad way.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
18,731
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
222
Comments
5
Likes
34

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 and the dawn of rich mobile web applications @ jamespearce
  • 2. Part IMobile & HTML5
  • 3. Sir Isaac Newton
  • 4. Three Laws of Motion(the universe works as we might expect it to)
  • 5. Albert Michelson Edward Morley
  • 6. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  • 7. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  • 8. The Web Today is likePhysics in 1900
  • 9. Mobileis our Michelson-Morley Experiment
  • 10. Mobile Context? One Web? Responsive Design? Apps or Sites?(an inability to answer these questions does not constitute an excuse not to innovate)
  • 11. Responsive Web Design
  • 12. @media screen and (max-width: 480px) { #logo { background-image: url(mobile.png); }}
  • 13. Mobile devices are di erent Telephone Messaging Camera Compass Mobile users are di erent
  • 14. Content-Type: application/msword
  • 15. The Mobile Web is not a 320px Web
  • 16. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  • 17. A badge for all these ways the web is changing
  • 18. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki
  • 19. What is an app?
  • 20. 2008We must have an iPhone App!
  • 21. 2009We must have an Android App!
  • 22. 2010We must have an iPad App!
  • 23. 2011We must have a...
  • 24. omfg
  • 25. What is an app?
  • 26. Consumption vs Creation Linkability User Experience Architecture
  • 27. WebCompromise sites Web apps Native apps Nativeness
  • 28. WebFont Video Audio GraphicsDevice Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)
  • 29. The web is now as much a stack as it is a medium
  • 30. MS RIM Symbian Apple AndroidTop European Smartphone Platforms July 2011, comScore MobiLens
  • 31. .NET J2ME C++ Obj-C JavaNative programming languages you’ll need July 2011
  • 32. IE WebKit WebKitWebKit WebKitBrowser platforms to target July 2011
  • 33. There is no WebKit on Mobile - @ppk
  • 34. But at least we are using one language, one markup, one style system
  • 35. IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb @font-face CanvasHTML5 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 hashchangeX-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  • 36. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  • 37. 100%Support Browsers Capabilities & specifications
  • 38. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  • 39. <!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
  • 40. <!DOCTYPE html><html> <head> <title>Sencha Touch</title> <script src="st.js"></script> <link rel="stylesheet" href="st.css" /> <script type="text/javascript" charset="utf-8"> new Ext.Application({ launch: function() { var continents = new Ext.data.Store({ model: Ext.regModel(, {fields: [name, link]}), data: [ {name: North America, link:na}, {name: South America, link:sa}, {name: Europe, link:eu} ] }); new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: toolbar, title: Hello World, }], items: [{ xtype: list, store: continents, itemTpl: {name} }] }); } }); </script> </head><body></body></html>
  • 41. Evolving the web for mobile Views HTML, CSS... Controllers Models
  • 42. Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  • 43. Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
  • 44. The classic web stack req/resUser interface RenderingBusiness logic Storage
  • 45. A new web stack User interface syncSecurity Business logicStorage Storage
  • 46. Write once,run anywhere?
  • 47. The Mobile Web is not a 320px Web
  • 48. Views Views Controllers Models Stores Proxies n jso
  • 49. http://sencha.com/x/cv
  • 50. Thick client, thin serverThe shortfall in the cloud
  • 51. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  • 52. http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
  • 53. Myths & rumors
  • 54. HTML5 apps can’t run o ine(hybrid, appcache, and localStorage...)
  • 55. Going o inehttp://github.com/jamesgpearce/confess
  • 56. HTML5 apps can’t match native performance (true, sometimes)
  • 57. HTML5 apps can’t be monetized (is this a technology problem?)
  • 58. HTML5 apps are more e cient to develop (yes, in theory, but diversity remains)
  • 59. 24 dev-months for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  • 60. 12 further dev-monthsfor Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  • 61. ...but moreengagementthanthe native app
  • 62. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  • 63. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 64. WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 65. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  • 66. Native app storeshave a dirty secret
  • 67. built withApps vs web technology
  • 68. James Pearce@ jamespearce