Recomendações para criação de Home Pages

Departamento de Informática em Saúde

Setor de Editoração e Publicação Web

Recomendações para criação de Home Pages

Estas normas foram elaboradas pelo Setor de Editoração e Publicação Web do Departamento de Informática em Saúde da Universidade Federal de São Paulo, para facilitar a criação de páginas neste servidor.

Uso do logo da UNIFESP
O logo da Unifesp com nome do Setor/Disciplina/Departamento, seguido do nome da Universidade, endereço, telefone, fax, etc., deve aparecer no topo da primeira página. O logo deve conter o link para a página da Unifesp.
(Veja o exemplo acima)

O logo padrão está disponível em dois tamanhos, para utilização nas páginas dos Departamentos, Setores, Centros, Núcleos, etc., da Unifesp.

logo_epm.gif - grande (70x85 pixels), fundo claro (4Kb)
logo_esc.gif - grande (70x85 pixels), fundo escuro (4Kb)
logo1p.gif - pequeno (33x40 pixels), fundo claro (2Kb)
logo5p.gif - pequeno (33x40 pixels), fundo escuro (2Kb)

Recomendações para informações contidas no "tag" <head>
O titulo da página, que aparece na barra de títulos do Netscape ou Explorer, deve ser completo e sem abreviaturas. Ao adicionarmos essa página no Bookmark ou em Favoritos esse título será gravado no arquivo do usuário e também será utilizado pelos sites de busca, para indexação da página.

Ex.: <head>

<title>Departamento de Informática em Saúde - Universidade Federal de São Paulo - EPM</title>

</head>

Informações adicionais de "meta tags" devem ser incluídas para a indexação da página

Ex.: <meta name="author" content="Departamento de Informática em Saúde - Universidade Federal de São Paulo">

Recomendações para o rodapé
No rodapé deve constar a data da última atualização e o e-mail (com link) do responsável pela página ou do setor para que o usuário possa entrar em contato.

Pode ser usado um "alias" como referencia (ex.: nomedapagina@setor.epm.br). Para abrir a conta de e-mail entre em contato com o Laboratório de Rede do Departamento de Informática em Saúde, ou com o administrador da sua sub-rede local.

Use a data no formato internacional para reconhecimento em qualquer idioma, por exemplo 30 Set 2000 ao invés de 30/09/00.

Estatística de acesso à página - Está disponível no formato que mostra os acessos internos, externos e geral (tabela)

Estatísticas de acesso a esta página.

Coloque no htm a linha:

Obs.: A Estatística só será vista quando a página estiver no servidor da Unifesp

Recomendações genéricas
A home page deve ser do tamanho da área do browser, sem necessitar de barras de rolagem. Considere a resolução mais usada pelo seu público alvo. Ainda existem máquinas que trabalham com resolução de 640 pixels de largura por 480 pixels de altura. Leve em conta a largura de 610 pixels para que não seja necessária a barra de rolagem horizontal.

Páginas extensas (+/- 10 telas) devem ser dividas em arquivos menores e devem começar com uma página de índice, com links para os tópicos. Coloque um sistema de navegação em cada página para permitir que o usuário faça seu próprio percurso.

Ex.:

página anterior

Home Page

próxima página

índice

Não use "página em construção." Todos sabem que a Web é um meio dinâmico e as páginas estão sempre "em construção."

Fontes
Ao escolher o tipo de letra da página, lembre-se que o computador do usuário pode não ter as mesmas fontes que o seu. A fonte Times New Roman é default tanto no Netscape como no Explorer, porém existem outras fontes que são populares como Arial e Verdana. Use tamanho 2 (10 pontos) para o texto, 3 (12 pontos) para subtítulos e 4 (14 pontos) para títulos.

Ex.: tamanho 4 para títulos

tamanho 3 para subtítulos

tamanho 2 para texto

tamanho 1 para notas de rodapé

tamanho 4 para títulos

tamanho 3 para subtítulos

tamanho 2 para texto

tamanho 1 para notas de rodapé

Cores
Fontes escuras sobre fundo claro facilitam a leitura e não cansam a vista. As cores não aparecem com a mesma tonalidade em todos os monitores e todas as plataformas. Não há nada de errado em usar letras pretas em fundo branco e a aparência será igual em todos os equipamentos. Se textos coloridos forem importantes, consulte a paleta Web de 216 cores . Há monitores que usam apenas 256 cores. Use as cores da tabela abaixo caso seu público-alvo esteja nesta categoria.

#000000

#FFFFFF

#008000

#800000

#808000

#000080

#800080

#008080

Black

White

Green

Maroon

Olive

Navy

Purple

Teal

#808080

#C0C0C0

#00FF00

#FF0000

#FFFF00

#0000FF

#FF00FF

#00FFFF

Gray

Silver

Lime

Red

Yellow

Blue

Fuchcia

Aqua

Formatação de parágrafos

O formato justificado deixa a página mais organizada e é adequado a parágrafos longos.

Ex.: alinhamento do parágrafo

Quando usar lista de tópicos com marcadores, o alinhamento à esquerda mantém as palavras e os marcadores no lugar certo.

Ex.: <ul type="disc">

<li>primeiro item</li>

<li>segundo item</li>

<li>terceiro item</li>

</ul>

primeiro item
segundo item
terceiro item

Imagens
As imagens devem ter o tamanho mínimo possível em Kb. Considere que para uma conexão discada, usando um modem de 56,6k, a velocidade estimada para download é de 3Kb/segundo. Dê preferência a um formato de maior compressão da imagem como JPG, ao invés do GIF. Inclua sempre os atributos de tamanho da imagem (width e height) para que o browser reserve a área necessária, diminuindo o tempo de carga da página.

Ex.: <img src="/images/unilogpt.gif" width="62" height="82" border="0">

Use a paleta Web de 216 cores (Web-safe colours) para que as imagens tenham a mesma aparência em qualquer plataforma e em qualquer resolução.

Para que os browsers sem imagem possam mostrar alguma informação sobre a figura, coloque o atributo alt no tag <img> com uma breve descrição da imagem.

Ex.: <img src="images/epm.jpg" alt="logo Unifesp">

GIFs animados podem distrair a atenção do usuário, use-os com muito cuidado.

Imagem de fundo (background) tanto pode atrair quanto confundir a atenção do usuário, se o browser não carregar o background o texto contrastante sobre a cor default do browser pode não aparecer.

Vídeo e áudio
Ao incluir vídeo ou áudio na página coloque ao lado a informação do tamanho do arquivo para que o usuário possa estimar o tempo para download.

Coloque também o link para a página do "plug-in" necessário.

Links
Use sempre que possível links relativos, somente com o nome do arquivo, para as páginas do site da Unifesp.

Ex.: novapasta/pagina2.htm (um nivel acima)

../pagina1.htm (um nivel abaixo)

Use links absolutos, com o protocolo e nome do host, para páginas externas.

Ex.: http://www.externo.br/pagina.htm

Quando usar links em elementos gráficos use o atributo alt do tag <img> para indicar o destino da ação

Ex.: <a href="../index.htm"> <img src="images/epm.jpg" alt="homepage da Unifesp">

Evite usar a palavra "Retorno" em links, o usuário pode ter entrado por outro caminho e não saber para onde vai retornar. Seja mais informativo e preciso.

Ex.: <a href="../index.htm"> <img src="images/botaovolta.jpg" alt="página anterior">

Não coloque "clique aqui", explique a ação do clique. Por exemplo, "mais informações sobre o curso"

Frames
Frames são interessantes para apresentar conjuntos de páginas com um índice fixo para a navegação. Além disso, torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do browser. Permite uma facilidade de navegação mantendo estática algumas informações enquanto outras mudam. Entretanto, é causa de vários problemas. Ao adicionar a página que você está ao Bookmark ou aos Favoritos, você estará guardando somente a página inicial e não a que você está vendo. Além disso, dificulta a indexação nos sites de busca e portanto as páginas não são encontradas e nem são "vistas" pelos browsers mais antigos, os quais não suportam frames.

Os frames podem ser substituídos, em quase todas as situações, por tabelas que são mais fáceis de codificar, manter e indexar.

Para organizar as informações é altamente recomendado o uso de tabelas sem bordas (transparentes para o usuário) no lugar de frames.

Tabelas
As tabelas ajudam na organização e melhor visualização de uma página HTML. Há páginas cuja diagramação é inteiramente baseada em tabelas, pois ainda não existe forma mais eficiente de controlar o posicionamento de imagens e texto. O uso de tabelas tornou-se um recurso essencial para dispor os elementos da página de maneira mais criativa.

Dentro das tabelas pode-se colocar texto, imagens ou até mesmo outras tabelas.

Recomendações Gerais
Os usuários que irão desenvolver, alterar e prestar manutenção dos Sites do Departamento/Disciplinas, que possuem a sua senha e login de acesso ao servidor, serão responsáveis pelas informações ali contidas. Esse espaço não deve ser usado como repositório de programas, imagens ou arquivos que não estejam sendo utilizados na montagem na página.

Os usuários que solicitarem a confecção, inclusão de novas páginas, comunicações diversas, notas, alterações, etc. no site da UNIFESP deverão enviar as informações ao Grupo de Web do Departamento de Informática em Saúde da Universidade Federal de São Paulo, e preencher, imprimir e entregar à secretaria do DIS, a ficha de cadastro. Os textos podem ser enviados em formatos Word, as imagens podem ser enviadas já digitalizadas ou as originais para que possamos scanear.

Links recomendados para pesquisa

World Wide Web Consortium (W3C): http://www.w3c.org
Especificação XHTML: http://www.w3.org/TR/xhtml1/ Em inglês
Especificação XHTML: http://leo.worldonline.es/jlgranad/xhtml/xhtml1.htm Em espanhol

voltar para o Setor de Editoração e Publicação Web


Rua Botucatu, 862 CEP 04023-062 - Tel.: (11) 5576-4521 / 5574-5234
contato: setorweb@dis.epm.br	Última atualização: 03 Jul 2003
Estatísticas de acesso a esta página.