Added new articles and fixes

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

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

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

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

content/articles/course-html5/etiqueta-nav-ul-ol-li.md

@@ -14,10 +14,13 @@ Title: Etiqueta nav ul ol li
 
 <details markdown="span">
 <summary>Etiqueta nav ul ol li 8/32</summary>
-<ul class="ml-3">
+<p class="mb-0">Más sobre la etiqueta `<nav>` en la [w3schools][w3-nav]{:target="_blank" rel="noopener noreferrer"}</p>
-<li><a href="https://www.w3schools.com/tags/tag_nav.asp">Etiqueta nav</a></li>
+<p class="mb-0">Más sobre la etiqueta `<ul>` en la [w3schools][w3-ul]{:target="_blank" rel="noopener noreferrer"}</p>
-<li><a href="https://www.w3schools.com/tags/tag_ul.asp">Etiqueta ul</a></li>
+<p class="mb-0">Más sobre la etiqueta `<ol>` en la [w3schools][w3-ol]{:target="_blank" rel="noopener noreferrer"}</p>
-<li><a href="https://www.w3schools.com/tags/tag_ol.asp">Etiqueta ol</a></li>
+<p class="mb-0">Más sobre la etiqueta `<li>` en la [w3schools][w3-li]{:target="_blank" rel="noopener noreferrer"}</p>
-<li><a href="https://www.w3schools.com/tags/tag_li.asp">Etiqueta li</a></li>
-</ul>
 </details>
+
+[w3-nav]: https://www.w3schools.com/tags/tag_nav.asp
+[w3-ul]: https://www.w3schools.com/tags/tag_ul.asp
+[w3-ol]: https://www.w3schools.com/tags/tag_ol.asp
+[w3-li]: https://www.w3schools.com/tags/tag_li.asp

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

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

content/articles/course-html5/etiquetas-p-y-span.md

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

content/articles/course-html5/etiquetas-strong-y-em.md

@@ -0,0 +1,22 @@
+Author: Jesús E.
+Category: course
+Date: 2019-04-09 11:30:00
+Image: 2019/04/etiquetas-strong-em.jpg
+Slug: etiquetas-strong-em
+Tags: hml
+Time: 02:16
+Title: Etiquetas strong y em
+
+<video id="player-ply" playsinline controls>
+  <source src="https://archive.org/download/coursehtml5/0011-Etiquetas-strong-em.webm" type="video/webm">
+  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt" srclang="es" default>
+</video>
+
+<details markdown="span">
+<summary>Etiquetas strong y em 11/32</summary>
+<p class="mb-0">Más sobre la etiqueta `<strong>` en la [w3schools][w3-strong]{:target="_blank" rel="noopener noreferrer"}</p>
+<p>Más sobre la etiqueta `<em>` en la [w3schools][w3-em]{:target="_blank" rel="noopener noreferrer"}</p>
+</details>
+
+[w3-strong]: https://www.w3schools.com/tags/tag_strong.asp
+[w3-em]: https://www.w3schools.com/tags/tag_em.asp

content/articles/course-html5/header.md

@@ -15,9 +15,7 @@ Title: Header
 
 <details markdown="span">
 <summary>Header HTML5 5/32</summary>
-
+Más información sobre la etiqueta `<header>` en [w3schools][header]{:target="_blank" rel="noopener noreferrer"}.
-Más información sobre la etiqueta [header][header] en w3schools.
-
 </details>
 
 [header]: https://www.w3schools.com/tags/tag_header.asp

content/articles/course-html5/hgroup.md

@@ -16,5 +16,5 @@ Title: hgroup
 <summary>Hgroup HTML5 7/32</summary>
 <p class="mb-0">Etiqueta hgroup en desuso.</p>
 <p class="mb-0">Este elemento fue removido de la especificacion HTML5 (W3C), por favor no usar más.</p>
-<p class="mb-0">Referencia: [https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup)</p>
+<p class="mb-0">Referencia: [https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/hgroup){:target="_blank" rel="noopener noreferrer"}</p>
 </details>

content/articles/course-html5/intro.md

@@ -16,8 +16,8 @@ Title: Introducción a HTML5
 <details markdown="span">
 <summary>Introducción a HTML5 1/32</summary>
 <ul class="ml-3">
-<li>[Respositorio oficial][html] de HTML</li>
+<li>[Respositorio oficial][html]{:target="_blank" rel="noopener noreferrer"} de HTML</li>
-<li>[w3schools][w3c]</li>
+<li>[w3schools][w3c]{:target="_blank" rel="noopener noreferrer"}</li>
 </ul>
 </details>
 

content/articles/course-html5/titulos.md

@@ -15,7 +15,7 @@ Title: Títulos en HTML5
 <details markdown="span">
 <summary>Títulos en HTML5 6/32</summary>
 
-Más información sobre las etiquetas [«h» en w3schools][titles].
+Más información sobre las etiquetas [«h» en w3schools][titles]{:target="_blank" rel="noopener noreferrer"}.
 
 </details>
 

content/wp-content/uploads/article/subtitles/2019/04/0009-etiqueta-a-es.vtt

@@ -0,0 +1,205 @@
+WEBVTT
+
+1
+00:00:02.440 --> 00:00:09.700
+En el vídeo, vimos como he podiamos estructurar la etiqueta nav, la etiqueta ul. la etiqueta li
+
+2
+00:00:10.960 --> 00:00:12.520
+para formar un menú
+
+3
+00:00:13.240 --> 00:00:17.320
+ahora vamos hablar sobre la etiqueta a que es una etiqueta
+
+4
+00:00:17.560 --> 00:00:21.380
+algo peculiar al momento de trabajar con los enlaces
+
+5
+00:00:21.380 --> 00:00:26.640
+porque esta etiqueta tiene varias propiedades como por ejemplo la propiedad target
+
+6
+00:00:27.580 --> 00:00:29.260
+que nos permite
+
+7
+00:00:30.440 --> 00:00:31.580
+abrir
+
+8
+00:00:31.800 --> 00:00:35.840
+ese enlace en otra ventana, en otra pestaña del navegador web
+
+9
+00:00:35.840 --> 00:00:37.840
+la más común es blank
+
+10
+00:00:40.320 --> 00:00:42.340
+también la propiedad
+
+11
+00:00:43.680 --> 00:00:44.580
+rel
+
+12
+00:00:45.720 --> 00:00:47.700
+siempre va dentro
+
+13
+00:00:48.640 --> 00:00:53.800
+de la etiqueta a cuando usamos la propiedad target
+
+14
+00:00:55.080 --> 00:00:59.780
+rel nos va permitir que cuando se abra ese enlace en otra pestaña
+
+15
+00:00:59.780 --> 00:01:01.780
+no existan vulnerabilidades
+
+16
+00:01:02.220 --> 00:01:03.380
+no existan
+
+17
+00:01:04.440 --> 00:01:08.180
+problemas de seguridad que nos pueda ocasionar
+
+18
+00:01:08.980 --> 00:01:12.900
+por ejemplo vamos a ir a la página de heckyel.ga
+
+19
+00:01:20.420 --> 00:01:22.380
+En la parte del footer
+
+20
+00:01:22.640 --> 00:01:25.960
+tenemos los enlaces a las redes sociales libres
+
+21
+00:01:27.620 --> 00:01:30.160
+cuando damos en inspeccionar elemento
+
+22
+00:01:33.200 --> 00:01:36.680
+vamos a observar que esta el atributo rel
+
+23
+00:01:37.240 --> 00:01:39.220
+con 2 valores
+
+24
+00:01:39.220 --> 00:01:43.880
+el valor noopener y el valor noreferrer
+
+25
+00:01:43.880 --> 00:01:45.880
+noopener noreferrer
+
+26
+00:01:46.800 --> 00:01:48.200
+estos valores
+
+27
+00:01:48.200 --> 00:01:50.200
+son importantes
+
+28
+00:01:53.300 --> 00:01:55.200
+porque van a permitir
+
+29
+00:01:55.800 --> 00:02:00.000
+de que el enlace no sea contaminado al momento
+
+30
+00:02:00.000 --> 00:02:02.680
+de dar click
+
+31
+00:02:03.080 --> 00:02:06.180
+dentro de esa lista
+
+32
+00:02:14.460 --> 00:02:17.840
+cuando alguien de un click dentro
+
+33
+00:02:18.500 --> 00:02:20.860
+de esta lista, por ejemplo aquí he dado
+
+34
+00:02:20.860 --> 00:02:25.840
+se ha abierto en otra pestaña, por ejemplo ahí se abre en varias pestañas
+
+35
+00:02:29.160 --> 00:02:30.080
+pues
+
+36
+00:02:31.120 --> 00:02:33.780
+un atacante un cibercriminal
+
+37
+00:02:34.600 --> 00:02:36.140
+no podrían
+
+38
+00:02:36.140 --> 00:02:41.480
+inyectar algo malisioso a este enlace porque tiene la propiedad rel
+
+39
+00:02:41.920 --> 00:02:44.680
+con los parámetros noopener noreferrer
+
+40
+00:02:44.860 --> 00:02:48.160
+esto hace que tenga más seguridad el enlace
+
+41
+00:02:48.400 --> 00:02:52.300
+ya que la propiedad target es algo vulnerable
+
+42
+00:02:52.300 --> 00:02:56.220
+cuando esta sola sin esta otra propiedad
+
+43
+00:02:56.680 --> 00:02:58.980
+Es importante que si
+
+44
+00:02:59.720 --> 00:03:01.120
+tú quieres
+
+45
+00:03:01.540 --> 00:03:03.720
+hacer un enlace
+
+46
+00:03:04.120 --> 00:03:07.480
+hacia otra pestaña debes colocar
+
+47
+00:03:08.220 --> 00:03:09.540
+si o si
+
+48
+00:03:10.600 --> 00:03:12.000
+la propiedad rel
+
+49
+00:03:13.300 --> 00:03:14.680
+y bien esto
+
+50
+00:03:14.980 --> 00:03:19.000
+lo que te quería contar con respecto a la etiqueta a
+
+51
+00:03:19.000 --> 00:03:21.000
+Nos vemos en el siguiente vídeo

content/wp-content/uploads/article/subtitles/2019/04/0010-etiquetas-p-span-es.vtt

@@ -0,0 +1,277 @@
+WEBVTT
+
+1
+00:00:00.740 --> 00:00:03.600
+bien ahora hablaremos de la etiqueta paragraph
+
+2
+00:00:03.600 --> 00:00:08.080
+la etiquera paragraph es una etiqueta que nos va ayudar a agregar texto
+
+3
+00:00:08.080 --> 00:00:10.080
+dentro de la página web
+
+4
+00:00:11.120 --> 00:00:14.240
+también tenemos otra etiqueta que es la etiqueta span
+
+5
+00:00:14.800 --> 00:00:18.520
+que nos va permtir separar una parte del párrafo
+
+6
+00:00:18.880 --> 00:00:21.040
+vamos a verlo eso dentro del código
+
+7
+00:00:22.200 --> 00:00:24.740
+primero vamos a colocar la etiqueta
+
+8
+00:00:24.740 --> 00:00:26.740
+paragraph, se escribe
+
+9
+00:00:27.380 --> 00:00:29.160
+solamente con la letra p
+
+10
+00:00:30.300 --> 00:00:32.220
+y dentro vamos a colocar
+
+11
+00:00:32.680 --> 00:00:36.300
+un texto, por ejemplo ese texto que ves allí
+
+12
+00:00:37.380 --> 00:00:39.100
+vamos a guardar
+
+13
+00:00:39.600 --> 00:00:42.240
+nos vamos al navegador web
+
+14
+00:00:42.880 --> 00:00:46.240
+actualizamos y vemos que debajo se pinta
+
+15
+00:00:46.840 --> 00:00:48.180
+el párrafo
+
+16
+00:00:50.340 --> 00:00:53.040
+ahora que pasaría si nosotros queremos hacer
+
+17
+00:00:53.440 --> 00:00:54.760
+un salto de línea
+
+18
+00:00:55.140 --> 00:00:57.560
+es si queremos hacer otro párrafo
+
+19
+00:00:57.560 --> 00:00:58.640
+pues
+
+20
+00:00:58.640 --> 00:01:02.760
+lo mejor es hacer otra etiqueta p, guardar
+
+21
+00:01:04.020 --> 00:01:06.480
+luego actualizar en el navegador
+
+22
+00:01:07.020 --> 00:01:08.760
+y ver los resultados
+
+23
+00:01:09.200 --> 00:01:12.500
+pero hay un pequeño problema con algunos usuarios
+
+24
+00:01:12.500 --> 00:01:14.320
+y es que cuando ellos quieren hacer
+
+25
+00:01:14.320 --> 00:01:17.000
+un salto de línea utilizan la etiqueta br
+
+26
+00:01:17.380 --> 00:01:21.880
+la etiqueta br es una etiqueta obsoleta que no debería utilizarse
+
+27
+00:01:22.240 --> 00:01:23.260
+o al menos
+
+28
+00:01:23.540 --> 00:01:26.120
+no en los casos generales
+
+29
+00:01:28.920 --> 00:01:32.460
+ya que todo se maneja desde la parte del CSS
+
+30
+00:01:33.720 --> 00:01:34.440
+bien
+
+31
+00:01:34.440 --> 00:01:35.900
+dado este punto
+
+32
+00:01:35.900 --> 00:01:37.900
+ahora vamos hablar sobre
+
+33
+00:01:38.140 --> 00:01:39.540
+la etiqueta span
+
+34
+00:01:39.640 --> 00:01:42.840
+por ejemplo que pasaría si nosotros quisieramos
+
+35
+00:01:43.160 --> 00:01:45.200
+que una parte de esta párrafo
+
+36
+00:01:45.200 --> 00:01:47.200
+una frase de este párrafo
+
+37
+00:01:47.460 --> 00:01:49.160
+tuviese otro color
+
+38
+00:01:49.440 --> 00:01:53.260
+se viese más grande o resaltara sobre el resto
+
+39
+00:01:53.480 --> 00:01:55.580
+por ejemplo vamos a decidir
+
+40
+00:01:56.340 --> 00:02:01.400
+que esta frase «Software Libre» se vea de otro color
+
+41
+00:02:03.580 --> 00:02:04.780
+de esta forma
+
+42
+00:02:05.420 --> 00:02:07.320
+agregamos una etiqueta span
+
+43
+00:02:07.320 --> 00:02:10.020
+como la etiqueta span es una etiqueta en línea
+
+44
+00:02:10.020 --> 00:02:11.840
+pues nos va ayudar
+
+45
+00:02:11.840 --> 00:02:13.580
+a poder colorear
+
+46
+00:02:13.580 --> 00:02:15.730
+este texto o darle diseño
+
+47
+00:02:16.370 --> 00:02:18.050
+vamos a colocar por ejemplo
+
+48
+00:02:18.180 --> 00:02:19.290
+una clase
+
+49
+00:02:19.410 --> 00:02:21.020
+que se llame resaltado
+
+50
+00:02:23.140 --> 00:02:25.490
+ahora vamos a ir a la parte de arriba
+
+51
+00:02:25.490 --> 00:02:29.380
+donde yo he puesto antes del vídeo yo he puesto la etiqueta style
+
+52
+00:02:30.500 --> 00:02:32.560
+esto lo vamos a ver a profundidad
+
+53
+00:02:32.730 --> 00:02:33.780
+en CSS
+
+54
+00:02:33.920 --> 00:02:36.900
+así que por ahora no se preocupen por lo que estoy poniendo
+
+55
+00:02:40.100 --> 00:02:42.130
+lo único que estoy haciendo es
+
+56
+00:02:42.130 --> 00:02:45.210
+agregar una clase y colocarle un atributo
+
+57
+00:02:45.360 --> 00:02:46.500
+una propiedad
+
+58
+00:02:46.500 --> 00:02:48.560
+CSS que se llama color
+
+59
+00:02:49.810 --> 00:02:51.400
+ahora utilizaré
+
+60
+00:02:51.400 --> 00:02:54.600
+el color blue oscuro
+
+61
+00:02:56.340 --> 00:02:57.200
+guardo
+
+62
+00:02:59.120 --> 00:03:00.140
+ven que
+
+63
+00:03:00.680 --> 00:03:03.580
+no está coloreado el texto, voy actualizar
+
+64
+00:03:03.730 --> 00:03:04.700
+y como ven
+
+65
+00:03:04.700 --> 00:03:07.480
+ahora el texto que esta dentro del párrafo
+
+66
+00:03:07.570 --> 00:03:08.520
+se coloreo
+
+67
+00:03:09.210 --> 00:03:09.900
+¡perfecto!
+
+68
+00:03:10.500 --> 00:03:11.540
+continuamos
+
+69
+00:03:11.660 --> 00:03:12.840
+en el siguiente vídeo

content/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt

@@ -0,0 +1,193 @@
+WEBVTT
+
+1
+00:00:02.280 --> 00:00:03.160
+strong
+
+2
+00:00:03.300 --> 00:00:03.770
+es
+
+3
+00:00:03.770 --> 00:00:05.770
+una etoqueta bastante genial
+
+4
+00:00:05.770 --> 00:00:09.160
+porque nos ayuda a dar fuerza a una palabra
+
+5
+00:00:11.330 --> 00:00:12.880
+vamos a verlo en ejemplo
+
+6
+00:00:13.930 --> 00:00:16.580
+aquí tenemos la palabra software
+
+7
+00:00:17.080 --> 00:00:18.560
+vamos a decir que
+
+8
+00:00:19.250 --> 00:00:20.420
+va a ser
+
+9
+00:00:21.160 --> 00:00:22.490
+una palabra
+
+10
+00:00:23.140 --> 00:00:24.090
+que va
+
+11
+00:00:24.090 --> 00:00:25.250
+a resaltar
+
+12
+00:00:25.480 --> 00:00:26.780
+o va a tener más
+
+13
+00:00:27.050 --> 00:00:28.480
+impacto sobre las otras
+
+14
+00:00:29.640 --> 00:00:30.520
+guardamos
+
+15
+00:00:30.520 --> 00:00:32.720
+vamos al navegador
+
+16
+00:00:32.720 --> 00:00:38.960
+actualizamos y vemos que ahora dice Software y se pinta de color negro
+
+17
+00:00:39.320 --> 00:00:40.460
+Este color
+
+18
+00:00:42.320 --> 00:00:44.770
+Puede ser quitado mediante CSS
+
+19
+00:00:46.380 --> 00:00:49.560
+No es preciso que en una página pues
+
+20
+00:00:49.560 --> 00:00:52.940
+strong siempre este así de fuerte con ese color
+
+21
+00:00:53.340 --> 00:00:55.460
+El CSS puede ser controlado por eso
+
+22
+00:00:56.210 --> 00:00:57.100
+ahora
+
+23
+00:00:57.480 --> 00:00:58.760
+Para que sirve strong
+
+24
+00:00:58.880 --> 00:01:01.360
+strong nos sirve para dar semántica
+
+25
+00:01:01.360 --> 00:01:04.040
+para decirle oye esta palabra es importante
+
+26
+00:01:04.160 --> 00:01:05.090
+al navegador
+
+27
+00:01:06.380 --> 00:01:10.080
+también tenemos otra etiqueta la etiqueta em
+
+28
+00:01:10.320 --> 00:01:15.900
+La etiqueta em es una una etiqueta que nos permite dar énfasis al texto
+
+29
+00:01:16.880 --> 00:01:19.050
+cuando me refiero a darle énfasis
+
+30
+00:01:19.050 --> 00:01:22.570
+Me refiero al que el texto se coloca en modo cursiva
+
+31
+00:01:23.970 --> 00:01:27.580
+si observan ahora se colocó en modo cursiva
+
+32
+00:01:28.180 --> 00:01:31.500
+pero esto también se puede cambiar mediante CSS
+
+33
+00:01:32.040 --> 00:01:32.800
+ahora
+
+34
+00:01:34.050 --> 00:01:35.020
+si queremos
+
+35
+00:01:35.120 --> 00:01:35.920
+hacer
+
+36
+00:01:36.000 --> 00:01:36.930
+un
+
+37
+00:01:38.780 --> 00:01:40.120
+buen maquetado
+
+38
+00:01:40.180 --> 00:01:40.880
+de
+
+39
+00:01:41.360 --> 00:01:42.540
+el HTML
+
+40
+00:01:42.810 --> 00:01:47.450
+no debemos fijarnos en que poniéndole em nos va a poner en cursiva
+
+41
+00:01:47.450 --> 00:01:48.290
+¿por qué?
+
+42
+00:01:48.290 --> 00:01:51.170
+porque solamente esto es semántica
+
+43
+00:01:51.170 --> 00:01:53.490
+eso solo es semántica
+
+44
+00:01:54.140 --> 00:01:59.450
+que el navegador interprete la etiqueta em en modo cursiva es otra historia
+
+45
+00:02:02.080 --> 00:02:03.140
+todo el diseño
+
+46
+00:02:03.220 --> 00:02:04.570
+debe ser controlado
+
+47
+00:02:04.570 --> 00:02:06.570
+sí o sí por el CSS
+
+48
+00:02:06.720 --> 00:02:10.860
+ya luego hablaremos en profundidad sobre CSS en la sección CSS

content/wp-content/uploads/article/subtitles/2019/04/0012-section-es.vtt

@@ -0,0 +1,269 @@
+WEBVTT
+
+1
+00:00:03.090 --> 00:00:03.840
+section
+
+2
+00:00:03.840 --> 00:00:05.760
+es una etiqueta
+
+3
+00:00:05.760 --> 00:00:08.800
+que nos va ayudar a organizar nuestro sitio web
+
+4
+00:00:09.260 --> 00:00:10.660
+¿cómo se escribe section?
+
+5
+00:00:10.970 --> 00:00:13.410
+bueno la etiqueta section se escribe de esta forma
+
+6
+00:00:13.410 --> 00:00:15.200
+abrimos etiqueta
+
+7
+00:00:15.200 --> 00:00:16.460
+section que abre
+
+8
+00:00:16.460 --> 00:00:18.460
+etiqueta section que cierra
+
+9
+00:00:18.740 --> 00:00:20.080
+la etiqueta section
+
+10
+00:00:20.080 --> 00:00:21.640
+nos va a permitir separar
+
+11
+00:00:22.320 --> 00:00:24.530
+alguna parte de la página web
+
+12
+00:00:24.800 --> 00:00:26.080
+de otras
+
+13
+00:00:26.960 --> 00:00:27.600
+partes
+
+14
+00:00:31.700 --> 00:00:32.970
+Esta etiqueta
+
+15
+00:00:33.170 --> 00:00:34.360
+debe de tener
+
+16
+00:00:34.360 --> 00:00:35.620
+sí o sí
+
+17
+00:00:35.620 --> 00:00:36.450
+un título
+
+18
+00:00:36.450 --> 00:00:37.530
+ya sea un
+
+19
+00:00:37.530 --> 00:00:41.970
+h2, h3, h4, h5, h6
+
+20
+00:00:42.480 --> 00:00:45.280
+lo importante es que debe de tener un título
+
+21
+00:00:45.720 --> 00:00:48.680
+en este caso voy a colocar un h2
+
+22
+00:00:48.680 --> 00:00:50.280
+y voy a poner lo siguiente
+
+23
+00:00:50.580 --> 00:00:51.660
+Estos
+
+24
+00:00:53.320 --> 00:00:54.330
+son
+
+25
+00:00:54.800 --> 00:00:55.850
+los
+
+26
+00:00:56.200 --> 00:00:57.920
+vídeos de
+
+27
+00:00:58.210 --> 00:00:59.360
+HackerTech
+
+28
+00:01:00.960 --> 00:01:01.720
+perfecto!
+
+29
+00:01:02.360 --> 00:01:03.080
+ahora
+
+30
+00:01:03.900 --> 00:01:05.560
+que es lo que va dentro de section
+
+31
+00:01:05.660 --> 00:01:06.920
+bueno dentro de section
+
+32
+00:01:06.920 --> 00:01:10.200
+puede también estar alojado un div, un párrafo
+
+33
+00:01:11.380 --> 00:01:12.100
+cualquier
+
+34
+00:01:12.240 --> 00:01:15.520
+otra etiqueta incluso puede estar alojado un formulario
+
+35
+00:01:19.010 --> 00:01:21.000
+vamos a guardar, nos vamos
+
+36
+00:01:21.000 --> 00:01:22.650
+a la página de localhost
+
+37
+00:01:22.650 --> 00:01:23.760
+actualizamos
+
+38
+00:01:23.760 --> 00:01:26.100
+y vemos que ahora aparece
+
+39
+00:01:26.220 --> 00:01:28.200
+si miramos el código fuente
+
+40
+00:01:28.970 --> 00:01:30.600
+lo vamos a copiar
+
+41
+00:01:31.570 --> 00:01:35.360
+vamos a irnos a la w3c markup
+
+42
+00:01:41.780 --> 00:01:45.400
+esperamos un momentito mientras recarga la página
+
+43
+00:01:52.880 --> 00:01:54.370
+damos en validate
+
+44
+00:01:54.560 --> 00:01:56.240
+pegamos el texto
+
+45
+00:01:56.610 --> 00:01:58.010
+del código fuente
+
+46
+00:01:59.180 --> 00:02:00.610
+y vemos que
+
+47
+00:02:01.330 --> 00:02:04.530
+nos marca que no hay errores que mostrar
+
+48
+00:02:04.860 --> 00:02:07.010
+no hay advertencias tampoco
+
+49
+00:02:07.130 --> 00:02:08.420
+entonces quiere decir
+
+50
+00:02:08.740 --> 00:02:09.440
+que
+
+51
+00:02:09.730 --> 00:02:11.730
+la etiqueta section ha sido
+
+52
+00:02:11.730 --> 00:02:13.130
+escrita correctamente
+
+53
+00:02:13.360 --> 00:02:14.560
+pero que pasaría
+
+54
+00:02:14.560 --> 00:02:16.560
+si obvio el título
+
+55
+00:02:16.560 --> 00:02:18.840
+como ya mencioné
+
+56
+00:02:19.130 --> 00:02:20.040
+al principio
+
+57
+00:02:20.320 --> 00:02:21.720
+y coloco
+
+58
+00:02:21.920 --> 00:02:23.020
+de esta forma
+
+59
+00:02:23.240 --> 00:02:25.040
+coloco el section sin título
+
+60
+00:02:25.320 --> 00:02:26.360
+pues qué ocurre
+
+61
+00:02:26.610 --> 00:02:27.120
+pues
+
+62
+00:02:27.120 --> 00:02:28.570
+me aparece un warning
+
+63
+00:02:28.800 --> 00:02:30.620
+diciéndome que debo colocar
+
+64
+00:02:30.890 --> 00:02:33.000
+un título a esa section
+
+65
+00:02:33.380 --> 00:02:34.940
+es importante colocarla
+
+66
+00:02:36.140 --> 00:02:36.600
+bien
+
+67
+00:02:36.800 --> 00:02:40.340
+ahora hablaremos en el siguiente vídeo sobre la etiqueta article

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

@@ -0,0 +1,337 @@
+WEBVTT
+
+1
+00:00:01.300 --> 00:00:02.250
+article
+
+2
+00:00:02.250 --> 00:00:03.700
+es una etiqueta
+
+3
+00:00:03.700 --> 00:00:05.180
+que nos va ayudar
+
+4
+00:00:05.180 --> 00:00:06.220
+a
+
+5
+00:00:07.940 --> 00:00:09.660
+maquetar los artículos
+
+6
+00:00:09.660 --> 00:00:12.040
+a poder separarlos dentro de una section
+
+7
+00:00:12.880 --> 00:00:13.920
+por ejemplo
+
+8
+00:00:17.880 --> 00:00:19.080
+voy a regresar
+
+9
+00:00:20.880 --> 00:00:22.020
+a esta parte
+
+10
+00:00:22.370 --> 00:00:23.480
+tenemos
+
+11
+00:00:24.200 --> 00:00:25.680
+la etiqueta section
+
+12
+00:00:26.170 --> 00:00:29.020
+ahora vamos a colocar la etiqueta article
+
+13
+00:00:32.180 --> 00:00:33.570
+se ecribe de esa forma
+
+14
+00:00:33.570 --> 00:00:37.220
+etiqueta article que abre etiqueta article que cierra
+
+15
+00:00:37.650 --> 00:00:39.330
+la etiqueta article
+
+16
+00:00:39.450 --> 00:00:41.660
+también debe de tener
+
+17
+00:00:41.890 --> 00:00:42.600
+un
+
+18
+00:00:43.740 --> 00:00:44.610
+h*
+
+19
+00:00:44.610 --> 00:00:46.220
+también debe de tener
+
+20
+00:00:46.500 --> 00:00:49.460
+una etiqueta de título
+
+21
+00:00:51.620 --> 00:00:52.720
+ejemplo...
+
+22
+00:00:52.720 --> 00:00:54.440
+de etiqueta article
+
+23
+00:00:54.730 --> 00:00:57.800
+vamos a ir a la página de conocimientos libres
+
+24
+00:00:58.050 --> 00:00:58.890
+aquí está
+
+25
+00:01:00.250 --> 00:01:01.850
+y cada uno de
+
+26
+00:01:02.010 --> 00:01:03.850
+estos cards
+
+27
+00:01:04.410 --> 00:01:06.490
+se les conoce como «cards» en el diseño
+
+28
+00:01:07.600 --> 00:01:09.120
+sería un artículo
+
+29
+00:01:10.020 --> 00:01:14.450
+vamos a ver la parte del código fuente de cada uno de ellos
+
+30
+00:01:15.100 --> 00:01:16.380
+vamos a observar
+
+31
+00:01:17.850 --> 00:01:19.380
+que precisamente es
+
+32
+00:01:19.380 --> 00:01:20.730
+un article
+
+33
+00:01:21.570 --> 00:01:25.580
+este un «article», este es otro «article», este es otro «article»
+
+34
+00:01:27.970 --> 00:01:29.080
+si se fijan
+
+35
+00:01:29.080 --> 00:01:30.210
+cada uno
+
+36
+00:01:30.210 --> 00:01:31.680
+también tiene
+
+37
+00:01:31.680 --> 00:01:32.770
+su título
+
+38
+00:01:34.120 --> 00:01:35.500
+vamos a ir por aquí
+
+39
+00:01:39.580 --> 00:01:41.410
+esta palabrita que ve aquí
+
+40
+00:01:43.290 --> 00:01:44.700
+es un título
+
+41
+00:01:45.040 --> 00:01:47.100
+en este caso es el «h»
+
+42
+00:01:47.850 --> 00:01:49.080
+si se fijan
+
+43
+00:01:49.160 --> 00:01:52.000
+no es necesario que el article tenga
+
+44
+00:01:52.000 --> 00:01:53.410
+inmediatamente
+
+45
+00:01:53.920 --> 00:01:54.900
+es decir aquí
+
+46
+00:01:59.050 --> 00:02:01.720
+no es necesariamente que «h4» este ahí
+
+47
+00:02:01.720 --> 00:02:03.570
+seguidamente después de article
+
+48
+00:02:03.940 --> 00:02:06.780
+ese «h4» podría estar dentro de...
+
+49
+00:02:06.780 --> 00:02:09.810
+otra etiqueta, como por ejemplo una etiqueta...
+
+50
+00:02:10.820 --> 00:02:11.480
+div
+
+51
+00:02:11.660 --> 00:02:13.300
+que es la que más se utiliza para...
+
+52
+00:02:13.300 --> 00:02:15.140
+hacer una división de
+
+53
+00:02:15.140 --> 00:02:16.560
+de algo dentro de
+
+54
+00:02:16.560 --> 00:02:18.200
+las etiqueta semánticas
+
+55
+00:02:18.490 --> 00:02:20.720
+porque «div» no es etiqueta semántica
+
+56
+00:02:22.400 --> 00:02:23.980
+mientras que article sí
+
+57
+00:02:25.180 --> 00:02:29.170
+ahora vamos a ver que aquí podríamos poner vídeo 1
+
+58
+00:02:35.300 --> 00:02:36.730
+podríamos copiar
+
+59
+00:02:37.810 --> 00:02:39.290
+otra vez el article
+
+60
+00:02:40.100 --> 00:02:42.420
+colocando aquí vídeo 2
+
+61
+00:02:44.730 --> 00:02:45.960
+guardamos
+
+62
+00:02:47.240 --> 00:02:48.850
+vamos a la página
+
+63
+00:02:48.850 --> 00:02:50.210
+actualizamos
+
+64
+00:02:50.210 --> 00:02:51.890
+y vemos que esta «section»
+
+65
+00:02:51.890 --> 00:02:53.300
+tiene dos artículos
+
+66
+00:02:53.940 --> 00:02:56.180
+un artículo que se llama vídeo 1
+
+67
+00:02:56.180 --> 00:02:58.370
+y otro artículo que se llama vídeo 2
+
+68
+00:02:58.690 --> 00:03:00.200
+ahora vamos a ver
+
+69
+00:03:00.450 --> 00:03:02.460
+si el código fuente esta correcto
+
+70
+00:03:03.300 --> 00:03:05.880
+esto es para comprobar si es que todo esta correcto
+
+71
+00:03:05.880 --> 00:03:08.570
+si hay algún error pues lo corregimos ahora
+
+72
+00:03:09.720 --> 00:03:12.410
+pegamos el código que hemos copiado
+
+73
+00:03:12.520 --> 00:03:13.620
+checkeamos
+
+74
+00:03:16.740 --> 00:03:19.100
+y vemos que no hay ningún error
+
+75
+00:03:19.340 --> 00:03:20.960
+entonces todo está correcto
+
+76
+00:03:21.240 --> 00:03:22.410
+ahora ya saben
+
+77
+00:03:22.410 --> 00:03:23.770
+que una section
+
+78
+00:03:24.340 --> 00:03:25.080
+también
+
+79
+00:03:25.080 --> 00:03:27.140
+dentro puede tener article
+
+80
+00:03:27.380 --> 00:03:30.040
+y es lo que se hace en el desarrollo web
+
+81
+00:03:31.460 --> 00:03:32.450
+se separa
+
+82
+00:03:32.810 --> 00:03:33.810
+varias secciones
+
+83
+00:03:34.200 --> 00:03:37.760
+y luego dentro de esa sección se colocan los artículos
+
+84
+00:03:38.170 --> 00:03:40.540
+bien! nos vemos en el siguiente vídeo