virtual techdays INDIA │ november 2010 HTML5 and IE9 (Beta): Making the web more Beautiful Edwin Anand │ MS CoE Lead (HiTech ISU), Tata Consultancy Services

 Defining “the beauty of the web”  HTML 5 overview  IE 9 (Beta) Overview  Conclusions virtual techdays INDIA │ november 2010 S E S S I O N A G E N D A

virtual techdays INDIA │ november 2010 Content Delivery demands

virtual techdays INDIA │ november 2010 User Experience/Performance demand

virtual techdays INDIA │ november 2010 Perceived impact of web 2.0 (2008 Forrester study) near-death-spiral/ ‘Web 2.0 Accelerating Print Newspapers’ “Near-Death Spiral”’

INDIA │ 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

INDIA │ november 2010 HTML 5.0: Key concepts and demo

virtual techdays INDIA │ november 2010 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 Final version in  Purpose: Upgrades HTML to suit the modern needs of Web  Key Statistics:   9 new “structure” tags  16 new HTML elements  13 new types

virtual techdays INDIA │ november 2010 HTML 5.0 feature map video semantic tags canvas offline local storage drag & drop audio geolocation web workers

virtual techdays INDIA │ november 2010 semantic tags – for layout definitions Navigation Header Navigation Footer Article

virtual techdays INDIA │ november 2010 drag and drop – intuitive implementation  Every element has a boolean “draggable” property that can be set to 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)

virtual techdays INDIA │ november 2010 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?

virtual techdays INDIA │ november 2010 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

virtual techdays INDIA │ november 2010 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

virtual techdays INDIA │ november 2010 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

virtual techdays INDIA │ november 2010 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 tag  Example:  Cache.Manifest File CACHE MANIFEST /static/stickies.html /media/deleteBtn.gif /css/stickies.css /js/stickies.js 

virtual techdays INDIA │ november 2010 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: var worker = new Worker ('worker.js'); worker.onmessage = function (event) { console.log( "Results: " + event.data); } function doBackgroundJob() { //... do a real busy job here... postMessage(value); } doBackgroundJob();

virtual techdays INDIA │ november 2010 IE9 (Beta): Key concepts and demo

virtual techdays INDIA │ november 2010 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

virtual techdays INDIA │ november 2010 FAST: New enhancements to the “Chakra” Javascript Engine  Chakra JavaScript Engine – Key enhancement ParserJavaScript Abstract Syntax Tree IE9 bytecode Interpreter QueueCodegen JS 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

virtual techdays INDIA │ november 2010 FAST: New enhancements to the “Chakra” Javascript Engine  Use of GPU to process graphics Javascript-engine.aspx

virtual techdays INDIA │ november 2010 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

virtual techdays INDIA │ november 2010 Trust: Feature enhancements to IE9 (Beta) Inclusion of SmartScreen filter to protech from phishing Developer tools to help with website management

virtual techdays THANKS │ august 2010 IE9 (Beta) Demo

virtual techdays INDIA │ november 2010 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/7 o No gold rush towards Windows 7 or IE9  Use IE9 (Beta) or IE9 Platform Preview (Currently 7 th 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/ieconnect.microsoft.com/ie

virtual techdays INDIA │ august 2010 RESOURCES  IE9 Guide for Developers   Valuable resource that guides with the features implemented in IE9  IE9 Test drive   Demos and resource  Script Junkies   Scripts shared by other developers on make useful tasks  Showcase: Beauty of the Web   Showcases real sites that implement HTML 5.0 on IE9  Everything else   For anything else not covered !!!

virtual techdays THANKS │ august 2010

virtual techdays INDIA │ november 2010 Semantic tag – sample code

virtual techdays INDIA │ november 2010 Canvas – sample code

31 virtual techdays INDIA │ november 2010 Audio-Video – sample code

32 virtual techdays INDIA │ november 2010 Geolocation – sample code