diff options
20 files changed, 1399 insertions, 13 deletions
diff --git a/content/articles/course-html5/etiqueta-a.md b/content/articles/course-html5/etiqueta-a.md new file mode 100644 index 0000000..426ea12 --- /dev/null +++ b/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 diff --git a/content/articles/course-html5/etiqueta-article.md b/content/articles/course-html5/etiqueta-article.md new file mode 100644 index 0000000..e97cd36 --- /dev/null +++ b/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 diff --git a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md b/content/articles/course-html5/etiqueta-nav-ul-ol-li.md index 9b4840c..9a498a1 100644 --- a/content/articles/course-html5/etiqueta-nav-ul-ol-li.md +++ b/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"> -<li><a href="https://www.w3schools.com/tags/tag_nav.asp">Etiqueta nav</a></li> -<li><a href="https://www.w3schools.com/tags/tag_ul.asp">Etiqueta ul</a></li> -<li><a href="https://www.w3schools.com/tags/tag_ol.asp">Etiqueta ol</a></li> -<li><a href="https://www.w3schools.com/tags/tag_li.asp">Etiqueta li</a></li> -</ul> +<p class="mb-0">Más sobre la etiqueta `<nav>` en la [w3schools][w3-nav]{:target="_blank" rel="noopener noreferrer"}</p> +<p class="mb-0">Más sobre la etiqueta `<ul>` en la [w3schools][w3-ul]{:target="_blank" rel="noopener noreferrer"}</p> +<p class="mb-0">Más sobre la etiqueta `<ol>` en la [w3schools][w3-ol]{:target="_blank" rel="noopener noreferrer"}</p> +<p class="mb-0">Más sobre la etiqueta `<li>` en la [w3schools][w3-li]{:target="_blank" rel="noopener noreferrer"}</p> </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 diff --git a/content/articles/course-html5/etiqueta-section.md b/content/articles/course-html5/etiqueta-section.md new file mode 100644 index 0000000..6b4536c --- /dev/null +++ b/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 diff --git a/content/articles/course-html5/etiquetas-p-y-span.md b/content/articles/course-html5/etiquetas-p-y-span.md new file mode 100644 index 0000000..9024123 --- /dev/null +++ b/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 diff --git a/content/articles/course-html5/etiquetas-strong-y-em.md b/content/articles/course-html5/etiquetas-strong-y-em.md new file mode 100644 index 0000000..acfc0c3 --- /dev/null +++ b/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 diff --git a/content/articles/course-html5/header.md b/content/articles/course-html5/header.md index 206421c..cde36c4 100644 --- a/content/articles/course-html5/header.md +++ b/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][header] en w3schools. - +Más información sobre la etiqueta `<header>` en [w3schools][header]{:target="_blank" rel="noopener noreferrer"}. </details> [header]: https://www.w3schools.com/tags/tag_header.asp diff --git a/content/articles/course-html5/hgroup.md b/content/articles/course-html5/hgroup.md index 550e110..025676c 100644 --- a/content/articles/course-html5/hgroup.md +++ b/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> diff --git a/content/articles/course-html5/intro.md b/content/articles/course-html5/intro.md index b3cc4cd..c2e713d 100644 --- a/content/articles/course-html5/intro.md +++ b/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>[w3schools][w3c]</li> +<li>[Respositorio oficial][html]{:target="_blank" rel="noopener noreferrer"} de HTML</li> +<li>[w3schools][w3c]{:target="_blank" rel="noopener noreferrer"}</li> </ul> </details> diff --git a/content/articles/course-html5/titulos.md b/content/articles/course-html5/titulos.md index 08a4be6..cd80a1b 100644 --- a/content/articles/course-html5/titulos.md +++ b/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> diff --git a/content/wp-content/uploads/article/poster/2019/04/etiqueta-a.jpg b/content/wp-content/uploads/article/poster/2019/04/etiqueta-a.jpg Binary files differnew file mode 100644 index 0000000..19bfd19 --- /dev/null +++ b/content/wp-content/uploads/article/poster/2019/04/etiqueta-a.jpg diff --git a/content/wp-content/uploads/article/poster/2019/04/etiqueta-article.jpg b/content/wp-content/uploads/article/poster/2019/04/etiqueta-article.jpg Binary files differnew file mode 100644 index 0000000..e2b7ad9 --- /dev/null +++ b/content/wp-content/uploads/article/poster/2019/04/etiqueta-article.jpg diff --git a/content/wp-content/uploads/article/poster/2019/04/etiqueta-section.jpg b/content/wp-content/uploads/article/poster/2019/04/etiqueta-section.jpg Binary files differnew file mode 100644 index 0000000..761ba9d --- /dev/null +++ b/content/wp-content/uploads/article/poster/2019/04/etiqueta-section.jpg diff --git a/content/wp-content/uploads/article/poster/2019/04/etiquetas-span-p.jpg b/content/wp-content/uploads/article/poster/2019/04/etiquetas-span-p.jpg Binary files differnew file mode 100644 index 0000000..cefff2e --- /dev/null +++ b/content/wp-content/uploads/article/poster/2019/04/etiquetas-span-p.jpg diff --git a/content/wp-content/uploads/article/poster/2019/04/etiquetas-strong-em.jpg b/content/wp-content/uploads/article/poster/2019/04/etiquetas-strong-em.jpg Binary files differnew file mode 100644 index 0000000..7eba863 --- /dev/null +++ b/content/wp-content/uploads/article/poster/2019/04/etiquetas-strong-em.jpg diff --git a/content/wp-content/uploads/article/subtitles/2019/04/0009-etiqueta-a-es.vtt b/content/wp-content/uploads/article/subtitles/2019/04/0009-etiqueta-a-es.vtt new file mode 100644 index 0000000..70cec98 --- /dev/null +++ b/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 diff --git a/content/wp-content/uploads/article/subtitles/2019/04/0010-etiquetas-p-span-es.vtt b/content/wp-content/uploads/article/subtitles/2019/04/0010-etiquetas-p-span-es.vtt new file mode 100644 index 0000000..661d5b9 --- /dev/null +++ b/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 diff --git a/content/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt b/content/wp-content/uploads/article/subtitles/2019/04/0011-etiquetas-strong-em-es.vtt new file mode 100644 index 0000000..ff242c0 --- /dev/null +++ b/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 diff --git a/content/wp-content/uploads/article/subtitles/2019/04/0012-section-es.vtt b/content/wp-content/uploads/article/subtitles/2019/04/0012-section-es.vtt new file mode 100644 index 0000000..edde73a --- /dev/null +++ b/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 diff --git a/content/wp-content/uploads/article/subtitles/2019/04/0013-article-es.vtt b/content/wp-content/uploads/article/subtitles/2019/04/0013-article-es.vtt new file mode 100644 index 0000000..7408c25 --- /dev/null +++ b/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 |
