HTML5 for Tablets and Mobile
-
Upload
todd-anglin -
Category
Technology
-
view
7.931 -
download
2
description
Transcript of HTML5 for Tablets and Mobile
![Page 1: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/1.jpg)
![Page 2: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/2.jpg)
@toddanglin
![Page 3: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/3.jpg)
31% of all Internet use in Nigeria is
mobile
![Page 4: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/4.jpg)
The Internet is Mobile
![Page 5: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/5.jpg)
100m 81m
![Page 6: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/6.jpg)
Which devices matter?
![Page 7: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/7.jpg)
iOS Android Symbian RIM MSFT …
69%
USA
58%
UK
32%
CN98%
KRWEBKIT
![Page 8: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/8.jpg)
HTML5 standard maximizes reusability
![Page 9: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/9.jpg)
considerations
1.Native-ness2.Screen Size3.Interaction4.Look-and-
feel5.Bandwidth
![Page 10: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/10.jpg)
What is a “native” app?
![Page 11: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/11.jpg)
HTML5 “Native”Looks right. * Feels right. * Available offline. * Installable. * In App Store. X Runs everywhere. X
Premium APIs X
![Page 12: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/12.jpg)
When is a pixel not a pixel?
![Page 13: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/13.jpg)
980px320px
![Page 14: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/14.jpg)
CSS pixelsvs.
Physical Pixels
![Page 15: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/15.jpg)
“If the pixel density of the output device is very different from that of a
typical computer display, the user agent should rescale pixel values.”
- CSS 2.1
![Page 16: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/16.jpg)
ViewPort• Configurable
<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=no
target-densitydpi=device-dpi (Android Only)
![Page 17: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/17.jpg)
media queries• Target styles to specific devices…– And features!
/*These two rules do the same thing*/@media all and (min-width:500px) { … } @media (min-width:500px) { … }
/*Multiple conditions*/@media only screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
![Page 18: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/18.jpg)
<meta>• Rendering hints for mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1.0">Optional: user-scalable=no
target-densitydpi=device-dpi (Android Only)
<!--iOS specific--><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black" /><link rel="apple-touch-icon" href="./apple-touch-icon.png" />
![Page 19: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/19.jpg)
It’s a Touch,Not a Click. Right?
![Page 20: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/20.jpg)
Touch
• Events– touchstart– touchmove– touchend– touchcancel– gesturestart*– gesturechange*– gestureend*
![Page 21: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/21.jpg)
touch
• Accuracy– Size– Shape– Placement– Overlapping
![Page 22: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/22.jpg)
frameworks
![Page 23: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/23.jpg)
Mobile Internet is unpredictable.
![Page 24: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/24.jpg)
bandwidth
• Optimize design– Clicks/Screens– Graphics
• Selectively load resources
![Page 25: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/25.jpg)
Future
• “Windows 8”• Chrome OS• Facebook
![Page 26: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/26.jpg)
@htmlui
![Page 27: HTML5 for Tablets and Mobile](https://reader033.fdocuments.in/reader033/viewer/2022061218/54b7abbc4a795993718b498a/html5/thumbnails/27.jpg)
Resources