HTML5 and friends

  • 7,449 views
Uploaded on

Presentation I gave at Blast Radius' Biertje o'clock

Presentation I gave at Blast Radius' Biertje o'clock

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
7,449
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
55
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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...
  • 7. WHATWG ★ mozilla + opera + apple ★ evolve web browsers ★ foundation of html5
  • 8. w3c in 2009 Xhtml is dead, long live html5!
  • 9. the new pragmatism ★ browser makers decide ★ backwards compatibility ★ paving the cowpaths ★ evolve together
  • 10. THE PROCESS WORKS!
  • 11. The standards-based web is evolving faster than ever
  • 12. HTML5 - the spec ★ used to be huge ★ lots taken out ★ still a work in progress ★ getting in good shape
  • 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. 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. Heavy hitters ★ audio and video ★ bitmap canvas ★ offline browsing
  • 16. HTML5 - the Buzzword includes many related technologies
  • 17. The future web stack ★ html5 ★ css3 ★ svg ★ new dom apis ★ ecmascript 5 ★ vendor specific additions
  • 18. CSS3 ★ 50 modules ★ prioritized ★ mostly a work in progress
  • 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. Pure gold CSs animations, transitions, 2d & 3d transforms to enable Flash-like animations
  • 21. SVG ★ a relatively old spec ★ vector graphics ★ embeddable in html5 & css3
  • 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. NEW DOM API’s ★ workers - multi-threaded javascript ★ sockets - 2-way communication ★ web notifications + server-sent events - incl. push notifications
  • 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. NEW DOM API’s ★ FILE api ★ contacts api ★ media capture ★ mime type & protocol handler registration
  • 26. ECMAScript 5 ★ defines javascript 1.9 ★ new developer goodies - e.g. native JSON ★ security & consolidation
  • 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. Conclusions
  • 29. web Development 2.0 The web technologies of tomorrow are being defined today
  • 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. Nice, but when will it arrive?
  • 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. How does this affect me today?
  • 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. Get acquainted: books & demos