(short) Intro to Mobile Web App Dev

(short) Intro to Mobile Web App Dev Adrian Kosmaczewski -
Trifork GmbH

Adrian Kosmaczewski

Trifork GmbH

trifork.com [email protected] @akotrifork

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

Web or native apps?

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

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

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

WebKit

A family, actually

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

Technologies

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

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

Cross-Browser

Complexity

Frameworks

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

jQuery Mobile Sencha Touch PhoneGap

Custom Frameworks

Remember

Test in multiple devices

Thanks!

Questions?

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/

(short) Intro to Mobile Web App Dev

(short) Intro to Mobile Web App Dev

More Decks by Adrian Kosmaczewski

Other Decks in Technology

Featured

Transcript