Presentation I gave at Blast Radius' Biertje o'clock

1. HTML5
and friends
Bobby van der Sluis
August 20, 2010

2. Take AWAYs
★ what is HTML5?
★ Why is it hip?
★ What will it change?

3. THE ROAD TO
HTML5

4. W3C
for over a decade tried to
create an XML-based web

5. BUT FAILED
MISERABL Y
★ Internet explorer: 95%
★ 1 syntax error breaks a page
★ overly complex
★ new stuff not backwards
compatible

6. In the meantime...

8. WHATWG
★ mozilla + opera + apple
★ evolve web browsers
★ foundation of html5

9. w3c in 2009
Xhtml is dead,
long live html5!

10. the new
pragmatism
★ browser makers decide
★ backwards compatibility
★ paving the cowpaths
★ evolve together

12. THE PROCESS
WORKS!

13. The standards-based web is
evolving faster than ever

15. HTML5 -
the spec
★ used to be huge
★ lots taken out
★ still a work in progress
★ getting in good shape

16. What’s in it?
★ lots of developer goodies
★ adds semantics
- e.g. header, footer, nav, article, aside
★ everything is clickable,
draggable or editable

17. 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.

18. Heavy hitters
★ audio and video
★ bitmap canvas
★ offline browsing

19. HTML5 -
the Buzzword
includes many related
technologies

20. The future
web stack
★ html5
★ css3
★ svg
★ new dom apis
★ ecmascript 5
★ vendor specific additions

21. CSS3
★ 50 modules
★ prioritized
★ mostly a work
in progress

22. 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

23. Pure gold
CSs animations, transitions,
2d & 3d transforms
to enable Flash-like
animations

24. SVG
★ a relatively
old spec
★ vector
graphics
★ embeddable
in html5 &
css3

25. 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

26. NEW DOM API’s
★ workers
- multi-threaded javascript
★ sockets
- 2-way communication
★ web notifications +
server-sent events
- incl. push notifications

27. 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

28. NEW DOM API’s
★ FILE api
★ contacts api
★ media capture
★ mime type & protocol
handler registration

29. ECMAScript 5
★ defines javascript 1.9
★ new developer goodies
- e.g. native JSON
★ security & consolidation

30. OTHER
developments
★ webgl
- hardware accelerated 3d graphics (3d context for canvas)
★ touch & gestures
★ fullscreen
★ next-gen javascript engines
★ built-in developer tools
★ hardware acceleration

31. Conclusions

32. web
Development 2.0
The web technologies of
tomorrow are being defined
today

33. The rise of a
powerful open
web platform
★ better performing user
interfaces
★ decreased need for plug-ins
★ able to compete with
desktop applications

34. Nice,
but when will it arrive?

38. 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?

39. How does this affect me
today?

40. 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

41. Get
acquainted:
books & demos