Francisco Prado » javascript http://franciscoprado.com.br Mais um blog sobre Web, desenvolvimento e assuntos em geral... Sun, 29 Jan 2012 18:39:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Editores de texto em JavaScript/HTML para uso no seu site http://franciscoprado.com.br/2010/07/16/editor-texto-javascript-html-wysiwyg/ http://franciscoprado.com.br/2010/07/16/editor-texto-javascript-html-wysiwyg/#comments Fri, 16 Jul 2010 23:15:16 +0000 Francisco http://franciscoprado.com.br/?p=1542 Editor de Texto em JavaScriptNesta postagem rápida falarei de editores de texto feitos em JavaScript de código aberto, para uso em sites, blogs, entre outros.

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! :-D

]]> http://franciscoprado.com.br/2010/07/16/editor-texto-javascript-html-wysiwyg/feed/ 12 Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript http://franciscoprado.com.br/2010/06/03/graficos-svg-no-internet-explorer-usando-uma-biblioteca-javascript/ http://franciscoprado.com.br/2010/06/03/graficos-svg-no-internet-explorer-usando-uma-biblioteca-javascript/#comments Thu, 03 Jun 2010 14:49:53 +0000 Francisco http://franciscoprado.com.br/?p=1413 É conhecida a limitação do Internet Explorer no que diz respeito a padrões Web. Uma das mais conhecidas é sobre o suporte à exibição de gráficos vetoriais SVG. No entanto, existe uma biblioteca Javascript chamada svgweb que procura cobrir essa limitação.

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. ;-)

]]> http://franciscoprado.com.br/2010/06/03/graficos-svg-no-internet-explorer-usando-uma-biblioteca-javascript/feed/ 1 Usando jQuery para manipular arquivos SVG http://franciscoprado.com.br/2010/05/28/usando-jquery-para-manipular-arquivos-svg-javascript-tutorial/ http://franciscoprado.com.br/2010/05/28/usando-jquery-para-manipular-arquivos-svg-javascript-tutorial/#comments Fri, 28 May 2010 14:31:18 +0000 Francisco http://franciscoprado.com.br/?p=1345 Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

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>
]]> http://franciscoprado.com.br/2010/05/28/usando-jquery-para-manipular-arquivos-svg-javascript-tutorial/feed/ 1 Usando Raphaël para geração de SVG através de Javascript http://franciscoprado.com.br/2010/05/02/usando-raphael-para-geracao-de-svg-atraves-de-javascript-tutorial/ http://franciscoprado.com.br/2010/05/02/usando-raphael-para-geracao-de-svg-atraves-de-javascript-tutorial/#comments Sun, 02 May 2010 15:58:30 +0000 Francisco http://franciscoprado.com.br/?p=1282 Neste post irei abordar como usar a biblioteca Raphaël para a geração de gráficos vetoriais em SVG, usando apenas Javascript. Vale lembrar que, apesar de ser uma maneira aberta de se gerar gráficos em vetor, o uso de SVG não está disponível para navegadores como Internet Explorer 8 e versões anteriores, além de “renderizar” de maneiras um pouco distintas em navegadores como Chrome, Firefox e Opera.

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).

Raphaël - resultado do exemplo

Resultado do exemplo.

Espero ter ajudado. Até a próxima! ;-)

]]> http://franciscoprado.com.br/2010/05/02/usando-raphael-para-geracao-de-svg-atraves-de-javascript-tutorial/feed/ 3 Padrões Web – os resultados não combinam entre os navegadores http://franciscoprado.com.br/2010/04/24/padroes-web-navegadores-ie-svg-html5-javascript-flash-plugin-webstandards-browser-chrome-firefox/ http://franciscoprado.com.br/2010/04/24/padroes-web-navegadores-ie-svg-html5-javascript-flash-plugin-webstandards-browser-chrome-firefox/#comments Sat, 24 Apr 2010 17:42:32 +0000 Francisco http://franciscoprado.com.br/?p=1253 Deve-se reconhecer que os plugins são necessários (em muitos casos) quando se está criando para a Web. Já existem padrões Web (pela W3C) que oferecem recursos destinados à criação de gráficos e animações; porém seus usos esbarram na deficiência de muitos navegadores em suportar os mesmos. Abaixo, seguem exemplos de algumas questões.

SVG

Vejamos por exemplo, o uso de SVG - sigla para Scalable Vectorial Graphics, uma linguagem XML usada para descrever gráficos em vetor, que pretende dispensar o uso de plugins para realização de gráficos e até animações em alta qualidade, usando JavaScript e CSS (se preferir).

Nos navegadores – versões do Internet Explorer (todas anteriores a 8, ou seja, os usados) não “renderizam” nativamente – para isso, é necessário um plugin como o Adobe SVG Viewer. O próximo IE 9 irá suportar. Chrome, Firefox e Opera são capazes de exibir, só que em partes.

O Chrome, graças ao seu potente motor de Javascript (o V8), executa animações bem. Acredito que deverá rodar bem no Safari e iPad, pois, como estes navegadores são baseados na template engine WebKit, então sem problemas. Porém, o mesmo não se pode dizer do Firefox, muito mais popular que o Chrome: ele não suporta todos os recursos pretendidos pelo padrão. Você pode ver isto testando este exemplo, que usa o elemento animation do SVG. Roda em Chrome, mas no Firefox, não.

Aí você vai dizer: basta usar o Javascript para animar em ambos os navegadores. Pois é, mas até na exibição (visual) os navegadores não batem: o Chrome exibe a imagem com fundo branco; o Firefox não. É uma pequena diferença? Sim, mas é uma diferença que faz toda a diferença.

Elemento <canvas>

O elemento canvas, novidade do HTML 5, pretende oferecer o recurso de exibição, edição e até animação de gráficos em duas dimensões e bitmaps. É uma boa. Porém, ainda há diferenças entre os navegadores neste item.

Nos navegadores – Esqueça nas versões antigas do IE (v. 8 e anteriores), que são as mais usadas. Testei no IE 8 e deu pau. Se a versão 9 suportará este elemento é uma incógnita. Há diferenças entre os navegadores também.

Testando o SketchPad, um baita editor de imagens que usa este elemento, notei diferenças entre o Chrome e o Firefox no uso de algumas ferramentas. E rodando este exemplo de “animação-game” (que simula um ambiente em três dimensões), houve diferenças: o Chrome executou fácil; já no Firefox fica uma carroça.

Clique para ampliar.

Nossa, que relevante… são pequenos detalhes. O que você quer dizer com esta postagem?

Lembro que, anos atrás, experimentei usar Javascript com SVG. Leve, rápido, padrão aberto, achava tudo isso demais. O problema era quando tentava executar nos navegadores: os resultados não batiam.

Daí passei a entender a existência de plugins como Flash Player ou Java: eles permitem, mesmo com todos os seus problemas, executar uma animação de maneira igual em todos os navegadores. O que pode ser crucial no caso de um webgame ou aplicativo RIA, por exemplo.

Por isso, teremos que conviver com estes plugins ainda por um bom tempo para lidar com estas diferenças.

Ruim com eles, pior sem eles.

]]> http://franciscoprado.com.br/2010/04/24/padroes-web-navegadores-ie-svg-html5-javascript-flash-plugin-webstandards-browser-chrome-firefox/feed/ 1 3D no navegador – WebGL e JavaScript http://franciscoprado.com.br/2010/02/15/3d-no-navegador-webgl-browser-javascript/ http://franciscoprado.com.br/2010/02/15/3d-no-navegador-webgl-browser-javascript/#comments Mon, 15 Feb 2010 11:43:44 +0000 Francisco http://franciscoprado.com.br/?p=871 Parece lance de futurologia, mas não é. O dia em que poderemos ter games em 3D, navegar por espaços em 3D e outras coisas (que precisem usar 3D) dentro do navegador (sem precisar baixar programas ou plugins) está bem próximo. E sem uso de Flash.

Ano passado foi lançado um padrão chamado WebGL. Ainda em desenvolvimento, esta especificação provê a geração de gráficos 3D dentro de navegadores Web. Mas ele não irá fazer de modo capenga e lento – como é feito em boa parte dos vídeos em Flash, que contam com bibliotecas em ActionScript para criação de ambientes tridimensionais. Ele se aproveitará da placa de vídeo, dando desempenho de game. Sem necessitar a instalação de plugins, ele se utilizará de programação JavaScript (linguagem de programação usada para dar mais “interatividade” ao sites), e de OpenGL (uma API livre usada em computação gráfica e que já vem embutida na maioria dos sistemas operacionais). O grupo de trabalho que o está desenvolvendo inclui pesos pesados da indústria como Opera (navegador), Google, Fundação Mozilla e Apple. Ah, e claro, a Microsoft parece não estar interessada…

Este recurso já é suportado pelas versões mais novas dos navegadores Mozilla Firefox (3.7) e Google Chrome (versão de desenvolvedor), e Safari. Esse recurso usa o elemento Canvas (implementado com a versão HTML 5).

Para você visualizar este recurso nestes navegadores, você precisa fazer algumas configurações (bem simples) em um desses navegadores.

Mesmo ainda não estando plenamente desenvolvido, já há bibliotecas em JavaScript destinadas a facilitar a geração desses gráficos. Veja algumas abaixo:

  • GLGE – site contendo vídeos e download da biblioteca. Parece ter poucos tutoriais.
  • CopperLicht – esta parece ser bem rica, contendo bastantes recursos. A empresa também oferece um software (pago) para facilitar a criação de projetos. A biblioteca JavaScript é gratuita. Contém alguns tutoriais.
  • CD3L – mais outra biblioteca gratuita. Esta parece ter uma série de tutoriais organizados.
  • SpiderGL – o site da biblioteca contém bastantes exemplos e bem interativos. Vale a visita.
  • SceneJS – mais um site que disponibiliza sua biblioteca. O legal deste é que ele permite que você edite os exemplos (clicando na seção “Playroom”), podendo modificar luz, posição da câmera, entre outros, sem precisar salvar nada (funciona dentro do site) e assim conhecer um pouco da biblioteca.
  • WebGLU – outra biblioteca.

Completando a seção de links, veja este site: Learning WebGL (). Ele contém tutoriais ensinando a usar WebGL. Veja também o site oficial do projeto.

]]> http://franciscoprado.com.br/2010/02/15/3d-no-navegador-webgl-browser-javascript/feed/ 2