1.
CANVAS vs SVG FRONT IN RIO 2011 DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM

2.
PIXEL VSVETOR

3.
DOCUMENTO VS SCRIPT

4.
DESIGN VSDEVELOPMENT

5.
CANVAS• Criado para widgets do Dashboard OS X e Safari• Desenhos bitmap 2D, 3D• HTML5• API JAVASCRIPT• ESPECIFICAÇÃO W3C

6.
CANVAS• Drawing tools (retângulos, arcos, linhas)• Efeitos (fill, bordas, gradientes, transparência)• Transformações (rotação, translação, matrizes )• Carregar dados a partir de um data URI

7.
SVG• Sun Microsystems, Adobe, Apple, IBM, e Kodak são uma das que estão envolvidas com o padrão.• Independente de resolução (vetor)• Controle dos elementos via DOM• Imagens representadas em XML• Processamentolento a medida que aumenta a complexidade da DOM

8.
CANVAS VS SVG

9.
SUPORTE

10.
PARA NÃO VARIAR...

11.
EXPLORERCANVAS VS SVGWEB

12.
EXCANVAS<!--[if lt IE9]><script src="excanvas.js"></script><![endif]-->var el = document.createElement(canvas);G_vmlCanvasManager.initElement(el);var ctx = el.getContext(2d);

13.
SVGWEB<!--[if lt IE9]><meta name="svg.render.forceflash"content="true"><![endif]--><script src="svg.js"></script>

14.
CANVAS LIBRARIES•draw2D javascript drawinglibrary•cufon•flot

15.
SVG LIBRARIES•RaphaelJS•Processing.js

16.
HANDS ONcódigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio

17.
LINKS• http://berjon.com/blog/2010/09/bouncy.xhtml• http://raphaeljs.com/australia.html• http://raphaeljs.com/analytics.html• http://futpedia.globo.com/confronto/vasco-x-flamengo• http://raphaeljs.com/image-rotation.html• http://dev.w3.org/html5/spec/Overview.html• http://dev.w3.org/html5/canvas-api/canvas-2d-api.html

18.
MAIS LINKS• http://camanjs.com/examples/presets• http://www.ro.me/tech/• http://excanvas.sourceforge.net/• http://code.google.com/p/svgweb/• http://inkscape.org/• http://www.w3.org/Graphics/SVG/• http://fellipe.com/blog/

19.
OBRIGADO FRONT IN RIO DAVIDSON FELLIPE FELLIPE.COM @EUPROGRAMO | @DAVIDSONFELLIPE DEVELOPER FRONTEND AT GLOBO.COM