2 links interessantes sobre o Web Essentials 2004, que aconteceu em Sidney.
Pushing your limits, apresentação sobre CSS, proferida por Douglas Bowman
Vídeos do evento. Tem até o keynote do Zeldman!
Aproveitando o contexto web-encontros, em julho, em Londres, tem @media.
Bem, um dia desses, a versão 3 do CSS deve sair. Mesmo ainda que vários browsers não suportam sequer a versão 2, o W3C soltou uma lista de features. O que deveremos ter:
Border: cantos arredondados; sombras; bordas complexas feitas de várias imagens ladrilhadas;
Comportamento CSS: adição de comportamentos aos estilos, ou seja mudanças dinâmicas ao estilo ou ao documento em resposta a cliques e/ou teclas pressionadas;
Layout multi-colunas: novas propriedades para criar layouts de colunas mais flexíveis;
Perfil móvel 1.0: inclui um subgrupo de propriedades CSS1 e CSS2 apropriadas para dispositivos portáveis;
Fontes: propriedades para “decoração” e efeitos, como contorno e AA (anti-aliasing = anti-serrilhado);
Audio: possibilidade de prender sons de fundo a elementos e transições de elementos, como ativação de links ou flutuar (hover) o cursor sobre um elemento.
1) Você termina suas frases com ponto-e-virgula;
2) Você identa texto que não é codigo;
3) Alguém fala em objeto e sua primeira ideia é: “instância de uma classe”;
4) Você se refere a números decimais como “float”;
5) Memória é uma parte do computador;
6) Expressoes do tipo “x = x + 2″ fazem sentido;
7) vocêusaunderscores(”")aoinvesde_espacos;
8) Voce nao usa acentos;
9) Você diz “if” aos invés de “se”;
10) Programa nunca significa agenda de atividades;
11) Fonte não é um lugar de onde sai água;
12) 1.1 não é um número, mas sim uma versão;
13) GUI não é o apelido de uma amigo seu;
14) “C” não é uma letra da alfabeto;
15) Java não é um tipo de café;
16) Pascal não é um matemático famoso;
17) Perl não é uma pérola;
18) Python não é uma cobra;
20) Eiffel não é uma torre em Paris;
21) Código não é algo utilizado para que os outros não entendam o que se diz;
22) Alpha e beta não são letras gregas.
A minha raiva (e a de todos) do Internet Explorer é justificável. Esse navegador web conta com uma série de falhas, que além de inseguras, tornam-o também incompatíveis com os padrões web.
Quando estou criando um site, deixo de utilizar alguns atributos importantes do CSS, como position, min-height, max-height, min-width, max-width, além de não ter um suporte completo a pseudo-seletores (:hover, :after, :before). Isso sem contar com o suporte (digo, falta de suporte) à transparência de imagens PNG e de não poder utilizar formatação de elementos por filtragem de atributos (exemplo: input[button], input[submit]).
Esse são só alguns exemplos de bugs que o IE tem. Por isso, instale o Mozilla Firefox. Ou o Opera. Ou o Safari. Ou o Konqueror. Viu só? Existem alternativas.
Algo importante visto no livro de Jacob Nielsen e Marie Tamir.
1. Exibir o nome e / ou logotipo, em um tamanho razoável e em um lugar de destaque.
2. Incluir um slogan resumindo explicitamente o que o site ou a empresa faz. Deve ser explicativo e pequeno.
3. Incluir um link “Sobre Nós” que apresente aos usuários em visão geral da empresa e link para todos detalhes relevantes como produtos, serviços, valores da empresa, proposta de negócios e equipe. O nome indicado do link deve ser: Sobre .
4. Incluir um link “Fale Conosco” na homepage, que acessa um página com todas as informações de contato da empresa.
5. Evitar conteúdo redundante. Repetir na homepage links idênticos congestionam a página. Coloque o link em uma área nitidamente em local específico.
6. Não utilizar frases eruditas que fazem com que as pessoas tenham um trabalhão para descobrir o que é.
7. Evitar as categorias e as listas de marcadores de um único item.
Usar somente o discurso imperativo, como em “Insira uma cidade ou CEP” nas tarefas obrigatórias ou qualificar a declaração adequadamente. Por exemplo, você poderia dizer “Para saber o tempo local, insira uma cidade ou CEP”. As pessoas acompanham naturalmente o texto que informa o que devemos fazer em um site, principalmente se estiver em algo conhecido, como uma caixa de entrada ou em menu drop-down, e com certeza seguem as instruções porque acham que devem fazer o que as instruções indicam.
8. Evitar pontos de exclamação. Eles não fazem parte da grafia profissional e não têm nada a ver com Homepages.
9. Empregar raramente todas as letras maiúsculas e nunca como estilo de formatação. As palavras com todas as letras maiúsculas não são tão fáceis de ler.
10. Evitar usar inadequadamente espaços e pontuações. A pontuação incomum reduz a legibilidade.
11. Diferenciar os links e torná-los fácil de visualizar. Inicie o link com a palavra que transmite a informação, porque geralmente os usuários “batem os olhos” em uma ou duas palavras dos links para compará-los. Não inclua informações obvias ou redundantes em todo link.
12. Não usar instruções genéricas, como “Clique Aqui” como nome de link. Em vez disto use um texto significativo nos nomes de link para informar aos usuários o que obterão quando clicarem. Por exemplo, em vez de dizer “Clique aqui para obter os itens da Layette”, basta dizer “Itens da Layette”.
13. Não use também link genéricos , como “Mais”.
14. Se um link não fizer nada mais do que ir para outra página da Web, como vincular a um arquivo PDF ou acionar um equipamento de áudio e vídeo, aplicativo de mensagens de e-mail ou outro aplicativo, certificar-se de que o link indique explicitamente o que acontecerá. É interessante o uso de ícones para fazer tal explicação.
15. Agrupar itens na área de navegação, de modo que os itens semelhantes fiquem próximos de si.
16. Não disponibilizar diversa áreas de navegação para o mesmo tipo de links. Grupos muito semelhantes podem fragmentar e complicar a interface.
17. Não inclui um link ativo para a homepage na homepage.
18. Não inventar termos para as opções de navegação de categorias. As categorias devem ser diferenciáveis entre si. Se os usuários não entenderem sua terminologia inventada, não conseguirão distinguir as categorias.
19. Usar ícones de navegação somente se ajudarem aos usuários a reconhecer imediatamente uma classe de itens, como novos itens, itens em liquidação ou conteúdo do vídeo.
20. Disponibilizar para os usuários uma caixa de entrada na homepage para inserir consultas de pesquisa, em vez de oferecer apenas um link para uma página de pesquisa.
21. As caixas de entrada devem ser suficientemente grandes para os usuários verem e editares consulta padrão no site. Coloque, pelo menos, entre 25 e 30 caracteres.
22. Não rotular a área de pesquisa com um título, em vez disso, usar um botão “Search” (Busca/Pesquisa), à direita da caixa. Coloque na área superior direita, fora da área dos banners.
23. Não oferecer o recurso “Pesquisar na Web”. Para isso, os usuários irão utilizar seu buscador predileto.
24. Oferecer aos usuários acesso direto às áreas de alta prioridade na homepage.
25. Não incluir ferramentas que não estejam relacionadas com as tarefas que os usuários costumam fazer no site. Por exemplo, não coloque previsão do tempo em um site que não tem nada a ver com notícias de meteorologia.
26. Não oferecer ferramentas que reproduzem funções do navegador.
27. Usar gráficos para apresentar o conteúdo real, não somente para decorar a homepage.
28. Rotular gráficos e fotos se os respectivos significados não estiverem claros no contexto da história que complementam.
29. Editar fotos e diagramas adequadamente, segundo o tamanho de exibição. As fotos e desenhos com muito detalhes não transmitem as informações e parecem superlotados.
30. Evitar gráficos de marca d’água (imagens de plano de fundo com texto sobreposto).
31. Não usar a animação para o único propósito de chamar a atenção para um item na homepage. Raramente, a animação tem um local na página porque distrai a atenção voltada para outros elementos. A animação exige a atenção do usuário e deve ser apresentada isoladamente, uma vez que a homepage tem muitos elementos que também exigem atenção
32. Jamais animar elementos críticos da página, como logotipo, slogan ou título principal.
33. Permitir que os usuários decidam se desejam ver uma introdução animada de se site - não deixar a opção de animação predefinida. Se você realmente carregar automaticamente uma animação sem a solicitação do usuário, ofereça um método fácil e destacado para desativá-la.
34. Limitar os estilos de fonte e outros atributos de formatação de texto, como tamanhos, cores, etc. na página, porque o texto com design muito pesado pode desviar o significado das palavras.
35. Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem o mais legíveis possível.
36. Evitar rolagem horizontal a 800 x 600.
37. Os elementos mais críticos da página devem estar visíveis “acima da dobra” (na primeira tela de conteúdo, sem rolar).
38. Usar um layout fluido para permitir o ajuste do tamanho da homepage a diversas resoluções de tela.
39. Nunca utilizar componentes da interface como partes da tela que as pessoas não deverão clicar.
40. Evitar utilizar diversas caixas de texto na homepage, principalmente na parte superior da página em que as pessoas geralmente procuram o recurso de pesquisa.
41. Usar raramente menus suspensos, principalmente se os itens neles contidos não forem auto-explicativos.
42. Iniciar o título da janela com a palavra que resume a informação (geralmente o nome da empresa).
43. Não incluir o nome de domínio de nível superior, como “.com”, no título da janela, a menos que faça realmente parte do nome da empresa, como em “Amazon.com”. Sufixos como “.com” acrescentam uma palavra desnecessária ao título da janela e geram uma diferença artificial entre a presença de uma empresa na ou fora da Web. Os usuários sabem que estão na Web quando entram em um Website, de modo que não necessidade de um “.com” para dar essa informação.
44. Incluir uma descrição resumida do site no título da janela. Experimente usar o slogan do site, se existir, mas somente se for significativo e em linguagem direta.
45. Limitar os títulos das janelas a não mais do que sete ou oito palavras e a mento de 64 caracteres.
46. Conduzir os usuários à verdadeira homepage quando digitarem o URL principal ou clicarem em um link para seu site. As telas de abertura devem morrer.
47. Evitar janelas pop-up. As janelas adicionais impedem que os usuários acessem o conteúdo do site e, se essas janelas contiverem informações importantes, é provável que os usuários as ignorem, supondo que se trata de anúncios.
48. Manter os anúncios de empresas externas nas bordas da página.
49. Manter os anúncios de empresas diferentes da sua pequenos e mais discretos possíveis em relação ao conteúdo central da homepage
50. Se você posiciona anúncios fora da área de banner padrão, no início da página, rotule-os como publicidade.
51. Não dê.