© 2009 SPR Companies. All rights reserved.
MPS Partners
An SPR Company
Feb 15th 2011 - Brown Bag Lunch Series:
Introductio...
<html> 5 </html>
Logo from www.w3.org
Hot-shot new features
1. Canvas
2. Canvas text
3. Local storage
4. Web Workers
5. Offline Web Applications
6. Input Types
...
HTML5 detection library
Modernizr – is an open source, MIT-licensed
JavaScript library that detects support for
many HTML5...
Framework support
ASP.NET MVC
• ASP.net MVC HTML5 Helpers Toolkit – open source MVC
extensions.
ASP.NET WebForms
• No pred...
Demo application
The Canvas element
“a resolution-dependent bitmap canvas which can be used for rendering graphs,
game graphics, or other v...
Local storage (persistent)
It’s a way for web pages to store named key/value pairs locally, within the client
web browser....
Offline content
• The smart cache manifest.
 Network and fallback selections.
• Best suited for static pages or pages tha...
Form access
Place holder
<form>
<input name="q" type="text" placeholder="Search by Last Name"><br />
<input type="submit" ...
New Input types
<input type="email" />
<input type="url" />
<input type="number" min="0" max="10" step="2" value="6" />
<i...
New Input types
<input type="color"> //opera 11 only
<form novalidate>
<input type="email" id="addr">
<input type="submit"...
Video
<video src="pr6.webm"></video>
<video src="pr6.webm" width="320" height="240"></video>
* Internet Explorer 9 will on...
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
fun...
Web form and Server control
DEMO - Web control for HTML 5 Video
Reference material
• http://diveintohtml5.org/
• HTML5: Up and Running
Page 17
Questions
Upcoming SlideShare
Loading in …5
×

Introduction to HTML5

281
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
281
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to HTML5

  1. 1. © 2009 SPR Companies. All rights reserved. MPS Partners An SPR Company Feb 15th 2011 - Brown Bag Lunch Series: Introduction To <HTML Version=“5”> -Mayank Srivastava http://www.mayanksrivastava.com/
  2. 2. <html> 5 </html> Logo from www.w3.org
  3. 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. 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. 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.
  6. 6. Demo application
  7. 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. 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. 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. 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>
  11. 11. 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
  12. 12. 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>
  13. 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. 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. 15. Web form and Server control DEMO - Web control for HTML 5 Video
  16. 16. Reference material • http://diveintohtml5.org/ • HTML5: Up and Running
  17. 17. Page 17 Questions
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×