Rockstar Graphics   with HTML5      Dave Balmer     @Balmer
Actually, it’s not HTML5
“HTML5” is just abuzzword for 7 years worth of neat stuff.*
These are a fewof my favorites.
Canvas
CanvasCSS3
Canvas CSS3Trickery
Canvas
Canvas is like an image tag      you can edit.
Draw shapes,move imagesaround, fiddle with pixels...
Draw shapes,                    The browsermove images                  thinks this is justaround, fiddle                 ...
Drawing is path based;  think “PhotoShop”.
It’s easy to transform  images and paths.
Use a pathas a mask.
Draw text,*even along a path.**
Fiddle with pixelsand draw images.
But...
Canvas lives in the DOMbut doesn’t have a DOM.
“Draw it and forget it.”
Large image filtering      is slow.
Animations are drawn   with JavaScript, which can be slow.
Frame 1Frame 2Frame 3
Frame 1Frame 2Frame 3
Frame 1Frame 2Frame 3
Frame 1Frame 2Frame 3
Frame 1          Every frame is           a completeFrame 2           redraw with            your code.Frame 3
Demo
CSS3
Great for layout.
Animations use hardware acceleration*, and don’tinterrupt your JavaScript.
Cheap 3D effects.*
But...
Limited to box-like things.
Scaled elements can  look a bit rough.
3D perspectiveis not broadly supported.
Demo 2
Trickery
Layer elements.
Move animations to CSS3    where possible.
Avoid excessive DOM   manipulations.
Respect the garbage     collector.
Keep JavaScript loops  tight and efficient.
Demo 3
Support
Desktop Chrome, Safari, FireFox,      Opera, IE**IE9 has support, earlier versions need some help            from moderniz...
Mobile iOS, Android, webOS,BlackBerry, Opera, Bada
Wrap Up
Explore.
Experiment.
#WIN
Q&A@Balmer
Rockstar Graphics with HTML5 @Media UK
Rockstar Graphics with HTML5 @Media UK
Rockstar Graphics with HTML5 @Media UK
Rockstar Graphics with HTML5 @Media UK
Rockstar Graphics with HTML5 @Media UK
Upcoming SlideShare
Loading in …5
×

Rockstar Graphics with HTML5 @Media UK

3,003
-1

Published on

A "part deaux" presentation for @Media which covers: Canvas, CSS3 and "Trickery".

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,003
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
34
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
  • Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
  • Really, the canvas tag is almost 7 years old, and CSS3 isn’t even an official part of the HTML5 spec. It’s that buzzword thing. Trickery is all about working within the limitations of the browser. Trickery isn’t part of any draft either, so this entire presentation is technically mislabeled.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Draw to a canvas with JavaScript, the browser only knows it’s a box filled with pixels.\n
  • You can get at individual pixels in a canvas, and do PhotoShop-like filters on them. Catch is, it’s all in JavaScript, which when you consider iterating through each pixel, adds up fast.\n
  • \n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • Obviously, not drawn at the same speed as your browser will go. But this gives you an idea what your JavaScript interpreter will feel like when you crank the redraws up to respectable animation speeds.\n
  • \n
  • \n
  • Actually “very good” for layout, and getting better.\n
  • Good browsers use the GPU on your computer or device for CSS3 transitions, and even IE is headed in this direction.\n
  • Cheap as in, effort spent to learn, vs. something like webGL.\n
  • \n
  • Like boxes. And images. In boxes.\n
  • Pixels only stretch so far, even with anti-aliasing.\n
  • \n
  • \n
  • Basically, mixing techniques and working to the strengths of each while reducing overhead.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • modernizr is just a starting point, which requires several other libs to do its work. But as starting points go, it’s a good one.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Rockstar Graphics with HTML5 @Media UK

    1. 1. Rockstar Graphics with HTML5 Dave Balmer @Balmer
    2. 2. Actually, it’s not HTML5
    3. 3. “HTML5” is just abuzzword for 7 years worth of neat stuff.*
    4. 4. These are a fewof my favorites.
    5. 5. Canvas
    6. 6. CanvasCSS3
    7. 7. Canvas CSS3Trickery
    8. 8. Canvas
    9. 9. Canvas is like an image tag you can edit.
    10. 10. Draw shapes,move imagesaround, fiddle with pixels...
    11. 11. Draw shapes, The browsermove images thinks this is justaround, fiddle another tag. with pixels...
    12. 12. Drawing is path based; think “PhotoShop”.
    13. 13. It’s easy to transform images and paths.
    14. 14. Use a pathas a mask.
    15. 15. Draw text,*even along a path.**
    16. 16. Fiddle with pixelsand draw images.
    17. 17. But...
    18. 18. Canvas lives in the DOMbut doesn’t have a DOM.
    19. 19. “Draw it and forget it.”
    20. 20. Large image filtering is slow.
    21. 21. Animations are drawn with JavaScript, which can be slow.
    22. 22. Frame 1Frame 2Frame 3
    23. 23. Frame 1Frame 2Frame 3
    24. 24. Frame 1Frame 2Frame 3
    25. 25. Frame 1Frame 2Frame 3
    26. 26. Frame 1 Every frame is a completeFrame 2 redraw with your code.Frame 3
    27. 27. Demo
    28. 28. CSS3
    29. 29. Great for layout.
    30. 30. Animations use hardware acceleration*, and don’tinterrupt your JavaScript.
    31. 31. Cheap 3D effects.*
    32. 32. But...
    33. 33. Limited to box-like things.
    34. 34. Scaled elements can look a bit rough.
    35. 35. 3D perspectiveis not broadly supported.
    36. 36. Demo 2
    37. 37. Trickery
    38. 38. Layer elements.
    39. 39. Move animations to CSS3 where possible.
    40. 40. Avoid excessive DOM manipulations.
    41. 41. Respect the garbage collector.
    42. 42. Keep JavaScript loops tight and efficient.
    43. 43. Demo 3
    44. 44. Support
    45. 45. Desktop Chrome, Safari, FireFox, Opera, IE**IE9 has support, earlier versions need some help from modernizr.com
    46. 46. Mobile iOS, Android, webOS,BlackBerry, Opera, Bada
    47. 47. Wrap Up
    48. 48. Explore.
    49. 49. Experiment.
    50. 50. #WIN
    51. 51. Q&A@Balmer

    ×