Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Max Firtman @firt	

!
!

BREAKING LIMITS	

ON MOBILE	

HTML5 	

!

!

Helsinki, Oct 31, 2013	


!
!
questions
yes, please
!

QA at the end
agenda
Mobile HTML5
Hacks for breaking limits
Next step: Google Glass
mobile
development
mobile

1- websites
2- apps
mobile

1- websites
2- apps
mobile

1- websites
2- apps
with html5
we can create...
we can create

1- websites
we can create

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

2- webapps
we can create

2- webapps
Browser to install
Full-screen
Icon on home screen
Web Server
( webapps are also known as
full screen webapps
home screen webapps

)
we can create

3- native webapps
we can create

3- native webapps
Package, compile, sign
Icon on home screen
App Store
No web server
( native webapps are also
known as
hybrid apps
packaged webapps

)
mobile

1- websites
2- apps
mobile

1- websites
2- apps a- native
b- webapps
c- native webapps
web platforms
web platforms

How many browsers
do you know on
desktop?
web platforms

5
web platforms

How many browsers
do you know on
mobile?
web platforms

...
Android Browser
Android Browser 2.2
Android Browser 2.3
Android Browser 4.x
(
Did I mention it is NOT
Google Chrome?

)
Google Chrome
Google Chrome Android
Google Chrome iOS
Safari on iOS
Opera
Opera Mobile
Opera Mini
Opera for Android
Firefox
Firefox OS
Internet Explorer
BlackBerry Browser 5-7.x
BlackBerry Browser 5-7.x
BlackBerry Browser PB
BlackBerry Browser BB10
Nokia Browser
Nokia Browser Symbian
Nokia Browser MeeGo
Nokia Browser Series 40
Silk
UC Web
Dolfin
(
should I continue?

)
web platforms

Proxy browsers
web platforms

And it’s not just
browsers!
web platforms

Web View
web platforms

Web View
web platforms

Web View
web platforms

Web View
web platforms

Official (native)
webapp platforms
web platforms

Official (native)
webapp platforms
unknown future
2013: glasses
hacks, why?
1- UI hacks
UI

Full screen
full screen
full screen

3 solutions
full screen

Solution #1
full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
full screen
<meta name="mobile-web-app-capable"
content="yes">
full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
if (navigator.standalone) { }
full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=320.1">
full screen
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="viewport"
content="width=device-width">
<...
full screen
full screen

Solution #2
future platforms
full screen
var body = document.documentElement;
!

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

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

if (body.requestFullScreen) {
body.requestFullScreen();
} else if (bod...
...

full screen

Solution #3
full screen
window.addEventListener("load",
function() { window.scrollTo(0, 0); });
!

// use with care
document.addEventL...
UI

Snapped mode
Windows 8
snapped mode
snapped mode
@media only screen and (max-width: 400px) {
@-ms-viewport { 
width: 320px; 
}
}
UI

High resolution
canvas
hi-res canvas
<canvas width="300" height="200">
</canvas>

300px
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
hi res canvas
<canvas width="300" height="200">
</canvas>

300px
hi res canvas
var devPxRatio = window.devicePixelRatio;
!

var canvasPxRatio =
document.querySelector("canvas")
.getContex...
hi res canvas
<canvas width="300" height="200">
</canvas>

devPxRatio = 2
canvasPxRatio = 1

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

devPxRatio >= 1
canvasPxRatio = undefined

300px
hi res canvas

Solution #1
hi res canvas
<meta name="viewport" content="width=640">
!

<canvas width="600" height="400">
</canvas>

600px
hi res canvas

Solution #2
hi res canvas
<script>

document.querySelector("canvas")
.getContext("2d")
.setScale(2, 2);
</script>

300px
hi res canvas
<canvas width="600" height="400">
</canvas>
<script>

document.querySelector("canvas")
.getContext("2d")
.se...
hi res canvas
<canvas width="600" height="400"
style="width: 300px; height: 200px">
</canvas>
<script>

document.querySele...
multi-platform &
multi-resolution
execution &
memory
UI

truly numeric field
numeric
<input type="number">
numeric
<input type="number">
numeric
<input type="number">
Solution
numeric
<input type="number"
pattern="[0-9]*">
numeric
<input type="password"
pattern="[0-9]*">
UI

rich editor
rich editor
<ul contenteditable>
<li>First item
</ul>
rich editor
<ul contenteditable>
<li>First item
</ul>
rich editor
<ul contenteditable>
<li>First item
</ul>
UI

background tab
resurrection
background
background
<marquee>Welcome to my website!</marquee>
<font family="Arial" size="20">
background
<meta http-equiv="refresh"
content="60">
background
<meta http-equiv="refresh" content="2">
!
background
<meta http-equiv="refresh" content="2">
!

<script>
var mr = document.querySelector("meta");
setInterval(functi...
background
DISCLAIMER
only from iOS 6.1
UI

images for different
screen densities
screen densities
<img src="photo.png" width="300">
screen densities
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
Solution #1
screen densities
use vector images
<img src="photo.svg" width="300">
<svg></svg>
@font-face {}
screen densities
screen densities
Solution #2
screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) {
// change URL
}
Solution #3
screen densities
<div id="photoContainer">
#photoContainer {
background-image:
-webkit-image-set(url('photo-lo.png') 1x,
u...
Solution #4
screen densities
<div id="photoContainer">
#photoContainer {
background-image: url('photo-lo.png');
width: 300px; height: ...
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5) {
#photoContainer {
background-ima...
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5...
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5...
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5),
(min--moz-device-pixel-ratio: 1.5...
@media (-webkit-device-pixel-ratio: 2)

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

always query
on ranges
300x300

900x900

find the balance
2- device
interaction hacks
device

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

Live demo
device

interacting with
native apps
native integration
Solution, part I
DON'T DO THAT
Solution, part II
native integration
<meta name="apple-itunes-app"
content="app-id=999">
native integration
native integration
<meta name="apple-itunes-app"
content="app-id=999">
<meta name="app-argument"
content="">
native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPa...
native integration
native integration
native integration
native integration
<meta name="msApplication-ID"
content="App">
<meta name="msApplication-PackageFamilyName"
content="myPa...
no api
no android
Solution, part III
native integration
<a href="customprotocol://">Open app</a>
!
native integration
<a href="twitter://post?message=HTML5">
Tweet this</a>
!
native integration
native integration
function tweet() {
location.href="twitter://post?message=HTML5";
setTimeout(function() {
location.href=...
native integration
native integration
function tweet() {
iframe.location.href=
"twitter://post?message=HTML5";
setTimeout(function() {
appNot...
device

push notification
push
<a href="suscription.passbook">
Subscribe to this site
</a>
push
push
3- enhancing your
app hacks
enhance your app

iOS home screen title
home screen
home screen
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
enhance your app

Changing tint iOS 7
tint

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

IE10 Live Tile
live tile
live tile
live tile
<meta name="msapplication-TileImage"
content="tile.png">
!

<meta name="msapplication-TileColor"
content="#ef030...
enhance your app

You've said live tile!!!
live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!
!
live tile
<meta name="msapplication-badge"
content="frequency=60;polling-uri=XXX">
!

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

<?xml version="1.0" ?>
<badge value=...
enhance your app

It’s even better on
IE11
enhance your app

Storage limits
storage

AppCache, localStorage,
WebSQL, IDB
storage
Different domains,
iframes and
Cross Document Messaging API
!
storage
this might not work
in the future
do you really need
more space?
4- tools
Tools

Bandwidth
simulators
netlimiter.com
slowyapp.com
charlesproxy.com
Tools

Virtual Mobile Labs
developer.nokia.com
developer.samsung.com
keynotedeviceanywhere.com
most used key
combinations?
Tools

Live Reload
livereload.com
wrapping up
we need hacks because
• browsers are different
• no enough information
• undocumented features
• buggy
however
• usability and Performance matters
• be careful
• your app should work anyway
• use feature detection
“change is the only constant“
Heraclitus
1- glass experience
( quick video )
MYTHS
Notifications on
your head
Notifications on
your head
Your content is
not so important
specs
nHD transparent
640x360
25" - 2.5m / 8 ft away
specs

Sensors
specs

Camera
specs

Multi-touch panel
specs

wifi
bluetooth
specs

Android 4.0
specs

bone conduction
transducer
( quick demo )
GDK
vs
cloud Mirror API
native
https
content

https
content

https
actions
content

https
actions

http(s)
glassware
glassware
timeline

past, now, future
( quick demo)
timeline

timeline items = card
timeline

card
code!

built-in menu items
share
navigate to
read aloud
delete

voice call
reply
toggle pin
view website
timeline

contextual events
geolocation
!
browser

invocation
google search
card's action
( quick demo)
browser

interaction
scroll
point and click
browser

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

html5
video, audio
devicemotion
scroll and touch events
no geo, speech, camera yet
timeline

contextual events
geolocation
share
timeline

contextual events
geolocation
share
launch "ok glass" menu
glass
- understand the experience
- mirror api vs gdk vs browser
- Glassware cloud-based
- it's just the beginning
you can reach a good
experience
thank you!
Next Tuesday @ Tallin
Mobile HTML5
Workshop

topconf.com

firtman@gmail.com
@fi...
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
FINHTML5 - Breaking the mobile web
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Adapted Rhino 3000 Online Rhino Academy Training E Uv2
Next
Upcoming SlideShare
Adapted Rhino 3000 Online Rhino Academy Training E Uv2
Next
Download to read offline and view in fullscreen.

Share

FINHTML5 - Breaking the mobile web

Download to read offline

Talk at FINHTML5 Helsinki Finland.

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
  • frontenddeveloping

    Jun. 26, 2014
  • pickerweng

    Dec. 20, 2013
  • gasolin

    Dec. 19, 2013
  • TeroTielinen

    Nov. 25, 2013
  • number0

    Nov. 17, 2013
  • Lud4ikLuk

    Nov. 15, 2013
  • baishuiz

    Nov. 11, 2013

Talk at FINHTML5 Helsinki Finland.

Views

Total views

2,601

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

25

Shares

0

Comments

0

Likes

7

×