Home

Arquivos da categoria: web

Entrevista: influência dos navegadores no desenvolvimento de interfaces

18/07/09

Entrevista concedida a revista webdesign para a reportagem de mesmo tema, que será publicada na edição de Ago/09.

Reportagem Navegadores, Ago/09 [PDF]



1 – Chrome 2.0, Opera Unite, Safari 4.0, IE 8.0, Firefox 3.0.11… Ao longo de um ano, os navegadores de internet vão sofrendo modificações diante das necessidades de melhoria impostas pelo seu uso diário. Pensando nisso, como você procura acompanhar essas mudanças para garantir a criação e o desenvolvimento adequados de seus projetos?

Com frequencia são atribuídas novas funcionalidades e características aos navegadores, algumas valem a pena se aprofundar mais, pois serão padrões em breve. É o caso do HTML5, suportado por alguns browsers recentes e está começando a ganhar espaço.

Por outro lado, para garantir a adequação dos projetos no dia a dia, penso que basta se ater aos padrões web e desenvolver um código consistente, o mais semântico possível, com foco nos navegadores que seguem essa linha.

2 – Como vimos acima, existe uma oferta variada de navegadores à disposição dos usuários, sendo que o IE e o Firefox parecem atrair a maior atenção do público. De que maneira os browsers podem influenciar no desenvolvimento do design de interfaces?

Diferentes browsers influenciam o desenvolvimento pois divergem na renderização de fontes, espaços e margens.
É preciso saber onde essas diferenças vão interferir no seu layout e já prever formas de contorná-las.

Conhecer o funcionamento dos browsers para estruturar um código bem feito também pode resultar em melhorias de performance do website.

3 – Nesta discussão, a aplicação do conceito de cross-browser se torna fundamental para garantir que um projeto seja suportado pelos diversos navegadores. Diante disso, o que você consideraria imprescindível na aplicação correta deste conceito na construção de um projeto digital?

Nem todo projeto deve ser totalmente cross-browser. Sempre que posso, idealizo projetos visando os principais navegadores que seguem os padrões web. Em navegadores antigos o site deve apenas funcionar bem, ou se possível, nem isso.

Ao ajustar o código para navegadores arcaicos (como o IE6), estamos investindo em postergar sua obsolência.
Como desenvolvedores, podemos induzir a atualização destes navegadores priorizando o código para os navegadores atuais (nivelar por cima).

4 – Ainda sobre esse assunto, quais são os erros mais comuns que dificultam a adequação de projetos web ao conceito de cross-browser?

A aplicação dos padrões web permite que os sites funcionem e sejam vistos corretamente em quase todos os navegadores. O IE, o browser com maior predominância no mercado, apresentou até agora grandes deficiências na implementação destes padrões, ampliando a divergência de renderização.

Algumas características às vezes precisam de ‘hacks’ ou programação extra para funcionarem corretamente, o que interfere diretamente no tempo e custo de desenvolvimento.

As divergências seriam minimizadas se a atualização dos navegadores fosse contínua, induzida pelo próprio software, como ocorre no firefox, por exemplo. As últimas versões dos navegadores mais populares já seguem os padrões web (inclusive o IE8).

5 – Quais ferramentas você utiliza para testar a eficácia de seus projetos nos diferentes navegadores disponíveis pelo mercado?

6 – Além das funções de navegação, os plugins agregados ao Firefox o tornaram em uma ferramenta muito utilizada por profissionais de internet. Você também utiliza o Firefox como ferramenta de trabalho? Caso sim, quais plugins você recomendaria para quem deseja trabalhar com o Firefox?

Acho indispensáveis o uso dos plugins Firebug + Colorzilla.
Com estes, na maioria dos ajustes de código não é necessário abrir mais nenhum outro programa além do navegador (e o editor com FTP, claro).

7 – Quais dicas de leitura você daria para o profissional que deseja se aprofundar neste assunto (cross-browser, navegadores, renderização etc.)?

hahah

13/03/09

Typeface

20/11/08

typeface.js permite escrever em HTML e CSS como se os visitantes tivessem a fonte instalada.
O resultado gera imagens vetoriais pelo browser.

nao testei ainda, mas eh um bom começo… Ja me questionei algumas vezes sobre o fato de jah termos tecnologia pra tanta coisa incrível, mas não haver uma forma de embedar efetivamente uma fonte no html..

blumenthal vs3 released

7/10/08

Como nao poderia ser diferente, está no ar a nova versão do meu site, totalmente html dessa vez!
Por enquanto com poucos trabalhos, em breve atualizações ;)

já era mais que tempo de mudar… ufa!

dilema no uso da internet rica

1/10/08

O dilema no uso da internet rica

Normalmente o principal objetivo de um site é publicar um conteúdo que seja indexável e acessível, fatores que são prejudicados ao escolhermos uma solução full-flash.

Hoje ainda é recomendável publicar uma redundância do site em html, o que afeta diretamente o custo do projeto. Com o custo e benefício inferior, essa decisão precisa ter uma boa justificativa.

O uso do flash é pertinente em casos específicos, como produtos de publicidade, que exploram o apelo emocional, ou ainda, para aplicações didáticas como e-learning, entre outras. Os recursos interativos que o flash oferece se bem utilizados, podem enriquecer a experiência destes produtos.

Porém, ainda é recorrente o desenvolvimento de flash sites que poderiam ser totalmente em html e evitar que elementos fundamentais, como o nome da empresa, tenham a mesma prioridade semântica que o texto “fechar” em algum lugar do site. Uma perda considerável por conta de uma ou outra animação, que na prática não traz nenhum beneficio para o usuário. Para estes casos, estão cada vez mais à disposição frameworks e outros recursos que possibilitam a prática de elementos dinâmicos, fazendo uso apenas de javascript.

Mesmo que os processos de indexação do conteúdo em flash estejam sendo aprimorados, se não há um real motivo para o uso do flash, devemos optar por soluções em html ou pelo menos híbridas, separando conscientemente elementos que podem ser omitidos nas buscas.

Daniel Blumenthal
www.blumenthal.com.br


O artigo acima foi publicado na revista webdesign, out/08
Siga o link abaixo para versão em pdf da matéria completa:
http://www.revistawebdesign.com.br/downloads/58/2.pdf

.all

26/06/08

Foi aprovada por unanimidade hoje em Paris a proposta que cria um numero ilimitado de domínios top level, ou seja, sufixos como .com. Permitirá que empresas criem domínios com seus nomes – por exemplo, .ibm ou .coke. Também possibilitará a criação de domínios para cidades – como .nyc.

Uma boa notícia, tirada do blue bus

my delicious tags

25/06/08

Tags

Feito neste site aqui.

Firefox’s Download Day

14/06/08

start on June 17, 2008. | Pledge Map

– updated 17/06/08 15h –

o processo foi difícil

Network Error (tcp_error)
A communication error occurred: “Operation timed out”
The Web Server may be down, too busy, or experiencing other problems preventing it from responding to requests. You may wish to try again at a later time. For assistance, contact your network support team.

loading no Gmail

16/05/08

de times padrão, mudou pra arial e agora ganhou um loading.
em tempo.

loading gmail

Css Homer

2/05/08

A imagem abaixo foi feita puramente por css+html.
Não acredita? Copie o código aqui e cole em um arquivo html para certificar ;D

o
o
o
o
(
O
O
O
\
L
(
O
O
O
O
O
\
L
(
O
|
|
\
\
|
|
\
\
\
\
(
(
8
o
o
o
(
(
8
o
o
o
o
)
)
b
o
O
o
o
o
o
o
o
)
b
o
O
o
o
o
o
o
o
o
o
o
/
/
/
_
_
_
C
C
O
(
-

Autoria: romancortes.com/blog/homer-css/

spam em anúncios

9/04/08

os adwords contribuíram bastante para estabelecer uma ordem na publicidade online e diminuíram o bombardeio de mega-banners animados… Anúncios normalmente já espantam as pessoas, mas os formatados em links, foram bem aceitos, apesar de algumas controvérsias de que alegavam que os anuncios em txt muito se assemelham ao conteúdo de um site e, dependendo do caso, vc poderia demorar um tempo pra distinguir links de anúncios…

Na prática quando o google controlava a exibição, sempre foram bastante diferenciados para separar o que é conteúdo do que é anúncio, mas a partir do momento que o negócio virou popular, qualquer um poderia personalizar e exibir onde quisesse, tb possibilitou q o uso fosse difamado e, assim, os que criticaram as semelhanças entre conteúdo e publicidade realmente estavam certos.

ja me deparei com sites q simplesmente não tinham conteúdo, apenas adwords. Outros em q o conteúdo eh oprimido pelos anúncios ao redor, no meio do texto e às vezes até se parecem com o menu do site, como no exemplo. Cada vez mais parece aumentar o “spam” de anúncios, eu como um navegante, logicamente, passei a me treinar para ignorá-los e já o faço com certa eficiência.

há alguns dias vi notícias de q a média de cliques nos adwords estavam em baixa, o que não me surpreendeu: todos estão aprendendo constantemente a fugir de spam’s… Há rumores de novos produtos para anúncios online a serem lançados em breve e q tem la suas peculiaridades, mas independente de como for, precisam solucionar como controlar o uso pra que a reputação não seja tão frágil.

1º de abril

19/03/08

Dia de mentira motiva um concurso no YouTube sobre depoimentos pessoais contando como foi o melhor ‘trote’ que já participou. Os 300 vídeos mais votados ganham, no dia 1º de abril, m&m’s durante todo o dia.

Apesar de discordar um bocado dessa fórmula de “o vídeo/foto/banner mais votado ganha…” me fez lembrar uma ação do Google em 2000, a Google Mental Plex lançada para ‘comemorar’ o “April fool’s day” que ainda vinha com uma chamada: “New! Search smarter and faster with Google’s MentalPlexTM”. Depois de tirar óculos e chapéus, bastava mentalizar a busca para obter os resultados.

Foram longe no ‘projeto, tem até um FAQ e um manual de instruções ilustrado de como utilizar a nova ferramenta :)

busca nossa de cada dia, nos dai hoje…

30/01/08

Um post interessante “Google is the new http://” diz que ao vermos os principais resultados de buscas feitas no google, encontramos no topo nomes familiares como ebay, amazon, facebook, etc. Estes termos são digitados por pessoas que não estão fazendo uma busca necessariamente, mas usando o Google como ‘campo de endereço’.
Uma prova disso é que ‘google’ está entre os 6 termos mais procurados, o que não faria o menor sentido: ‘buscar’ um site através dele mesmo. Ou seja, essas pessoas não estavam ‘procurando o site do google’ mas sim, navegando na internet, e para isso, partindo de onde estão mais acostumados.

Lembro que inicialmente fui deixando de digitar no campo “endereço” para cada vez mais utilizar o campo menor ao lado (firefox), do Google, mesmo sem a intenção de fazer uma “busca” efetivamente.
Esse comportamento é cada vez mais comum, de forma que atualmente os desenvolvedores já perceberam isso e ao digitar uma url ‘inexistente’ no campo endereço dá pra perceber (no canto inferior esquerdo) que o google entra na jogada durante o “localizando”.

Hoje já não costumo mais digitar os endereços completos para visitá-los, como por exemplo p/ acessar o site www.caixa.gov.br, digito no campo endereço apenas “caixa economica”, que já redireciona diretamente para primeiro endereço: “I’m Feeling Lucky”.
A questão é que utilizar o google como intermediário passa a ser muito mais prático, uma vez que não preciso ter certeza se o site da caixa é .gov .net .etc. e ainda serei corrigido se digitar alguma coisa errada com pressa.

Outra feature em que a caixinha de busca ganhava pontos sobre a de endereços era o auto-suggest, que na busca eram oferecidas sugestões da web enquanto na de endereços as sugestões se limitavam a endereços previamente visitados (isso c/ o histórico intacto). Essa funcionalidade percebi q já foi incluída no firefox 3 desde o beta (se isso já tem há tempos em outros navegadores não fui atrás).

Essa integração facilita muito e, no final das contas, economiza um tempo valioso.

Hooray! Pandora box is open!

15/01/08

Utilidade pública:
Nesta url [ http://globalpandora.com ] vc pode acessar o Pandora, que originalmente está bloqueado fora dos EUA.

Pode inclusive entrar com seus dados de acesso antigos, que mantém tudo armazenado! ;D

Tarefas no Gmail: Remember the milk!

14/01/08

Há tempos eu já esperava um feature de tarefas no Gmail.

Na falta, utilizei algumas vezes um gerenciador de tarefas que é ótimo, o Remember the milk, mas por ter que visitar sempre o site, acabava não sendo muito prático.

Finalmente temos disponível uma extensão do Firefox que integra o Remember the milk ao Gmail por completo, inclusive no quesito interface, que mantém a identidade do Gmail.

TArefas no Gmail

Agora você cruza tarefas com os emails, tags, contatos e até Google calendar. Muito recomendável!

Digite as letras?

11/01/08

vivo torpedoPra enviar torpedos pelo site da vivo é preciso adivinhar que o “Digite as letras” significa na verdade “Digite os caracteres” (sem omitir numéricos).

Qdo a instrução já vem errada, quais as chances de ocorrer um erro?

<.!--[if lt IE]>

26/12/07

SUX!

abas informam

13/12/07

UOL vídeos, em versão de testes, informa de forma divertida que terá novas opções

Estudos de Eye-Tracking: 23 lições práticas

27/11/07

Algumas conclusões adquiridas em pesquisas de Eye-tracking podem ajudar a aprimorar o design de interfaces

  1. Textos atraem atenção antes das Imagens. Maior parte dos usuários chegam em um site procurando por informações, não imagens.
  2. Inicialmente os olhos focam no canto superior direito da página.
  3. Usuários olham para o topo esquerdo e percorrem movendo para direita inferior no formato de um “F”. Certifique-se de que os elementos importantes estão localizadas nessas áreas-chave para manter os leitores envolvidos.
  4. Banners são ignorados. Geralmente mantém o foco por poucos segundos.
  5. Formatações enfeitadas são ignoradas. Usuários confundem com anúncios e acham que nestas áreas não irão encontrar as informações que ele precisa. Manter o site racional, sem extravagância para não confrontar com os elementos mais importantes.
  6. Mostrar números numericamente. São identificados muito mais rápido do que números por extenso.
  7. Tamanho das fontes influenciam no comportamento. Fontes menores aumentam o foco (específico) enquanto fontes maiores induzem a varredura dos olhos (geral). O uso adequado irá depender da necessidade.
  8. Usuários apenas olham para um sub-título se lhe interessar. Apenas inserir subtítulos para informações que possam ser relevantes.
  9. Pessoas geralmente percorrem até partes inferiores da página. Para tirar vantagem disto, pode-se oferecer algo que o prenda ao longo da página. Destaques ou listas com marcadores podem demostrar que as informações são facilmente achadas no site.
  10. Parágrafos curtos têm melhor desempenho do que longos. Informações devem ser concebidas para o curto tempo de atenção dos internautas. Mantê-las enxutas sempre que possível é fundamental.
  11. Formatos de 1 coluna fixam mais os olhos do que os de várias colunas. Não sobrecarregar o visitante com muita informação. Muitas colunas poderão ser ignoradas pelos usuários. Evitar ruídos com a simplificação realmente é melhor em alguns casos.
  12. Anúncios no topo esquerdo da página receberão maior atenção do olhar. Integrar anúncios no canto superior esquerdo aumentará sua visibilidade. Claro que não necessariamente serão clicados, portanto, não sacrifique o visual para ganhar visibilidade extra.
  13. Anúncios posicionados próximos ao conteúdo principal são vistos com mais frequência.
  14. Anúncios em texto foram intensamente mais vistos do que qualquer outro tipo testado. Não distraem e misturam-se com o conteúdo da página, são visualmente menos irritantes e mais aceitos.
  15. Imagens grandes chamam mais atenção. As pessoas se interessam mais pelas imagens em que podem ver detalhes e informações claras. A maioria dos usuários têm conexão banda-larga atualmente e não sentem receio em optar por ver imagens grandes.
  16. Imagens “limpas” atraem a atenção dos olhos. Obras de arte podem não atrair tanto o olhar das pessoas. Ao usar fotos de pessoas, prefira fotos limpas, de fácil compreensão. Inclusive, fotos com pessoas “reais”, e não modelos, têm melhor performance.
  17. Títulos direcionam os olhos. Primeiras informações buscadas pelos leitores ao longo da página.
  18. Usuários gastam muito tempo olhando para botões e menus. Por isso vale a pena dedicar tempo extra para garantir que serão bem concebidos, afinal, não só apresentam alto grau de fixação dos olhos, como também é um dos mais importantes elementos do site.
  19. Listas prolongam a atenção do olhar. Quebrar os parágrafos em listas mantém os usuários mais concentrados. Usar números ou marcadores para destacar as informações mais importantes torna o site mais fluente e facilita que o usuário encontre as informações que procuram.
  20. Longos blocos de texto são evitados. Estudos mostram que internautas não investem tempo lendo blocos longos, por mais relevante que possam ser. É preciso quebrá-los. em parágrafos menores, destacando áreas específicas.
  21. Formatação pode chamar a atenção. Diferenciar a formatação de um texto destaca uma determinada informação, porém use com moderação para não tornar a página difícil de ler.
  22. Espaço em branco é bom. Deixar áreas livres de qualquer informação, mantém as coisas simples e permite melhor acomodação visual.
  23. Ferramentas de navegação funcionam melhor quando posicionadas no topo da página. Torna a navegação fácil de encontrar.

Texto original: Scientific Web Design: 23 Actionable Lessons from Eye-Tracking Studies, de Christina Laun – Dica do Vitor Lourenço

Free Magenta

15/11/07

free magentaProtesto pelo livre uso do magenta, cor que uma empresa alemã de telefonia diz ter os direitos para peças de comunicação e têm aberto processos contra outras empresas que usam o magenta nas marcas.