Cross platform mobile web apps

35,798 views
35,043 views

Published on

Published in: Technology
2 Comments
35 Likes
Statistics
Notes
  • Here a exemple html5, css3, javascript web app who look like a native app http://itabbar.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This is a good presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
35,798
On SlideShare
0
From Embeds
0
Number of Embeds
384
Actions
Shares
0
Downloads
284
Comments
2
Likes
35
Embeds 0
No embeds

No notes for slide

Cross platform mobile web apps

  1. Cross-platformmobile web apps @ jamespearce
  2. Sir Isaac Newton
  3. Three Laws of Motion(the universe works as we might expect it to)
  4. Albert Michelson Edward Morley
  5. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  6. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  7. The Web Today is likePhysics in 1900
  8. Mobileis our Michelson-Morley Experiment
  9. Mobile Context? One Web? Responsive Design? Apps or Sites?(an inability to answer these questions does not constitute an excuse not to innovate)
  10. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  11. A badge for all these ways the web is changing
  12. Cross-platformmobile web apps
  13. What is an app?
  14. Consumption vs Creation Linkability User Experience Architecture
  15. WebCompromise sites Web apps Native apps Nativeness
  16. 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
  17. 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)
  18. The web is now as much a stack as it is a medium
  19. Cross-platformmobile web apps
  20. MS RIM Symbian Apple AndroidTop European Smartphone Platforms July 2011, comScore MobiLens
  21. .NET J2ME C++ Obj-C JavaNative programming languages you’ll need July 2011
  22. IE WebKit WebKitWebKit WebKitBrowser platforms to target July 2011
  23. There is no WebKit on Mobile - @ppk
  24. But at least we are using one language, one markup, one style system
  25. 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
  26. 100%Support Browsers Capabilities & specifications
  27. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  28. <!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>
  29. <!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>
  30. Myth busting
  31. HTML5 apps can’t run o ine(hybrid, appcache, and localStorage...)
  32. HTML5 apps can’t match native performance (true, sometimes)
  33. HTML5 apps can’t be monetized (is this a technology problem?)
  34. HTML5 apps can’t access device functionality (weren’t you listening to Brian?)
  35. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  36. 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
  37. 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
  38. 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
  39. Native app storeshave a dirty secret
  40. built withApps vs web technology
  41. Well-established hierarchies are not easily uprooted;Closely held beliefs are not easily released;So ritual enthralls generation after generation. Tao Te Ching; 38 Ritual
  42. James Pearce@ jamespearce

×