Rapid Web Design Prototyping with HTML5 and WebKit

6,894 views
6,795 views

Published on

Published in: Technology
1 Comment
8 Likes
Statistics
Notes
  • 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:
    http://www.previewlabs.com/ready-for-html5-prototyping/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,894
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
101
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide







































  • Rapid Web Design Prototyping with HTML5 and WebKit

    1. 1. RAPID DESIGN PROTOTYPING with HTML5 and WebKit Pete Nicholls @Aupajo http://github.com/Aupajo
    2. 2. HTML5 & WEBKIT AWESOMENESS withn some Rapid Design Prototyping Pete Nicholls @Aupajo http://github.com/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 http://jilion.com/sublime/video
    19. 19. Audio
    20. 20. Demo http://www.ironicsans.com/volumething/
    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 http://github.com/Aupajo/webkit-fu
    26. 26. CSS Animations
    27. 27. Demos http://webkit.org/blog/138/css-animation/ http://webkit.org/blog-files/leaves/index.html http://webkit.org/blog-files/pulse.html
    28. 28. 3D Transforms
    29. 29. Demos http://esquevin.com/starwars.html http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
    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 https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/ google/shiny-teapot/index.html
    34. 34. One more thing... Pathetic.

    ×