Canvas vs SVG

Transcript

1. DAVIDSON FELLIPE SOFTWARE DEVELOPER AT GLOBO.COM CANVAS vs SVG FRONT IN RIO 2011
2. PIXEL VS VETOR
3. DOCUMENTO VS SCRIPT
4. DESIGN VS DEVELOPMENT
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 •Processamento lento a medida que aumenta a complexidade da DOM
8. CANVAS VS SVG
9. SUPORTE
10. PARA NÃO VARIAR...
11. EXPLORERCANVAS VS SVGWEB
12. <!--[if lt IE9]> <script src="excanvas.js"></script> <![endif]--> EXCANVAS var el = document.createElement('canvas'); G_vmlCanvasManager.initElement(el); var ctx = el.getContext('2d');
13. <!--[if lt IE9]> <meta name="svg.render.forceflash" content="true"> <![endif]--> <script src="svg.js"></script> SVGWEB
14. CANVAS LIBRARIES •draw2D javascript drawing library •cufon •flot
15. SVG LIBRARIES •RaphaelJS •Processing.js
16. HANDS ON códigos no https://github.com/davidsonfellipe/talks/tree/master/2011_frontinrio
18. 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
19. 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/
20. FRONT IN RIO OBRIGADO DAVIDSON FELLIPE FELLIPE.COM @EUPROGRAMO | @DAVIDSONFELLIPE DEVELOPER FRONTEND AT GLOBO.COM