HTML5 and friends

8,146
-1

Published on

Presentation I gave at Blast Radius' Biertje o'clock

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,146
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
56
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

HTML5 and friends

  1. 1. HTML5 and friends Bobby van der Sluis August 20, 2010
  2. 2. Take AWAYs ★ what is HTML5? ★ Why is it hip? ★ What will it change?
  3. 3. THE ROAD TO HTML5
  4. 4. W3C for over a decade tried to create an XML-based web
  5. 5. BUT FAILED MISERABL Y ★ Internet explorer: 95% ★ 1 syntax error breaks a page ★ overly complex ★ new stuff not backwards compatible
  6. 6. In the meantime...
  7. 7. WHATWG ★ mozilla + opera + apple ★ evolve web browsers ★ foundation of html5
  8. 8. w3c in 2009 Xhtml is dead, long live html5!
  9. 9. the new pragmatism ★ browser makers decide ★ backwards compatibility ★ paving the cowpaths ★ evolve together
  10. 10. THE PROCESS WORKS!
  11. 11. The standards-based web is evolving faster than ever
  12. 12. HTML5 - the spec ★ used to be huge ★ lots taken out ★ still a work in progress ★ getting in good shape
  13. 13. What’s in it? ★ lots of developer goodies ★ adds semantics - e.g. header, footer, nav, article, aside ★ everything is clickable, draggable or editable
  14. 14. 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.
  15. 15. Heavy hitters ★ audio and video ★ bitmap canvas ★ offline browsing
  16. 16. HTML5 - the Buzzword includes many related technologies
  17. 17. The future web stack ★ html5 ★ css3 ★ svg ★ new dom apis ★ ecmascript 5 ★ vendor specific additions
  18. 18. CSS3 ★ 50 modules ★ prioritized ★ mostly a work in progress
  19. 19. 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
  20. 20. Pure gold CSs animations, transitions, 2d & 3d transforms to enable Flash-like animations
  21. 21. SVG ★ a relatively old spec ★ vector graphics ★ embeddable in html5 & css3
  22. 22. 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
  23. 23. NEW DOM API’s ★ workers - multi-threaded javascript ★ sockets - 2-way communication ★ web notifications + server-sent events - incl. push notifications
  24. 24. 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
  25. 25. NEW DOM API’s ★ FILE api ★ contacts api ★ media capture ★ mime type & protocol handler registration
  26. 26. ECMAScript 5 ★ defines javascript 1.9 ★ new developer goodies - e.g. native JSON ★ security & consolidation
  27. 27. OTHER developments ★ webgl - hardware accelerated 3d graphics (3d context for canvas) ★ touch & gestures ★ fullscreen ★ next-gen javascript engines ★ built-in developer tools ★ hardware acceleration
  28. 28. Conclusions
  29. 29. web Development 2.0 The web technologies of tomorrow are being defined today
  30. 30. The rise of a powerful open web platform ★ better performing user interfaces ★ decreased need for plug-ins ★ able to compete with desktop applications
  31. 31. Nice, but when will it arrive?
  32. 32. 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?
  33. 33. How does this affect me today?
  34. 34. 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
  35. 35. Get acquainted: books & demos

×