Demystifying HTML5

DEMYSTIFYING
HTML5
SERGEJUS BARINOVAS
ARCHITECT, ADFORM

AGENDA
• The history of HTML5
• What’s new in HTML5
• HTML5 vs. Silverlight & Flash
• Next steps

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)

HTML QUIZ
What language HTML
is based on?

HTML5 QUIZ ANSWER
• HTML (HTML5, SVG1.1)
• CSS (CSS3)
• JavaScript API

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

XHTML – THE TRUTH
Who is developing
XHTML web sites?

XHTML – THE TRUTH
You are (probably) lying!

XHTML – THE TRUTH
Everything you know
about XHTML is wrong

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)

XHTML – THE TRUTH
XHTML – forget about
existing (99%) web sites!

XHTML – THE TRUTH
Thousands of web developers upgraded to
XHTML syntax and DOCTYPE but kept
serving it with a text/html MIME type

XHTML – THE TRUTH
This is not an XHTML!

A-HA MOMENT
We need to move on
supporting interop!

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

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

THE FUTURE OF HTML
THE POLL
Should the W3C develop declarative
extension to HTML and CSS and
imperative extensions to DOM?

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>

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

THE FUTURE OF HTML
FIRST DRAFT
January 2008, HTML5 Draft
The first time ever all 5 major browser
vendors collaborate together

THE FUTURE OF HTML
CURRENT SITUATION

WHAT’S NEW IN
HTML5
JAVASCRIPT API

WHAT’S NEW –
JAVASCRIPT API
• New Selectors
• Web Workers*
• Web Sockets*
• Web Storage
• Offline Apps*
• Geolocation

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)');

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);
}

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'); }

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');

OFFLINE APPS
• Application Cache
<html manifest="offline.manifest">
CACHE MANIFEST
styles.css
jquery-1.4.min.js
index.html
• Offline / Online Events
window.addEventListener("online",function() {alert('on')});
window.addEventListener("offline",function() {alert('off')});

GEOLOCATION
• Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert(lat + ':' + lng);
});
}

WHAT’S NEW – CSS3
• Selectors
• Border Radius
• Backgrounds
• Color & Opacity
• Shadows
• 2D Transforms
• WOFF Fonts

SELECTORS
• Selectors
.row:nth-child(even) { background: #dde; }
• Specific attributes
input[type="text"] {background: #eee; }
• Negation
:not(span) { display: block; }
• Selection
::selection { background: #c00; }

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;

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") }

COLOR & OPACITY
• RGB / RGBA
div.demo1 { background: rgba(60, 80, 100, 0.25); }
• HSL / HSLA
div.demo2 { background: hsla(320, 100%, 25%, 0.4); }
• Opacity
div.demo3 { background:#036; opacity:0.2; }

SHADOWS
• Box Shadow
div { box-shadow: 5px 5px 7px #888; }
• Text Shadow
span { text-shadow: 2px 2px 7px #111; }

2D TRANSFORMS
div {
transform: scale(0.75)
rotate(0deg)
translate(0px, 0px)
skew(0deg, 0deg);
transform-origin: 0% 0%;
}

WOFF FONTS
• Font Linking
@font-face {
font-family: Whimsy;
src: url('fonts/Whimsy.woff');
}

WHAT’S NEW – HTML5
SIMPLER MARKUP
HTML5 is simpler

SIMPLER MARKUP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Sergejus apie .NET</title>
<link rel="stylesheet" href="http://sergejus.blogas.lt/wp-
content/themes/webby-green-10/style.css" type="text/css" />
<link rel="alternate" type="application/rss+xml"
title="Sergejus apie .NET RSS Feed"
href="http://sergejus.blogas.lt/feed" />

SIMPLER MARKUP
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
charset=utf-8" />

SIMPLER MARKUP
<!doctype html>
<html>
<head>
charset=utf-8" />

SIMPLER MARKUP
<!doctype html>
<html>
<head>
<meta charset="utf-8" />

SIMPLER MARKUP
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
content/themes/webby-green-10/style.css" />

ELEMENTS
HTML5 is more semantic

ELEMENTS
• <section>
• <nav>
• <article>
• <header>
• <footer>
• <aside>
• <figure>
• and more…

ELEMENTS

WEB FORMS 2.0
HTML5 is for Web Apps

WEB FORMS 2.0
• <input type="text" required autofocus />
• <input type="email" value="some@email.com" />
• <input type="date" min="2009-11-22" max="2011-11-22"
value="2010-11-22"/>
• <input type="range" min="0" max="50" value="10" />
• <input type="search" results="10"
placeholder="Search..." />
• <input type="tel" placeholder="(370) 678-00000"
pattern="^(?d{3})?[-s]d{3}[-s]d{5}.*?$" />
• <input type="color" placeholder="e.g. #bbbbbb" />
• <input type="number" step="1" min="-5" max="10"
value="0" />

AUDIO/VIDEO
HTML5 is richer

AUDIO/VIDEO
• Audio
<audio id="audio" src="sound.mp3" controls />
document.getElementById("audio").muted = false;
• Video
<video id="video" src="movie.webm" autoplay controls />
document.getElementById("video").play();

AUDIO/VIDEO
• Container / Video + Audio Codecs
• MP4 / H.264 + AAC
• Ogg / Theora + Vorbis
• WebM

CANVAS
• Simple Shapes
• Paths
• Text
• Gradients
• Images

CANVAS
<canvas id="canvas" width="838" height="220" />
<script>
var canvasContext = document.getElementById("canvas")
.getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI*1/2, Math.PI*3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

SVG
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
circle:hover {fill-opacity:0.9;}
</style>
<g style="fill-opacity:0.7;">
<circle cx="6cm" cy="2cm" r="100" style="fill:red; stroke:black;
stroke-width:0.1cm" transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:blue; stroke:black;
stroke-width:0.1cm" transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" style="fill:green; stroke:black;
stroke-width:0.1cm" transform="translate(-70,150)"/>
</g>
</svg>

HTML5 VS.
FLASH & SILVERLIGHT
HTML5 is the future
of Open Web

HTML5 VS.
FLASH & SILVERLIGHT
HTML5 is not ready
for main stream yet

HTML5 DRAWBACKS
• Draft version of specification
• No standardized audio / video
containers and codecs
• Poor video / graphics performance
• Lack of professional HTML5 tools

HTML5 VS.
FLASH & SILVERLIGHT
• Flash & Silverlight will stay for
• Enhanced video streaming
• Digital rights management (DRM)
• Complex RIAs

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

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

NEXT STEPS
HTML5 is not
all or nothing

NEXT STEPS
HTML5 is foward
compatible!

NEXT STEPS
You can start using it
right now!

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

NEXT STEPS
Have fun and be creative!

Q & A
THANKS!
sergejus.blogas.lt, @sergejusb

Demystifying HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Demystifying HTML5

Similar to Demystifying HTML5 (20)

More from Sergejus Barinovas

More from Sergejus Barinovas (13)

Recently uploaded

Recently uploaded (20)

Demystifying HTML5