© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il.

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il
Introduction
Focus on Sites
Same Mark-up
All Around Fast
Q&A
Summary
2
~60% of time on a PC is spent in the web browser
• The capabilities of the web are increasing every day, but the way we
experience the web isn’t keeping up
Introduction
Focus on Sites
Same Mark-up
All Around Fast
Q&A
Summary
8
Introduction
Focus on Sites
Same Mark-up
All Around Fast
Q&A
Summary
11
9
12
// Conditional Comments

// Unique Objects
if(document.all) …
if(window.attachEvent) …
if(window.ActiveXObject) …
// Unique Behaviors (CSS Hacks, etc.)
* html {}
// Target legacy only

// Browser Detection: AVOID THIS PATTERN
if( navigator.userAgent.indexOf('MSIE') != -1 )
{
// Code for Internet Explorer
}
else
{
// Code for other browsers
}
// Feature Detection: Use this pattern
if( window.addEventListener )
{
// Code for browsers with addEventListener
}
else
{
// Code for browsers without addEventListener
}

<video src="test.video">
<object src="test.video">
<a href="test.video">
Download Video
</a>
</object>
</video>
/* Unrecognized properties are ignored */
.target
{
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
– Small JavaScript library
– Detects availability of HTML5 and CSS3 specifications
– Tells you whether a feature natively implemented in the
browser
– Uses feature detection
Same Markup
• Seek out code that "just works" cross-browser
Browser Detection
• Use only when the future is certain; Use feature detection when in doubt
Feature Detection
• Use to target the latest browsers; Test for standards first; Use helper frameworks
Full DOM Level 2 and Level 3 Support including
addEventListener
DOMContentLoaded
DOM Range
DOM Style
DOM Traversal
9
getElementsByClassName(class)
getComputedStyle(element, pseudoElement)
getSelection()
ECMAScript 5 Methods
9
• 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
<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>
<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 (maxwidth: 1300px)" type="text/css" />
• 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
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>
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>
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">


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


</audio>
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";
var val = localStorage.key;
localStorage.setItem("key", "value);
var val = localStorage.getItem("key");
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
Introduction
Focus on Sites
Same Mark-up
All Around Fast
Q&A
Summary
42
Foreground
Source
Code
Parser
AST
ByteCode
Interpreter
Foreground
Source
Code
Parser
Background
Compiled JavaScript
AST
ByteCode
Background
Compiler
Native
Code
In The Background
Interpreter
Using Multiple Cores
A new set of Performance Metrics integrated at the DOM
Browser interoperable way to measure performance
<script type="text/javascript">
var w = window;
var navStart = w.performance.timing.navigationStart + "ms";
var navStartTime = Date(w.performance.timing.navigationStart);
</script>
• Hardware acceleration through the GPU
Images
Text
Video
SVG
Canvas
CSS3
Images
Text
Video
SVG
Canvas
CSS3
9
PLEASE
Migrate your
applications off
Internet Explorer 6
Download and
install IE9
http://ietestdrive.com

© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il.

Transcript © Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel www.sela.co.il.

Directory