virtual techdays

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 definitionsNavigation

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

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

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

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

• 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,

• 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 !!!

virtual techdaysTHANKS│22-24 august 2010

edwin.anand@tcs.com

Semantic tag – sample code

Canvas – sample code

Audio-Video – sample code

Geolocation – sample code

virtual techdays

Documents

Virtual techdays INDIA │ 22-24 November 2010 Windows Virtual PC & Windows XP Mode Aviraj Ajgekar │ Regional Site Manager │ Microsoft Corporation Blog:

Virtual techdays INDIA │ 9-11 February 2011 Caching Enhancement in ASP.NET 4.0 Abhijit Jana │ Consultant, Microsoft

Virtual techdays INDIA │ 9-11 February 2011 Governance in Sharepoint 2010 Manoj Mantri │ Technology Architect, Infosys

Virtual techdays INDIA │ 18-20 august 2010 virtual techdays INDIA │ 18-20 august 2010 Moving/Co-existing your messaging platform to the cloud with Exchange

Virtual techdays INDIA │ 18-20 august 2010 Planning for Desktop Virtualization M.S.Anand │ Technology Evangelist, Microsoft Corporation

virtual techdays

Virtual techdays INDIA │ 9-11 February 2011 virtual techdays AppFabric Futures – Access Control Service Niraj Bhatt │ Windows Azure MVP

Virtual techdays INDIA │ 9-11 February 2011 virtual techdays Desktop Security with Windows 7 AppLocker & BitLocker to Go Aviraj Ajgekar │ Technology Evangelist

Virtual techdays INDIA │ 9-11 February 2011 Microsoft Forefront Endpoint Protection 2010 Madan Mohan │ Consultant, MGSI

Virtual techdays INDIA │ 9-11 February 2011 virtual techdays Data grail: Data Market on Windows Azure Sudhindra Kovalam │ Developer, Icertis Inc

Virtual techdays INDIA │ 22-24 November 2010 Security @ Microsoft Anirudh Singh Rautela │ Technology Specialist - Security

Virtual techdays INDIA │ 9-11 February 2011 virtual techdays What's new Windows Server 2008 R2 Service Pack 1 Aviraj Ajgekar │ Technology Evangelist │

Virtual techdays INDIA │ 9-11 February 2011 virtual techdays Auditing Made Easy: Change Tracking and Change Data Capture Pinal Dave │ Technology Evangelist,

Virtual techdays INDIA │ 22-24 November 2010 AppFabric Cache Jatin Kakkar │ Sr. Program Manager, AppFabric