1 / 32

virtual techdays

INDIA │ 22-24 november 2010. virtual techdays. HTML5 and IE9 (Beta): Making the web more Beautiful. Edwin Anand │ MS CoE Lead ( HiTech ISU), Tata Consultancy Services. INDIA │ 22-24 november 2010. virtual techdays. Defining “the beauty of the web” HTML 5 overview

mare
Download Presentation

virtual techdays

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INDIA │ 22-24 november2010 virtual techdays HTML5 and IE9 (Beta): Making the web more Beautiful Edwin Anand│ MS CoELead (HiTech ISU), Tata Consultancy Services

  2. INDIA │ 22-24 november 2010 virtual techdays • 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

  3. INDIA │ 22-24 november 2010 virtual techdays Content Delivery demands

  4. INDIA │ 22-24 november 2010 virtual techdays User Experience/Performance demand http://www.yuiblog.com/blog/2009/10/13/video-neuberg-html5/

  5. INDIA │ 22-24 november 2010 virtual techdays http://www.researchrecap.com/index.php/2008/06/17/web-20-accelerating-print-newspapers-near-death-spiral/ Perceived impact of web 2.0 (2008 Forrester study) ‘Web 2.0 Accelerating Print Newspapers’ “Near-Death Spiral”’

  6. INDIA │ 22-24 november 2010 virtual techdays What makes “a beautiful web”?

  7. INDIA │ 22-24 november 2010 virtual techdays HTML 5.0: Key concepts and demo

  8. INDIA │ 22-24 november 2010 virtual techdays • 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 What is HTML 5.0

  9. INDIA │ 22-24 november 2010 virtual techdays HTML 5.0 feature map

  10. INDIA │ 22-24 november 2010 virtual techdays semantic tags – for layout definitions Navigation Header Navigation Article Footer

  11. INDIA │ 22-24 november 2010 virtual techdays • 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) drag and drop – intuitive implementation

  12. INDIA │ 22-24 november 2010 virtual techdays • 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. canvas and SVG • How is canvas created and used? Create Canvas Get a 2D Context object Use Context Object Methods for drawing Using HTML Using Javascript

  13. INDIA │ 22-24 november 2010 virtual techdays • 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

  14. INDIA │ 22-24 november 2010 virtual techdays • 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

  15. INDIA │ 22-24 november 2010 virtual techdays • 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 Geolocation http://html5demos.com

  16. INDIA │ 22-24 november 2010 virtual techdays • 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 File CACHE MANIFEST /static/stickies.html /media/deleteBtn.gif /css/stickies.css /js/stickies.js • <body manifest="./cache.manifest“> </body> Offline Content: HTML 5.0 AppCache

  17. INDIA │ 22-24 november 2010 virtual techdays • 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(); HTML 5.0 Web Workers

  18. INDIA │ 22-24 november 2010 virtual techdays IE9 (Beta): Key concepts and demo

  19. INDIA │ 22-24 november 2010 virtual techdays • 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 !!! Why is Internet Explorer important to us?

  20. The Experience of IE9

  21. INDIA │ 22-24 november 2010 virtual techdays • Chakra JavaScript Engine – Key enhancement FAST: New enhancements to the “Chakra” Javascript Engine • Executes immediate JS code • Takes fraction of total time JavaScript Parser Abstract Syntax Tree IE9 bytecode Interpreter • Pre-compiles queued JS code • Environmentally sensitive Queue Codegen Compiled JS JS Code • 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.

  22. INDIA │ 22-24 november 2010 virtual techdays • Use of GPU to process graphics FAST: New enhancements to the “Chakra” Javascript Engine http://ie9buzz.com/post/Chakra-the-new-Javascript-engine.aspx

  23. INDIA │ 22-24 november 2010 virtual techdays 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 New download manager Non-obtrusive information bar

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

  25. THANKS│22-24 august2010 virtual techdays IE9 (Beta) Demo

  26. INDIA │ 22-24 november 2010 virtual techdays 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 • Many customer’s are still with XP and IE 6/7 • 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

  27. INDIA │ 18-20 august2010 virtual techdays • 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 !!! RESOURCES

  28. THANKS│22-24 august2010 virtual techdays edwin.anand@tcs.com

  29. INDIA │ 22-24 november 2010 virtual techdays Semantic tag – sample code

  30. INDIA │ 22-24 november 2010 virtual techdays Canvas – sample code

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

  32. INDIA │ 22-24 november 2010 virtual techdays Geolocation– sample code

More Related