A fronteira final » SVG

SVG vs CANVAS

lcameroon — Thu, 08 Apr 2010 12:42:03 +0000

Como você deve ter notado em meu post anterior sobre HTML5 (http://afronteirafinal.com/prepare-se-para-o-html-5), eu abordei sobre SVG e Canvas e nas últimas semanas os debates estão se aquecendo sobre os méritos de cada um, e muitos estão prevendo um “death match”. No entanto, minha pesquisa me convence de que cada um tem suas próprias finalidades, mas definitivamente chegou a hora de usá-los.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece.

Demo SVG:

O QUE É CANVAS?

A especificação do HTML 5 define da seguinte forma: “Elemento de tela que representa um processamento gráficos “bitmap” para gerar imagens, gráficos, jogos através de JavaScript”.

Vladimir Vukićević da Mozilla, em 2006, deu uma boa explicação sobre as diferenças entre o SVG e Canvas:

- SVG é baseado em XML. Isto significa que, cada elemento está disponível no DOM SVG (útil quando você deseja anexar os manipuladores de eventos javascript para um elemento). Canvas não é baseado em XML.

- Canvas é processado pixel por pixel. SVG é um monte de vetores e precisa ser manipulado como um grupo de formas. Uma analogia no mundo Photoshop seria, criar um retângulo usando a “ferramenta forma” contra usar o “PaintBrush”.

Demo Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

QUEM VAI GANHAR?

Mesmo que sejam completamente diferentes na sua natureza e finalidade, há várias coisas que pode ser feito usando “Canvas” e “SVG”. A recente popularização do elemento “Canvas” parecem para algumas pessoas a morte do SVG. Mas pelo que notei está longe da verdade.

O “Canvas” é tão bom como uma imagem – mas ele não manipula pixel por pixel. Neste momento, elemento Canvas não suporta os “manipuladores” de eventos (por exemplo, ter um retângulo 20x60px dentro de um canvas que seja clicável). Já com o SVG isso é possível.

Canvas em seu estado “natural” não é acessível. O SVG, porém, é bastante acessível.

No entanto existe diferenças significativas de desempenho entre Canvas e SVG. O resultado do experimento descrito no link (http://www.borismus.com/canvas-vs-svg-performance) é que: Canvas é mais adequado para um “gráficos intensivos” onde o objeto são os redesenhos com freqüência (como um jogo), enquanto o SVG é melhor para aplicações que envolvem grandes áreas de processamento (como Google Maps).

POSSO USÁ-LOS AGORA?

Sim, pode. Existem muitas iniciativas para permitir que os navegadores que não suportam SVG ou Canvas tornarem-se “usáveis” por outros meios. O Google tem um impressionante projeto SVG Web (http://code.google.com/p/svgweb/) que usa o Flash para renderizar SVG em navegadores que não suportam SVG nativamente. Para Canvas, o Google tem uma biblioteca “explorecanvas” (http://code.google.com/p/explorercanvas/) que utiliza VML (ou Silverlight) para processar os elementos Canvas (basta incluir o arquivo excanvas.js, e ele deve funcionar) no Internet Explorer.

ENTÃO… QUEM GANHA?

Ambos. Estas é uma fase fantástica para SVG e Canvas. Finalmente temos uma alternativa natural para o “Flash” e animação de necessidade básica. Mantenha seus olhos abertos no “mailing list” do “W3C HTML Working Group” (http://lists.w3.org/Archives/Public/public-html/) para as últimas notícias.

Prepare-se para o HTML 5

lcameroon — Thu, 19 Nov 2009 18:45:12 +0000

Com apoio no Chrome, Firefox 3.5, Opera e Safari, o HTML 5 está chegando em você como um trem desgovernado. Aqui estão algumas sugestões para ajudar você a se preparar para subir a bordo ao invés de ser deixada na plataforma ou atropelado.

Veja o que outros têm feito

A primeira coisa que você pode fazer para se preparar para o HTML 5 é ver como as outras pessoas estão usando. Uma visita à galeria de HTML 5 (http://html5gallery.com/) vai mostrar como vários sites já estão usando os novos elementos de HTML 5. Use-o como fonte de inspiração!

Agora, mão à obra

Você pode olhar para os sites (http://html5doctor.com/), ler todos os artigos disponíveis na internet e até mesmo ler as especificações (http://www.whatwg.org/specs/web-apps/current-work/), mas nenhum deles vão te ajudar a entender o HTML 5, tanto quanto utilizando os novos elementos. Você pode modificar parte de um site existente ou fazer uma experiência criando novas páginas. Faça isso com seu site pessoal, de amigos ou até em sua empresa.

Ao fazer isso, você vai descobrir o que funciona e o que não funciona. Por exemplo, eu descobri que o Firefox 3.5 trata elementos como o article e a section como display:inline e eu tinha que definir explicitamente-los para display:block para fazê-los funcionar como esperado.

O (X) em análise

Se você é como a maioria dos designers, você provavelmente não escreve todas as marcações (tags) na mão. Mas até os bons editores tentam acompanhar os novos elementos de (X)HTML 5, e mesmo assim você acaba fazendo algumas marcações na mão e desta forma você acaba aprendendo um pouco. Existe um pouco de confusão (e polêmica!) sobre a relação entre HTML 5, XHTML 1.0/1.1 e XHTML 5. Vamos deixar tudo bem claro agora.

HTML 4.0 (a linguagem de marcação que todos nós conhecemos e amamos) é baseada em um “livro de regras” (rulebook) chamado SGML. No livro de regras da SGML, os nomes dos elementos não são “case sensitive”, você pode ter elementos com tags de fechamento opcional (como

) e você pode ter valores de atributo sem aspas.

XHTML 1.0 e 1.1 são baseados em um “livro de regras” chamado XML. No livro de regras XML, elemento e atributo nomes são “case sensitive”, cada tag de abertura deve ter uma tag de fechamento e os valores dos atributos devem estar entre aspas.

HTML 5 define uma linguagem de marcação que não seja baseado em qualquer livro de regras, mas podem ser escritas de “forma HTML” (ou renderizada, conforme a especificação chamada) ou de ” forma XHTML”.

Quando você escreve de “forma HTML”, você está autorizando deixar algumas tags abertas, valores de atributos sem aspas e elementos e nomes de atributos não são case sensitive. Você também terá de usar em algumas tags marcação XML, será obrigado a colocar barra em elementos como ou

Quando você usa a serialização XHTML, você tem que seguir as regras XML mencionado alguns parágrafos atrás.

Eu sugiro que você escreva a sua marcação em XHTML 5, ou, se você usar o HTML 5, fazer a marcação como se fosse XHTML. Vai ser melhor ficar com o padrão XML que requer um tag de fechamento para cada tag de abertura, em vez de gastar o seu tempo de para otimizar as tags que têm fechamento e/ou abertura opcional. Da mesma forma, colocar com aspas todos os valores de atributo ao invés de tentar decidir quando você pode deixar o valor de atributo sem aspas. Além de não ter que gastar neurônios sobre essas decisões, a marcação será mais consistente.

Se você utiliza alguma ferramenta de geração automática de marcação configure para gerar XHTML 5 em vez do HTML 5. O uso de XML é o futuro, seus espaços permitem que você tenha documentos “poliglota”, que consistem em várias marcações para além do HTML5 o RDF, MathML e o SVG. Você também pode usar ferramentas como XPath, XSLT e XQuery de marcação baseada em XML, utilizando qualquer analisador XML de sua escolha.

Claro, nem tudo é boa notícia. Se você trabalhar com XHTML 5, lembre-se que o servidor deve entregar os documentos com um tipo MIME de application/xhtml+xml ou text/xml. Isto pode envolver a negociação com o seu serviço de hospedagem. Além disso, quando você entregar um arquivo XML, qualquer erro de sintaxe irá causar uma mensagem de erro.

Se você estiver fazendo a marcação com a mão, acho que essas mensagens de erro manterá você fiel a validação. Se você estiver usando ferramentas que criam XHTML, não há problema, pois a maioria das ferramentas produzem códigos XML bem formados.

Expressões Regulares

HTML 5 estende o elemento input oferecendo novos atributos que permitem especificar os dados de entrada. Esses atributos incluem min e max (para definir um intervalo numérico), e também oferece novos valores para o atributo type como a url, email, date e time

Se nenhum desses novos tipos de entrada atendem às suas necessidades o HTML 5 fornece o atributo pattern para elementos input com type=”text”. O valor do atributo pattern é uma expressão regular, tal como definido no ECMAScript e utilizado em JavaScript. As expressões regulares são uma forma concisa e talvez um tanto enigmática de especificar um padrão de caracteres. Por exemplo, se eu quiser um jogo de cinco dígitos mais hífen e três caracteres para CEP, posso usar esse padrão:

([0-9]{5}-[0-9]{3})

Todo poder do novo formulário web já estão parcialmente implementado no Safari e Chrome, e completamente no Opera (veja este site http://a.deveria.com/caniuse/ para obter mais informações sobre a capacidade de cada browser). Não se preocupe se o seu browser ainda não suporta as extensões do form para o HTML 5, você pode fazer o download do Google Web Forms 2 (http://code.google.com/p/webforms2/)

Aqui está um exemplo de formulário que valida data e cep:

Digite uma data:

Digite um cep:

As expressões regulares são muito úteis e vale a pena investir um tempo para aprender. Muitos editores de texto já tem integrado pesquisa com expressão regular e substituição características, e quando você começar a usá-los, você nunca mais conseguirá ficar sem eles.

Arte estática com SVG

Se você quiser que as bordas nítidas, o HTML 5 permite que você use SVG (Scalable Vector Graphics) em seus documentos. Colocar inline SVG é parcialmente implementado em Firefox, Safari e Opera, de acordo com este site (http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers).

E aqui está o SVG gerado:

Embora seja possível usar o JavaScript para modificar dinamicamente um gráfico SVG, HTML 5 oferece uma melhor solução:

Canvas em ação

O elemento de canvas é uma das características mais marcantes do HTML 5, e é suportada pelo Firefox, Safari, Opera e Chrome mas não pelo Internet Explorer. O elemento de canvas é realmente uma característica promissora. Você usa JavaScript para desenhar o que você precisa sobre a tela em branco. (Obs: A qualidade gráfica me surpreendeu!)

Aqui está o mesmo desenho feito com SVG em Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

Veja Canvas tutorial da Mozilla (https://developer.mozilla.org/en/Canvas_tutorial) para uma introdução mais aprofundada.

O que você está esperando?

Apesar de alguns desenvolvedores terem receio sobre a direção em que o HTML 5 está levando a web (e eu compartilho com este receio), as características do HTML 5 são bem interessantes e vale a pena ser explorada. Assim, comece a olhar código fonte de outras pessoas, e fazer experiências em seu próprio site, e mergulhe nas novas características de validação de formulários e as de CANVAS.

Post baseado no artigo de J. David Eisenberg (catcode@catcode.com) também escritor do livro SVG – Scalable Vector Graphics e professor em San Jose, CA.