FINHTML5 - Breaking the mobile web

2,180 views

Published on

Talk at FINHTML5 Helsinki Finland.

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,180
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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. we can create 1- websites Using the browser URL Web Server
  11. 11. we can create 2- webapps
  12. 12. we can create 2- webapps Browser to install Full-screen Icon on home screen Web Server
  13. 13. ( webapps are also known as full screen webapps home screen webapps )
  14. 14. we can create 3- native webapps
  15. 15. we can create 3- native webapps Package, compile, sign Icon on home screen App Store No web server
  16. 16. ( native webapps are also known as hybrid apps packaged webapps )
  17. 17. mobile 1- websites 2- apps
  18. 18. mobile 1- websites 2- apps a- native b- webapps c- native webapps
  19. 19. web platforms
  20. 20. web platforms How many browsers do you know on desktop?
  21. 21. web platforms 5
  22. 22. web platforms How many browsers do you know on mobile?
  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. web platforms Proxy browsers
  53. 53. web platforms And it’s not just browsers!
  54. 54. web platforms Web View
  55. 55. web platforms Web View
  56. 56. web platforms Web View
  57. 57. web platforms Web View
  58. 58. web platforms Official (native) webapp platforms
  59. 59. web platforms Official (native) webapp 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 device px 300 390 450 600 672 900 ! px ratio 1.00 1.30 1.50 2.00 2.24 3.00
  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> devPxRatio = 2 canvasPxRatio = 1 300px
  89. 89. hi res canvas <canvas width="300" height="200"> </canvas> devPxRatio >= 1 canvasPxRatio = undefined 300px
  90. 90. hi res canvas Solution #1
  91. 91. hi res canvas <meta name="viewport" content="width=640"> ! <canvas width="600" height="400"> </canvas> 600px
  92. 92. hi res canvas Solution #2
  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> <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px
  95. 95. hi res canvas <canvas width="600" height="400" style="width: 300px; height: 200px"> </canvas> <script>
 document.querySelector("canvas") .getContext("2d") .setScale(2, 2); </script> 300px
  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. screen densities 300 CSS pixels device px 300 390 450 600 672 900 ! px ratio 1.00 1.30 1.50 2.00 2.24 3.00
  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. @media (-webkit-device-pixel-ratio: 2) always query on ranges
  139. 139. @media (-webkit-min-device-pixel-ratio: 1.7) always query on ranges
  140. 140. 300x300 900x900 find the balance
  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 UN DO <title>My long title for SEO</title>C <meta name="apple-web-app-title" content="My App"> UM EN TE D
  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. GDK vs cloud Mirror API native
  226. 226. https
  227. 227. content https
  228. 228. content https actions
  229. 229. content https actions http(s)
  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 thank you! Next Tuesday @ Tallin Mobile HTML5 Workshop
 topconf.com firtman@gmail.com @firt Pictures)from)freedigitalphotos.net) firt.mobi/pmw

×