Virtual techdays INDIA │ 22-24 november 2010 HTML5 and IE9 (Beta): Making the web more Beautiful Edwin Anand │ MS CoE Lead (HiTech ISU), Tata Consultancy.

virtual techdaysINDIA │ 22-24 november 2010

HTML5 and IE9 (Beta): Making the web more BeautifulEdwin Anand │ MS CoE Lead (HiTech ISU), Tata Consultancy Services

Defining “the beauty of the web”

HTML 5 overview

IE 9 (Beta) Overview

Conclusions


S E S S I O N A G E N D A


Content Delivery demands


User Experience/Performance demand

http://www.yuiblog.com/blog/2009/10/13/video-neuberg-html5/




Perceived impact of web 2.0 (2008 Forrester study)

http://www.researchrecap.com/index.php/2008/06/17/web-20-accelerating-print-newspapers-near-death-spiral/

‘Web 2.0 Accelerating Print Newspapers’ “Near-Death Spiral”’



INDIA │ 22-24 november 2010

What makes “a beautiful web”?

•Speed•Rich UI•Enhanced capabilities•Ready access and high availability

User Experience

•Use of better hardware•Scale across devices•Better computing power•Increase technology advances (AJAX, JSON, JQuery, etc.)

Technology Leverage

•HTML 5.0•CSS 3.0

Standardization

virtual techdays


HTML 5.0: Key concepts and demo


What is HTML 5.0

Key facts: HTML 5.0 is the next standard revision from HTML 4.0 – current in its draft version. Candidate recommendation in 2012. Final version in 2022.

Purpose: Upgrades HTML to suit the modern needs of Web

Key Statistics: <!DOCTYPE html> 9 new “structure” tags 16 new HTML elements 13 new <input> types


HTML 5.0 feature map

video semantic tags canvas

offline local storage

drag & drop

audio geolocation

web workers


semantic tags – for layout definitions

Navigation

Header

Navigation

Footer

Article


drag and drop – intuitive implementation Every element has a boolean “draggable” property that can be set to true

<div Id=“srcItem” draggable=“true” /> Events: Bindable to the elements

dragstart: A drag has been initiated drag: The mouse has moved dragenter: The dragged element has been moved into a drop listener dragover: The dragged element has been moved over a drop listener dragleave: The dragged element has been moved out of a drop listener drop: The dragged element has been successfully dropped on a drop listener dragend: A drag has been ended (successfully or not)


canvas and SVG In earlier versions of HTML, there was no primitives that allowed drawing on the web browser Canvas and Scalable Vector Graphics (SVG) are the two HTML constructs the help draw on the

browser A new HTML 5.0 Canvas that creates an area that can be drawn over using Javascript SVG (existing before HTML 5.0) defines a set of drawing primitives as HTML elements which can be

used to draw on the browser without requiring Javascript.

Create Canvas Get a 2D Context object

Use Context Object Methods for

drawing

Using JavascriptUsing HTML

How is canvas created and used?


Audio and Video HTML 5.0 allows embedding audio/video content as an element IE9 supports H-256 (MPEG version 10) video codec. Audio/Video can also be accessed by Javascript


Audio and Video HTML 5.0 allows embedding audio/video content as an element IE9 supports H-256 (MPEG version 10) video codec. Audio/Video can also be accessed by Javascript


Geolocation Allows locating the current

geographic position from where the request has been issues

Uses an (asynchronous) API to work on geographic location without having to worry about the device that hosts the API

Accessible from “navigator” object’s “geolocator” object.

Currently NOT supported in IE9

http://html5demos.com

http://html5demos.com/


Offline Content: HTML 5.0 AppCache App Cache provides support to web pages to present content irrespective of the constraints of

dynamically changing location (airplane, car) or spotty network Provides a repository to web pages for offline access of content that is deemed critical for its use App Cache is an area outside the browser cache that is made available specifically for a web

application Defining App Cache:

Create a file containing the CACHE MANIFEST definition and serve if off the server as MIME "text/cache-manifest” The definition should contain the list of resources that the app requires for offline support Enable it in your <body> tag Example:

Cache.Manifest FileCACHE MANIFEST

/static/stickies.html/media/deleteBtn.gif/css/stickies.css/js/stickies.js

<body manifest="./cache.manifest“> </body>


HTML 5.0 Web Workers A mechanism to allow Javascript to run in the background Makes use of a “Worker” object instance and passes a background .js file; sets a postback event to

alert when the file completes its job The background .js file will require to execute its long process and should postback a message upon

completion. Example:<script> var worker = new Worker ('worker.js'); worker.onmessage = function (event) { console.log( "Results: " + event.data); }</script>function doBackgroundJob() { // ... do a real busy job here... postMessage(value); } doBackgroundJob();


IE9 (Beta): Key concepts and demo


Why is Internet Explorer important to us? The adoption of Windows Desktop OS has resulted in IE being almost

automatically adopted. It reaches enterprises, groups and individuals like no other browser does.

Most Enterprises (= serious investment + greatest impact) work on Internet Explorer Support of IE is backed by a huge company (Microsoft) To help with governance and strategic vendor relationship, most corporate policies make IE the

default browser The truth is, despite many wonderful browsers that have emerged, IE stands tall

and cannot be ignored !!!

The Experience of IE9

•Performance improvements •New “Chakra” Javascript Engine•True Hardware Accelerator Usage: Uses GPU for fast processing

Fast

• New Tab page• Notification Bar• Pinned Sites • Web-focused browsing• Windows 7 integration

Clean• Add-on Performance Advisor• Compatibility View• Cross-site scripting filter• Domain highlighting• Download Manager• InPrivate• SmartScreen Filter• Tab isolation and recovery

Trusted


FAST: New enhancements to the “Chakra” Javascript Engine Chakra JavaScript Engine – Key enhancement

ParserJavaScript Abstract Syntax Tree

IE9 bytecode Interpreter

Queue CodegenJS Code Compiled JS

Background, pre-compiled JS (into native code and injected into foreground thread) Modernized Type optimization – type representation, polymorphic inline caching, efficient machine

type implementation Faster Interpreter – using registry-based bytecode layout, efficient opcode and use of type

optimizations JS library optimizations – Optimized JS runtime libraries to make efficient string, regular expr, arrays,

etc.

• Executes immediate JS code

• Takes fraction of total time

• Pre-compiles queued JS code

• Environmentally sensitive


FAST: New enhancements to the “Chakra” Javascript Engine Use of GPU to process graphics

http://ie9buzz.com/post/Chakra-the-new-Javascript-engine.aspx




Clean: New UI enhancements to IE9 (Beta)

Easy access to common UI tasks• Larger Back button• Compact toolbar•More room for webpage

• Tab window can be dragged around and out of the IE9 window (Tear-off tab).• Processing

isolated within a tab

Non-obtrusive information bar

New download manager


Trust: Feature enhancements to IE9 (Beta)

Inclusion of SmartScreen filter to protech from phishing

Developer tools to help with website management

virtual techdaysTHANKS│22-24 august 2010

IE9 (Beta) Demo


Key takeaway’s

Microsoft is launching IE9 with an alignment towards a better web. This is enabled by making the browser standards compliant to HTML5, performant, secure and easy to use.

Development community should: Pay keen attention to HTML 5.0, CSS 3.0 and JavaScript Stay current with IE9 and other browsers Get mastery in understanding and using the developer tools in IE8/IE9 Prepare to work on migration projects within their organizations for their customers

o Many customer’s are still with XP and IE 6/7o No gold rush towards Windows 7 or IE9

Use IE9 (Beta) or IE9 Platform Preview (Currently 7th edition) and continue to share findings with MS to make it a better browser Use the IE9 Feedback tool from Toolbar -> Help Button -> Send feedback Connect to connect.microsoft.com/ie

virtual techdaysINDIA │ 18-20 august 2010

RESOURCES

IE9 Guide for Developers http://msdn.microsoft.com/hi-in/ie/ff468705(en-us).aspx Valuable resource that guides with the features implemented in IE9

IE9 Test drive http://ie.microsoft.com/testdrive/ Demos and resource

Script Junkies http://ie.microsoft.com/testdrive/ Scripts shared by other developers on make useful tasks

Showcase: Beauty of the Web http://www.beautyoftheweb.com Showcases real sites that implement HTML 5.0 on IE9

Everything else http://www.bing.com For anything else not covered !!!

http://msdn.microsoft.com/hi-in/ie/ff468705(en-us).aspx

http://ie.microsoft.com/testdrive/

http://ie.microsoft.com/testdrive/

http://www.beautyoftheweb.com/

http://www.beautyoftheweb.com/

http://www.bing.com/

http://www.bing.com/

virtual techdaysTHANKS│22-24 august 2010

[email protected]


Semantic tag – sample code


Canvas – sample code

31


Audio-Video – sample code

32


Geolocation – sample code

Virtual techdays INDIA │ 22-24 november 2010 HTML5 and IE9 (Beta): Making the web more Beautiful Edwin Anand │ MS CoE Lead (HiTech ISU), Tata Consultancy.

Documents

web html

demo virtual techdaysindia

upgrades html

browsera new html

dragged element

svgin earlier versions

mpeg version

embedding audiovideo