openmic barcamp 11.02.2010
DESCRIPTION
TRANSCRIPT
Mobile application smackdown
Patrick H. Lauke / openMIC / Bath / 11 February 2010
NATIVE APPLICATIONS vs WEB APPLICATIONS vs WIDGETS
native applications – advantages
● direct access to all phone features● fast processing and graphics● native controls● can run standalone – all resources loaded
native applications – disadvantages
● coded specifically to each platform● maintenance/development cost of multi-platform porting● app stores for distribution?
“...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a></video>
video as native object...why is it important?
● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
Demonstration of video
video format debates – MP4 vs OGG Theora
<video controls autoplay poster="…" width="…" height="…"><source src="movie.ogv" type="video/ogg" /><source src="movie.mp4" type="video/mp4" /><!-- fallback content -->
</video>
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
localStorage/sessionStoragelike cookies...
document.cookie = 'key=value; expires=Thu, 11 Feb 2010 23:59:59 UTC; path=/'…
localStorage/sessionStoragelike cookies...on steroids!
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
Web Database – full relational DB / SQL
var db = openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */
});});
cache UI/resource files for offline use
<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.css
Approaches to cross-device development:
● do nothing – use standards, defensive design● separate site (m.mysite.com, mysite.mobi)● single site, but optimised for cross-device
CSS 2.1 Media Types:
● print, screen, handheld, projection, tv, …● partially supported● lump all devices into single categories
http://www.w3.org/TR/CSS21/media.html
CSS 2.1 Media Types:
<link rel="stylesheet" ... media="print" href="...">@import url("...") print;@media print { // insert CSS rules here}
CSS 3 Media Queries:
● build and extend CSS 2.1 Media Types● more granular control of capabilities● width, height, orientation, color, resolution, …
http://www.w3.org/TR/css3-mediaqueries/
CSS 3 Media Queries:
@media screen and (max-device-width: 480px) { // insert CSS rules here
}Demonstration of Media Queries
CSS 3 Media Queries and SVG:
● SVG already resolution independent● ideal for device interfaces, maps, graphs, …● combination with CSS 3 Media Queries
Demonstration of Media Queries + SVG
web applications – advantages
● work on all phones with modern browser● write once (with graceful degradation / progressive enhancement) deploy anywhere● no app store rules and regulations● offline support / storage make them almost standalone
web applications – disadvantages
● but it runs inside the browser● controls don't look native● no direct access to device features (and rightly so in most cases)● not suited to graphics / processing intensive● no app store … so what?
Widgets are nothing newYahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
Adobe Air, iPhone Apps, Android Apps, …
“…the browser run-time is perfect…you’re out of writing for Windows Mobile, Android, S60, each of which require testing...we want to abstract that.
All the cool innovation is happening inside the browser – you don’t need to write to the native operating system anymore.”
Mobile Entertainment Market , June, 2009
W3C Widgets – application development filled with web standards goodness,
using browser engine as platform
Configuration file
<widget> <widgetname>MyFirstWidget</widgetname> <description>A demo widget</description> <icon>images/widget.png</icon> <width>320</width> <height>240</height></widget>Demonstration of basic widget
Opera had widget capability for a long time … 10.20 alpha first widgets as standalone apps
dev.opera.com/articles/view/widgets-as-standalone-applications
widget – advantages
● work on all phones with widget manager● write once (with graceful degradation / progressive enhancement) deploy anywhere● distribution – ad-hoc, website or store● standalone – all resources wrapped and downloaded together● depending on widget manager engine, all the goodness of new web standards for free
widget – disadvantages
● not all widget managers are the same● current device access confusion (JIL/BONDI/DAP)● not suited to graphics / processing intensive
native applicationsgood for graphics / processor intensive stuff
web applicationsif doesn't require device integration, good solution for most common tasks(provided browsers all support features like offline / storage)
widgetsthe future(?) combines best of both worlds
www.opera.com/developerpeople.opera.com/patrickl/presentations/openMIC_11.02.2010/openMIC_11.02.2010.pdf