libretube/content/wp-content/uploads/article/subtitles/2019/03/0008-nav-ul-ol-li-es.vtt

WEBVTT

1
00:00:00.360 --> 00:00:03.260
bien hablaremos sobre la etiqueta nav

2
00:00:03.260 --> 00:00:07.020
la etiqueta nav  es la etiqueta que se encuentra dentro de

3
00:00:07.020 --> 00:00:10.000
de header algunas veces, también está debajo

4
00:00:10.340 --> 00:00:12.300
pero esta no es la única estructura

5
00:00:12.300 --> 00:00:15.760
también la etiqueta nav podría estar al costado

6
00:00:16.000 --> 00:00:21.460
por ejemplo aquí tenemos el header donde podría estar el banner, el logotipo de la empresa, de la página web

7
00:00:21.880 --> 00:00:24.460
y a los laterales podría estar la etiqueta nav

8
00:00:25.080 --> 00:00:29.480
en conocimientos libres la página que tengo de muestra para este curso

9
00:00:31.700 --> 00:00:34.740
la etiqueta nav esta dentro del header

10
00:00:36.520 --> 00:00:37.960
pero no es

11
00:00:38.580 --> 00:00:41.600
obligatorio que la etiqueta nav este dentro de header

12
00:00:41.600 --> 00:00:43.800
como ya mostré en la imagen anterior

13
00:00:43.800 --> 00:00:46.300
etiqueta nav podría estar a los costados

14
00:00:46.380 --> 00:00:48.500
inclussive podria estar debajo

15
00:00:50.740 --> 00:00:52.820
entonces vamos a ver esto ahora en código

16
00:00:53.920 --> 00:00:56.020
cómo sería para poder

17
00:00:56.600 --> 00:00:57.840
escribirlo

18
00:00:58.560 --> 00:00:59.500
primero

19
00:00:59.500 --> 00:01:02.500
deberíamos de escribir una etiqueta header

20
00:01:04.800 --> 00:01:07.400
Ahora la etiqueta nav podría estar

21
00:01:07.400 --> 00:01:10.920
dentro de header o también podría estar fuera de header

22
00:01:12.500 --> 00:01:14.400
para escribir una etiqueta

23
00:01:14.400 --> 00:01:16.400
nav sería de esta forma

24
00:01:16.720 --> 00:01:17.800
ahí lo tenemos

25
00:01:18.460 --> 00:01:20.780
etiqueta nav que habré etiqueta nav que cierra

26
00:01:21.260 --> 00:01:22.900
y dentro de la etiquet nav

27
00:01:22.900 --> 00:01:25.480
podríamos poner una lista

28
00:01:25.480 --> 00:01:27.480
una lista de items

29
00:01:29.200 --> 00:01:32.940
vamos a revisar la ṕágina de conocimientos libres

30
00:01:33.240 --> 00:01:35.880
y cada una de esteas opciones

31
00:01:37.620 --> 00:01:41.240
del menú, porque esto, todo esto sería una etiqueta nav

32
00:01:41.500 --> 00:01:42.860
y cada una de estas opciones

33
00:01:43.040 --> 00:01:44.120
sería un

34
00:01:44.400 --> 00:01:47.340
list items o una lista de items

35
00:01:47.660 --> 00:01:49.080
¿y cómo se escribe eso?

36
00:01:49.080 --> 00:01:51.580
bueno se escribe. Hay varias formas

37
00:01:54.000 --> 00:01:56.640
podríamos hacer una lista ordenada

38
00:01:56.640 --> 00:01:58.640
con un ol

39
00:01:59.280 --> 00:02:00.540
ol: order list

40
00:02:00.540 --> 00:02:01.920
una lista ordenada

41
00:02:02.700 --> 00:02:05.380
o también podríamos hacer un

42
00:02:06.860 --> 00:02:08.240
unordered list

43
00:02:08.420 --> 00:02:10.960
es decir una lista desordenada

44
00:02:12.080 --> 00:02:13.300
mayormente

45
00:02:15.080 --> 00:02:17.380
las etiquetas contienen

46
00:02:18.000 --> 00:02:19.040
etiquetas

47
00:02:20.780 --> 00:02:23.580
li: list items

48
00:02:24.720 --> 00:02:25.400
es decir

49
00:02:25.880 --> 00:02:27.460
estas dos etiquetas

50
00:02:27.460 --> 00:02:30.660
contienen etiquetas list items

51
00:02:31.440 --> 00:02:34.540
podríamos utilizar este o este otro

52
00:02:35.680 --> 00:02:39.860
vamos a dejarlo así para ver qué diferencia hay entre los dos

53
00:02:40.220 --> 00:02:41.780
por ejemplo vamos a poner aquí

54
00:02:42.060 --> 00:02:43.380
items

55
00:02:43.940 --> 00:02:45.360
no, items nada más

56
00:02:45.360 --> 00:02:47.360
aquí también otro

57
00:02:47.920 --> 00:02:48.880
item

58
00:02:49.800 --> 00:02:51.540
de esta forma vamos guardar

59
00:02:51.540 --> 00:02:54.340
y ahora vamos a visualizar en el navegador

60
00:02:54.740 --> 00:02:55.900
actualizamos

61
00:02:56.960 --> 00:02:58.300
como véis

62
00:02:59.200 --> 00:03:01.580
la etiquet order list

63
00:03:02.400 --> 00:03:03.480
lo que hace es

64
00:03:03.480 --> 00:03:05.480
enumerar los items

65
00:03:05.900 --> 00:03:08.040
y le ha puesto el número 1

66
00:03:08.480 --> 00:03:11.340
y la etiqueta unordered list

67
00:03:11.520 --> 00:03:14.140
lo que hace es colocarle solamente una viñeta

68
00:03:14.140 --> 00:03:15.960
en vez de colocarle una numeración

69
00:03:15.960 --> 00:03:19.800
le ponerle el número 1, 2, solamente les coloca una viñeta

70
00:03:20.580 --> 00:03:22.080
para hacer el menú

71
00:03:22.080 --> 00:03:26.380
vamos a utilizar solamente la etiqueta ul que es lo más recomendable

72
00:03:26.380 --> 00:03:27.660
es decir

73
00:03:28.060 --> 00:03:30.080
no vamos a colocarle

74
00:03:30.080 --> 00:03:31.320
los números

75
00:03:31.320 --> 00:03:35.780
simplemente colocarle un item, porque con CSS le podríamos quitar

76
00:03:38.000 --> 00:03:39.220
esta viñeta

77
00:03:39.220 --> 00:03:43.340
y de esta forma pues dejarlo como lo tenemos en conocimientos libres

78
00:03:44.000 --> 00:03:44.880
esta forma

79
00:03:45.700 --> 00:03:46.580
ahora

80
00:03:48.720 --> 00:03:50.180
la etiqueta nav

81
00:03:50.560 --> 00:03:51.860
podría estar

82
00:03:51.860 --> 00:03:53.860
fuera así como lo he puesto ahorita

83
00:03:54.780 --> 00:04:00.740
pero si queremos seguir las buenas prácticas podríamos dejarlo dentro de la etiqueta header

84
00:04:01.960 --> 00:04:05.080
para las etiquetas li pues podrían haber varias

85
00:04:06.620 --> 00:04:07.260
de esta forma

86
00:04:08.520 --> 00:04:09.280
así

87
00:04:09.720 --> 00:04:11.400
cosa que cuendo nosotros

88
00:04:11.400 --> 00:04:13.400
vamos a

89
00:04:13.400 --> 00:04:15.400
la parte de la página

90
00:04:15.400 --> 00:04:17.400
podemos ver que tenemos

91
00:04:17.400 --> 00:04:19.400
una serie de listas

92
00:04:24.060 --> 00:04:31.100
vamos a ojear el código de la página de conocimientos libres aquí tendríamos, vamos inspeccionar elemento

93
00:04:32.960 --> 00:04:34.520
se puede observar

94
00:04:35.260 --> 00:04:38.560
en esta parte tenemos una ul

95
00:04:40.360 --> 00:04:42.220
y dentro tenemos li

96
00:04:44.420 --> 00:04:46.500
estás li qué es lo que hacen pues

97
00:04:46.500 --> 00:04:48.120
colocan enlaces

98
00:04:48.400 --> 00:04:50.920
por ejemplo enlace a economic support

99
00:04:50.920 --> 00:04:52.300
los enlaces

100
00:04:52.300 --> 00:04:54.720
son bastante impotantes porque

101
00:04:55.240 --> 00:04:58.260
por ejemplo si queremos hacer el menú

102
00:04:58.260 --> 00:04:59.880
que sea clickeable

103
00:04:59.880 --> 00:05:00.740
como

104
00:05:00.740 --> 00:05:04.340
como el de conocimientos libres, que tu picas y te envía

105
00:05:05.120 --> 00:05:09.000
al enlace que se encuentra dentro de la etiqueta a de ese item

106
00:05:09.780 --> 00:05:11.580
pues fácilmente

107
00:05:12.020 --> 00:05:14.140
podríamos hacerlo con la etiqueta a

108
00:05:14.140 --> 00:05:16.140
de ancla, entonces

109
00:05:16.140 --> 00:05:18.140
podríamos hacer esto

110
00:05:19.440 --> 00:05:20.300
de esta forma

111
00:05:20.720 --> 00:05:22.980
yaquí podríamos poner un href

112
00:05:25.660 --> 00:05:28.780
un href, por ejemplo vamos a enviarlo al

113
00:05:29.180 --> 00:05:31.080
solamente para nociones del

114
00:05:31.600 --> 00:05:34.060
vídeo voy a poner aquí que

115
00:05:34.060 --> 00:05:35.320
al presionar

116
00:05:35.320 --> 00:05:37.320
este elemento

117
00:05:38.400 --> 00:05:40.300
me envíe a

118
00:05:40.300 --> 00:05:42.300
un buscador searx.me

119
00:05:43.920 --> 00:05:46.080
deberíamos poner el protocolo

120
00:05:52.640 --> 00:05:54.520
vamos actualizar la página

121
00:05:54.660 --> 00:05:57.600
y automáticamente se convirtió en un enlace

122
00:05:57.980 --> 00:05:59.880
una lista con un enlace

123
00:06:00.400 --> 00:06:01.880
si nosotros damos click

124
00:06:03.700 --> 00:06:06.120
automáticamente nos llevaría al buscador

125
00:06:06.660 --> 00:06:09.600
o cualquier enlace que se encuentre dentro de la página

126
00:06:09.760 --> 00:06:13.960
por ejemplo podríamos colocarle que en vez de que nos envíe a esto nos envíe

127
00:06:14.260 --> 00:06:15.420
al index

128
00:06:16.080 --> 00:06:19.420
punto html que es el mismo archivo que tenemos ahorita

129
00:06:21.020 --> 00:06:23.900
lo que haría solamente ahora es una recarga de la página

130
00:06:30.060 --> 00:06:34.080
para eso podríamos colocar pues simplemente que se trata del home

131
00:06:42.300 --> 00:06:45.960
y así podríamos hacer con cada tipo de item

132
00:06:46.140 --> 00:06:49.280
podríamos hacer que este otro nos envíe a otro lado

133
00:06:49.280 --> 00:06:52.300
nos envíe a otro lado de la página, por ejemplo que este nos envíe

134
00:06:52.300 --> 00:06:55.520
por ejemplo a la página about

135
00:06:56.240 --> 00:06:57.560
vamos hacerlo rapidito

136
00:06:59.780 --> 00:07:04.640
tenemos aquí otra ancla, por aquí otra ancla

137
00:07:07.360 --> 00:07:09.000
y por aquí otra ancla

138
00:07:13.100 --> 00:07:15.520
y podríamos decirle que

139
00:07:16.220 --> 00:07:17.540
nos envíe

140
00:07:17.860 --> 00:07:20.620
a cada uno nos envíe a una página diferente

141
00:07:21.160 --> 00:07:24.440
de hecho aquí va a fallar porque no existen esos archivos

142
00:07:25.540 --> 00:07:27.220
pero podría hacerse de esa forma

143
00:07:32.100 --> 00:07:33.680
podríamos decirle que

144
00:07:34.380 --> 00:07:37.280
a este otro nos envíe a about

145
00:07:37.500 --> 00:07:39.000
si es que existiese el archivo

146
00:07:39.300 --> 00:07:40.420
a contact

147
00:07:41.220 --> 00:07:43.040
o que nos envíe

148
00:07:43.580 --> 00:07:45.880
a blog

149
00:07:47.500 --> 00:07:50.260
de esta forma todos los items

150
00:07:50.260 --> 00:07:52.260
se volverían enlaces

151
00:07:52.620 --> 00:07:54.300
es lo que se ha hecho con

152
00:07:54.920 --> 00:07:57.260
la parte del área de navegación con

153
00:07:58.800 --> 00:08:00.100
conocimientos libres

154
00:08:00.760 --> 00:08:03.860
lo que se quito con CSS

155
00:08:04.660 --> 00:08:07.680
este subrayado se quita con CSS

156
00:08:08.920 --> 00:08:11.940
bueno queda como si fuese una lista normal

157
00:08:11.940 --> 00:08:13.940
también se puede quitar el color con CSS

158
00:08:13.940 --> 00:08:15.380
eso luego lo vamos a ver

159
00:08:15.380 --> 00:08:17.380
y bien! esto ha sido todo por este vídeo