I Love HTML5

Buildin

g Nex

t Gen

erat

ion W

eb

Applicat

ions

Who Am I?Shravan Kumar KasagoniTechnical Fellow @ Thomson ReutersMicrosoft MVP – ASP.NET & IIS

http://theshravan.net@techieshravan

Rough Timeline of Web Technologies

1991HTML

1994HTML 2

1996CSS 1 +

JavaScript

1997HTML 4

1998CSS 2

2000XHTML 1

2002 Tableless

Design

2005AJAX

2009HTML 5

2022

What is HTML 5?

HTML 5 != HTMLHTML 5 IS NOT JUST

HTML

Just a marketing message

HTML5 is...

the future of the web

still under development

a huge spec

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 implement

First Public Working Draft Working Draft

Candidate Recommendatio

n

Proposed Recommendatio

n

Recommendation

HTML5

HTMLECMA

Script 5CSS 3

JS API’S +

etc.

What’s New Markup – HTML

New Markup Elementsarticle figcaption progress

aside footer ruby

bdi header rt

command hgroup rp

details mark section

summary meter time

figure nav wbr

http://w3schools.com/html5/default.asp

New Media Elementsaudio For multimedia content, sounds, music or

other audio streams

video For video content, such as a movie clip or other video streams

source For media resources for media elements, defined inside video or audio elements

embed For embedded content, such as a plug-in

track For text tracks used in mediaplayers

The Canvas Element

<canvas></canvas>

http://w3schools.com/html5/default.asp

New Form Elements

datalist A list of options for input values

keygen Generate keys to authenticate users

outputFor different types of output, such as output written by a script

http://w3schools.com/html5/default.asp

New Input Type Attribute Valuestel week

search time

url datetime-local

email number

datetime range

date color

month placeholder

http://w3schools.com/html5/default.asp

Video Formats and Browser SupportCurrently supported video formats : MP4, WebM, Ogg

Browser MP4 WebM Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES

SVG Basics

XML-based

• Scriptable, extensible, easily editable• Easy to apply CSS styles

Vector graphics

• Resizable without degradation• Vector images are composed of shapes instead of pixels

Compression

• Fast download

Easy debugging

• It is just XML!

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>

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

CSS3

CSS3

• 2nd largest spec in “HTML5”• Major revision to CSS 2.1• CSS 3

Borders & ColorsBackgrounds & ShadowsWOFF Media queriesSelectorsTransforms

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

}

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;

}

WOFF Fonts & @font-face

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

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

CSS3 2D Transforms

• CSS3 2D Transforms• Matrix• Translate• Scale• Rotate• Skew

34

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

http://theshravan.net | @techieshravan

Thank you