Your SlideShare is downloading. ×

CANVAS vs SVG @ FrontInRio 2011

2,536

Published on

Conheça as principais diferenças entre os dois formatos e tenha uma visão do que se pode fazer com ambas tecnologias.

Conheça as principais diferenças entre os dois formatos e tenha uma visão do que se pode fazer com ambas tecnologias.

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

No Downloads
Views
Total Views
2,536
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
33
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×