HTML5 and the dawn of rich mobile web applications         @ jamespearce
Part IMobile & HTML5
Sir Isaac Newton
Three Laws of Motion(the universe works as we might expect it to)
Albert Michelson   Edward Morley
Light Travels at a        Constant Speed(the universe doesn’t work as we thought it would)
Relativistic Mechanics   Exploration  Classical Mechanics    Familiarity Quantum Mechanics       Exploration
The Web Today    is likePhysics in 1900
Mobileis our Michelson-Morley       Experiment
Mobile Context?     One Web? Responsive Design?   Apps or Sites?(an inability to answer these questions does not constitut...
Responsive Web Design
@media screen and (max-width: 480px) {  #logo {    background-image: url(mobile.png);  }}
Mobile devices are di erent        Telephone     Messaging      Camera   Compass Mobile users are di erent
Content-Type: application/msword
The Mobile Web    is not a  320px Web
Single device            Multi deviceSedentary user            Mobile user                                 *Declarative   ...
A badge for all these ways   the web is changing
HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while a...
What is an app?
2008We must have an iPhone App!
2009We must have an Android App!
2010We must have an   iPad App!
2011We must have a...
omfg
What is an app?
Consumption vs Creation      Linkability    User Experience     Architecture
WebCompromise             sites                     Web                     apps                             Native       ...
WebFont        Video      Audio     GraphicsDevice Access  Camera                   CSS Styling & Layout                Ne...
The web is now as much         a stack   as it is a medium
MS        RIM                        Symbian     Apple              AndroidTop European Smartphone Platforms   July 2011, ...
.NET           J2ME                            C++        Obj-C                   JavaNative programming languages you’ll ...
IE    WebKit                      WebKitWebKit             WebKitBrowser platforms to target         July 2011
There is no WebKit on Mobile                        - @ppk
But at least we are using     one language,      one markup,    one style system
IE 10 PR   Chrome 10   Safari 5   Firefox 4   iOS4.31   Playbook   Honeycomb            @font-face                 CanvasH...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
100%Support          Browsers                     Capabilities & specifications
100%Support          Browsers         Polyfills Frameworks                     Capabilities & specifications
<!DOCTYPE html><html>    <head>        <title>jQuery Mobile</title>        <script src="jq.js"></script><script src="jqm.j...
<!DOCTYPE html><html>    <head>        <title>Sencha Touch</title>        <script src="st.js"></script>        <link rel="...
Evolving the web for mobile    Views                HTML, CSS...  Controllers   Models
Evolving the web for mobile             Desktop  Switcher                       HTML, CSS...              Mobile    Contro...
Evolving the web for mobile              Desktop  Switchers               Mobile               REST                       ...
The classic web stack                 req/resUser interface             RenderingBusiness logic   Storage
A new web stack                   User interface            syncSecurity           Business logicStorage               Sto...
Write once,run anywhere?
The Mobile Web    is not a  320px Web
Views                 Views        Controllers         Models          Stores         Proxies          n        jso
http://sencha.com/x/cv
Thick client, thin serverThe shortfall in the cloud
Location Services        Adaptation                         Analytics   Web Fonts                                   Data S...
http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
Myths & rumors
HTML5 apps can’t  run o ine(hybrid, appcache, and localStorage...)
Going o inehttp://github.com/jamesgpearce/confess
HTML5 apps can’t match  native performance       (true, sometimes)
HTML5 apps can’t be   monetized  (is this a technology problem?)
HTML5 apps are more e cient to develop (yes, in theory, but diversity remains)
24 dev-months          for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
12 further dev-monthsfor Android & BlackBerry  http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
...but moreengagementthanthe native app
WebCompromise             sites                     Web                     apps                            Hybrid        ...
Camera       WebFont        Video      Audio     Graphics                                                              HTT...
WebView Camera       WebFont        Video      Audio     Graphics                                                         ...
Native Wrapper                                         WebView Camera       WebFont        Video      Audio     Graphics  ...
Native app storeshave a dirty secret
built withApps vs web technology
James Pearce@ jamespearce
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
Upcoming SlideShare
Loading in...5
×

HTML5 and the dawn of rich mobile web applications pt 1

19,412

Published on

Published in: Technology, Design
5 Comments
34 Likes
Statistics
Notes
  • good information was shared.nice
    sharepoint training institute in hyderabad

    msbi training institute in hyderabad
       Reply 
    Are you sure you want to  Yes  No
    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
       Reply 
    Are you sure you want to  Yes  No
    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Can we hear the audio?!
       Reply 
    Are you sure you want to  Yes  No
    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.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
19,412
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
226
Comments
5
Likes
34
Embeds 0
No embeds

No notes for slide

HTML5 and the dawn of rich mobile web applications pt 1

  1. 1. HTML5 and the dawn of rich mobile web applications @ jamespearce
  2. 2. Part IMobile & HTML5
  3. 3. Sir Isaac Newton
  4. 4. Three Laws of Motion(the universe works as we might expect it to)
  5. 5. Albert Michelson Edward Morley
  6. 6. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  7. 7. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  8. 8. The Web Today is likePhysics in 1900
  9. 9. Mobileis our Michelson-Morley Experiment
  10. 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. 11. Responsive Web Design
  12. 12. @media screen and (max-width: 480px) { #logo { background-image: url(mobile.png); }}
  13. 13. Mobile devices are di erent Telephone Messaging Camera Compass Mobile users are di erent
  14. 14. Content-Type: application/msword
  15. 15. The Mobile Web is not a 320px Web
  16. 16. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  17. 17. A badge for all these ways the web is changing
  18. 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. 19. What is an app?
  20. 20. 2008We must have an iPhone App!
  21. 21. 2009We must have an Android App!
  22. 22. 2010We must have an iPad App!
  23. 23. 2011We must have a...
  24. 24. omfg
  25. 25. What is an app?
  26. 26. Consumption vs Creation Linkability User Experience Architecture
  27. 27. WebCompromise sites Web apps Native apps Nativeness
  28. 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. 29. The web is now as much a stack as it is a medium
  30. 30. MS RIM Symbian Apple AndroidTop European Smartphone Platforms July 2011, comScore MobiLens
  31. 31. .NET J2ME C++ Obj-C JavaNative programming languages you’ll need July 2011
  32. 32. IE WebKit WebKitWebKit WebKitBrowser platforms to target July 2011
  33. 33. There is no WebKit on Mobile - @ppk
  34. 34. But at least we are using one language, one markup, one style system
  35. 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. 36. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  37. 37. 100%Support Browsers Capabilities & specifications
  38. 38. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  39. 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. 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. 41. Evolving the web for mobile Views HTML, CSS... Controllers Models
  42. 42. Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  43. 43. Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
  44. 44. The classic web stack req/resUser interface RenderingBusiness logic Storage
  45. 45. A new web stack User interface syncSecurity Business logicStorage Storage
  46. 46. Write once,run anywhere?
  47. 47. The Mobile Web is not a 320px Web
  48. 48. Views Views Controllers Models Stores Proxies n jso
  49. 49. http://sencha.com/x/cv
  50. 50. Thick client, thin serverThe shortfall in the cloud
  51. 51. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  52. 52. http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
  53. 53. Myths & rumors
  54. 54. HTML5 apps can’t run o ine(hybrid, appcache, and localStorage...)
  55. 55. Going o inehttp://github.com/jamesgpearce/confess
  56. 56. HTML5 apps can’t match native performance (true, sometimes)
  57. 57. HTML5 apps can’t be monetized (is this a technology problem?)
  58. 58. HTML5 apps are more e cient to develop (yes, in theory, but diversity remains)
  59. 59. 24 dev-months for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  60. 60. 12 further dev-monthsfor Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  61. 61. ...but moreengagementthanthe native app
  62. 62. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  63. 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. 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. 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. 66. Native app storeshave a dirty secret
  67. 67. built withApps vs web technology
  68. 68. James Pearce@ jamespearce
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×