AG8 Informtica

2 PARTE

CAPTULO 3
Este captulo tm como objetivo:
1.
2.
3.
4.

Organizao do contedo
Formas de navegao
Storyboard
Diagramao

14

AG8 Informtica

ORGANIZAO E NAVEGAO
1. O QUE PRETENDE DIVULGAR?
Que tipo de contedo voc pode apresentar na Web? Praticamente o que
quiser. Eis aqui alguns tipos de contedo mais comuns na Web, no momento:
v
v
v
v
v
v
v
v
v

Informaes pessoais: informaes sobre voc, por exemplo.

Hobbies ou interesses especiais: filmes, motocicletas, etc.
Publicaes: como jornais, revistas.
Perfis de empresa: o que uma empresa faz ou vende, etc
Documentao On-line: desde manuais, guias de treinamento, dicionrios,
etc.
Catlogos de compras: comercializao de artigos.
Lojas on-line.
Pesquisas de opinio: a interatividade com o usurio atravs de formulrios,
caixas de sugestes, etc.
Educao On-line: numerosas universidades, escolas e empresas
particulares oferecem o ensino a distncia atravs da Web.

O nico limite da Web a sua prpria vontade. Por isso, se a sua idia
no estiver nesta lista ou parecer meio maluca ou ainda no estiver
amadurecida, pare e navegue um pouco pela Internet. Com certeza encontra
excelentes idias e poder amadurecer as suas e ter muitas outras.

2. ESTABELEA SEUS OBJETIVOS!

Voc deve se perguntar os que seus leitores procuram? O que deseja
realizar com sua apresentao? Eles lero a pgina inteira ou apenas uma
parte dela?
Antes de comear entrar com cdigos ou imagens voc deve pensar o
que quero colocar em minha pgina? Como ser estruturada? Ela est
adequada ou no ao meu pblico alvo?
Os objetivos no precisam ser grandiosos, mas a determinao ir
ajud-lo a elaborar, organizar e codificar suas pginas com uma maior
probabilidade de sucesso.
Caso v desenvolver uma apresentao Web para uma empresa ou
pessoas importante que voc colha junto ao seu cliente seus objetivos,

15

AG8 Informtica
idias, a forma que imagina sua pgina, etc. Assim, ficar bem mais fcil de
comear seu trabalho.

3. DIVIDA SEU CONTEDO EM TPICOS

Crie uma lista com os principais tpicos, a princpio no importa a
ordem. Esta uma forma de comear a se organizar.
Sua lista poder Ter quantos tpicos desejar, mas se perca listando uma
quantidade enorme de tpicos (seu leitor poder se cansar e se perder em
meio a tantas opes).

4. ORGANIZAO E NAVEGAO
Aqui descreverei algumas das estruturas e navegao e suas
caractersticas e ainda consideraes importantes como:
v Os tipos de informao que se adaptam melhor a cada estrutura.
v Como os leitores conseguem se deslocar pelo contedo de cada tipo de

estrutura para encontrar as informaes de que precisam .

v Como Ter certeza de que os leitores conseguem se localizar nos seus
documentos (contexto) e achar o caminho de volta at uma posio
conhecida.
Ao ler esta parte reflita como suas informaes se encaixaria em cada uma.
Voc poder combinar, at mesmo, duas estruturas e criar uma nova forma de
navegao.

16

AG8 Informtica

FORMAS DE ORGANIZAO
1. HIERARQUIAS
A maneira mais fcil e mais lgica de estruturar os seus documentos. As
hierarquias e os menus adaptam-se especialmente bem aos documentos online e de hipertexto. Exemplo: sistemas de ajuda.
HOME PAGE

Em uma organizao hierrquica, fcil para os leitores descobrir a

posio em que se encontram na estrutura. Nas hierarquias, a home page
fornece uma viso geral do contedo que est subordinado a ela e ainda define
os principais vnculos s pginas dos nveis inferiores da hierarquia.
Este tipo de estrutura oferece um risco mnimo de ficar perdido, alm de
ser uma forma mais fcil de localizar informaes. Mas procure no incluir
muitos nveis para no aborrecer os leitores. Pois estes, aps ter de selecionar
opes em muitos menus, acaba esquecendo o que estava procurando. Fica
aborrecido demais para prosseguir. Procure manter apenas dois ou trs nveis
na sua hierarquia.

2. LINEAR
Muito semelhante a forma como so organizados documentos
impressos. Neste tipo de estrutura a home page o ttulo, ou introduo, e
todas as outras pginas acompanham-na em seqncia com vnculos que
levam de uma pgina a outra, normalmente com opes de avanar e
retroceder.

17

AG8 Informtica
Uma organizao linear muito rgida e limita tanto a liberdade dos seus
leitores de consultar as informaes quanto a sua prpria liberdade de
apresent-las. As estruturas lineares so ideais para apresentar, no ambiente
on-line, um material que j tenha esse tipo de estrutura no ambiente off-line.
Como por exemplo: instrues passo-a-passo ou treinamento baseado em
computador.

3. ESTRUTURA LINEAR COM ALTERNATIVAS

Voc pode tornar a estrutura linear menos rgida permitindo que o leitor
se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear
com ramificaes alternativas que partam de um nico tronco. As ramificaes
podem se reunir ao tronco principal em algum ponto mais adiante, em um nvel
mais baixo da estrutura, ou continuar se ramificando em nveis inferiores
seguindo caminhos prprios at chegar a um "fim".
Alm de ramificar a estrutura linear, voc pode tambm oferecer
vnculos que permitam aos leitores avanar ou retroceder na cadeia, caso
precicem rever alguma etapa ou j conheam alguma parte do contedo.

18

AG8 Informtica

4. COMBINAO DAS ESTRUTURAS LINEAR E

HIERQUICA
Uma forma comum de organizar um documento na Web consiste em
obter uma combinao das estruturas linear e hierrquica. Essa estrutura
combinada ocorre com maior freqncia quando documentos de estrutura
rgida, porm lineares, so apresentados no ambiente on-line. Um exemplo so
os famosos FAQ ( Frequently Asked Questions).
A combinao de documentos lineares e hierrquicos funciona bem
desde que haja pistas em relao ao contexto.
Como essa uma estrutura linear e hierrquica, em cada pgina do
roteiro voc deve oferecer vnculos para o leitor avanar, retroceder, retornar
ao incio e subir um nvel.

19

AG8 Informtica

O STORYBOARD

A prxima etapa do planejamento da sua apresentao da Web consiste

em determinar o contedo que ser apresentado em cada uma das pginas e
criar alguns vnculos simples que possibilitem a navegao por essas pginas.
O StoryBoard de uma apresentao um conceito emprestado do
cinema, em que cada cena e cda tomada de cmera esboada na ordem em
que ocorre no filme. O storyboard fornece uma estrutura e um plano globais
para o filme, que permitem que o diretor e sua equipe tenham uma idia clara
de onde cada tomada se encaixa no filme.
O uso de storyboard, uma tcnica cinematogrfica, consiste no processo de
criao de um resumo com sketh (rascunho) da aparncia final do seu trabalho
antes de voc efetivamente pr em prtica suas idias. O uso de storyboard
ajuda-o a visualizar a apresentao como um todo e a prever sua forma final.
Esta tcnica fornece um esboo geral de como a apresentao Web ir
ficar quando estiver pronta, indicando os tpicos que sero includos em cada
pgina, os vnculos bsicos e talvez at mesmo uma idia conceitual do tipo de
imagens grficas que voc usar e onde elas sero apresentadas. No caso de
grande documentao, o storyboard dever ser dividido em reas e cada
equipe cuidar da parte que lhe cabe. Para estruturas muito pequenas talvez
no seja necessrio criar um storyboard.

DICAS PARA SEU STORYBOARD

1. Coloque cada tpico em uma pgina, mas se tiver um grande nmero de
tpicos, a manuteno e vinculao pode se tornar maante.
2. Defina bem a forma de navegao entre as pginas. Se houver formas
alternativas, torne a navegao para os leitores a mais intuitiva possvel.
3. Tome cuidado com o que ser incluindo na home page, lembre-se, ela ser
a porta da sua apresentao.
4. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.

20

AG8 Informtica

DIAGRAMAO

A disposio de imagens, textos, vdeos, etc. Tudo que voc deseja

colocar em sua pgina precisa ser colocado de forma agradvel ao leitor. Da
abordarmos, de forma geral, a diagramao. Esta palavra vm do mundo dos
impressos. Trata-se da disposio de elementos que compem uma pgina.
Deve ser observado o tamanho das fontes, disposio das imagens,
forma como o texto ser apresentado, etc. Uma boa diagramao tambm
garante o retorno do internauta.

EXERCCIOS
1. Por que to importante, antes de comear a construir uma apresentao
Web, definir objetivos e tpicos? O que mais necessrio?
2. Descreva cada forma de organizao de pginas citada acima. Faa uma
observao sobre o que voc compreendeu de cada uma.
3. O que storyboard e qual a sua utilidade?
4. Em que casos aconselhvel usar o storyboard?
5. Vamos comear a planejar sua Home Page pessoal. Pense no que gostaria
de colocar em suas pginas, se haver links para outras partes da mesma
pgina e os links para outras pginas, quais os tpicos abordados, etc.
Faa um storyboard da sua apresentao web.

ANOTAES

21