HTML5
   and 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
W3C


for over a decade tried to
create an XML-based web
BUT FAILED
    MISERABL Y
★   Internet explorer: 95%
★   1 syntax error breaks a page
★   overly complex
★   new stuff not...
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
...
What’s in it?

★       forms on steroids
    -    e.g. date picker, slider, spinner, color picker, email field,
         t...
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, scalabl...
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 geol...
NEW DOM API’s
  ★       workers
      -    multi-threaded javascript

  ★       sockets
      -    2-way communication

  ...
NEW DOM API’s

 ★       microdata
     -    alternative for rdfa and microformats

 ★       WAI-ARIA
     -    enabling ac...
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 & ...
OTHER
developments
★       webgl
    -    hardware accelerated 3d graphics (3d context for canvas)

★       touch & gestur...
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
 ★  ...
Nice,
but when will it arrive?
Browsers
★   Firefox, chrome, safari, opera
    have short browser update
    cycles
★   what will ship with internet
    ...
How does this affect me
        today?
FOR
          Developers
★       start using the html5 doctype
        and syntax today
    -    It is already supported c...
Get
 acquainted:
books & demos
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
HTML5 and friends
Upcoming SlideShare
Loading in...5
×

HTML5 and friends

7,823

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
7,823
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×