internet explorer 9 html5 for web developers
Download
Skip this Video
Download Presentation
Internet Explorer 9 & HTML5 for Web Developers

Loading in 2 Seconds...

play fullscreen
1 / 56

Internet Explorer 9 & HTML5 for Web Developers - PowerPoint PPT Presentation


  • 144 Views
  • Uploaded on

Internet Explorer 9 & HTML5 for Web Developers. Gil Fink Senior Consultant & Architect http://www.gilfink.net. Agenda. Introduction Focus on Sites Same Mark-up All Around Fast Q&A Summary. Web Browsing is Core to the Windows Experience. ~60% of time on a PC is spent in the web browser.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Internet Explorer 9 & HTML5 for Web Developers' - lel


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internet explorer 9 html5 for web developers

Internet Explorer 9 & HTML5 for Web Developers

Gil FinkSenior Consultant & Architecthttp://www.gilfink.net

agenda
Agenda
  • Introduction
  • Focus on Sites
  • Same Mark-up
  • All Around Fast
  • Q&A
  • Summary
web browsing is core to the windows experience
Web Browsing is Core to the Windows Experience

~60% of time on a PC is spent in the web browser

the expectations from the web are rising
The Expectations from the Web are Rising
  • The capabilities of the web are increasing every day, but the way we experience the web isn’t keeping up
agenda1
Agenda
  • Introduction
  • Focus on Sites
  • Same Mark-up
  • All Around Fast
  • Q&A
  • Summary
focus on site
Focus on Site

Your sites shine

Seamless on Win 7

Smarter address bar

Streamlined & quieted

agenda2
Agenda
  • Introduction
  • Focus on Sites
  • Same Mark-up
  • All Around Fast
  • Q&A
  • Summary
browser detection leaving the future to chance
Browser DetectionLeaving the Future to Chance
  • Makes dozens of assumptions under a single check
    • A single broken assumption can break a site
  • Browser detection should generally be avoided
    • Safe only if you already know what the future holds
    • Use only for code that can be written: "if(version < n)"
  • Most important question:
    • Do I know what the next version will look like?
browser detection it s more than navigator useragent
Browser DetectionIt\'s more than navigator.userAgent

// Conditional Comments

<!--[if IE]><![endif]-->

// Unique Objects

if(document.all) …

if(window.attachEvent) …

if(window.ActiveXObject) …

// Unique Behaviors (CSS Hacks, etc.)

* html {}

browser detection when is it safe to use
Browser DetectionWhen is it safe to use?

// Target legacy only

<!--[if IE lte 7]>

// Legacy browser-specific code

<[endif]-->

feature detection what it is and how to use it
Feature DetectionWhat it is and how to use it
  • Check for the feature you want to use
    • Look for a specific object, method, property, or behavior
  • Detect standards first
    • Browsers often support both standards and legacy
  • Only target related features in a single check
    • E.g. postMessage does not imply addEventListener
feature detection performing the mental shift
Feature DetectionPerforming the mental shift

// Browser Detection: AVOID THIS PATTERN

if( navigator.userAgent.indexOf(\'MSIE\') != -1 )

{

// Code for Internet Explorer

}

else

{

// Code for other browsers

}

feature detection performing the mental shift1
Feature DetectionPerforming the mental shift

// Feature Detection: Use this pattern

if( window.addEventListener )

{

// Code for browsers with addEventListener

}

else

{

// Code for browsers without addEventListener

}

feature detection working in markup
Feature DetectionWorking in markup

<!-- Elements with fallback content -->

<videosrc="test.video">

<objectsrc="test.video">

<ahref="test.video">

Download Video

</a>

</object>

</video>

feature detection working in css
Feature DetectionWorking in CSS

/* Unrecognized properties are ignored */

.target

{

border-radius: 20px;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

}

feature detection with modernizr
Feature Detection with Modernizr
  • Small JavaScript library
  • Detects availability of HTML5 and CSS3 specifications
  • Tells you whether a feature natively implemented in the browser
  • Uses feature detection
new updated dom enhancements
New & Updated DOM Enhancements

Full DOM Level 2 and Level 3 Support including

addEventListener

  • DOMContentLoaded

DOM Range

DOM Style

9

DOM Traversal

DOM

new updated javascript apis
New & Updated JavaScript APIs

getElementsByClassName(class)

getComputedStyle(element, pseudoElement)

getSelection()

9

ECMAScript 5 Methods

JavaScript APIs

scalable vector graphics
Scalable Vector Graphics
  • Create and draw 2D vector graphics using XML
    • Vector images are composed of shapes instead of pixels
    • Based on the SVG 1.1 2nd Edition Full specification
  • Support for:
    • Full DOM access to SVG elements
    • Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
2d vector graphics
2D Vector Graphics

<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
CSS3 Media Queries

<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" />

css3 colors opacity
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
html5 canvas
HTML5 Canvas
  • 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="myCanvas" 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>
@font face woff fonts
@font-face & WOFF Fonts
  • 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
    • From the W3C Fonts Working Group
  • <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>
html5 video
HTML5 <video>
  • Support for the HTML5 <video> element
    • 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 Flash or Silverlight Video Here -->
  • </video>
html5 audio
HTML5 <audio>
  • Support for the HTML5 <audio> element
    • Industry-standard MP3 and AAC audio
    • Fully scriptable via the DOM
  • <audio src="audio.mp3" id="audioTag" autoplay controls>
  • <!-- Only shown when browser doesn’t support audio -->
  • <!-- You could embed Flash or Silverlight audio here -->
  • </audio>
web storage
Web Storage
  • Replacement for Cookies
  • sessionStorage
    • Data is accessible to any page from the same site opened in that window
  • localStorage
    • Data spans multiple windows and lasts beyond the current session
  • localStorage.key = "value";
  • varval = localStorage.key;
  • localStorage.setItem("key", "value);
  • varval = localStorage.getItem("key");
developer tools
Developer Tools

A built in, visual interface to the Document Object Model

Fast experimentation

New for Internet Explorer 9

  • Network inspection
  • JavaScript profiling
  • UA String Picker
  • Console Tab
  • SVG Support

Tools

agenda3
Agenda
  • Introduction
  • Focus on Sites
  • Same Mark-up
  • All Around Fast
  • Q&A
  • Summary
the javascript engine
The JavaScript Engine

Foreground

Source Code

Parser

AST

ByteCode

Interpreter

new javascript engine chakra
New JavaScript Engine – “Chakra”

Foreground

Source Code

Parser

AST

ByteCode

Interpreter

Background Compiler

Native Code

Background

Compiled JavaScript

In The Background

Using Multiple Cores

window performance
window.performance

A new set of Performance Metrics integrated at the DOMBrowser interoperable way to measure performance

<script type="text/javascript">

var w = window;

varnavStart= w.performance.timing.navigationStart+ "ms";

varnavStartTime = Date(w.performance.timing.navigationStart);

</script>

and the bottom line
And the Bottom Line…
  • Hardware acceleration through the GPU
traditional browser approach to graphics
Traditional Browser Approach to Graphics

Images

Text

Video

SVG

Canvas

CSS3

ie9 hardware acceleration unleash the power of directx direct2d and directwrite
IE9 Hardware AccelerationUnleash the power of DirectX, Direct2D and DirectWrite.

Images

Text

Video

SVG

Canvas

CSS3

summary
Summary

9

PLEASEMigrate your applications off Internet Explorer 6

Download and install IE9

http://ietestdrive.com

thank you

Thank You

Gil FinkSenior Consultant & Architect [email protected]://www.gilfink.net

ad