DIFERENÇAS ENTRE VISIBILITY:HIDDEN E DISPLAY:NONE

De acordo com as especificações do W3C, Visibility:hidden e Display:none tem “aparentemente” a mesma função, “esconder” objetos em uma página, mas com uma única diferença, quando utilizamos visibility:hidden em uma div por exemplo, ela ficará oculta em nossa página, mas o espaço por ela ocupado ainda ficará alí na página, ao contrário de display:none, quando usado além de esconder o objeto, ele some com o espaço ocupado pela mesma também.

Ficou meio confuso? Vamos ver um exemplo:

Usaremos como exemplo o seguinte código CSS:

div {
    border:1px solid #000;
}
.visibility {
    visibility:hidden;
}
.display {
    display:none;
}

E utilizar-mos o seguinte HTML:

1 : Caracterizada como uma div normal
2 : Essa div utiliza visibility:hidden
3 : Caracterizada como uma div normal
4 : Essa div utiliza display:none
5 : Caracterizada como uma div normal

Agora, vejam um exemplo em funcionamento, se notarem, a div de nº 2, que utiliza visibility:hidden não aparece, mas seu espaço ocupado continua alí, e a div de nº 4, que utiliza display:none, também não aparece, e nem seu espaço ocupado. Vocês sabiam disso? Eu não, acabei descobrindo isso aqui.

Autor: Pedro Rogério
Fonte: http://www.pinceladasdaweb.com.br/

Anúncios

Usabilidade, Faça jus ao seu projeto

Salve, salve!!

Peço permissão aos moderadores para falar um pouco sobre usabilidade na web. Nosso maior intuito neste ambiente é compartilhar idéias, conhecimentos, experiências entre outros… contudo vaí aí algumas informações que podem ser úteis para nós desenvolvedores (seja ele iniciante, intermediário ou avançado). O objetivo é mudar comportamentos e fazer com que a usabilidade faça parte de seus futuros websites.
Como webdesign, quero poder oferecer um melhor serviço aos usuários, por isso espero que você também se sinta pronto para agir em seu projeto de design. As maneiras que podem ser tomadas para tornar a vida dos usuários mais felizes são várias. Você poderá utilizar métodos e técnicas de usabilidade, pois muitos são extremamente fáceis de aprender. Além de obter melhorias no seu site estará contribuindo para que os usuários voltem a visitá-lo.
Infelizmente a maioria dos webdesigners ignoram totalmente a usabilidade e criam designs para seu bel prazer ( ou pior, para o prazer do chefe) ao invés de satisfazer as necessidades do usuário.

Que vença a simplicidade!!

POR QUE A USABILIDADE NA WEB?

A usabilidade assumiu uma importância muito maior na economia da Internet.
No desenvolvimento de produto físico tradicional, os clientes só experimentavam a usabilidade quando já tinham comprado e pago. Digamos, por exemplo, que você compre um vídeo cassete e descubra que é difícil acertar a hora, além de não conseguir como programar a gravação de seus programas favoritos. Azar o seu – o fabricante ri enquanto sua conta bancária cresce.

A web não funciona assim. Ela inverte esse quadro. Atualmente, os usuários experimentam a usabilidade de um site antes de se comprometeram a usá-lo e antes de gastarem dinheiro em possíveis aquisições. Vejam como é simples a equação:

:: No projeto de produto e de software, os clientes pagam primeiro e experimentam a usabilidade depois.
:: Na web, os usuários experimentam a usabilidade primeiro e pagam depois.

Fica bem claro por que a usabilidade é mais importante para o webdesign.

CSS E A USABILIDADE

É impossível falar de usabilidade e não falar de CSS. As folhas de estilo em cascata são apenas uma das maiores esperanças de recapturar o ideal da web de separar apresentação e conteúdo. A web é o máximo em termos de sistema multiplataformas e seu conteúdo será apresentado em uma variedade tão grande de dispositivos que as paginas devem especificar o significado das informações e deixar os detalhes da apresentação a uma intercalação (ou “cascata”) de folhas de estilo especificadas pelo site e às preferências do usuário.

Em suma, CSS e usabilidade resulta em simplicidade, a qual deve ser a meta do design da página. Com exceção de nós (desenvolvedores) os usuários raramente encontram-se em um site para desfrutar do design; em vez disso, preferem concentrar sua atenção no conteúdo. É também importante garantir que as páginas sejam perfeitamente visualizadas em uma série de plataformas e que possam ser acessados por pessoas que usam tecnologia antiga.
Garanta que todas as páginas funcionem em browsers e versões de dois anos de idade de todos os plug-ins e outros softwares.

NO FRAMES (ou não use quadros)

A primeira recomendação com respeito a quadros é:
Quadros: diga não.
As pessoas que realmente sabem o que estão fazendo podem às vezes usar quadros para obter um bom efeito, embora até mesmo os designers experientes sejam aconselhados a usar quadros o mínimo possível.
Se insistir no uso de quadros apesar de meu conselho para que faça o oposto, pelo menos forneça uma versão sem quadros para os vários usuários que preferem evitar quadros. Em particular, o conteúdo alternativo pode ser fornecido em uma seção <NOFRAMES> que será exibida aos usuários que desativaram as quadros ou que usam um browser que não ofereça um suporte a quadros.
A versão 2.0 do Netscape foi o primeiro browser a oferecer suporte aos quadros, mas o fez de uma forma terrível, introduzindo um dos piores problemas de usabilidade encontrado na web até agora: o botão Voltar no browser simplesmente não funcionava com os sites com quadros.

Portanto, quebrar o botão Voltar é nada mais nada menos que uma catástrofe em termos de usabilidade.
Felizmente, quase ninguém mais usa o Netscape 2.0; foi um verdadeiro desastre.

O DESIGN DO CONTEÚDO: Mantenha os textos breves

Uma pesquisa mostrou que ler da tela do computador é cerca de 25% mais lento do que ler do papel. Mesmo os usuários que desconhecem essas pesquisas sobre fatores humanos geralmente dizem que sentem desconforto ao lerem texto on-line. Como resultado as pessoas não querem ler muito texto das telas de computador. Portanto, deve-se escrever 50% menos texto – não apenas 25% menos – pois não se trata apenas de velocidade de leitura, mas de uma questão de conforto. Sabemos também que os usuários não gostam de rolar a tela: mas uma razão para manter a brevidade das páginas.
Já que é tão custoso ler texto em telas do computador e já que a experiência on-line parece fomentar uma certa dose de impaciência, os usuários tendem a não ler totalmente fluxos de texto. Invés disso, passam os olhos pelo texto e escolhem palavras-chave, sentenças e parágrafos de interesse enquanto pulam as partes de texto que menos lhe interessam.

Com relação aos títulos de página, em HTML, cada página tem um título especificado na seção de cabeçalho. É importante especificar bons títulos de página, pois os títulos são muitas vezes usados como a principal referencia às páginas. Os títulos de páginas também são usados em muitos menus de navegação como listas de Boockmarks e listas de históricos.

Concluindo, o conteúdo é o foco de atenção do usuário da web. É a razão dos usuários se conectarem e é a primeira coisa que olham quando carregam uma página. O conteúdo de qualidade é um dos dois determinantes mais importantes da usabilidade da web o outro é se os usuários podem achar a página que desejam.

ANIMAÇÃO

As imagens em movimento têm um efeito indiscutível na visão periférica humana. Alguns usuários dizem que acham as animações legais ou indicam que houve muito trabalho de design de site. As animações podem, portanto, ter uma função semelhante às colunas de mármore nos bancos: demonstrar visivelmente o status e a afluência. No entanto, a maioria dos usuários diz que ficam irritados com as animações. Em particular, quase todos os usuários detestam textos em movimento e marquees.
Segundo Jakob Nielsen, a animação é boa para sete finalidades, são elas:
:: Mostrar continuidade nas transições
:: Indicar dimensionalidade nas transições
:: Ilustrar a mudança no tempo
:: Multiplexar o monitor
:: Enriquecer as apresentações gráficas
:: Visualizar estruturas tridimensionais
:: Chamar atenção.

No caso de “chamar atenção” o texto deve ser desenhado por uma animação não-repetível (por exemplo, um texto que desliza da direita para a esquerda, aumentando a partir do primeiro caractere ou crescendo suavemente) e nunca por uma animação continua, pois é muito mais difícil ler texto em movimento do que texto estático. O usuário deve ser atraído ao texto novo pela animação inicial e depois deve se deixá-lo em paz para ler o texto sem outras distrações.

Vá com calma com as animações em seu projeto, pois o feitiço da animação virar contra o feiticeiro.

A WebTV

O futuro está ai e não podemos esquecer disso. A web provocou a introdução de um dos primeiros aparelhos de informação na forma da WebTV em 1996. Antes, a WebTV não era um grande produto sendo de certa forma uma decepção em termos de venda. Na verdade, a WebTV é um produto irado em termos de usabilidade e design. Nos dias atuais com a chagada das telonas em plasma pode se dizer que a qualidade está cada vez mais agradável, e ficar sentado interagindo com a Internet é mais empolgante.

Ao criar para a WebTV para que respeitem os usuários é preciso seguir as seguintes diretrizes:
:: Não utilizar imagens grandes (mais de 544 pixels de largura ou 376 pixels de altura) a menos que ainda funcionem após o redimensionamento automático da WebTV para a área de viso disponível;
:: Reserve o uso de imagemaps para os casos absolutamente necessários;
:: Não inclua texto nas imagens pois os caracteres serão de difícil leitura na tela;
:: Não use um layout com várias colunas, se seu design exigir colunas, use no máximo duas colunas e garanta que funcionem em uma tela de 544 pixels de largura;
:: Divida as informações em um espaço de hipertexto rico com um número maior de nós menores;
:: Se possível faça com que cada unidade seja suficientemente pequena para que caiba em uma única tela da WebTV a fim de eliminar a rolagem;
:: Brevidade: escreva menos texto.

ACESSIBILIDADE PARA USUÁRIOS PORTADORES DE DEFICIÊNCIA

A legislação americana para portadores de deficiências e as leis e regulamentações semelhantes em outros paises muitas vezes exigem acesso igual a sistemas de computadores para os usuários portadores de deficiências. Em particular, haverá freqüentemente uma obrigação legal para facilitar o uso da intranet e Internet por funcionários e usuários deficientes que talvez não sejam capazes de realizar suas tarefas caso não possam acessar os websites da empresa.

Tornar a web mais acessível a usuários com varias deficiências resume-se, até certo ponto, a usar o HTML da forma pretendida: para codificar significado em vez de aparência. Desde que a página seja codificada para o significado, é possível que os browsers alternativos apresentem esse significado de formas otimizadas às capacidades de usuários individuais e, assim facilitem o uso da web por usuários deficientes.

Deficiências visuais
Os problemas de acessibilidade mais sérios, dado o atual estado da web, relacionam-se a usuários cegos e usuários com outras deficiências visuais, posto que a maioria das paginas da web é altamente visual.
Para aumentar a acessibilidade, garanta sempre um auto contraste entre as cores de primeiro e segundo plano e evite padrões de fundo confusos que interfiram na leitura. Qualquer coisa que reduza a legibilidade de seus textos é suficientemente irritante para os usuários com visão perfeita que definitivamente não gostam de ser retardados quando estão na web, mas fundos com texturas ou cores sutis podem ser a gota d´agua que faz com que sua página fique abaixo do limite de legibilidade para um usuário com visão parcial.

Para os desenvolvedores é importante lembrar que, para facilitar os usuários cegos ao passar os olhos no conteúdo, é recomendável enfatizar a estrutura da página através de marcações adequadas de HTML: use <H1> para o cabeçalho de nível superior, <H2> para as principais partes das informações dentro de <H1>, e <H3> e níveis inferiores para divisões ainda mais sutis de informação.

Assim, o usuário cego pode ter uma panorâmica da estrutura de uma página quando <H1> e <H2> forem lidos em voz alta e pode rapidamente pular uma seção desinteressante ao instruir uma leitura de tela a pular para o próximo cabeçalho de nível inferior.

Alem de tornar o texto legível, você também deve oferecer um método alternativo para “exibir” as imagens a pessoas vê-las. A principal solução a esse problema a essa altura é usar o atributo ALT.
Os usuários que não podem ver a foto verão ou ouvirão o texto alternativo “Nome da foto”.

Deficiências auditivas
É rara a situação em que o som é necessário para a compreensão; na maioria das vezes os efeitos sonoros na web são gratuitos – um dos poucos benefícios de design ruim, creio. A usabilidade de um site quase sempre continua a mesma quando o som é desativado, mas com a tendência crescente da multimídia, esse não continuara sendo o caso.

Independente da gratuidade do som ou de sua exigência pela multimídia, crie seu site tendo em mente um público com deficiências auditivas.

Deficiências de fala
No momento, não importa se o usuário da web é capaz de falar já que toda a entrada do computador é feita com um mouse e um teclado. É provável que as várias formas de interfaces com o usuário ativadas por voz fiquem mais populares no futuro para casos em que o uso do teclado seja incomodo ou apenas para oferecer suporte a usuários que prefiram falar os comando em vez de digitá-los.

Será muito mais problemático quando passarmos para interfaces nas quais a fala é a principal ou a única modalidade de entrada. Espero que a maioria dos sistemas de bate-papo logo se torne baseada na fala, já que esta é a forma natural de conversa para a maioria das pessoas.

Qualquer sistema de bate-papo que dependa da fala deve manter a possibilidade de participação de usuários não-falantes através de texto digitado.

Deficiências motoras
Muitos usuários têm dificuldade com movimentos detalhados do mouse e pode também ter problemas em pressionar várias teclas simultaneamente. A maioria dessas questões deve ser tratada por um melhor design de bowser e não deve preocupar os designers de conteúdo, exceto no que tange ao conselho de não criar imagesmaps que exijam o posicionamento extremamente preciso do mouse. Imagine que você tenha de deslocar seu mouse com os pés: leva muito tempo para chegar a um alvo pequeno.

Quaisquer applets que usem dispositivos de interação além do HTML padrão devem ser implementados a fim de permitir a operação sem o mouse. Esses recursos são incluídos como padrão tanto no Java quanto no ActiveX; portanto, é uma mera questão de implementar o código corretamente de acordo com as diretrizes oficiais da Sun Microsistems, Microsoft e outros fornecedores de ferramentas de software.

Deficiências cognitivas
Nos primeiros anos, a web era acessada era apenas por pessoas apenas muito inteligentes que eram pioneiras na tecnologia avançada. Mas, com a crescente popularidade da web, haverá mais usuários medianos e também usuários de inteligência abaixo da média. Para satisfazer esses usuários, será importante aumentar a usabilidade e garantir que o conteúdo seja compreensível em nível de leitura primária.

Uma forma simples de verificar muitos problemas de acessibilidade é acessar seu website em um browser apenas de texto como o Lynx. Se o site parecer bom e funcionar bem nesse browser, provavelmente será razoavelmente acessível para muitos usuários com deficiências.

Por último seria melhor realizar testes de usabilidade com uma série de usuários com várias deficiências, mas já que há tantos tipos diferentes de deficiências para atender, esse não é um conselho muito pragmático, exceto no caso de sites que atendam especificamente a usuários deficientes.

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

SITES RELACIONADOS

Português
Usability
Usabilidade.com
Usabilidade Br
Webinsider >> Usabilidade
Usabilidoido
Blog de Usabilidade
Usabilidade Net
Fator W
Atípico
FechaTAG
Felipe Memória
Alexandre Sadi
Rodrigo Muniz

Inglês
Useit – Jakob Nielsen
Asktog
UsableWeb
Usability first

LIVROS lendo.gif

Português
Imagem do IPB
Usabilidade na Web
Mais informações e onde comprar

Imagem do IPB
Não me faça pensar
Mais informações e onde comprar

Imagem do IPB
Homepage: Usabilidade: 50 Websites Desconstruídos
Mais informações e onde comprar

Imagem do IPB
Projetando Websites
Mais informações e onde comprar

Imagem do IPB
Design para Quem Não é Designer
Mais informações e onde comprar

Imagem do IPB
Design e avaliação de interfaces humano-computador
Mais informações

Imagem do IPB
Design para a Internet: Projetando a Experiência Perfeita
Mais informações e onde comprar

Imagem do IPB
250 Segredos para Web Designers
Mais informações e onde comprar

Inglês
Usability Engineering (The Morgan Kaufmann Series in Interactive Technologies)
Mais informações e onde comprar

Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests
Mais informações e onde comprar

Lembre-se dos usuários ao projetar Websites

Texto original: http://forum.ievolution.com.br

Fonte: Informações extraídas do livro “Projetando Web Sites de Jakob Nielsen”

Entidades de caracteres do HTML 4.01

O HTML 4.01 suporta o conjunto de caracteres ISO 8859-1 (Latin-1,) que contém os caracteres com acentos usados pelas línguas da Europa Ocidental. Os caracteres acentuados da língua portuguesa podem ser todos obtidos usando este conjunto de caracteres.

9.3 Entidades para caracteres do conjunto ASCII e os nomes definidos em HTML

Os caracteres da primeira metade do conjunto ISO-8859-1 (códigos desde 0 a 127) são os mesmos que os caracteres padrão ASCII de 7 BITs. A maior parte destes caracteres pode ser usada directamente sem necessidade de recorrer a entidades porque estão sempre disponíveis em todas as máquinas qualquer que seja a sua configuração.

Os caracteres finais do conjunto ISO-8859-1 (códigos desde 160 até 255) podem ser usados recorrendo a nomes de entidade de carácter definidos em HTML.

Nota: os nomes das entidades são sensíveis ao tipo de letra (maiúscula ou minúscula.)

Resultado Descrição Nome da Entidade Código Numérico
aspas
& “e” comercial & &
< menor do que < <
> maior do que > >

9.4 Entidades para caracteres do conjunto ISO 8859-1 (não ASCII)

Resultado Descrição Nome da Entidade Código Numérico
inserir espaço sem mudar de linha (“non-breaking space”)
¡ ponto de exclamação invertido ¡ ¡
¤ dinheiro ¤ ¤
¢ cêntimo (de dollar) ¢ ¢
£ libra esterlina £ £
¥ yen ¥ ¥
¦ barra vertical descontínua ¦ ¦
§ secção § §
¨ acento diérese (trema, metafonia) ¨ ¨
© direitos de cópia (“copyright”) © ©
ª ordinal feminino ª ª
« abertura de aspas angulares « «
¬ negação ¬ ¬
­ hífen “soft” (pode acontecer uma quebra de linha junto ao hífen) ­ ­
® marca registada ® ®
¯ sinal (acento) mácron ¯ ¯
° graus ° °
± mais ou menos ± ±
² 2 sobreescrito ² ²
³ 3 sobreescrito ³ ³
´ acento agudo ´ ´
µ micro µ µ
parágrafo
· ponto a meia altura · ·
¸ cedilha ¸ ¸
¹ 1 sobreescrito ¹ ¹
º ordinal masculino º º
» fecho de aspas angulares » »
¼ fracção 1/4 ¼ ¼
½ fracção 1/2 ½ ½
¾ fracção 3/4 ¾ ¾
¿ ponto de interrogação invertido ¿ ¿
× sinal de multiplicação × ×
÷ sinal de divisão ÷ ÷
À a grande com acento grave À À
Á a grande com acento agudo Á Á
 a grande com acento circunflexo  Â
à a grande com til à Ã
Ä a grande com diérese Ä Ä
Å a grande com anel Å Å
Æ ae ligados, grandes Æ Æ
Ç c grande com cedilha Ç Ç
È e grande com acento grave È È
É e grande com acento agudo É É
Ê e grande com acento circunflexo Ê Ê
Ë e grande com diérese Ë Ë
Ì i grande com acento grave Ì Ì
Í i grande com acento agudo Í Í
Î i grande com acento circunflexo Î Î
Ï i grande com diérese Ï Ï
Ð eth grande (Islandês) Ð Ð
Ñ n grande com til Ñ Ñ
Ò o grande com acento grave Ò Ò
Ó o grande com acento agudo Ó Ó
Ô o grande com acento circunflexo Ô Ô
Õ o grande com til Õ Õ
Ö o grande com diérese Ö Ö
Ø o grande com traço oblíquio Ø Ø
Ù u grande com acento grave Ù Ù
Ú u grande com acento agudo Ú Ú
Û u grande com acento circunflexo Û Û
Ü u grande com diérese Ü Ü
Ý y grande com acento agudo Ý Ý
Þ thorn grande (Islandês) Þ Þ
ß carácter que representa a ligação sz, minúsculo (Alemão) ß ß
à a pequeno com acento grave à à
á a pequeno com acento agudo á á
â a pequeno com acento circunflexo â â
ã a pequeno com til ã ã
ä a pequeno com diérese ä ä
å a pequeno com anel å å
æ ligação ae, minúscula æ æ
ç c pequeno com cedilha ç ç
è e pequeno com acento grave è è
é e pequeno com acento agudo é é
ê e pequeno com acento circunflexo ê ê
ë e pequeno com diérese ë ë
ì i pequeno com acento grave ì ì
í i pequeno com acento agudo í í
î i pequeno com acento circunflexo î î
ï i pequeno com diérese ï ï
ð eth pequeno (Islandês) ð ð
ñ n pequeno com til ñ ñ
ò o pequeno com acento grave ò ò
ó o pequeno com acento agudo ó ó
ô o pequeno com acento circunflexo ô ô
õ o pequeno com til õ õ
ö o pequeno com diérese ö ö
ø o pequeno com traço oblíquo ø ø
ù u pequeno com acento grave ù ù
ú u pequeno com acento agudo ú ú
û u pequeno com acento circunflexo û û
ü u pequeno com diérese ü ü
ý y pequeno com acento agudo ý ý
þ thorn pequeno (Islandês) þ þ
ÿ y pequeno com diérese ÿ ÿ

9.5 Entidades HTML não pertencentes ao conjunto ISO 8859-1

Resultado Descrição Nome da Entidade Código Numérico
Modeda Euro
Marca para item em lista não ordenada (“bullet”)
Marca comercial (“Trade Mark”)
três pontos (elipse)
plica
″+amp;Prime; plica dupla
aspas (elegantes) do lado esquerdo
aspas (elegantes) do lado direito
→+amp;rarr; seta para a direita
←+amp;larr; seta para a esquerda
Œ ligação OE grande Œ Œ
œ ligação oe pequena œ œ
Š s grande com um caron Š Š
š s pequeno com um caron š š
Ÿ y grande com diérese Ÿ Ÿ
ˆ carácter modificador para acento circunflexo ˆ ˆ
˜ til pequeno ˜ ˜
traço “en dash”
traço “em dash”
aspa esquerda simples
aspa direita simples

Fonte: http://www.artifice.web.pt

Como solucionar Pequenos Bugs em CSS

Artigo muito bom postado pelo Maurivan Luiz Padilha no site MXStudio.

Introdução
Em um mundo perfeito, poderíamos escrever CSS e funcionaria independente dos browsers perfeito. Mas nunca faltaram erros de digitação, navegadores “lindos” e também comportamentos desconhecidos que nos deixam confusos, e muitas vezes sem saber como começar a solucionar os problemas. Irei citar neste artigo alguns passos que podem seguir para eliminar “os bugs” em suas folhas de estilo.

O motivo mais óbvio para ocorrer um erro na página é um erro no código, Para verificar nosso código, podemos utilizar o famoso validador da W3C para checar tanto nosso html como nosso CSS. Uma maneira mais fácil e sensata de fazer é através do plugin Web Developer Tools para Mozilla/Firefox, ou então com a extensão de validação que permite você validar sua página sem a necessidade de estar conectado a rede mundial de computadores (internet)

Muitas vezes é difícil encontrar qual é o problema quando você está visualizando uma página completa, com uma folha de estilos extensa. Aconselho você então a pegar e copiar somente o html e o css que seja referente a seu problema em uma nova página, isto simplificará para você encontrar e solucionar seus problemas.

Pré-Requisitos

Vontade de aprender é considerado fundamental, aprender com os erros é essencial, e um cafézinho expresso para acompanhar 🙂

Objetivo

Aprender pequenos macetes que podem ser úteis em alguns casos, tais quais problemas com altura, largura, margin e padding.

Conteúdo
Examine seus elementos.
Para saber exatamente aonde está o problema, é muito útil inserir bordas de cores em seus elementos, o qual te facilitará perceber dimensões, margens e bordas, e caso seja detectado algum pequeno deslize no tamanho de uma div, pode ser rapidamente resolvido.

Estilos
Para checar que regras você está aplicando a seu elemento, o inspetor DOM do Mozilla Firefox pode ser muito útil.

* Inspetor DOM é uma ferramenta para analisar a estrutura do documento

Cheque para ver se o BUG não é conhecido.

Se já puder identificar exatamente qual é o problema, por exemplo; a div #conteudo se movimenta 3 pixels a esquerda no internet explorer 5.5, enquanto em outros navegadores continua intacta), busque na internet para ver se é um problema comum, no site “Position is everything”, por exemplo, tem uma lista muito completa de bugs que ocorrem no IE, Opera e Mozzila Firefox.

Se por ventura você não encontrar no “Position is everything”, você poderá encontrar em nosso fórum de CSS http://www.mxstudio.com.br/forum/index.php?showforum=7

Experimente!
Tente trocar os valores em sua folha de estilho, zerar, adicionar, para ver como afetam sua página. Pode ser útil colocar as margens e padding zeradas (padding:0; margin:0;).

É muito fácil de realizar alterações com o Notepad++ e com o plugin WebDeveloper Tools, para Mozilla Firefox, que lhe permite visualizar as alterações imediatamente.

Peça Ajuda!
Sempre há gente disposta a lhe ajudar aqui nos fóruns da MXSTUDIO, saiba sempre como explicar seu problema, e colocar um link com a sua página, ou então o codigo de sua página html e sua folha de estilhos para que facilite o trabalho de quem for lhe ajudar. Com certeza irá encontrar alguém disposto!

Agradecimentos
Para este artigo, eu gostaria de agradecer ao imuller que abriu a minha cabeça na introdução.
E também a meu amigo Felipe Nascimento Silva Pena (ecl), que me avisou de um erro ortográfico a ponto de ser corrigido.

Considerações Finais
Neste artigo está explicito alguns macetes para você resolver problemas básicos que podem ocorrer em sua folha de estilo, porém nem todo erro pode ser corrigido apenas com estes macetes!

Para saber mais:

W3C – The World Wide Web Consortium
http://www.w3.org/

Documentos W3C em Português!
http://www.amtechs.com/w3c/

CSS Bug Table
http://www.richinstyle.com/bugs/table.html

CSS contents and browser compatibility
http://www.quirksmode.org/css/contents.html

 

Autor: Maurivan Luiz Padilha – Colunista WEBSTANDARDS do Portal MXSTUDIO

Qualquer dúvida referente à webstandards, pode ser enviado um e-mail para maurivan@mxstudio.com.br ou acesse o nosso fórum!

Onze dicas para trabalhar com CSS (Cascading Style Sheets)

Dicas escritas por Erika Sarti, em 22/01/2007.
Fonte: http://www.infowester.com/

Introdução

Não importa se você é um iniciante na área ou já desenvolveu vários sites: a essa altura, você já está cansado de saber que as folhas de estilo externas são obrigatórias em qualquer projeto. Porém algumas dicas simples são sempre úteis para facilitar nosso trabalho. Veja 11 delas a seguir:

1 – div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.

2 – Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.
3 – id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).

4 – Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}

5 – Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).

6 – Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a
/* aba normal */
{background: #444; color: #FFF; border: 1px #FFF solid;}

#menu ul li a:hover{
/* aba selecionada*/
{background: #FFF; color: #F00; border: #F00 1px solid;}

7 – Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:
/* ************************************ */
/* */
/* Cores usadas no layout */
/* */
/* cinza fundos: #F5F5F5; */
/* cinza bordas: #B6B6B6; */
/* azul link: #336699; */
/* azul lnk ativo: #003366; */
/* */
/* ************************************ */

8 – Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.

9 – Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes… Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.

10 – Não confie na sua memória
Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu uso e recomendo é o CSS – Cascading Style Sheets – Guia de Consulta Rápida, de Luis Gustavo Amaral.

11 – Inspire-se
Sites como o css Zen Garden e o Maujour são ótimos para ter uma idéia das novas tendências. Visitar esses e outros endereços regularmente é recomendável.

Autor: Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em http://www.erikasarti.net.

Estatísticas dos Navegadores pela W3C

Peguei as informações abaixo a abaixo direto do site da W3C, além de estatísticas dos navegadores, Sistemas Operacionais, resolução mais usada, bla bla bla…

Uma coisa interessante é que nesteinicio de ano o Firefox consta com 31.0%, contra 58,6% da M$(ie7 13,3%, ie6 42,3% e ie5 3,0%), ótima notícia 😀

Browser – Estatísticas mês a mês.

2007 IE7 IE6 IE5 Fx Moz S O
January 13.3% 42.3% 3.0% 31.0% 1.5% 1.7% 1.5%
               
2006 IE7 IE6 IE5 Fx Moz N7/8 O
December 10.7% 45.3% 3.4% 30.3% 2.6% 0.2% 1.5%
November 7.1% 49.9% 3.6% 29.9% 2.5% 0.2% 1.5%
October 3.1% 54.5% 3.8% 28.8% 2.4% 0.3% 1.4%
September 2.5% 55.6% 4.0% 27.3% 2.3% 0.4% 1.6%
August 2.0% 56.2% 4.1% 27.1% 2.3% 0.3% 1.6%
July 1.9% 56.3% 4.2% 25.5% 2.3% 0.4% 1.4%
June 1.6% 58.2% 4.3% 24.9% 2.2% 0.3% 1.4%
May 1.1% 57.4% 4.5% 25.7% 2.3% 0.3% 1.5%
April 0.7% 58.0% 5.0% 25.2% 2.5% 0.4% 1.5%
March 0.6% 58.8% 5.3% 24.5% 2.4% 0.5% 1.5%
February 0.5% 59.5% 5.7% 25.1% 2.9% 0.4% 1.5%
January 0.2% 60.3% 5.5% 25.0% 3.1% 0.5% 1.6%
               
2005 IE6 IE5 Fx Moz N7 O8 O7
December 61.5% 6.5% 24.0% 2.7% 0.4% 1.3% 0.2%
November 62.7% 6.2% 23.6% 2.8% 0.4% 1.3% 0.2%
October 67.5% 6.0% 19.6% 2.6% 0.4% 1.2% 0.2%
September 69.8% 5.7% 18.0% 2.5% 0.4% 1.0% 0.2%
August 68.4% 6.3% 18.9% 2.4% 0.4% 0.8% 0.3%
July 67.9% 5.9% 19.8% 2.6% 0.5% 0.8% 0.4%
June 65.0% 6.8% 20.7% 2.9% 0.6% 0.7% 0.5%
May 64.8% 6.8% 21.0% 3.1% 0.7% 0.7% 0.6%
April 63.5% 7.9% 20.9% 3.1% 0.9% 0.4% 1.0%
March 63.6% 8.9% 18.9% 3.3% 1.0% 0.3% 1.6%
February 63.9% 9.5% 17.9% 3.3% 1.0%   1.7%
January 64.8% 9.7% 16.6% 3.4% 1.1%   1.9%
               
2004 IE6 IE5 Moz N3 N7 N4 O7
December 65.5% 9.9% 17.0% 0.2% 1.2% 0.2% 1.8%
November 66.0% 10.2% 16.5% 0.2% 1.2% 0.3% 1.6%
October 67.3% 10.8% 14.7% 0.3% 1.3% 0.3% 1.6%
September 67.8% 11.2% 13.7% 0.3% 1.4% 0.3% 1.7%
August 67.0% 13.0% 12.7% 0.4% 1.4% 0.4% 1.6%
July 67.2% 13.2% 12.6% 0.4% 1.4% 0.4% 1.6%
June 67.6% 13.2% 12.2% 0.5% 1.4% 0.4% 1.6%
May 68.1% 13.8% 9.5% 0.6% 1.4% 0.4% 1.6%
April 68.2% 14.0% 8.5% 0.8% 1.4% 0.6% 1.4%
March 68.2% 14.6% 7.9% 0.8% 1.4% 0.6% 1.4%
February 68.3% 15.2% 7.3% 0.6% 1.5% 0.4% 1.5%
January 68.9% 15.8% 5.5% 0.4% 1.5% 0.5% 1.5%
               
2003 IE6 IE5 Moz N3 N7 N4 O7
November 71.2% 13.7% 7.2% 0.5% 1.6% 0.5% 1.9%
September 69.7% 16.9% 6.2% 0.6% 1.5% 0.6% 1.8%
July 66.9% 20.3% 5.7% 0.6% 1.5% 0.6% 1.7%
May 65.0% 22.7% 4.6% 1.0% 1.4% 0.9% 1.4%
March 63.4% 24.6% 4.2% 0.9% 1.4% 1.1% 1.2%
January 55.3% 29.3% 4.0% 1.2% 1.1% 1.7%  
               
2002 IE6 IE5 AOL N3 N5 N4 IE4
November 53.5% 29.9% 5.2% 1.1% 4.9% 2.0%  
September 49.1% 34.4% 4.5% 1.3% 4.5% 2.2%  
July 44.4% 40.1% 3.5% 1.2% 3.5% 2.6% 0.5%
May 40.7% 46.0% 2.8% 1.2% 2.7% 3.4% 0.7%
March 36.7% 49.4% 3.0% 1.2% 2.4% 4.1% 0.7%
January 30.1% 55.7% 2.8% 1.3% 2.2% 4.4% 1.0%
IE Internet Explorer
Fx Firefox (identified as Mozilla before 2005)
Moz The Mozilla Suite (Safari, Konqueror, Gecko, Netscape)
S Safari (identified as Mozilla before 2007)
O Opera
N Netscape (identified as Mozilla after 2006)
AOL America Online (based on both Internet Explorer and Mozilla)

Browsers com menos de 0.5% não foram listados.


Estatísticas dos OS

Windows XP é o sistema operacional mais popular.
E a familia windows soma 90%, contra os resto de 6,8%(Linux 3,3% e Mac 3,5%).

2006 WinXP W2000 Win98 WinNT W2003 Linux Mac
November 74.9% 8.0% 1.0% 0.4% 1.8% 3.3% 3.5%
October 74.6% 8.9% 1.2% 0.3% 2.0% 3.5% 3.6%
September 74.6% 9.2% 1.4% 0.3% 2.0% 3.5% 3.8%
August 74.4% 10.1% 1.4% 0.3% 2.1% 3.5% 3.6%
July 74.3% 10.1% 1.5% 0.3% 2.0% 3.4% 3.6%
June 74.1% 10.6% 1.6% 0.3% 2.0% 3.4% 3.6%
May 74.2% 10.7% 1.6% 0.2% 2.0% 3.4% 3.6%
April 74.0% 11.2% 1.8% 0.3% 1.9% 3.3% 3.6%
March 72.9% 11.9% 2.0% 0.3% 1.8% 3.4% 3.5%
February 73.3% 12.3% 2.1% 0.3% 1.8% 3.4% 3.6%
January 72.3% 13.1% 2.4% 0.3% 1.7% 3.3% 3.5%
               
2005 WinXP W2000 Win98 WinNT W2003 Linux Mac
December 71.6% 13.6% 2.6% 0.3% 1.7% 3.2% 3.3%
November 71.0% 14.6% 2.7% 0.4% 1.7% 3.3% 3.3%
October 70.2% 15.0% 2.8% 0.4% 1.6% 3.3% 3.2%
September 69.2% 15.8% 3.2% 0.5% 1.7% 3.3% 3.1%
August 66.3% 17.5% 3.2% 0.6% 1.7% 3.3% 2.9%
July 65.3% 17.7% 3.9% 0.6% 1.6% 3.5% 3.0%
June 64.9% 19.1% 3.6% 0.7% 1.5% 3.5% 3.0%
May 64.5% 19.4% 3.9% 0.8% 1.4% 3.3% 2.9%
April 64.0% 19.7% 4.1% 0.8% 1.4% 3.3% 2.9%
March 63.1% 20.2% 4.7% 0.9% 1.4% 3.2% 3.0%
February 62.0% 21.1% 5.1% 0.9% 1.3% 3.2% 2.9%
January 61.3% 21.6% 5.3% 1.0% 1.2% 3.2% 2.8%
               
2004 WinXP W2000 Win98 WinNT Win95 Linux Mac
December 59.8% 23.5% 5.4% 1.1% 0.1% 3.1% 2.7%
November 59.1% 23.7% 5.6% 1.2% 0.1% 3.1% 2.7%
October 57.8% 25.0% 6.0% 1.3% 0.2% 3.1% 2.6%
September 55.9% 26.2% 6.4% 1.5% 0.2% 3.1% 2.6%
August 53.2% 28.1% 7.0% 1.8% 0.2% 3.0% 2.5%
July 52.5% 28.4% 7.5% 1.9% 0.2% 3.1% 2.4%
June 51.2% 29.6% 8.0% 2.0% 0.3% 2.9% 2.5%
May 51.0% 29.6% 8.2% 2.0% 0.3% 2.9% 2.5%
April 49.7% 30.2% 8.7% 2.2% 0.3% 2.7% 2.5%
March 48.0% 31.1% 9.4% 2.4% 0.4% 2.6% 2.4%
February 46.0% 32.8% 9.5% 2.9% 0.4% 2.6% 2.5%
January 44.1% 33.6% 10.4% 3.0% 0.4% 2.7% 2.4%
               
2003 WinXP W2000 Win98 WinNT Win95 Linux Mac
December 43.6% 35.2% 10.5% 3.4% 0.4% 2.7% 2.3%
November 42.6% 36.3% 10.9% 3.5% 0.4% 2.6% 2.2%
October 39.4% 37.8% 11.5% 4.0% 0.5% 2.5% 2.1%
September 38.0% 37.9% 12.1% 4.1% 0.5% 2.4% 2.0%
August 36.3% 39.9% 12.6% 4.6% 0.5% 2.4% 2.0%
July 33.9% 40.6% 12.6% 5.3% 0.6% 2.3% 1.9%
June 32.8% 40.4% 13.4% 5.4% 0.6% 2.3% 1.8%
May 31.4% 41.0% 13.9% 5.8% 0.7% 2.2% 1.8%
April 30.8% 40.9% 14.7% 6.0% 0.7% 2.1% 1.8%
March 29.1% 41.9% 14.8% 6.6% 0.8% 2.2% 1.8%

Plataformas com menos de 0.5% não foram listadas.


Resolução de tela(display)

A tendência atual é que mais e mais computadores estão usando um tamanho de tela de 1024×768 pixels ou de maior:

2006 Higher 1024×768 800×600 640×480 Unknown
July 19% 58% 17% 0% 6%
January 17% 57% 20% 0% 6%
           
2005          
July 14% 55% 25% 0% 6%
January 12% 53% 30% 0% 5%
           
2004          
July 10% 50% 35% 1% 4%
January 10% 47% 37% 1% 5%
           
2003          
July 8% 43% 44% 2% 5%
January 6% 40% 47% 2% 5%
           
2002          
October 6% 38% 49% 2% 5%

Atenção senhores desenvolvedores: “Existem muitos usuários com resoluções de 800×600“.


Profundidade de cor

A tendência é que a quantidade de cores irá aumentar com as novas dispositivos, mais ainda temos equipamentos(ou computadores muito velhos) que usam 256 cores.

2006 16,777,216 65,536 256
January 81% 16% 3%
       
2005      
July 77% 20% 3%
January 72% 25% 3%
       
2004      
July 69% 28% 3%
January 65% 31% 4%
       
2003      
July 55% 40% 5%
January 51% 44% 5%
       
2002      
October 49% 46% 5%

Ler mais sobre a exposição das cores


Estatísticas da utilização do JavaScript

Não há nenhuma tendência absolute sobre o uso do Javascript. Alguns usuários têm o Javascript do seu navegador desabilitado ou simplesmente alguns browsers não suportam Javascript:

2006 JavaScript On JavaScript Off
January 90% 10%
     
2005    
July 90% 10%
January 89% 11%
     
2004    
July 90% 10%
January 92% 8%
     
2003    
July 89% 11%
January 89% 11%
     
2002    
October 88% 12%
 

Para ver as estatísticas completas, acesse W3C