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!

Podemos dizer que o Scribus é um equivalente gratuito de programas como Adobe Indesign. Experimentei ele hoje, montando uma apostila de algumas páginas, usando fotos e texto. Tudo muito simples.

De início, me pareceu muito simples. Apesar de me bater com vários menus e janelas, para conseguir encontrar os recursos para formatações de imagens e textos, por exemplo, consegui me entender com o negócio. Ele se entende com vários formatos, incluindo SVG, Photoshop, EPS e HTML, e exporta arquivos em PDF, entre outros.

No entanto, percebi alguns bugs. Numa ocasião, o programa fechou sozinho devido a um erro no sistema. Em outra, a janela para seleção de imagem empacava. Mas enfim, nada que destrua a reputação do programa. Afinal, o Corel Draw, muito mais conceituado e pago, também tem seus problemas, como satirizado no funk abaixo, que rodou no Twitter semana passada:

Aí segue algumas opiniões a respeito do negócio, enquanto tentava bolar um desenho nele (notas de 1 até 3):

• Interface: é razoavelmente diferente da do Photoshop. As abas ficam um tanto encavaladas no ambiente. Para isso existe o Gimpshop, que oferece um Gimp com cara de Photoshop. No entanto, não consegui rodá-lo no Ubuntu. Enfim, é uma questão de se acostumar. 
• Ferramentas: senti falta das ferramentas de desenho do PS. Para desenhar um retângulo precisei usar ferramentas de seleção (é assim?!). Também tive dificuldade para lidar com gradientes. 
• Partes separadas: um plugin de efeito travou. O Ubuntu ofereceu duas alternativas: ou forçar sair (fechar com tudo a janela do plugin) ou esperar o processamento. Ao forçar a saída não perdi o trabalho: apenas a parte referente ao plugin fechou.
• Filtros / Efeitos: grande quantidade e são muito bons. Ainda não experimentei nem 50%, mas pelo visto supera os do PS.
• Sistema: muito leve. Dispensa uma super-máquina. No entanto alguns plugins demandam um processamento grande.

Há outras característas boas e outras ruins, ao meu ver. Porém, “malhar” o programa demais é injustiço, visto que se trata de um opensource de uso gratuito. Acredito que se trata de uma boa solução para o caso de alternativas aos programas proprietários.

Sim, eu sei: estamos em época de Copa do Mundo. As atenções estão voltadas para a televisão e para os jogos decisivos. Não à toa, os anunciantes estão descendo o caminhão de dinheiro. Todos querem que suas propagandas – e suas marcas – sejam vistas pelo público.

Mas frequentemente fico encucado e me pergunto: qual a razão de se investir tão pouco em propaganda online?

Lembro que, no tempo que eu lidava com propaganda (cursava comunicação), a Web detinha uma das menores fatias dos investimentos em publicidade (atrás da TV por assinatura, inclusive, e bem atrás de TV aberta, rádio, jornais, revistas e mídia externa). E ainda se investe pouco, o que é de se estranhar, haja vista que já é um dos veículos com grande penetração na sociedade.

Claro, talvez nunca se investirá em propaganda na Web como se investe em TV. Mas acho uma pena, pois eu, que tenho apenas TV aberta, confiro um conteúdo péssimo, e sou obrigado a me refugiar muitas vezes à Web em busca de conteúdo de qualidade. Conteúdo esse feito com uma certa, digamos, “valentia”: sem dinheiro, de maneira muitas vezes descontraída até, mas excelente.

Talvez seja uma opinião tendenciosa minha, visto que trampo com (ou tento viver de…) Web.

Mas ver um blog bacana fechar, e assistir programas de quinta na TV contando com fortunas, dá um gosto de injustiça.

–X–

Com este post pretendo inaugurar a série de postagens mais “pessoais” (sem aqueles tutoriais e dicas sobre Web como os anteriores). Ainda vou ver onde arranjar espaço para blogar essas coisas. Mas enfim, por enquanto é isso.

Como não tive uma ideia bacana sobre um novo assunto, devido ao tempo que tenho dedicado a freelas (depois de um tempo na “geladeira”, voltei a trabalhar com sites), fica este aviso.

Aliás, ultimamente, tenho perdido muito o interesse em escrever sobre algo aqui. No entanto, tenho pensado seriamente em montar um blog/site para conter apenas tutoriais, dicas e postagens sobre Web – e deixar este canto dedicado a apenas uma coisa: um abrigo para portfólio e textos sobre assuntos gerais.

Bem, é isso, por enquanto.

Por isso muitas vezes o jeito é se utilizar de ferramentas e recursos “pré-fabricados”. Não costumo usar o Photoshop para criação de layouts (para isso prefiro o Adobe Fireworks), mas como há muitos brushes (tipos de pincéis) disponíveis na Web para download, uso para criação de algumas partes, como efeitos de plano de fundo.

Deixo então nesta postagem uma seleção de links bacanas dos inúmeros que tenho favoritado no meu Delicious.

Brushes de aquarela – quer criar um efeito rápido de pintura? Aí estão 20 brushes ótimos para isso.

40 brushes estilo grunge (“sujo”) – uma postagem com um pacotão de brushes para criação de efeitos bem punks, em diversos estilos. Recomendo.

20 brushes para efeitos de tinta espirrada – outra boa série. Lembra muito a série de brushes do link anterior.

350 efeitos de mancha – também segue a mesma linha.

24 tutoriais para criação de brushes de Photoshop – aí segue uma coleção de tutoriais para você criar seus próprios pincéis.

50 brushes com efeitos de luz/estrela – talvez seja mais fácil usar o efeito de luz nativo do Photoshop para isso. Mas caso queira uma coisa diferente, segue aí um pacote.

Confesso que não testei todos os links que passei aqui. Mas os que baixei funcionaram bem. Para instalar os brushes basta você copiar o arquivo do download (deverá ser um arquivo com extensão .abr) para a pasta Presets>>Brushes da sua instalação do Adobe Photoshop (exemplo: “C:/Arquivos de programas/Adobe/Adobe Photoshop CS4/Presets/Brushes”), daí é iniciar o programa e correr para o abraço.

Dois tópicos adicionados: um simples, carregamento de texto, e outro mais completo, carregamento de imagem.

Um índice com todos os capítulos você vê na página principal do wikilivro.

Lembrando que ainda há muitos artigos a serem feitos. Por isso, se puder colaborar, será de grande valia.

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>

Dentre as novidades, o sistema ganhará encurtador de URL embutido, além de templates específicos para autores diferentes, entre outras.

Para quem não sabe, o WordPress é um sistema gerenciador de conteúdo (CMS) gratuito, inicialmente voltado para criação de blogs, mas que, com o tempo, recebeu vários plugins que tornaram possível seu uso para criação de sites de notícias, lojas virtuais, fóruns e até redes sociais. Dentre as vantagens deste CMS para outros, podemos citar que ele é mais leve e melhor para otimização do site para os buscadores (SEO) do que gerenciadores concorrentes, como o Joomla.