first commit

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

@@ -0,0 +1,637 @@
+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