Mobile Web Rising

Mobile Web Rising Adrian Kosmaczewski - akosma software SDC 2011 - Monday, April 4th 2011

Adrian Kosmaczewski

akosma software

akosma.comadrian@akosma.com @akosma

github.com/akosma linkedin.com/in/akosma slideshare.com/akosma identi.ca/akosma friendfeed.com/akosmastackoverﬂow.com/users/133764/akosma careers.stackoverﬂow.com/akosma

http://www.ﬂickr.com/photos/oskay/365607662/

http://www.ﬂickr.com/photos/oskay/365607591/

http://www.ﬂickr.com/photos/blakespot/2379207825/

Objective-C

http://www.ﬂickr.com/photos/thenovys/3908472000/

Alternatives

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

http://t2impact.blogspot.com/2010/11/reﬂections-from-pcw17-november-2010.html

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

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

Market

Web or native apps?

compatibility with other business apps web update frequency apps mobile platforms reports games native calculator apps usage frequency UI complexity

Web Application Native Application Simpler deployment and Faster execution; updates; access to address book, known technologies, accelerometer, audio andPros cheaper to maintain; camera; App Store; access to GPS information; 3D games and animations; basic offline support; push notifications; cross-platform Bonjour networking support. Slower to execute; App Store review process; more difficult to debug on the longer update times;Cons client side; limited access to relative complexity and higher hardware; no official app cost of dev process store; harder to monetize

http://twitter.com/akosma/status/26456836540

Market

as of February 2011

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

of all web browsing

worldwide is done

using Mobile browsers

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

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

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

Browsers Browser Share Notes Safari 24% iPad not included Opera 21% Mini & Mobile Nokia 16% Android 15% Includes tablets BlackBerry 14% Marginal WebKithttp://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html

Engines Engine Share Notes Safari, Nokia, Android, WebKit 57% Samsung, BlackBerry, MeeGo, Symbian... Opera Mini and Presto 21% Opera MobileGecko, Trident, Mango, 22% UC, Obigo... http://www.quirksmode.org/mobile/mobilemarket.html

WebKit

A family, actually

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

Technologies

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

olocat ion APIGe pe="email"> <input ty SVG Ca nv Messaging AP as A PI I ts Web St c orage CSS n ta Anim C o atio ns CS S 3D WOFF Applic ation XMLH ttpRequest Cach eCalendar API HT ML5 HTML Speech <video> S3 CS Webso <aud ckets Touch io> File Writer API e vents i n DOM Web Workers http://www.w3.org/2011/02/mobile-web-app-state.html

Cross-Browser

Complexity

Frameworks

Fashion

Pioneer

<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> 

<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 & 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> 

Establishment

http://www.jqtouch.com/

http://jquerymobile.com/

http://jqueryui.com/

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

http://www.sproutcore.com/

http://cappuccino.org/

http://dojotoolkit.org/features/mobile

Lightweight

http://zeptojs.com/

http://xuijs.com/

http://joapp.com/

http://webapp-net.com/

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

http://www.limejs.com/

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

http://guryjs.org/

... and more

http://html5boilerplate.com/

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

http://chocolatechipmobile.wordpress.com/

http://snippetspace.com/

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

http://www.zkoss.org/

http://dhtmlx.com/touch/

http://www.ipfaces.org/

http://www.winktoolkit.org/

http://code.rememberthisguy.com/saﬁre/

http://www.journyx.com/jpint

Platforms

http://mobile.yahoo.com/developers

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

<?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>

wrap it up...

... and sell it in an app marketplace

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

http://www.phonegap.com/

http://rhomobile.com/

http://www.appcelerator.com/

Or in a web app market?

OpenAppMkt.com

Example

Dezeen Watchstore App

http://dezeenwatchstore.com/clock/

<!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>

CACHE MANIFESTCACHE:clock.jsindex.htmlraphael-min.jsjquery.jsiphone_320.cssiphone_480.cssipadlandscape.cssipadportrait.cssdws.pngdws_lscape_iphone.pngdws_portrait_ipad.pngdws_landscape_ipad.pngstartup.pngbg.pngiphone_lscape_bg.pngipad_pt_bg.pngipad_ls_bg.pnginstall.pngipad_prompt.png#11210

Remember

Web Development ==Software Development

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

• Have a speciﬁcation;• Have a schedule;• Have an architecture;• Make a prototype;• Have (human) testers;

• Automate your tests and builds;• Use a bug database;• Use version control;• Be agile;• Know your audience;• Scope your target.

The Joel Testhttp://www.joelonsoftware.com/articles/ fog0000000043.html http://en.wikipedia.org/wiki/File:Joel_spolsky_on_20_sept_2007.jpg

Test in multiple devices

• 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/

Thanks!

Questions?

adrian@akosma.com @akosma

Slides created on Keynote for iPad No web app framework was harmed during this presentation This presentation is released under aCreative Commons Attribution-No Derivative Works 3.0 Unported License http://creativecommons.org/licenses/by-nd/3.0/

Mobile Web Rising

by Adrian Kosmaczewski on Apr 30, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 69

Statistics

Mobile Web Rising — Presentation Transcript

http://akosma.com	62
http://www.slideshare.net	3
http://feeds.feedburner.com	3
http://webcache.googleusercontent.com	1