Successfully reported this slideshow.
Your SlideShare is downloading. ×

FINHTML5 - Breaking the mobile web

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 267 Ad

More Related Content

Slideshows for you (15)

Advertisement

Similar to FINHTML5 - Breaking the mobile web (20)

More from Maximiliano Firtman (20)

Advertisement

Recently uploaded (20)

FINHTML5 - Breaking the mobile web

  1. 1. Max Firtman @firt ! ! BREAKING LIMITS ON MOBILE HTML5 ! ! ! ! Helsinki, Oct 31, 2013
  2. 2. questions yes, please ! QA at the end
  3. 3. agenda Mobile HTML5 Hacks for breaking limits Next step: Google Glass
  4. 4. mobile development
  5. 5. mobile 1- websites 2- apps
  6. 6. mobile 1- websites 2- apps
  7. 7. mobile 1- websites 2- apps
  8. 8. with html5 we can create...
  9. 9. we can create 1- websites
  10. 10. Using the browser URL Web Server 1- websites we can create
  11. 11. we can create 2- webapps
  12. 12. Browser to install Full-screen Icon on home screen Web Server 2- webapps we can create
  13. 13. full screen webapps home screen webapps webapps are also known as ( )
  14. 14. we can create 3- native webapps
  15. 15. Package, compile, sign Icon on home screen App Store No web server 3- native webapps we can create
  16. 16. hybrid apps packaged webapps native webapps are also known as ( )
  17. 17. mobile 1- websites 2- apps
  18. 18. a- native b- webapps c- native webapps mobile 1- websites 2- apps
  19. 19. web platforms
  20. 20. How many browsers do you know on desktop? web platforms
  21. 21. 5 web platforms
  22. 22. How many browsers do you know on mobile? web platforms
  23. 23. ... web platforms
  24. 24. Android Browser
  25. 25. Android Browser 2.2
  26. 26. Android Browser 2.3
  27. 27. Android Browser 4.x
  28. 28. Did I mention it is NOT Google Chrome? ( )
  29. 29. Google Chrome
  30. 30. Google Chrome Android
  31. 31. Google Chrome iOS
  32. 32. Safari on iOS
  33. 33. Opera
  34. 34. Opera Mobile
  35. 35. Opera Mini
  36. 36. Opera for Android
  37. 37. Firefox
  38. 38. Firefox OS
  39. 39. Internet Explorer
  40. 40. BlackBerry Browser 5-7.x
  41. 41. BlackBerry Browser 5-7.x
  42. 42. BlackBerry Browser PB
  43. 43. BlackBerry Browser BB10
  44. 44. Nokia Browser
  45. 45. Nokia Browser Symbian
  46. 46. Nokia Browser MeeGo
  47. 47. Nokia Browser Series 40
  48. 48. Silk
  49. 49. UC Web
  50. 50. Dolfin
  51. 51. should I continue? ( )
  52. 52. Proxy browsers web platforms
  53. 53. And it’s not just browsers! web platforms
  54. 54. Web View web platforms
  55. 55. Web View web platforms
  56. 56. Web View web platforms
  57. 57. Web View web platforms
  58. 58. Official (native) webapp platforms web platforms
  59. 59. Official (native) webapp platforms web platforms
  60. 60. unknown future
  61. 61. 2013: glasses
  62. 62. hacks, why?
  63. 63. 1- UI hacks
  64. 64. UI Full screen
  65. 65. full screen
  66. 66. full screen 3 solutions
  67. 67. full screen Solution #1
  68. 68. full screen <meta name="apple-mobile-web-app-capable" content="yes">
  69. 69. full screen <meta name="mobile-web-app-capable" content="yes">
  70. 70. full screen <meta name="apple-mobile-web-app-capable" content="yes"> if (navigator.standalone) { }
  71. 71. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=320.1">
  72. 72. full screen <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="..." media="device-height: 568px">
  73. 73. full screen
  74. 74. full screen Solution #2 future platforms
  75. 75. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); }
  76. 76. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); }
  77. 77. full screen var body = document.documentElement; ! if (body.requestFullScreen) { body.requestFullScreen(); } else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen(); } else if (body.mozRequestFullScreen) { body.mozRequestFullScreen(); }
  78. 78. full screen Solution #3 ...
  79. 79. full screen window.addEventListener("load", function() { window.scrollTo(0, 0); }); ! // use with care document.addEventListener("touchmove", function(e) { e.preventDefault() });
  80. 80. UI Snapped mode Windows 8
  81. 81. snapped mode
  82. 82. snapped mode @media only screen and (max-width: 400px) { @-ms-viewport {  width: 320px;  } }
  83. 83. UI High resolution canvas
  84. 84. hi-res canvas <canvas width="300" height="200"> </canvas> 300px
  85. 85. hi-res canvas 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 ! device px px ratio
  86. 86. hi res canvas <canvas width="300" height="200"> </canvas> 300px
  87. 87. hi res canvas var devPxRatio = window.devicePixelRatio; ! var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;
  88. 88. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio = 2 canvasPxRatio = 1
  89. 89. hi res canvas <canvas width="300" height="200"> </canvas> 300px devPxRatio >= 1 canvasPxRatio = undefined
  90. 90. Solution #1 hi res canvas
  91. 91. hi res canvas <meta name="viewport" content="width=640"> ! <canvas width="600" height="400"> </canvas> 600px
  92. 92. Solution #2 hi res canvas
  93. 93. hi res canvas <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px
  94. 94. hi res canvas <canvas width="600" height="400"> </canvas> 300px <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script>
  95. 95. hi res canvas <canvas width="600" height="400" style="width: 300px; height: 200px"> </canvas> 300px <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script>
  96. 96. multi-platform & multi-resolution
  97. 97. execution & memory
  98. 98. UI truly numeric field
  99. 99. numeric <input type="number">
  100. 100. numeric <input type="number">
  101. 101. numeric <input type="number">
  102. 102. Solution
  103. 103. numeric <input type="number" pattern="[0-9]*">
  104. 104. numeric <input type="password" pattern="[0-9]*">
  105. 105. UI rich editor
  106. 106. rich editor <ul contenteditable> <li>First item </ul>
  107. 107. rich editor <ul contenteditable> <li>First item </ul>
  108. 108. rich editor <ul contenteditable> <li>First item </ul>
  109. 109. UI background tab resurrection
  110. 110. background
  111. 111. background
  112. 112. <marquee>Welcome to my website!</marquee>
  113. 113. <font family="Arial" size="20">
  114. 114. background <meta http-equiv="refresh" content="60">
  115. 115. background <meta http-equiv="refresh" content="2"> !
  116. 116. background <meta http-equiv="refresh" content="2"> ! <script> var mr = document.querySelector("meta"); setInterval(function() { mr.content=mr.content; }, 1000); </script>
  117. 117. background
  118. 118. DISCLAIMER
  119. 119. only from iOS 6.1
  120. 120. UI images for different screen densities
  121. 121. screen densities <img src="photo.png" width="300">
  122. 122. screen densities
  123. 123. 300 CSS pixels 300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 ! device px px ratio screen densities
  124. 124. Solution #1
  125. 125. screen densities use vector images <img src="photo.svg" width="300"> <svg></svg> @font-face {}
  126. 126. screen densities
  127. 127. screen densities
  128. 128. Solution #2
  129. 129. screen densities <img src="photo.png" width="300"> if (window.devicePixelRatio > 1.5) { // change URL }
  130. 130. Solution #3
  131. 131. screen densities <div id="photoContainer"> #photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px; }
  132. 132. Solution #4
  133. 133. screen densities <div id="photoContainer"> #photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px; }
  134. 134. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5) { #photoContainer { background-image: url('photo-hi.png'); background-size: 100%; width: 300px; height: 200px; } }
  135. 135. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) { ! ! ! ! ! }
  136. 136. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2) { ! ! ! ! }
  137. 137. screen densities <div id="photoContainer"> @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2), (min-resolution: 1.5dppx) { ! ! ! }
  138. 138. always query on ranges @media (-webkit-device-pixel-ratio: 2)
  139. 139. always query on ranges @media (-webkit-min-device-pixel-ratio: 1.7)
  140. 140. find the balance 300x300 900x900
  141. 141. 2- device interaction hacks
  142. 142. device media capture
  143. 143. media capture <input type="file">
  144. 144. Solution
  145. 145. media capture <input type="file" accept="image/*"> <input type="file" accept="video/*"> <input type="file" accept="audio/*">
  146. 146. media capture <input type="file" accept="image/*" capture="camera"> <input type="file" accept="video/*" capture="camcorder"> <input type="file" accept="video/*" capture="microphone"> (old spec)
  147. 147. media capture Live demo
  148. 148. device interacting with native apps
  149. 149. native integration
  150. 150. Solution, part I
  151. 151. DON'T DO THAT
  152. 152. Solution, part II
  153. 153. native integration <meta name="apple-itunes-app" content="app-id=999">
  154. 154. native integration
  155. 155. native integration <meta name="apple-itunes-app" content="app-id=999"> <meta name="app-argument" content="">
  156. 156. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage">
  157. 157. native integration
  158. 158. native integration
  159. 159. native integration
  160. 160. native integration <meta name="msApplication-ID" content="App"> <meta name="msApplication-PackageFamilyName" content="myPackage"> ! <meta name="msApplication-Arguments" content=""> !
  161. 161. no api no android
  162. 162. Solution, part III
  163. 163. native integration <a href="customprotocol://">Open app</a> !
  164. 164. native integration <a href="twitter://post?message=HTML5"> Tweet this</a> !
  165. 165. native integration
  166. 166. native integration function tweet() { location.href="twitter://post?message=HTML5"; setTimeout(function() { location.href="postCall.html"; }, 1000); } !
  167. 167. native integration
  168. 168. native integration function tweet() { iframe.location.href= "twitter://post?message=HTML5"; setTimeout(function() { appNotInstalled(); }, 1000); } !
  169. 169. device push notification
  170. 170. push <a href="suscription.passbook"> Subscribe to this site </a>
  171. 171. push
  172. 172. push
  173. 173. 3- enhancing your app hacks
  174. 174. enhance your app iOS home screen title
  175. 175. home screen
  176. 176. home screen
  177. 177. home screen <title>My long title for SEO</title> <meta name="apple-web-app-title" content="My App"> UNDOCUMENTED
  178. 178. enhance your app Changing tint iOS 7
  179. 179. tint body { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ }
  180. 180. enhance your app IE10 Live Tile
  181. 181. live tile
  182. 182. live tile
  183. 183. live tile <meta name="msapplication-TileImage" content="tile.png"> ! <meta name="msapplication-TileColor" content="#ef0303">
  184. 184. enhance your app You've said live tile!!!
  185. 185. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! !
  186. 186. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! <?xml version="1.0" ?> <badge value="3" /> !
  187. 187. live tile <meta name="msapplication-badge" content="frequency=60;polling-uri=XXX"> ! <?xml version="1.0" ?> <badge value="newMessage" /> !
  188. 188. enhance your app It’s even better on IE11
  189. 189. enhance your app Storage limits
  190. 190. storage AppCache, localStorage, WebSQL, IDB
  191. 191. storage Different domains, iframes and Cross Document Messaging API !
  192. 192. storage
  193. 193. this might not work in the future
  194. 194. do you really need more space?
  195. 195. 4- tools
  196. 196. Tools Bandwidth simulators
  197. 197. netlimiter.com
  198. 198. slowyapp.com
  199. 199. charlesproxy.com
  200. 200. Tools Virtual Mobile Labs
  201. 201. developer.nokia.com
  202. 202. developer.samsung.com
  203. 203. keynotedeviceanywhere.com
  204. 204. most used key combinations?
  205. 205. Tools Live Reload
  206. 206. livereload.com
  207. 207. wrapping up
  208. 208. we need hacks because • browsers are different • no enough information • undocumented features • buggy
  209. 209. however • usability and Performance matters • be careful • your app should work anyway • use feature detection
  210. 210. “change is the only constant“ Heraclitus
  211. 211. 1- glass experience
  212. 212. quick video ( )
  213. 213. MYTHS
  214. 214. Notifications on your head
  215. 215. Notifications on your head
  216. 216. Your content is not so important
  217. 217. specs nHD transparent 640x360 25" - 2.5m / 8 ft away
  218. 218. specs Sensors
  219. 219. specs Camera
  220. 220. specs Multi-touch panel
  221. 221. specs wifi bluetooth
  222. 222. specs Android 4.0
  223. 223. specs bone conduction transducer
  224. 224. quick demo ( )
  225. 225. native GDK vs cloud Mirror API
  226. 226. https
  227. 227. https content
  228. 228. https content actions
  229. 229. https http(s) content actions
  230. 230. glassware
  231. 231. glassware
  232. 232. timeline past, now, future
  233. 233. quick demo ( )
  234. 234. timeline timeline items = card
  235. 235. timeline card
  236. 236. code! built-in menu items share navigate to read aloud delete voice call reply toggle pin view website
  237. 237. timeline contextual events geolocation !
  238. 238. browser invocation google search card's action
  239. 239. quick demo ( )
  240. 240. browser interaction scroll point and click
  241. 241. browser responsive web design mobile user agent width: 427px pixel ratio: 1.5
  242. 242. browser html5 video, audio devicemotion scroll and touch events no geo, speech, camera yet
  243. 243. timeline contextual events geolocation share
  244. 244. timeline contextual events geolocation share launch "ok glass" menu
  245. 245. glass - understand the experience - mirror api vs gdk vs browser - Glassware cloud-based - it's just the beginning
  246. 246. you can reach a good experience Pictures)from)freedigitalphotos.net) thank you! firtman@gmail.com @firt firt.mobi/pmw Next Tuesday @ Tallin Mobile HTML5 Workshop
 topconf.com

×