first commit

content/wp-content/uploads/article/subtitles/2019/03/0005-header-es.vtt

@@ -0,0 +1,397 @@
+WEBVTT
+
+1
+00:00:01.560 --> 00:00:04.000
+bien ahora seguimos con la etiqueta header
+
+2
+00:00:07.100 --> 00:00:09.980
+la etiqueta header mayormente se utiliza
+
+3
+00:00:09.980 --> 00:00:11.980
+en las páginas web
+
+4
+00:00:12.160 --> 00:00:13.580
+de forma independiente
+
+5
+00:00:13.800 --> 00:00:18.060
+algunas otras veces también la etiqueta header va acompañada de la etiqueta nav
+
+6
+00:00:18.060 --> 00:00:20.060
+que se puede encontrar debajo
+
+7
+00:00:20.640 --> 00:00:21.680
+de la misma
+
+8
+00:00:22.540 --> 00:00:23.980
+en conocimientos libres
+
+9
+00:00:24.320 --> 00:00:26.160
+la etiqueta header
+
+10
+00:00:27.560 --> 00:00:28.880
+también
+
+11
+00:00:29.200 --> 00:00:31.700
+encierra a la etiqueta nav
+
+12
+00:00:32.300 --> 00:00:36.860
+vamos a observar el código fuente de conocimientos libres
+
+13
+00:00:37.840 --> 00:00:38.740
+aquí está
+
+14
+00:00:39.460 --> 00:00:41.000
+tenemos la etiqueta header
+
+15
+00:00:41.000 --> 00:00:43.000
+y dentro hay
+
+16
+00:00:44.180 --> 00:00:45.700
+la etiqueta nav
+
+17
+00:00:46.920 --> 00:00:49.660
+que encienrra el resto de items
+
+18
+00:00:49.840 --> 00:00:50.600
+para dar
+
+19
+00:00:51.320 --> 00:00:53.700
+forma al menú de navegación
+
+20
+00:00:54.440 --> 00:00:55.780
+vamos a identificar
+
+21
+00:00:56.360 --> 00:00:57.740
+toda esta parte
+
+22
+00:00:57.920 --> 00:00:59.100
+es el header
+
+23
+00:01:01.400 --> 00:01:02.580
+bien
+
+24
+00:01:02.580 --> 00:01:04.280
+ahora vamos a
+
+25
+00:01:04.280 --> 00:01:05.620
+observar
+
+26
+00:01:05.840 --> 00:01:08.960
+que en algunas páginas web
+
+27
+00:01:10.460 --> 00:01:12.940
+el header solamente
+
+28
+00:01:13.920 --> 00:01:16.260
+abarca la parte del banner
+
+29
+00:01:19.140 --> 00:01:22.100
+por ejemplo vamos a irnos a
+
+30
+00:01:22.480 --> 00:01:24.200
+una página web
+
+31
+00:01:24.880 --> 00:01:26.800
+que desarrollamos en
+
+32
+00:01:30.380 --> 00:01:31.880
+HackerTech
+
+33
+00:02:00.680 --> 00:02:03.420
+por ejemplo aquí tenemos esta página
+
+34
+00:02:04.020 --> 00:02:06.020
+la om360
+
+35
+00:02:07.920 --> 00:02:10.040
+que fue desarrollada por HackerTech
+
+36
+00:02:10.960 --> 00:02:12.180
+el header
+
+37
+00:02:12.420 --> 00:02:17.380
+podría ser solamente la parte de la cabecera (traduciéndolo al español)
+
+38
+00:02:17.520 --> 00:02:21.080
+solamente este banner, este gif
+
+39
+00:02:22.100 --> 00:02:24.040
+podría ser solamente el header
+
+40
+00:02:24.520 --> 00:02:25.700
+y después
+
+41
+00:02:25.700 --> 00:02:28.620
+en la parte de abajo podríamos encontrar
+
+42
+00:02:28.620 --> 00:02:31.080
+el menú de navegación
+
+43
+00:02:31.740 --> 00:02:33.000
+en ese caso
+
+44
+00:02:33.480 --> 00:02:36.200
+en la parte de om360
+
+45
+00:02:36.200 --> 00:02:37.940
+solamente hemos
+
+46
+00:02:38.580 --> 00:02:40.040
+colocado
+
+47
+00:02:40.260 --> 00:02:44.140
+la etiqueta nav dentro del header
+
+48
+00:02:44.480 --> 00:02:47.960
+aquí en la imagen nos muestran de manera separada
+
+49
+00:02:47.960 --> 00:02:49.960
+primero el header y luego el nav
+
+50
+00:02:49.960 --> 00:02:51.960
+aquí  en el desarrollo web
+
+51
+00:02:53.380 --> 00:02:55.380
+en esta parte está
+
+52
+00:02:55.700 --> 00:02:56.640
+el nav
+
+53
+00:02:56.900 --> 00:03:00.340
+el área de navegación está dentro del header
+
+54
+00:03:00.700 --> 00:03:01.760
+¿por qué está dentro?
+
+55
+00:03:01.760 --> 00:03:05.600
+bueno es para poder hacer los efectos que observáis allí
+
+56
+00:03:07.820 --> 00:03:09.280
+ahora vamos a
+
+57
+00:03:09.280 --> 00:03:13.300
+tocar el código a ver como funciona esto de la etiqueta header
+
+58
+00:03:14.840 --> 00:03:17.920
+hasta ahora solo tenemos el "Hola Mundo!"
+
+59
+00:03:18.360 --> 00:03:19.420
+vamos a entrar
+
+60
+00:03:20.060 --> 00:03:21.300
+al
+
+61
+00:03:22.800 --> 00:03:25.940
+al archivo index.html
+
+62
+00:03:28.300 --> 00:03:29.520
+hasta ahora
+
+63
+00:03:30.060 --> 00:03:31.900
+solamente teníamos una etiqueta
+
+64
+00:03:32.080 --> 00:03:33.180
+h1
+
+65
+00:03:36.220 --> 00:03:38.460
+ahora vamos a ver la etiqueta header
+
+66
+00:03:41.380 --> 00:03:42.720
+como puedes observar
+
+67
+00:03:42.720 --> 00:03:45.640
+etiqueta header tiene su contraparte, una etiqueta
+
+68
+00:03:45.800 --> 00:03:48.040
+que abre y otra etiqueta que cierra
+
+69
+00:03:48.680 --> 00:03:51.180
+aquí como podéis observar, aquí va
+
+70
+00:03:51.560 --> 00:03:54.100
+todo lo que tiene que ver con el logotipo
+
+71
+00:03:55.980 --> 00:03:57.000
+el banner
+
+72
+00:04:00.180 --> 00:04:01.500
+y también pues
+
+73
+00:04:02.020 --> 00:04:05.160
+mayormente el área de navegación
+
+74
+00:04:07.560 --> 00:04:09.580
+el área de navegación es bastante importante
+
+75
+00:04:09.580 --> 00:04:11.580
+que esté dentro del header
+
+76
+00:04:11.760 --> 00:04:13.960
+pero hay que acotar algo bastante
+
+77
+00:04:14.960 --> 00:04:16.360
+importante para...
+
+78
+00:04:16.620 --> 00:04:17.860
+el asunto del header
+
+79
+00:04:18.120 --> 00:04:20.500
+el header no puede ser demasiado grande
+
+80
+00:04:20.660 --> 00:04:22.820
+porque qué pasaría si en...
+
+81
+00:04:22.820 --> 00:04:24.820
+conocimientos libres
+
+82
+00:04:26.640 --> 00:04:28.840
+el header fuese demasiado grande
+
+83
+00:04:29.040 --> 00:04:32.340
+si el header fuese demasiado grande, es decir tuviese
+
+84
+00:04:33.840 --> 00:04:35.660
+un alto
+
+85
+00:04:36.140 --> 00:04:38.260
+mayor al de la página web
+
+86
+00:04:38.780 --> 00:04:42.880
+pues taparía o desplazaría el formulario
+
+87
+00:04:43.100 --> 00:04:47.280
+y el formulario de búsqueda en conocimientos libres es importante
+
+88
+00:04:47.520 --> 00:04:48.340
+entonces
+
+89
+00:04:48.600 --> 00:04:53.000
+es necesario de que el header sea pequeño que no sea intrusivo
+
+90
+00:04:56.400 --> 00:05:00.840
+por eso algunas personas ponen aquí el banner o el logotipo
+
+91
+00:05:01.120 --> 00:05:04.220
+o solamente el área de navegación
+
+92
+00:05:05.840 --> 00:05:09.740
+para el área del navegación es necesario solamente colocar
+
+93
+00:05:09.740 --> 00:05:11.740
+la etiqueta nav
+
+94
+00:05:12.080 --> 00:05:13.140
+también
+
+95
+00:05:14.260 --> 00:05:16.020
+podríamos colocar
+
+96
+00:05:19.240 --> 00:05:21.700
+un h1 dentro del header
+
+97
+00:05:22.200 --> 00:05:25.380
+para poder darle algún tipo de información - natural
+
+98
+00:05:26.080 --> 00:05:28.220
+todas esas cosas podríamos colocarlo aquí
+
+99
+00:05:28.800 --> 00:05:30.840
+bien nos vemos en el siguiente vídeo