Embed Size (px)
DESCRIPTION
Com o crescimento da quantidade de informações que trafegam pela internet a marcação de dados torna-se cada vez mais necessário o breadcrumb é uma marcação que serve como referência para a localização do usuário em um site ou aplicação web. Traduzindo literalmente, significa “migalha de pão”. Servem para deixar claro o caminho que o usuário leva até chegar à página.
Citation preview
O que são?
• Esquema de navegação estrutural que serve como referência para a localização do usuário em um site ou aplicação web.
www.phmendes.com
TIPOS DE BREADCRUMBS
www.phmendes.com
Breadcrumb de localização
• Mostra ao usuário em qual ponto se encontra dentro da hierarquia do site.
www.phmendes.com
*Observe que o último item que é referente a página que o usuário esta, não tem link.
Breadcrumb de atributo
• Servem para exibir os atributos de uma determinada página.
www.phmendes.com
Breadcrumb de caminho
• Mostra ao usuário de forma dinâmica o passo que tomou para chegar a página que ele esta atualmente.
• Segue a mesma linha de diagramação do breadcrumb de localização, o que muda é a funcionalidade.
www.phmendes.com
Finalidade
www.phmendes.com
Finalidade
• Estruturar a informação para que o conteúdo seja encontrável por humanos e robôs.
• Uma maneira de "rastrear" o caminho de volta e/ou ter uma visão geral e estruturada de em que ponto se encontra dentro da hierarquia em que se encontra.
• Ajuda visual eficaz que indica a localização do usuário dentro da hierarquia do site, tornando-se uma grande fonte de informação contextual.
www.phmendes.com
• Para que funcione corretamente as páginas do site precisam ser organizadas hierarquicamente.
www.phmendes.com
Requisitos
Implantação
www.phmendes.com
<div itemscope itemtype="http://schema.org/WebPage"><ol itemprop="breadcrumb">
<li><a href="category/books.html">Books</a> ></li><li><a href="category/books-literature.html">Literature & Fiction</a> ></li><li><a href="category/books-classics">Classics</a></li>
</ol></div>
www.phmendes.com
Forma convencional
Existem outras maneiras de configurar o breadcumb a mais convencional é a marcação organizada e mantida através do schema.org iniciativa colaborativa dos principais buscadores Google, Yahoo e Bing
• Cuidado para não criar opções de navegação demais. Navegação primária, breadcrumb e navegação secundária.
• Não use o breadcumb como navegação primaria.
• Decidir se deve usar breadcrumb depende de como a hierarquia do site foi projetada. Quando uma página de nível inferior é (ou pode ser colocada) em mais de uma categoria-mãe, breadcrumbs são ineficazes, imprecisos e confusos para o usuário.
www.phmendes.com
Considerações
www.phmendes.com
Essas e outras dicas e discussões em: www.phmendes.com
Obrigado!
