Os Padrões Brasil e-Gov são recomendações de boas práticas agrupadas em formato de cartilhas com o objetivo de aprimorar a comunicação e o fornecimento de informações e serviços prestados por meios eletrônicos pelos órgãos do Governo Federal. (portal e-Gov)

No mês de junho foi lançado a Cartilha de Redação Web. O arquivo está disponível em .pdf para download e conta com 49 páginas, separados por capítulos. Tudo muito organizado e bem escrito, além de uma linguagem simples. A idéia é que sirva de guia na hora de criar textos voltados para o mundo digital. Textos estruturados, com informações clars e eficazes.
Além desta, temos outras cartilhas disponíveis como a de Codificação e o Guia de Administração. Outras estão sendo desenvolvidas como a de usabilidade, design e arquitetura de conteúdo e um modelo de arquivos base. A de usabilidade e a de design eu espero ansiosamente. Vai ser interessante saber quais as “normas” que o governo acha mais adequado para a dispobilização de conteúdo na web.
Acho fantástica essa iniciativa do governo. Afinal de contas a internet hoje é um dos meios de comunicação mais influentes e importante da nossa era. Ao tomar esta atitude, o Governo brasileiro mostra uma preocupação com a qualidade da informação que será passada para os cidadãos, já que uma das preocupações é justamente na padronização dos sites governamentais.

Abaixo segue a lista das cartilhas disponíveis para download:

• Cartilha de Codificação
• Cartilha de Redação Web
• Guia de Administração

Enquanto isso, aguardamos ansionamente as cartilhas de Usabilidade, Design e Arquitetura de Conteúdo.

1. Ignorando a compatibilidade entre navegadores

Este é provavelmente o problema número 1 com desenvolvimento web. Já que você tem que ter layouts que têm a mesma aparência, não importa qual browser os seus visitantes utilizam para visualizar a página. Este fato pode, por vezes, parece ser a causa mortal de sua existência: há diferenças fundamentais na forma como o Internet Explorer visualiza uma página versus Firefox. Embora não seja tão má como se costumava ser, há ainda muita diferença entre os navegadores.
É fácil para desenvolvedores de web desenvolver um layout no seu navegador favorito e sem se preocupar com a aparência que terá em outros grandes navegadores, como muito provavelmente você não verá as diferenças.(Eu sou um grande agressor do presente. Às vezes eu vou fazer o layout do site no Firefox e esqueço de checar no IE antes de terminar!) Embora existam alguns métodos comprovados e verdadeiros para ajudar a salvaguardar o seu browser para diferentes renderizações de layouts, a melhor forma de garantir que tudo está em perfeitas condições é só usar o Browsershots. Browsershots dá uma imagem exata do que se parece com o seu site em vários browsers e em plataformas diferentes, permitindo a você ter certeza que nada parece errado em um navegador.

2. Não se importar com pequenas resoluções

Embora um bom número de nós desenvolvedores web têm grandes monitores em seus computadores – e são muito orgulhosos com isso – uma boa parte dos visitantes do seu site talvez não. Você pode verificar isso em programas de análise (o Google Analytics faz isso maravilhosamente bem) para ver qual a resolução dos seus visitantes. No entanto, existe um mundo de diferença na forma de um projeto aparece numa resolução 1024×768, por oposição a uma resolução 800×600. Você pode fazer um lindo design, porém inútil.
Contabilidade para pequenos navegadores, significa que todos os seus visitantes estão felizes ao encontrar um design perfeito e a informação de que necessitam.

3. Não considerar frameworks

Se você está desenvolvendo um layout CSS a partir do zero, você pode querer perguntar-se porquê. Assim como não há nada novo sob o sol, o mesmo acontece com o CSS. São muitos os quadros CSS lá fora, como Blueprint quadro e os 960 CSS Framework. Estes são criados para ajudar você a criar layouts à prova de bala, sem ter de começar algo do zero. Estes esquemas têm cruz-browser compatibilidade e foram rigorosamente testadas. Realmente, a menos que você esteja fazendo algo que precisa ser totalmente radical pantloads de código personalizado, basta usar um quadro CSS.
Por quê reinventar a roda?

4. Não utilizando classes genéricas

Ele pode ser bastante fácil não pensar no futuro quando estamos desenvolvendo sites. Muitas vezes nós o nomeamos nossas CSS Classes com algo diferente cada vez que desenvolvemos um site, por oposição a fazer uma simples classe CSS que podemos reutilizar repetidamente ao longo do nosso projeto, sem ter que desenterrar o que usou antes. Isto irá assegurar que o nosso site premanecerá constant durante todas as páginas.

Você pode usar uma classe generica como:
(ps: o duplo ‘right’ é resultado de um bug no visualizador do nosso código. O código correto é .right {float:right}, claro.)

Para fazer as coisas floating à direita quando vc quiser, basta colocar uma ID como:

Eu uso geralmente pelo menos 3 classes genericas quando estou construindo um site:

5. Não validar o HTML

Aposto que você não sabia que a validação de seu HTML poderá também afetar o seu CSS, não é? Bem, ela pode. Primeiro e acima de tudo, você não pode validar o seu CSS até ter HTML válido. Em segundo lugar, há muitos casos que poderiam ser o HTML que está causando os seus problemas e não o código CSS. Muitas vezes pensamos que o nosso CSS altera o layout quando na verdade é um pouco de HTML malformados que ferra nosso layout. Uma DIV aberta aqui, outra class errada ali… ele poderia ser qualquer coisa. Verifique se o seu HTML está validado antes de você tentar diagnosticar um problema CSS.

6. Não validar o CSS

Eu costumava incomodar constantemente um amigo quando tinha problemas com o CSS. E ele sempre, pacientemente, sempre me perguntava: “Você validou o CSS? Se não, Qual é o erro?”. Não demorou mto pra eu aprender a validar o CSS antes de pedir ajuda.
Se você tiver validado o código CSS, as probabilidades de se ter um CSS compatível com todos os browsers é muito maior.

7. Usar imagens grandes como background

Muitas vezes, novos designers usam imagens superdimencionadas em seus layouts. Por exemplo, uma imagem de 3000px X 5000px para não ter problemas com eventuais resoluções. Em vez de usar uma imagem muito grande, eles poderiam usar uma imagem pequena e repetí-la através do CSS como num passe de mágicas!
A diferença é enorme: em vez de carregar uma imagem de 200kb, você carregará apenas uma imagem de alguns bytes.

Se você tiver uma imagem de fundo muito grande, você estará perdendo de 2 maneiras?

1. Uso desnecessário de banda;
2. O usuário esperará mto mais tempo para carregar a imagem de fundo.

Às vezes, grandes imagens são inevitáveis, especialmente com a recente tendência de desenhar esquemas ilustrativos na web. No entanto, repetir imagens ou cores sólidas no fundo é a melhor opção.

8. Usar CSS para tudo

Quanto as pessoas aprendem sobre uma tecnologica, elas ficam mto excitadas sobre isso e querem usar isso para tudo, mesmo quando essa opção não é a melhor para o seu projeto.
Por exemplo, mtas vezes é muito mais fácil usar tabelas para organizar o conteúdo do que criar um layout baseado em CSS com floatings e DIV’s. Nós temos que nos lembrar a ração do porque usar essas tecnologicas, como o CSS é porque ela deve acelerar o desenvolvimento. Quanto isso começa a nos atrasar, talvez estejamos indo pelo caminho errado.

9. Usar CSS inline (no HTML)

Este é o pecado original de desenvolvedores web, e isso acontece mais do que você gostaria de saber. Se você está construindo um projeto, quase sempre irá optar por manter o seu CSS e HTML separados. Isso garante que quando (aviso prévio, eu não disse “se”), você decidir mudar o design do site, você não terá que cavar através do HTML de cada layout e encontrar os malditos CSS anexado a um elemento inline.

Ao invés de usar este:

Você deve mover o estilo para uma folha de estilo externa como este:

CSS inline quase sempre deve ser evitado. É fácil de usar e ótimo para testes, mas que provavelmente você não irá querer isso em seus códigos.

10. Utilizar muitos arquivos

Você já viu um layout com 12 CSSs diferentes anexados a ela? É um pesadelo para qualquer pessoa tentar fazer alterações em seu layout. Não só isso, diminui o tempo de processamento de cada ficheiro, como o navegador tem de fazer um pedido por cada um. É melhor usar um esquema simples que usa 1 ou 2 ficheiros de CSS. O tempo de analisar 12 processos contra um único arquivo é bastante significativo. Não só isso, você economizará o próximo fulaninho que terá que fazer as mudanças em seu layout com um monte de problemas.
Ninguém quer abrir 12 arquivos para fazer um simples, site-wide mudar!

Artigo traduzido e adaptado para o portugues (http://nettuts.com/articles)

Para designers:

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitora o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

Pixel Perfect é integrado ao Firebug (uma outra extensão inegrada ao Firefox) que permite ao webdeveloper e designers a sobrepor, com facilidade, uma imagem do website (layout) sobre a versão HTML para que seja feita uma comparação minuciosa sobre os detalhes e diferenças entre a versão web e a versão original (imagem).
https://addons.mozilla.org/en-US/firefox/addon/7943

Font Find

Basta destacar um único elemento (por exemplo, um parágrafo ou uma palavra), clicar com o botão direito e selecione “Font Finder”, e será informado qual o CSS Styling utilizada do elemento.
https://addons.mozilla.org/en-US/firefox/addon/4415

MeasureIt

Desenhe a uma régua para obter a largura e a altura, em pixels, de quaisquer elementos em uma página web.
https://addons.mozilla.org/en-US/firefox/addon/539

FireShot

FireShot é uma extensão do Firefox que cria screenshots de páginas web (integralmente ou apenas parte visível). Ao contrário das outras extensões, este plugin fornece um conjunto de ferramentas de edição e anotação, o que permite aos usuários capturar página, modificar e inserir textos, gráficos e anotações.
A captura pode ser:

1. Salvos em disco (nos formatos PNG, GIF, JPEG ou BMP);
2. Impressa;
3. Copiado para a área de transferência;
4. Enviado por e-mail.

https://addons.mozilla.org/pt-BR/firefox/addon/5648

Para Developers

IETab

Incorpora o Internet Explorer nas abas do Mozilla / Firefox.
https://addons.mozilla.org/en-US/firefox/addons/versions/1419

Web Developer

Adiciona um menu e uma barra de ferramentas com várias ferramentas importantes e úteis para desenvolvedores web.
https://addons.mozilla.org/en-US/firefox/addon/60

Firebug

Firebug disponibiliza ferramentas de desenvolvimento ao seu alcance enquanto você navega. Você pode editar, depurar e monitorar o CSS, HTML, JavaScript em qualquer website.
https://addons.mozilla.org/en-US/firefox/addons/versions/1843

Pixel Perfect

Pixel Perfect é integrado ao Firebug (uma outra extensão inegrada ao Firefox) que permite ao webdeveloper e designers a sobrepor, com facilidade, uma imagem do website (layout) sobre a versão HTML para que seja feita uma comparação minuciosa sobre os detalhes e diferenças entre a versão web e a versão original (imagem).
https://addons.mozilla.org/en-US/firefox/addon/7943

HTML Validator 0.8.5.2

Valida codigos HTML dentro do Firefox. O número de erros em suas páginas HTML é vista na forma de um ícone na barra de status enquanto navega.
https://addons.mozilla.org/en-US/firefox/addon/249

Validaty

Proporciona um botão para validas páginas usando validator.w3.org
https://addons.mozilla.org/en-US/firefox/addon/2609

FireFTP

É de graça, segura plataforma FTP para seu Firefox que proporciona fácil e intuitivo acesso à Servidores FTP.
https://addons.mozilla.org/en-US/firefox/addons/versions/684

Fonte: www.pinceladasdaweb.com.br