Embed Size (px)
Citation preview
© 2009 SPR Companies. All rights reserved.
MPS PartnersAn SPR Company
Feb 15th 2011 - Brown Bag Lunch Series:
Introduction To <HTML Version=“5”>
-Mayank Srivastava
http://www.mayanksrivastava.com/
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
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 :( “)
}
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.
Demo application
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 linefor (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);
}
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
IEFIREFO
XSAFARI
CHROM
EOPERA IPHONE
ANDROI
D
8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+
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.
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>
New Input types
<input type="email" />
<input type="url" />
<input type="number" min="0" max="10" step="2" value="6" />
<input type="range" min="0" max="10" step="2" value="6" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" /> //Oprea 9.0+ Only
<input name="q" type="search"> //Visual changes in some browsers
New Input types
<input type="color"> //opera 11 only
<form novalidate>
<input type="email" id="addr">
<input type="submit" value="Subscribe">
</form>
<form>
<input id="q" required>
<input type="submit" value="Search">
</form>
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‡
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;
}
Web form and Server control
DEMO - Web control for HTML 5 Video
Reference material
• http://diveintohtml5.org/
• HTML5: Up and Running
Page 17
Questions
