Html 5 Ecma Script 5 Windows Internet Explorer

Html 5 & Ecma. Script 5 Windows Internet Explorer 9 & 10 Doug Holland Sr. Architect Evangelist Microsoft Corporation doug. holland@microsoft. com

Agenda § § § Windows Internet Explorer 9 Html 5 Ecma. Script 5 Windows Internet Explorer 10 Platform Preview Q&A

Windows Internet Explorer 9

2 Million downloads in 2 days!

IE 9 Pillars Fast All around fast using the power of your whole PC Clean Putting the focus on your sites Full hardware acceleration of all graphics and text Clean web-centric UI New Java. Script engine New tab page experience Seamless with Windows 7 One Box Quieter notifications Trusted Interoperable Secure, reliable, and private HTML 5 & same markup Download manager with Smart. Screen protection Hang resistance Add-on performance protection HTML 5 and modern web standards support Leading with the W 3 C Comprehensive standards tests

Multi-System Performance

Using The Full Power of Your PC

Windows Internet Explorer 9 The Java. Script Engine Foreground Source Code Parser AST Byte. Code Interpreter

Windows Internet Explorer 9 New Java. Script Engine – codename “Chakra” Foreground Source Code Parser Background Compiled Java. Script AST Background Compiler In The Background Byte. Code Interpreter Native Code Using Multiple Cores

Windows Internet Explorer 9 IE Test Drive Website

Windows Internet Explorer 9 Site Mode & Pinning on Windows 7

Putting the focus on your sites Your sites shine Seamless with Windows 7 Smarter address bar Streamlined & quieted

Build My Pinned Site

U. S. Navy Blue Angeles Taking Pinned Sites to Mach 2!

Html 5

Html 5 & Silverlight Microsoft’s Position on Html 5 & Silverlight • Microsoft is committed to open Web standards such as Html 5 and Ecma. Script. • Microsoft remains committed also to the Silverlight platform and has recently announced the availability of Silverlight 5 and Silverlight, along with XNA, is pivotal for Windows Phone development. • We believe that it is simply a case of using the right tool for the job and that both technologies are important in our future.

Html 5 <canvas/> A block element that allows developers to draw 2 d graphics using Java. Script § Methods for drawing include: paths, boxes, circles, text and rasterized images <canvas id=“Sample. Canvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/javascript"> var example = document. get. Element. By. Id("my. Canvas"); var context = example. get. Context("2 d"); context. fill. Style = "rgb(255, 0, 0)"; context. fill. Rect(30, 50, 50); </script>

Html 5 <canvas/> Canvas Pad

Html 5 <video/> § Industry-standard MPEG-4/H. 264 video § Video can be composited with anything else on the page § HTML content, images, SVG graphics § Hardware accelerated, GPU-based decoding <video src="video. mp 4" id="video. Tag" width="640 px" height="360 px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Silverlight Video Here --> </video>

Html 5 <video/>

Html 5 <audio/> § Industry-standard MP 3 and AAC audio § Fully scriptable via the DOM <audio src="audio. mp 3" id="audio. Tag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Silverlight audio here --> </audio>

Html 5 <audio/>

Scalable Vector Graphics Create and draw 2 D vector graphics using XML § Vector images are composed of shapes instead of pixels § Based on SVG 1. 1 <svg width="400" height="200" xmlns="http: //www. w 3. org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>

CSS 3 Media Queries Selectively style page based on properties of the media <link href="Do. Not. Display. css" rel="stylesheet" media="screen and (max-width: 1199 px)" type=“ text/css" /> <link href="Do. Not. Display. css" rel="stylesheet" media="screen and (min-width: 1301 px)" type="text/css" /> <link href="Presentation. css" rel="stylesheet" media="screen and (min-width: 1200 px) and (maxwidth: 1300 px)" type="text/css" />

CSS 3 Colors & Opacity § CSS 3 Color § Alpha color with rgba() and hsla() color functions § Transparency control with the opacity property § CSS 3 Backgrounds and Borders § Round corners with the border-radius property § Multiple background images per element § box-shadow property on block elements div. top { background-color: rgba(0, 0, 0, 0. 5); } div. bottom { background-color: hlsa(0, 0%, 0. 5); }

WOFF Fonts § WOFF == Web Open Font Format § No longer limited to the “web safe” font list! § Web Open Font Format allows you to package and deliver fonts as needed, per site § Designed for web use with the @font-face declaration § A simple repackaging of Open. Type or True. Type font data <style type="text/css"> @font-face { font-family: My. Font. Name; src: url('Font. File. woff'); } </style> <div style="font: 24 pt My. Font. Name, sans-serif; "> This will render using My. Font. Name in Font. File. woff </div>

Ecma. Script 5

Ecma. Script 5 Quick Java. Script Primer – Variables, Types & Objects

Ecma. Script 5 Quick Java. Script Primer – Operators

Ecma. Script 5 Quick Java. Script Primer – Functions

Ecma. Script 5 Quick Java. Script Primer – Objects + Functions = Methods

Ecma. Script 5 Quick Java. Script Primer – Constructors & Prototypes

Ecma. Script 5 Quick Java. Script Primer – instanceof Keyword

Ecma. Script 5 Quick Java. Script Primer – in Keyword

Ecma. Script Reserved Words break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try

Ecma. Script Reserved Words Additional reserved for future use, not used within Ecma. Script 5 today! class enum exports import const export extends super

Ecma. Script Reserved Words Ecma. Script 3 Reserves Java Keywords abstract double goto native static boolean enum implements package super byte export import private char extends int protected throws class final interface public transient const float long short volatile synchronized While Ecma. Script 5 relaxes these rules it is recommended to continue to avoid their usage.

Ecma. Script 5 What’s New?

Ecma. Script 5 What’s New • 1999 Ecma. Script 3 rd Edition (ES 3) • 2009 Ecma. Script 5 th Edition (ES 5) • Default • Strict • For the short term, work in the intersection of ES 3 and ES 5/Strict. • For the long term, work with ES 5/Strict. • Avoid ES 5/Default.

Ecma. Script 5 What’s New • Ecma. Script 5 conforms better to reality. • Browsers will conform better to each other. • Where browsers disagree, Ecma. Script 5 took license to correct the standard. • Interoperability is improved. • If you program well, changes in Ecma. Script 5 should have little impact on you.

Ecma. Script 5 Goals for Ecma. Script 5 • Don’t (try not to) break the Web! • Improve the language for the users of the language, not critics of the language. • Third-Party security (mashups). • Protect stupid people from themselves. • No new syntax.

Ecma. Script 5 Goals for Ecma. Script 5 • Don’t (try not to) break the Web! • Improve the language for the users of the language, not critics of the language. • Third-Party security (mashups). • Protect stupid people from themselves. • No new syntax.

Ecma. Script 5 New Constants (formerly variables in ES 3) • Infinity • Na. N • undefined

Ecma. Script 5 parse. Int has been fixed • parse. Int(‘ 08’) == 8 // not 0 as in ES 3

Ecma. Script 5 Brand New Methods • Methods can be added without breaking syntax. • On Ecma. Script 5 based browsers, such as Internet Explorer 10, the native versions of new methods can be used which are very fast. • On earlier browsers you can add these methods yourself to ensure your code behaves as expected (although likely slower).

Ecma. Script 5 Brand New Methods • Function. prototype. bind • String. prototype. trim • Array. prototype. every • Array. prototype. filter • Array. prototype. for. Each • Array. prototype. index. Of • Array. prototype. last. Index. Of • Array. prototype. map

Ecma. Script 5 Brand New Methods • Array. prototype. reduce. Right • Array. prototype. some • Date. now() • Date. prototype. to. ISOString • Array. is. Array • Object. keys

Windows Internet Explorer 10

Windows Internet Explorer 10 IE Test Drive Website

Ecma. Script 5 Strict Mode While legal using ordinary Ecma. Script, the following are reserved in strict mode implements let private public interface package protected static yield While not fully reserved, the following are not allowed as variable, function, or parameter names in strict mode. arguments eval

Resources § HTML 5 and Site Mode Demos § www. beautyoftheweb. com § IE 9 Site Mode Developer Guide § http: //msdn. microsoft. com/library/gg 131029(VS. 85). aspx § IE 9 HTML 5 Developer Guide § http: //msdn. microsoft. com/en-us/ie/ff 468705. aspx § IE 10 Testdrive § www. ietestdrive. com

Q&A