Introdução

„ Hipertexto
Projeto de Sites da „ É um documento composto por um conjunto de nós contendo
texto, imagens, sons e aç
ações, interligados entre si e formando
uma complexa teia de associaç
associações não-
não-seqü
seqüenciais, que pode

Web ser percorrida livremente pelos usuá

usuários.

„ Hipermídia = Hipertexto + Multimídia

„ A Web é um repositório de informações hipermídia
Mário Meireles Teixeira
UFMA – DEINF „ Web Site
– Local da Internet com nome e endereç
endereço conhecidos, que
conté
contém informaç
informações sobre um determinado assunto,
indiví
indivíduo, instituiç
instituição, empresa etc.

UFMA-DEINF Mário Meireles Teixeira 2

Utilização de Hipertexto Utilização de Hipertexto

„ Vantagens: „ Desvantagens:
„ Fácil navegaç
navegação de um documento para outro, atravé
através „ É mais trabalhoso criar um documento em hipertexto;
dos links;
„ Facilidade de criaç
criação de novos links quando necessá
necessário;
„ É necessário manter os links atualizados ao longo do
„ Forç
Força o autor a organizar melhor a informaç
informação; tempo;
„ Modularidade das informaç
informações;
„ Eliminaç
Eliminação de redundância de informaç
informação;
„ Em documentos complexos, o leitor pode ter a
„ O documento não se limita a um único tipo de mí mídia ou
sensação de estar perdido;
forma de publicaç
publicaç ão;
„ Facilita a colaboraç
colaboração entre autores distantes fisicamente.
„ Há a possibilidade de distração do leitor, devido às
inúmeras possibilidades de navegação oferecidas.
UFMA-DEINF Mário Meireles Teixeira 3 UFMA-DEINF Mário Meireles Teixeira 4
 O Desafio do Projeto de Sites Fases de Projeto
„ A metáfora de interação dos leitores com uma página „ No projeto de sites da web, pode-se encontrar
HTML é diferente da sua experiência com livros. Os as seguintes fases:
usuários não se limitam a olhar a informação na web,
„ Determinação dos objetivos do site e o retorno
eles interagem com a mesma
esperado;
„ Identificação da audiência do site;
„ Algum desafios para os web designers:
„ Determinação do tipo de informação que se quer
„ Como subdividir, organizar e apresentar a informaç
informação;
armazenar (escopo);
„ É necessá
necessário fornecer ao leitor ferramentas de busca e
navegaç
navegação, assim como “dicas”
dicas” de onde ele está
está; „ Projeto do site: a metáfora de navegação utilizada;
„ Qual o tamanho ótimo para uma pá página; „ Projeto das páginas: o visual do site.
„ Que tipo(s) de mí
mídia utilizar e em que combinaç
combinação;
„ É importante conhecer a audiência do site e suas expectativas.

UFMA-DEINF Mário Meireles Teixeira 5 UFMA-DEINF Mário Meireles Teixeira 6

Atividade Páginas Independentes

„ Páginas web diferem das pá
páginas de um livro fundamentalmente
„ Definição do site a ser construído por num aspecto: os hyperlinks permitem o acesso a elas sem nenhum
preâmbulo, logo pá
páginas web precisam ser mais “independentes”
independentes”
cada equipe... que as pá
páginas de um livro

„ As pá
páginas precisam conter informaç
informações para situar o leitor:

„ Quem – Sempre informe ao leitor qual a fonte da informaç

informação, quem
está
está falando com ele;
„ O Quê – O documento deve ter um tí título explicativo que resuma seu
conté
contéudo.
udo. Este tí
título també
também se tornará
tornará o texto dos bookmarks feitos
pelos usuá
usuários;
„ Quando – A informaç
informação na web é bastante volá volátil, logo é importante
informar a data de criaç
criação ou revisão de um documento;
„ Onde – Uma pá página deve informar onde estáestá localizada, a que
organizaç
organização pertence, qual a sua vizinhanç
vizinhança.

UFMA-DEINF Mário Meireles Teixeira 7 UFMA-DEINF Mário Meireles Teixeira 8


Páginas Independentes
„ Uma página web precisa, no mínimo, de:
„ Um título informativo (que se tornará também um
bookmark)
„ A identidade do seu criador (autor ou instituição)
„ Uma data de criação ou revisão
„ Um link para uma página anterior ou menu
„ Um link para a “home page” do site (em suas
principais páginas)
„ Essas pequenas dicas podem ajudar muito no sentido
de construir um site que possa ser facilmente
compreendido pelos seus usuários
UFMA-DEINF Mário Meireles Teixeira
Projeto de Interface centrado no
Usuário
„ As interfaces gráficas surgiram para dar aos
usuários um controle maior sobre as tarefas
realizadas no computador
„ Uma boa interface deve se adaptar às
necessidades dos usuários e não o contrário
„ Por isso é tão importante saber para quem se
está projetando o site, conhecer sua audiência
„ Os seguintes aspectos devem ser levados em
consideração durante o projeto:
[http://www.webstyleguide.com/interface/user-
http://www.webstyleguide.com/interface/user-centered.html]
9 UFMA-DEINF Mário Meireles Teixeira 10

Navegação Projeto do Site

„ Elementos grá
gráficos e editoriais, alé
além da presenç
presença fí
física da obra, „ O projeto do site irá determinar sua estrutura
dão ao leitor a sensaç
sensação de contexto em materiais impressos
„ Na web, desaparece a sensaç
sensação “física”
sica” da informaç
informação e os links organizacional, ou seja, como arranjar seu
fornecem pouca informaç
informação sobre onde está está o usuá
usuário conteúdo a fim de melhor atender às
„ Páginas web devem fornecer ao leitor um conjunto de dicas sobre o
contexto em que se encontram e a organizaç
organização da informaç
informação, pois necessidades dos usuários
somente uma pequena parte do site é vista a cada vez pelo leitor „ Lembre-se: o objetivo principal de um site é
„ Hyperlinks conferem flexibilidade ao web designer,
designer, mas podem prestar serviços à sua audiência
desorientar o usuá
usuário „ Pode ser um erro tático utilizar um site
„ Top menus
„ Barras de botões meramente para descrever a estrutura de uma
„ Botões “Back”
Back” and “Forward”
Forward” empresa ou instituição
„ Botões “Previous”
Previous” and “Next”
Next”
„ Exemplos: [HU Yale] [HU UFMA]
„ [http://www.webstyleguide.com/interface/navigate.html]

UFMA-DEINF Mário Meireles Teixeira 11 UFMA-DEINF Mário Meireles Teixeira 12

 Subdivisão da Informação Subdivisão da Informação - Menus
„ Sem uma organização lógica e coerente da informação,
um site não será bem compreendido „ Uma ferramenta poderosa para a
organizaç
organização de um site é a utili-
utili-
„ Sabe-se que o ser humano consegue guardar cerca de zaç
zação de menus. Os menus rela-rela-
quatro a sete unidades discretas de informação em sua cionam os grandes tó tópicos do
memória de curto prazo site com suas unidades
„ Portanto, pequenas porções de informação são mais individuais de informaç
informação
fáceis de lembrar e manipular do que longos tratados
„ Tome cuidado para evitar:
„ Passos básicos para organizar a informação de um site: „ Menus do tipo “lista de
„ Divida o conteú
conteúdo em pequenas unidades ló lógicas; supermercado”
supermercado”
„ Estabeleç
Estabeleça uma hierarquia entre as unidades; „ Hierarquias de menus muito
„ Use a hierarquia para estruturar relaç
relações entre as unidades; profundas
„ Construa o site segundo a estrutura de sua informaç
informação;
„ Analise o site sob o ponto de vista esté
estético e funcional.

UFMA-DEINF Mário Meireles Teixeira 13 UFMA-DEINF Mário Meireles Teixeira 14

Estrutura de um Site Organização Seqüencial

„ Embora na web seja possível ligar qualquer „ É um dos tipos mais comuns e tradicionais de organizaç
organização
„ O projeto consiste em um conjunto de pá páginas organizadas em uma
coisa a qualquer coisa, devemos evitar essa seqü
seqüência pré
pré-definida pelo autor do texto
tentação „ Cada documento aborda uma parte do assunto principal e tem links
para o nó
nó anterior e o pró
próximo, com alguns possí
possíveis desvios da
„ Sem uma organização lógica do site, os narrativa
usuários irão procurar a informação de que „ O padrão de leitura (navegaç
(navegação) é similar ao de um livro, com
capí
capítulos, seç
seções e sub-
sub-seç
seções. O leitor pode, às vezes, querer
precisam em outro lugar imprimir o conteú
conteúdo do site
„ Recomendado para a apresentaç
apresentação de conteú
conteúdos extensos, como:
„ Formas principais de organização: apostilas, manuais, listas indexadas, glossá
glossários, informaç
informação
„ Seqüências cronoló
cronológica etc.
„ Hierarquias
„ Teias (Webs)

UFMA-DEINF Mário Meireles Teixeira 15 UFMA-DEINF Mário Meireles Teixeira 16

 Organização Hierárquica Organização em Teia
„ Muito utilizada para a organização de conjuntos „ Pode ser muito difí
difícil de entender ou prever
complexos de informação „ Impõe poucas restriç
restrições aos relacionamentos entre as pá páginas
„ Para que um conjunto de informaç
informação possa ser organizado desta
„ Impõe uma disciplina maior ao autor do site forma, é preciso que ele seja altamente uniforme, com tó tópicos e
„ O padrão de navegação se baseia em uma seqüência sub-
sub-tópicos bem definidos
de caminhos que partem de um ponto comum, a página „ A audiência desse tipo de site é especializada e deve ser treinada
para esta forma de interaç
interação
principal do site „ Destina-
Destina-se à elaboraç
elaboração de manuais de procedimentos,
„ O leitor, então, percorre a informação segundo uma descriç
descrições de casos mé médicos,
listas de cursos etc.
hierarquia top-down

UFMA-DEINF Mário Meireles Teixeira 17 UFMA-DEINF Mário Meireles Teixeira 18

Comparação entre as formas de

Diagrama do Site
organização
„ Um bom diagrama do site, de preferência feito
em uma grande folha de papel, é uma excelente
forma de documentar o projeto e a sua evolução

„ Os três principais padrões de organizaç

organização de sites, considerando-
considerando-
se a linearidade da narrativa vs. a complexidade do conteú
conteúdo
UFMA-DEINF Mário Meireles Teixeira 19 UFMA-DEINF Mário Meireles Teixeira 20
 Temas de Projeto de Sites Atividade
„ Para o tema escolhido anteriormente,
defina a estrutura do site e a organização
da informação...

[http://www.webstyleguide.com/site/themes.html]

UFMA-DEINF Mário Meireles Teixeira 21 UFMA-DEINF Mário Meireles Teixeira 22

Elementos de um Site Projeto de Páginas

„ Home pages
„ Menus „ Um bom design de pá página pode
conferir a um site maior clareza,
„ Guias legibilidade, organizaç
organização e
„ Novidades confianç
confiança por parte dos
usuá
usuários
„ Busca
„ Informações de contato e feedback „ A finalidade principal do design
grá
gráfico é criar uma hierarquia
„ FAQs visual forte e consistente,
„ Referências logicamente organizada, que
dirija a atenç
atenção dos usuá
usuários à
„ Páginas de erro informaç
informação que se quer veicular
[http://www.webstyleguide.com/site/elements.html]

UFMA-DEINF Mário Meireles Teixeira 23 UFMA-DEINF Mário Meireles Teixeira 24

 Recomendações de Projeto de
Projeto de Páginas
Páginas
„ Contraste é essencial para „ Estabeleça uma hierarquia visual
capturar a atenç
atenção dos usuá
usuários
„ É preciso que a pá
página tenha uma hierarquia visual forte e
consistente, que enfatize os elementos importantes
„ Uma pápágina constituí
constituída apenas de
texto torna-
torna-se monó
monótona e „ Guie o olhar do leitor
indiferenciada „ A parte superior de qualquer pá
página é a mais importante,
especialmente no caso de informaç
informações lidas na tela do
„ Uma pá
página com excesso de computador. Atenç
Atenção aos primeiros 10 cm!
cores, fontes ou grá
gráficos també
também
afasta a maioria dos usuá
usuários
„ Distrações gráficas
„ Evite grá
gráficos “bonitinhos”
bonitinhos” e desnecessá
desnecessários. Cuidado
„ Um bom contraste visual provê um també
também com letras muito grandes e excesso de fontes
senso de organizaç
organização „ Consistência é fundamental
„ Crie um layout bá
básico para o seu site e seja fiel a ele

UFMA-DEINF Mário Meireles Teixeira 25 UFMA-DEINF Mário Meireles Teixeira 26

Dimensões da Página Design Grids

„ Antes de codificar um site, deve-se conceber um layout
básico para as páginas do mesmo, um design grid
„ Este deverá delimitar a área reservada para:
„ ilustraç
ilustrações
„ barras de navegaç
navegação
„ títulos
„ subtí
subtítulos
„ texto ...
„ Seu objetivo é facilitar a montagem de uma nova página,
sem que se perca tempo pensando no layout da mesma,
além de conferir consistência, equilíbrio e previsibilidade
ao site como um todo
UFMA-DEINF Mário Meireles Teixeira 27 UFMA-DEINF Mário Meireles Teixeira 28
 Design Grids Cabeçalhos: identidade do site
„ O cabeçalho da página deve fornecer infor-
mações úteis para a localização do usuário:
„ Identificação da organização ou instituição
responsável pelo site
„ Indicação da posição daquela página no contexto
geral do site
„ Links de navegação para as principais seções do site

[http://java.sun.com]
http://java.sun.com]

UFMA-DEINF Mário Meireles Teixeira 29 UFMA-DEINF Mário Meireles Teixeira 30

Rodapés: proveniência Tabelas

„ Os rodapés também são importantes na com- „ As tabelas servem para a apresentação
cepção de uma página e podem conter infor-
mações como:
de informação em forma tabular
„ Origem da página „ São mais utilizadas, porém, para compor
„ Data de criação/atualização o layout das páginas, sendo empregadas
„ Autor para o posicionamento de textos e
„ Forma de contato
„ Links para as principais seções do site
gráficos
„ Podem ter largura absoluta ou relativa
„ [http://www.webstyleguide.com/page/tables.html]
[http://www.usp.br]
http://www.usp.br]

UFMA-DEINF Mário Meireles Teixeira 31 UFMA-DEINF Mário Meireles Teixeira 32

 Frames Atividade
„ Também são utilizados para controlar o layout „ Defina o projeto das páginas do seu site...
das páginas
„ Permitem o carregamento de múltiplos docu-
mentos HTML simultaneamente
„ São utilizados em sites cujos conteúdos mudam
com freqüência e que exigem flexibilidade na
atualização das páginas
„ Muitas vezes, são usados para compor páginas
de índice que referenciam uma página principal
„ [http://www.webstyleguide.com/page/frames.html]
UFMA-DEINF Mário Meireles Teixeira 33 UFMA-DEINF Mário Meireles Teixeira 34