Taking your Web App for a walk
•Télécharger en tant que KEY, PDF•
1 j'aime•3,499 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Taking your Web App for a walk
Similaire à Taking your Web App for a walk (20)
Dernier
Dernier (20)
Taking your Web App for a walk
- 1. Taking your web app for a walk Jens-Christian Fischer soft-shake.ch 3.10.2011
- 2. So who‘s this guy?
- 3. So who‘s this guy? • I have a job: Developer & CEO
- 4. So who‘s this guy? • I have a job: Developer & CEO • I have a company: http://invisible.ch
- 5. 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
- 6. 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
- 7. 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
- 11. iO S -C oid i ve A n dr c t b je Da O Win Ph lvi one7 Bl k ac C# kb O S er W eb ry IP ?) (R
- 12. What are we going to do?
- 13. What are we going to do?
- 15. 6 Steps towards mobile apps
- 16. 6 Steps towards mobile apps 1. HTML 5 / CSS 3
- 17. 6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design
- 18. 6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Offline / Local Storage
- 19. 6 Steps towards mobile apps 1. HTML 5 / CSS 3 2. Responsive Design 3. Offline / Local Storage 4. UI Frameworks (jQuery Mobile / Sencha)
- 20. 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)
- 21. 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)
- 22. 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)
- 23. 1
- 24. CSS
- 25. WebKit
- 26. 2
- 29. 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; } }
- 31. 3
- 32. Going Offline • Caching Files offline • Local Storage
- 33. 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.jpg http://diveintohtml5.org/offline.html
- 34. Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg http://diveintohtml5.org/offline.html
- 35. Cache Manifest CACHE MANIFEST FALLBACK: / /offline.html If not cached, show this NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg http://diveintohtml5.org/offline.html
- 36. 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.jpg http://diveintohtml5.org/offline.html
- 37. 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.jpg http://diveintohtml5.org/offline.html
- 38. Local Storage Simple Key - Value store if (Modernizr.localstorage) { var foo = localStorage.getItem("key"); // ... localStorage.setItem("key", foo); } else { alert('No storage capabilities'); } http://diveintohtml5.org/storage.html
- 40. More than Key-Value? Web SQL Indexed DB
- 41. More than Key-Value? Web SQL Indexed DB
- 42. More than Key-Value? Web SQL Indexed DB hic sunt dracones
- 44. how far have we come? http://flickr.com/photos/glennharper/49536169/
- 45. 4
- 48. jQuery Mobile • Shares the name with jQuery (and uses it) • HTML Code with annotations • JavaScript for functionality http://jquerymobile.com
- 49. Sencha Touch • Grown out of the Ext JS Framework • JavaScript Code for design • HTML is just a container http://www.sencha.com/products/touch/
- 51. jQuery Mobile
- 52. 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>
- 53. 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>
- 54. 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>
- 55. 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>
- 56. 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>
- 57. 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); } }
- 58. Sencha Touch
- 59. <!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>
- 60. <!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 (?)
- 61. 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 };
- 62. 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] });
- 64. The HTML or the JavaScript way?
- 65. Choose wisely
- 66. But is it native?
- 67. 5
- 68. Native?
- 69. Native?
- 72. Native? • Accelerometer • Camera • Address Book
- 73. Native? • Accelerometer • Camera • Address Book • ... A lot is missing!
- 74. 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
- 75. • Coordinates (Position Data / Acceleration) • Accelerometer • Camera • Contacts • Files / Directories / FileTransfer • Geolocation / Compass • Media • Notification (Dialogs / Alerts) • Orientation • SMS / Telephony • Connection
- 76. Accessing the camera navigator.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); }
- 77. Write HTML / JS run „native“ on device access device functions
- 78. But we‘re still not „really“ native
- 80. 6
- 81. Titanium Appcelerator http://www.appcelerator.com/
- 82. Objective-C / Dalvik JavaScript Bridge iOS / Android / (BlackBerry)
- 83. Build applications with native components Control 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();
- 85. Conclusion
- 86. 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
- 87. 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)
- 88. use Sencha Touch • most mobile browsers • many different components / widgets • high learning curve • commercial and open source licenses (but free)
- 89. use PhoneGap • most mobile browsers • supports „any“ web app (jQuery Mobile / Sencha) • Access to some device functions • Deliver „native“ app (via AppStore)
- 90. use Appcelerator • iOS / Android „native“ native app (AppStore) • use all native components of device • high learning curve • Commercial developer licenses, basic functionality free
- 91. Want to learn more?
Notes de l'éditeur
- \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