fix semantic video

2019-04-24 17:43:46 -05:00
parent 0b7754d699
commit 04b00d555d
23 changed files with 182 additions and 119 deletions
--- a/content/articles/course-html5/codificacion.md
+++ b/content/articles/course-html5/codificacion.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 16:28
 Title: Codificación HTML5

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0004-Codificacion.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0004-codificacion-es.vtt" srclang="es" default>
-</video>
-
-# Codificación HTML5 4/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0004-Codificacion.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0004-codificacion-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Codificación HTML5 4/32</h1>
+  </figcaption>
+</figure>

 La etiqueta `<span>` se utiliza para agrupar elementos en línea en un documento.

--- a/content/articles/course-html5/etiqueta-a.md
+++ b/content/articles/course-html5/etiqueta-a.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiqueta a 9/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiqueta a 9/32</h1>
+  </figcaption>
+</figure>

 Si el elemento `a` tiene un atributo href, entonces representa un hipervínculo (un ancla de hipertexto).

--- a/content/articles/course-html5/etiqueta-article.md
+++ b/content/articles/course-html5/etiqueta-article.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiqueta article 13/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiqueta article 13/32</h1>
+  </figcaption>
+</figure>

 Representa una sección de una página que consta de una composición que
 forma parte independiente de un documento, página o sitio.
--- a/content/articles/course-html5/etiqueta-aside.md
+++ b/content/articles/course-html5/etiqueta-aside.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiqueta aside 14/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiqueta aside 14/32</h1>
+  </figcaption>
+</figure>

 Representa una sección de una página que consiste en una información que está relacionado tangencialmente
 con la información de alrededor del elemento aparte, y que podría considerarse separado de la información principal.
--- a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
+++ b/content/articles/course-html5/etiqueta-nav-ul-ol-li.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 08:20
 Title: Etiqueta nav ul ol li

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0008-nav-ul-ol-li.webm" type="video/webm">
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0008-nav-ul-ol-li.webm" type="video/webm">
    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0008-nav-ul-ol-li-es.vtt" srclang="es" default>
-</video>
-
-# Etiqueta nav ul ol li 8/32
+  </video>
+  <figcaption>
+    <h1>Etiqueta nav ul ol li 8/32</h1>
+  </figcaption>
+</figure>

 - El elemento de navegación «nav» es una sección que contiene enlaces a otros documentos o partes del documento actual.
 - El elemento ul representa una lista de elementos, donde el orden de los elementos no es importante.
--- a/content/articles/course-html5/etiqueta-section.md
+++ b/content/articles/course-html5/etiqueta-section.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiqueta section 12/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiqueta section 12/32</h1>
+  </figcaption>
+</figure>

 Representa un documento genérico o sección de aplicación. En este contexto, una sección es una agrupación
 temática de la información, normalmente con un encabezado, posiblemente con un pie de página.
--- a/content/articles/course-html5/etiquetas-p-y-span.md
+++ b/content/articles/course-html5/etiquetas-p-y-span.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiquetas p y span 10/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiquetas p y span 10/32</h1>
+  </figcaption>
+</figure>

 El elemento `p` representa un párrafo y el elemento `span` no significa nada por sí solo,
 pero puede ser útil cuando se usa junto con los atributos globales,
--- a/content/articles/course-html5/etiquetas-strong-y-em.md
+++ b/content/articles/course-html5/etiquetas-strong-y-em.md
@@ -8,12 +8,15 @@ 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>
-
-# Etiquetas strong y em 11/32
+<figure>
+  <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>
+  <figcaption>
+    <h1>Etiquetas strong y em 11/32</h1>
+  </figcaption>
+</figure>

 La etiqueta `strong` brinda una gran importancia a un parráfo, una palabra o una frase y
 `em` representa el énfasis del estrés de sus contenidos.
--- a/content/articles/course-html5/header.md
+++ b/content/articles/course-html5/header.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 05:37
 Title: Header

-<video id="player-ply" playsinline controls>
-<source src="https://archive.org/download/coursehtml5/0005-header.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0005-header-es.vtt" srclang="es" default>
-</video>
-
-# Header HTML5 5/32
+<figure>
+  <video id="player-ply" playsinline controls>
+  <source src="https://archive.org/download/coursehtml5/0005-header.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0005-header-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Header HTML5 5/32</h1>
+  </figcaption>
+</figure>

 Header representa el "encabezado" de un documento o sección de un documento.

--- a/content/articles/course-html5/hgroup.md
+++ b/content/articles/course-html5/hgroup.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 03:19
 Title: hgroup

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0007-hgroup.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0007-hgroup-es.vtt" srclang="es" default>
-</video>
-
-# Hgroup HTML5 7/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0007-hgroup.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0007-hgroup-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Hgroup HTML5 7/32</h1>
+  </figcaption>
+</figure>

 Hgroup fue una etiqueta que apareció en HTML5, su función es agrupar las
 etiquetas de títulos las `h`. Pero desde las versión 5.1 de HTML ya no se
--- a/content/articles/course-html5/intro.md
+++ b/content/articles/course-html5/intro.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 09:16
 Title: Introducción a HTML5

-<video id="player-ply" playsinline controls poster=''>
-  <source src="https://archive.org/download/coursehtml5/0001-Introduccion.webm" type="video/webm"/>
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt" srclang="es" default>
-</video>
-
-# Introducción a HTML5 1/32
+<figure>
+  <video id="player-ply" playsinline controls poster=''>
+    <source src="https://archive.org/download/coursehtml5/0001-Introduccion.webm" type="video/webm"/>
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/introduccion-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Introducción a HTML5 1/32</h1>
+  </figcaption>
+</figure>

 HTML tiene una nueva versión desde hace unos años, hablamos de la versión 5 del mismo.
 Trayendo consigo nuevas etiquetas, las llamadas etiquetas semánticas.
--- a/content/articles/course-html5/nuevas-etiquetas.md
+++ b/content/articles/course-html5/nuevas-etiquetas.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 2:36
 Title: Nuevas etiquetas de HTML5

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0002-nuevas-etiquetas.webm" type="video/webm"/>
-  <track kind="captions" src="{static}/wp-content/uploads/article/subtitles/2019/03/0002-nuevas-etiquetas-es.vtt" srclang="es" label="Español" default>
-</video>
-
-# Nuevas etiquetas de HTML5 2/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0002-nuevas-etiquetas.webm" type="video/webm"/>
+    <track kind="captions" src="{static}/wp-content/uploads/article/subtitles/2019/03/0002-nuevas-etiquetas-es.vtt" srclang="es" label="Español" default>
+  </video>
+  <figcaption>
+    <h1>Nuevas etiquetas de HTML5 2/32</h1>
+  </figcaption>
+</figure>

 Las nuevas etiquetas de HTML5 ahora son semánticas, es decir que dan
 sentido a la información escrita en una página web.
--- a/content/articles/course-html5/sintaxis-html5.md
+++ b/content/articles/course-html5/sintaxis-html5.md
@@ -9,12 +9,15 @@ Tags: html
 Time: 09:57
 Title: Sintaxis HTML5

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0003-Sintaxis-HTML5.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt" srclang="es" default>
-</video>
-
-# Sintaxis HTML5 3/32
+<figure>
+  <video id="player-ply" playsinline controls>
+    <source src="https://archive.org/download/coursehtml5/0003-Sintaxis-HTML5.webm" type="video/webm">
+    <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0003-sintaxis-html5-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Sintaxis HTML5 3/32</h1>
+  </figcaption>
+</figure>

 En HTML5 se maneja una sintaxis simple sin tantos dolores de cabeza.
 También coloco un enlace al [validador][validator]{:target="_blank" rel="noopener noreferrer"} de la W3C.
--- a/content/articles/course-html5/titulos.md
+++ b/content/articles/course-html5/titulos.md
@@ -8,12 +8,15 @@ Tags: html
 Time: 07:55
 Title: Títulos en HTML5

-<video id="player-ply" playsinline controls>
-  <source src="https://archive.org/download/coursehtml5/0006-h1-h2-h3-h4-h5-h6.webm" type="video/webm">
-  <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0006-titulos-es.vtt" srclang="es" default>
-</video>
-
-# Títulos en HTML5 6/32
+<figure>
+  <video id="player-ply" playsinline controls>
+     <source src="https://archive.org/download/coursehtml5/0006-h1-h2-h3-h4-h5-h6.webm" type="video/webm">
+     <track kind="captions" label="Español" src="{static}/wp-content/uploads/article/subtitles/2019/03/0006-titulos-es.vtt" srclang="es" default>
+  </video>
+  <figcaption>
+    <h1>Títulos en HTML5 6/32</h1>
+  </figcaption>
+</figure>

 En el vídeo se explica de la importancia de las etiquetas
 de título o también llamadas encabezados por su nombre en inglés