first commit
This commit is contained in:
Jesús
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
content/wp-content/uploads/article/poster/2017/07/sin-parar.jpg
Normal file
BIN
content/wp-content/uploads/article/poster/2017/07/sin-parar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
@@ -0,0 +1,590 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:05.580 --> 00:00:06.880
|
||||
En el vídeo anterior
|
||||
|
||||
2
|
||||
00:00:07.660 --> 00:00:08.820
|
||||
logramos entender
|
||||
|
||||
3
|
||||
00:00:08.940 --> 00:00:14.880
|
||||
como funcionan la etiquetas de HTML5, las etiquetas obsoletas, las nuevas etiquetas
|
||||
|
||||
4
|
||||
00:00:16.500 --> 00:00:18.380
|
||||
y ahora pues vamos a
|
||||
|
||||
5
|
||||
00:00:18.380 --> 00:00:20.380
|
||||
escribir el código
|
||||
|
||||
6
|
||||
00:00:21.120 --> 00:00:22.700
|
||||
para poder generar
|
||||
|
||||
7
|
||||
00:00:22.820 --> 00:00:24.060
|
||||
cualquier página web
|
||||
|
||||
8
|
||||
00:00:25.400 --> 00:00:27.780
|
||||
vamos abrir el editor de código
|
||||
|
||||
9
|
||||
00:00:27.780 --> 00:00:29.780
|
||||
voy a...
|
||||
|
||||
10
|
||||
00:00:30.080 --> 00:00:32.620
|
||||
colocar aquí el localhost
|
||||
|
||||
11
|
||||
00:00:33.420 --> 00:00:37.840
|
||||
localhost
|
||||
|
||||
12
|
||||
00:00:43.280 --> 00:00:46.100
|
||||
y voy a entrar dentro del directorio course
|
||||
|
||||
13
|
||||
00:00:46.560 --> 00:00:51.540
|
||||
todavía no hay nada, porque todavía no he escrito nada
|
||||
|
||||
14
|
||||
00:00:52.700 --> 00:00:54.300
|
||||
vamos a ir...
|
||||
|
||||
15
|
||||
00:00:54.300 --> 00:00:58.600
|
||||
al editor de código, yo utilizaré Emacs
|
||||
|
||||
16
|
||||
00:01:01.300 --> 00:01:02.480
|
||||
ahí está
|
||||
|
||||
17
|
||||
00:01:05.520 --> 00:01:08.500
|
||||
voy a borrar, esta parte
|
||||
|
||||
18
|
||||
00:01:10.280 --> 00:01:15.820
|
||||
voy a minimizar también esto, ahí está!, voy a agrandar el texto
|
||||
|
||||
19
|
||||
00:01:16.980 --> 00:01:18.120
|
||||
ahí está
|
||||
|
||||
20
|
||||
00:01:20.980 --> 00:01:24.860
|
||||
bien primero podríamos...
|
||||
|
||||
21
|
||||
00:01:27.460 --> 00:01:30.400
|
||||
escribir la etiqueta <!doctype>
|
||||
|
||||
22
|
||||
00:01:32.840 --> 00:01:36.340
|
||||
ahora también se acostumbra también a escribir en minúscula
|
||||
|
||||
23
|
||||
00:01:40.320 --> 00:01:41.860
|
||||
que sería de esa forma
|
||||
|
||||
24
|
||||
00:01:42.340 --> 00:01:45.740
|
||||
<!doctype html> etiqueta <html>
|
||||
|
||||
25
|
||||
00:01:46.540 --> 00:01:49.360
|
||||
y etiqueta </html> que cierra
|
||||
|
||||
26
|
||||
00:01:49.360 --> 00:01:51.360
|
||||
de esta forma
|
||||
|
||||
27
|
||||
00:01:52.500 --> 00:01:53.340
|
||||
como véis
|
||||
|
||||
28
|
||||
00:01:54.020 --> 00:01:56.380
|
||||
Emacs no me ha coloreado
|
||||
|
||||
29
|
||||
00:01:56.560 --> 00:02:00.460
|
||||
No me ha coloreado la parte de la sintaxis
|
||||
|
||||
30
|
||||
00:02:00.460 --> 00:02:02.460
|
||||
eso es porque estoy en mode-lisp
|
||||
|
||||
31
|
||||
00:02:03.240 --> 00:02:05.180
|
||||
los que usáis Emacs ya me entenderéis
|
||||
|
||||
32
|
||||
00:02:05.860 --> 00:02:08.940
|
||||
Si utilizáis otro editor pues automaticamente
|
||||
|
||||
33
|
||||
00:02:10.320 --> 00:02:13.080
|
||||
les va a detectar la sintaxis
|
||||
|
||||
34
|
||||
00:02:13.360 --> 00:02:14.800
|
||||
voy a utilizar el web-mode
|
||||
|
||||
35
|
||||
00:02:15.720 --> 00:02:17.760
|
||||
y aquí como podéis observar
|
||||
|
||||
36
|
||||
00:02:17.760 --> 00:02:19.760
|
||||
tenemos
|
||||
|
||||
37
|
||||
00:02:20.560 --> 00:02:22.100
|
||||
ya la estructura básica
|
||||
|
||||
38
|
||||
00:02:22.780 --> 00:02:24.740
|
||||
<!doctype html>
|
||||
|
||||
39
|
||||
00:02:25.060 --> 00:02:27.880
|
||||
etiqueta <html>
|
||||
|
||||
40
|
||||
00:02:27.880 --> 00:02:29.880
|
||||
siempre tiene que llevar
|
||||
|
||||
41
|
||||
00:02:30.040 --> 00:02:36.680
|
||||
un atributo que es el artributo lenguaje, y dentro pues colocar
|
||||
|
||||
42
|
||||
00:02:36.920 --> 00:02:40.300
|
||||
el idioma, en esta caso Español-España (es-es)
|
||||
|
||||
43
|
||||
00:02:40.680 --> 00:02:43.800
|
||||
también podría ser inglés: en
|
||||
|
||||
44
|
||||
00:02:44.860 --> 00:02:47.200
|
||||
podría ser portugués: pt_BR
|
||||
|
||||
45
|
||||
00:02:48.780 --> 00:02:51.440
|
||||
cualquier tipo de idioma: zxy
|
||||
|
||||
46
|
||||
00:02:53.220 --> 00:02:59.060
|
||||
En este caso voy a poner español-españa, y dentro de la etiqueta <html>
|
||||
|
||||
47
|
||||
00:02:59.780 --> 00:03:03.640
|
||||
siempre va un <head>
|
||||
|
||||
48
|
||||
00:03:04.460 --> 00:03:07.840
|
||||
un <head> que abre un </head> que cierra
|
||||
|
||||
49
|
||||
00:03:09.500 --> 00:03:17.480
|
||||
aquí van todas las etiquetas que describen a la página, el título, los metadata, todo eso va ahí
|
||||
|
||||
50
|
||||
00:03:17.780 --> 00:03:20.980
|
||||
y luego tenemos la etiqueta
|
||||
|
||||
51
|
||||
00:03:21.540 --> 00:03:23.580
|
||||
<body>
|
||||
|
||||
52
|
||||
00:03:25.760 --> 00:03:28.420
|
||||
que también tiene su contraparte
|
||||
|
||||
53
|
||||
00:03:30.160 --> 00:03:34.320
|
||||
¿qué va dentro de la etiqueta <head>?
|
||||
|
||||
54
|
||||
00:03:35.660 --> 00:03:37.300
|
||||
ahí vamos a colocar
|
||||
|
||||
55
|
||||
00:03:38.160 --> 00:03:43.820
|
||||
toda la información, el titulo, la información, toda esa información se va a colocar allí
|
||||
|
||||
56
|
||||
00:03:44.460 --> 00:03:46.740
|
||||
y aquí en la etiqueta <body>
|
||||
|
||||
57
|
||||
00:03:46.840 --> 00:03:50.120
|
||||
se va a colocar la información
|
||||
|
||||
58
|
||||
00:03:50.120 --> 00:03:52.120
|
||||
que se le va a mostrar al usuario
|
||||
|
||||
59
|
||||
00:03:52.120 --> 00:03:54.120
|
||||
por ejemplo
|
||||
|
||||
60
|
||||
00:03:54.500 --> 00:03:57.140
|
||||
vamos a regresar a conocimientos libres
|
||||
|
||||
61
|
||||
00:03:59.280 --> 00:04:00.720
|
||||
ah... vamos a ver...
|
||||
|
||||
62
|
||||
00:04:01.280 --> 00:04:02.940
|
||||
la parte interna
|
||||
|
||||
63
|
||||
00:04:02.940 --> 00:04:04.940
|
||||
aquí lo tenemos
|
||||
|
||||
64
|
||||
00:04:05.020 --> 00:04:07.620
|
||||
en body, en <body>
|
||||
|
||||
65
|
||||
00:04:08.100 --> 00:04:12.040
|
||||
tenemos que colocar todo lo que se le va a mostrar al usuario
|
||||
|
||||
66
|
||||
00:04:12.280 --> 00:04:15.200
|
||||
la cabecera, el área de navegación
|
||||
|
||||
67
|
||||
00:04:15.920 --> 00:04:19.220
|
||||
parte de los artículos, la figuritas
|
||||
|
||||
68
|
||||
00:04:19.500 --> 00:04:27.140
|
||||
toda esa información, va dentro de la etiqueta <body>, todo va dentro de la etiqueta <body>
|
||||
|
||||
69
|
||||
00:04:27.300 --> 00:04:31.480
|
||||
todo esto que véis aquí esta dentro de la etiqueta <body>
|
||||
|
||||
70
|
||||
00:04:31.660 --> 00:04:41.040
|
||||
lo que esta dentro de la etiqueta <head>, es esta parte, lo que se encuentra arriba, donde dice conocimientos libres y hay un logito
|
||||
|
||||
71
|
||||
00:04:41.760 --> 00:04:47.200
|
||||
eso va dentro de la etiqueta <head>, ahí va
|
||||
|
||||
72
|
||||
00:04:48.400 --> 00:04:55.300
|
||||
no confundáis <head> con esta otra etiqueta que es <header>
|
||||
|
||||
73
|
||||
00:04:59.520 --> 00:05:02.700
|
||||
son palabras similares pero diferentes
|
||||
|
||||
74
|
||||
00:05:04.840 --> 00:05:06.780
|
||||
pueden ser dos
|
||||
|
||||
75
|
||||
00:05:06.780 --> 00:05:08.780
|
||||
pueden haber dos etiquetas <header>
|
||||
|
||||
76
|
||||
00:05:09.080 --> 00:05:13.980
|
||||
he visto sitios donde tienen más de un cabecera
|
||||
|
||||
77
|
||||
00:05:15.820 --> 00:05:22.420
|
||||
bien primero vamos a completar la parte del <head>
|
||||
|
||||
78
|
||||
00:05:22.600 --> 00:05:25.480
|
||||
en donde esta la información, esto vamos a ponerlo debajo
|
||||
|
||||
79
|
||||
00:05:25.480 --> 00:05:27.480
|
||||
y aquí vamos a colocar
|
||||
|
||||
80
|
||||
00:05:27.800 --> 00:05:29.780
|
||||
al igual como
|
||||
|
||||
81
|
||||
00:05:29.780 --> 00:05:31.780
|
||||
aquí en conocimientos libres
|
||||
|
||||
82
|
||||
00:05:31.980 --> 00:05:36.480
|
||||
vamos a poner una etiqueta bastante sencilla que...
|
||||
|
||||
83
|
||||
00:05:37.300 --> 00:05:42.700
|
||||
...que es la etiqueta <title> vamos a colocar allí la etiqueta <title>
|
||||
|
||||
84
|
||||
00:05:44.540 --> 00:05:48.600
|
||||
ahí esta la etiquet <title>!, dentro de la etiqueta <title>
|
||||
|
||||
85
|
||||
00:05:48.600 --> 00:05:50.320
|
||||
vamos a...
|
||||
|
||||
86
|
||||
00:05:50.320 --> 00:05:52.320
|
||||
poner el título
|
||||
|
||||
87
|
||||
00:05:52.620 --> 00:06:03.040
|
||||
En este caso vamos a poner aquí: mi primera web en HTML5
|
||||
|
||||
88
|
||||
00:06:03.040 --> 00:06:05.040
|
||||
correcto!
|
||||
|
||||
89
|
||||
00:06:06.700 --> 00:06:09.440
|
||||
bien, aún...
|
||||
|
||||
90
|
||||
00:06:09.720 --> 00:06:12.840
|
||||
parece algo simple esto
|
||||
|
||||
91
|
||||
00:06:12.840 --> 00:06:15.320
|
||||
vamos a guardarlo para ver si funciona.
|
||||
|
||||
92
|
||||
00:06:15.320 --> 00:06:17.320
|
||||
voy a guardarlo
|
||||
|
||||
93
|
||||
00:06:18.420 --> 00:06:27.720
|
||||
aquí, ya es cuestión de qué editor utilizáis yo aquí utilizó Emacs, simplemente hice C-x C-s
|
||||
|
||||
94
|
||||
00:06:28.140 --> 00:06:31.000
|
||||
y ahora voy a guardarlo dentro del directorio "srv"
|
||||
|
||||
95
|
||||
00:06:31.000 --> 00:06:33.000
|
||||
.../http/...
|
||||
|
||||
96
|
||||
00:06:33.480 --> 00:06:38.180
|
||||
y voy a entrar a course, y lo voy a guardar con el nombre
|
||||
|
||||
97
|
||||
00:06:39.240 --> 00:06:41.300
|
||||
para esta parte
|
||||
|
||||
98
|
||||
00:06:41.740 --> 00:06:43.920
|
||||
de manera predeterminada
|
||||
|
||||
99
|
||||
00:06:44.120 --> 00:06:47.840
|
||||
el nombre que va llevar el archivo HTML
|
||||
|
||||
100
|
||||
00:06:47.840 --> 00:06:50.960
|
||||
por defecto debería de ser index
|
||||
|
||||
101
|
||||
00:06:50.960 --> 00:06:55.400
|
||||
debería ser index.html
|
||||
|
||||
102
|
||||
00:06:56.460 --> 00:06:58.000
|
||||
¿por qué index?
|
||||
|
||||
103
|
||||
00:06:58.260 --> 00:06:59.260
|
||||
porque...
|
||||
|
||||
104
|
||||
00:06:59.260 --> 00:07:00.720
|
||||
este nombre
|
||||
|
||||
105
|
||||
00:07:00.720 --> 00:07:02.220
|
||||
el nombre index
|
||||
|
||||
106
|
||||
00:07:02.220 --> 00:07:05.340
|
||||
es el que los servidores web
|
||||
|
||||
107
|
||||
00:07:06.020 --> 00:07:09.340
|
||||
como por ejemplo: el apache, el nginx
|
||||
|
||||
108
|
||||
00:07:09.560 --> 00:07:12.160
|
||||
va a buscar en cada directorio
|
||||
|
||||
109
|
||||
00:07:12.400 --> 00:07:18.180
|
||||
sino encuentra el archivo llamado index.html o index.php
|
||||
|
||||
110
|
||||
00:07:19.100 --> 00:07:20.600
|
||||
sino los encuentra
|
||||
|
||||
111
|
||||
00:07:21.300 --> 00:07:23.880
|
||||
pues lo que va hacer es...
|
||||
|
||||
112
|
||||
00:07:24.240 --> 00:07:27.980
|
||||
mostrar la jerarquía de los archivos que están dentro
|
||||
|
||||
113
|
||||
00:07:28.600 --> 00:07:31.400
|
||||
por ejemplo vamos a colocar ahora.
|
||||
|
||||
114
|
||||
00:07:33.220 --> 00:07:35.660
|
||||
vamos hacer esto
|
||||
|
||||
115
|
||||
00:07:35.660 --> 00:07:37.660
|
||||
demo.html
|
||||
|
||||
116
|
||||
00:07:37.660 --> 00:07:39.660
|
||||
supongamos que es así
|
||||
|
||||
117
|
||||
00:07:40.720 --> 00:07:44.720
|
||||
que no le pusimos index y le pusimos demo.html
|
||||
|
||||
118
|
||||
00:07:46.520 --> 00:07:49.440
|
||||
aparentemente no pasó nada, simplemente se guardó
|
||||
|
||||
119
|
||||
00:07:50.100 --> 00:07:52.260
|
||||
y ahora vamos a ir al navegador
|
||||
|
||||
120
|
||||
00:07:53.440 --> 00:07:54.740
|
||||
al localhost
|
||||
|
||||
121
|
||||
00:07:54.740 --> 00:07:56.440
|
||||
actualizamos
|
||||
|
||||
122
|
||||
00:07:56.440 --> 00:08:00.000
|
||||
y vemos el archivo demo.html
|
||||
|
||||
123
|
||||
00:08:00.000 --> 00:08:01.280
|
||||
vamos a
|
||||
|
||||
124
|
||||
00:08:01.280 --> 00:08:02.540
|
||||
colocar ahí
|
||||
|
||||
125
|
||||
00:08:02.540 --> 00:08:04.540
|
||||
no se ve nada
|
||||
|
||||
126
|
||||
00:08:04.540 --> 00:08:08.160
|
||||
porque no hemos escrito nada en el <body>, solamente en el <head>
|
||||
|
||||
127
|
||||
00:08:08.160 --> 00:08:10.160
|
||||
y si os fijáis
|
||||
|
||||
128
|
||||
00:08:23.140 --> 00:08:25.320
|
||||
en esta parte
|
||||
|
||||
129
|
||||
00:08:25.320 --> 00:08:30.780
|
||||
pueden ver que dice «Mi primera web en HTML5» es bastante genial esto
|
||||
|
||||
130
|
||||
00:08:30.780 --> 00:08:32.780
|
||||
ahora
|
||||
|
||||
131
|
||||
00:08:34.420 --> 00:08:44.100
|
||||
para que veáis ese problema, hemos tenido que entrar dentro del archivo demo.html, no se ha mostrado automáticamente
|
||||
|
||||
132
|
||||
00:08:44.400 --> 00:08:46.540
|
||||
es decir no hemos recargado esto
|
||||
|
||||
133
|
||||
00:08:47.520 --> 00:08:53.900
|
||||
aparecido automáticamente la página, sino que hemos tenido que entrar dentro del archivo demo.html
|
||||
|
||||
134
|
||||
00:08:54.780 --> 00:09:00.200
|
||||
que pasaría si a este archivo demo.html le cambio de nombre
|
||||
|
||||
135
|
||||
00:09:01.760 --> 00:09:02.920
|
||||
por ejemplo
|
||||
|
||||
136
|
||||
00:09:04.220 --> 00:09:06.900
|
||||
ahora ya no se va llamar así, sino se va a llamar
|
||||
|
||||
137
|
||||
00:09:10.580 --> 00:09:13.180
|
||||
se va a llamar ahora pues...
|
||||
|
||||
138
|
||||
00:09:14.220 --> 00:09:17.080
|
||||
index.html ¿cómo hago eso?
|
||||
|
||||
139
|
||||
00:09:17.300 --> 00:09:18.460
|
||||
muy sencillo
|
||||
|
||||
140
|
||||
00:09:18.900 --> 00:09:20.400
|
||||
yo por acá tengo
|
||||
|
||||
141
|
||||
00:09:20.840 --> 00:09:22.660
|
||||
el directorio de course
|
||||
|
||||
142
|
||||
00:09:22.980 --> 00:09:23.880
|
||||
aquí está!
|
||||
|
||||
143
|
||||
00:09:24.460 --> 00:09:26.680
|
||||
he voy a cambiarle de nombre
|
||||
|
||||
144
|
||||
00:09:26.680 --> 00:09:29.180
|
||||
a index.html
|
||||
|
||||
145
|
||||
00:09:30.260 --> 00:09:33.520
|
||||
y automáticamente al actualizar me va ha cargar
|
||||
|
||||
146
|
||||
00:09:33.880 --> 00:09:37.800
|
||||
me va ha cargar el archivo index.html
|
||||
|
||||
147
|
||||
00:09:40.040 --> 00:09:44.180
|
||||
bien!, nos vemos en el siguiente vídeo para continuar avanzando
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,397 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:01.560 --> 00:00:04.000
|
||||
bien ahora seguimos con la etiqueta header
|
||||
|
||||
2
|
||||
00:00:07.100 --> 00:00:09.980
|
||||
la etiqueta header mayormente se utiliza
|
||||
|
||||
3
|
||||
00:00:09.980 --> 00:00:11.980
|
||||
en las páginas web
|
||||
|
||||
4
|
||||
00:00:12.160 --> 00:00:13.580
|
||||
de forma independiente
|
||||
|
||||
5
|
||||
00:00:13.800 --> 00:00:18.060
|
||||
algunas otras veces también la etiqueta header va acompañada de la etiqueta nav
|
||||
|
||||
6
|
||||
00:00:18.060 --> 00:00:20.060
|
||||
que se puede encontrar debajo
|
||||
|
||||
7
|
||||
00:00:20.640 --> 00:00:21.680
|
||||
de la misma
|
||||
|
||||
8
|
||||
00:00:22.540 --> 00:00:23.980
|
||||
en conocimientos libres
|
||||
|
||||
9
|
||||
00:00:24.320 --> 00:00:26.160
|
||||
la etiqueta header
|
||||
|
||||
10
|
||||
00:00:27.560 --> 00:00:28.880
|
||||
también
|
||||
|
||||
11
|
||||
00:00:29.200 --> 00:00:31.700
|
||||
encierra a la etiqueta nav
|
||||
|
||||
12
|
||||
00:00:32.300 --> 00:00:36.860
|
||||
vamos a observar el código fuente de conocimientos libres
|
||||
|
||||
13
|
||||
00:00:37.840 --> 00:00:38.740
|
||||
aquí está
|
||||
|
||||
14
|
||||
00:00:39.460 --> 00:00:41.000
|
||||
tenemos la etiqueta header
|
||||
|
||||
15
|
||||
00:00:41.000 --> 00:00:43.000
|
||||
y dentro hay
|
||||
|
||||
16
|
||||
00:00:44.180 --> 00:00:45.700
|
||||
la etiqueta nav
|
||||
|
||||
17
|
||||
00:00:46.920 --> 00:00:49.660
|
||||
que encienrra el resto de items
|
||||
|
||||
18
|
||||
00:00:49.840 --> 00:00:50.600
|
||||
para dar
|
||||
|
||||
19
|
||||
00:00:51.320 --> 00:00:53.700
|
||||
forma al menú de navegación
|
||||
|
||||
20
|
||||
00:00:54.440 --> 00:00:55.780
|
||||
vamos a identificar
|
||||
|
||||
21
|
||||
00:00:56.360 --> 00:00:57.740
|
||||
toda esta parte
|
||||
|
||||
22
|
||||
00:00:57.920 --> 00:00:59.100
|
||||
es el header
|
||||
|
||||
23
|
||||
00:01:01.400 --> 00:01:02.580
|
||||
bien
|
||||
|
||||
24
|
||||
00:01:02.580 --> 00:01:04.280
|
||||
ahora vamos a
|
||||
|
||||
25
|
||||
00:01:04.280 --> 00:01:05.620
|
||||
observar
|
||||
|
||||
26
|
||||
00:01:05.840 --> 00:01:08.960
|
||||
que en algunas páginas web
|
||||
|
||||
27
|
||||
00:01:10.460 --> 00:01:12.940
|
||||
el header solamente
|
||||
|
||||
28
|
||||
00:01:13.920 --> 00:01:16.260
|
||||
abarca la parte del banner
|
||||
|
||||
29
|
||||
00:01:19.140 --> 00:01:22.100
|
||||
por ejemplo vamos a irnos a
|
||||
|
||||
30
|
||||
00:01:22.480 --> 00:01:24.200
|
||||
una página web
|
||||
|
||||
31
|
||||
00:01:24.880 --> 00:01:26.800
|
||||
que desarrollamos en
|
||||
|
||||
32
|
||||
00:01:30.380 --> 00:01:31.880
|
||||
HackerTech
|
||||
|
||||
33
|
||||
00:02:00.680 --> 00:02:03.420
|
||||
por ejemplo aquí tenemos esta página
|
||||
|
||||
34
|
||||
00:02:04.020 --> 00:02:06.020
|
||||
la om360
|
||||
|
||||
35
|
||||
00:02:07.920 --> 00:02:10.040
|
||||
que fue desarrollada por HackerTech
|
||||
|
||||
36
|
||||
00:02:10.960 --> 00:02:12.180
|
||||
el header
|
||||
|
||||
37
|
||||
00:02:12.420 --> 00:02:17.380
|
||||
podría ser solamente la parte de la cabecera (traduciéndolo al español)
|
||||
|
||||
38
|
||||
00:02:17.520 --> 00:02:21.080
|
||||
solamente este banner, este gif
|
||||
|
||||
39
|
||||
00:02:22.100 --> 00:02:24.040
|
||||
podría ser solamente el header
|
||||
|
||||
40
|
||||
00:02:24.520 --> 00:02:25.700
|
||||
y después
|
||||
|
||||
41
|
||||
00:02:25.700 --> 00:02:28.620
|
||||
en la parte de abajo podríamos encontrar
|
||||
|
||||
42
|
||||
00:02:28.620 --> 00:02:31.080
|
||||
el menú de navegación
|
||||
|
||||
43
|
||||
00:02:31.740 --> 00:02:33.000
|
||||
en ese caso
|
||||
|
||||
44
|
||||
00:02:33.480 --> 00:02:36.200
|
||||
en la parte de om360
|
||||
|
||||
45
|
||||
00:02:36.200 --> 00:02:37.940
|
||||
solamente hemos
|
||||
|
||||
46
|
||||
00:02:38.580 --> 00:02:40.040
|
||||
colocado
|
||||
|
||||
47
|
||||
00:02:40.260 --> 00:02:44.140
|
||||
la etiqueta nav dentro del header
|
||||
|
||||
48
|
||||
00:02:44.480 --> 00:02:47.960
|
||||
aquí en la imagen nos muestran de manera separada
|
||||
|
||||
49
|
||||
00:02:47.960 --> 00:02:49.960
|
||||
primero el header y luego el nav
|
||||
|
||||
50
|
||||
00:02:49.960 --> 00:02:51.960
|
||||
aquí en el desarrollo web
|
||||
|
||||
51
|
||||
00:02:53.380 --> 00:02:55.380
|
||||
en esta parte está
|
||||
|
||||
52
|
||||
00:02:55.700 --> 00:02:56.640
|
||||
el nav
|
||||
|
||||
53
|
||||
00:02:56.900 --> 00:03:00.340
|
||||
el área de navegación está dentro del header
|
||||
|
||||
54
|
||||
00:03:00.700 --> 00:03:01.760
|
||||
¿por qué está dentro?
|
||||
|
||||
55
|
||||
00:03:01.760 --> 00:03:05.600
|
||||
bueno es para poder hacer los efectos que observáis allí
|
||||
|
||||
56
|
||||
00:03:07.820 --> 00:03:09.280
|
||||
ahora vamos a
|
||||
|
||||
57
|
||||
00:03:09.280 --> 00:03:13.300
|
||||
tocar el código a ver como funciona esto de la etiqueta header
|
||||
|
||||
58
|
||||
00:03:14.840 --> 00:03:17.920
|
||||
hasta ahora solo tenemos el "Hola Mundo!"
|
||||
|
||||
59
|
||||
00:03:18.360 --> 00:03:19.420
|
||||
vamos a entrar
|
||||
|
||||
60
|
||||
00:03:20.060 --> 00:03:21.300
|
||||
al
|
||||
|
||||
61
|
||||
00:03:22.800 --> 00:03:25.940
|
||||
al archivo index.html
|
||||
|
||||
62
|
||||
00:03:28.300 --> 00:03:29.520
|
||||
hasta ahora
|
||||
|
||||
63
|
||||
00:03:30.060 --> 00:03:31.900
|
||||
solamente teníamos una etiqueta
|
||||
|
||||
64
|
||||
00:03:32.080 --> 00:03:33.180
|
||||
h1
|
||||
|
||||
65
|
||||
00:03:36.220 --> 00:03:38.460
|
||||
ahora vamos a ver la etiqueta header
|
||||
|
||||
66
|
||||
00:03:41.380 --> 00:03:42.720
|
||||
como puedes observar
|
||||
|
||||
67
|
||||
00:03:42.720 --> 00:03:45.640
|
||||
etiqueta header tiene su contraparte, una etiqueta
|
||||
|
||||
68
|
||||
00:03:45.800 --> 00:03:48.040
|
||||
que abre y otra etiqueta que cierra
|
||||
|
||||
69
|
||||
00:03:48.680 --> 00:03:51.180
|
||||
aquí como podéis observar, aquí va
|
||||
|
||||
70
|
||||
00:03:51.560 --> 00:03:54.100
|
||||
todo lo que tiene que ver con el logotipo
|
||||
|
||||
71
|
||||
00:03:55.980 --> 00:03:57.000
|
||||
el banner
|
||||
|
||||
72
|
||||
00:04:00.180 --> 00:04:01.500
|
||||
y también pues
|
||||
|
||||
73
|
||||
00:04:02.020 --> 00:04:05.160
|
||||
mayormente el área de navegación
|
||||
|
||||
74
|
||||
00:04:07.560 --> 00:04:09.580
|
||||
el área de navegación es bastante importante
|
||||
|
||||
75
|
||||
00:04:09.580 --> 00:04:11.580
|
||||
que esté dentro del header
|
||||
|
||||
76
|
||||
00:04:11.760 --> 00:04:13.960
|
||||
pero hay que acotar algo bastante
|
||||
|
||||
77
|
||||
00:04:14.960 --> 00:04:16.360
|
||||
importante para...
|
||||
|
||||
78
|
||||
00:04:16.620 --> 00:04:17.860
|
||||
el asunto del header
|
||||
|
||||
79
|
||||
00:04:18.120 --> 00:04:20.500
|
||||
el header no puede ser demasiado grande
|
||||
|
||||
80
|
||||
00:04:20.660 --> 00:04:22.820
|
||||
porque qué pasaría si en...
|
||||
|
||||
81
|
||||
00:04:22.820 --> 00:04:24.820
|
||||
conocimientos libres
|
||||
|
||||
82
|
||||
00:04:26.640 --> 00:04:28.840
|
||||
el header fuese demasiado grande
|
||||
|
||||
83
|
||||
00:04:29.040 --> 00:04:32.340
|
||||
si el header fuese demasiado grande, es decir tuviese
|
||||
|
||||
84
|
||||
00:04:33.840 --> 00:04:35.660
|
||||
un alto
|
||||
|
||||
85
|
||||
00:04:36.140 --> 00:04:38.260
|
||||
mayor al de la página web
|
||||
|
||||
86
|
||||
00:04:38.780 --> 00:04:42.880
|
||||
pues taparía o desplazaría el formulario
|
||||
|
||||
87
|
||||
00:04:43.100 --> 00:04:47.280
|
||||
y el formulario de búsqueda en conocimientos libres es importante
|
||||
|
||||
88
|
||||
00:04:47.520 --> 00:04:48.340
|
||||
entonces
|
||||
|
||||
89
|
||||
00:04:48.600 --> 00:04:53.000
|
||||
es necesario de que el header sea pequeño que no sea intrusivo
|
||||
|
||||
90
|
||||
00:04:56.400 --> 00:05:00.840
|
||||
por eso algunas personas ponen aquí el banner o el logotipo
|
||||
|
||||
91
|
||||
00:05:01.120 --> 00:05:04.220
|
||||
o solamente el área de navegación
|
||||
|
||||
92
|
||||
00:05:05.840 --> 00:05:09.740
|
||||
para el área del navegación es necesario solamente colocar
|
||||
|
||||
93
|
||||
00:05:09.740 --> 00:05:11.740
|
||||
la etiqueta nav
|
||||
|
||||
94
|
||||
00:05:12.080 --> 00:05:13.140
|
||||
también
|
||||
|
||||
95
|
||||
00:05:14.260 --> 00:05:16.020
|
||||
podríamos colocar
|
||||
|
||||
96
|
||||
00:05:19.240 --> 00:05:21.700
|
||||
un h1 dentro del header
|
||||
|
||||
97
|
||||
00:05:22.200 --> 00:05:25.380
|
||||
para poder darle algún tipo de información - natural
|
||||
|
||||
98
|
||||
00:05:26.080 --> 00:05:28.220
|
||||
todas esas cosas podríamos colocarlo aquí
|
||||
|
||||
99
|
||||
00:05:28.800 --> 00:05:30.840
|
||||
bien nos vemos en el siguiente vídeo
|
||||
@@ -0,0 +1,405 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:02.420 --> 00:00:03.820
|
||||
bien ahora vamos a ver
|
||||
|
||||
2
|
||||
00:00:03.820 --> 00:00:05.820
|
||||
el tema de las h
|
||||
|
||||
3
|
||||
00:00:05.820 --> 00:00:07.820
|
||||
aquí tenemos
|
||||
|
||||
4
|
||||
00:00:10.000 --> 00:00:14.120
|
||||
las etiquetas h1, h2, h3, h4
|
||||
|
||||
5
|
||||
00:00:15.020 --> 00:00:18.560
|
||||
también se encunetra la etiqueta h5
|
||||
|
||||
6
|
||||
00:00:20.640 --> 00:00:23.460
|
||||
y también la etiqueta h6
|
||||
|
||||
7
|
||||
00:00:32.640 --> 00:00:35.700
|
||||
al h1 se le conoce como título principal
|
||||
|
||||
8
|
||||
00:00:36.540 --> 00:00:39.140
|
||||
al h2 se le conoce como subtítulo
|
||||
|
||||
9
|
||||
00:00:45.380 --> 00:00:46.900
|
||||
al h3
|
||||
|
||||
10
|
||||
00:00:48.800 --> 00:00:52.960
|
||||
la mayor parte de veces que lo vemos
|
||||
|
||||
11
|
||||
00:00:53.920 --> 00:00:57.080
|
||||
conforman el área de los títulos de algunos artículos
|
||||
|
||||
12
|
||||
00:00:58.420 --> 00:01:05.400
|
||||
casi siempre yo utilizo para la parte de los artículos h4
|
||||
|
||||
13
|
||||
00:01:05.400 --> 00:01:10.560
|
||||
ahorita vamos a verlo en conocimientos libres para tener una noción
|
||||
|
||||
14
|
||||
00:01:10.840 --> 00:01:13.160
|
||||
de cómo podría funcionar esto
|
||||
|
||||
15
|
||||
00:01:45.940 --> 00:01:50.340
|
||||
vamos a recargar el navegador ahorita para poder mirar
|
||||
|
||||
16
|
||||
00:01:52.740 --> 00:01:54.320
|
||||
cómo funciona esto
|
||||
|
||||
17
|
||||
00:02:02.960 --> 00:02:06.540
|
||||
ahí vemos actualizamos
|
||||
|
||||
18
|
||||
00:02:07.100 --> 00:02:14.380
|
||||
la parte de los h: h1, h2, h3, h4, h5 y h6
|
||||
|
||||
19
|
||||
00:02:15.100 --> 00:02:19.280
|
||||
que las palabras sean más grandes y otras más pequeñas
|
||||
|
||||
20
|
||||
00:02:19.900 --> 00:02:22.820
|
||||
eso es ya cuestión del navegador web
|
||||
|
||||
21
|
||||
00:02:23.320 --> 00:02:26.040
|
||||
ya que el navegador web trae sus propios estilos
|
||||
|
||||
22
|
||||
00:02:26.240 --> 00:02:30.380
|
||||
entonces eso ya es parte del navegador web
|
||||
|
||||
23
|
||||
00:02:31.140 --> 00:02:36.560
|
||||
esta parte de las dimensiones de los títulos puede cambiarse
|
||||
|
||||
24
|
||||
00:02:37.120 --> 00:02:38.320
|
||||
no es
|
||||
|
||||
25
|
||||
00:02:38.440 --> 00:02:39.820
|
||||
que porque sea
|
||||
|
||||
26
|
||||
00:02:40.080 --> 00:02:47.100
|
||||
porque quiero escribir una letra grande, tengo que escribir h1, no! eso es incorrecto
|
||||
|
||||
27
|
||||
00:02:47.100 --> 00:02:49.960
|
||||
la parte del diseño la vamos a estudiar
|
||||
|
||||
28
|
||||
00:02:50.440 --> 00:02:51.980
|
||||
con el CSS
|
||||
|
||||
29
|
||||
00:02:53.480 --> 00:02:58.240
|
||||
podríamos hacer que la etiqueta h6 sea más grande que la etiqueta h1
|
||||
|
||||
30
|
||||
00:02:58.460 --> 00:02:59.600
|
||||
con CSS
|
||||
|
||||
31
|
||||
00:03:00.680 --> 00:03:01.700
|
||||
ahora
|
||||
|
||||
32
|
||||
00:03:02.940 --> 00:03:05.320
|
||||
hay que entender algo y es que
|
||||
|
||||
33
|
||||
00:03:05.720 --> 00:03:08.220
|
||||
la etiqueta h1 es importante
|
||||
|
||||
34
|
||||
00:03:09.020 --> 00:03:11.620
|
||||
porque le da bastante peso a la página web
|
||||
|
||||
35
|
||||
00:03:12.080 --> 00:03:18.900
|
||||
de etiquetas h1 solamente debe existir una sola, no puede existir otra etiqueta
|
||||
|
||||
36
|
||||
00:03:20.280 --> 00:03:22.700
|
||||
¿por qué no puede existir otra etiqueta h1?
|
||||
|
||||
37
|
||||
00:03:22.700 --> 00:03:24.700
|
||||
bueno no puede existir
|
||||
|
||||
38
|
||||
00:03:25.200 --> 00:03:29.760
|
||||
porque al haber otra etiqueta h1 por ejemplo voy a colocar por aquí
|
||||
|
||||
39
|
||||
00:03:33.560 --> 00:03:37.340
|
||||
voy a copiar esto y voy a ponerlo debajo
|
||||
|
||||
40
|
||||
00:03:37.840 --> 00:03:39.520
|
||||
ahí está
|
||||
|
||||
41
|
||||
00:03:40.000 --> 00:03:43.160
|
||||
si yo tuviese dos etiquetas h1
|
||||
|
||||
42
|
||||
00:03:43.540 --> 00:03:48.100
|
||||
los navegadores web al tratar
|
||||
|
||||
43
|
||||
00:03:48.720 --> 00:03:52.920
|
||||
va a repartir el peso del SEO
|
||||
|
||||
44
|
||||
00:03:53.100 --> 00:03:54.040
|
||||
es decir
|
||||
|
||||
45
|
||||
00:03:54.400 --> 00:03:57.600
|
||||
el buscador no va a decidirse
|
||||
|
||||
46
|
||||
00:03:58.060 --> 00:04:00.480
|
||||
por cual utilizar, entonces va a decir:
|
||||
|
||||
47
|
||||
00:04:00.620 --> 00:04:05.700
|
||||
«aquí el desarrollador me esta diciendo que hay dos etiquetas de título principal h1»
|
||||
|
||||
48
|
||||
00:04:05.780 --> 00:04:10.060
|
||||
entonces como hay dos etiquetas de tipo principal, entonces significa que las 2 son importantes
|
||||
|
||||
49
|
||||
00:04:10.060 --> 00:04:13.920
|
||||
entonces a los 2 les da un 50 % y 50 %
|
||||
|
||||
50
|
||||
00:04:15.120 --> 00:04:19.440
|
||||
supongamos que tenemos dos tipos de enunciados dentro de los h1
|
||||
|
||||
51
|
||||
00:04:19.440 --> 00:04:21.440
|
||||
que aquí diga
|
||||
|
||||
52
|
||||
00:04:30.340 --> 00:04:32.180
|
||||
HackerTech
|
||||
|
||||
53
|
||||
00:04:36.640 --> 00:04:38.100
|
||||
y que por acá diga
|
||||
|
||||
54
|
||||
00:04:38.840 --> 00:04:40.140
|
||||
Conocimientos Libres
|
||||
|
||||
55
|
||||
00:04:49.660 --> 00:04:51.260
|
||||
que pasaría en ese momento
|
||||
|
||||
56
|
||||
00:04:53.520 --> 00:04:58.020
|
||||
si vemos aquí en el navegador diría: HackerTech y Conocimientos Libres
|
||||
|
||||
57
|
||||
00:04:58.020 --> 00:05:01.560
|
||||
pero esto es algo bastante grave porque
|
||||
|
||||
58
|
||||
00:05:02.780 --> 00:05:04.040
|
||||
el navegador
|
||||
|
||||
59
|
||||
00:05:06.320 --> 00:05:13.500
|
||||
bueno, el navegador visulamente mostraría las dos etiquetas h1, pero el buscador al momento de indexar
|
||||
|
||||
60
|
||||
00:05:15.900 --> 00:05:17.340
|
||||
va a colocar
|
||||
|
||||
61
|
||||
00:05:17.340 --> 00:05:18.820
|
||||
los dos títulos
|
||||
|
||||
62
|
||||
00:05:18.820 --> 00:05:20.820
|
||||
dentro de
|
||||
|
||||
63
|
||||
00:05:20.820 --> 00:05:23.300
|
||||
de su información, dentro de su metadata
|
||||
|
||||
64
|
||||
00:05:23.300 --> 00:05:26.860
|
||||
entonces esto lo que va ocasionar es que se confunda y no va a saber
|
||||
|
||||
65
|
||||
00:05:26.860 --> 00:05:28.860
|
||||
cual es el título principal
|
||||
|
||||
66
|
||||
00:05:29.220 --> 00:05:33.220
|
||||
los buscadores son así, podría simplemente este título
|
||||
|
||||
67
|
||||
00:05:33.400 --> 00:05:34.600
|
||||
y obviar éste
|
||||
|
||||
68
|
||||
00:05:34.600 --> 00:05:38.840
|
||||
o coger solamente este título y obviar el otro título
|
||||
|
||||
69
|
||||
00:05:39.680 --> 00:05:40.940
|
||||
o visceversa
|
||||
|
||||
70
|
||||
00:05:41.380 --> 00:05:42.500
|
||||
de esa forma
|
||||
|
||||
71
|
||||
00:05:42.500 --> 00:05:50.260
|
||||
se confundiría el buscador y nos quitaría SEO posicionamiento Web
|
||||
|
||||
72
|
||||
00:05:51.400 --> 00:05:54.180
|
||||
por eso es recomendable utilizar un h1
|
||||
|
||||
73
|
||||
00:05:57.040 --> 00:05:59.920
|
||||
es importantísimo utilizar solamente un h1
|
||||
|
||||
74
|
||||
00:06:00.380 --> 00:06:02.540
|
||||
para evitar problemas de SEO
|
||||
|
||||
75
|
||||
00:06:04.660 --> 00:06:07.080
|
||||
bien los subtítulos pues
|
||||
|
||||
76
|
||||
00:06:07.080 --> 00:06:13.420
|
||||
casi siempre se utilizan los subititulos, pueden repetirse, esto si puede repetirse, de h3 pues sí puedes tener varios
|
||||
|
||||
77
|
||||
00:06:13.580 --> 00:06:14.840
|
||||
de h4 también
|
||||
|
||||
78
|
||||
00:06:16.140 --> 00:06:24.820
|
||||
vamos a ver un ejemplo con con la parte de conocimientos libres
|
||||
|
||||
79
|
||||
00:06:27.100 --> 00:06:29.900
|
||||
Conocimientos Libres que es esa frase que está ahí
|
||||
|
||||
80
|
||||
00:06:29.900 --> 00:06:31.300
|
||||
se he seleccionado
|
||||
|
||||
81
|
||||
00:06:31.300 --> 00:06:32.680
|
||||
es un h1
|
||||
|
||||
82
|
||||
00:06:33.420 --> 00:06:35.420
|
||||
vamos a mirar el código fuente
|
||||
|
||||
83
|
||||
00:06:40.640 --> 00:06:41.960
|
||||
voy amplificar acá
|
||||
|
||||
84
|
||||
00:06:44.260 --> 00:06:46.620
|
||||
ahí tenemos un h1
|
||||
|
||||
85
|
||||
00:06:47.300 --> 00:06:52.520
|
||||
que nos esta devolviendo conocimientos libres
|
||||
|
||||
86
|
||||
00:06:52.520 --> 00:06:54.520
|
||||
la frase conocimientos libres
|
||||
|
||||
87
|
||||
00:06:54.760 --> 00:06:55.680
|
||||
ahora
|
||||
|
||||
88
|
||||
00:06:55.680 --> 00:06:58.760
|
||||
si seleccionamos la otra palabra la otra frase
|
||||
|
||||
89
|
||||
00:06:59.440 --> 00:07:02.960
|
||||
vemos que no es un h2 sino un h4
|
||||
|
||||
90
|
||||
00:07:02.960 --> 00:07:05.720
|
||||
bueno y por qué realicé esto
|
||||
|
||||
91
|
||||
00:07:07.380 --> 00:07:14.080
|
||||
el asunto es que yo no he le dado demasiada relevancia a «sitio de información sobre software libre»
|
||||
|
||||
92
|
||||
00:07:14.440 --> 00:07:17.380
|
||||
yo no le he dado demasiado peso a esa frase
|
||||
|
||||
93
|
||||
00:07:19.580 --> 00:07:22.440
|
||||
le he dado casi el mismo peso, esta frase
|
||||
|
||||
94
|
||||
00:07:22.440 --> 00:07:27.720
|
||||
... es casi el mismo peso que tiene estas frases que pertenecen a los artículos
|
||||
|
||||
95
|
||||
00:07:28.400 --> 00:07:30.860
|
||||
por ejemplo si yo he seleccionado esta frase
|
||||
|
||||
96
|
||||
00:07:31.360 --> 00:07:34.320
|
||||
pueden ver que está dentro de un h4
|
||||
|
||||
97
|
||||
00:07:35.700 --> 00:07:36.940
|
||||
es decir
|
||||
|
||||
98
|
||||
00:07:38.020 --> 00:07:39.400
|
||||
esta frase
|
||||
|
||||
99
|
||||
00:07:39.640 --> 00:07:41.560
|
||||
tiene el mismo peso en el buscador
|
||||
|
||||
100
|
||||
00:07:41.720 --> 00:07:44.980
|
||||
que los títulos de los artículos
|
||||
|
||||
101
|
||||
00:07:50.400 --> 00:07:53.480
|
||||
ahora vamos a continuar con el siguiente vídeo
|
||||
@@ -0,0 +1,229 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:00.500 --> 00:00:04.900
|
||||
bien continuamos ahora vamos a hablar sobre la etiqueta hgroup
|
||||
|
||||
2
|
||||
00:00:05.280 --> 00:00:08.880
|
||||
Es una etiqueta que en la versión 5 apareció
|
||||
|
||||
3
|
||||
00:00:08.880 --> 00:00:13.280
|
||||
pero ha caído un poco en desuso
|
||||
|
||||
4
|
||||
00:00:14.580 --> 00:00:15.680
|
||||
es válido
|
||||
|
||||
5
|
||||
00:00:16.020 --> 00:00:20.140
|
||||
yo recomendaría no utilizarla pero por nociones del vídeo voy a mostrarla
|
||||
|
||||
6
|
||||
00:00:20.140 --> 00:00:22.140
|
||||
sería hgroup
|
||||
|
||||
7
|
||||
00:00:22.140 --> 00:00:24.140
|
||||
hgroup
|
||||
|
||||
8
|
||||
00:00:26.240 --> 00:00:28.020
|
||||
y hgroup que cierra
|
||||
|
||||
9
|
||||
00:00:28.400 --> 00:00:29.640
|
||||
de esta forma
|
||||
|
||||
10
|
||||
00:00:30.040 --> 00:00:32.960
|
||||
dentro del hgroup podríamos colocar
|
||||
|
||||
11
|
||||
00:00:35.120 --> 00:00:40.440
|
||||
un conjunto de etiquetas por ejemplo un h2 y un h1
|
||||
|
||||
12
|
||||
00:00:43.260 --> 00:00:46.040
|
||||
y ahora cómo se maneja la etiqueta hgroup
|
||||
|
||||
13
|
||||
00:00:46.040 --> 00:00:47.460
|
||||
la etiqueta hgroup
|
||||
|
||||
14
|
||||
00:00:47.460 --> 00:00:49.460
|
||||
vamos a guardar aquí
|
||||
|
||||
15
|
||||
00:00:51.200 --> 00:00:52.480
|
||||
ahí tenemos
|
||||
|
||||
16
|
||||
00:00:54.900 --> 00:00:58.280
|
||||
estás dos frases se encuentran dentro de hgroup
|
||||
|
||||
17
|
||||
00:00:58.500 --> 00:01:02.300
|
||||
pero cómo funciona para qué sirve hgroup, bueno hgroup funciona...
|
||||
|
||||
18
|
||||
00:01:02.940 --> 00:01:06.480
|
||||
como su nombre lo indica es un grupo de "h" de títulos
|
||||
|
||||
19
|
||||
00:01:07.180 --> 00:01:08.140
|
||||
entonces
|
||||
|
||||
20
|
||||
00:01:09.960 --> 00:01:11.340
|
||||
sí observáis aquí
|
||||
|
||||
21
|
||||
00:01:12.480 --> 00:01:13.480
|
||||
tenemos
|
||||
|
||||
22
|
||||
00:01:14.600 --> 00:01:19.060
|
||||
que el hgroup sirve para enlazar cosas relevantes
|
||||
|
||||
23
|
||||
00:01:19.060 --> 00:01:21.060
|
||||
si queríamos poner
|
||||
|
||||
24
|
||||
00:01:23.760 --> 00:01:25.000
|
||||
freakspot
|
||||
|
||||
25
|
||||
00:01:25.380 --> 00:01:27.820
|
||||
por ejemplo freakspot un página web
|
||||
|
||||
26
|
||||
00:01:28.320 --> 00:01:31.580
|
||||
que bastantes del mundo libre conocen
|
||||
|
||||
27
|
||||
00:01:33.360 --> 00:01:36.700
|
||||
y aquí debajo podríamos colocar
|
||||
|
||||
28
|
||||
00:01:38.020 --> 00:01:41.280
|
||||
Sitio de información...
|
||||
|
||||
29
|
||||
00:01:43.880 --> 00:01:45.980
|
||||
...de cultura...
|
||||
|
||||
30
|
||||
00:01:45.980 --> 00:01:47.980
|
||||
Libre
|
||||
|
||||
31
|
||||
00:01:49.140 --> 00:01:50.280
|
||||
correcto
|
||||
|
||||
32
|
||||
00:01:51.580 --> 00:01:53.800
|
||||
entonces el hgroup para qué sirve
|
||||
|
||||
33
|
||||
00:01:54.160 --> 00:01:55.940
|
||||
para relacionar
|
||||
|
||||
34
|
||||
00:01:56.140 --> 00:01:58.280
|
||||
estás dos etiquetas
|
||||
|
||||
35
|
||||
00:01:58.540 --> 00:01:59.640
|
||||
para relacionarla
|
||||
|
||||
36
|
||||
00:02:00.720 --> 00:02:04.020
|
||||
ahora por qué digo que ha caido en decadencia
|
||||
|
||||
37
|
||||
00:02:04.020 --> 00:02:06.620
|
||||
porque la w3c
|
||||
|
||||
38
|
||||
00:02:08.260 --> 00:02:11.040
|
||||
habían algunos desarrolladores
|
||||
|
||||
39
|
||||
00:02:11.200 --> 00:02:12.620
|
||||
que al momento de maquetar
|
||||
|
||||
40
|
||||
00:02:12.620 --> 00:02:14.200
|
||||
el HTML
|
||||
|
||||
41
|
||||
00:02:14.200 --> 00:02:15.920
|
||||
lo que hacian era
|
||||
|
||||
42
|
||||
00:02:17.740 --> 00:02:20.840
|
||||
hacer varios hgroup, varios grupos de "h"
|
||||
|
||||
43
|
||||
00:02:21.600 --> 00:02:22.960
|
||||
y de esta forma
|
||||
|
||||
44
|
||||
00:02:23.100 --> 00:02:26.380
|
||||
aumentar supuestamente el SEO
|
||||
|
||||
45
|
||||
00:02:26.380 --> 00:02:28.740
|
||||
varios h1 dentro de hgroup
|
||||
|
||||
46
|
||||
00:02:29.120 --> 00:02:33.580
|
||||
entonces supuestamente el buscador iba a indexar más h1 más h2
|
||||
|
||||
47
|
||||
00:02:33.760 --> 00:02:36.180
|
||||
iba a posicionarse mejor
|
||||
|
||||
48
|
||||
00:02:36.580 --> 00:02:38.120
|
||||
entonces la w3c
|
||||
|
||||
49
|
||||
00:02:38.120 --> 00:02:42.960
|
||||
prefirio quitar o poner en decadencia la etiqueta hgroup
|
||||
|
||||
50
|
||||
00:02:42.960 --> 00:02:47.540
|
||||
a pesar de qué lo había agregado en la versión 5 de HTML
|
||||
|
||||
51
|
||||
00:02:48.460 --> 00:02:54.400
|
||||
como os digo ahora estamos en la versión 5.2 y pronto va a salir la 5.3
|
||||
|
||||
52
|
||||
00:02:55.160 --> 00:03:00.980
|
||||
y esta etiqueta ya no deberías utilizarla solamente la he mencionado
|
||||
|
||||
53
|
||||
00:03:02.120 --> 00:03:05.300
|
||||
porque quizás hay algunas personas que
|
||||
|
||||
54
|
||||
00:03:05.300 --> 00:03:08.040
|
||||
desean utilizarla. Yo recomiendo no utilizarla
|
||||
|
||||
55
|
||||
00:03:08.040 --> 00:03:11.380
|
||||
solamente utilizar las etiquetas h
|
||||
|
||||
56
|
||||
00:03:11.780 --> 00:03:16.020
|
||||
sin necesidad de usar las etiquetas de agrupación que son las hgroup
|
||||
|
||||
57
|
||||
00:03:16.500 --> 00:03:17.580
|
||||
continuamos
|
||||
@@ -0,0 +1,637 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:00.360 --> 00:00:03.260
|
||||
bien hablaremos sobre la etiqueta nav
|
||||
|
||||
2
|
||||
00:00:03.260 --> 00:00:07.020
|
||||
la etiqueta nav es la etiqueta que se encuentra dentro de
|
||||
|
||||
3
|
||||
00:00:07.020 --> 00:00:10.000
|
||||
de header algunas veces, también está debajo
|
||||
|
||||
4
|
||||
00:00:10.340 --> 00:00:12.300
|
||||
pero esta no es la única estructura
|
||||
|
||||
5
|
||||
00:00:12.300 --> 00:00:15.760
|
||||
también la etiqueta nav podría estar al costado
|
||||
|
||||
6
|
||||
00:00:16.000 --> 00:00:21.460
|
||||
por ejemplo aquí tenemos el header donde podría estar el banner, el logotipo de la empresa, de la página web
|
||||
|
||||
7
|
||||
00:00:21.880 --> 00:00:24.460
|
||||
y a los laterales podría estar la etiqueta nav
|
||||
|
||||
8
|
||||
00:00:25.080 --> 00:00:29.480
|
||||
en conocimientos libres la página que tengo de muestra para este curso
|
||||
|
||||
9
|
||||
00:00:31.700 --> 00:00:34.740
|
||||
la etiqueta nav esta dentro del header
|
||||
|
||||
10
|
||||
00:00:36.520 --> 00:00:37.960
|
||||
pero no es
|
||||
|
||||
11
|
||||
00:00:38.580 --> 00:00:41.600
|
||||
obligatorio que la etiqueta nav este dentro de header
|
||||
|
||||
12
|
||||
00:00:41.600 --> 00:00:43.800
|
||||
como ya mostré en la imagen anterior
|
||||
|
||||
13
|
||||
00:00:43.800 --> 00:00:46.300
|
||||
etiqueta nav podría estar a los costados
|
||||
|
||||
14
|
||||
00:00:46.380 --> 00:00:48.500
|
||||
inclussive podria estar debajo
|
||||
|
||||
15
|
||||
00:00:50.740 --> 00:00:52.820
|
||||
entonces vamos a ver esto ahora en código
|
||||
|
||||
16
|
||||
00:00:53.920 --> 00:00:56.020
|
||||
cómo sería para poder
|
||||
|
||||
17
|
||||
00:00:56.600 --> 00:00:57.840
|
||||
escribirlo
|
||||
|
||||
18
|
||||
00:00:58.560 --> 00:00:59.500
|
||||
primero
|
||||
|
||||
19
|
||||
00:00:59.500 --> 00:01:02.500
|
||||
deberíamos de escribir una etiqueta header
|
||||
|
||||
20
|
||||
00:01:04.800 --> 00:01:07.400
|
||||
Ahora la etiqueta nav podría estar
|
||||
|
||||
21
|
||||
00:01:07.400 --> 00:01:10.920
|
||||
dentro de header o también podría estar fuera de header
|
||||
|
||||
22
|
||||
00:01:12.500 --> 00:01:14.400
|
||||
para escribir una etiqueta
|
||||
|
||||
23
|
||||
00:01:14.400 --> 00:01:16.400
|
||||
nav sería de esta forma
|
||||
|
||||
24
|
||||
00:01:16.720 --> 00:01:17.800
|
||||
ahí lo tenemos
|
||||
|
||||
25
|
||||
00:01:18.460 --> 00:01:20.780
|
||||
etiqueta nav que habré etiqueta nav que cierra
|
||||
|
||||
26
|
||||
00:01:21.260 --> 00:01:22.900
|
||||
y dentro de la etiquet nav
|
||||
|
||||
27
|
||||
00:01:22.900 --> 00:01:25.480
|
||||
podríamos poner una lista
|
||||
|
||||
28
|
||||
00:01:25.480 --> 00:01:27.480
|
||||
una lista de items
|
||||
|
||||
29
|
||||
00:01:29.200 --> 00:01:32.940
|
||||
vamos a revisar la ṕágina de conocimientos libres
|
||||
|
||||
30
|
||||
00:01:33.240 --> 00:01:35.880
|
||||
y cada una de esteas opciones
|
||||
|
||||
31
|
||||
00:01:37.620 --> 00:01:41.240
|
||||
del menú, porque esto, todo esto sería una etiqueta nav
|
||||
|
||||
32
|
||||
00:01:41.500 --> 00:01:42.860
|
||||
y cada una de estas opciones
|
||||
|
||||
33
|
||||
00:01:43.040 --> 00:01:44.120
|
||||
sería un
|
||||
|
||||
34
|
||||
00:01:44.400 --> 00:01:47.340
|
||||
list items o una lista de items
|
||||
|
||||
35
|
||||
00:01:47.660 --> 00:01:49.080
|
||||
¿y cómo se escribe eso?
|
||||
|
||||
36
|
||||
00:01:49.080 --> 00:01:51.580
|
||||
bueno se escribe. Hay varias formas
|
||||
|
||||
37
|
||||
00:01:54.000 --> 00:01:56.640
|
||||
podríamos hacer una lista ordenada
|
||||
|
||||
38
|
||||
00:01:56.640 --> 00:01:58.640
|
||||
con un ol
|
||||
|
||||
39
|
||||
00:01:59.280 --> 00:02:00.540
|
||||
ol: order list
|
||||
|
||||
40
|
||||
00:02:00.540 --> 00:02:01.920
|
||||
una lista ordenada
|
||||
|
||||
41
|
||||
00:02:02.700 --> 00:02:05.380
|
||||
o también podríamos hacer un
|
||||
|
||||
42
|
||||
00:02:06.860 --> 00:02:08.240
|
||||
unordered list
|
||||
|
||||
43
|
||||
00:02:08.420 --> 00:02:10.960
|
||||
es decir una lista desordenada
|
||||
|
||||
44
|
||||
00:02:12.080 --> 00:02:13.300
|
||||
mayormente
|
||||
|
||||
45
|
||||
00:02:15.080 --> 00:02:17.380
|
||||
las etiquetas contienen
|
||||
|
||||
46
|
||||
00:02:18.000 --> 00:02:19.040
|
||||
etiquetas
|
||||
|
||||
47
|
||||
00:02:20.780 --> 00:02:23.580
|
||||
li: list items
|
||||
|
||||
48
|
||||
00:02:24.720 --> 00:02:25.400
|
||||
es decir
|
||||
|
||||
49
|
||||
00:02:25.880 --> 00:02:27.460
|
||||
estas dos etiquetas
|
||||
|
||||
50
|
||||
00:02:27.460 --> 00:02:30.660
|
||||
contienen etiquetas list items
|
||||
|
||||
51
|
||||
00:02:31.440 --> 00:02:34.540
|
||||
podríamos utilizar este o este otro
|
||||
|
||||
52
|
||||
00:02:35.680 --> 00:02:39.860
|
||||
vamos a dejarlo así para ver qué diferencia hay entre los dos
|
||||
|
||||
53
|
||||
00:02:40.220 --> 00:02:41.780
|
||||
por ejemplo vamos a poner aquí
|
||||
|
||||
54
|
||||
00:02:42.060 --> 00:02:43.380
|
||||
items
|
||||
|
||||
55
|
||||
00:02:43.940 --> 00:02:45.360
|
||||
no, items nada más
|
||||
|
||||
56
|
||||
00:02:45.360 --> 00:02:47.360
|
||||
aquí también otro
|
||||
|
||||
57
|
||||
00:02:47.920 --> 00:02:48.880
|
||||
item
|
||||
|
||||
58
|
||||
00:02:49.800 --> 00:02:51.540
|
||||
de esta forma vamos guardar
|
||||
|
||||
59
|
||||
00:02:51.540 --> 00:02:54.340
|
||||
y ahora vamos a visualizar en el navegador
|
||||
|
||||
60
|
||||
00:02:54.740 --> 00:02:55.900
|
||||
actualizamos
|
||||
|
||||
61
|
||||
00:02:56.960 --> 00:02:58.300
|
||||
como véis
|
||||
|
||||
62
|
||||
00:02:59.200 --> 00:03:01.580
|
||||
la etiquet order list
|
||||
|
||||
63
|
||||
00:03:02.400 --> 00:03:03.480
|
||||
lo que hace es
|
||||
|
||||
64
|
||||
00:03:03.480 --> 00:03:05.480
|
||||
enumerar los items
|
||||
|
||||
65
|
||||
00:03:05.900 --> 00:03:08.040
|
||||
y le ha puesto el número 1
|
||||
|
||||
66
|
||||
00:03:08.480 --> 00:03:11.340
|
||||
y la etiqueta unordered list
|
||||
|
||||
67
|
||||
00:03:11.520 --> 00:03:14.140
|
||||
lo que hace es colocarle solamente una viñeta
|
||||
|
||||
68
|
||||
00:03:14.140 --> 00:03:15.960
|
||||
en vez de colocarle una numeración
|
||||
|
||||
69
|
||||
00:03:15.960 --> 00:03:19.800
|
||||
le ponerle el número 1, 2, solamente les coloca una viñeta
|
||||
|
||||
70
|
||||
00:03:20.580 --> 00:03:22.080
|
||||
para hacer el menú
|
||||
|
||||
71
|
||||
00:03:22.080 --> 00:03:26.380
|
||||
vamos a utilizar solamente la etiqueta ul que es lo más recomendable
|
||||
|
||||
72
|
||||
00:03:26.380 --> 00:03:27.660
|
||||
es decir
|
||||
|
||||
73
|
||||
00:03:28.060 --> 00:03:30.080
|
||||
no vamos a colocarle
|
||||
|
||||
74
|
||||
00:03:30.080 --> 00:03:31.320
|
||||
los números
|
||||
|
||||
75
|
||||
00:03:31.320 --> 00:03:35.780
|
||||
simplemente colocarle un item, porque con CSS le podríamos quitar
|
||||
|
||||
76
|
||||
00:03:38.000 --> 00:03:39.220
|
||||
esta viñeta
|
||||
|
||||
77
|
||||
00:03:39.220 --> 00:03:43.340
|
||||
y de esta forma pues dejarlo como lo tenemos en conocimientos libres
|
||||
|
||||
78
|
||||
00:03:44.000 --> 00:03:44.880
|
||||
esta forma
|
||||
|
||||
79
|
||||
00:03:45.700 --> 00:03:46.580
|
||||
ahora
|
||||
|
||||
80
|
||||
00:03:48.720 --> 00:03:50.180
|
||||
la etiqueta nav
|
||||
|
||||
81
|
||||
00:03:50.560 --> 00:03:51.860
|
||||
podría estar
|
||||
|
||||
82
|
||||
00:03:51.860 --> 00:03:53.860
|
||||
fuera así como lo he puesto ahorita
|
||||
|
||||
83
|
||||
00:03:54.780 --> 00:04:00.740
|
||||
pero si queremos seguir las buenas prácticas podríamos dejarlo dentro de la etiqueta header
|
||||
|
||||
84
|
||||
00:04:01.960 --> 00:04:05.080
|
||||
para las etiquetas li pues podrían haber varias
|
||||
|
||||
85
|
||||
00:04:06.620 --> 00:04:07.260
|
||||
de esta forma
|
||||
|
||||
86
|
||||
00:04:08.520 --> 00:04:09.280
|
||||
así
|
||||
|
||||
87
|
||||
00:04:09.720 --> 00:04:11.400
|
||||
cosa que cuendo nosotros
|
||||
|
||||
88
|
||||
00:04:11.400 --> 00:04:13.400
|
||||
vamos a
|
||||
|
||||
89
|
||||
00:04:13.400 --> 00:04:15.400
|
||||
la parte de la página
|
||||
|
||||
90
|
||||
00:04:15.400 --> 00:04:17.400
|
||||
podemos ver que tenemos
|
||||
|
||||
91
|
||||
00:04:17.400 --> 00:04:19.400
|
||||
una serie de listas
|
||||
|
||||
92
|
||||
00:04:24.060 --> 00:04:31.100
|
||||
vamos a ojear el código de la página de conocimientos libres aquí tendríamos, vamos inspeccionar elemento
|
||||
|
||||
93
|
||||
00:04:32.960 --> 00:04:34.520
|
||||
se puede observar
|
||||
|
||||
94
|
||||
00:04:35.260 --> 00:04:38.560
|
||||
en esta parte tenemos una ul
|
||||
|
||||
95
|
||||
00:04:40.360 --> 00:04:42.220
|
||||
y dentro tenemos li
|
||||
|
||||
96
|
||||
00:04:44.420 --> 00:04:46.500
|
||||
estás li qué es lo que hacen pues
|
||||
|
||||
97
|
||||
00:04:46.500 --> 00:04:48.120
|
||||
colocan enlaces
|
||||
|
||||
98
|
||||
00:04:48.400 --> 00:04:50.920
|
||||
por ejemplo enlace a economic support
|
||||
|
||||
99
|
||||
00:04:50.920 --> 00:04:52.300
|
||||
los enlaces
|
||||
|
||||
100
|
||||
00:04:52.300 --> 00:04:54.720
|
||||
son bastante impotantes porque
|
||||
|
||||
101
|
||||
00:04:55.240 --> 00:04:58.260
|
||||
por ejemplo si queremos hacer el menú
|
||||
|
||||
102
|
||||
00:04:58.260 --> 00:04:59.880
|
||||
que sea clickeable
|
||||
|
||||
103
|
||||
00:04:59.880 --> 00:05:00.740
|
||||
como
|
||||
|
||||
104
|
||||
00:05:00.740 --> 00:05:04.340
|
||||
como el de conocimientos libres, que tu picas y te envía
|
||||
|
||||
105
|
||||
00:05:05.120 --> 00:05:09.000
|
||||
al enlace que se encuentra dentro de la etiqueta a de ese item
|
||||
|
||||
106
|
||||
00:05:09.780 --> 00:05:11.580
|
||||
pues fácilmente
|
||||
|
||||
107
|
||||
00:05:12.020 --> 00:05:14.140
|
||||
podríamos hacerlo con la etiqueta a
|
||||
|
||||
108
|
||||
00:05:14.140 --> 00:05:16.140
|
||||
de ancla, entonces
|
||||
|
||||
109
|
||||
00:05:16.140 --> 00:05:18.140
|
||||
podríamos hacer esto
|
||||
|
||||
110
|
||||
00:05:19.440 --> 00:05:20.300
|
||||
de esta forma
|
||||
|
||||
111
|
||||
00:05:20.720 --> 00:05:22.980
|
||||
yaquí podríamos poner un href
|
||||
|
||||
112
|
||||
00:05:25.660 --> 00:05:28.780
|
||||
un href, por ejemplo vamos a enviarlo al
|
||||
|
||||
113
|
||||
00:05:29.180 --> 00:05:31.080
|
||||
solamente para nociones del
|
||||
|
||||
114
|
||||
00:05:31.600 --> 00:05:34.060
|
||||
vídeo voy a poner aquí que
|
||||
|
||||
115
|
||||
00:05:34.060 --> 00:05:35.320
|
||||
al presionar
|
||||
|
||||
116
|
||||
00:05:35.320 --> 00:05:37.320
|
||||
este elemento
|
||||
|
||||
117
|
||||
00:05:38.400 --> 00:05:40.300
|
||||
me envíe a
|
||||
|
||||
118
|
||||
00:05:40.300 --> 00:05:42.300
|
||||
un buscador searx.me
|
||||
|
||||
119
|
||||
00:05:43.920 --> 00:05:46.080
|
||||
deberíamos poner el protocolo
|
||||
|
||||
120
|
||||
00:05:52.640 --> 00:05:54.520
|
||||
vamos actualizar la página
|
||||
|
||||
121
|
||||
00:05:54.660 --> 00:05:57.600
|
||||
y automáticamente se convirtió en un enlace
|
||||
|
||||
122
|
||||
00:05:57.980 --> 00:05:59.880
|
||||
una lista con un enlace
|
||||
|
||||
123
|
||||
00:06:00.400 --> 00:06:01.880
|
||||
si nosotros damos click
|
||||
|
||||
124
|
||||
00:06:03.700 --> 00:06:06.120
|
||||
automáticamente nos llevaría al buscador
|
||||
|
||||
125
|
||||
00:06:06.660 --> 00:06:09.600
|
||||
o cualquier enlace que se encuentre dentro de la página
|
||||
|
||||
126
|
||||
00:06:09.760 --> 00:06:13.960
|
||||
por ejemplo podríamos colocarle que en vez de que nos envíe a esto nos envíe
|
||||
|
||||
127
|
||||
00:06:14.260 --> 00:06:15.420
|
||||
al index
|
||||
|
||||
128
|
||||
00:06:16.080 --> 00:06:19.420
|
||||
punto html que es el mismo archivo que tenemos ahorita
|
||||
|
||||
129
|
||||
00:06:21.020 --> 00:06:23.900
|
||||
lo que haría solamente ahora es una recarga de la página
|
||||
|
||||
130
|
||||
00:06:30.060 --> 00:06:34.080
|
||||
para eso podríamos colocar pues simplemente que se trata del home
|
||||
|
||||
131
|
||||
00:06:42.300 --> 00:06:45.960
|
||||
y así podríamos hacer con cada tipo de item
|
||||
|
||||
132
|
||||
00:06:46.140 --> 00:06:49.280
|
||||
podríamos hacer que este otro nos envíe a otro lado
|
||||
|
||||
133
|
||||
00:06:49.280 --> 00:06:52.300
|
||||
nos envíe a otro lado de la página, por ejemplo que este nos envíe
|
||||
|
||||
134
|
||||
00:06:52.300 --> 00:06:55.520
|
||||
por ejemplo a la página about
|
||||
|
||||
135
|
||||
00:06:56.240 --> 00:06:57.560
|
||||
vamos hacerlo rapidito
|
||||
|
||||
136
|
||||
00:06:59.780 --> 00:07:04.640
|
||||
tenemos aquí otra ancla, por aquí otra ancla
|
||||
|
||||
137
|
||||
00:07:07.360 --> 00:07:09.000
|
||||
y por aquí otra ancla
|
||||
|
||||
138
|
||||
00:07:13.100 --> 00:07:15.520
|
||||
y podríamos decirle que
|
||||
|
||||
139
|
||||
00:07:16.220 --> 00:07:17.540
|
||||
nos envíe
|
||||
|
||||
140
|
||||
00:07:17.860 --> 00:07:20.620
|
||||
a cada uno nos envíe a una página diferente
|
||||
|
||||
141
|
||||
00:07:21.160 --> 00:07:24.440
|
||||
de hecho aquí va a fallar porque no existen esos archivos
|
||||
|
||||
142
|
||||
00:07:25.540 --> 00:07:27.220
|
||||
pero podría hacerse de esa forma
|
||||
|
||||
143
|
||||
00:07:32.100 --> 00:07:33.680
|
||||
podríamos decirle que
|
||||
|
||||
144
|
||||
00:07:34.380 --> 00:07:37.280
|
||||
a este otro nos envíe a about
|
||||
|
||||
145
|
||||
00:07:37.500 --> 00:07:39.000
|
||||
si es que existiese el archivo
|
||||
|
||||
146
|
||||
00:07:39.300 --> 00:07:40.420
|
||||
a contact
|
||||
|
||||
147
|
||||
00:07:41.220 --> 00:07:43.040
|
||||
o que nos envíe
|
||||
|
||||
148
|
||||
00:07:43.580 --> 00:07:45.880
|
||||
a blog
|
||||
|
||||
149
|
||||
00:07:47.500 --> 00:07:50.260
|
||||
de esta forma todos los items
|
||||
|
||||
150
|
||||
00:07:50.260 --> 00:07:52.260
|
||||
se volverían enlaces
|
||||
|
||||
151
|
||||
00:07:52.620 --> 00:07:54.300
|
||||
es lo que se ha hecho con
|
||||
|
||||
152
|
||||
00:07:54.920 --> 00:07:57.260
|
||||
la parte del área de navegación con
|
||||
|
||||
153
|
||||
00:07:58.800 --> 00:08:00.100
|
||||
conocimientos libres
|
||||
|
||||
154
|
||||
00:08:00.760 --> 00:08:03.860
|
||||
lo que se quito con CSS
|
||||
|
||||
155
|
||||
00:08:04.660 --> 00:08:07.680
|
||||
este subrayado se quita con CSS
|
||||
|
||||
156
|
||||
00:08:08.920 --> 00:08:11.940
|
||||
bueno queda como si fuese una lista normal
|
||||
|
||||
157
|
||||
00:08:11.940 --> 00:08:13.940
|
||||
también se puede quitar el color con CSS
|
||||
|
||||
158
|
||||
00:08:13.940 --> 00:08:15.380
|
||||
eso luego lo vamos a ver
|
||||
|
||||
159
|
||||
00:08:15.380 --> 00:08:17.380
|
||||
y bien! esto ha sido todo por este vídeo
|
||||
@@ -0,0 +1,606 @@
|
||||
WEBVTT
|
||||
|
||||
1
|
||||
00:00:00.880 --> 00:00:05.040
|
||||
Hola que tal bienvenidos aquí a Cybersy, a Conocimientos Libres
|
||||
|
||||
2
|
||||
00:00:06.080 --> 00:00:07.040
|
||||
Vamos a iniciar
|
||||
|
||||
3
|
||||
00:00:07.040 --> 00:00:07.980
|
||||
con el
|
||||
|
||||
4
|
||||
00:00:07.980 --> 00:00:10.840
|
||||
pequeño curso de HTML
|
||||
|
||||
5
|
||||
00:00:10.840 --> 00:00:13.300
|
||||
vamos a ver los fundamentos de HTML
|
||||
|
||||
6
|
||||
00:00:15.280 --> 00:00:18.580
|
||||
HTML5 es un lenguaje
|
||||
|
||||
7
|
||||
00:00:18.580 --> 00:00:20.580
|
||||
de Marcado
|
||||
|
||||
8
|
||||
00:00:20.580 --> 00:00:21.780
|
||||
que permite
|
||||
|
||||
9
|
||||
00:00:21.780 --> 00:00:24.040
|
||||
estructurar la página web
|
||||
|
||||
10
|
||||
00:00:25.320 --> 00:00:26.620
|
||||
de manera sencilla
|
||||
|
||||
11
|
||||
00:00:27.580 --> 00:00:29.500
|
||||
para poder así luego
|
||||
|
||||
12
|
||||
00:00:30.520 --> 00:00:31.500
|
||||
mantener
|
||||
|
||||
13
|
||||
00:00:32.460 --> 00:00:34.840
|
||||
un posicionamiento adecuado
|
||||
|
||||
14
|
||||
00:00:35.720 --> 00:00:38.300
|
||||
sobre la página web
|
||||
|
||||
15
|
||||
00:00:39.060 --> 00:00:41.000
|
||||
ya se para temas de SEO
|
||||
|
||||
16
|
||||
00:00:42.420 --> 00:00:43.040
|
||||
para...
|
||||
|
||||
17
|
||||
00:00:45.140 --> 00:00:46.360
|
||||
Entregar
|
||||
|
||||
18
|
||||
00:00:46.360 --> 00:00:49.160
|
||||
una buena información al usuario
|
||||
|
||||
19
|
||||
00:00:49.160 --> 00:00:50.460
|
||||
cuando visite
|
||||
|
||||
20
|
||||
00:00:50.460 --> 00:00:52.460
|
||||
cualquier sitio web
|
||||
|
||||
21
|
||||
00:00:53.100 --> 00:00:55.920
|
||||
la versión actual de HTML es:
|
||||
|
||||
22
|
||||
00:00:55.920 --> 00:00:57.920
|
||||
5.2
|
||||
|
||||
23
|
||||
00:01:00.200 --> 00:01:03.240
|
||||
que tiene que ver con HTML
|
||||
|
||||
24
|
||||
00:01:03.240 --> 00:01:05.240
|
||||
viene de las siglas en inglés
|
||||
|
||||
25
|
||||
00:01:05.680 --> 00:01:08.160
|
||||
HyperText Markup Lenguage = HTML
|
||||
|
||||
26
|
||||
00:01:08.880 --> 00:01:11.880
|
||||
Lenguaje de Marcado de HyperTexto
|
||||
|
||||
27
|
||||
00:01:12.060 --> 00:01:13.480
|
||||
¿qué quiere decir esto?, pues...
|
||||
|
||||
28
|
||||
00:01:13.480 --> 00:01:15.480
|
||||
que es un lenguaje de marcado
|
||||
|
||||
29
|
||||
00:01:15.480 --> 00:01:17.300
|
||||
no es un lenguaje de programación
|
||||
|
||||
30
|
||||
00:01:17.360 --> 00:01:18.780
|
||||
es un lenguaje de marcado
|
||||
|
||||
31
|
||||
00:01:21.540 --> 00:01:24.860
|
||||
¿qué tiene la versión 5?
|
||||
|
||||
32
|
||||
00:01:25.080 --> 00:01:27.760
|
||||
nos dice que debemos de...
|
||||
|
||||
33
|
||||
00:01:29.020 --> 00:01:30.820
|
||||
utilizar etiquetas
|
||||
|
||||
34
|
||||
00:01:31.500 --> 00:01:32.740
|
||||
etiquetas
|
||||
|
||||
35
|
||||
00:01:34.000 --> 00:01:35.440
|
||||
semánticas
|
||||
|
||||
36
|
||||
00:01:35.820 --> 00:01:40.440
|
||||
que le den sentido a la información que se publica dentro de la web
|
||||
|
||||
37
|
||||
00:01:44.920 --> 00:01:45.860
|
||||
primero
|
||||
|
||||
38
|
||||
00:01:46.400 --> 00:01:50.100
|
||||
por ejemplo tenemos aquí cargada la página de conocimientos Libres
|
||||
|
||||
39
|
||||
00:01:51.160 --> 00:01:53.700
|
||||
vamos a ver su código fuente
|
||||
|
||||
40
|
||||
00:01:54.440 --> 00:01:57.020
|
||||
que este caso sería el HTML
|
||||
|
||||
41
|
||||
00:01:57.740 --> 00:01:59.560
|
||||
para que apareza todo eso
|
||||
|
||||
42
|
||||
00:01:59.760 --> 00:02:00.700
|
||||
vamos a ver...
|
||||
|
||||
43
|
||||
00:02:01.180 --> 00:02:02.620
|
||||
su código fuente
|
||||
|
||||
44
|
||||
00:02:03.720 --> 00:02:06.320
|
||||
simplemente bastaría con dar click derecho
|
||||
|
||||
45
|
||||
00:02:07.960 --> 00:02:11.720
|
||||
ver código fuente, en este caso está en inglés dice: view page source
|
||||
|
||||
46
|
||||
00:02:19.120 --> 00:02:20.520
|
||||
si observáis bien
|
||||
|
||||
47
|
||||
00:02:21.800 --> 00:02:24.200
|
||||
podéis ver que para poder declarar
|
||||
|
||||
48
|
||||
00:02:24.200 --> 00:02:25.780
|
||||
un archivo...
|
||||
|
||||
49
|
||||
00:02:25.780 --> 00:02:27.780
|
||||
HTML, un documento HTML
|
||||
|
||||
50
|
||||
00:02:27.780 --> 00:02:32.000
|
||||
la primera etiqueta obligatoria es ponerle el tipo de documento
|
||||
|
||||
51
|
||||
00:02:32.000 --> 00:02:34.000
|
||||
HTML
|
||||
|
||||
52
|
||||
00:02:36.320 --> 00:02:38.240
|
||||
luego vemos...
|
||||
|
||||
53
|
||||
00:02:39.520 --> 00:02:42.080
|
||||
a esto se le llama etiqueta
|
||||
|
||||
54
|
||||
00:02:43.900 --> 00:02:46.600
|
||||
hay etiquetas que se cierran solas
|
||||
|
||||
55
|
||||
00:02:47.080 --> 00:02:48.760
|
||||
como las etiquetas <meta>
|
||||
|
||||
56
|
||||
00:02:49.220 --> 00:02:50.640
|
||||
es decir
|
||||
|
||||
57
|
||||
00:02:51.900 --> 00:02:53.920
|
||||
se puede escribir en una sola línea
|
||||
|
||||
58
|
||||
00:02:54.780 --> 00:02:57.000
|
||||
por ejemplo aquí etiqueta <meta>
|
||||
|
||||
59
|
||||
00:02:57.720 --> 00:03:00.240
|
||||
y aquí tiene una pequeña barra que indica
|
||||
|
||||
60
|
||||
00:03:00.400 --> 00:03:02.700
|
||||
que esta etiquete se cierra
|
||||
|
||||
61
|
||||
00:03:02.840 --> 00:03:05.200
|
||||
en la misma etiqueta
|
||||
|
||||
62
|
||||
00:03:08.180 --> 00:03:09.760
|
||||
aquí
|
||||
|
||||
63
|
||||
00:03:11.540 --> 00:03:12.660
|
||||
la barra
|
||||
|
||||
64
|
||||
00:03:13.580 --> 00:03:14.780
|
||||
que puedes observar ahí
|
||||
|
||||
65
|
||||
00:03:17.660 --> 00:03:20.820
|
||||
si trabajarmos con XML es obligatoria
|
||||
|
||||
66
|
||||
00:03:21.520 --> 00:03:22.500
|
||||
pero
|
||||
|
||||
67
|
||||
00:03:22.500 --> 00:03:25.660
|
||||
cuando estamos trabajando con HTML5
|
||||
|
||||
68
|
||||
00:03:25.940 --> 00:03:27.200
|
||||
esa barra
|
||||
|
||||
69
|
||||
00:03:27.440 --> 00:03:32.040
|
||||
podría haberla obviado
|
||||
|
||||
70
|
||||
00:03:32.040 --> 00:03:34.040
|
||||
y no pasaría nada
|
||||
|
||||
71
|
||||
00:03:38.400 --> 00:03:40.040
|
||||
si deseáis podéis colocarla
|
||||
|
||||
72
|
||||
00:03:40.360 --> 00:03:43.520
|
||||
lo recomendable es colocarla aquí yo no lo he puesto
|
||||
|
||||
73
|
||||
00:03:43.680 --> 00:03:47.240
|
||||
pero como os dije no es necesario colocarla
|
||||
|
||||
74
|
||||
00:03:47.640 --> 00:03:50.220
|
||||
hay algunos desarrolladores que no la colocan
|
||||
|
||||
75
|
||||
00:03:50.220 --> 00:03:52.220
|
||||
para ahorrar bits
|
||||
|
||||
76
|
||||
00:03:52.900 --> 00:03:54.160
|
||||
al momento de escribir
|
||||
|
||||
77
|
||||
00:03:55.180 --> 00:03:57.400
|
||||
luego tenemos las etiquetas...
|
||||
|
||||
78
|
||||
00:03:57.680 --> 00:04:00.360
|
||||
que tienen su contraparte
|
||||
|
||||
79
|
||||
00:04:00.540 --> 00:04:01.520
|
||||
es decir
|
||||
|
||||
80
|
||||
00:04:01.920 --> 00:04:04.000
|
||||
la etiqute <title>
|
||||
|
||||
81
|
||||
00:04:04.480 --> 00:04:06.680
|
||||
como podéis observar ahí en la pantalla
|
||||
|
||||
82
|
||||
00:04:06.680 --> 00:04:10.220
|
||||
tiene su contraparte, su etiqueta contraparte
|
||||
|
||||
83
|
||||
00:04:10.220 --> 00:04:12.220
|
||||
donde esa etiqueta
|
||||
|
||||
84
|
||||
00:04:12.820 --> 00:04:15.060
|
||||
tiene una barra
|
||||
|
||||
85
|
||||
00:04:15.060 --> 00:04:17.060
|
||||
tiene un slash: /
|
||||
|
||||
86
|
||||
00:04:17.060 --> 00:04:20.320
|
||||
donde indica pues que la etiqueta termina allí
|
||||
|
||||
87
|
||||
00:04:21.160 --> 00:04:25.300
|
||||
en este caso tenemos el título que sería Conocimientos Libres
|
||||
|
||||
88
|
||||
00:04:26.400 --> 00:04:28.220
|
||||
ahí lo puedéis observar
|
||||
|
||||
89
|
||||
00:04:28.620 --> 00:04:32.200
|
||||
luego ya tenemos un sin número de etiquetas y propiedades
|
||||
|
||||
90
|
||||
00:04:37.200 --> 00:04:39.020
|
||||
aquí hay bastante código
|
||||
|
||||
91
|
||||
00:04:39.020 --> 00:04:42.380
|
||||
como puedes observar todo este código es para que...
|
||||
|
||||
92
|
||||
00:04:42.380 --> 00:04:45.740
|
||||
pueda pintarse toda la página web
|
||||
|
||||
93
|
||||
00:04:46.320 --> 00:04:48.320
|
||||
ya para que pueda estructurase
|
||||
|
||||
94
|
||||
00:04:48.320 --> 00:04:50.320
|
||||
la parte del diseño
|
||||
|
||||
95
|
||||
00:04:50.500 --> 00:04:52.900
|
||||
ya se encarga de eso...
|
||||
|
||||
96
|
||||
00:04:52.900 --> 00:04:54.680
|
||||
HTML
|
||||
|
||||
97
|
||||
00:04:54.680 --> 00:04:57.140
|
||||
junto a CSS
|
||||
|
||||
98
|
||||
00:04:59.020 --> 00:05:03.160
|
||||
las imágenes son guardadas dentro de etiquetas también
|
||||
|
||||
99
|
||||
00:05:10.820 --> 00:05:12.780
|
||||
por ejemplo, si queremos
|
||||
|
||||
100
|
||||
00:05:14.240 --> 00:05:15.860
|
||||
saber dónde esta
|
||||
|
||||
101
|
||||
00:05:16.140 --> 00:05:17.680
|
||||
esta imagen
|
||||
|
||||
102
|
||||
00:05:18.180 --> 00:05:19.960
|
||||
nos vamos al código fuente
|
||||
|
||||
103
|
||||
00:05:20.920 --> 00:05:23.140
|
||||
vamos a la parte que dice
|
||||
|
||||
104
|
||||
00:05:25.480 --> 00:05:26.980
|
||||
contenido de la página
|
||||
|
||||
105
|
||||
00:05:27.940 --> 00:05:29.540
|
||||
y como podéis observar
|
||||
|
||||
106
|
||||
00:05:29.660 --> 00:05:33.560
|
||||
aquí hay una etiqueta llamada figura o <figure>
|
||||
|
||||
107
|
||||
00:05:35.140 --> 00:05:39.160
|
||||
que también tiene su contraparte aquí puedéis observar
|
||||
|
||||
108
|
||||
00:05:41.260 --> 00:05:43.360
|
||||
esta etiqueta tiene propiedades
|
||||
|
||||
109
|
||||
00:05:45.020 --> 00:05:49.380
|
||||
lo que más se maneja dentro de las etiquetas son las clases y los id's
|
||||
|
||||
110
|
||||
00:05:50.040 --> 00:05:51.560
|
||||
mayormente es eso
|
||||
|
||||
111
|
||||
00:05:55.000 --> 00:05:59.160
|
||||
donde agregamos atributos en la etiqueta <link>
|
||||
|
||||
112
|
||||
00:06:00.580 --> 00:06:03.420
|
||||
donde agregamos el atributo "rel", "href"
|
||||
|
||||
113
|
||||
00:06:03.420 --> 00:06:05.420
|
||||
de lenguaje
|
||||
|
||||
114
|
||||
00:06:06.040 --> 00:06:10.000
|
||||
en la mayoría de etiquetas siempre utilizamos las clases
|
||||
|
||||
115
|
||||
00:06:10.000 --> 00:06:12.000
|
||||
que es para trabajar con CSS
|
||||
|
||||
116
|
||||
00:06:12.760 --> 00:06:14.220
|
||||
mediante las clases
|
||||
|
||||
117
|
||||
00:06:14.400 --> 00:06:17.380
|
||||
nosotros agregamos el tipo
|
||||
|
||||
118
|
||||
00:06:17.680 --> 00:06:22.120
|
||||
de diseño que se va mostrar en la etiqueta, cómo se va a mostrar
|
||||
|
||||
119
|
||||
00:06:22.460 --> 00:06:24.560
|
||||
he las dimensiones que va a tener
|
||||
|
||||
120
|
||||
00:06:25.240 --> 00:06:27.960
|
||||
las cosas con respecto al diseño
|
||||
|
||||
121
|
||||
00:06:30.060 --> 00:06:31.580
|
||||
he la etiqueta <img>
|
||||
|
||||
122
|
||||
00:06:31.760 --> 00:06:35.520
|
||||
tiene un atributo que se llama "SRC"
|
||||
|
||||
123
|
||||
00:06:36.620 --> 00:06:38.340
|
||||
allí puedes observar
|
||||
|
||||
124
|
||||
00:06:42.880 --> 00:06:46.640
|
||||
y tiene un enlace hacia la imagen, si yo pico aquí
|
||||
|
||||
125
|
||||
00:06:46.640 --> 00:06:48.640
|
||||
me va a mostrar la imagen
|
||||
|
||||
126
|
||||
00:06:49.720 --> 00:06:51.660
|
||||
y alternativamente
|
||||
|
||||
127
|
||||
00:06:52.340 --> 00:06:53.240
|
||||
tiene
|
||||
|
||||
128
|
||||
00:06:53.400 --> 00:06:56.780
|
||||
un atributo "alt" que todas las imágenes deben de tener
|
||||
|
||||
129
|
||||
00:06:56.780 --> 00:06:57.580
|
||||
que es
|
||||
|
||||
130
|
||||
00:06:58.560 --> 00:07:01.220
|
||||
su texto alternativo
|
||||
|
||||
131
|
||||
00:07:02.900 --> 00:07:05.280
|
||||
es impresindible
|
||||
|
||||
132
|
||||
00:07:05.280 --> 00:07:07.280
|
||||
para una imagen
|
||||
|
||||
133
|
||||
00:07:07.280 --> 00:07:08.440
|
||||
¿por qué?
|
||||
|
||||
134
|
||||
00:07:08.860 --> 00:07:13.280
|
||||
porque cuando la imagen por ejemplo desaparece del servidor
|
||||
|
||||
135
|
||||
00:07:16.280 --> 00:07:20.060
|
||||
en vez de que no se muestre la imagen
|
||||
|
||||
136
|
||||
00:07:20.220 --> 00:07:23.960
|
||||
cuando la imagen no existe muestra...
|
||||
|
||||
137
|
||||
00:07:24.520 --> 00:07:31.460
|
||||
un ícono roto indicando que la imagen no está disponible
|
||||
|
||||
138
|
||||
00:07:33.060 --> 00:07:40.160
|
||||
entonces al colocarle el "alt" el texto alternativo en vez de mostrarse ese ícono
|
||||
|
||||
139
|
||||
00:07:40.940 --> 00:07:47.880
|
||||
roto, se reemplaza por el texto que se agregó en el atributo "alt"
|
||||
|
||||
140
|
||||
00:07:51.560 --> 00:07:57.620
|
||||
bien, qué voy a utilizar aquí para escribir código
|
||||
|
||||
141
|
||||
00:07:58.540 --> 00:08:03.920
|
||||
ya para escribir el código HTML la parte de etiqueta
|
||||
|
||||
142
|
||||
00:08:05.100 --> 00:08:13.400
|
||||
voy a utilizar EMACS podéis utilizar cualquier otro editor de código
|
||||
|
||||
143
|
||||
00:08:15.060 --> 00:08:20.060
|
||||
ya es cuestión de preferencias podéis utilizar geany
|
||||
|
||||
144
|
||||
00:08:20.540 --> 00:08:26.380
|
||||
cualquier tipo editor de código que os parezca bien nano, no sé quizás VIM
|
||||
|
||||
145
|
||||
00:08:29.200 --> 00:08:34.640
|
||||
para la parte de práctica vamos a ir bastante a fondo, cómo funciona esto
|
||||
|
||||
146
|
||||
00:08:35.060 --> 00:08:39.320
|
||||
solamente este video es una pequeña introducción, es un pequeño paso
|
||||
|
||||
147
|
||||
00:08:39.620 --> 00:08:46.820
|
||||
recapitulando HTML no es un lengiuaje de programación es un lenguaje de marcado de etiquetas
|
||||
|
||||
148
|
||||
00:08:47.400 --> 00:08:52.020
|
||||
que permite pues posicionar la página web si esta bien escrito
|
||||
|
||||
149
|
||||
00:08:53.680 --> 00:09:00.760
|
||||
y a lo último pues de este curso veremos cómo validar HTML, sin embargo vamos hacerlo también
|
||||
|
||||
150
|
||||
00:09:01.380 --> 00:09:09.840
|
||||
cada vez de escribarmos algo al finalizar lo validaremos para comprobar si hemos escrito correctamente las etiquetas
|
||||
|
||||
151
|
||||
00:09:10.320 --> 00:09:13.300
|
||||
bien! nos vemos en el siguiente vídeo
|
||||
|
||||
Reference in New Issue
Block a user