Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Rapid Web Design Prototyping with HTML5 and WebKit

7 105 vues

Publié le

Publié dans : Technologie
  • 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/
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

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.

×