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

Mobile Web Rising

Mobile Web Rising

Presentation shown in the Mobile Developer Summit 2011 in Bangalore, India, in November 2011.

Adrian Kosmaczewski
PRO

December 27, 2011
Tweet

More Decks by Adrian Kosmaczewski

Other Decks in Programming

Transcript

  1. None
  2. Mobile Web Rising Adrian Kosmaczewski - akosma software

  3. None
  4. http://www.flickr.com/photos/oskay/365607662/

  5. http://www.flickr.com/photos/oskay/365607591/

  6. http://www.flickr.com/photos/blakespot/2379207825/

  7. Objective-C

  8. Cocoa

  9. http://www.flickr.com/photos/thenovys/3908472000/

  10. Alternatives

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

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

  13. Presentation in 2009 http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview

  14. http://akosma.com/2009/12/09/webtuesday-mobile-app-frameworks/

  15. Market

  16. Web

  17. Web or native apps?

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

    games calculator business apps reports compatibility with other mobile platforms
  19. Web Application Native Application Pros Cons Simpler deployment and updates;

    known technologies, cheaper to maintain; access to GPS information; basic offline support; cross-platform Faster execution; access to address book, accelerometer, audio and camera; App Store; 3D games and animations; push notifications; Bonjour networking support. Slower to execute; more difficult to debug on the client side; limited access to hardware; no official app store; harder to monetize App Store review process; longer update times; relative complexity and higher cost of dev process
  20. http://twitter.com/akosma/status/26456836540

  21. None
  22. Market

  23. as of February 2011

  24. 4.7% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  25. of all web browsing

  26. worldwide is done

  27. using Mobile browsers

  28. 4.7% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  29. March 2010... http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  30. 1.96%

  31. 4.7% http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

  32. http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Stat_Counter).svg

  33. http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/

  34. http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/

  35. Browsers Browser Share Notes Safari 24% iPad not included Opera

    21% Mini & Mobile Nokia 16% Android 15% Includes tablets BlackBerry 14% Marginal WebKit http://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html
  36. Engines Engine Share Notes WebKit 57% Safari, Nokia, Android, Samsung,

    BlackBerry, MeeGo, Symbian... Presto 21% Opera Mini and Opera Mobile Gecko, Trident, Mango, UC, Obigo... 22% http://www.quirksmode.org/mobile/mobilemarket.html
  37. WebKit

  38. A family, actually

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

  40. None
  41. Technologies

  42. 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
  43. http://newvoicesforresearch.blogspot.com/2010_04_01_archive.html

  44. Cross-Browser

  45. Complexity

  46. None
  47. Frameworks

  48. Fashion

  49. Pioneer

  50. None
  51. <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>
  52. <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>
  53. None
  54. Establishment

  55. http://www.jqtouch.com/

  56. http://jquerymobile.com/

  57. http://jqueryui.com/

  58. http://www.sencha.com/products/touch/

  59. http://www.sproutcore.com/

  60. http://cappuccino.org/

  61. http://dojotoolkit.org/features/mobile

  62. Lightweight

  63. http://zeptojs.com/

  64. http://xuijs.com/

  65. http://joapp.com/

  66. http://webapp-net.com/

  67. http://paularmstrongdesigns.com/projects/basejs/

  68. http://www.limejs.com/

  69. http://www.mobl-lang.org/

  70. http://guryjs.org/

  71. ... and more

  72. http://html5boilerplate.com/

  73. http://www.notjustagrid.com/default.asp

  74. http://chocolatechipmobile.wordpress.com/

  75. http://snippetspace.com/

  76. http://unify.github.com/unify/

  77. http://www.zkoss.org/

  78. http://dhtmlx.com/touch/

  79. http://www.ipfaces.org/

  80. http://www.winktoolkit.org/

  81. http://code.rememberthisguy.com/safire/

  82. http://www.journyx.com/jpint

  83. Platforms

  84. http://mobile.yahoo.com/developers

  85. http://developer.yahoo.com/mobile/blueprintquickstart/BP_QS_Overview.html

  86. <?xml version="1.0" encoding="UTF-8"?> <page style="collection"> <content> <module> <header layout="simple"> <layout-items>

    <block>Blueprint 1.1 static example pages</block> </layout-items> </header> <module> <header layout="simple"> <layout-items> <block>List content</block> </layout-items> </header> <placard class="link" layout="card"> <layout-items> <block class="link"><strong>Restaurant Listings</strong></block> <block class="subtext">Organized by cuisine, with brief reviews, ratings, and thumbnails, with custom page header and footer</block> </layout-items> <load-page event="activate" page="restaurants.bp"/> </placard>
  87. None
  88. Go beyond the browser...

  89. ... and sell your HTML in an app marketplace

  90. ("App Store" is a trademark of Apple Inc.)

  91. http://www.appcelerator.com/

  92. http://www.phonegap.com/

  93. http://www.nimblekit.com/

  94. http://rhomobile.com/

  95. None
  96. Or in a web app market?

  97. OpenAppMkt.com

  98. None
  99. None
  100. None
  101. None
  102. None
  103. Example

  104. Dezeen Watchstore App

  105. None
  106. http://dezeenwatchstore.com/clock/

  107. None
  108. None
  109. None
  110. <!DOCTYPE html> <html manifest="dws.manifest"> <meta name="robots" content="noindex, nofollow" /> <meta

    name="viewport" content="width=device-width; initial-scale=1.0; maximum- scale=1.0; user-scalable=0;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <link rel="apple-touch-icon" href="icon.png" /> <link rel="apple-touch-startup-image" href="startup.png" /> <title>Dezeen Watch Store</title>
  111. CACHE MANIFEST CACHE: clock.js index.html raphael-min.js jquery.js iphone_320.css iphone_480.css ipadlandscape.css

    ipadportrait.css dws.png dws_lscape_iphone.png dws_portrait_ipad.png dws_landscape_ipad.png startup.png bg.png iphone_lscape_bg.png ipad_pt_bg.png ipad_ls_bg.png install.png ipad_prompt.png #11210
  112. None
  113. Remember

  114. Web Development == Software Development

  115. http://kosmaczewski.net/2007/08/02/web-development-equal- software-development/

  116. • Have a specification; • Have a schedule / Scrum

    burn chart; • Have an architecture; • Make a prototype; • Have (human) testers;
  117. • Automate your tests and builds; • Use a bug

    database; • Use version control; • Be agile; • Know your audience; • Scope your target.
  118. The Joel Test http://en.wikipedia.org/wiki/File:Joel_spolsky_on_20_sept_2007.jpg http://www.joelonsoftware.com/articles/ fog0000000043.html

  119. Test in multiple devices

  120. None
  121. Links

  122. • Standards for Web Applications on Mobile http://www.w3.org/2011/02/mobile-web-app-state.html • QuirksMode

    http://www.quirksmode.org/mobile/ • State of the Mobile Web http://www.opera.com/smw/
  123. None
  124. Thanks!

  125. Questions?