Taking your Web App for a walk
Upcoming SlideShare
Loading in...5
×
 

Taking your Web App for a walk

on

  • 3,788 views

What strategies can you take to bring a web application to a mobile device? Six steps from pure HTML/CSS all the way to almost native applications.

What strategies can you take to bring a web application to a mobile device? Six steps from pure HTML/CSS all the way to almost native applications.

Statistics

Views

Total Views
3,788
Views on SlideShare
3,780
Embed Views
8

Actions

Likes
1
Downloads
8
Comments
0

2 Embeds 8

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

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Taking your Web App for a walk Taking your Web App for a walk Presentation Transcript

  • 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: @jcfischer
  • 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: @jcfischer• I‘m on Google+: 109789939743085010576
  • http://www.flickr.com/photos/hgesell/1257717725/
  • Webhttp://www.flickr.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?
  • 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. Offline / Local Storage
  • 6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Offline / Local Storage 4. UI Frameworks (jQuery Mobile / Sencha)
  • 6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Offline / 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. Offline / 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. Offline / Local Storage 4. UI Frameworks (jQuery Mobile / Se 5. Using the device (PhoneGap) 6. Being Native (Titanium)
  • 1
  • CSS
  • WebKit
  • 2
  • Responsive Design
  • 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/
  • 3
  • Going Offline• Caching Files offline• 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/offline.html
  • Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpghttp://diveintohtml5.org/offline.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/offline.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/offline.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 files /clock-face.jpghttp://diveintohtml5.org/offline.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
  • More than Key-Value? Web SQL Indexed DB hic sunt dracones
  • http://flickr.com/photos/glennharper/49536169/
  • how far have we come? http://flickr.com/photos/glennharper/49536169/
  • 4
  • 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> <!-- Index page--> <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> <!-- Index page--> <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> Define 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> <!-- Index page--> <div data-role="page" id="indexPage"> <div data-role="header" data-theme="b" data-position="fixed"> <h1>To Do List</h1> Define 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> <!-- Index page--> <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"> Define 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> <!-- Index page--> <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>
  • function save() { var id = $(#formPage).jqmData("id"); if (id === null) { var task = { name: $("#taskName").val(), description: $("#taskDescription").val(), completed: ($("#taskCompleted").val() === "yes"), duedate: $("#taskDuedate").data("datebox").theDate }; taskManager.addTask(task); } else { var currentTask = $("#formPage").jqmData("task"); currentTask.name($("#taskName").val()); currentTask.description($("#taskDescription").val()); currentTask.completed(($("#taskCompleted").val() === "yes")); currentTask.duedate($("#taskDuedate").data("datebox").theDate); taskManager.save(); $(#formPage).jqmData("id", null); }}
  • 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> Define Content (?)
  • var saveButton = { id: taskFormSaveButton, text: Save, ui: confirm, handler: function () { var record = TaskList.TaskForm.getRecord(); TaskList.TaskForm.updateRecord(record); if (null === TaskList.taskStore.findRecord(id, record.id)) { TaskList.taskStore.add(record); } TaskList.taskStore.sync(); TaskList.taskStore.sort([{property: duedate, direction: ASC}]); TaskList.listPanel.refresh(); TaskList.Viewport.setActiveItem("mainlist", {type: "slide", direction: "right"}); }, scope: this };
  • 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?
  • 5
  • 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• Notification (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
  • 6
  • 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 offline
  • 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