Design
Design
• Citação:
– Uma regra diz “Deve-se fazer desta forma".
– Um princípio diz “Isto funciona e tem funcionado
desde que há memória…!”
– Autores inexperientes e ansiosos obedecem regras
conhecidas.
– Autores rebeldes e sem formação quebram regras.
– Artistas dominam a Forma
• Tal como os autores, também os designers para
Multimedia e a Web
1
Design
• Sítios Web
– Definição técnica:
• Conjunto de páginas Web com URLs começando
todas por um mesmo nome de domínio (domain
name)
– Definição geral:
• Conjunto de páginas Web com um tema, uma
estrutura coerente e uma página de início (home
page)
Design
• Estruturas de sites
– Conexão total
– Hierárquico
– Sequencial
– Híbrido
2
Design
• Conexão total
– Cada página contém ligações para todas as restantes
páginas
• Mesmo para sítios pequenos requer muitas ligações e não é
fácil de perceber
• Pode resultar para sítios pequenos, onde visitantes poderão
querer ver só algumas ou todas as páginas numa ordem
qualquer
– Disponibilizar uma barra de navegação (navigation
bar - navbar) em cada página, contendo links para
cada uma das outras
• Indicar página corrente (“Você está aqui")
Design
• Conexão total
3
Design
• Hierárquico
– Organização mais utilizada para sites maiores
– Página de início contem ligações para
subconjunto das outras páginas do site
– Cada página acessível a partir da home page
pode ser considerada a home page do seu
próprio sub-site
– Sub-sites dedicados a sub-tópicos do site
principal
Design
• Hierárquico
4
Design
• Navegação hierárquica
– Estrutura essencial é hierárquica, podendo haver
links adisionais (p.ex para páginas do 2º nível a partir
de cada página)
– Uso da navbar principal para aceder aos sub-sites
principais e ainda:
• 2º nível de navbar dentro de cada sub-site
• Menus drop-down hierárquicos
– Breadcrumbs forma popular de mostrar posição
corrente dentro da hierarquia
• Breadcrumbs típicos têm a aparência seguinte:
Home page > Section page > Subsection page
Design
• Sequencial
– Pode ser apropriado quando páginas formam
naturalmente uma sequência linear
• Sequência de imagens numa galeria on-line
• Página de resultados num motor de busca (search engine)
• Entradas num Weblog
– Navegação usual contém botões Next e Previous ,
muitas vezes complementados com ligações para
todas as páginas numa sequência (curta)
5
Design
• Sequencial:
Design
• Estruturas baseadas no tempo
– Media tradicionais são essencialmente lineares
– Nos media digitais, ordem linear pode ser alterada
através de scripts e como resposta a input do
utilizador
• Se script controla sem aceitar input (ex. contar frames),
estrutura é determinística
• Para aceitar input, têm de estar previstos mecanismos
– Podem apresentar comportamentos paralelos
6
Design
• Ciclos
– Ciclo simples: script ligado à última frame
envia o playback novamente para a 1ª frame
– Introdução + ciclo: script na frame final envia
o playback para uma frame anterior (não a 1ª)
– Ciclos contados: script conta nº de vezes em
que itera, faz algo diferente após certo nº de
iterações (p.ex parar)
Design
• Ramificação
– Caso mais comum: conj. de selecções num menu
• Menu é uma única frame (parada) com botões para cada
item do menu
• Apresentação automática dividida em secções, cada uma
salta para a frame menu quando chega ao fim
• Script ligado a cada botão produz um salto para a secção
correspondente
– Estruturas gerais de ramificação que permitem
escolher dentro de um conjunto de alternativas qual a
parte a fazer playback a seguir (p.ex narrativa
interactiva)
7
Design
• Paralelismo
– Movie clips flash são filmes autónomos dentro de um
filme mais geral que podem ser exibidos em paralelo
– Os clips podem ser controlados através de scripts
• Parados, activados, enviados para uma dada frame, etc
– Permite variações infinitas no playback de nº finito de
elementos
– Pode reagir a input do utilizador
• Animação interactiva, etc
Design
8