Mobile Web Rising

Mobile Web Rising Adrian Kosmaczewski - akosma software

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 2009 http://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?

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

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

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 WebKit http://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html

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

WebKit

A family, actually

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

Technologies

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

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

Go beyond the browser...

... and sell your HTML in an app marketplace

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

http://www.appcelerator.com/

http://www.phonegap.com/

http://www.nimblekit.com/

http://rhomobile.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 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

Remember

Web Development == Software Development

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

• Have a speciﬁcation; • Have a schedule / Scrum
burn chart; • 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 Test http://en.wikipedia.org/wiki/File:Joel_spolsky_on_20_sept_2007.jpg http://www.joelonsoftware.com/articles/ fog0000000043.html

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?

Mobile Web Rising

Mobile Web Rising

More Decks by Adrian Kosmaczewski

Other Decks in Programming

Featured

Transcript