Iaku.org | Blog sobre Design | Artes Gráficas | Desenvolvimento Web

Live HTTP Headers

serve para obter informações em tempo real de como o protocolo HTTP está trabalhando, suas requisições, o tipo de servidor remoto que o site está utilizando, quais os cookies estão sendo enviados pelo site, etc.

FireShot

é uma extensão que gosto bastante: ela permite que você insira rapidamente comentários e anotações em tudo o que é exibido no seu browser. É possível gerar um arquivo de saída em JPEG, PNG e BMP. É bastante útil quando, por exemplo você precisa fazer a análise de algum site para o cliente.

Screengrab!

permite salvar sites inteiros como imagem. É possível salvar apenas uma seleção.

Firebug

é um dos principais add-ons para quem trabalha com desenvolvimento web. Com ele é possível editar, depurar e monitorar, em tempo real, o CSS, HTML e o JavaScript de qualquer website.

YSlow

é uma extensão que foi desenvolvida pelo Yahoo para ser utilizada juntamente com o firebug. Ela analisa seu site e exibe uma grade com informações do desempenho do mesmo, indicando em uma lista de 13 elementos quais podem ser aprimorados. Ela é baseada em algumas regras que são descritas mais detalhadamente no site do Yahoo de ajuda aos desenvolvedores.

Web Developer

é um add-on que oferece vários recursos para desenvolvedores testarem seu site. É possível desabilitar Java, imagens, CSS Styles, cores do site, etc. Utilizei essa ferramenta para fazer um teste de acessibilidade no site do meu banco e o resultado foi bastante ruim.

Fangs

falando em acessibilidade, o fangs é um add-on que cria uma representação textual de um site, simulando como ele seria lido por um leitor de tela atual.

IETab

Essa extensão serve para embedar o Internet Explorer em uma aba do Firefox.

MeasureIt

Permite traçar uma régua no site para medir as dimensões de qualquer elemento.

Colorzilla

é basicamente uma ferramenta de eyedropper que permite capturar cores de um determinado site e colar em outro programa. A versão Colorzilla 2 beta permite coisas muito interessantes, como por exemplo criar uma paleta de cores a partir da análise do DOM element, localizar elementos no site a partir de uma cor dada, pesquisar cores específicas nas regras CSS, etc.

É interessante notar como muitos objetos cotidianos, quando analisados com mais calma, revelam coisas super engraçadas. As imagens abaixo são selos panamenhos que foram lançados em 1966 para lembrar o terceiro aniversário da morte do presidente J. F. Kennedy. Destaque especial para a terceira estampa.

Será que é um elfo? Ou talvez um Hobbit? Ou estavam chamando JFK de burro?

No site do Henrique -Revolução etc.-, tem outros exemplos interessantes de ambigüidade no design.

De este modo Jehová crea el mundo nombrándolo, cosmogonía logocéntrica del mundo occidental y que implica que los nombres preexisten a las cosas, o las palavras a las imágenes, subvirtiendo así nuestras avidencias psicológicas, como sólo lo puede hacer un ser omnipotente.En la mitología egipcia está implicada, en cambio, la idea de que el estatuto de lo real es su visibilidad. Acaso Antonio Machado pensó en este hermoso mito cuando escribió en su Juan de Mairena:

                   Dijo Dios:  "Brote la Nada"
                   y alzó su mano derecha
                   hasta ocultar su mirada.
                   Y quedó la Nada hecha.

La Mirada Opulenta, Roman Gubern, Editorial Gustavo Gili S.A., Barcelona, 1987

As Notas, de um modo geral, constituem-se de excertos importantes de livros lidos ao longo da minha formação. Esta nota trata sobre uma das bases da sociedade ocidental, a cosmogonia logocêntrica, e a relação estabelecida entre esta sociedade e a visão.

Esta semana, aconteceu uma discussão na lista webstandards-br em relação ao uso de técnicas de image replacement (sim, é uma discussão bastante antiga). Algumas pessoas reclamaram que tiveram sites penalizados no Google por usarem a técnica.

Na central Google de ajuda do webmaster está definida a seguinte regra:

Texto e links ocultos

Ocultar texto e links pode fazer parecer que seu site não tem credibilidade, já que apresenta informações distintas para as ferramentas de pesquisa e para os visitantes. O texto (por exemplo, palavras-chave em excesso) pode ser ocultado de diversas formas, incluindo:

• Uso de texto com fonte branca em fundo branco.
• Inclusão de texto atrás de imagens.
• Uso de CSS para ocultar texto
• Configuração do tamanho da fonte para zero

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não vai mais aparecer nas páginas de resultados de pesquisa.

Por outro lado, Matt Cutts, engenheiro de software que trabalha no Google, publicou um post em 2005 no site threadwatch.org fazendo alguns alertas em relação ao uso do CSS para esconder texto:

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have a logo but also have text is spam; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.

Como sempre, quando a pergunta se relaciona ao algoritmo do Google a resposta dos engenheiros é um pouco dúbia. Teoricamente se você usa image replacement com responsabilidade não precisa se preocupar. Em princípio, o problema é utilizar textos muito longos ou tentar usar a técnica para obter vantagens com o web crawler do Google.

Foi anunciada ontem a mudança da marca da TAM, companhia aérea brasileira fundada pelo Comandante Rolim.

A criação do novo logotipo é de autoria das agências Y&R, do Grupo Newcomm (aquele do Roberto Justus) e Dezign com Z. A Y&R assina também a campanha publicitária institucional.

Apresentamos aqui as marcas antiga e nova, em alto contraste e nas cores institucionais, a fins comparativos.

O buraco existente entre a letra /T/ e /A/ foi preenchido com a inclinação da haste da letra /A/. Os ângulos agudos e obtusos da marca anterior foram substituídos por linhas curvas que remetem, entre outras coisas, a pássaros e nuvens. O novo desenho da letra /A/, além de solucionar o problema de kerning, remete ao leme de um avião comercial (veja na imagem abaixo). A suavização do desenho dos tipos trouxe um caráter mais humano para a marca. O desenho das letras e o espaço entre elas (kerning) melhorou bastante do logotipo antigo para o atual.

As cores institucionais, agora mais escuras, parecem ainda mais classudas. Nada mais apropriado para uma empresa que estende tapetes vermelhos para seus clientes e manifesta sua filosofia com as seguintes palavras:

Nossa política
1ª Regra: O cliente sempre tem razão
2ª Regra: Se o cliente alguma vez estiver errado, releia a 1ª regra

Visão
Trabalhar com o Espírito de Servir faz as pessoas mais felizes.

O pássaro azul, ainda que provoque reações adversas em algumas pessoas, tem um bom peso comparado às letras. É bom observar que em alto contraste ele só aparece onde tem de aparecer, formando a barra horizontal do /A/ e praticamente sumindo no restante de sua extensão. Não fosse o pássaro azul a marca ficaria muito desequilibrada (ele é quem segura as pontas do lado esquerdo, não deixando as letras caírem).

A partir do logotipo anterior (que poderia ser definido como /letras robustas vermelhas/) o desenho foi melhorado e alguns aspectos intangíveis foram acrescentados.

Boa sorte pra empresa, que tem orgulho de ser brasileira.