Na última semana vimos uma enxurrada de notícias e comentários (uns relevantes, outros sem total embasamento) sobre do anúncio da Adobe em por fim ao desenvolvimento do plugin Flash para dispositivos móveis (apenas dispositivos móveis, e não no geral). Realmente, acredito que a Adobe foi sensata na decisão e deva ter seus motivos para isso. Enfim, não vou falar mais acerca disso pois há muitos posts bons que tratam sobre o futuro da plataforma – recomendo este do ASDevs, que é imparcial realista sobre este assunto.

No entanto, quero me ater nesta postagem sobre o hype em torno do HTML5. De uma hora para outra começou a se anunciar que o futuro seria esse padrão aberto, e o Flash, de repente, virou uma coisa imprestável, um lixo, “lento”, “pesado”, uma tecnologia paga (é possível desenvolver usando Flex SDK sem precisar pagar pedágio para Adobe, mas enfim…), entre outras. O Flash virou um novo IE: algo que deveria ser combatido e eliminado, para dar lugar ao futuro maravilhoso e aberto proporcionado pelo HTML5…

Pois bem. É lamentável que muitas críticas, muitas vezes infundadas, tenham ganho espaço. Mas o que se é de lamentar mesmo é que muitos só tenham se prestado a criticar a tecnologia de maneira oportunista, apenas querendo se aproveitar do momento. Cursos, livros e eventos em torno do HTML5 começaram a surgir do nada tratando o padrão como salvação para tudo, em que se pode usar ele em sua plenitude substituindo o Flash (inclusive no IE 8, né?…). Para entender como essa visão é equivocada recomendo este post do blog Mochila Binária.

Não há dúvida de que o HTML5 veio para ficar, mas o que não se pode dizer é que ele está pronto em definitivo para substituir o Flash, como muitos dizem por aí. Só fico chateado de que muitos prefiram especular e acabem difundindo informações errôneas sobre o assunto, fazendo com que muitos que não são da área de Web acabem mal informados, como usuários comuns e pessoas que desejam ter um site – aliás, o que já vem ocorrendo.

A maioria funciona de modos parecidos: basta você adicionar uma área de texto em HTML (<textarea></textarea>), ligar o arquivo JavaScript da biblioteca – podendo definir algumas características – e pronto.

Via Google são fáceis de encontrar, mas aqui vou aproveitar para falar a respeito de dois deles com quem já lidei: o TinyMCE e o NicEdit.

TinyMCE – provavelmente o mais popular, utilizado inclusive pelo WordPress, Joomla, entre outros. Talvez seja o que conheça melhor, não por ter usado em algum trabalho, mas por curiosidade (fucei sua documentação e experimentei criar plugin, entre outros). Gostei muito: bem completo, integrado com jQuery (permite usar código desta biblioteca sem grande conflito), fácil de usar, boa documentação, entre outros.

CKEditor – nunca usei, mas parece ser tão bom quanto o TinyMCE. A barra de ferramentas é bem completa, a interface é linda, além de já vir com versão em português. Só tenho dúvidas com relação à documentação: procurei e não encontrei. Além de tudo, ao que parece, vários recursos são pagos (?). Enfim, vale ficar de olho.

NicEdit – já usei este, na seção de comentários deste blog, até um tempo atrás. Retirei ele por “comer” as quebras de linha (as tags <br /> – o texto do comentarista ficava todo colado). Acho-o muito limitado, mas talvez seja o mais simples de se integrar. Para quem não quer lidar com muito código, talvez seja a melhor solução.

Enfim, acredito que podemos resumir assim: caso queira um editor completo e precise personalizá-lo, o TinyMCE é para você. Se você quer um editor bonitão, vá de CKEditor. Agora, se você não entende muito de Javascript nem de HTML, experimente o NicEdit.

E este é o fim da postagem. E caso queira sair, aperte o botão de “Fechar” do seu navegador!

Linkando a biblioteca a um arquivo ela substituirá a parte em SVG (que é suportada pelos outros navegadores populares, como Firefox, Chrome e Opera) por um arquivo em Flash, que irá exibir praticamente a mesma coisa. Em outras palavras: se a biblioteca reconhecer que o navegador suporta SVG, ela não fará nada, apenas deixa o SVG ser exibido normalmente; se ele perceber que é o IE 8 e anteriores (que não suportam SVG) que o usuário está usando ele irá substituir por um arquivo em Flash que exibirá o arquivo SVG, com todos as suas configurações, como animação e interatividade.

Testei alguns exemplos e achei bem interessante. Ainda não testei na minha máquina, e sim apenas os exemplos fornecidos no site do projeto, e cumpriu bem a tarefa.

Trata-se de uma solução interessante. O iPad, por exemplo, suporta SVG, mas não animações em Flash; já o IE é o contrário. Usando essa biblioteca podemos programar apenas uma vez (SVG com JavaScript) e rodar em qualquer navegador.

Fica a dica.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG - o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
 $(function() {
 // Ao ser carregado, chamará a função draw...
 $('#svgbasics').svg({onLoad: draw});
 });

 function draw (svg) {
 // Desenhando um círculo...
 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});

 // Criando um grupo com duas linhas...
 var g = svg.group({stroke: 'black', 'stroke-width': 2});
 svg.line(g, 15, 75, 135, 75);
 svg.line(g, 75, 15, 75, 135);

 // Desenhando um retângulo que, quando clicado, chama o método alert
 svg.rect(g, 150, 100, 200, 100, 10, 10,
 {fill: 'yellow', stroke: 'navy', strokeWidth: 5, onclick:"alert('Você clicou!')"});
 }

</script>
</head>
<body>
 <h1>jQuery SVG - O Básico</h1>
 <p>Página de exemplo</p>
 <div id="svgbasics"></div>
</body>
</html>

Para usar esta biblioteca, é necessário que você baixe o arquivo Javascript no site oficial do projeto. Há um plugin para esta biblioteca destinado à geração de gráficos. A documentação é bem direta e completa, o que facilita muito o aprendizado, contendo a explicação dos seus métodos.

Veja o exemplo a seguir. Repare que o arquivo Javascript de Raphaël está no mesmo local do arquivo HTML e que não usamos nada de HTML e CSS na geração dos gráficos – apesar do SVG permitir formatação via folha de estilos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Raphaël - Modo de usar</title>
    <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
			// Cria um painel do tamanho 800x600, na posição x=50 e y=50
			var paper = Raphael(50, 50, 800, 600);

			// Círculo na posição x=50, y=40 e com 10 de raio
			var circle = paper.circle(50, 40, 10);
			// Define o preenchimento do círculo em vermelho
			circle.attr("fill", "#f00");

			// Define a linha de contorno como branca
			circle.attr("stroke", "#fff");

			// -------------------------

			// Criação de um retângulo
			var rectangle = paper.rect(100,50,100,100,0);

			// Definindo vários atributos de uma só vez
			rectangle.attr({
				"fill": "#00f",
				"stroke": "#0f0"
			});

			// Rotacioando o objeto
			rectangle.rotate(45);

	};
    </script>
</head>
<body>

</body>
</html>

Este código irá gerar um painel SVG (paper), criará um círculo vermelho (circle) e um retângulo azul rotacionado em 45 graus (rectangle).

Resultado do exemplo.

Espero ter ajudado. Até a próxima!