• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Rockstar Graphics with HTML5 @Media UK
 

Rockstar Graphics with HTML5 @Media UK

on

  • 3,013 views

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

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

Statistics

Views

Total Views
3,013
Views on SlideShare
2,040
Embed Views
973

Actions

Likes
2
Downloads
26
Comments
0

12 Embeds 973

http://www.webdirections.org 788
http://lanyrd.com 147
http://www.nextlittlething.co.uk 15
http://soup.sindre.at 9
http://5671482226516844238_e4ae09ce0f3e6a7e5bc7410f68c69e3fa13223bb.blogspot.com 4
url_unknown 3
https://twitter.com 2
http://10.5.2.29:15871 1
http://twitter.com 1
http://webcache.googleusercontent.com 1
http://us-w1.rockmelt.com 1
http://miclark 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Rockstar Graphics with HTML5 @Media UK Presentation Transcript

  • 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 another tag. with pixels...
  • 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 modernizr.com
  • Mobile iOS, Android, webOS,BlackBerry, Opera, Bada
  • Wrap Up
  • Explore.
  • Experiment.
  • #WIN
  • Q&A@Balmer