Mídia · Opinião

Porque se gasta tanto dinheiro com isso?

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.

Blog

Ideias gerais & Projeto novo

Esta semana não terá um post novo e mais decente do que este texto.

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

Dicas & Tutoriais

Brushes para Photoshop: como usar e onde encontrar

Quem tem que desenhar sites sabe que muitas vezes os prazos são exíguos e quanto mais uma tarefa é agilizada, melhor.

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. Continue reading “Brushes para Photoshop: como usar e onde encontrar”

ActionScript

Carregamento de imagens e de texto em ActionScript 3.0

Depois de um longo tempo (cerca de uns 5 meses) adicionei novos capítulos ao Wikilivro de ActionScript 3.0.

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

Dicas & Tutoriais · Padrões Web

Gráficos SVG no Internet Explorer usando uma biblioteca JavaScript

É 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. 😉

Dicas & Tutoriais · Padrões Web

Usando jQuery para manipular arquivos SVG

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

[javascript]
<!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>
[/javascript]

Wordpress

As novidades do WordPress 3.0

Deixo aqui, nesta postagem rápida, o link de um artigo que explica quais serão as novidades da versão 3.0 do WordPress.

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.

ActionScript · Dicas & Tutoriais

Usando SVG através do ActionScript – AS3 SVG Renderer

É possível carregar arquivos gráficos SVG (formato de arquivos de desenho em vetor, organizados em modo XML) através do ActionScript como se fossem Sprites.

A biblioteca AS3 SVG Renderer suporta boa parte dos recursos oferecidos pela linguagem SVG. Criada por um brasileiro (veja o blog), ela ainda não suporta o carregamento de arquivos de imagem (como JPEG, PNG, etc., um recurso disponível no SVG), o que não chega a atrapalhar em nada (haja vista que é possível carregar Bitmaps usando classes nativas do ActionScript). Muitos outros recursos estão disponíveis (desenhos de formas, linhas, transformações como rotação e inclinação, entre outros).

O uso da biblioteca é muito simples: basta carregar o arquivo como se fosse um XML, usando o package do ActionScript. O programa Adobe Flash torna-se dispensável.

O exemplo a seguir carrega e exibe um SVG carregado a partir de uma URL qualquer. Continue reading “Usando SVG através do ActionScript – AS3 SVG Renderer”

Dicas & Tutoriais · Padrões Web

Usando Raphaël para geração de SVG através de Javascript

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.

[javascript]
<!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 800×600, 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>
[/javascript]

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! 😉

Opinião

Padrões Web – os resultados não combinam entre os navegadores

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. Continue reading “Padrões Web – os resultados não combinam entre os navegadores”