31
Ramonvictor | @tangerinalab

Mobile Web Apps Overview

Embed Size (px)

DESCRIPTION

Back in 2011, when I was working at Partec/TangerinaLab, I did a research to check the status of web mobiles apps comparing with native apps.

Citation preview

Page 1: Mobile Web Apps Overview

Ramonvictor | @tangerinalab

Page 2: Mobile Web Apps Overview

• The defining characteristics are that the user interface is built with web-standard technologies: HTML, CSS and Javascript.

Page 3: Mobile Web Apps Overview
Page 4: Mobile Web Apps Overview
Page 5: Mobile Web Apps Overview

Web Storage; IndexedDB; SVG;

Application Cache; Web SQL Database;

Geolocation; WebSocket; Native Drag &

Drop; Desktop Drag-In (File API); Audio + Video Tags;

Better semantic tags; Web Workers;

Offline Mode; Canvas;

Page 6: Mobile Web Apps Overview

CSS Selectors; Webfonts; Columns;

Opacity; Text stroke; Gradients;

Rounded corners; Text

wrapping; Transitions; Transforms;

webkit Animations;

Page 7: Mobile Web Apps Overview

“With hardware acceleration standards like HTML5 and

CSS3 can deliver rich, interactive media smoothly

in the browser.”

Safari’s features page

Page 8: Mobile Web Apps Overview

Titanium Mobile

Page 9: Mobile Web Apps Overview

Titanium Mobile

• is easy to use and it progressively enhances HTML and CSS so that less capable phones are still able to browse content;

• there are periodic delays in responding to tap events;

• jQuery library is too heavy;

• is focussed strictly on the iPhone, iPod Touch;

Page 10: Mobile Web Apps Overview

Titanium Mobile

• Similar approach to jQTouch, butwith a broader array of UI controls and styles;

• “Seriously cross-platform”: iOS, Android, BlackBerry, Windows Phone…

• performance is variable;

• jQuery library is too heavy;

Page 11: Mobile Web Apps Overview

Titanium Mobile

• allows you to write apps using a JavaScript API;

• it compiles most of your code into a native iPhone or Android app;

• You can only target the platforms Titanium supports;

Titanium Mobile

Page 12: Mobile Web Apps Overview

Titanium Mobile

is geared more to software developers and has a pure Javascript API for building powerful apps.

Page 13: Mobile Web Apps Overview

• It is powered by a custom core that is optimized for mobile (lighter and better optimized than that in jQTouch).

• Sencha is far more extensive than its competitors

• Explicit iPad support

• Storage and data binding facilities using JSON and HTML5 offline storage

Page 14: Mobile Web Apps Overview

Titanium Mobile

• Sencha provides paid support starting at $300/year;

Page 15: Mobile Web Apps Overview
Page 16: Mobile Web Apps Overview

• Allow web developers to take a web app and package it as a native app for the iPhone and other mobile platforms;

• If Apple rejects it? No big deal, because I still have my online version;

Page 17: Mobile Web Apps Overview
Page 18: Mobile Web Apps Overview

• Give web developers JavaScript access to popular mobile device features: camera, GPS, accelerometer, local SQLite databases…

• iPhone, Blackberry and Android are supported;

Page 19: Mobile Web Apps Overview
Page 20: Mobile Web Apps Overview
Page 21: Mobile Web Apps Overview

• 37% of mobile users browse the web;

• 35% use downloaded apps;

• So it's not that one is winning over the other in terms of usage;

According to Comscore

Page 22: Mobile Web Apps Overview

“Build a mobile web app for everyone but consider flagship native apps to

reward your best customers”Josh Clark

Page 25: Mobile Web Apps Overview

http://currency.io/

http://jag.gr/tm/

Page 26: Mobile Web Apps Overview

http://dedy.tv/sudoku/ http://dedy.tv/2b/

Page 27: Mobile Web Apps Overview
Page 28: Mobile Web Apps Overview

http://bit.ly/pr6DPY

http://tweetdeck.com/iphone/

Original appPlaying with JQTouch, HTML5 e CSS3

Page 29: Mobile Web Apps Overview
Page 30: Mobile Web Apps Overview

• W3C: Mobile Web Application Best Practiceshttp://www.w3.org/TR/mwabp/

• Making an iPad HTML5 App & making it really fasthttp://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

• eBook: Building iPhone Apps with HTML, CSS, and JavaScripthttp://ofps.oreilly.com/titles/9780596805784/index.html

• HTML5: Web Development to the next levelhttp://slides.html5rocks.com/#title-slide

• Comparing Mobile Web (HTML5) Frameworks: Sencha Touch, jQueryMobile, jQTouch, Titaniumhttp://interfacethis.com/2011/adventures-in-html5-part-one/

Page 31: Mobile Web Apps Overview

• Improving the Performance of your HTML5 Apphttp://www.html5rocks.com/en/tutorials/speed/html5/

• Mobile Web Development Toolboxhttp://mobilewebtoolbox.com/