HTML5and friends

Bobby van der Sluis August 20, 2010

Take AWAYs

★ what is HTML5?★ Why is it hip?★ What will it change?

THE ROAD TO HTML5

THE ROAD TO HTML5

W3C

for over a decade tried to

create an XML-based web

BUT FAILED MISERABLY

★ Internet explorer: 95%★ 1 syntax error breaks a page★ overly complex★ new stuff not backwards

compatible

In the meantime...

WHATWG

★ mozilla + opera + apple★ evolve web browsers★ foundation of html5

w3c in 2009

Xhtml is dead,

long live html5!

the new pragmatism

★ browser makers decide★ backwards compatibility★ paving the cowpaths★ evolve together

THE PROCESS WORKS!

The standards-based web is evolving faster than ever

HTML5 -the spec

★ used to be huge★ lots taken out★ still a work in progress★ getting in good shape

What’s in it?

★ lots of developer goodies★ adds semantics

- e.g. header, footer, nav, article, aside

★ everything is clickable, draggable or editable

What’s in it?

★ forms on steroids- e.g. date picker, slider, spinner, color picker, email field,

telephone field, custom fields -> less JavaScript

★ browser history mgt.★ undo mgt.

Heavy hitters

★ audio and video★ bitmap canvas★ offline browsing

HTML5 -the Buzzword

includes many related

technologies

The future web stack

★ html5★ css3★ svg★ new dom apis★ ecmascript 5★ vendor specific additions

CSS3

★ 50 modules★ prioritized★ mostly a work

in progress

coming soon

★ colors with alpha★ opacity★ backgrounds & borders

- e.g. rounded corners, scalable bg, multiple bg.

★ web fonts★ media queries

- conditional style rules, e.g. based on device width or screen orientation

Pure gold

CSs animations, transitions,

2d & 3d transforms

to enable Flash-like

animations

SVG

★ a relatively old spec

★ vector graphics

★ embeddable in html5 & css3

NEW DOM API’s

★ geolocation- uses gps, cell tower triangulation, nearby wifi access

points, IP geolocation -> location aware browsing

★ client-side storage + db- bye, bye cookies

★ cross-document messaging★ Cross-domain ajax +

resource sharing

NEW DOM API’s

★ workers- multi-threaded javascript

★ sockets- 2-way communication

★ web notifications + server-sent events

- incl. push notifications

NEW DOM API’s

★ microdata- alternative for rdfa and microformats

★ WAI-ARIA- enabling accessibility for web applications

★ widgets- packaging a web app to run as a native app

NEW DOM API’s

★ FILE api★ contacts api★ media capture★ mime type & protocol

handler registration

ECMAScript 5

★ defines javascript 1.9★ new developer goodies

- e.g. native JSON

★ security & consolidation

OTHER developments

★ webgl- hardware accelerated 3d graphics (3d context for canvas)

★ touch & gestures★ fullscreen★ next-gen javascript engines★ built-in developer tools★ hardware acceleration

Conclusions

web Development 2.0

The web technologies of

tomorrow are being defined

today

The rise of a powerful open web platform

★ better performing user interfaces

★ decreased need for plug-ins★ able to compete with

desktop applications

Nice, but when will it arrive?

Browsers

★ Firefox, chrome, safari, opera have short browser update cycles

★ what will ship with internet explorer 9?

★ when will internet explorer 6, 7 & 8 be phased out?

How does this affect me today?

FOR Developers

★ start using the html5 doctype and syntax today

- It is already supported cross-browser today (hurray backwards compatibility!)

- leaner, better readable markup compared to xhtml

- ready for the future, e.g. just drop in the <video> element at any time you feel comfortable with

★ do not overdo it- only use new html5 elements when cross-browser supported

Get acquainted:

books & demos