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)

DISCLAIMER

This is not about

THE HISTORY OF HTML5

HTML QUIZ

What language HTML is based on?

HTML QUIZ ANSWER

SGML

HTML5 QUIZ

What is HTML5?

HTML5 QUIZ ANSWER

• HTML (HTML5, SVG1.1)

• CSS (CSS3)

• JavaScript API

A BIT OF HISTORY

199

1 H

TM

L

199

4 H

TM

L2

199

6 C

SS

, Ja

va

Sc

rip

t

199

7 H

TM

L 3

.2, H

TM

L4

199

8 C

SS

2

199

9 H

TM

L 4

.01

200

0 X

HT

ML

1.0

200

5 C

SS

3 D

raft

200

8 H

TM

L5

Dra

ft

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?

11 to 8 against

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 HTMLTHE REUNION

October 2006, Tim Berners-Leeannounced that the W3C would work together with the

WHAT Working Group to evolve HTML

THE FUTURE OF HTMLFIRST DRAFT

January 2008, HTML5 DraftThe first time ever all 5 major browser

vendors collaborate together

THE FUTURE OF HTMLCURRENT SITUATION

First Public Working Draft

Working Draft

Candidate Recommend

ation

Proposed Recommend

ation

Recommendation

Last callCall to implement

HTML5

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 APINEW SELECTORS

• DOM APIvar els = document.getElementsByClassName('section');

els[0].focus();

• Selector APIvar els = document.querySelectorAll('ul li:nth-child(odd)');

WHAT’S NEW – JS APIWEB WORKERS

• Independent JavaScript threadingmain.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);

}

WHAT’S NEW – JS APIWEB SOCKETS

• Bi-directional full-duplex communicationvar 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'); }

WHAT’S NEW – JS APIWEB STORAGE

• Local Storagevar item = document.localStorage.setItem('key','value');

• Session Storagevar item = document.sessionStorage.getItem('value');

• IndexedDBvar db = indexedDB.open('books', 'Books');

db.createIndex('BookTitle', 'books', 'title');

var index = db.index('BookTitle');

var result = index.get('HTML5');

WHAT’S NEW – JS APIOFFLINE APPS

• Application Cache<html manifest="offline.manifest">

CACHE MANIFEST

styles.css

jquery-1.4.min.js

index.html

• Offline / Online Eventswindow.addEventListener("online",function() {alert('on')});

window.addEventListener("offline",function() {alert('off')});

WHAT’S NEW – JS APIGEOLOCATION

• Geolocation APIif (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(pos) {

var lat = position.coords.latitude;

var lng = position.coords.longitude;

alert(lat + ':' + lng);

});

}


CSS3

WHAT’S NEW – CSS3

• Selectors

• Border Radius

• Backgrounds

• Color & Opacity

• Shadows

• 2D Transforms

• WOFF Fonts

WHAT’S NEW – CSS3SELECTORS

• Selectors.row:nth-child(even) { background: #dde; }

• Specific attributesinput[type="text"] {background: #eee; }

• Negation:not(span) { display: block; }

• Selection::selection { background: #c00; }

WHAT’S NEW – CSS3BORDER 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;

WHAT’S NEW – CSS3BACKGROUNDS

• Multiple backgroundsdiv {

background-image: url(bg1.png), url(bg2.png);

background-position: center center, 20% 80%, top left;

}

• SVG in CSS backgroundsbody { background-image: url("marble.svg") }

WHAT’S NEW – CSS3COLOR & OPACITY

• RGB / RGBAdiv.demo1 { background: rgba(60, 80, 100, 0.25); }

• HSL / HSLAdiv.demo2 { background: hsla(320, 100%, 25%, 0.4); }

• Opacitydiv.demo3 { background:#036; opacity:0.2; }

WHAT’S NEW – CSS3SHADOWS

• Box Shadowdiv { box-shadow: 5px 5px 7px #888; }

• Text Shadowspan { text-shadow: 2px 2px 7px #111; }

WHAT’S NEW – CSS32D TRANSFORMS

div {

transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);

transform-origin: 0% 0%;

}

WHAT’S NEW – CSS3WOFF FONTS

• Font Linking@font-face {

font-family: Whimsy;

src: url('fonts/Whimsy.woff');

}


HTML5

WHAT’S NEW – HTML5SIMPLER MARKUP

HTML5 is simpler


<!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" />


<!doctype html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>






<!doctype html>

<html>

<head>






<!doctype html>

<html>

<head>

<meta charset="utf-8" />





<!doctype html>

<html>

<head>

<meta charset="utf-8" />


<link rel="stylesheet" href="http://sergejus.blogas.lt/wp-content/themes/webby-green-10/style.css" />


WHAT’S NEW – HTML5ELEMENTS

HTML5 is more semantic


• <section>

• <nav>

• <article>

• <header>

• <footer>

• <aside>

• <figure>

• and more…

WHAT’S NEW – HTML5WEB FORMS 2.0

HTML5 is for Web Apps

WHAT’S NEW – HTML5WEB FORMS 2.0• <input type="text" required autofocus />

• <input type="email" value="[email protected]" />

• <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" />

WHAT’S NEW – HTML5AUDIO/VIDEO

HTML5 is richer


• 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();


• Container / Video + Audio Codecs

• MP4 / H.264 + AAC• Ogg / Theora + Vorbis• WebM

No Single

Combination YET

WHAT’S NEW – HTML5CANVAS

• Simple Shapes

• Paths

• Text

• Gradients

• Images

WHAT’S NEW – HTML5CANVAS<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>

WHAT’S NEW – HTML5SVG<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 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


• 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

NEXT STEPS

HTML5 is notall 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

Technology