398 lines
6.1 KiB
WebVTT
398 lines
6.1 KiB
WebVTT
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
|