Árvore do TI

A área de desenvolvimento, seja no TI, seja no design, propriamente dito, sofre com a imensa dificuldade de comunicação entre as partes envolvidas no processo.

O cliente muitas vezes pede algo que nem mesmo sabe explicar. O resultado é que nem sempre os objetivos do cliente são satisfeitos da forma como ele deseja gerando insastifação.

Este assunto é matéria discutida largamente em cursos de gerência de TI, gestão de pessoas e equipes. Lendo sobre o assunto encontrei um desenho que traduz bem a realidade:

1 – Como o cliente explicou o que precisa
2 – Como o gerente de projetos entendeu
3 – Como o analista projetou
4 – Como o programador escreveu
5 – Como o consultor de negócios descreveu
6 – Como o projeto foi documentado
7 – O que o setor de operações instalou
8 – Como o cliente foi cobrado
9 – Como o cliente obteve suporte
10 – O que o cliente realmente precisava

Está aí uma boa lição: simplicidade pode ser o melhor dos caminhos.

Aproveito para deixar uma mensagem fantástica do dalai lama:

Perguntaram ao dalai lama:

O que mais te surpreende na humanidade?

E ele respondeu:

- os homens… porque perdem a saúde para juntar dinheiro, depois perdem dinheiro para recuperar a saúde. E por pensarem ansiosamente no futuro, esquecem do presente de tal forma que acabam por não viver nem o presente nem o
futuro. e vivem como se nunca fossem morrer… e morrem como se nunca tivessem vivido.

SEJA A MUDANÇA QUE VOCE QUER VER NO MUNDO!

Créditos a grande amiga Myrtes pelas informações.

Pack de logomarcas design for web

Technorati Profile

Guia SEO para Designers e Webdesigners

O termo SEO é acrônimo para Search Engine Optimzer, que pode ser entendido como Otimização para máquina de busca (buscadores).
Equivaleria a dizer: como otimizar meu site para que ele apareça bem colocado em uma busca do Google, por exemplo?

De acordo com levantamentos realizados por diversos sites especializados, fica cada vez mais evidente que o uso de ferramentas de otimização é de fundamental importância para adquirir bom posicionamento em de sites de busca. Diariamente pessoas tomam contato com alguma informação relativa à otimização de sites. Mesmos proprietários de sites, a princípio leigos em tecnologias relacionadas ao universo web, estão cada vez mais solititando das empresas administradoras de seus sites, o oferecimento de serviços de otimização e cadastro em buscadores visando alcançar melhores resultados nas diversas máquinas de busca existentes na web.

Muitos designers ignoram ou mesmo desconhecem a importância de técnicas de otimização de sites, por considerar que não lhes cabe atuar nesta área. Ocorre que durante a confecção de um website, o trabalho de um webdesigner está repleto de aspectos relacionados aos serviços de otimização e muitos destes profissionais desconhecem esta possibilidade. Muitas vezes, bastaria apenas uma mudança de postura durante a fase de diagramação do website e geração de conteúdos, para criar páginas mais legíveis aos mecanismos de busca.

Já há algum tempo venho realizando pesquisas em diversos canais disponíveis na internet e fora dela tentando alcançar informações acerca do processo de otimização de sites. O fato é que a literatura sobre o assunto ainda não é ampla e alguns recursos utilizados por vitoriosos no mundo dos “search engines” ainda são guardados a “sete chaves” ou são de certo modo obscuros. Entretanto, há certos erros, que ocorrem frequentemente durante o processo de desenvolvimento praticado por webdesigners e programadores que podem ser evitados elevando consideravelmente a legibilidade do website criado para os “spiders” (robõs espiões dos buscadores).

Por que é importante conhecer técnicas de SEO?

• Primeiramente, cabe dizer: SEO não é apenas para profissionais da área de Marketing. Como webdesigner ou desenvolvedor de conteúdo, grande parte dos serviços de otimização denominados on-dev-site SEO são de responsabilidade destes profissionais.
• Se o seu site não é amigável para as máquinas de busca, entendendo como amigável, ser visto, “enxergado” e completamente interpretável, é provável que você esteja perdendo grande número de visitantes. Boa parte destes visitantes, os quais você jamais saberia.
• É bom ter em mente que se um internauta não digitar o endereço do seu site (www.seusite.com) no browser ou se não existir referências para seu website na web através de outros sites por exemplo, a única forma de algum visitante encontrar seu conteúdo será através de mecanismos de busca, como Google, Yahoo,etc.
• Há muitos benefícios em ter um site otimizado e amigável a mecanismos de busca. O fato de um site apareçer bem posicionado em um mecanismo de busca é uma publicidade gigantesca a custo praticamente igual a zero.
• Um site otimizado será melhor entendido por uma ferramenta de busca e irá garantir maior número de visitas elevando consideravelmente a publicidade do seu conteúdo.
• SEO é um considerado um “skill”. Este termo é muito comum em jogos de video game e significa habilidade. É bastante apropriado dizer que adquirir conhecimentos de SEO agrega valor profissional ao webdesigner, uma vez que este poderá vender serviços de otimização, além de ser um diferencial no seu currículo. Futuramente, saber utilizar recursos de SEO será condição “se en qua non” para um webdesigner.

Em seguida irei mostrar algumas técnicas básicas para evitar erros comuns de desenvolvimento que podem impedir que um robô de busca seja capaz de enxergar seu website corretamente num universo de milhões de páginas disponíveis na internet.

Antes vamos entender um pouco do funcionamento de mecanismos de busca.

Como funcionam as “Search Engines” (Máquinas de busca, comumente denominadas Mecanismos de buscas?

Cada buscador tem seu próprio programa de busca denominado “web spider” ou “web crawler”. O termo crawler significa réptil rastejante. De certo modo, é justamente o que faz uma máquina de busca: rasteja pela internet, “rente ao solo”, buscando os mínimos detalhes, tentando apontar para os diretórios mais ocultos, para os documentos mais esquecidos, gerando uma verdadeira base de dados.

O propósito básico de uma máquina de busca é justamente ler e coletar toda informação possível de ser encontrada, seguindo links (internos e externos) para depois depositar toda esta informação em uma base de dados gigante denominada Index.

Quando um internauta solicita uma busca através de um mecanismo, como Google ou Yahoo, o trabalho do buscador resume-se a encontrar a informação armazenada em seu banco de dados que seja mais relevante e aproximada daquilo que foi requisitado.

O que move um mecanismo de busca ou o faz parar é o quão bem foi respondida uma questão, quando um busca é solicitada. O comportamente de um buscador é baseado em um algorítmo constituído de uma série de fatores que juntos são utilizados para dizer se uma página é realmente relevante em relação a uma busca realizada.

É bem verdade que a relação semântica estabelecida pelas máquinas na tentativa de oferecer aquilo que o usuário deseja através de uma busca rotineira ainda é bastante precária e precisará evoluir muito para ser capaz de representar o “entendimento das coisas do mundo”.

No artigo denominado: INFORMAÇÃO, REPRESENTAÇÃO E COMUNICAÇÃO: OS PILARES PARA A WEB SEMÂNTICA da revista Gestão do Conhecimento, Cláudio José Silva Ribeiro menciona que pouco adianta tanta informação disponível se não é possível distinguir quais são as mais relevantes que satisfazem as condições estabelecidas pelos usuários. É justamente neste sentido que as máquinas de busca ainda precisam evoluir. Por exemplo, ao digitar num buscador: modelos de sites, o que se espera é que o buscador aponte para um endereço semelhante a modelosdesites.info, ou seja, que o endereço eletrônico contenha as palavras utilizadas na busca, no entanto, não é isto que acontece sempre.

Eu posso ser um “Search Engine Optimizer”?

Há no mercado brasileiro e mundial, empresas e profissionais vendendo serviços de cadastro em sites de busca e de otimização de sites com o objetivo de melhorar o posicionamento de websites em buscadores. É um novo campo que se abre. E tenha certeza que entendê-lo e praticar todas estas técnicas a fundo (não é este o objetivo deste artigo) demanda tempo considerável e em pouco tempo será seguramente um departamento de muitas empresas de desenvolvimento e criação de conteúdo para internet.

Cada mecanismo de busca possui seu algorítmo de busca. No entanto, entender ao menos em linhas gerais, os fatores que influenciam o algorítmo afetando o posicionamento no resultado de uma busca é relativamente fácil e pode contribuir em muito para alcançar resultados bem interessantes. Além do que conhecer estas técnicas pode se tornar uma boa fonte de renda.

Um trabalho de SEO possui dois aspectos: On-dev-site SEO e Off-dev-site SEO.

• On-dev-site SEO (Técnicas de desenvolvimento e otimização on-site): são ações que você pode tomar diretamente no seu site, como interferir, alterar e otimizar tags de HTML, cabeçalhos de páginas, palavra-chave, links internos, estrutura do site, etc.
• Off-dev-site SEO (Técnicas de desenvolvimento e otimização off-site): são aspectos que você não tem pouco controle, como por exemplo, quantos links externos apontam para o seu site ou quantas pessoas visitam seu site. Embora, existam algumas atitudes que possam ser tomadas para melhorar este aspecto, não é objetivo deste artigo tratá-las aqui.

O guia apresentado, é como já foi dito, fruto de trabalhos de pesquisas em diversos sites na internet, bibliografia variadas, além daquilo que venho aplicando em meus sites. Os métodos aqui discutidos podem ser utilizados por designers, webdesigners e desenvolvedores. O foco são as técnicas relacionadas ao “On-dev-site SEO”.

Uma dica importante: produza conteúdo de qualidade, atrativo e interessante. Aplique corretamente as técnicas “On-dev-site SEO” e certamente os aspectos relacionados ao Off-dev-site SEO começaram a caminhar por si só, sem que você tenha que mexer bravamente seus dedos. Em algum tempo você conseguirá adquirir “social bookmarks” (links na web) apontando para o seu site, além de bons backlinks (links de outros sites), inclusive, sites de respeito enviando usuários para o seu domínio.

Há algumas técnicas “Off-dev-site” que você pode utilizar para alcançar retorno mais rápido, como por exemplo, troca de banners. No entanto, é assunto para outro post.

Os erros de SEO mais comuns cometidos por Designers e Webdesigners

1 – Splash Page (também conhecida como página de apresentação)

Este é erro ainda é bastante comum e pode ser encontrado com facilidade na internet. Ao não ser que posição em buscadores não seja importante em seu projeto, jamais coloque uma página de abertura em seu site. Há sites muitos específicos e populares que utilizam esta técnica e lançam modismos que acabam arrastando designers e desenvolvedores mais desavisados. Justamente por pensarem que estão fazendo algo inovador ou ainda por acharem que estão participando da “moda”. É preciso lembrar que uma grande empresa em geral possui um público fiel ao seu conteúdo ou mesmo um produto já consolidado no mercado e uma mudança drástica em seu site a ponto de retirar a página inicial dificilmente irá causar grande perda de visitação. Outro ponto é que estas empresas já possuem um público regular acostumado a acessar o seu conteúdo. Empresas com grande orçamento para publicidade, como a Coca-Cola, por exemplo, podem investir na criação de uma página de entrada contendo apresentações complexas e cheias de efeito em flahs criados para atrair o visitante. O que nem sempre é fácil para outras empresas, que possuam um orçamento mais modesto.

Colocar uma página de entrada em seu site dizendo: “Clique aqui para entrar” é o maior dos erros que você poder cometer. Se for uma página toda em flash, o pecado torna-se mortal. Uma vez que links inseridos dentro de arquivos em flash são impossíveis de serem seguidos por spiders e crawlers.

A estrutura interna do seu site (páginas internas) não serão reconhecidas pelos robôs de busca se não existirem links apontando para dentro do site. Ou seja, todo o seu site ficará completamente invisível.

A sua homepage precisa incluir, minimamente, algumas palavras chaves e links apontando para as páginas internas do seu site.

2 – Menus em flash

Os robôs de busca são buscadores baseados em textos. Este fator deve ser levado em conta toda vez que se pensar em produzir conteúdo objetivando otimização. Mecanismos de busca enxergam textos. Portanto, inserir menus em flash, com efeitos de sombras, esmaecimento e outros recursos gráficos pode ser muito bonito e impactante, mas do ponto de vista de otimização é um grande erro, já que os links inseridos em elementos em flash, como já mencionado, não podem ser seguindos por robôs buscadores.

3 – Imagens e conteúdo em flash

“Web spiders” (robôs de busca) são baseados na busca textual, como já mencionado, portanto, eles não podem ler textos inseridos em imagens e arquivos em flash. Muitos designers cometem o sério erro de inserir conteúdo, sobretudo, palavras-chaves em arquivos em flash e imagens.

4 – Uso excessivo da tecnologia Ajax

Muitos designers tentam impressionar seu visitante implementando massivamente efeitos em Ajax, particularmente, com objetivos de navegabilidade. No entanto, este tipo de artifício constitui-se em dos maiores erros de otimização. Por que? O conteúdo baseado em Ajax é carregado dinamicamente. Ocorre que neste caso, o robôs de busca e indexadores não são capazes de realizar a indexação do conteúdo.

5 – Localização dos arquivos do site

Por algum motivo, alguns designers costumam alterar com frequência a localização dos temas e arquivos de seus sites, distribuindo-os em subdiretórios (por exemplo: dominio.com/v1, v2, v3) e criar redirecionamentos para estes novos diretórios. Mudar constantemente a localização dos arquivos do site pode causar a perda de links que apontam para seu site e interferir no seu “rankeamento” em buscadores.

6 – “Clique aqui para ver, acessar…”

É bastante comum e pouco inteligente o uso do “Clique aqui” ou “Leia mais” como um link de texto. Seria ótimo, se seu objetivo fosse concorrer e aumentar o seu “rankeamento” para as expressões (que nada dizem) clique aqui ou leia mais. No entanto, se o seu objetivo é que o seu conteúdo seja reconhecido pelo que realmente significa do ponto de vista semântico, é preciso utilizar palavras mais instrutivas que realmente sejam capazes de dizer alguma coisa. Utilize termos relacionados ao tópico/ assunto em questão. Use uma palavra-chave que seja mais relevante e objetiva. Se o objetivo é levar o cliente até um texto que fala sobre o desmatamento da Amazônia, então escreva: clique aqui para saber mais sobre o desmatamento da Amazônia e não simplesmente clique aqui para mais informações. Isto é no mínimo ineficiente.

Importante: Não use a mesma palavra-âncora em vários lugares em seu site. Este tipo de recurso pode ser visto pelos buscadores como indício de spam.

7 – Erros mais comuns na utilização da Tag Title

Textos iguais ou parecidos dentro da tag title

Cada página do seu site deve possuir uma <tag title> única, com suas palavras-chaves específicas. Muitos desenvolvedores cometem o erro de utilizar tags de títulos iguais ou similares em todo o site. Isto é o mesmo que dizer para os buscadores: “cada página do meu site é igual, portanto, não tenha o trabalho de percorrer todas elas.” Isto é abrir mão da exclusividade de cada conteúdo disponível em cada página do seu site.

Um exemplo de péssima utilização da tag title são os temas padrões do WordPress. As tags title padrão do WordPress são: Nome do site/ Arquivo do blog/ Título do post. Por que o padrão utilizado pelo WordPress não é amigável aos buscadores? Porque cada post do blog terá o mesmo padrão na parte inicial da tag title, repetindo: Nome do site/ Arquivo do blog/. Se você realmente desejar incluir o nome do site na tag title, este deverá estar presente no final da sequência: Título do post/ Nome do site.

Exceder a quantidade limite de 65 caracteres

Escrever tags title com muito longas. Os mecanismos de busca irão mostrar a tag title das páginas como cabeçalhos e links através dos quais os usuários irão acessar o conteúdo do site. Você tem aproximadamente 65 caracteres (incluindo espaços) para passar a sua mensagem ou correr o risco de perder público.

Excesso de palavras na tag title

Outro tipo comum de erro é a colocação de muitas palavras na tag title. Escrever a mesma coisa 3 ou mais vezes não irá tornar sua página mais relevante para os mecanismos de busca. O excesso de palavras na tag title é visto como técnica de spam pelos buscadores. É preciso ser esperto para repetir a mesma palavra várias vezes de diferentes formas. Veja o exemplo:

“Dicas de foto e técnicas fotográficas para belas imagens”

Observe que foto e fotografias são palavras com a mesma raiz (foto). Este tipo de artifício pode contribuir para aumentar sua audiência e seu desempenho em buscadores.

8 – Atributo Alt de imagens vazio

Você sempre deverá descrever sua imagem através do atributo alt. O atributo alt é que irá identificar sua imagem e demonstrar a relevância do conteúdo de sua página. Buscadores “não enxergam” imagens e para reconhecer o conteúdo do seu site através das ilustrações é necessário o uso do atributo alt.

Dica: Descrever as imagens do seu site corretamente pode favorecer o aparecimento do seu site em posições destacadas em buscas de imagens. Vários visitantes podem chegar até seu site através da busca de imagens. Suponha que um usuário esteja buscando por imagens de computadores e ao digitar esta palavra em um buscador, o seu site contendo um artigo sobre a evolução dos computadores tenha aparecido nos primeiros lugares, devido ao atributo alt de uma imagem presente neste artigo. Observe que neste caso, o usuário pode ter sido levado ao seu site para acesso a um artigo relevante através da pesquisa por imagens.

9 – URLs não-amigáveis

Muitos blogs e CMS (Content Management System – Sistemas de administração de conteúdos) possuem recursos de geração de endereços amigável. No entanto, nem todos sistemas tiram vantagem de endereços amigáveis. Estes endereços são interessantes tanto para audiência humana quanto para buscadores. A URL é também um lugar importante para aparecer as palavras-chaves do seu site.

• Exemplo de endereço amigável: dominio.com/titulo_pagina
• Exemplo de endereço não-amigável: dominio.com/?p=23568

Dicas gerais de SEO: o que fazer e o que não fazer.

Não ignore sua audiência

Escreva tópicos que irão interessar ao seu público. Como? Procure, estude, faça pequenas pesquisas de opinião, utilizando polls, por exemplo, busque por informações relevantes em fóruns, tópicos comuns em e-mails de marketing e venda, ou mesmo utilize busca por palavras-chaves, enfim, faça tudo para conhecer melhor seu público e oferecer aquilo que lhes interessa.

Existem diversificas e ótimas ferramentas, como Google Keyword Tool, ou SEO Book’s Keyword Tool e muitas outras que podem ser utilizadas para otimização. O objetivo não é gastar todo o seu tempo procurando palavras-chaves, mas sim, conhecer o que os visitantes do seu estão buscando. Um bom painel de administração do site, localizado no servidor de hospedagem (comumente, denominado CPanel) deverá trazer ferramentas para conhecer melhor a audiência do seu site e inclusive analisar as palavras-chaves que estão levando os visitantes até as suas páginas.

Densidade das palavras-chaves

Uma vez que você tenha um tópico para escrever para seus leitores, ajude os buscadores a encontrá-lo. Densidade das palavras-chaves é o número de vezes que uma palavra-chave aparece em uma página em relação ao número total de palavras. Tenha certeza de que as suas palavras-chave irão aparecer em áreas cruciais:

• Na tag tigle.
• No URL da página (URL amigável).
• No cabeçalho da página (H1 ou H2).
• No primeiro parágrafo de conteúdo.
• Pelo menos 3 vezes no corpo da página (dentro da tag body). Colocar mais ou menos palavras irá depender da quantidade de conteúdo, e somente se, fizer sentido.

Muitas pessoas objetivam uma densidade de palavras-chaves em torno de 2% (por exemplo, 2 palavras para cada 100 palavras). No entanto, se a sua frase-chave for: SEO para Webdesigners e Webdevelopments (Webdesenvolvedores ou Desenvolvedores Web), quantas vezes você poderá repetir esta frase, sem que pareça artificial? Lembre-se: escreva para seu público, não para máquinas. Seguindo estes parâmetros, você irá escrever naturalmente e obter sucesso com seu público leitor e também com as máquinas, consequentemente.

Atenção: não coloque a mesma palavra em grande quantidade na sua página. Este tipo de prática poderá ser tomado como “keyword stuffing” (excesso de palavras-chaves) e ser penalizado pelos buscadores.

Não ignore as relações

Neste artigo, faz sentido mencionar palavras como: busca de palavras-chave, mecanismos de busca, uso da tag title. No entanto, se mencionarmos a palavra-chave, compra de celulares (de forte apelo em buscadores) será que estaríamos utilizando este termo dentro de um contexto correto? Somente utilize palavras-chave e tópicos que façam sentido para sua audiência. Mecanismos de busca medem a relação entre as palavras-chave do site para determinar a relevância durante as pesquisas realizadas por usuários. Veja estes exemplos:

• Carros e pneus (ótima relatividade)
• Webdesign ou Design e Macacos voadores (não…talvez, poucas vezes)

Não tenha medo de links internos

Você gostaria que os mecanismos de busca encontrassem cada página do seu site? Ajude-os a cumprir esta tarefa. Isto pode ser feito através de sitemaps ou arquivos de blog que contém uma listagem do conteúdo do seu site. É preciso existir uma página denominada sitemap, por exemplo, que tenha links para todas as páginas do seu site.

Dica: você pode promover as páginas mais importantes do seu site colocando dentro do corpo (body) das páginas links realmente relevantes para outras páginas. Ao invés de utilizar o recurso empobrecido, clique aqui, que tal mencionar os nomes das páginas para o qual deseja maior expressividade?

Não ignore links quebrados

404 – erro de arquivo ou página não encontrada

Evite links quebrados em seu site. Busque incansavelmente por links quebrados em seu site e elimine-os. Se você remover uma página ou seção do seu site, configure o mecanismo “robot.txt” para prevenir que os mecanismos de busca venham a indexar links quebrados. Se você mover uma página ou um site inteiro, utilize o método 301. .htacces para redirecionar para a nova URL.

Dica: utilize o Google Webmaster Tool para encontrar links quebrados e erros do tipo 404.

Seja consistente com ao fazer referência ao seu domínio

Para os mecanismos de busca, www.dominio.com e dominio.com são dois endereços URL diferentes. Portanto, é importante manter a consistência do seu domínio. Se você iniciar a promoção do seu site utilizando a referência www.dominio.com, mantenha sempre este padrão.

Não se assuste com a websemântica

Websemântica e padronização podem, além de manter seu site mais inteligível, permitir que mecanismos de busca seja capazes de ler melhor suas páginas.

Resultado da posição do seu site na busca

Codificar e configurar o seu site para ser amigável às técnicas de SEO pode aprimorar o acesso dos mecanismos de busca à páginas do seu site. No entanto, isto não irá garantir seu posicionamento no topo das páginas de busca, uma vez que há diversos outros fatores que podem determinar o seu posicionamento nas buscas. Alguns destes aspectos são apresentados abaixo:

PageRank

Alguns profissionais de SEO preocupam-se com o PageRank do Google e outros não. Obviamente que é muito bom possuir um PageRank de respeito. É uma boa referência para saber o quão importante o Google considera o seu site. Abaixo apresentados algumas dicas para melhorar seu pageRank. Outra forma de alavancar o seu PageRank é através de backlinks (link de retorno). Através da colocação de links de qualidade apontando para o seu site em sites de referência, em bons sites.

Idade do domínio

Você ficará supreso em saber que a idade de um domínio é um dos fatores que interferem no algorítmo utilizado pelos buscadores. Domínios mais antigos possuem uma história, e seu conteúdo é visto com maior credibilidade que sites que entraram para o “campo de batalha” a pouco tempo. É comum domínios mais antigos aparecerem no topo da lista de buscadores.

Seja paciente

Você pode ter feito tudo certinho, no entanto, seu site pode não estar no topo das páginas dos buscadores para a palavra-chave que você escolheu. Por que? Porque tudo leva tempo. Leva tempo para que seu site seja indexado e alcançe um posição no PageRank do Google (especialmente para domínio novos).

Outra razão:

Pode ser que as palavras-chave que você escolheu utilizar sejam muito competitivas. Tente escolher outras palavras e talvez você tenha resultados melhores. Lembre-se: você está competindo com milhões de sites.

A diferença entre os padrões CMYK e RGB no design

Os padrões CMYK e RGB são padrões de cor utilizados em design de projetos, na criação de materiais gráficos, webdesign, material destinado a publicidade impressa, e uma infinidade de outras situações.

Qual a diferença entre estes padrões?

CMYK corresponde às iniciais das cores Cian (ciano), Magenta (magenta), Yellow (amarelo) and Black (preto).

Este é um padrão de quatro cores primárias, que combinadas formam cores ilimitadas. O padrão CMYK é mais usado para impressão em papel, onde 4 cores de tinta geram uma qualidade final melhor do que apenas 3.

RGB corresponde às iniciais das 3 cores Red (vermelho), Green (verde) e Blue (azul). Este padão é utilizado para exibição em monitores de computador e televisores em geral.

Devido a esta diferença de padrão é que uma mesma imagem vista no monitor apresenta leves alterações na tonalidade das cores ao ser impressa. Alguns programas gráficos como o Corel Draw incorporam filtros, que tentam mostrar no monitor a imagem exatamente como será impressa.

Ao criar o design para um formato é preciso ter em mente qual o suporte será utilizado. No caso de imagens para web o padrão adotado deve ser o RGB, enquando que, em se tratando de materiais impressos, deve-se utilizar o padrão CMYK ou outro de acordo com especificações técnicas do projeto adotado pelo designer.

Além do CMYK e do RGB existem vários outros padrões de cores, como o Pantone. Neste caso ao invés de um certo número de cores primárias que são combinadas para gerar as demais, há uma tinta para cada cor que será utilizada na impressão. Isto garante que a cor impressa seja exatamente a mesma que é vista no mostruário, entretanto não permite usar muitas cores diferentes no mesmo impresso, já que seria necessário o uso de uma tinta diferente para cada cor.

Lebramdo que o desenvolvimento de uma peça para impressão deve levar em conta que quanto maior o número de cores utilizadas no design do material maior o custo de impressão.

As imagens em formato CMYK geradas após o trabalho de design geralmente são exportadas na extensão tiff. Justamente pela impossibilidade de apresentar estas imagens em um browser não há uma imagem de exemplo para este formato.

Movimento com motion blur no Flash

Nível: Inicial, Intermediário
Software(s): Flash CS3/ Photoshop CS3
Objetivo: Dar a impressão de deslocamento de um objeto em velocidade

Olá pessoal. Este é meu primeiro tutorial por aqui.

O tutorial está divido em duas etapas.

• A primeira constitui-se da preparação das imagens a serem inseridas na animação.
• A segunda corresponde à criação da animação que dará movimento às imagens escolhidas.

Parte 1

Abra uma imagem de sua escolha no Photoshop ou outro programa preferido.

Figura 1: Abrindo a imagem no programa para design gráfico

Com a image aberta, nosso objetivo será criar um efeito de desfoque que irá simular o movimento.

Figura 2: Imagem aberta e pronta para edição

Observação importante: nesta etapa é interessante aumentar a área do arquivo (canvas size) para evitar que o efeito de movimento seja cortado em algum ponto. Para isto, antes de qualquer coisa, clique no menu image (Imagem) e no submenu canvas size (tamanho da tela) e aumente a área em 100 pixels na altura e na largura por garantia.

Vamos agora à aplicação do efeito de desfoque: escolha no menu filter, a opção blur e em seguida, o submenu motion blur.

Se seu Photoshop está em português, as opções são respectivamente: menu filtros, opção desfoque, submenu desfoque de movimento.

Figura 3: Acessando os menu para aplicar o efeito de blur

Na janela que se abre, configure da seguinte forma:

• angle (ângulo): 0º
• distance (distância): 40 pixels

Observe que o ângulo determina a direção do movimento e a distância determina a intensidade do movimento.

Figura 4: Aplicando um efeito de desfoque (blur) na imagem

Salve o arquivo como nome_motion.psd.

Você também pode salvar como png (formato nativo do Fireworks). O importante é salvar em um formato que suporte plano de fundo transparente e possa ser reconhecido pelo Flash. No pacote CS3 a integração entre os arquivos gerados pelo Photoshop no formato psd e o flash ocorre naturalmente, da mesma forma que nos arquivos com extensão png.Parte 2

Vamos agora iniciar a criação da animação. Abra o flash e crie um novo arquivo.

Figura 5: Abrindo o flash e criando novo arquivo

No arquivo criado, configure as dimensões do documento. Para isto clique em size na barra de propriedades (properties). Observe que uma janela irá se abrir. Na nova janela, configure a largura (width) e a altura (heigth) para respectivamente: 400px e 150px. Clique em Ok para fechar a caixa e retornar ao palco (área de trabalho do flash).

Figura 6: Determinando as características do arquivo

Vamos agora importar as imagens para a biblioteca do Flash para que possamos usá-las posteriormente.No menu File (Arquivo) escolha import (Importar) e clique no submenu import to libray (Importar para biblioteca).

Figura 7: Acessando o menu para Importar as imagens para a biblioteca

Na janela que se abrir, selecione as imagens a serem utilizadas no efeito de movimento. Duas imagens deverão ser selecionadas: a imagem original que usamos para aplicar o efeito de desfoque no Photoshop e a imagem resultante após o efeito aplicado.

Figura 8: Importando as imagens para a biblioteca

Utilize o menu window (janela) e clique na opção library (biblioteca) ou utilize o atalho CTRL+L para fazê-lo aparecer. Observe no canto inferior direito que uma nova janela surgiu mostrando os ítens que se encontram na biblioteca do arquivo em questão. Vamos salvar o arquivo. Utilize o menu File (Arquivo) e em seguida o submenu save as (salvar como). Na caixa que irá se abrir, escolha o local em que gostaria de salvar o arquivo e dê o animation_blur.fla por exemplo. Finalmente clique em OK.

Figura 9: Biblioteca contendo os arquivos importados

Vamos agora criar os clipes de filme que irão se movimentar através da timeline. Vá até o menu Insert (Inserir) e escolha a opção New Symbol (Novo símbolo) ou se preferir utilize o atalho CTRL+F8. Na caixa que irá se abrir digite o nome sem_movimento e deixe o tipo como movie clip. Arraste o arquivo sem efeito de desfoque que se encontra na biblioteca para dentro do palco.Repita novamente todo o procedimento para o outro arquivo que sofreu o efeito de desfoque. Para este clipe de filme dê o nome de com_movimento.Ao finalizar este procedimento retorne ao palco principal clicando em Scene 1 (Cena 1) na barra logo acima do palco.

Figura 10: Palco principal

Criando a aminação Agora já temos os elementos necessários para criar nossa animação. Vamos para a timeline. Arraste da biblioteca (library) o movie clipe denominado sem_movimento e coloque-o sobre o palco bem próximo à borda esquerda do documento.

Figura 11: Inserindo da elemento biblioteca no palco

Em seguinda clique sobre o frame 11 na timeline e aperte F6 para inserir um keyframe neste local.

Figura 12: Selecionando frame 1

Agora insira um keyframe no frame 13 da timeline e em seguida clique sobre o frame 12 com o botão direito do mouse e escolha a opção Creat Motion Tween. Este procedimento deverá criar o primeiro movimento do elemento, dando a idéia do seu deslocamento inicial. Agora teremos que fazer este elemento desaparecer para que entre em seu lugar o elemento que contém o efeito de motion blur aplicado no Photoshop anteriormente. Para tanto, clique sobre o frame 13 e em seguinda selecione o movie clip que está no palco. Na barra de propriedades selecione alpha 0% para a propriedade Color. Isto deverá fazer o elemento movie clip de nome sem_movimento desaparecer do palco. Este é nosso objetivo, fazê-lo desaparecer para que o novo clip apareça em seu lugar.

Figura 13: Aplicando alpha 0% [+] CLIQUE SOBRE A IMAGEM PARA AMPLIAR

Agora para finalizar o trabalho vamos inserir um keyframe no frame 16 utilizando a tecla F6 e mover movie clip “sem_movimento” para o final do documento, próximo à borda lateral direita. Novamente na timeline, sem alterar o posicionamento do elemento, vamos clicar sobre o frame 20 e inserir um último keyframe. Feito isto, clique sobre o movie clip no palco e mude a propriedade color para alpha 100%. Isto irá garantir o reaparecimento do elemento no final do processo. Por último clique sobre o frame 26 e aperte F5.

Figura 14: Aplicando alpha 10% [+] CLIQUE SOBRE A IMAGEM PARA AMPLIAR

Vamos iniciar o trabalho com o movie clip denominado com_movimento que encontra-se na biblioteca (library).Na timeline clique em insert layer (inserir camada). Isto deverá fazer com que apareça um nova camada (layer) acima da camada 1 (layer 1). É nesta camanda que iremos colocar o movie clip que dará a idéia de deslocamento com motion blur.

Figura 15: Inserindo nova layer

Figura 16: Layer 2 inserida

Clique sobre o frame 12 da layer 2 e insira um keyframe (F6).

Arraste o movie clip com_movimento da biblioteca para o palco principal.

Coloque na posição x: 115 aproximadamente.

Em seguinda clique sobre o frame 16 e insira um novo keyframe.

Desloque o movie clip para o fim do documento, na borda lateral direita e deixe-o aproximadamente sobre a mesma posição em que se encontra o movie clip com_movimento.

Clique com o botão direito do mouse sobre o frame 14 e escolha a opção Creat Motion Tween.

Finalmente, clique sobre o frame 20 e insira um novo keyframe.

Agora clique sobre o movie clip e altere a propriedade color para alpha: 0%. Clique sobre o frame 19 e escolha a opção Creat Motion Tween.

Observação: não esqueça de regular a propriedade y de todos os movie clips para que o movimento ocorra linearmente.

Veja o resultado.

Até a próxima.
Forte abraço.
Ao som de Cyndi Lauper – Who Let In The Rain