Archive for the 'internet' Category

13 mitos sobre web design e SEO/SEM

centauro_349_265

Imagem: ingolfo.de

Wallace Vianna é webdesigner e desenvolvedor web

Quando me encomendam certos serviços de internet – de web design a marketing digital – as pessoas normalmente desconhecem o assunto e desejam alguém que “coloque o bloco na rua” de modo rápido e eficiente.

Estranhamente as pessoas ignoram que o profissional contratado sabe mais do assunto do que elas, e isso acaba na levando a ruídos de comunicação, decisões equivocadas e decepções que poderiam ser evitadas facilmente.

Por isso fiz uma pequena lista de certas crenças e suposições que povoam a mente do público em geral em relação a web design, e, de tabela, marketing digital (SEO/SEM ou otimização e marketing de sites para buscadores de intrnet):

Continue lendo ’13 mitos sobre web design e SEO/SEM’

Anúncios

Manual de revenda em webdesign (3)

Uma coisa que percebi em meus textos anteriores sobre esse tema foi a falta de uma ilustração de workflow para projetos de webdesign, do ponto de vista do contratante que terceiriza serviços de web.
Em outras palavras, as etapas que eu já sigo e que deveriam ser pensadas (e seguidas) pelo contratante (designer gráfico ou de outras áreas afins) para que as coisas fluam mais rapidamente e todos ganhem dinheiro com isso.

Não vou postar aqui metodologias como Pert-CPM ou Scrum (embora eu use a segunda), e sim as etapas e recomendações que diferenciam um projeto de web de um projeto de mídia impressa, para ficar nesse exemplo:

 Revenda web_ manual

  1. Seu briefing não é o briefing para projetos de web Seu briefing de design gráfico vai tratar de layout, valor do trabalho e data de entrega, sem considerar que 50% do trabalho pode depender de outros atores que não você (hospedagem do site, registro de domínio, pesquisa ou desenvolvimento de soluções para o projeto).
    Na dúvida, antes de pedir informações junto aos clientes, peça um briefing ao terceirizado e junte com o seu.
    .
  2. O projeto de web não começa no layout
    Pegou o briefing, faça uma estrutura (rascunho) do que o site vai ter em todas as páginas, o famoso WireFrame (*); ou se tiver funcionalidades, faça do wireframe um storyboard. Embora existam programas para esse fim, ele pode ser feito em qualquer programa de edição de imagem (do Corel, passando pelo Ilustrator, chegando ao Paint do Windows ou Photoshop).
    Ah, sim, e aprove esse wireframe com o cliente!
    Com ele o terceirizado pode te dar um valor (preciso) do projeto, sem que você perca tempo desenhando algo que não vai ser aprovado, ou reduzindo sua margem de lucro ao renegociar o que ficou apenas subentendido.
    .
    (*) o WireFrame, aqui, está para o projeto de webdesign como o moodboard (ou painel semântico) para projetos de comunicação visual. O Wireframe tem outras aplicações e finalidades, que fogem ao contexto desse texto.
    .
  3. Depois do contato, o contrato
    Se o orçamento/proposta for aprovado, entra em cena o contrato de serviços.
    Se o projeto só envolver conteúdo (texto e imagem p.ex) seu contrato pode se basear num projeto de mídia impressa. Se houver outras funções seu contrato tem de prever o famoso “plano B” (acordos sobre os entregáveis). Nesse caso peça opinião ao terceirizado para redigir esses termos, evitando arcar com prejuízos antecipadamente.
    .
  4. Antes de tomar decisões fale com o terceirizado
    Definiu as coisas, peça opinião antes de mostrar o layout ao cliente. Aceite as opiniões do terceirizado, tanto para podar como para plantar coisas em seu projeto; se discordar, tente chegar num meio-termo. Todos vão sair ganhando no final, com menos retrabalho, menor prazo de entrega e dinheiro no banco mais cedo.
    .
  5. Desenho é trabalho futuro, não é trabalho passado.
    Se você chegou na fase de desenho do site, já tem as seções e funcionalidades definidas. Assim sendo, não inclua nada de novo no layout em relação ao que foi colocado no Wireframe; tudo o que for desenhado tem de ter sido aprovado no wireframe para ser produzido e isso leva tempo. Coisas novas significam tempo e valores novos, que não foram acordados anteriormente.
    .
  6. Ninguém sabe tudo (ou o bastante)
    Fazer o rótulo de um produto longa vida não é o mesmo que fazer uma nova embalagem deste produto. São designs diferentes.
    Você não precisa fazer uma certificação em gerência de projetos (embora fosse bom) ou ser profissional de todas as áreas de negócio com que trabalha, mas tenha em mente que você vai levar um (bom) tempo até entender como o mercado de internet funciona (!) e que ele muda todos os dias (o livro que você leu sobre Google Marketing já está 50% ultrapassado antes de você terminar de ler).
    Assim sendo, aprenda com o erro dos outros, terceirize.
    É um exercício de bom-senso e humildade ao mesmo tempo.

Links relacionados:
Mood Board – ABC Design; Chocoladesign;

DesignDrops (1)

Wallace Vianna é mestre em design e autor do blog Wally Vianna

Porque detesto navegadores de internet que vêm junto com sistemas operacionais:

Fabricantes de Sistemas Operacionais (S.O.) deveriam ser proibidos de fabricar navegadores de internet. Conhece algum bom navgador que venha embarcado no S.O.?

gmaps-no-chrome

Página do Gmaps no Google Chrome (para Mac)

gmaps-no-safari

Página do Gmaps no Safari (para Mac, quem vem junto com o S.O.)

Continue lendo ‘DesignDrops (1)’

HTML 5, CSS3, ActionScript 3: quando, onde e porque usar

Wallace Vianna é designer gráfico e webdesigner no Rio de Janeiro, RJ.

Tecnologia sempre muda: celular, computador, páginas da internet… HTML 5 permite que se implemente certos recursos que eram muito difíceis de serem controlados até hoje, como incorporar um vídeo (que não seja Flash) na sua página HTML. Agora existem marcações/tags para essa e outras tarefas.

O HTML 5 se parece como o ColdFusion (CF), uma linguagem de marcação da Adobe, que poupa o webdesigner de programar: as marcações do HTML 5 chamam bibliotecas de código no navegador de internet, (permitindo manipular vídeo de maneira adequada e uniforme, como faz o Flash).

O CSS 3 é útil pois permite fazer uma série de coisas que antes eram feitas de modo improvisado: seja um gradiente (usando código e não imagens) até caixas com cantos arredondados (sem uso de tabelas com pequenas imagens ou grandes imagens com quinas arredondadas).

O ActionsScript 3 (AS 3) traz melhorias conceituais: agora o core (principal) do código fica na linha do tempo; os objetos (botões, por exemplo) chamam toda a programação, que está em um lugar só. Por outro lado não há interface visual para trabahar com esse código.

Os problemas para tirar proveito de tudo isso são o mundo a nossa volta: nem todos os computadpres possuem navegadores de internet atualizados, e mesmos estes não dão suporte a todos os recusos do HTML 5 e CSS3; nem todos os computadores tem Flash Player/Tocador de Flash atualizado também. Para piorar a Adobe possui um instalador/atualizador de Flash Player que não funciona na maioria das vezes, obrigando as pessoas a descobrirem soluções criativas para ver conteúdo Flash em AS3.
A pá de cal são os computadores de mão, que tem esquentado muito com aplicações em Flash. Muitas pessoas estão evitando usar Flash em seus sites “para celular” e a própria Adobe descontinuou suporte de Flash para dispositivos móveis.

Ou seja: o HTML, CSS e FLash “novos” são recursos interessantes mas o mundo a nossa volta – e os navegadores de internet – precisam evoluir para que possamos desenvolver páginas da web para a maioria das pessoas.

Aproveitando a oportunidade, queria divulgar dois textos: este primeiro discute os novos caminhos que o HTML 5 aponta para quem trabalha com internet (webdesign e desenvolvedor web): o artigo discorre sobre as novas marcações HTML 5 como <article> e <section> que substituiriam marcações “antigas” como <div>; os CMS (gerenciadores de conteúdo) já se utilizam dessas novas marcações.

http://blog.templatemonster.com/2012/04/17/html5-semantics-elements-replace-div-tag

Este outro artigo discute recomendações para sitios para dispositivos móveis (re/projetar o sitio para que se adapte a telas menores; destacar elementos de navegação pela cor e evitar camadas ou elementos pop-up)

http://blog.templatemonster.com/2012/04/18/mobile-web-design-usability-tips/

Ambos em inglês, mas valem uma leitura.

Links de hipertexto em Flash

O Flash é uma tecnologia adequada a internet? Jacob Nielsen colocou esse tema de modo claro ao afirmar, décadas atrás que o Flash – coqueluche da internet no seu lançamento – era incompatível com o ambiente da internet. Os motivos são vários, alguns persistem até hoje:
links feitos em Flash não necessariamente possuem destaques (sublinhados ou borda) que  indicam os estágios da navegação (links não-visitados, visitados, e atuais, p.ex, como o HTML se esforça a indicar até seus limites[*])

Fiz uma tentativa de resolver essa questão de navegação em Flash, e como já ví outros sites com essa mesma preocupação, fico feliz de saber que estou no caminho certo: além do texto flash mudar de cor ao passar o cursor sobre o link, o link assinala através da cor a página/tela atual e as demais páginas.

(Exemplo de flash com links de hipertexto)

Download do exemplo


Nota(s):

[*] o HTML indica através de cores se uma página foi (ou não foi) visitada, e a página atual. Mas não tem como indicar se a página atual  é uma página visitada, ao mesmo tempo. Algumas estratégias utilizando ou não tecnologias complementares como CSS procuram resolver estas questões: posso retirar o link da página atual da barra de navegação para indicar a página que estou, ou formatar o link da página atual com uma cor ou estilo diferente, via CSS, com o mesmo fim.

A Adobe e o bonde da internet

Esse texto foi movido para aqui

Formatos de imagem para Internet: um comparativo

As imagens digitais se dividem em dois grupos: as vetoriais e mapas de bits ou bitmaps.

Imagens vetoriais são pontos unidos por linhas; cada ponto está definido numa escala cartesiana, em vetores (no caso de imagem 2D ou bidimensionais, em eixos X e Y). Na internet o formato de imagem vetorial mais conhecido é o Flash, de propriedade da Adobe Systems mas também existe o SVG, de código livre.

Mapas de bits ou Bitmaps são imagens formadas por pontos, ou pixels. Esses pontos são valores expressos em valores de Bits, que se distribuem numa área chamada Mapa, daí o nome Mapa de Bits ou Bitmap, em inglês. Qualquer fotografia digital ou imagem escaneada é um mapa de bits. Na internet os formatos mais conhecidos são GIF, JPG e PNG.

A qualidade de uma imagem mapa de bits é um conjunto de resolução (número de pontos que formam a imagem, cuja unidade de medida é DPI), número de cores e compactação, que pode ser com ou sem perda de qualidade.
A relação abaixo descreve as características e utilizações mais comuns das imagens em mapas de bits, para a internet (modelo de cor RGB[1]):

Formato: GIF
Características  
Cores: 256 cores
Ideal para: Botões e figuras simples
Compactado: Sim
Qualidade Com perda
Transparência: Sim
Animação: Sim
Formato: JPEG
Características  
Cores: 16 milhões de cores
Ideal para: Fotos e imagens com gradientes complexos
Compactado: Sim
Qualidade Com perda
Transparência: Não
Animação: Não
Formato: PNG “padrão”
Características  
Cores: 256 ou 16 milhões de cores
Ideal para: Botões e figuras simples (256 cores) ou fotos e imagens com gradientes complexos (16 milhões de cores)
Compactado: Sim
Qualidade Sem perda
Transparência: Sim
Animação: Não
Formato: PNG do Fireworks
Características  
Cores: 256 ou 16 milhões de cores
Ideal para: Botões ou figuras simples (256 cores) ou fotos e imagens com gradientes complexos (16 milhões de cores)
Compactado: Sim
Qualidade Sem perda
Transparência: Não
Animação: Incorporado ao arquivo; só visível no Fireworks ou exportando para outros formatos (GIF, p.ex.)

Agora vamos ver algumas diferenças entre esses formatos ponto de vista do formato, tamanho em Kb e o número de cores (mantendo o mesmo tamanho – 100 x 100 pixels – e resolução de 72 dpi) a partir de uma imagem de exemplo:

vamos tomar como base de referência para comparação esta imagem “bruta”, sem compactação, em formato BMP.

Imagem sem compactação:

Formato de imagem No. de cores Tamanho
BMP (mapa de bits do Windows) 8 bits de cor (256 cores) 10,8 kb
BMP (mapa de bits do Windows) 24 bits de cor (16 milhões de cores) 29,3 kb

Vamos comparar esse formato com formatos de imagem para internet:

Imagem com compactação e perda de qualidade:

Formato de imagem No. de cores Tamanho
GIF [3] 8 bits (256 cores) 7,4 kb
JPG [4] 24 bits (16 milhões de cores) 4,15 kb

Imagem com compactação e sem perda de qualidade:

Formato de imagem No. de cores Tamanho
PNG do Fireworks [5]  8 bits (256 cores) 99,1 kb
PNG “padrão” 24 bits (16 milhões de cores) 19,9 kb
PNG “padrão” 32 bits (4 bilhões de cores)  22,6 kb

Uma observação geral mostra que:

Formato de imagem Compressão perda de qualidade
GIF e JPG   excelente (em JPEG pode chegar a 16:1) sim
PNG “padrão” compressão mediana não
BMP e PNG Fireworks
gera arquivos muito
grandes para
transmissão via internet,
em conexões banda
estreita
nenhuma ou baixa não


Notas:
[1] RGB significa Red, Green e Blue – Vermelho, Verde e Azul escuro, padrão de cores baseado em luz (do sol, monitores, lâmpadas)
[2] imagem em 8 bits, 256 cores; em 16 bits, 65.536 cores; em 24 bits,  16.777.216 cores; em 32 bits,  4.294.967.296 cores.
[3] com 256 cores. Toda imagem com até esse número de cores é chamada de cor indexada, pois as cores não estão em cada pixel/ponto da imagem, e sim reduzidas a uma tabela de cores pré-definida.
Fontes:
http://en.wikipedia.org/wiki/Indexed_color
http://esagapib12ano.blogspot.com/2010/02/indexacao-de-cor.html
[4] compactação entre 75 e 86, numa escala até 100
[5] apenas imagem