Cross platform mobile web apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Cross platform mobile web apps

on

  • 33,768 views

 

Statistics

Views

Total Views
33,768
Views on SlideShare
33,390
Embed Views
378

Actions

Likes
34
Downloads
272
Comments
2

14 Embeds 378

http://albertobissacco.org 128
http://blogs.intuit.com 70
http://lanyrd.com 55
http://paper.li 34
http://www.techgig.com 21
http://twitter.com 18
http://us-w1.rockmelt.com 16
http://tweetedtimes.com 10
http://www.nelling0o0.com 9
https://twitter.com 8
http://sogvsuperstars.wikispaces.com 6
http://www.onlydoo.com 1
http://ger.nl 1
http://trunk.ly 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Here a exemple html5, css3, javascript web app who look like a native app http://itabbar.com
    Are you sure you want to
    Your message goes here
    Processing…
  • This is a good presentation.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cross platform mobile web apps Presentation Transcript

  • 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