HTML5 - A Whirlwind tour

"HTML5” – More than just HTML5

Lohith G N

About Me…

- Technical Evangelist, Telerik (South India)

- Microsoft MVP – ASP.NET/IIS

- Bangalore DotNet User Group Member

- Decade old in the industry

?WHATWG: HTML is the new HTML5!

What is “HTML5”?

HTML5 is... the future of the web still under development a huge spec, and testing isn’t binary

HTML5 is not ... “How To Meet Ladies” version 5

(Credit: @hackatac) Just a marketing message

The “map” of HTML5

W3C

HTML

HTM

L5C

anvas 2

D C

onte

xt

Micro

data

HTM

L+R

DFa

HTM

L5 M

arku

pH

TM

L5 D

iff fro

m H

TM

L4Po

lyglo

t Marku

pTe

xt a

ltern

ativ

es

CSS

CS

S S

nap

shot 2

007

CS

S N

am

esp

ace

sC

SS

Paged M

edia

CS

S P

rint P

rofile

CS

S V

alu

es a

nd

Un

its

CS

S C

asca

din

g a

nd

In

herita

nce

CS

S Te

xt

CS

S W

riting M

od

es

CS

S Lin

e G

ridC

SS

Rub

y

CS

S G

en

era

ted

Con

ten

t for Pa

ged

M

ed

ia

CS

S B

ack

gro

und

s and

B

ord

ers

CS

S Fo

nts

CS

S B

asic B

ox M

od

el

CS

S M

ulti-co

lum

n La

yout

CS

S Te

mp

late

Layou

tC

SS

Med

ia Q

uerie

sC

SS

Sp

eech

CS

S C

olo

rC

SS

Basic U

ser In

terfa

ce

CS

S S

cop

ing

CS

S G

rid Po

sition

ing

CS

S Fle

xib

le B

ox La

you

tC

SS

Imag

e V

alu

es

CS

S 2

D Tra

nsfo

rmatio

ns

CS

S 3

D Tra

nsfo

rmatio

ns

CS

S Tra

nsitio

ns

CS

S A

nim

atio

ns

Web Apps

CO

RS

Ele

men

t Traversa

lFile

API

Index D

B

Pro

gra

mm

ab

le H

TTP C

ach

ing

an

d

Serv

ing

Pro

gre

ss Even

tsS

ele

ctors A

PI

Sele

ctors A

PI L2

Serv

er-S

ent E

vents

Unifo

rm M

essa

gin

g

Policy

Web

DO

M C

ore

Web

SQ

L Data

base

Web

IDL

Web

Socke

ts API

Web

Sto

rag

eW

eb

Worke

rsX

mlH

ttpR

eq

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

Even

tsD

OM

L2 S

tyle

DO

M L2

Traversa

l an

d

Rang

e

DO

M L2

HTM

LD

OM

L3 C

ore

DO

M L3

Even

tsD

OM

L3 Lo

ad

an

d S

ave

DO

M L3

Valid

atio

nD

OM

L3 X

Path

DO

M L3

Vie

ws a

nd

Form

attin

g

DO

M L3

Abstra

ct S

chem

as

SVG

Docu

men

t Stru

cture

Basic S

hapes

Path

sTe

xt

Tran

sform

sPain

ting, Fillin

g, C

olo

rS

criptin

gS

tylin

gG

radie

nts a

nd P

atte

rns

SM

ILFo

nts

Filters

Geolo

catio

nG

eolo

catio

n A

PI

ECMA

ECMA Script

262

EC

MA

Scrip

t 26

2

Specification lifecycle

Last call

Call to impleme

nt

First Public Working Draft

Working Draft

Candidate Recommenda

tion

Proposed Recommenda

tion

Recommendation

W3C HTML5 Specification

~1200 print pages Issue Tracker: ~37 open Bug Tracker: ~208 open Mailing list: ~4000

emails/month

Link: www.w3.org/TR/html5

The map of “HTML5”W3C

HTML

HTM

L5C

an

vas 2

D C

on

text

Micro

data

HTM

L+R

DFa

HTM

L5 M

arku

pH

TM

L5 D

iff fro

m H

TM

L4Po

lyg

lot M

arku

pTe

xt a

ltern

ativ

es

CSS

CS

S S

nap

shot 2

00

7C

SS

Nam

esp

ace

sC

SS

Pag

ed

Med

iaC

SS

Print Pro

file

CS

S V

alu

es a

nd

Un

its

CS

S C

asca

din

g a

nd

In

herita

nce

CS

S Te

xt

CS

S W

riting

Mod

es

CS

S Lin

e G

ridC

SS

Ru

by

CSS G

enera

ted C

onte

nt fo

r Paged

Media

CS

S B

ackg

rou

nd

s an

d

Bord

ers

CS

S Fo

nts

CS

S B

asic B

ox M

od

el

CS

S M

ulti-co

lum

n La

you

tC

SS

Tem

pla

te La

you

tC

SS

Med

ia Q

uerie

sC

SS

Sp

eech

CS

S C

olo

rC

SS

Basic U

ser In

terfa

ce

CS

S S

cop

ing

CS

S G

rid Po

sition

ing

CS

S Fle

xib

le B

ox La

you

tC

SS

Imag

e V

alu

es

CS

S 2

D Tra

nsfo

rmatio

ns

CS

S 3

D Tra

nsfo

rmatio

ns

CS

S Tra

nsitio

ns

CS

S A

nim

atio

ns

Web Apps

CO

RS

Ele

men

t Traversa

lFile

API

Ind

ex D

B

Progra

mm

able

HTTP C

ach

ing a

nd

Serv

ing

Prog

ress E

ven

tsS

ele

ctors A

PI

Sele

ctors A

PI L2

Serv

er-S

en

t Even

ts

Un

iform

Messa

gin

g

Policy

Web

DO

M C

ore

Web

SQ

L Data

base

Web

IDL

Web

Socke

ts API

Web

Sto

rag

eW

eb

Worke

rsX

mlH

ttpR

eq

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

Even

tsD

OM

L2 S

tyle

DO

M L2

Traversa

l an

d

Ran

ge

DO

M L2

HTM

LD

OM

L3 C

ore

DO

M L3

Even

tsD

OM

L3 Lo

ad

an

d S

ave

DO

M L3

Valid

atio

nD

OM

L3 X

Path

DO

M L3

Vie

ws a

nd

Fo

rmattin

g

DO

M L3

Ab

stract

Sch

em

as

SVG

Docu

men

t Stru

cture

Basic S

hap

es

Path

sTe

xt

Tran

sform

sPain

ting

, Filling

, Colo

rS

criptin

gS

tylin

gG

rad

ien

ts an

d P

atte

rns

SM

ILFo

nts

Filters

Geolo

catio

nG

eolo

catio

n A

PI

ECMA

ECMA Script

262

EC

MA

Scrip

t 26

2

First Public Working Draft

Working Draft Last Call

Candidate Recommenda

tion

Recommendation

A whirlwind tour of “HTML5”

<!DOCTYPE..

From: HTML 4.01 Strict/Transitional/Frameset

XHTML 1.0 Strict/Transitional/Frameset

To HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

<video> Support for the HTML5 <video> element

MPEG-4/H.264, can be composited with anything else

HTML content, images, SVG graphics

Hardware accelerated, GPU-based decoding

Supports fallback to different formats (mp4, webm) as well as Flash/Silverlight

<video id="myVideo" controls><source src="videos/video.mp4" type="video/mp4"/>

<!–- insert sorry message here or fall back to SL/Flash -->

<object type="application/x-silverlight-2"><param name="source" value="player.xap">

</object></video>

<audio> Add audio content to page with

native playback, events & controls Relies on browser features Supports fallback to different

formats (mp3, aac)

<audio src="audio.mp3" id="audioTag" autoplay controls> <!-- Only shown when browser doesn’t support audio --> <!-- You could embed Flash or Silverlight audio here --></audio>

SVG Basics

• Scriptable, extensible, easily editable

• Easy to apply CSS styles

XML-based

• Resizable without degradation• Vector images are composed of

shapes instead of pixels

Vector graphics

• Fast download

Compression

• It is just XML!

Easy debugging

Scalable Vector Graphics (SVG)

Support for: Full DOM access to SVG elements

Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>

Demo

16

<canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry.</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

Canvas block element, allows drawing 2d graphics

using JavaScript Methods for drawing include: paths, boxes,

circles, text and rasterized images

Demo

SVG or Canvas

Characteristic SVG Canvas

When to use Highly detailed drawing, charts

Programmatic rendering, games

Drawing Mode By Runtime By Application

DOM Support Each SVG element part of DOM

<CANVAS> part of the DOM

Animation Manipulating objects in the DOM

Using direct scripting in canvas

GPU acceleration

Yes Yes

Performance Best for larger surface and/or small # of objects

Best for smaller surface and/or large # of objects

Modification Tag, Script & CSS Script only

18

GeoLocation Let websites use your location information to

improve their services Requires users consent

Navigator.geolocation.getCurrentPosition();

Navigator.geolocation.watchPosition();

Resolution via IP reverse lookup / Wi-Fi triangulation

function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); }}

function callBack(position) { var accuracy = position.coords[“accuracy”]; //in meters var latitude = position.coords[“latitude”]; var longitude = position.coords[“longitude”];}

Demo

CSS3 2nd largest spec in “HTML5”

Major revision to CSS 2.1

CSS 3 Borders & Colors

Backgrounds & Shadows

WOFF

Media queries

Selectors

Transforms

CSS3 Borders CSS3 Borders

Rounded corners with the border-radius property

div.top { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}

CSS3 Colors CSS3 Colors & Transparency

Alpha color with rgba() and hsla() color functions

Transparency control with the opacity property

Full support for CSS3 color keywords

div.top { background-color: rgba(155,0,155,0.5)}div.bottom { background-color: hsla(0,100%,50%,0.2);}

CSS3 Shadows CSS3 Shadows

box-shadow property on block elements

Inset & Multiple shadows

div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2);

}

div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2), -20px -20px 20px hsla(180,50%,50%,0.8);

}

Demo

CSS3 Backgrounds CSS3 Backgrounds

Multiple background images per element

Comma separated values

div{background-image: url("images/1.jpg"), url("images/2.jpg"), url("images/3.jpg");background-position: 90px 90px, 60px 60px, 30px 30px;

}

Demo

WOFF Fonts & @font-face No longer limited to the “web safe” font list!

WOFFs cannot be used outside of page context

Web Open Font Format allows you to package and deliver fonts as needed Designed for web use with the @font-face declaration

A simple repackaging of OpenType or TrueType font data

Source from WOFF Font Subscription Services

<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>

<div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>

Demo

CSS3 Media Queries Selectively style page based on properties of

the display media

<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css"/>

<link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" />

<link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />

Demo

CSS Selectors Dynamic Styling

Style elements based on parameters such as: Pattern matching: rounded borders for all jpg

images

Element location: 1st paragraph

Many kinds of selectors: Type selectors: all H1 elements

Attribute selectors: all autoplay videos

Demo

27

CSS3 2D Transforms CSS3 2D Transforms

Matrix

Translate

Scale

Rotate

Skew

div { -ms-transform: scale(2, 2) rotate(30deg);} De

mo

DEMO

Turning things aroundBringing it all together

“HTML5” What we saw

<Audio>, <Video>, SVG, <Canvas>, Geolocation, CSS

What we didn’t get to

W3C

HTML

M

icrod

ata

HTM

L+R

DFa

Poly

glo

t M

arku

p

Text

alte

rnativ

es

CSS

CS

S S

nap

shot

20

07

CS

S

Nam

esp

ace

s

CS

S Pa

ged

M

ed

ia

CS

S Prin

t Pro

file

CS

S V

alu

es

an

d U

nits

CS

S

Casca

din

g

an

d

Inh

erita

nce

CS

S Te

xt

CS

S W

riting

M

od

es

CS

S Lin

e G

ridC

SS

Ru

by

CSS G

enera

ted

Conte

nt fo

r Paged

Media

C

SS

Fon

tsC

SS

Basic B

ox

Mod

el

CS

S M

ulti-

colu

mn

La

you

t

CS

S Te

mp

late

La

you

t

CS

S S

peech

C

SS

Basic

Use

r Inte

rface

C

SS

Sco

pin

gC

SS

Grid

Po

sition

ing

CS

S Fle

xib

le

Box

Layou

t

CS

S Im

ag

e

Valu

es

CS

S 3

D

Tran

sform

atio

ns

CS

S

Tran

sition

s

CS

S

An

imatio

ns

Web Apps

CO

RS

Ele

men

t Tra

versa

lFile

API

Ind

ex D

BPro

gra

mm

able

HTTP

Cach

ing a

nd S

erv

ing

Prog

ress

Even

tsS

ele

ctors A

PI

Sele

ctors A

PI

L2

Serv

er-S

en

t E

ven

ts

Un

iform

M

essa

gin

g

Policy

Web

DO

M

Core

Web

SQ

L D

ata

base

Web

IDL

Web

Socke

ts A

PI

Web

Sto

rag

eW

eb

Worke

rsX

mlH

ttpR

eq

uest

Xm

lHttp

Req

uest L2

DO

M L1

DO

M L2

Core

DO

M L2

Vie

ws

DO

M L2

E

ven

tsD

OM

L2 S

tyle

DO

M L2

Tra

versa

l an

d

Ran

ge

DO

M L2

HTM

LD

OM

L3 C

ore

DO

M L3

E

ven

ts

DO

M L3

Load

an

d S

ave

DO

M L3

Valid

atio

nD

OM

L3 X

Path

DO

M L3

Vie

ws

an

d

Form

attin

g

DO

M L3

A

bstra

ct S

chem

as

SVG

Te

xt

Scrip

ting

Sty

ling

Fo

nts

Filters

Geolo

cati

on

ECMA

ECMA Script 262

EC

MA

Scrip

t 2

62

Resources www.w3c.org

www.beautyoftheweb.in

www.ietestdrive.com

www.html5labs.com