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 DESIGN
                PROTOTYPING
                  with HTML5 and WebKit



Pete Nicholls                         ...
HTML5 & WEBKIT
          AWESOMENESS
            withn some Rapid Design Prototyping




Pete Nicholls                    ...
HTML5
IT’S EASY


An easier DOCTYPE (<!DOCTYPE html>)

Write in XHTML or HTML style (<br> or <br />)

Switch today!

A few new e...
THE NEW KIDS

video        audio
                     footer
                              email
   section       article
...
NEW SEMANTICS


It’s not an HTML “document” any more

Header, section, aside, h1-h6, nav and footer are all relative
to th...
NEW APIS

Canvas (2D drawing)

Offline storage database

Document editing

WebSocket (TCP sockets)

Drag-n-drop
Video
Hey! What’d I




    ...
HADOUKEN!
H.264               Theora




        HADOUKEN!
H.264               Theora




        HADOUKEN!
H.264               Theora




        HADOUKEN!
H.264               Theora




        HADOUKEN!
H.264   Theora
H.264   Theora




                 Hey
Theora first!
Don’t give up without a fight.
Demo
http://jilion.com/sublime/video
Audio
Demo
http://www.ironicsans.com/volumething/
WebKit
?
?


  Yo, Gecko, I’m really happy for you and
I’mma let you finish, but WebKit has one of
WebKit CSS Extensions
Demo
http://github.com/Aupajo/webkit-fu
CSS Animations
Demos
 http://webkit.org/blog/138/css-animation/
http://webkit.org/blog-files/leaves/index.html
    http://webkit.org/blog-...
3D Transforms
Demos
              http://esquevin.com/starwars.html
http://webkit.org/blog-files/3d-transforms/morphing-cubes.html
Animations? 3D?

Isn’t that a bit too far?
Isn’t this stuff years away?
WebGL
Demo
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/
                      google/shiny-teapot/in...
One more thing...


        Pathetic.
Rapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKit
Rapid Web Design Prototyping with HTML5 and WebKit
Upcoming SlideShare
Loading in …5
×

Rapid Web Design Prototyping with HTML5 and WebKit

7,107 views

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:
    http://www.previewlabs.com/ready-for-html5-prototyping/
       Reply 
    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 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.

×