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

2
00:00:04,114 --> 00:00:07,200
Ahora hablemos de navegación.

3
00:00:07,200 --> 00:00:12,980
¿ Qué es la navegación, por qué es importante la navegación para su sitio web?

4
00:00:12,980 --> 00:00:16,820
¿ Y cómo proporcionamos información de navegación en su sitio web?

5
00:00:16,820 --> 00:00:22,264
Por lo tanto, estas son las preguntas que trataremos de responder en esta conferencia en particular.

6
00:00:23,746 --> 00:00:27,058
La primera pregunta obvia que te viene a la mente es,

7
00:00:27,058 --> 00:00:30,500
¿por qué necesitamos tener navegación por el sitio web?

8
00:00:30,500 --> 00:00:34,680
Como se da cuenta, la mayoría de los sitios web ya no son páginas individuales.

9
00:00:34,680 --> 00:00:37,840
Por supuesto, existen esos sitios web de una sola página

10
00:00:37,840 --> 00:00:42,500
como la página web de tu profesor en tu departamento de ciencias de la computación.

11
00:00:42,500 --> 00:00:47,450
Pero la mayoría de los sitios web suelen contener más de una página.

12
00:00:47,450 --> 00:00:52,080
Como hemos visto con nuestro sitio web de confusión que estamos construyendo,

13
00:00:52,080 --> 00:00:56,300
ya hemos añadido una segunda página llamada página aboutus.html.

14
00:00:56,300 --> 00:01:01,100
Ahora la forma en que navegamos a la página aboutus.html fue

15
00:01:01,100 --> 00:01:06,259
escribirlo explícitamente en la barra de direcciones de nuestro navegador.

16
00:01:06,259 --> 00:01:11,300
Pero esa es una forma muy incómoda de navegar a su sitio web.

17
00:01:12,380 --> 00:01:17,685
Tendría mucho más sentido proporcionar un medio intuitivo para que

18
00:01:17,685 --> 00:01:21,125
los usuarios naveguen a su sitio web.

19
00:01:21,125 --> 00:01:26,535
Este medio intuitivo podría ser proporcionado por muchos enfoques diferentes,

20
00:01:26,535 --> 00:01:32,972
siendo la barra de navegación uno de los métodos más comunes para indicar esta información.

21
00:01:32,972 --> 00:01:37,342
Por lo tanto, veremos varias formas comunes de proporcionar

22
00:01:37,342 --> 00:01:41,392
patrones de navegación en sitios web típicos.

23
00:01:41,392 --> 00:01:46,656
En este contexto, a menudo se oye a la gente hablar de la arquitectura de la información.

24
00:01:46,656 --> 00:01:51,458
La arquitectura de la información comienza con la estructura del sistema,

25
00:01:51,458 --> 00:01:55,879
con respecto a la forma en que se organiza la información, etiquetada.

26
00:01:55,879 --> 00:02:01,340
Y la navegación se proporciona a través del contenido o a través de esta información.

27
00:02:01,340 --> 00:02:05,240
Ahora la arquitectura de la información, por sí misma, es un gran campo.

28
00:02:05,240 --> 00:02:09,375
Está más allá del alcance de este curso para cubrir a arquitectos de la información.

29
00:02:09,375 --> 00:02:14,475
Pero, en caso de que esté interesado en organizar y

30
00:02:14,475 --> 00:02:18,145
proporcionar información a los usuarios a través de, por ejemplo

31
00:02:18,145 --> 00:02:23,067
, sitios web, entonces le he proporcionado algunos enlaces en los recursos adicionales

32
00:02:23,067 --> 00:02:27,727
que puede ir y leer para mayor conocimiento.

33
00:02:27,727 --> 00:02:30,317
Pero en cualquier caso, al diseñar un sitio web,

34
00:02:30,317 --> 00:02:35,887
es importante entender la necesidad de diseñar las

35
00:02:35,887 --> 00:02:41,697
estructuras de navegación de la información dentro de su sitio web.

36
00:02:43,930 --> 00:02:48,970
Y esta organización de información dentro de su sitio web también dicta

37
00:02:48,970 --> 00:02:53,545
qué tipo de ayudas de navegación usted proporciona en su sitio web, y

38
00:02:53,545 --> 00:02:57,280
en función de cómo se organiza esa información.

39
00:02:57,280 --> 00:03:02,300
Por lo general, un sitio web se organizaría en algún tipo de árbol estructurado o

40
00:03:02,300 --> 00:03:04,630
de manera jerárquica.

41
00:03:04,630 --> 00:03:07,359
Y eso le dicta automáticamente

42
00:03:07,359 --> 00:03:11,913
cómo diseñaría el soporte de navegación dentro de su sitio web.

43
00:03:11,913 --> 00:03:16,737
El uso de una barra de navegación, migas de pan y

44
00:03:16,737 --> 00:03:22,405
otros medios de navegación son muy, muy esenciales para

45
00:03:22,405 --> 00:03:29,760
permitir que los usuarios puedan ver varias partes de su sitio web.

46
00:03:29,760 --> 00:03:35,150
Cuando visita la mayoría de los sitios web, a menudo buscará la barra de navegación.

47
00:03:35,150 --> 00:03:40,080
Esta es una especie de barra que normalmente se adjunta en la parte superior

48
00:03:40,080 --> 00:03:45,570
del sitio web, o a veces en la parte inferior del sitio web, o a veces en el lateral,

49
00:03:45,570 --> 00:03:50,865
que le proporciona suficientes punteros hacia el tipo

50
00:03:50,865 --> 00:03:56,365
de información a la que puede acceder en este sitio.

51
00:03:56,365 --> 00:04:01,095
Por lo tanto, su barra de navegación normalmente contendrá enlaces a varias páginas que

52
00:04:01,095 --> 00:04:04,615
forman parte de su sitio web.

53
00:04:04,615 --> 00:04:09,425
Entonces, una barra de navegación típica, ¿cómo se va a diseñar esto?

54
00:04:09,425 --> 00:04:13,085
Cuando diseña una barra de navegación típica, obviamente debe

55
00:04:14,360 --> 00:04:19,500
tener en cuenta algunas cosas que hacer y no hacer acerca de cómo diseña las barras de navegación.

56
00:04:19,500 --> 00:04:23,870
En primer lugar, utiliza

57
00:04:23,870 --> 00:04:28,960
términos sencillos y fáciles de usar dentro de su barra de navegación para indicar los diversos enlaces

58
00:04:28,960 --> 00:04:34,900
que los usuarios pueden seguir dentro de su sitio web para llegar a información.

59
00:04:34,900 --> 00:04:37,070
Debe proporcionar una navegación estandarizada, para

60
00:04:37,070 --> 00:04:41,090
que dondequiera que el usuario se

61
00:04:41,090 --> 00:04:46,590
encuentre dentro de la jerarquía de su sitio web, siempre sepa cómo volver a la página de inicio, cómo ir a la siguiente

62
00:04:46,590 --> 00:04:50,760
, anterior o arriba y abajo de la jerarquía de algún tipo.

63
00:04:50,760 --> 00:04:54,670
Por lo tanto, indicar la ubicación del usuario

64
00:04:54,670 --> 00:04:59,910
dentro de la jerarquía de su sitio web es muy, muy útil

65
00:04:59,910 --> 00:05:04,790
para proporcionar una forma fácil de usar de navegar por sus sitios web.

66
00:05:04,790 --> 00:05:09,345
Además, hay algunas convenciones estándar que las personas siguen

67
00:05:09,345 --> 00:05:12,365
cuando se diseñan estas barras de navegación.

68
00:05:12,365 --> 00:05:17,515
Normalmente, cuando tiene el logotipo de su sitio web o de

69
00:05:17,515 --> 00:05:23,832
su empresa incluido en su barra de navegación, un clic en estos logotipos o

70
00:05:23,832 --> 00:05:29,177
un botón de inicio le llevará de vuelta al nivel superior de la jerarquía o

71
00:05:29,177 --> 00:05:33,711
la página principal de su sitio web, normalmente la página index.html.

72
00:05:33,711 --> 00:05:38,817
Algunas de las cosas que no debes tener en cuenta es que no deberías tener demasiadas

73
00:05:38,817 --> 00:05:41,457
opciones en tu barra de navegación.

74
00:05:41,457 --> 00:05:43,225
¿ Cuántos son demasiados?

75
00:05:43,225 --> 00:05:48,470
Si encuentra que navegar usando sus barras de navegación es demasiado engorroso,

76
00:05:48,470 --> 00:05:52,240
entonces eso significa que hay demasiadas opciones en su barra de navegación.

77
00:05:52,240 --> 00:05:58,010
Proporcione un conjunto razonable de opciones dentro de su barra de navegación para que pueda

78
00:05:58,010 --> 00:06:04,659
indicar las instrucciones que el usuario puede seguir al navegar por su sitio web.

79
00:06:05,880 --> 00:06:11,230
Y cuando utilice estos elementos de navegación en la barra de navegación,

80
00:06:11,230 --> 00:06:17,090
no utilice etiquetas genéricas, utilice etiquetas significativas.

81
00:06:17,090 --> 00:06:22,159
Por ejemplo, si coloca una etiqueta con nombre de producto en la

82
00:06:22,159 --> 00:06:28,630
barra de navegación, las personas se confundirán acerca de lo que quiere decir por producto.

83
00:06:28,630 --> 00:06:32,650
O digamos, si pones un servicio en la barra de navegación, pueden estar confundidos.

84
00:06:32,650 --> 00:06:34,780
¿ Qué tipo de servicio está prestando?

85
00:06:34,780 --> 00:06:38,790
Será más significativo dar un término más descriptivo

86
00:06:38,790 --> 00:06:43,710
en los encabezados de la barra de navegación.

87
00:06:43,710 --> 00:06:46,380
Otro medio de proporcionar navegación

88
00:06:46,380 --> 00:06:50,030
a los usuarios es proporcionar lo que se llama pan rallado.

89
00:06:50,030 --> 00:06:55,895
Por lo general, se proporcionan en algún lugar de esa página,

90
00:06:55,895 --> 00:07:00,737
típico hacia el borde superior de la página web,

91
00:07:00,737 --> 00:07:04,954
más cerca del encabezado de esa página web.

92
00:07:04,954 --> 00:07:10,513
Las

93
00:07:10,513 --> 00:07:16,255
migas de pan indican algún tipo de jerarquía de navegación dentro de la cual se encuentra actualmente en su sitio web.

94
00:07:16,255 --> 00:07:21,595
Así que esto proporciona una opción de navegación secundaria para su sitio web.

95
00:07:21,595 --> 00:07:26,185
Así que esto podría colocarse en algún lugar debajo de la navegación primaria.

96
00:07:26,185 --> 00:07:32,082
Puede indicar la jerarquía de páginas a través de las cuales ha pasado.

97
00:07:32,082 --> 00:07:36,687
Y la ubicación actual se puede resaltar específicamente en

98
00:07:36,687 --> 00:07:38,727
la miga de pan allí.

99
00:07:38,727 --> 00:07:43,708
Por lo tanto, varias maneras en que las personas pueden usar migas de pan

100
00:07:43,708 --> 00:07:48,588
incluyen proporcionar una navegación basada en rutas.

101
00:07:48,588 --> 00:07:53,558
Digamos, por ejemplo, si tiene un usuario que está pasando por un conjunto de pasos para

102
00:07:53,558 --> 00:07:59,358
completar una tarea en su sitio web, por ejemplo, reservando un billete de avión.

103
00:07:59,358 --> 00:08:04,780
Luego puede usar un enfoque de miga de pan para indicarles en

104
00:08:04,780 --> 00:08:09,880
qué paso se encuentra el usuario actualmente en la secuencia de pasos.

105
00:08:09,880 --> 00:08:14,320
Del mismo modo, si está proporcionando su navegación basada en ubicación para un

106
00:08:14,320 --> 00:08:18,460
enfoque jerárquico dentro de su sitio web.

107
00:08:18,460 --> 00:08:23,785
Entonces, en qué nivel de jerarquía estás y cuál es la parte superior hacia

108
00:08:23,785 --> 00:08:29,680
la raíz de tu jerarquía, para que eso pueda ser indicado por tus migas de pan. La ruta de

109
00:08:29,680 --> 00:08:35,092
exploración también puede estar basada en atributos, lo que significa que proporciona un conjunto

110
00:08:35,092 --> 00:08:40,754
de opciones indicadas en la ruta de exploración para el usuario en el momento actual.

111
00:08:40,754 --> 00:08:45,032
Un marco de interfaz de usuario de front-end típico proporciona muchas

112
00:08:45,032 --> 00:08:49,840
otras formas de proporcionar navegación en sus páginas web.

113
00:08:49,840 --> 00:08:54,555
Estos incluyen pestañas, píldoras, paginación, desplegables,

114
00:08:54,555 --> 00:08:59,210
acordeones, etiquetas, y SchrollSpy, y Affix.

115
00:08:59,210 --> 00:09:04,447
Vamos a ver algunos de ellos con un poco más de detalle a medida que vamos a través de

116
00:09:04,447 --> 00:09:10,614
las diferentes lecciones de los módulos que siguen a esta lección en particular.

117
00:09:10,614 --> 00:09:11,114
[ MÚSICA]