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?

Construção de sitesPassos

Pousada damãe Joana

index.htm

Acomodações

quartos.htm

Como chegar

mapa.htm

Preços

precos.htm

Reservas

reservas.htm

Construção de sitesPassos

Home index.htm

Acomodações quartos.htm

Como chegar mapa.htm

Preços precos.htm

Reservas reservas.htm

Construção de sitesPassos

Busca de imagens

Construção de sites

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

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

Nível 0 (home)

Nível 1

Nível 2

Construção de sitesDicas de Navegação

Crie um projeto de navegação.

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

Construção de sitesDicas de Navegação

Crie um projeto de navegação.

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

Construção de sitesDicas de Navegação

Crie um projeto de navegação.

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

1 clique

Construção de sitesDicas de Navegação

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

Construção de sitesDicas de Navegação

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

Construção de sitesDicas de Navegação

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

Construção de sitesDicas de Navegação

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

Construção de sitesDicas de Navegação

Imagine-se no lugar do usuário

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

UAI x UOL

Construção de sitesDicas de Navegação

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

“chamadas” na capa

Construção de sitesDicas de Navegação

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

“chamadas” na capa

Construção de sitesDicas de Navegação

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

Links contextuais

Construção de sitesDicas de Navegação

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

Construção de sitesDicas de Navegação

Não frustre seus visitantes

Construção de sites

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

Construção de sites

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

Dicas de Layout e Padronização

Construção de sites

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

Dicas de Layout e Padronização

Construção de sites

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

Dicas de Layout e Padronização

Construção de sites

Deixe o site harmonioso

Cuidado com o excesso de cores

Contraste forte para textos (texto preto / fundo branco)

Dicas de Layout e Padronização

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

Construção de sites

Adeqüe o site ao público alvo

Dicas de Layout e Padronização

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

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

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

Construção de sitesDicas de Velocidade

Utilize o formato adequado para cada imagem

16KB

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

Joint Photographic Expert Group (JPEG)

Graphics Interchange Format (GIF)

Construção de sitesDicas de Velocidade

Utilize o formato adequado para cada imagem

Graphics Interchange Format (GIF)

Joint Photographic Expert Group (JPEG)

3,4KB

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

Construção de sitesDicas de Velocidade

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

Construção de sitesDicas Gerais

Previna erros do usuário

Construção de sitesDicas Gerais

Ajude o usuário a reconhecer e corrigir erros

Construção de sitesDicas Gerais

Faça chamadas atrativas

Construção de sitesDicas Gerais

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

Construção de sitesDicas Gerais

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

Construção de sites

Hospedageme Registro