Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 and friends

9,193 views

Published on

Presentation I gave at Blast Radius' Biertje o'clock

Published in: Technology

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

×