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.

Rapid Web Design Prototyping with HTML5 and WebKit


Published on

Published in: Technology
  • Nice overview of the features in HTML5 and other technologies that can be used for interactive web applications. Unfortunately, CSS seems to have become even more complex. The good news is that a lot can be done with only the canvas element and JavaScript. I wrote an article about HTML5 game development and a small demo to make this point:
    Are you sure you want to  Yes  No
    Your message goes here

Rapid Web Design Prototyping with HTML5 and WebKit

  1. 1. RAPID DESIGN PROTOTYPING with HTML5 and WebKit Pete Nicholls @Aupajo
  2. 2. HTML5 & WEBKIT AWESOMENESS withn some Rapid Design Prototyping Pete Nicholls @Aupajo
  3. 3. HTML5
  4. 4. IT’S EASY An easier DOCTYPE (<!DOCTYPE html>) Write in XHTML or HTML style (<br> or <br />) Switch today! A few new elements...
  5. 5. THE NEW KIDS video audio footer email section article figure range tel search progress menu nav hgroup time canvas header and more...
  6. 6. NEW SEMANTICS It’s not an HTML “document” any more Header, section, aside, h1-h6, nav and footer are all relative to the closest article or body A chance to avoid Div-itis
  7. 7. NEW APIS Canvas (2D drawing) Offline storage database Document editing WebSocket (TCP sockets) Drag-n-drop
  8. 8. Video
  9. 9. Hey! What’d I ...
  10. 10. HADOUKEN!
  11. 11. H.264 Theora HADOUKEN!
  12. 12. H.264 Theora HADOUKEN!
  13. 13. H.264 Theora HADOUKEN!
  14. 14. H.264 Theora HADOUKEN!
  15. 15. H.264 Theora
  16. 16. H.264 Theora Hey
  17. 17. Theora first! Don’t give up without a fight.
  18. 18. Demo
  19. 19. Audio
  20. 20. Demo
  21. 21. WebKit
  22. 22. ?
  23. 23. ? Yo, Gecko, I’m really happy for you and I’mma let you finish, but WebKit has one of
  24. 24. WebKit CSS Extensions
  25. 25. Demo
  26. 26. CSS Animations
  27. 27. Demos
  28. 28. 3D Transforms
  29. 29. Demos
  30. 30. Animations? 3D? Isn’t that a bit too far?
  31. 31. Isn’t this stuff years away?
  32. 32. WebGL
  33. 33. Demo google/shiny-teapot/index.html
  34. 34. One more thing... Pathetic.