Upload
dwain-shaw
View
218
Download
0
Tags:
Embed Size (px)
Citation preview
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
virtual techdaysINDIA │ 22-24 november 2010
S E S S I O N A G E N D A
virtual techdaysINDIA │ 22-24 november 2010
Content Delivery demands
virtual techdaysINDIA │ 22-24 november 2010
User Experience/Performance demand
http://www.yuiblog.com/blog/2009/10/13/video-neuberg-html5/
virtual techdaysINDIA │ 22-24 november 2010
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
virtual techdaysINDIA │ 22-24 november 2010
HTML 5.0: Key concepts and demo
virtual techdaysINDIA │ 22-24 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 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
virtual techdaysINDIA │ 22-24 november 2010
HTML 5.0 feature map
video semantic tags canvas
offline local storage
drag & drop
audio geolocation
web workers
virtual techdaysINDIA │ 22-24 november 2010
semantic tags – for layout definitions
Navigation
Header
Navigation
Footer
Article
virtual techdaysINDIA │ 22-24 november 2010
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)
virtual techdaysINDIA │ 22-24 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 techdaysINDIA │ 22-24 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 techdaysINDIA │ 22-24 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 techdaysINDIA │ 22-24 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
http://html5demos.com
virtual techdaysINDIA │ 22-24 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 <body> tag Example:
Cache.Manifest FileCACHE MANIFEST
/static/stickies.html/media/deleteBtn.gif/css/stickies.css/js/stickies.js
<body manifest="./cache.manifest“> </body>
virtual techdaysINDIA │ 22-24 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:<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();
virtual techdaysINDIA │ 22-24 november 2010
IE9 (Beta): Key concepts and demo
virtual techdaysINDIA │ 22-24 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 techdaysINDIA │ 22-24 november 2010
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
virtual techdaysINDIA │ 22-24 november 2010
FAST: New enhancements to the “Chakra” Javascript Engine Use of GPU to process graphics
http://ie9buzz.com/post/Chakra-the-new-Javascript-engine.aspx
virtual techdaysINDIA │ 22-24 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 techdaysINDIA │ 22-24 november 2010
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
virtual techdaysINDIA │ 22-24 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/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
virtual techdaysINDIA │ 22-24 november 2010
Semantic tag – sample code
virtual techdaysINDIA │ 22-24 november 2010
Canvas – sample code
31
virtual techdaysINDIA │ 22-24 november 2010
Audio-Video – sample code
32
virtual techdaysINDIA │ 22-24 november 2010
Geolocation – sample code