• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 and the dawn of rich mobile web applications pt 1
 

HTML5 and the dawn of rich mobile web applications pt 1

on

  • 18,968 views

 

Statistics

Views

Total Views
18,968
Views on SlideShare
18,630
Embed Views
338

Actions

Likes
34
Downloads
219
Comments
5

11 Embeds 338

http://paper.li 141
http://a0.twimg.com 69
http://us-w1.rockmelt.com 38
http://lanyrd.com 33
http://thenativeapp.com 27
http://www.techgig.com 22
http://www.linkedin.com 3
https://si0.twimg.com 2
https://twimg0-a.akamaihd.net 1
http://blog.slideshare.net 1
http://slideclip.b-prep.com 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

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
  • 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
    Processing…
  • @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
    Processing…
  • Can we hear the audio?!
    Are you sure you want to
    Your message goes here
    Processing…
  • 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
    Processing…
Post Comment
Edit your comment

    HTML5 and the dawn of rich mobile web applications pt 1 HTML5 and the dawn of rich mobile web applications pt 1 Presentation Transcript

    • 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 constitute an excuse not to innovate)
    • 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 ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
    • 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 at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki
    • 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 apps Nativeness
    • 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)
    • The web is now as much a stack as it is a medium
    • MS RIM Symbian Apple AndroidTop European Smartphone Platforms July 2011, comScore MobiLens
    • .NET J2ME C++ Obj-C JavaNative programming languages you’ll need July 2011
    • 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 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
    • 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.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>
    • <!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>
    • Evolving the web for mobile Views HTML, CSS... Controllers Models
    • Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
    • Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
    • The classic web stack req/resUser interface RenderingBusiness logic Storage
    • A new web stack User interface syncSecurity Business logicStorage Storage
    • 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 SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
    • 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 apps Native apps Nativeness
    • 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
    • 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
    • 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
    • Native app storeshave a dirty secret
    • built withApps vs web technology
    • James Pearce@ jamespearce