$30 off During Our Annual Pro Sale. View Details »

(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. (short) Intro to Mobile Web App Dev Adrian Kosmaczewski -

    Trifork GmbH
  2. Adrian Kosmaczewski

  3. None
  4. Trifork GmbH

  5. trifork.com ako@trifork.com @akotrifork

  6. None
  7. None
  8. http://www.flickr.com/photos/thenovys/3908472000/

  9. Alternatives

  10. http://akosma.com/2009/10/29/iphone-apps-without-objective-c/

  11. http://t2impact.blogspot.com/2010/11/reflections-from-pcw17-november-2010.html

  12. Web or native apps?

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

    games calculator business apps reports compatibility with other mobile platforms
  14. None
  15. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

  16. http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/

  17. 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
  18. WebKit

  19. A family, actually

  20. http://www.quirksmode.org/webkit.html

  21. None
  22. Technologies

  23. http://newvoicesforresearch.blogspot.com/2010_04_01_archive.html

  24. 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
  25. Cross-Browser

  26. Complexity

  27. Frameworks

  28. Pioneer

  29. None
  30. <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>
  31. <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>
  32. None
  33. Establishment

  34. jQuery Mobile Sencha Touch PhoneGap

  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. Custom Frameworks

  43. None
  44. None
  45. Remember

  46. Test in multiple devices

  47. None
  48. Books

  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. Thanks!

  56. Questions?

  57. 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/
  58. Copyright 2013 (c) Trifork GmbH All Rights Reserved.