Internet explorer 9 html5 for web developers
This presentation is the property of its rightful owner.
Sponsored Links
1 / 56

Internet Explorer 9 & HTML5 for Web Developers PowerPoint PPT Presentation


  • 81 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Internet Explorer 9 & HTML5 for Web Developers

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


More web browser choice than ever

More Web Browser Choice than Ever


The browser is the theater not the play

The Browser is the Theater, not the Play


A glimpse to ie9

A Glimpse to IE9


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


Focus on sites

Focus on Sites


Agenda2

Agenda

  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary


Defining same mark up

Defining Same Mark-Up

9


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


Modernizr

Modernizr


Key takeaways for handling cross browser differences

Key Takeaways For Handling Cross-browser Differences


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


Javascript enhancements

Javascript Enhancements


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>


Internet explorer 9 html5 for web developers

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


Css3 enhancements

CSS3 Enhancements


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");


Html5

HTML5


Ie9 acid compatibility tests

IE9 Acid Compatibility Tests


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


Developer tools1

Developer Tools


Agenda3

Agenda

  • Introduction

  • Focus on Sites

  • Same Mark-up

  • All Around Fast

  • Q&A

  • Summary


Multi system performance

Multi-System Performance


Webkit sunspider javascript benchmark results

WebKitSunSpider JavaScript Benchmark Results


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>


Window performance1

window.performance


The gamers gpu

The Gamers GPU


Everyone has a gpu

Everyone Has a GPU


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


  • Login