Upgrade to Pro — share decks privately, control downloads, hide ads and more …

(short) Intro to Mobile Web App Dev

(short) Intro to Mobile Web App Dev

Presentation at the GOTO Berlin 2013 conference.

Adrian Kosmaczewski

October 17, 2013

More Decks by Adrian Kosmaczewski

Other Decks in Technology


  1. update frequency usage frequency UI complexity native apps web apps

    games calculator business apps reports compatibility with other mobile platforms
  2. Browsers Browser Share Safari 54% Android 22% Opera Mini 7%

    Chrome 7% BlackBerry 2% http://www.netmarketshare.com/browser-market-share.aspx?qprid=1&qpcustomb=1
  3. http://www.w3.org/2011/02/mobile-web-app-state.html SVG CSS3 WOFF Canvas CSS 3D CSS Animations <video>

    <audio> <input type="email"> Touch events in DOM HTML Speech Web Storage Contacts API Calendar API File Writer API Geolocation API XMLHttpRequest Websockets Messaging API Application Cache HTML5 Web Workers
  4. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;

    user- scalable=0;"/> <link rel="apple-touch-icon" href="iui-logo-touch- icon.png" /> <meta name="apple-touch-fullscreen" content="YES" /> <style type="text/css" media="screen"> @import "iui.css"; </style> <script type="application/x-javascript" src="iui.js"></script> </head>
  5. <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a

    class="button" href="#searchForm">Search</a> </div> <ul id="home" title="Music" selected="true"> <li><a href="#artists">Artists</a></li> <li><a href="#settings">Settings</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li> <li>Nothing</li> </ul> <ul id="artists" title="Artists"> <li class="group">B</li> <li><a href="#TheBeatles">The Beatles</a></li> <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li> <li class="group">C</li> <li><a href="#CrowdedHouse">Crowded House</a></li> <li class="group">J</li> <li><a href="#JennyLewis">Jenny Lewis</a></li> <li><a href="#JohnMayer">John Mayer</a></li> <li class="group">Z</li> <li><a href="#Zero7">Zero 7</a></li> </ul>
  6. Slides created on Keynote for iPad No web app framework

    was harmed during this presentation This presentation is released under a Creative Commons Attribution-No Derivative Works 3.0 Unported License http://creativecommons.org/licenses/by-nd/3.0/