2. AGENDA
• The history of HTML5
• What’s new in HTML5
• HTML5 vs. Silverlight & Flash
• Next steps
3. MY HTML5 BACKGROUND
• Interest in HTML5 for ~1 year
• HTML5 workshop in Las Vegas
• Advertising is dependent on Flash
(doesn’t work with iOS devices)
11. HTML XHTML
• 1998 XML 1.0
• 1999 HTML 4.01
• 2000 XHTML 1.0
• Reformulate HTML in XML without
adding any new elements or attributes
• First draft of XForms 1.0
12. XHTML – THE TRUTH
Who is developing
XHTML web sites?
14. XHTML – THE TRUTH
Everything you know
about XHTML is wrong
15. XHTML – THE TRUTH
• HTML 4.01
• HTML 4.01 DOCTYPE
• MIME type – text/html
• Browsers forgive malformed HTML
• XHTML 1.0
• XHTML 1.0 DOCTYPE
• MIME type – application/xhtml+xml
• Browsers fail on the first error
(draconian error handling)
16. XHTML – THE TRUTH
XHTML – forget about
existing (99%) web sites!
17. XHTML – THE TRUTH
Thousands of web developers upgraded to
XHTML syntax and DOCTYPE but kept
serving it with a text/html MIME type
20. THE FUTURE OF HTML
June 2004, W3C Workshop
An evolution of the existing HTML 4 standard to include
new features for modern web application developer
21. THE FUTURE OF HTML
7 PRINCIPLES
• Backwards compatibility, clear migration path
• Well-defined error handling
• Users should not be exposed to authoring errors
• Practical use
• Scripting is here to stay
• Device-specific profiling should be avoided
• Open process
22. THE FUTURE OF HTML
THE POLL
Should the W3C develop declarative
extension to HTML and CSS and
imperative extensions to DOM?
23. THE FUTURE OF HTML
THE SPLIT
• W3C
• XHTML 2.0
• WHAT Working Group
• Documenting the forgiving error-handling
algorithms that browsers actually used
• XForms 2.0
• <canvas>
• <audio> and <video>
24. THE FUTURE OF HTML
THE REUNION
October 2006, Tim Berners-Lee
announced that the W3C would work together with the
WHAT Working Group to evolve HTML
25. THE FUTURE OF HTML
FIRST DRAFT
January 2008, HTML5 Draft
The first time ever all 5 major browser
vendors collaborate together
28. WHAT’S NEW –
JAVASCRIPT API
• New Selectors
• Web Workers*
• Web Sockets*
• Web Storage
• Offline Apps*
• Geolocation
29. WHAT’S NEW – JS API
NEW SELECTORS
• DOM API
var els = document.getElementsByClassName('section');
els[0].focus();
• Selector API
var els = document.querySelectorAll('ul li:nth-child(odd)');
30. WHAT’S NEW – JS API
WEB WORKERS
• Independent JavaScript threading
main.js:
var worker = new Worker('increment.js');
worker.postMessage(2);
worker.onmessage = function(event) { alert(event.data); };
increment.js:
self.onmessage = function(event) {
var result = event.data + 1;
self.postMessage(result);
}
31. WHAT’S NEW – JS API
WEB SOCKETS
• Bi-directional full-duplex communication
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage('Hello, WebSocket');
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
32. WHAT’S NEW – JS API
WEB STORAGE
• Local Storage
var item = document.localStorage.setItem('key','value');
• Session Storage
var item = document.sessionStorage.getItem('value');
• IndexedDB
var db = indexedDB.open('books', 'Books');
db.createIndex('BookTitle', 'books', 'title');
var index = db.index('BookTitle');
var result = index.get('HTML5');
34. WHAT’S NEW – JS API
GEOLOCATION
• Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert(lat + ':' + lng);
});
}
38. WHAT’S NEW – CSS3
BORDER RADIUS
border-radius: 20px 10px;
border-top-left-radius: 20px 10px;
border-top-right-radius: 10px 25px;
border-bottom-right-radius: 5px 10px;
border-bottom-left-radius: 15px 25px;
39. WHAT’S NEW – CSS3
BACKGROUNDS
• Multiple backgrounds
div {
background-image: url(bg1.png), url(bg2.png);
background-position: center center, 20% 80%, top left;
}
• SVG in CSS backgrounds
body { background-image: url("marble.svg") }
66. HTML5 VS.
FLASH & SILVERLIGHT
HTML5 is not ready
for main stream yet
67. HTML5 DRAWBACKS
• Draft version of specification
• No standardized audio / video
containers and codecs
• Poor video / graphics performance
• Lack of professional HTML5 tools
68. HTML5 VS.
FLASH & SILVERLIGHT
• Flash & Silverlight will stay for
• Enhanced video streaming
• Digital rights management (DRM)
• Complex RIAs
69. ADOBE AND HTML5
• Working hard on HTML5 support
• HTML5 video player with fallback to Flash
• Export images as SVG and Canvas from
Illustrator and Photoshop
• Convert Flash to HTML5
70. MICROSOFT AND HTML5
• Big focus on HTML5 and standards
• HTML5 is the only true cross platform solution
for everything, including (Apple’s) iOS platform.
Bob Muglia, PDC2010
• Silverlight remains top platform for
• Mobile
• Desktop applications
• Video / audio streaming
75. NEXT STEPS
• Read http://diveintohtml5.org
• Modernizr.js – detects HTML5 support
• ASP.NET MVC HTML5 helpers
• Leverage <video> with fallback to
Silverlight or Flash
• Leverage <canvas> and <svg> with
fallback to image