Taking your Web App for a walk

Taking your web app for a walk Jens-Christian Fischer soft-shake.ch 3.10.2011

So who‘s this guy?

So who‘s this guy?• I have a job: Developer & CEO

So who‘s this guy?• I have a job: Developer & CEO• I have a company: http://invisible.ch

So who‘s this guy?• I have a job: Developer & CEO• I have a company: http://invisible.ch• I have an email address: jens-christian@invisible.ch

So who‘s this guy?• I have a job: Developer & CEO• I have a company: http://invisible.ch• I have an email address: jens-christian@invisible.ch• I‘m on Twitter: @jcﬁscher

So who‘s this guy?• I have a job: Developer & CEO• I have a company: http://invisible.ch• I have an email address: jens-christian@invisible.ch• I‘m on Twitter: @jcﬁscher• I‘m on Google+: 109789939743085010576

http://www.ﬂickr.com/photos/hgesell/1257717725/

Webhttp://www.ﬂickr.com/photos/hgesell/1257717725/

iO S -C oid i ve A n dr c t b je Da OWin Ph lvi one7 Bl k ac C# kb O S er W eb ry IP ?) (R

What are we going to do?

6 Steps towards mobile apps

6 Steps towards mobile apps 1. HTML 5 / CSS 3

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Ofﬂine / Local Storage

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Ofﬂine / Local Storage 4. UI Frameworks (jQuery Mobile / Sencha)

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Ofﬂine / Local Storage 4. UI Frameworks (jQuery Mobile / Sencha) 5. Using the device (PhoneGap)

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Ofﬂine / Local Storage 4. UI Frameworks (jQuery Mobile / Sencha) 5. Using the device (PhoneGap) 6. Being Native (Titanium)

6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Ofﬂine / Local Storage 4. UI Frameworks (jQuery Mobile / Se 5. Using the device (PhoneGap) 6. Being Native (Titanium)

WebKit

Responsive Design

CSS Media Queries@media handheld, only screen and (max-width: 1280px) { .wrapper { padding: 0; } #header { position: absolute; } #header .center { position: relative; width: 100%; } #logo { margin: 0; left: 32px; top: 8px; } #content { width: 100%; margin: 0 auto; padding: 154px 0 240px 0; } #footer { position: absolute; bottom: 0; left: 0; } }@media handheld, only screen and (max-width: 768px) { .wrapper { padding: 0; } .entry { margin-left: 0; } h1 { font-size: 1.3em; } #logo { left: 8px; top: 8px; } #useless { display: none; } #panel { display: none; } #content { padding: 154px 0 240px 0; width: 100%; height: 100%; } #footer { position: absolute; max-width: 768px; bottom: 0; left: 0; } .text { margin: 0; } }@media handheld, only screen and (max-width: 480px) { .left { float: none; margin: 0 0 0 86px; } }@media handheld, only screen and (max-width: 320px) { .left { margin: 0 0 0 8px; } }

http://www.alistapart.com/articles/responsive-web-design/

Going Ofﬂine• Caching Files ofﬂine• Local Storage

Cache Manifest<!DOCTYPE HTML> CACHE MANIFEST<html manifest="/cache.manifest"> FALLBACK:<body> / /offline.html... NETWORK:</body> /tracking.cgi</html> CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/ofﬂine.html

Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/ofﬂine.html

Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html If not cached, show this NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/ofﬂine.html

Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html If not cached, show this NETWORK: /tracking.cgi Dont‘t cache CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/ofﬂine.html

Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html If not cached, show this NETWORK: /tracking.cgi Dont‘t cache CACHE: /clock.css /clock.js Cache these ﬁles /clock-face.jpghttp://diveintohtml5.org/ofﬂine.html

Local Storage Simple Key - Value storeif (Modernizr.localstorage) { var foo = localStorage.getItem("key"); // ... localStorage.setItem("key", foo);} else { alert(No storage capabilities);} http://diveintohtml5.org/storage.html

More than Key-Value?

More than Key-Value? Web SQL Indexed DB

More than Key-Value? Web SQL Indexed DB hic sunt dracones

http://ﬂickr.com/photos/glennharper/49536169/

how far have we come? http://ﬂickr.com/photos/glennharper/49536169/

jQuery Mobile • Shares the name with jQuery (and uses it) • HTML Code with annotations • JavaScript for functionality http://jquerymobile.com

Sencha Touch• Grown out of the Ext JS Framework• JavaScript Code for design• HTML is just a container http://www.sencha.com/products/touch/

jQuery Mobile

jQuery Mobile<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"> <title>To Do List</title> <script src="../../_libs/jqm/jquery-1.6.2.min.js"></script> <script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script> <script src="../../_libs/persistencejs/lib/persistence.js"></script> <link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet"> <link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body>  <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>To Do List</h1> <a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a> </div> <div data-role="content"> <ul class="taskList" data-role="listview" data-theme="c" id="taskList"> </ul> </div> </div> // ... lot‘s of stuff omitted </body></html>

jQuery Mobile<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"> <title>To Do List</title> <script src="../../_libs/jqm/jquery-1.6.2.min.js"></script> <script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script> <script src="../../_libs/persistencejs/lib/persistence.js"></script> <link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet"> <link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body>  <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> Deﬁne a Page <h1>To Do List</h1> <a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a> </div> <div data-role="content"> <ul class="taskList" data-role="listview" data-theme="c" id="taskList"> </ul> </div> </div> // ... lot‘s of stuff omitted </body></html>

jQuery Mobile<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"> <title>To Do List</title> <script src="../../_libs/jqm/jquery-1.6.2.min.js"></script> <script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script> <script src="../../_libs/persistencejs/lib/persistence.js"></script> <link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet"> <link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body>  <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>To Do List</h1> Deﬁne Header <a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a> </div> <div data-role="content"> <ul class="taskList" data-role="listview" data-theme="c" id="taskList"> </ul> </div> </div> // ... lot‘s of stuff omitted </body></html>

jQuery Mobile<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"> <title>To Do List</title> <script src="../../_libs/jqm/jquery-1.6.2.min.js"></script> <script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script> <script src="../../_libs/persistencejs/lib/persistence.js"></script> <link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet"> <link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body>  <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>To Do List</h1> <a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a> </div> <div data-role="content"> Deﬁne Content <ul class="taskList" data-role="listview" data-theme="c" id="taskList"> </ul> </div> </div> // ... lot‘s of stuff omitted </body></html>

jQuery Mobile<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"> <title>To Do List</title> <script src="../../_libs/jqm/jquery-1.6.2.min.js"></script> <script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script> <script src="../../_libs/persistencejs/lib/persistence.js"></script> <link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet"> <link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body>  <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>To Do List</h1> <a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a> </div> <div data-role="content"> <ul class="taskList" data-role="listview" data-theme="c" id="taskList"> </ul> </div> </div> // ... lot‘s of stuff omitted </body></html>

Sencha Touch

<!DOCTYPE html><html manifest="todolist.manifest"> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>To Do List</title> <script src="../../_libs/sencha/sencha-touch.js"></script> <link href="../../_libs/sencha/resources/css/sencha-touch.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body></body></html>

<!DOCTYPE html><html manifest="todolist.manifest"> <head> <meta charset="utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>To Do List</title> <script src="../../_libs/sencha/sencha-touch.js"></script> <link href="../../_libs/sencha/resources/css/sencha-touch.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <script src="app.js"></script> <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="res/img/Default.png" /> </head> <body></body></html> Deﬁne Content (?)

var titlebar = { id: taskFormTitlebar, xtype: toolbar, title: Task Detail, items: [ cancelButton, {xtype: spacer}, saveButton] };TaskList.Viewport = new Ext.Panel({ fullscreen: true, layout: "card", style: "background-color: white", layoutOnOrientationChange: true, items: [ { id: "mainlist", xtype: "panel", layout: "card", items: TaskList.listPanel, dockedItems: toolbar }, TaskList.TaskForm] });

The HTML orthe JavaScript way?

Choose wisely

But is it native?

Native?

Native?• Accelerometer

Native?• Accelerometer• Camera

Native?• Accelerometer• Camera• Address Book

Native?• Accelerometer• Camera• Address Book• ... A lot is missing!

PhoneGap• iOS, Android, Blackberry, Symbian, WebOS• JavaScript APIs that give access to Phones features• Native Libraries, that interface with the JavaScript API http://phonegap.com

• Coordinates (Position Data / Acceleration)• Accelerometer• Camera• Contacts• Files / Directories / FileTransfer• Geolocation / Compass• Media• Notiﬁcation (Dialogs / Alerts)• Orientation• SMS / Telephony• Connection

Accessing the cameranavigator.camera.getPicture(onSuccess, onFail, { quality: 50 });function onSuccess(imageData) { var image = document.getElementById(myImage); image.src = "data:image/jpeg;base64," + imageData;}function onFail(message) { alert(Failed because: + message);}

Write HTML / JSrun „native“ on deviceaccess device functions

But we‘re still not „really“ native

Titanium Appcelerator http://www.appcelerator.com/

Objective-C / Dalvik JavaScript BridgeiOS / Android / (BlackBerry)

Build applications with native componentsControl them from JavaScript var win = Ti.UI.createWindow(); var view = Ti.UI.createImageView({   image:"myimage.png",   width:24,   height:24 }); var button = Ti.UI.createButton({   title:"Animate",   width:80,   height:40,   bottom:10 }); button.addEventListener("click",function(){   view.animate({top:0,duration:500}); }); win.add(view); win.add(button); win.open();

Conclusion

use normal Web App• Leverage your HTML5 / CSS3 / JavaScript• Webkit is the new IE (which „is a good thing“)• No restrictions on content from a certain fruit company• Can go ofﬂine

use jQuery Mobile• most mobile web browsers• simple to use, relatively low learning curve• much HTML, some JavaScript• still in beta (actually, RC1 just came out)

use Sencha Touch• most mobile browsers• many different components / widgets• high learning curve• commercial and open source licenses (but free)

use PhoneGap• most mobile browsers• supports „any“ web app (jQuery Mobile / Sencha)• Access to some device functions• Deliver „native“ app (via AppStore)

use Appcelerator• iOS / Android „native“ native app (AppStore)• use all native components of device• high learning curve• Commercial developer licenses, basic functionality free

Want to learn more?

http://mobile-training.ch

Taking your Web App for a walk

by Jens-Christian Fischer

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 8

Statistics

Taking your Web App for a walk Presentation Transcript

http://twitter.com	5
http://a0.twimg.com	3