Mapa Do Site - Considerações No Desenvolvimento

DESENVOLVIMENTO WEB – MAPA DO SITE 15 de Março de 2009
Mapa do Site
Um Mapa de Site é uma espécie de indice de um site criado de tal forma a representar a estrutura de
navegação, em geral estática, de um site.
site
A maneira mais comum de se apresentar um Mapa do Site é através de uma página web contendo uma
simples lista,, onde seus itens (trechos de textos) são links que apontam para as páginas do site.
Código HTML do exemplo acima:-

1: <html>
2: <head>
3: <title>Exemplo de Mapa
apa do Site</title>
Site
4: </head>
5:
6: <body>
7: <h2>Mapa do Site</h2>
8: <ul>
9: <li> <strong>Home
Home Page</strong>
Page </li>
10: <ul>
11: empresa.html">A Empresa</a> </li>
<li> <a href="empresa.html
12: produtos.html">Produtos</a> </li>
<li> <a href="produtos.html
13: servicos.html">Serviços</a> </li>
<li> <a href="servicos.html
14: contato.html">Fale Conosco</a> </li>
<li> <a href ="contato.html
15: mapa.html">Mapa do Site</a> </li>
<li> <a href ="mapa.html
16: </ul>
17: </ul>
18:
19: </body>
20: </html>
O usuário final
Para um usuário que visita um site, o mapa do site deve servir como apoio para a navegação e o
entendimento da estrutura do site objetivando uma visão geral da estrutura do site e rápido acesso a
qualquer página desta estrutura.
Prof. Carlos Majer Página 1

Sites Grandes
Alguns sites são realmente grandes o que faz com que seu mapa do site possa ser muito difícil de ser
utilizado.
No site da Microsoft ® Brasil, podemos verificar que seu Mapa do Site é estruturado em categorias e
subcategorias de relevância. Isto é útil quando se tem muitas páginas e se deseja facilitar a estruturação e
entendimento de forma hierárquica e organizada.
Formato Visual
Não existem limites para desenvolvimento visual de um mapa do site. O importante é que ele traga
facilidades ao usuário, que busca uma forma de entender a dimensão do site e facilidades para localização
de informação eventualmente relevante.
Um web designer pode querer desenvolver o mapa do site num formato visual mais trabalhado.
No exemplo abaixo, percebemos o uso de identação (deslocamento) aplicado para distinguir os niveis
mais internos das páginas.

O Mapa do Site acima foi desenvolvido através do uso do software InfoRapid ® Knowledge Map. Mais
adiante neste artigo abordo este software com mais profundidade.
O desenvolvedor como consumidor do Mapa

Um Mapa do Site pode ser ajustado para auxiliar o desenvolvedor permitindo-lhe verificar quais são as
páginas (nome dos arquivos) que são acessadas dentro da estrutura do site.
Esta é uma forma visual que o desenvolvedor pode utilizar para se organizar e melhor entender o
funcionamento de seu site.
Convenhamos que é bem mais fácil visualizar um mapa do site (e identificar um arquivo) com os nomes dos
arquivos das páginas destacados do que ficar abrindo página por página para descobrir quais páginas estão
sendo abertas.

Nota
Em alguns casos, neste tipo de mapa, uma página pode não ter um link funcional.
Algumas vezes, num ambiente dinâmico (páginas programadas PHP, ASP, Java, etc), uma determinada
página pode ter sido criada de tal forma a esperar uma informação (parâmetro), para que funcione. Isto
quer dizer que a página depende de uma informação complementar (e externa) que irá definir seu

funcionamento. Neste caso, o desenvolvedor pode escolher entre inserir um link passando um parâmetro
default, simplesmente não inserir o link ou até não exibir a página no mapa.
Um exemplo disto pode ser uma página de produtos (Galeria de Produtos) que espera como um parâmetro
a categoria de produtos a ser exibida. Exemplo:-
Exemplo:
http://www.site.com.br/GaleriaProdutos.php?categoria=Eletronicos
Note que mesmo neste caso, o desenvolvedor ainda pode desenvolver uma forma de fazer com que esta
página funcione mesmo sem receber o parâmetro desejado. O desenvolvedor consistir se o parâmetro não
foi enviado e neste caso utilizar um parâmetro padrão para busca de produtos, o que neste caso resolveria o
problema do link não funcional.
O que colocar num Mapa do Site

Inicialmente é necessário identificar o tipo
t de aplicação e principalmente o tipo de usuário (público alvo) que
irá consultar/utilizar seu Mapa do Site. Devemos sempre lembrar que um mapa de site deve ser uma
ferramenta para acesso rápido às partes importantes do site e seu conteúdo deve estar o mais resumido
possível.
Vamos imaginar um mapa de um site de comércio eletrônico. Desenvolvi o protótipo abaixo para auxiliar
nesta explicação:-

Este protótipo de tela foi desenvolvido utilizado a ferramenta Pencil – versão 1.0 , build 4. Ela pode ser
baixada gratuitamente no site http://www.evolus.vn/Pencil/.
http://www.evolus.vn/Pencil/. Você pode precisar instalar o Firefox para
conseguir executar esta ferramenta. Caso queira o exemplo abaixo (página web), envie-me
envie um e-mail
solicitando.
Este tipo de site tem como características as seguintes funcionalidades:-

funcionalidades:
Galeria de Produtos:: Exibição de diversos produtos, em geral agrupados conforme categorias e
subcategorias de produtos.
Banners de Propaganda:: Conjunto de propagandas específicas que podem ser exibidas numa única
área ou em diversas áreas dentro do site.
Formas de Contato:: Diversas maneiras de se contatar a empresa (link p/ e-mail,
e mail, formulário de
contato, Chat On-Line,
Line, etc).
Links para parceiros: Geralmente são empresas que dão algum
algum tipo de suporte ao negócio da
empresa.
Apoio: Áreas com informações diversas cujo objetivo é apoiar o negócio principal.
De um modo geral, devemos disponibilizar todas as páginas que o usuário consiga acessar no site. Ao
desenvolver o mapa do site, o desenvolvedor
envolvedor web pode se deparar com algumas dúvidas...
Galeria de Produtos e Serviços

Quais informações deveriam ser inseridas num mapa do site, quando se tratar
tra ar de produtos ou serviços?
Devo inserir meus produtos ou serviços no mapa do site? E quando houver muitos produtos ou serviços?
A análise das seguintes questões podem lhe ajudar a tomar a decisão correta:-
correta:
1) O número de produtos (ou serviços) é pequeno?
2) O conjunto de produtos/serviços informados no site costumam sofrer variações?
3) Os produtos/serviços ofertados
ertados têm páginas especialmente criadas?
Vamos analisar as questões acima?

O número de produtos (ou serviços) é pequeno?
Penso o seguinte: Se o número de produtos ou serviços for pequeno é provável que você tenha
desenvolvido uma página para cada um destes produtos, compreendendo um bom nível de detalhes.
detalhe
Neste caso, pode ser interessante você criar uma seção produtos no seu mapa do site com links para cada
produto específico.
Por outro lado, se você tiver um grande número de produtos ou serviços, não tem sentido você inserí-los
inserí
numa estrutura de mapa do site pois você irá descaracterizar esta ferramenta.
ferramenta
O local correto para o usuário visualizar estes produtos/serviços é a Galeria de Produtos.
Produtos
Inserí-los
los também no mapa do site só trará redundância de informações além da possibilidade de deixar o
Mapa do Site muito grande,, o que poderá
pode torná-lo extremamente difícil de utilizá-lop.
lop.
Além disto, se os produtos/serviços estiverem cadastrados num banco de dados, o seu Mapa do Site deverá
ser dinamicamentee gerado (via programação PHP/ASP), o que gera mais um nivel de complexidade na sua
criação.
Produtos/Serviços sofrem variações

O que você acha que aconteceria se você inserisse os produtos em seu Mapa do Site e os mesmos tivessem
uma volatilidade intensa em seu banco (exclusões e inclusões
constantes).
Como seria a experiência do usuário se toda vez que entrar no Mapa

do Site ele ver uma informação diferente ?

Neste tipo de site, que é composto por informações advindas de um banco de dados, não existe maneira
m de
se saber quais produtos ou serviços podem ter sido inseridos. Em função de sua natureza dinâmica, o
melhor local para exibir este tipo de informação continua sendo a Galeria de Produtos,
Produtos uma vez que é
uma página específica para isto.
Um mapa de site costuma ser um elemento estático de informação.

informação. Isto faz com que sempre que o usuário
acesse-o,
o, ele visualizará basicamente sempre a mesma estrutura do site apontando para as mesmas
informações (páginas).
Texto, figuras e videos

Em geral, o objetivo na inserção de certos elementos numa página (texto, figuras,gráficos, videos, etc) é o
de se trazer algum tipo de informação ao usuário. O formato de visualização da informação (exemplo:
streaming de um video) pode ser inovador, mas isto não significa
significa que o video deva ser um item num mapa
do site (mesmo que ele seja um link para o site do Youtube ®).
Exceções existem, como por exemplo, quando se deseja colocar certo destaque no video institucional da
empresa. Neste caso é importante entender as as informações relevantes e estratégicas na visão da área de
marketing da empresa.
Newsletters e cadastros
Quando um usuário cadastra seu e-mail
mail para receber newsletters de
um site, em geral, este processo é simples e nada de mais complexo
ocorre. Em geral, neste caso não se insere este elemento como item
num mapa do site.
Uma exceção ocorre quando a área de newsletter for um chamariz

para um formulário (página) de cadastro de usuário. Neste caso,
pode ser importante a inserção desta página no mapa do site.

Banners de Propaganda (advertisements = ads)

Os sites podem exibir banners de diversas formas. No modelo abaixo podemos perceber a existência de até
quatro imagens/banners que remetem a algum tipo de propaganda.
Como mencionado no início do artigo, um mapa de site é em geral uma espécie de indice para acesso às
informações do site.Em geral, o mapa é estático, isto é, as páginas referencias no mapa (e seus links) não
mudam. O que muda é o conteúdo das páginas referenciadas.
A natureza de um banner de propaganda é em geral temporária. Isto quer dizer que (em geral) os banners
existem por determinado tempo, sendo congelados, trocados ou eliminados do site, após o seu tempo de
vida útil.
Inserir um banner de propaganda num mapa do site pode ser perigoso, uma vez que não se costuma ficar
alterando o mapa do site. Em geral, o que se faz é simplesmente ignorar o banner do mapa do site.
Exceção pode ocorrer quando os banners têm carater permanente. Um exemplo disto pode ser um site que
vende pacotes para a Disney. Este site pode ter alguns banners que podem sofrer alterações visuais ou na
página destino, mas o banner sempre existirá na página principal.
Links Externos
O foco do mapa do site é auxiliar o usuário na navegação do site. Em função disto, em geral não se insere
links externos (para outros sites) num Mapa de Site.
Exceções ocorrem quando se deseja destacar sites de parceiros ou sites que sejam úteis ao usuário. Nestes
casos, o desenvolvedor pode inserir uma imagem ou trecho de texto contendo o link para o site do parceiro
(ou terceiro) que se deseja referenciar.
Caso o número de links seja grande pode ser aconselhável a criação de uma página para agrupá-los. Neste
caso talvez seja ideal inserir no mapa do site apenas o link para a página de links úteis.
Idealizando um Mapa de Site

Um Mapa do Site pode também ser desenvolvido de forma a antever/apresentar um modelo desejado para o
site a ser desenvolvido (ainda não existente).
No meu exemplo de projeto de comércio eletrônico (abaixo), costumo apresentar um mapa de site
hipotético de uma aplicação (site) prevendo um conjunto mínimo de funcionalidades que atenda a públicos
alvos distintos (consumidor final, administradores do site,etc).
Note que podemos também utilizar cores diversas para destacar categorias de páginas diferentes. O modelo
abaixo foi desenvolvido utilizando a ferramenta Microsoft Visio ®.

Mecanismos de Pesquisa
Os mecanismos de busca/pesquisa também podem se utilizar de mapas de site para melhor entender a
estrutura de um site. Estes mapas (arquivo XML, arquivo de texto, feed rss) devem ser disponibilizados em
formatos específicos e conter um conjunto de dados esperados para cada página existente no site. Este
mapa do site extrapola o funcionamento padrão do mecanismo de busca que em geral consiste em
identificar os links para páginas existentes dentro do site.
O formato deste arquivo e maiores informações podem ser obtidas na seguinte URL:-
http://www.sitemaps.org/pt_BR/
Softwares para criação do Mapa do Site

Existem alguns softwares que facilitam a criação de mapa de sites. Alguns deles permitem a aplicação de
estilos e cores diferenciados, o que permitirá a alguns web designers apresentarem versões sofisticadas de
seus mapas.
Abordarei dois softwares que tem particularidades interessantes e cujas funcionalidades permitem a criação
de mapas de sites levando em consideração diferentes aspectos no desenvolvimento de um projeto.
WriteMaps
http://www.writemaps.com.br
O WriteMaps ® é uma ferramenta simples, gratuita e on-line (site) que possibilita a criação de mapas de
sites de uma forma bem simples e prática.

Por ser on-line, o usuário pode acessar e manipular seu mapa do site de qualquer lugar que tenha acesso à
Internet.
Os mapas criados podem ser armazenados no próprio site ou salvos localmente no computador do usuário.
O usuário precisa se cadastrar no site e uma vez logado ele pode acessar todos os mapas por ele criados (e
salvos). Esta ferramenta permite a criação de mapas de site de forma rápida, simples e o mais importante,
visualmente.

Algo muito interessante desta ferramenta é que o usuário pode compartilhar seu mapa com outros usuários,
desta forma gerando um ambiente de colaboratividade.
A opção de impressão aliada a um driver de impressão PDF permite a você salvar os mapas do site em
formato PDF.
Você pode ainda gerar o mapa do site no formato XML.
Benefícios
Ferramenta on-line e Gratuita
Propicia um ambiente compartilhado de colaboração
Necessita apenas de conexão internet e navegador web
Dificuldades
Site em inglês
Mapas muito grandes tendem a ser de difícil visualização
Renderização do mapa as vezes não é perfeita.
Limitação de elementos visuais (estilo)
InfoRapid
http://www.inforapid.de/html/knowledgemapeng.htm
Este é um programa interessante que permite a construção de mapas de conhecimento.
No desenvolvimento de um mapa de site, o usuário pode inserir informações num formato de tabela,
visualizando as páginas em seus diversos niveis. O software permite então a visualização da estrutura do
site tanto em formato textual quanto visual.
Algo muito interessante neste software é a possibilidade de escolha de cores e diversos modelos
estruturais:-


Este software gera arquivos próprios

óprios que só
s podem ser abertos por ele. Sua versão
ão gratuita além de inserir
um texto no topo dos mapas de sites criados também
tamb não
ão permite em sua licença o uso comercial da
ferramenta.
Apesar disto é uma boa opçãoão para quem está

est começando poder desenvolver rapidamente um mapa de site
e testar as diferentes formas de visualização.
visualizaç
Desenvolvendo um mapa de site via CSS
Estrutura em forma de árvore
Um exemplo interessante e de fácil

entendimento para o usuário que ilustra de
forma hierarquica a estrutura de um web site foi
criado Robin Parmar e Alexander Sperl cujo
trabalho pode ser encontrado nos links abaixo.
Neste exemplo, os desenhos dos itens das listas

não ordenadas (circulos cheios, circulos vazios e
quadrados) são trocados por imagens que
melhor ilustram a estrutura de um site em forma
de árvore.
http://diagrammes-modernes.blogspot.com/2006/04/styling
modernes.blogspot.com/2006/04/styling-sitemap.html
http://www.alexandersperl.de/tutoria
http://www.alexandersperl.de/tutorials/css/sitemap.html
http://robinparmar.com/blog/sitemap.html

Com base no exemplo do Robin, desenvolvi (acima) o mapa do site do meu projeto básico de comércio
eletrônico (exibido neste artigo). Caso queira o exemplo abaixo (página web), envie-
envie-me um e-mail
solicitando.
Requisitos:: Bons conhecimentos de HTML e conhecimento médio de CSS.
Links Interessantes
Um site super interessante, em português com diversas informações sobre arquitetura da informação,
questões de design e desenvolvimento web é o da Avellar e Duarte Consultoria e Design.
Design No link abaixo
pode se encontrar uma visão interessante sobre Mapas de Sites. Vale a pena conferir:-
conferir:
http://www.avellareduarte.com.br/projeto/interface/interface7/interface7a.htm
p://www.avellareduarte.com.br/projeto/interface/interface7/interface7a.htm
Scott Jehl desenvolveu uma forma interessante de visualizar um mapa de site usando CSS em forma de
árvore. Confira aqui:-
http://www.scottjehl.com/v7/index.php/process/stylemap_visual_sitemap/
Outro local interessante com informações sobre mapa de sites
sites podem ser encontrados no Wikipedia ®,
versão de língua inglesa:-
http://en.wikipedia.org/wiki/Site_map
Conclusão
O importante nesta ferramenta é o benefício
benef que ela pode trazer, tanto para o usuário
ário comum pela
facilidade de navegação quanto ao desenvolvedor na organização da estrutura de um site.
site
O Mapa do Site é uma

ma ferramenta cada vez mais frequente nos sites de internet. A criação
criaç desta ferramenta
é algo que todo desenvolvedor deverá
deve focar em algum momento de sua carreira.
cmajer@uol.com.br
cmajer@ig.com.br
Carlos Majer.

Mapa Do Site - Considerações No Desenvolvimento

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Mapa Do Site - Considerações No Desenvolvimento

Enviado por

Direitos autorais:

Formatos disponíveis

DESENVOLVIMENTO WEB – MAPA DO SITE 15 de Março de 2009

Código HTML do exemplo acima:-

Prof. Carlos Majer Página 1

Prof. Carlos Majer Página 2

O desenvolvedor como consumidor do Mapa

Prof. Carlos Majer Página 3

Prof. Carlos Majer Página 4

O que colocar num Mapa do Site

Prof. Carlos Majer Página 5

Este tipo de site tem como características as seguintes funcionalidades:-

Galeria de Produtos e Serviços

Vamos analisar as questões acima?

Produtos/Serviços sofrem variações

Como seria a experiência do usuário se toda vez que entrar no Mapa

Prof. Carlos Majer Página 6

Um mapa de site costuma ser um elemento estático de informação.

Texto, figuras e videos

Uma exceção ocorre quando a área de newsletter for um chamariz

Prof. Carlos Majer Página 7

Banners de Propaganda (advertisements = ads)

Idealizando um Mapa de Site

Prof. Carlos Majer Página 8

Softwares para criação do Mapa do Site

Prof. Carlos Majer Página 9

Prof. Carlos Majer Página 10

Você pode ainda gerar o mapa do site no formato XML.

Este é um programa interessante que permite a construção de mapas de conhecimento.

Prof. Carlos Majer Página 11

Prof. Carlos Majer Página 12

Este software gera arquivos próprios

Apesar disto é uma boa opçãoão para quem está

Desenvolvendo um mapa de site via CSS

Estrutura em forma de árvore

Um exemplo interessante e de fácil

Neste exemplo, os desenhos dos itens das listas

Prof. Carlos Majer Página 13

O Mapa do Site é uma

Prof. Carlos Majer Página 14

Você também pode gostar