338 lines
4.8 KiB
WebVTT
338 lines
4.8 KiB
WebVTT
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
|