Introduction to HTML5
Upcoming SlideShare
Loading in...5

Introduction to HTML5






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Introduction to HTML5 Introduction to HTML5 Presentation Transcript

  • © 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
  • <html> 5 </html> Logo from
  • 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 • 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 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); }
  • 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+
  • 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 • • HTML5: Up and Running
  • Page 17 Questions