Mapa Do Site - Considerações No Desenvolvimento

  • Uploaded by: Carlos Majer
  • 0
  • 0
  • April 2020
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Mapa Do Site - Considerações No Desenvolvimento as PDF for free.

More details

  • Words: 2,909
  • Pages: 14
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: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20:

Exemplo de Mapa apa do Site Site

Mapa do Site



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

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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.

Prof. Carlos Majer

Página 2

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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.

Prof. Carlos Majer

Página 3

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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

Prof. Carlos Majer

Página 4

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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:-

Prof. Carlos Majer

Página 5

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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 dinamicamente e 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 ?

Prof. Carlos Majer

Página 6

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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.

Prof. Carlos Majer

Página 7

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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 ®.

Prof. Carlos Majer

Página 8

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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.

Prof. Carlos Majer

Página 9

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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.

Prof. Carlos Majer

Página 10

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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:-

Prof. Carlos Majer

Página 11

DESENVOLVIMENTO WEB – MAPA DO SITE

Prof. Carlos Majer

15 de Março de 2009

Página 12

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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. ão para quem está est começando poder desenvolver rapidamente um mapa de site Apesar disto é uma boa opção 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

Prof. Carlos Majer

Página 13

DESENVOLVIMENTO WEB – MAPA DO SITE

15 de Março de 2009

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), envieenvie-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.

[email protected] [email protected] Carlos Majer.

Prof. Carlos Majer

Página 14

Related Documents


More Documents from "Luciana Zandona"

October 2019 20
Css - Estilizando Divs
October 2019 18
Instalando Site Na Internet
October 2019 30
April 2020 9
April 2020 5