Talk at FINHTML5 Helsinki Finland.

1. Max Firtman @firt
!
!
BREAKING LIMITS
ON MOBILE
HTML5
!
!
!
!
Helsinki, Oct 31, 2013

6. questions
yes, please
!
QA at the end

7. agenda
Mobile HTML5
Hacks for breaking limits
Next step: Google Glass

8. mobile
development

9. mobile
1- websites
2- apps

10. mobile
1- websites
2- apps

11. mobile
1- websites
2- apps

12. with html5
we can create...

13. we can create
1- websites

14. Using the browser
URL
Web Server
1- websites
we can create

15. we can create
2- webapps

16. Browser to install
Full-screen
Icon on home screen
Web Server
2- webapps
we can create

17. full screen webapps
home screen webapps
webapps are also known as
(
)

18. we can create
3- native webapps

19. Package, compile, sign
Icon on home screen
App Store
No web server
3- native webapps
we can create

20. hybrid apps
packaged webapps
native webapps are also
known as
(
)

21. mobile
1- websites
2- apps

22. a- native
b- webapps
c- native webapps
mobile
1- websites
2- apps

23. web platforms

24. How many browsers
do you know on
desktop?
web platforms

25. 5
web platforms

26. How many browsers
do you know on
mobile?
web platforms

27. ...
web platforms

29. Android Browser

30. Android Browser 2.2

31. Android Browser 2.3

32. Android Browser 4.x

33. Did I mention it is NOT
Google Chrome?
(
)

34. Google Chrome

35. Google Chrome Android

36. Google Chrome iOS

37. Safari on iOS

38. Opera

39. Opera Mobile

40. Opera Mini

41. Opera for Android

42. Firefox

43. Firefox OS

44. Internet Explorer

45. BlackBerry Browser 5-7.x

46. BlackBerry Browser 5-7.x

47. BlackBerry Browser PB

48. BlackBerry Browser BB10

49. Nokia Browser

50. Nokia Browser Symbian

51. Nokia Browser MeeGo

52. Nokia Browser Series 40

53. Silk

54. UC Web

55. Dolfin

56. should I continue?
(
)

57. Proxy browsers
web platforms

58. And it’s not just
browsers!
web platforms

59. Web View
web platforms

60. Web View
web platforms

61. Web View
web platforms

62. Web View
web platforms

63. Official (native)
webapp platforms
web platforms

64. Official (native)
webapp platforms
web platforms

65. unknown future

66. 2013: glasses

67. hacks, why?

70. 1- UI hacks

71. UI
Full screen

72. full screen

73. full screen
3 solutions

74. full screen
Solution #1

75. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">

76. full screen
<meta name="mobile-web-app-capable"
content="yes">

77. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
if (navigator.standalone) { }

78. full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=320.1">

79. 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">

80. full screen

81. full screen
Solution #2
future platforms

82. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
}

83. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
}

84. full screen
var body = document.documentElement;
!
if (body.requestFullScreen) {
body.requestFullScreen();
} else if (body.webkitRequestFullScreen) {
body.webkitRequestFullScreen();
} else if (body.mozRequestFullScreen) {
body.mozRequestFullScreen();
}

85. full screen
Solution #3
...

86. full screen
window.addEventListener("load",
function() { window.scrollTo(0, 0); });
!
// use with care
document.addEventListener("touchmove",
function(e) { e.preventDefault() });

87. UI
Snapped mode
Windows 8

88. snapped mode

89. snapped mode
@media only screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}

90. UI
High resolution
canvas

91. hi-res canvas
<canvas width="300" height="200">
</canvas>
300px

92. 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

93. hi res canvas
<canvas width="300" height="200">
</canvas>
300px

94. hi res canvas
var devPxRatio = window.devicePixelRatio;
!
var canvasPxRatio =
document.querySelector("canvas")
.getContext("2d")
.webkitBackingStorePixelRatio;

95. hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio = 2
canvasPxRatio = 1

96. hi res canvas
<canvas width="300" height="200">
</canvas>
300px
devPxRatio >= 1
canvasPxRatio = undefined

97. Solution #1
hi res canvas

98. hi res canvas
<meta name="viewport" content="width=640">
!
<canvas width="600" height="400">
</canvas>
600px

99. Solution #2
hi res canvas

100. hi res canvas
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>
300px

101. hi res canvas
<canvas width="600" height="400">
</canvas>
300px
<script>
document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>

102. 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>

103. multi-platform &
multi-resolution

104. execution &
memory

105. UI
truly numeric field

106. numeric
<input type="number">

107. numeric
<input type="number">

108. numeric
<input type="number">

109. Solution

110. numeric
<input type="number"
pattern="[0-9]*">

111. numeric
<input type="password"
pattern="[0-9]*">

112. UI
rich editor

113. rich editor
<ul contenteditable>
<li>First item
</ul>

114. rich editor
<ul contenteditable>
<li>First item
</ul>

115. rich editor
<ul contenteditable>
<li>First item
</ul>

116. UI
background tab
resurrection

117. background

118. background

119. <marquee>Welcome to my website!</marquee>

120. <font family="Arial" size="20">

121. background
<meta http-equiv="refresh"
content="60">

122. background
<meta http-equiv="refresh" content="2">
!

123. background
<meta http-equiv="refresh" content="2">
!
<script>
var mr = document.querySelector("meta");
setInterval(function() {
mr.content=mr.content;
}, 1000);
</script>

125. background

126. DISCLAIMER

127. only from iOS 6.1

128. UI
images for different
screen densities

129. screen densities
<img src="photo.png" width="300">

130. screen densities

131. 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

132. Solution #1

133. screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}

134. screen densities

135. screen densities

136. Solution #2

137. screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) {
// change URL
}

138. Solution #3

139. 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;
}

140. Solution #4

141. screen densities
<div id="photoContainer">
#photoContainer {
background-image: url('photo-lo.png');
width: 300px; height: 200px;
}

142. 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;
}
}

143. screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5) {
!
!
!
!
!
}

144. 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) {
!
!
!
!
}

145. 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) {
!
!
!
}

146. always query
on ranges
@media (-webkit-device-pixel-ratio: 2)

147. always query
on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)

148. find the balance
300x300 900x900

149. 2- device
interaction hacks

150. device
media capture

151. media capture
<input type="file">

152. Solution

153. media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">

154. 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)

155. media capture
Live demo

156. device
interacting with
native apps

157. native integration

159. Solution, part I

160. DON'T DO THAT

161. Solution, part II

162. native integration
<meta name="apple-itunes-app"
content="app-id=999">

163. native integration

164. native integration
<meta name="apple-itunes-app"
content="app-id=999">
<meta name="app-argument"
content="">

165. native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">

166. native integration

167. native integration

168. native integration

169. native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPackage">
!
<meta name="msApplication-Arguments"
content="">
!

170. no api
no android

171. Solution, part III

172. native integration
<a href="customprotocol://">Open app</a>
!

173. native integration
<a href="twitter://post?message=HTML5">
Tweet this</a>
!

174. native integration

175. native integration
function tweet() {
location.href="twitter://post?message=HTML5";
setTimeout(function() {
location.href="postCall.html";
}, 1000);
}
!

176. native integration

177. native integration
function tweet() {
iframe.location.href=
"twitter://post?message=HTML5";
setTimeout(function() {
appNotInstalled();
}, 1000);
}
!

178. device
push notification

179. push
<a href="suscription.passbook">
Subscribe to this site
</a>

180. push

181. push

182. 3- enhancing your
app hacks

183. enhance your app
iOS home screen title

184. home screen

185. home screen

186. home screen
<title>My long title for SEO</title>
<meta name="apple-web-app-title"
content="My App">
UNDOCUMENTED

187. enhance your app
Changing tint iOS 7

188. tint
body {
background-color: blue; /* for the tint */
background-image: linear-gradient(to bottom, green 0%,
green 100%); /* for the body */
}

189. enhance your app
IE10 Live Tile

190. live tile

191. live tile

192. live tile
<meta name="msapplication-TileImage"
content="tile.png">
!
<meta name="msapplication-TileColor"
content="#ef0303">

193. enhance your app
You've said live tile!!!

194. live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
!

195. live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
<?xml version="1.0" ?>
<badge value="3" />
!

196. live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
<?xml version="1.0" ?>
<badge value="newMessage" />
!

197. enhance your app
It’s even better on
IE11

198. enhance your app
Storage limits

199. storage
AppCache, localStorage,
WebSQL, IDB

200. storage
Different domains,
iframes and
Cross Document Messaging API
!

201. storage

202. this might not work
in the future

203. do you really need
more space?

204. 4- tools

205. Tools
Bandwidth
simulators

206. netlimiter.com

207. slowyapp.com

208. charlesproxy.com

209. Tools
Virtual Mobile Labs

210. developer.nokia.com

211. developer.samsung.com

212. keynotedeviceanywhere.com

213. most used key
combinations?

216. Tools
Live Reload

217. livereload.com

218. wrapping up

219. we need hacks because
• browsers are different
• no enough information
• undocumented features
• buggy

220. however
• usability and Performance matters
• be careful
• your app should work anyway
• use feature detection

222. “change is the only constant“
Heraclitus

223. 1- glass experience

224. quick video
( )

225. MYTHS

235. Notifications on
your head

236. Notifications on
your head

237. Your content is
not so important

238. specs
nHD transparent
640x360
25" - 2.5m / 8 ft away

239. specs
Sensors

240. specs
Camera

241. specs
Multi-touch panel

242. specs
wifi
bluetooth

243. specs
Android 4.0

244. specs
bone conduction
transducer

245. quick demo
( )

246. native GDK
vs
cloud Mirror API

247. https

248. https
content

249. https
content
actions

250. https
http(s)
content
actions

251. glassware

252. glassware

253. timeline
past, now, future

254. quick demo
( )

255. timeline
timeline items = card

256. timeline
card

257. code!
built-in menu items
share
navigate to
read aloud
delete
voice call
reply
toggle pin
view website

258. timeline
contextual events
geolocation
!

259. browser
invocation
google search
card's action

260. quick demo
( )

261. browser
interaction
scroll
point and click

262. browser
responsive web design
mobile user agent
width: 427px
pixel ratio: 1.5

263. browser
html5
video, audio
devicemotion
scroll and touch events
no geo, speech, camera yet

264. timeline
contextual events
geolocation
share

265. timeline
contextual events
geolocation
share
launch "ok glass" menu

266. glass
- understand the experience
- mirror api vs gdk vs browser
- Glassware cloud-based
- it's just the beginning

267. 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