Your SlideShare is downloading. ×
0
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Building HTML5 Tablet Apps for iOS and Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building HTML5 Tablet Apps for iOS and Android

64,085

Published on

Published in: Technology, Design
5 Comments
116 Likes
Statistics
Notes
No Downloads
Views
Total Views
64,085
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
5
Likes
116
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Building HTML5Tablet Appsfor iOS and Android@skirchmeier@mikebollingerMINNEWEBCON 2012
  • 2. The elephant in the room:!HTML5 apps kinda suck.
  • 3. Native vs. HTML5
  • 4. Native HTML5-- Expensive to develop + Cheaper to develop-- One platform at a time + All platforms at a time+ Snappy -- Slower+ Refined (true native feel) -- Unrefined+ Full featured -- Limited features
  • 5. Reasons
  • 6. 1Money
  • 7. 2Time
  • 8. 3Audience
  • 9. 4Control
  • 10. 1 2 3 4Money Time Audience Control
  • 11. 5 T A B L E T S   H A V E   F L E X I B L E  Design Patterns
  • 12. 1 2 3 4Money Time Audience Control 5 Flexible Design Patterns
  • 13. Change the game.
  • 14. Examples
  • 15. Best Buyhttp://bby-uv.appspot.com/ Financial Times http://app.ft.com Proof http://proofwhisky.com
  • 16. Best Buy http://bby-uv.appspot.com/iOS Only >! Financial Times http://app.ft.comiOS Only >! Proof http://proofwhisky.com
  • 17. Frameworks
  • 18. jQuery Mobile jQTouch Sencha Touch
  • 19. Native Wrappers
  • 20. PhoneGap Titanium
  • 21. Our Custom App
  • 22. http://livefront.com/explore
  • 23. How do we build this?
  • 24. Step 1:Travel the world
  • 25. Step 2:HTML (sorry)
  • 26. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 27. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 28. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 29. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 30. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 31. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 32. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 33. <div id="content" class="page"> <div id="map"></div> <div id="photos"> <div id="slides-container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <section id="slide-info"> <h1></h1> <div id="slide-details"> <p></p> <p class="location"></p> </div> </section> </div></div>
  • 34. <div id="content" class="page"> <div id="map"></div> <div id="photos"> <div id="slides-container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <section id="slide-info"> <h1></h1> <div id="slide-details"> <p></p> <p class="location"></p> </div> </section> </div></div>
  • 35. <div id="content" class="page"> <div id="map"></div> <div id="photos"> <div id="slides-container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <section id="slide-info"> <h1></h1> <div id="slide-details"> <p></p> <p class="location"></p> </div> </section> </div></div>
  • 36. <div id="content" class="page"> <div id="map"></div> <div id="photos"> <div id="slides-container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <section id="slide-info"> <h1></h1> <div id="slide-details"> <p></p> <p class="location"></p> </div> </section> </div></div>
  • 37. <!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 38. Techniques
  • 39. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 40. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 41. Transitions Two ways to animate: 1. jQuery (.animate) 2. CSS (-webkit-transform)  
  • 42. Transitions Two ways to animate: 1. jQuery (.animate) 2. CSS (-webkit-transform)  
  • 43. TransitionsWhat can we do with CSS?
  • 44. Transitions -webkit-transform translate scale skew rotate -webkit-animation
  • 45. Transitions -webkit-transform translate scale skew rotate -webkit-animation
  • 46. Transitions<!DOCTYPE html><html> <head> ... </head> <body> <div id="container"> <div id="splash" class="page"> ... </div> <div id="content" class="page"> ... </div> </div> </body></html>
  • 47. Transitions div#splash div#content -webkit-transform: translate3d(100%, 0, 0);
  • 48. Transitions div#splash div#content-webkit-transition: -webkit-transform: all 600ms ease-in-out; translate3d(100%, 0, 0);-webkit-transform: translate3d(0, 0, 0);  
  • 49. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 50. Touch EventsHow touch events work
  • 51. Touch Events Touch Multi-Touch GestureiOS P P PAndroid 2.3 PAndroid 3 P PAndroid 4 P P
  • 52. Touch Events Touch Multi-Touch GestureiOS P P PAndroid 2.3 PAndroid 3 P PAndroid 4 P P
  • 53. Touch Events touchstart touchmove touchend touchcancel
  • 54. Touch Eventsslides.bind(touchstart, function (e) { if (touchId !== null) { e.stopPropagation(); e.preventDefault(); } else { var touch = e.originalEvent.touches[0]; touchId = touch.identifier; touchStart(touch.clientX); }});
  • 55. Touch Eventsslides.bind(touchstart, function (e) { if (touchId !== null) { e.stopPropagation(); e.preventDefault(); } else { var touch = e.originalEvent.touches[0]; touchId = touch.identifier; touchStart(touch.clientX); }});
  • 56. Touch Eventsslides.bind(touchstart, function (e) { if (touchId !== null) { e.stopPropagation(); e.preventDefault(); } else { var touch = e.originalEvent.touches[0]; touchId = touch.identifier; touchStart(touch.clientX); }});
  • 57. Touch Eventsslides.bind(touchstart, function (e) { if (touchId !== null) { e.stopPropagation(); e.preventDefault(); } else { var touch = e.originalEvent.touches[0]; touchId = touch.identifier; touchStart(touch.clientX); }});
  • 58. Touch Eventsslides.bind(touchmove, function (e) { var touch = e.originalEvent.touches[0]; if (touch.identifier == touchId) { touchMove(touch.clientX); }});
  • 59. Touch Eventsslides.bind(touchend, function (e) { var touch = e.originalEvent.changedTouches[0]; if (touch.identifier == touchId) { touchEnd(touch.clientX); }});
  • 60. Touch Eventsfunction touchEnd(x) { ... if (Math.abs(deltaX) > threshold) { swipe(direction); } else if (Math.abs(deltaX) >Config.slideshowSwipeDistanceThreshold &&touchDuration <Config.slideshowSwipeDurationThreshold) { swipe(direction); } else { snapBack(); }}
  • 61. Touch Eventsfunction touchEnd(x) { ... if (Math.abs(deltaX) > threshold) { swipe(direction); } else if (Math.abs(deltaX) >Config.slideshowSwipeDistanceThreshold &&touchDuration <Config.slideshowSwipeDurationThreshold) { swipe(direction); } else { snapBack(); }}
  • 62. Touch Eventsfunction touchEnd(x) { ... if (Math.abs(deltaX) > threshold) { swipe(direction); } else if (Math.abs(deltaX) >Config.slideshowSwipeDistanceThreshold &&touchDuration <Config.slideshowSwipeDurationThreshold) { swipe(direction); } else { snapBack(); }}
  • 63. Touch Eventsfunction touchEnd(x) { ... if (Math.abs(deltaX) > threshold) { swipe(direction); } else if (Math.abs(deltaX) >Config.slideshowSwipeDistanceThreshold &&touchDuration <Config.slideshowSwipeDurationThreshold) { swipe(direction); } else { snapBack(); }}
  • 64. Touch Eventsfunction touchEnd(x) { ... if (Math.abs(deltaX) > threshold) { swipe(direction); } else if (Math.abs(deltaX) >Config.slideshowSwipeDistanceThreshold &&touchDuration <Config.slideshowSwipeDurationThreshold) { swipe(direction); } else { snapBack(); }}
  • 65. Touch Events<div id="content" class="page"> <div id="map"></div> <div id="photos"> <div id="slides-container"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <section id="slide-info"> <h1></h1> <div id="slide-details"> <p></p> <p class="location"></p> </div> </section> </div></div>
  • 66. Touch Events
  • 67. Touch Events div#slides-containerdiv.slide div.slide div.slide
  • 68. Touch Events div#slides-containerdiv.slide div.slide div.slide
  • 69. Touch EventsGotcha #1: Android browser
  • 70. Touch EventsGotcha #1: Android browser
  • 71. Touch EventsGotcha #1: Android browser <img> vs. background-image
  • 72. Touch EventsGotcha #2: Mobile Safari Bounce $(document).bind(touchmove’, function(event){ event.preventDefault(); });
  • 73. Touch EventsGotcha #3: Testing on Desktop var hasTouch = ontouchstart in document.documentElement; var touchstart = hasTouch ? touchstart : mousedown; var touchmove = hasTouch ? touchmove : mousemove; var touchend = hasTouch ? touchend : mouseup;
  • 74. Touch EventsGotcha #4: Click Events are Slow Click Event vs. Touch Event
  • 75. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 76. Hardware (GPS) JS - iOS JS - Android PhoneGapAccelerometer P PCompass P PGyroscope P PCamera PContacts PLocal Storage P P PGeolocation P P PNotifications P
  • 77. Hardware (GPS) JS - iOS JS - Android PhoneGapAccelerometer P PCompass P PGyroscope P PCamera PContacts PLocal Storage P P PGeolocation P P PNotifications P
  • 78. Hardware (GPS)
  • 79. Hardware (GPS)function displayCurrentLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { var lat = position.coords.latitude; var lng = position.coords.longitude; ... // Display lat/lng } ); } };
  • 80. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 81. Work Offline Local Storage
  • 82. Work Offline Gotcha: 5mb
  • 83. Work Offlinevar hasLocalStorage = (function () { try { localStorage.setItem(test, test); localStorage.removeItem(test); return true; } catch(e) { return false; }})();
  • 84. Work Offlinevar localStoragePhotoData = null;if (hasLocalStorage) { localStoragePhotoData = localStorage.getItem(key);}if (localStoragePhotoData === null) { if (hasLocalStorage) { // Save photo data to localStorage. var photoDataString = JSON.stringify(PhotoData); localStorage.setItem(key); ... }} else { // Use photo data cached in localStorage. var photoDataObject = JSON.parse(localStoragePhotoData); ...}
  • 85. Work Offlinevar localStoragePhotoData = null;if (hasLocalStorage) { localStoragePhotoData = localStorage.getItem(key);}if (localStoragePhotoData === null) { if (hasLocalStorage) { // Save photo data to localStorage. var photoDataString = JSON.stringify(PhotoData); localStorage.setItem(key); ... }} else { // Use photo data cached in localStorage. var photoDataObject = JSON.parse(localStoragePhotoData); ...}
  • 86. Work Offlinevar localStoragePhotoData = null;if (hasLocalStorage) { localStoragePhotoData = localStorage.getItem(key);}if (localStoragePhotoData === null) { if (hasLocalStorage) { // Save photo data to localStorage. var photoDataString = JSON.stringify(PhotoData); localStorage.setItem(key); ... }} else { // Use photo data cached in localStorage. var photoDataObject = JSON.parse(localStoragePhotoData); ...}
  • 87. Work Offlinevar localStoragePhotoData = null;if (hasLocalStorage) { localStoragePhotoData = localStorage.getItem(key);}if (localStoragePhotoData === null) { if (hasLocalStorage) { // Save photo data to localStorage. var photoDataString = JSON.stringify(PhotoData); localStorage.setItem(key); ... }} else { // Use photo data cached in localStorage. var photoDataObject = JSON.parse(localStoragePhotoData); ...}
  • 88. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 89. Sizing Support different screens Handle rotation Hide browser chrome Disable zoomDisable other browser features
  • 90. SizingSupport different screens Easier in HTML than native % based layouts background-size: cover; Absolute positioning is often necessary
  • 91. SizingHandle rotation $(window).resize(doSomething);
  • 92. SizingHandle rotation $(window).resize(reposition);
  • 93. SizingHandle rotation Gotcha: You get notification after rotation is complete
  • 94. SizingHide browser chrome <meta name="apple-mobile-web-app-capable" content="yes" />
  • 95. SizingDisable zoom <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
  • 96. SizingDisable other browser features /* turn off default press states */ -webkit-tap-highlight-color: transparent; /* disable save image on long press */ -webkit-touch-callout: none; /* disable selection copy/paste */ -webkit-user-select: none; /* disable dragging images */ -webkit-user-drag: none;
  • 97. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 98. Distribution
  • 99. DistributionTwo ways to distribute:1. Web only Reminder to bookmark2. App gallery Custom native wrapper Framework like PhoneGap  
  • 100. DistributionTwo ways to distribute:1. Web only Reminder to bookmark2. App gallery Custom native wrapper Framework like PhoneGap  
  • 101. Distributionhttps://github.com/cubiq/ add-to-homescreen
  • 102. Distribution
  • 103. Distribution<link rel="stylesheet" href="styles/ add2home.css"><script type="application/javascript" src="scripts/external/add2home.js"></script>
  • 104. Distribution Home Screen Icon
  • 105. Distribution 144 x 144
  • 106. Distribution<link rel="apple-touch-icon" href="icon.png"/>
  • 107. Transitions Work OfflineTouch Events SizingHardware (GPS) Distribution
  • 108. Go explore.
  • 109. Thanks!@skirchmeier@mikebollingerMINNEWEBCON 2012
  • 110. APP:http://livefront.com/explore SOURCE CODE:http://github.com/livefront/minnewebcon2012-explore SLIDES:http://slideshare.net/livefront

×