HTML5 & IE

M i c r o s o f t | O p e n D o o r

Who I am

• Emad Al Ashi العشي عماد• Technical Team Leader – eSense Software• Jordev Lead• MVP 2011 ASP.NET/IIS

• www.EmadAshi.com

• www.DotNetArabi.com

• @EmadAshi

http://www.emadashi.com/



http://www.dotnetarabi.com/




DotNetArabi


HTML5 & IE

By Emad Alashi

HTML5 & IE


Agenda

• What is HTML5• HTML5 general features in IE9• HTML5 IE10• Working with HTML5


W3C

WHATWGWeb Hypertext Application Technology Working Group

World Wide Web Consortium

What is HTML5?


HTML

CSS3

JS

SVG

What is HTML5?


Platform Independent

Standards

Rich User Experience

Less Bandwidth

Semantically Connected Content

The Next Web

Device Independent

What does HTML5 bring?


Candidate Recommendation 2012

W3C Recommendation 2022

What is HTML5


Site-ready HTML5 IE9

CTP’s IE10

Test Cases to W3C

HTML5 Lab

Microsoft’s Approach for HTML5 (IE)


Microsoft’s Approach for HTML5 (Tools)

Visual Studio 2010 SP1:

• HTML5 document type validation• IntilleSense

• HTML5 elements and tags• JavaScript API’s• CSS3

• ASP.NET MVC 3 Tool Update: Modernizr


HTML5 on IE9


Semantic Web

<header>

<nav> <section>

<article> <article>

<footer>

HTML5 on IE9


Video & AudioHTML5 on IE9

• Video codec's• H.264• MPEG 4

• Audio codec's• MP3• AAC


Demo

Video & AudioHTML5 on IE9

http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_all


• Scalable Vector Graphics• vector-based• XML format• DOM and CSS• Open Standard

SVGHTML5 on IE9


Demo

SVGHTML5 on IE9

http://mbostock.github.com/d3/ex/


Canvas

<canvas id="myCanvas" width="400" height="200" >Your browser does not support the canvas element.</canvas>

<script type="text/javascript">var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");cxt.fillStyle = "#FF0000";cxt.fillRect(0,0,150,75);</script>

HTML5 on IE9


Canvas

Demo1

Demo2

HTML5 on IE9

http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html

http://abstract-productions.net/game/shooter.html


Geolocation

Microsoft Location Service

HTML5 on IE9


Geolocationnavigator.geolocation.getCurrentPosition(foundIt, failed);

Function foundIt(pos){

pos.coords.latitude;pos.coords.longitude;

}

Function failed(){

alert(‘Hahahaaaawz!’);}

HTML5 on IE9


Geolocation

Demo

HTML5 on IE9


• Key-value pairs• String type (Serialization)• Local:

• Cross windows• Closed windows

• Session:• Per--window• Window life time

Web StorageHTML5 on IE9


Web Storage

localStorage.getItem(‘key’)localStorage.setItem(‘key’)

sessionStorage.getItem(‘key’)sessionStorage.setItem(‘key’)

HTML5 on IE9


Web Storage

Demo

HTML5 on IE9

http://html5demos.com/storage


• width• height• orientation• resolution• …

CSS3 MediaQuery@media screen and (min-width: 400px) and (max-width: 800px) { … }

HTML5 on IE9


CSS3 MediaQuery

Demo

HTML5 on IE9

http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/


HTML5

<!DOCTYPE html>

HTML5 on IE9


Graphic AcceleratorHTML5 on IE9


• Compiled• Type Optimizations• Fast Interpreter• Library Optimizations

JavaScript EngineChakra

HTML5 on IE9


What’s cooking? IE10


IE10HTML5 on IE10

• Forms• Input types• Form elements• Form attributes

• Web Workers• File API• Web Socekts• IndexedDB• …


Working with HTML5


Working with HTML5

• User Agent sniffing• Manual Feature Detection

• !!document.createElement('canvas').getContext

• Modernizr:

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });


How to decide

• Your needs• The environment• Feature spread among browsers• How to polyfill


Interesting sites

• beautyoftheweb.com• caniuse.com• ietestdrive.com• html5labs.com• html5demos.com• html5rocks.com• html5readiness.com

• Internet Explorer 10 Guide for Developers

http://www.beautyoftheweb.com/

http://caniuse.com/

http://www.ietestdrive.com/

http://html5labs.com/

http://html5demos.com/

http://www.html5rocks.com/en/

http://html5readiness.com/

http://msdn.microsoft.com/en-us/ie/hh272905


References

• http://msdn.microsoft.com/en-us/magazine/hh335062.aspx• http://msdn.microsoft.com/en-us/magazine/hh394148.aspx• http://www.w3schools.com/html5/default.asp• The Architecture of Full Hardware Acceleration of All Web Page Content• http://html5doctor.com/• Wikipedia.org (search for all terms)

http://msdn.microsoft.com/en-us/magazine/hh335062.aspx




http://www.w3schools.com/html5/default.asp



http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx

http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx

http://html5doctor.com/




HTML5 and IE

Thank You

Q & A

www.EmadAshi.comwww.DotNetArabi.com

@Emadashi



HTML5 & IE

Technology

Transcript of HTML5 & IE