This document compares native applications, web applications, and widgets for mobile devices. Native applications have direct access to device features but must be developed for each platform. Web applications can be written once and deployed anywhere but run inside the browser without direct device access. Widgets combine the cross-platform capabilities of web applications with the ability to access device features and run standalone like native applications.
6. native applications – advantages
● direct access to all phone features
● fast processing and graphics
● native controls
● can run standalone – all resources loaded
7. native applications – disadvantages
● coded specifically to each platform
● maintenance/development cost of multi-
platform porting
● app stores for distribution?
13. “...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 HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
31. 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
32. 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 browsers
http://camendesign.com/code/video_for_everybody
33. video and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)
39. 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 */
});
});
43. 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
44. 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
46. 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/
47. CSS 3 Media Queries:
@media screen and
(max-device-width: 480px) {
// insert CSS rules here
}
Demonstration of Media Queries
48. 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
49. 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
50. 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?
53. Widgets are nothing new
Yahoo! Widgets (aka Konfabulator), OS X Dashboard, Windows Sidebar,
Adobe Air, iPhone Apps, Android Apps, …
54. “…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
55. W3C Widgets – application development filled
with web standards goodness,
using browser engine as platform
59. 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
61. 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
62. widget – disadvantages
● not all widget managers are the same
● current device access confusion
(JIL/BONDI/DAP)
● not suited to graphics / processing intensive
64. native applications
good for graphics / processor intensive stuff
web applications
if doesn't require device integration, good solution for
most common tasks
(provided browsers all support features like offline / storage)
widgets
the future(?) combines best of both worlds