View
216
Download
0
Tags:
Embed Size (px)
Citation preview
Doug Holland
Sr. Architect Evangelist
Microsoft [email protected]
Html 5 & EcmaScript 5 Windows Internet Explorer 9 & 10
Agenda Windows Internet Explorer 9 Html 5 EcmaScript 5 Windows Internet Explorer 10 Platform
Preview Q&A
IE9 Pillars
CleanPutting the focus on your sites
TrustedSecure, reliable, and private
InteroperableHTML5 & same markup
Full hardware acceleration of all graphics and text
New JavaScript engine
Clean web-centric UI
Seamless with Windows 7
New tab page experience
One Box
Quieter notifications
Download manager with SmartScreen protection
Hang resistance
Add-on performance protection
HTML 5 and modern web standards support
Leading with the W3C
Comprehensive standards tests
FastAll around fast using the power of your whole PC
Windows Internet Explorer 9
Source Code
Parser AST InterpreterByteCod
e
Foreground
The JavaScript Engine
Source Code Parser AST InterpreterByteCode
Foreground
Windows Internet Explorer 9
BackgroundBackground Compiler
Native Code
Compiled JavaScript In The Background Using Multiple Cores
New JavaScript Engine – codename “Chakra”
Putting the focus on your sites
Your sites shine Seamless with
Windows 7
Smarter address bar Streamlined & quieted
• Microsoft is committed to open Web standards such as Html5 and
EcmaScript.
• 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.
Html5 & SilverlightMicrosoft’s Position on Html5 & Silverlight
A block element that allows developers to draw 2d graphics using
JavaScript
Methods for drawing include: paths, boxes, circles, text and rasterized
images
<canvas id=“SampleCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>
<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
Html5 <canvas/>
Html5 <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.mp4" id="videoTag" width="640px" height="360px"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Silverlight Video Here --></video>
<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Silverlight audio here --></audio>
Html5 <audio/>
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM
Scalable Vector Graphics
Create and draw 2D 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.w3.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>
CSS3 Media Queries
Selectively style page based on properties of the media
<link href="DoNotDisplay.css" rel="stylesheet" media="screen and (max-width:1199px)" type=“ text/css" /> <link href="DoNotDisplay.css" rel="stylesheet" media="screen and (min-width:1301px)" type="text/css" /> <link href="Presentation.css" rel="stylesheet" media="screen and (min-width:1200px) and (max- width: 1300px)" type="text/css" />
div.top { background-color: rgba(0, 0, 0, 0.5);}div.bottom { background-color: hlsa(0, 0%, 0%, 0.5);}
CSS3 Colors & Opacity CSS3 Color
Alpha color with rgba() and hsla() color functions Transparency control with the opacity property
CSS3 Backgrounds and Borders Round corners with the border-radius property Multiple background images per element box-shadow property on block elements
<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>
<div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>
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 OpenType or TrueType font data
EcmaScript 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
EcmaScript Reserved WordsAdditional reserved for future use, not used within EcmaScript 5 today!
class enum exports import
const export extends super
EcmaScript Reserved WordsEcmaScript 3 Reserves Java Keywords
abstract double goto native static
boolean enum implements package super
byte export import private
synchronized
char extends int protected
throws
class final interface public
transient
const float long short volatile
While EcmaScript 5 relaxes these rules it is recommended to continue to avoid their usage.
EcmaScript 5
• 1999 EcmaScript 3rd Edition (ES3)
• 2009 EcmaScript 5th Edition (ES5)
• Default
• Strict
• For the short term, work in the intersection of ES3 and
ES5/Strict.
• For the long term, work with ES5/Strict.
• Avoid ES5/Default.
What’s New
EcmaScript 5
• EcmaScript 5 conforms better to reality.
• Browsers will conform better to each other.
• Where browsers disagree, EcmaScript 5 took license to correct the
standard.
• Interoperability is improved.
• If you program well, changes in EcmaScript 5 should have little
impact on you.
What’s New
EcmaScript 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.
Goals for EcmaScript 5
EcmaScript 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.
Goals for EcmaScript 5
EcmaScript 5
• Methods can be added without breaking syntax.
• On EcmaScript 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).
Brand New Methods
EcmaScript 5
• Function.prototype.bind
• String.prototype.trim
• Array.prototype.every
• Array.prototype.filter
• Array.prototype.forEach
• Array.prototype.indexOf
• Array.prototype.lastIndexOf
• Array.prototype.map
Brand New Methods
EcmaScript 5
• Array.prototype.reduce
• Array.prototype.reduceRight
• Array.prototype.some
• Date.now()
• Date.prototype.toISOString
• Array.isArray
• Object.keys
Brand New Methods
EcmaScript 5 Strict ModeWhile legal using ordinary EcmaScript, the following are reserved in strict mode
implements let private public
yield
interface package protected static
arguments eval
While not fully reserved, the following are not allowed as variable, function, or parameter names in strict mode.
Resources
HTML5 and Site Mode Demos www.beautyoftheweb.com
IE9 Site Mode Developer Guide http://msdn.microsoft.com/library/
gg131029(VS.85).aspx IE9 HTML5 Developer Guide
http://msdn.microsoft.com/en-us/ie/ff468705.aspx
IE10 Testdrive www.ietestdrive.com