Documento de Especificações para Desenvolvimento Web

Por Bruno Carlos

Abril 20, 2008

Para desenvolver um layout para um WebSite não basta pegar numa qualquer ferramenta de Edição Web e começar a seleccionar umas tabelas, colocar imagens, formatar cores, na esperança de que no final tudo fique bem… O pensamento “faço agora uma coisa rápida e depois melhoro” não é positivo.

A elaboração de um site como qualquer aplicação necessita de passar por diferentes fases antes do seu lançamento: Requisitos, Elaboração, Construção e Lançamento. Obviamente que poderão existir outras sub-fases, como Análise Funcional, Análise Técnica, Desenho Técnico, mas aí entraríamos por uma questão de metodologias, que não é objectivo do presente artigo.

Em traços gerais a fase de Requisitos concentra-se na identificação, especificação e descrição dos requisitos do site, ou seja as necessidades que o sistema deve cumprir. Na fase de Elaboração são definidos os diferentes módulos e como o Site se deverá comportar. São também definidos os guias para o desenho, código e convenções dos nomes assim como o estilo e recursos a utilizar na construção do site. Na fase de Construção situa-se toda a fase de desenvolvimento, construção do design, programação do sistema, montagem do conteúdo e testes. Finalmente o Lançamento (Deploy ou simplesmente Entrada em Produção) é a fase em que o Site é disponibilizado ao utilizador final, por norma engloba formação e divulgação.

Este artigo procura focar-se na elaboração do documento que define os guias para o desenho, código e estilo que toda a equipa de desenvolvimento deverá seguir. Portando-se assim como um documento de orientação.

Poderão fazer o download do documento em formato PDF.

1. Standards do Código

1.1. Validação

São definidas as especificações segundo as quais o site deverá ser desenhado por exemplo XHMTML 1.0 Transitional e CSS2.1 disponibilizas pelo W3C (World Wide Web Consortium). Todas as páginas necessitam de ser validadas segundo estas especificações.

1.2. Declaração DOCTYPE

Para estar de acordo com o ponto 1.1. é necessário que todas as páginas do site sejam iniciadas com a declaração DOCTYPE.

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.3. Acessibilidade

É incompreensível que nos dias de hoje ainda existam webdesigners que não têm a mínima preocupação com a acessibilidade dos sites que produzem. Lembro que existem leitores de ecrãs para deficientes visuais, teclados virtuais para portadores de deficiência motora ou com dificuldades de coordenação motora, e sintetizadores de voz para pessoas com problemas de fala. Assim é necessário respeitar as recomendações do W3C, que visam permitir que todos possam ter acesso à informação nos websites, independentemente de terem alguma deficiência ou não. Assim recomenda-se respeitar as regras de acessibilidade Web disponíveis no W3C, costumo utilizar o site Tawdis para realizar uma análise aos sites que produzo, deste modo é possível avaliar o nível de acessibilidade: A, AA ou AAA, o primeiro garante os requisitos mínimos de acessibilidade e o último garante um nível de acessibilidade máximo.

1.4. Browsers

É muito complexo produzir um layout que seja visualizado da mesma forma em todos os Browser e/ou versões destes. Assim costumo fazer uma lista de Browsers e o nível de suporte mínimo que quero garantir:

Não Suportado - Browsers com muitos bugs e que já não são suportados.
Parcialmente Suportado - Browsers antigos, apesar de não suportar oficialmente o conteúdo presente deverá ser visualizado de forma correcta
Suportado - Browsers antigos mas ainda bastante populares. Todo o conteúdo e funcionalidades necessitam de funcionar com degradação minima.
Browsers Alvo - Browser actuais e muito populares. Todo o contéudo e funcionalidades necessitam de funcionar como pretendido.

Exemplo:

Browsers Alvo: IE6+, Firefox 2.x, Safari 3.x, Opera 9.x
Suportado: IE5.5, Opera 8.x, Firefox 1.x
Parcialmente Suportado: IE5.0, IE4.0, IE5.x/Mac
Não Suportado: IE4.0/Mac

1.5. Character Set

Por norma utilizo o Unicode UTF-8 character set.

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Todos os caracteres especiais devem ser especificados através do correcto nome da entidade ou do equivalente Unicode de modo a que a página possa ser processada correctamente através de browsers.

1.6 Título, Palavras-Chave e Descrições

Para permitir uma navegação mais intuitiva e acima de tudo melhorar o ranking nos motores de busca, todas as páginas necessitam de contar com um título, descrição e palavras-chave. De preferência estes elementos devem ser criados dinamicamente, ou seja através de um Gestor de Conteúdo.

Lembrar que o título deve ser simples, descritivo e distinto. Definir um template para o título:

<title>[Site] - [Secção]:[Página]</title>

A descrição da página deve resumir o conteúdo e o propósito da página em poucas palavras.

<meta name="Description" content="Listagem das diferentes distribuições Linux." />

As palavras-chave devem ser utilizadas para adicionar sinónimos e significado adicional a uma página, não devem ser utilizadas para adicionar palavras que não se encontram associadas ao conteúdo apresentado.

<meta name="keywords" content="linux, open source, sistema operativo" />

1.7. Texto Alternativo para as Imagens

O texto alternativo é OBRIGATÓRIO para cada elemento imagem de um site. Este texto deve fornecer descrição adequada do conteúdo da imagem. Como estamos a falar de conteúdo este deve ser igualmente criado, sempre que possível, pelo gestor de conteúdo.

<img src="/img/xxxx.gif" mce_src="/img/xxxx.gif" alt="Logotipo da Distruição Debian" width="xx" height="xx" />

1.8. Links

O texto dos links deve ser único e deve descrever o destino do link. Ou seja evitar links como “clique aqui” ou “Mais”.

<a href="maisdistribuicoes.php" mce_href="maisdistribuicoes.php">Ver Mais Distribuições Linux</a>

Para além disso Links que abram numa nova janela devem ser evitados, no entanto se existir uma razões a nível de usabilidade para isso, o link deve informar o utilizador.

<a href="ajuda.php" mce_href="ajuda.php">Ajuda (abre numa nova janela)</a>

Links para documentos disponíveis para download - como PDFs - devem conter o tamanho do ficheiro, formato e o facto de que vai ser feito um download.

<a href="listagem.pdf" mce_href="listagem.pdf">Download da Listagem das Distribuições Linux no formato PDF (32KB)</a>

Também se aconselha a fornecer informação adicional, como tool-tip, através do atributo title.

<a href="noticias.php" mce_href="noticias.php" title="Arquivo de Notícias">Ver mais Notícias</a>

1.9. HTML com Relevância

Utilizar código HTML relevante e não apenas de apresentação. Os motores de pesquisa adoram estas tags pois assim conseguem avaliar a informação mais relevante num site, por exemplo:

h1, h2, hx
ul, ol e dl
strong e em
blockquote e cite
fieldset, legend e label

1.10. Abreviaturas e Acrónimos

Abreviaturas e Acrónimos devem ser marcados e definidos na primeira vez que surgem em cada página.

<abbr title="UK">United Kingdom</abr>

<acronym title="NATO">North Atlantic Treaty Organisation</ acronym >

1.11. Tabelas

As tabelas não devem ser utilizadas em momento algum para o layout de uma página, são reservadas unicamente para a apresentação de dados. Procurar utilizar elementos e atributos com significado: <th>, <td>, <thead>, <tbody> e <tfoot> assim como summary, id e headers.

2 Estilo

Nesta secção devem ser colocados os detalhes utilizados no site.

2.1. Fontes
2.2. Cores
2.3. Imagens Inline
2.4. Estilo dos Cabeçalhos
2.5. Estilo dos Links
2.6. Classe de Erros
2.7. Classe de Formulários
2.8. Classe de Caixas Informativas

3 Recursos

Finalmente devem ser disponibilizados recursos genéricos como a discrição dos ficheiros HTML e CSS, Templates gráficos (Gimp, Photoshop) e outros recursos do código.

3.1. Templates Gráficos

Página Inicial
Página de Login
Página de Listagens
Página de Detalhe

3.2. Templates HTML

Templates que devem ser utilizados para construir qualquer página do site.

Página Inicial
Página Login
Página de Listagens
Página de Detalhe

3.3. Ficheiros CSS

Layout - O aspecto da estrutura da página. Este ficheiro é o que menos modificado, apenas é alterado que a estrutura da página for alterada.
Geral - Cores, Fontes, tudo o que não seja estrutural.
Formulários - Estilos dos formulários. Normalmente apenas coloco estes estilos num ficheiro separado se existirem muitos formulários e de diferentes tipos.
Print - Estilo para Impressão.

3.4. Links Úteis

Normalmente são colocados aqui alguns links úteis, por exemplo para o Prototype.

Ficheiro de Exemplo

Download do ficheiro com as especificações para desenvolvimento Web no formato PDF (19KB)

Partilhar esta Entrada