added video aside-html5

content/articles/course-html5/etiqueta-aside.md

@@ -0,0 +1,20 @@
+Author: Jesús E.
+Category: courses
+Date: 2019-04-10 13:10:01
+Image: 2019/04/aside-html5.jpg
+Slug: etiqueta-aside
+Tags: html5
+Time: 5:55
+Title: Etiqueta aside
+
+<video id="player-ply" playsinline controls>
+  <source src="https://archive.org/download/coursehtml5/0014-aside.webm" type="video/webm">
+  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0014-aside-es.vtt" srclang="es" default>
+</video>
+
+<details markdown="span">
+<summary>Etiqueta aside 14/32</summary>
+<p class="mb-0">Más sobre la etiqueta `<aside>` en la [w3schools][w3-aside]{:target="_blank" rel="noopener noreferrer"}</p>
+</details>
+
+[w3-aside]: https://www.w3schools.com/tags/tag_aside.asp

content/wp-content/uploads/article/subtitles/2019/04/0014-aside-es.vtt

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