1
00:00:00,000 --> 00:00:04,114
[MÚSICA]

2
00:00:04,114 --> 00:00:07,200
Vamos agora falar sobre navegação.

3
00:00:07,200 --> 00:00:12,980
O que é navegação, por que a navegação é importante para o seu site?

4
00:00:12,980 --> 00:00:16,820
E como você fornece informações de navegação em seu site?

5
00:00:16,820 --> 00:00:22,264
Então, esta é a pergunta que vamos tentar responder nesta palestra em particular.

6
00:00:23,746 --> 00:00:27,058
A primeira pergunta óbvia que vem à sua mente é,

7
00:00:27,058 --> 00:00:30,500
por que precisamos ter navegação no site?

8
00:00:30,500 --> 00:00:34,680
Como você percebe, a maioria dos sites não são mais páginas únicas.

9
00:00:34,680 --> 00:00:37,840
Claro, existem sites de páginas únicas,

10
00:00:37,840 --> 00:00:42,500
como a página do seu professor, no seu departamento de ciência da computação.

11
00:00:42,500 --> 00:00:47,450
Mas a maioria dos sites geralmente contém mais de uma página.

12
00:00:47,450 --> 00:00:52,080
Como vimos com o nosso site de confusão que estamos construindo,

13
00:00:52,080 --> 00:00:56,300
já adicionamos uma segunda página chamada página aboutus.html.

14
00:00:56,300 --> 00:01:01,100
Agora, a maneira como navegamos para a página aboutus.html era

15
00:01:01,100 --> 00:01:06,259
digitá-la explicitamente na barra de endereço do nosso navegador.

16
00:01:06,259 --> 00:01:11,300
Mas essa é uma maneira muito inconveniente de navegar para o seu site.

17
00:01:12,380 --> 00:01:17,685
Faria muito mais sentido fornecer um meio intuitivo para

18
00:01:17,685 --> 00:01:21,125
os usuários navegarem até o seu site.

19
00:01:21,125 --> 00:01:26,535
Este meio intuitivo poderia ser fornecido por muitas abordagens diferentes,

20
00:01:26,535 --> 00:01:32,972
sendo a barra de navegação um dos métodos mais comuns para indicar esta informação.

21
00:01:32,972 --> 00:01:37,342
Então, analisaremos várias maneiras comuns de fornecer

22
00:01:37,342 --> 00:01:41,392
padrões de navegação em sites típicos.

23
00:01:41,392 --> 00:01:46,656
Neste contexto, muitas vezes você ouve pessoas falando sobre arquitetura de informação.

24
00:01:46,656 --> 00:01:51,458
A arquitetura da informação começa com a estrutura do sistema, no

25
00:01:51,458 --> 00:01:55,879
que diz respeito à forma como a informação é organizada, rotulada.

26
00:01:55,879 --> 00:02:01,340
E a navegação é fornecida através do conteúdo ou através desta informação.

27
00:02:01,340 --> 00:02:05,240
Agora, a arquitetura da informação, por si só, é um grande campo.

28
00:02:05,240 --> 00:02:09,375
Está além do escopo deste curso para abranger arquiteto de informação.

29
00:02:09,375 --> 00:02:14,475
Mas, no caso de você estar interessado em organizar e

30
00:02:14,475 --> 00:02:18,145
fornecer informações aos usuários através de, por exemplo

31
00:02:18,145 --> 00:02:23,067
, sites, então eu forneci alguns links nos recursos adicionais

32
00:02:23,067 --> 00:02:27,727
que você pode ir e ler para obter mais conhecimento.

33
00:02:27,727 --> 00:02:30,317
Mas, em qualquer caso, quando você está projetando um site,

34
00:02:30,317 --> 00:02:35,887
é importante entender a necessidade de

35
00:02:35,887 --> 00:02:41,697
projetar as estruturas de navegação de informações dentro do seu site.

36
00:02:43,930 --> 00:02:48,970
E essa organização de informações dentro de seu site também determina

37
00:02:48,970 --> 00:02:53,545
que tipo de ajuda de navegação você fornece em seu site, e

38
00:02:53,545 --> 00:02:57,280
com base em como essas informações são organizadas.

39
00:02:57,280 --> 00:03:02,300
Normalmente, um site seria organizado em algum tipo de árvore estruturada ou

40
00:03:02,300 --> 00:03:04,630
de forma hierárquica.

41
00:03:04,630 --> 00:03:07,359
E isso determina automaticamente

42
00:03:07,359 --> 00:03:11,913
como você projetaria o suporte de navegação dentro do seu site.

43
00:03:11,913 --> 00:03:16,737
O uso de uma barra de navegação, migalhas de navegação e

44
00:03:16,737 --> 00:03:22,405
outros meios de navegação são muito, muito essenciais para

45
00:03:22,405 --> 00:03:29,760
permitir que os usuários possam ver várias partes do seu site.

46
00:03:29,760 --> 00:03:35,150
Quando você visita a maioria dos sites, muitas vezes você vai procurar a barra de navegação.

47
00:03:35,150 --> 00:03:40,080
Esta é uma espécie de barra que é tipicamente anexada na parte superior

48
00:03:40,080 --> 00:03:45,570
do site, ou às vezes na parte inferior do site, ou às vezes no lado,

49
00:03:45,570 --> 00:03:50,865
que fornece indicações suficientes para o tipo

50
00:03:50,865 --> 00:03:56,365
de informação que você pode acessar neste site.

51
00:03:56,365 --> 00:04:01,095
Portanto, sua barra de navegação normalmente conterá links para várias páginas que

52
00:04:01,095 --> 00:04:04,615
fazem parte do seu site.

53
00:04:04,615 --> 00:04:09,425
Então, uma barra de navegação típica, como você faz para projetar isso?

54
00:04:09,425 --> 00:04:13,085
Ao projetar uma barra de navegação típica, você deve obviamente ter

55
00:04:14,360 --> 00:04:19,500
em mente algumas coisas e não fazer sobre como você projetar barras de navegação.

56
00:04:19,500 --> 00:04:23,870
Primeiro é que você usa

57
00:04:23,870 --> 00:04:28,960
termos simples e fáceis de usar dentro de sua barra de navegação para indicar os vários links

58
00:04:28,960 --> 00:04:34,900
que os usuários podem seguir dentro de seu site para obter informações..

59
00:04:34,900 --> 00:04:37,070
Você deve fornecer uma navegação padronizada, para

60
00:04:37,070 --> 00:04:41,090
que, onde quer que o usuário esteja dentro da hierarquia de seu site, ele

61
00:04:41,090 --> 00:04:46,590
sempre saberá como voltar para a página inicial, como ir para a

62
00:04:46,590 --> 00:04:50,760
hierarquia seguinte, anterior ou para cima e para baixo de algum tipo.

63
00:04:50,760 --> 00:04:54,670
Assim, indicar a localização do usuário

64
00:04:54,670 --> 00:04:59,910
dentro da hierarquia do seu site é muito, muito útil

65
00:04:59,910 --> 00:05:04,790
para fornecer uma maneira amigável de navegar em seus sites.

66
00:05:04,790 --> 00:05:09,345
Além disso, existem algumas convenções padrão que as pessoas seguem

67
00:05:09,345 --> 00:05:12,365
quando essas barras de navegação são projetadas.

68
00:05:12,365 --> 00:05:17,515
Normalmente, quando você tem o logotipo do seu site ou da

69
00:05:17,515 --> 00:05:23,832
sua empresa incluído na barra de navegação, um clique nesses logotipos ou

70
00:05:23,832 --> 00:05:29,177
um botão inicial deve levá-lo de volta ao nível mais alto da hierarquia ou

71
00:05:29,177 --> 00:05:33,711
da página inicial do seu site, normalmente a página index.html.

72
00:05:33,711 --> 00:05:38,817
Algumas das coisas que você deve ter em mente é que você não deve ter muitas

73
00:05:38,817 --> 00:05:41,457
opções em sua barra de navegação.

74
00:05:41,457 --> 00:05:43,225
Quantos são muitos?

75
00:05:43,225 --> 00:05:48,470
Se você achar que navegar usando suas barras de navegação é muito complicado

76
00:05:48,470 --> 00:05:52,240
, isso significa que há muitas opções na barra de navegação.

77
00:05:52,240 --> 00:05:58,010
Forneça um conjunto razoável de opções dentro da barra de navegação para que você possa

78
00:05:58,010 --> 00:06:04,659
indicar as instruções que o usuário pode seguir ao navegar pelo seu site.

79
00:06:05,880 --> 00:06:11,230
E quando você usa esses elementos de navegação na barra de navegação,

80
00:06:11,230 --> 00:06:17,090
não use rótulos genéricos, use rótulos significativos.

81
00:06:17,090 --> 00:06:22,159
Por exemplo, se você colocar um rótulo chamado produto na

82
00:06:22,159 --> 00:06:28,630
barra de navegação, as pessoas ficarão confusas sobre o que você quer dizer com produto.

83
00:06:28,630 --> 00:06:32,650
Ou digamos, se você colocar um serviço em sua barra de navegação, eles podem estar confusos.

84
00:06:32,650 --> 00:06:34,780
Que tipo de serviço você está prestando?

85
00:06:34,780 --> 00:06:38,790
Será mais significativo dar um termo mais descritivo

86
00:06:38,790 --> 00:06:43,710
em seus cabeçalhos na barra de navegação.

87
00:06:43,710 --> 00:06:46,380
Outro meio de fornecer navegação para

88
00:06:46,380 --> 00:06:50,030
os usuários é fornecer o que é chamado de pão ralado.

89
00:06:50,030 --> 00:06:55,895
Eles são normalmente fornecidos em algum lugar dessa página,

90
00:06:55,895 --> 00:07:00,737
típico para a borda superior da página da Web,

91
00:07:00,737 --> 00:07:04,954
mais perto do cabeçalho dessa página da Web.

92
00:07:04,954 --> 00:07:10,513
As migalhas de pão indicam algum tipo de

93
00:07:10,513 --> 00:07:16,255
hierarquia de navegação dentro da qual você está atualmente em seu site.

94
00:07:16,255 --> 00:07:21,595
Portanto, isso fornece uma opção de navegação secundária para o seu site.

95
00:07:21,595 --> 00:07:26,185
Então isso pode ser colocado em algum lugar abaixo da navegação primária.

96
00:07:26,185 --> 00:07:32,082
Ele pode indicar a hierarquia de páginas através das quais você passou.

97
00:07:32,082 --> 00:07:36,687
E a localização atual pode ser destacada especificamente

98
00:07:36,687 --> 00:07:38,727
na migalha de pão lá.

99
00:07:38,727 --> 00:07:43,708
Assim, várias maneiras pelas quais as pessoas podem usar breadcrumbs

100
00:07:43,708 --> 00:07:48,588
incluem fornecer uma navegação baseada em caminho.

101
00:07:48,588 --> 00:07:53,558
Digamos, por exemplo, se você tiver um usuário passando por um conjunto de etapas para

102
00:07:53,558 --> 00:07:59,358
concluir uma tarefa em seu site, digamos, por exemplo, reservar um bilhete de avião.

103
00:07:59,358 --> 00:08:04,780
Em seguida, você pode usar uma abordagem de breadcrumb para indicar a eles em

104
00:08:04,780 --> 00:08:09,880
que passo o usuário está atualmente na sequência de etapas.

105
00:08:09,880 --> 00:08:14,320
Da mesma forma, se você estiver fornecendo sua navegação baseada em localização para

106
00:08:14,320 --> 00:08:18,460
abordagem hierárquica dentro do seu site.

107
00:08:18,460 --> 00:08:23,785
Então, em que nível de hierarquia você está e qual é a parte superior em direção

108
00:08:23,785 --> 00:08:29,680
à raiz de sua hierarquia, de modo que isso poderia ser indicado por suas migalhas de pão.

109
00:08:29,680 --> 00:08:35,092
Sua trilha de pão também pode ser baseada em atributos, o que significa que você fornece um conjunto

110
00:08:35,092 --> 00:08:40,754
de opções indicadas em sua trilha de acesso para o usuário no momento atual.

111
00:08:40,754 --> 00:08:45,032
Uma estrutura típica de interface do usuário front-end fornece muitas

112
00:08:45,032 --> 00:08:49,840
outras maneiras de fornecer navegação em suas páginas da Web.

113
00:08:49,840 --> 00:08:54,555
Estes incluem guias, pílulas, paginação, suspensos,

114
00:08:54,555 --> 00:08:59,210
acordeões, etiquetas e SchrollSpy e Affix.

115
00:08:59,210 --> 00:09:04,447
Vamos analisar alguns deles com um pouco mais de detalhes à medida que passamos

116
00:09:04,447 --> 00:09:10,614
pelas várias lições nos módulos que seguem esta lição em particular.

117
00:09:10,614 --> 00:09:11,114
[ MUSIC]