Construcao de Sites

Construção de Sites

UNIPAC – LFDW1

Leandro Neumann

Construção de sites

Orientaçõessobre o

trabalho

Construção de sitesPassos

1. A idéiaDefinição do tema

2. Projeto do conteúdo Organize seu conteúdo, separe-o em tópicos

3. Projeto de NavegaçãoMenu fixo e todas as páginas com link para todas

4. Projeto GráficoCores, figuras, layout

5. ProgramaçãoHTML? Javascript? PHP? Tabelas? Frames?


Pousada damãe Joana

index.htm

Acomodações

quartos.htm

Como chegar

mapa.htm

Preços

precos.htm

Reservas

reservas.htm


Home index.htm

Acomodações quartos.htm

Como chegar mapa.htm

Preços precos.htm

Reservas reservas.htm


Busca de imagens


Dicas

Construção de sitesDicas de preparação do conteúdo

Qual é o objetivo do site?

Que tipo de visitante deseja atrair para o site?

Por que as pessoas devem visitar o seu site?

Construção de sitesDicas de Navegação

Faça um projeto com todas as seções e sub-seções que pretende criar.

Culinária

Dicas de Culinária

Festivais Gastronômicos

Receitas

Aves

Massas

Sobremesas


Faça um projeto com todas as seções e sub-seções que pretende criar.

Culinária

Dicas de Culinária

Festivais Gastronômicos

Receitas

Aves

Massas

Sobremesas

Nível 0 (home)

Nível 1

Nível 2


Crie um projeto de navegação.

Máximo de 3 cliques para alcançar uma página







1 clique


Mantenha o usuário informado sobre em que página ele está






Utilize elementos já conhecidos (compatibilidade com o mundo real)


Imagine-se no lugar do usuário

Organize a navegação por ordem de importância

UAI x UOL


Não faça do menu a única forma de navegar pelo site

“chamadas” na capa



“chamadas” na capa



Links contextuais


Cuidado para não confundir o usuário (Estética e design minimalista)


Não frustre seus visitantes


Crie uma identidade visual (consistência e padrões)

Tipologia

Posicionamento do menu

Cores

Disposição do texto

Design dos botões, tabelas, linha, imagens...

Dicas de Layout e Padronização








Deixe o conteúdo “respirar” Espaço em branco é fundamental



Deixe o site harmonioso

Cuidado com o excesso de cores

Contraste forte para textos (texto preto / fundo branco)


http://www.hitmill.com/html/rgbcolorvalues.html

http://www.hitmill.com/html/rgbcolorvalues.html


Adeqüe o site ao público alvo


Construção de sitesDicas de Layout e Padronização



Construção de sitesDicas de Velocidade

Utilize o formato adequado para cada imagem

BitMap (BMP)

61,5KB



16KB

25% de compactação - 4,7KB

Joint Photographic Expert Group (JPEG)

Graphics Interchange Format (GIF)



Graphics Interchange Format (GIF)

Joint Photographic Expert Group (JPEG)

3,4KB

25% de compactação - 8,9KB


Não coloque músicas ou sons automáticos no site

Construção de sitesDicas Gerais

Não use páginas de entrada ou boas-vindas


Previna erros do usuário


Ajude o usuário a reconhecer e corrigir erros


Faça chamadas atrativas


Padronize o nome dos arquivos Utilize apenas letras minúsculas

Pense no usuário padrão: 800x600 pixels e conexão discada

Utilize novos recursos tecnológicos apenas quando necessário

Não use contadores de acesso


Informe o tamanho e o tipo dos arquivos disponíveis para download

Teste seu site em outros navegadores a plataformas

Mantenha o site atualizado

CLIQUE EM TUDO!!

É mais difícil fazer um usuário retornar ao site do que atrai-lo para uma primeira visita


Hospedageme Registro

Technology

Construcao de Sites