WEBVTT

1
00:00:00.850 --> 00:00:02.660
Bien! ahora veremos

2
00:00:02.770 --> 00:00:03.810
sobre

3
00:00:04.050 --> 00:00:05.360
la etiqueta aside

4
00:00:05.620 --> 00:00:09.650
la etiqueta aside es una etiqueta que nos permite colocar información

5
00:00:09.730 --> 00:00:10.940
dentro de la página web

6
00:00:11.610 --> 00:00:14.820
pero que no es relevante, es decir que no está...

7
00:00:14.960 --> 00:00:18.690
que está relacionada, pero que no es de mucha importancia con la página web

8
00:00:19.210 --> 00:00:20.820
por ejemplo. vamos a

9
00:00:21.930 --> 00:00:23.900
Ir a la página de FreakSpot

10
00:00:25.480 --> 00:00:27.740
porque en conocimientos libres no tengo aside

11
00:00:27.740 --> 00:00:29.740
ya que no la he colocado

12
00:00:31.530 --> 00:00:32.840
en freakspot

13
00:00:33.570 --> 00:00:34.490
si os fijáis

14
00:00:34.490 --> 00:00:36.380
tenemos los artículos

15
00:00:36.380 --> 00:00:37.690
aquí están los artículos

16
00:00:37.690 --> 00:00:40.290
tenemos una section, toda esta section

17
00:00:40.690 --> 00:00:43.650
tenemos los artículos y al costado

18
00:00:44.420 --> 00:00:45.690
al lado izquierdo

19
00:00:45.850 --> 00:00:46.780
tenemos

20
00:00:49.680 --> 00:00:50.940
una informacíón

21
00:00:51.180 --> 00:00:52.980
sobre las entradas recientes

22
00:00:52.980 --> 00:00:54.980
sobre las categorías

23
00:00:55.120 --> 00:00:56.520
sobre las etiquetas

24
00:01:01.130 --> 00:01:02.340
cada una de éstas

25
00:01:02.340 --> 00:01:04.900
por ejemplo las entradas recientes, las categorías

26
00:01:05.420 --> 00:01:07.170
son etiquetas aside

27
00:01:07.460 --> 00:01:09.280
son etiquetas que tienen que ver con

28
00:01:09.280 --> 00:01:11.280
la información del sitio

29
00:01:11.280 --> 00:01:12.170
pero

30
00:01:12.170 --> 00:01:14.930
que no son de demasiada importancia

31
00:01:14.930 --> 00:01:15.970
es decir

32
00:01:15.970 --> 00:01:18.540
no tienen mucha importancia con respecto

33
00:01:18.540 --> 00:01:20.680
a la información de los artículos

34
00:01:22.010 --> 00:01:22.740
bien

35
00:01:24.090 --> 00:01:25.700
si inspeccionamos el elemento

36
00:01:25.700 --> 00:01:29.010
vamos a darnos cuenta de que en verdad es un aside

37
00:01:32.060 --> 00:01:35.490
como puedes observar ahí está, es un aside como os dije

38
00:01:36.850 --> 00:01:39.200
aquí no se ve bien, voy a...

39
00:01:39.200 --> 00:01:40.490
subirle

40
00:01:40.580 --> 00:01:41.340
el zoom

41
00:01:44.010 --> 00:01:45.600
ahi dice aside

42
00:01:46.000 --> 00:01:48.060
si vemos el código fuente

43
00:01:58.570 --> 00:01:59.620
vamos a

44
00:02:00.250 --> 00:02:02.040
amplificar un poquito aquí

45
00:02:03.760 --> 00:02:05.020
podemos ver

46
00:02:06.340 --> 00:02:07.170
que

47
00:02:07.480 --> 00:02:08.620
el aside

48
00:02:09.200 --> 00:02:10.620
aquí en freakspot

49
00:02:10.920 --> 00:02:13.900
también engloba la parte del formulario

50
00:02:13.900 --> 00:02:15.900
y es de tipo buscar

51
00:02:16.180 --> 00:02:18.280
bien eso ya vamos a verlo después

52
00:02:18.980 --> 00:02:21.700
aquí vemos que tenemos la etiqueta aside

53
00:02:21.880 --> 00:02:23.920
que alberga el formulario

54
00:02:24.130 --> 00:02:25.600
otra etiqueta aside

55
00:02:25.980 --> 00:02:28.860
que contiene la parte

56
00:02:29.260 --> 00:02:31.930
de las entradas recientes

57
00:02:34.020 --> 00:02:36.020
aquí tenemos otro aside

58
00:02:37.200 --> 00:02:39.960
que tiene que ver con las categorías

59
00:02:41.160 --> 00:02:44.620
y por aquí tenemos otro aside que tiene que ver con las etiquetas

60
00:02:44.970 --> 00:02:47.370
en pocas palabras es lo que les mecioné aquí

61
00:02:47.600 --> 00:02:49.640
esto sería un aside

62
00:02:50.000 --> 00:02:51.920
este sería otro aside

63
00:02:52.160 --> 00:02:54.330
y este sería otro aside

64
00:02:55.570 --> 00:02:57.730
estarían dentro de otra etiqueta aside

65
00:02:58.160 --> 00:03:01.160
bien!, ¿cómo se escribe en código esto?

66
00:03:03.280 --> 00:03:05.060
tenemos aquí esto

67
00:03:05.060 --> 00:03:05.930
esta parte

68
00:03:05.930 --> 00:03:07.930
podríamos hacer lo siguiente

69
00:03:08.920 --> 00:03:10.890
podríamos colocar aquí

70
00:03:11.600 --> 00:03:13.020
etiqueta aside

71
00:03:17.300 --> 00:03:19.840
que tiene también su contraparte para cerrarse

72
00:03:20.810 --> 00:03:22.660
y aquí podríamos poner pues

73
00:03:22.970 --> 00:03:23.920
un h2

74
00:03:33.930 --> 00:03:35.860
y dentro de otro aside

75
00:03:36.440 --> 00:03:37.880
podríamos colocar

76
00:03:39.490 --> 00:03:40.330
las etiquetas

77
00:03:45.520 --> 00:03:46.570
correcto

78
00:03:48.730 --> 00:03:50.560
entonces si nos vamos a...

79
00:03:51.540 --> 00:03:53.020
la parte del

80
00:03:53.820 --> 00:03:56.170
del archivo index, actualizamos

81
00:03:56.170 --> 00:04:00.760
y podemos observar que aparecen las entradas recientes y las etiquetas

82
00:04:00.980 --> 00:04:02.170
voy a borrar el resto

83
00:04:02.250 --> 00:04:03.410
que ya lo hemos visto

84
00:04:05.050 --> 00:04:06.260
voy a comentarlo

85
00:04:09.440 --> 00:04:14.280
y ahí sería, este sería un aside, este sería otro aside

86
00:04:16.900 --> 00:04:19.420
lo que seleccionado ahora sería un h2

87
00:04:19.420 --> 00:04:21.420
que esta dentro de un aside

88
00:04:24.360 --> 00:04:25.840
aside, aside

89
00:04:27.300 --> 00:04:31.020
si nosotros vamos al código fuente y lo copiamos

90
00:04:31.440 --> 00:04:33.770
y lo pasamos por el validador nuevamente

91
00:04:37.090 --> 00:04:38.850
debería de mostrarnos

92
00:04:39.960 --> 00:04:41.240
que todo está correcto

93
00:04:44.760 --> 00:04:47.410
ahí está el documento esta correcto, no hay errores

94
00:04:47.410 --> 00:04:49.130
de esta forma serían los asides

95
00:04:49.280 --> 00:04:51.200
y qué podría haber dentro de los asides

96
00:04:51.650 --> 00:04:52.580
como

97
00:04:52.580 --> 00:04:55.200
os fijáis dentro de freakspot

98
00:04:55.880 --> 00:04:57.250
dentro de los aside's

99
00:04:57.250 --> 00:05:00.210
podrían haber listas

100
00:05:01.280 --> 00:05:03.040
si clickqueamos ahí

101
00:05:04.330 --> 00:05:06.260
podemos ver que es una etiqueta li

102
00:05:07.280 --> 00:05:09.050
a ver sí, es una etiqueta li

103
00:05:09.340 --> 00:05:10.500
y dentro hay

104
00:05:11.650 --> 00:05:14.880
arriba de la etiqueta li hay un ul es una etiqueta desordenada

105
00:05:15.210 --> 00:05:16.760
igual que el resto

106
00:05:17.360 --> 00:05:22.000
pero no solamente eso, sino también texto, podría hacer paragraph

107
00:05:23.850 --> 00:05:25.530
en este caso han puesto enlaces

108
00:05:25.530 --> 00:05:27.530
ya pero también podría haber paragraph

109
00:05:30.850 --> 00:05:32.600
espero haya quedado bastante claro

110
00:05:32.600 --> 00:05:35.330
si nos fijamos en el área de...

111
00:05:35.330 --> 00:05:36.180
del dibujo

112
00:05:36.410 --> 00:05:37.280
el aside

113
00:05:37.620 --> 00:05:41.180
podría estar siempre a un costado al lado derecho al lado izquierdo

114
00:05:41.440 --> 00:05:45.890
pero no necesariamente a esos lados, tambien podría estar debajo, podría estar arriba

115
00:05:46.130 --> 00:05:48.850
ya depende del diseñador dónde colocar el aside

116
00:05:49.700 --> 00:05:51.780
bien! continuamos con el siguiente vídeo