Added new articles and fixes
This commit is contained in:
parent
910cdbe80c
commit
32a97ad30b
20
content/articles/course-html5/etiqueta-a.md
Normal file
20
content/articles/course-html5/etiqueta-a.md
Normal file
@ -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
|
||||
20
content/articles/course-html5/etiqueta-article.md
Normal file
20
content/articles/course-html5/etiqueta-article.md
Normal file
@ -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
|
||||
@ -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
|
||||
|
||||
20
content/articles/course-html5/etiqueta-section.md
Normal file
20
content/articles/course-html5/etiqueta-section.md
Normal file
@ -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
|
||||
22
content/articles/course-html5/etiquetas-p-y-span.md
Normal file
22
content/articles/course-html5/etiquetas-p-y-span.md
Normal file
@ -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
|
||||
22
content/articles/course-html5/etiquetas-strong-y-em.md
Normal file
22
content/articles/course-html5/etiquetas-strong-y-em.md
Normal file
@ -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
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
BIN
content/wp-content/uploads/article/poster/2019/04/etiqueta-a.jpg
Normal file
BIN
content/wp-content/uploads/article/poster/2019/04/etiqueta-a.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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
|
||||
Loading…
x
Reference in New Issue
Block a user