BREADCRUMB
www.phmendes.com | @phmendes | paulo@phmendes.com
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ç...
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
*Ob...
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...
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"...
• 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...
• 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 br...
www.phmendes.com
Essas e outras dicas e discussões em:
www.phmendes.com
Obrigado!
Próximos SlideShares
Carregando em…5
×

Apresentação básica do breadcrumb, o que é e como funciona.

350 visualizações

Publicada em

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.

Publicada em: Marketing
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
350
No SlideShare
0
A partir de incorporações
0
Número de incorporações
6
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Apresentação básica do breadcrumb, o que é e como funciona.

  1. 1. BREADCRUMB www.phmendes.com | @phmendes | paulo@phmendes.com
  2. 2. 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
  3. 3. TIPOS DE BREADCRUMBS www.phmendes.com
  4. 4. 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.
  5. 5. Breadcrumb de atributo • Servem para exibir os atributos de uma determinada página. www.phmendes.com
  6. 6. 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
  7. 7. Finalidade www.phmendes.com
  8. 8. 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
  9. 9. • Para que funcione corretamente as páginas do site precisam ser organizadas hierarquicamente. www.phmendes.com Requisitos
  10. 10. Implantação www.phmendes.com
  11. 11. <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
  12. 12. • 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
  13. 13. www.phmendes.com Essas e outras dicas e discussões em: www.phmendes.com Obrigado!

×