3. Hot-shot new features
1. Canvas
2. Canvas text
3. Local storage
4. Web Workers
5. Offline Web Applications
6. Input Types
i. search
ii. number
iii. range
iv. color
v. tel
vi. url
vii. email
viii. date
ix. month
x. week
xi. time
xii. datetime
xiii. datetime-local
7. Placeholder text
8. Form Autofocus
9. Video
10. Geo-Locations
11. MicroData
4. HTML5 detection library
Modernizr – is an open source, MIT-licensed
JavaScript library that detects support for
many HTML5 & CSS3 features.
Without Modernizr –
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}
With Modernizr –
if (Modernizr.canvas) {
alert(“Canvas supported!”);
}
else {
alert(“ no native canvas support available :( “)
}
5. Framework support
ASP.NET MVC
• ASP.net MVC HTML5 Helpers Toolkit – open source MVC
extensions.
ASP.NET WebForms
• No predefined server controls yet.
• Option of developing custom Web controls.
7. The Canvas element
“a resolution-dependent bitmap canvas which can be used for rendering graphs,
game graphics, or other visual images on the fly.”
<canvas width="300" height="225"></canvas>
Canvas coordinates diagram
Vertical line
for (var x = 0.5; x < 500; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 375);
}
Horizontal line
for (var y = 0.5; y < 375; y += 10) {
context.moveTo(0, y);
context.lineTo(500, y);
}
8. Local storage (persistent)
It’s a way for web pages to store named key/value pairs locally, within the client
web browser. Like cookies, this data persists even after you navigate away from
the web site, close your browser tab, exit your browser. Unlike cookies, this data
is never transmitted to the remote web server (unless you go out of your way to
send it manually).
localStorage[“key"] = value;
getItem(“key”);
setItem(“key”, value);
removeItem(“key”);
clear();
HTML5 STORAGE SUPPORT
IE
FIREFO
X
SAFARI
CHROM
E
OPERA IPHONE
ANDROI
D
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+
9. Offline content
• The smart cache manifest.
Network and fallback selections.
• Best suited for static pages or pages that depend
on client side processing as opposed to server
based real-time applications.
10. Form access
Place holder
<form>
<input name="q" type="text" placeholder="Search by Last Name"><br />
<input type="submit" value="Search">
</form>
Auto Focus
<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>
13. Video
<video src="pr6.webm"></video>
<video src="pr6.webm" width="320" height="240"></video>
* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves.
† Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
‡ Although Android 2.3 supports WebM, there are no hardware decoders yet, so battery life is a concern.
• Supported video content types – video/ogg & video/mp4
• IIS setting for Request filtering & MIME Types to render Video.
ENCODING OGG VIDEO WITH FIREFOGG
VIDEO CODEC SUPPORT IN UPCOMING BROWSERS
CODECS/CONTAINER IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
Theora+Vorbis+Ogg · 3.5+ † 5.0+ 10.5+ · ·
H.264+AAC+MP4 9.0+ · 3.0+ · · 3.0+ 2.0+
WebM 9.0+*
4.0+ † 6.0+ 10.6+ · 2.3‡
14. Geo-Location
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
9.0+ 3.5+ 5.0+ 5.0+ 10.6+ 3.0+ 2.0+
GEOLOCATION API SUPPORT
function get_location() {
navigator.geolocation.getCurrentPosition(show_map);
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
15. Web form and Server control
DEMO - Web control for HTML 5 Video
