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