1158 lines
18 KiB
WebVTT
1158 lines
18 KiB
WebVTT
WEBVTT
|
|
|
|
1
|
|
00:00:01.120 --> 00:00:02.120
|
|
bueno!
|
|
|
|
2
|
|
00:00:06.600 --> 00:00:11.900
|
|
quitaré h1 si es que la w3C dice que la etiqueta title
|
|
|
|
3
|
|
00:00:12.880 --> 00:00:13.980
|
|
la etiqueta title
|
|
|
|
4
|
|
00:00:13.980 --> 00:00:16.700
|
|
tiene más relevancia que la etiqueta h1
|
|
|
|
5
|
|
00:00:16.700 --> 00:00:19.000
|
|
por mientras entonces, por ahora
|
|
|
|
6
|
|
00:00:19.000 --> 00:00:22.560
|
|
es válido utilizar la etiqueta h1
|
|
|
|
7
|
|
00:00:22.760 --> 00:00:25.800
|
|
pero si en determinado caso la w3c decide
|
|
|
|
8
|
|
00:00:25.960 --> 00:00:28.760
|
|
que esta etiqueta h1 es lo mismo que poner title
|
|
|
|
9
|
|
00:00:29.120 --> 00:00:30.120
|
|
dentro del head
|
|
|
|
10
|
|
00:00:30.380 --> 00:00:31.240
|
|
pues
|
|
|
|
11
|
|
00:00:31.520 --> 00:00:35.140
|
|
se empezaría ya a utilizar la etiqueta h2
|
|
|
|
12
|
|
00:00:38.020 --> 00:00:40.280
|
|
bien vamos a
|
|
|
|
13
|
|
00:00:40.280 --> 00:00:41.760
|
|
seguir
|
|
|
|
14
|
|
00:00:42.280 --> 00:00:44.280
|
|
en la parte html
|
|
|
|
15
|
|
00:00:45.060 --> 00:00:49.580
|
|
vamos a ver que aquí pues ya sigue apareciendo lo mismo
|
|
|
|
16
|
|
00:00:50.720 --> 00:00:52.000
|
|
vamos a ver
|
|
|
|
17
|
|
00:00:52.700 --> 00:00:54.500
|
|
una etiqueta
|
|
|
|
18
|
|
00:00:55.280 --> 00:00:57.320
|
|
más importante que es para el head
|
|
|
|
19
|
|
00:00:57.320 --> 00:00:59.320
|
|
que es la etiqueta
|
|
|
|
20
|
|
00:00:59.940 --> 00:01:00.860
|
|
meta>
|
|
|
|
21
|
|
00:01:01.220 --> 00:01:04.640
|
|
la etiqueta meta es importante para el head
|
|
|
|
22
|
|
00:01:04.980 --> 00:01:05.900
|
|
¿por qué?
|
|
|
|
23
|
|
00:01:06.220 --> 00:01:09.700
|
|
porque qué pasaría si aquí yo le pongo por ejemplo
|
|
|
|
24
|
|
00:01:10.780 --> 00:01:12.560
|
|
carácteres especiales
|
|
|
|
25
|
|
00:01:13.440 --> 00:01:14.480
|
|
eñes
|
|
|
|
26
|
|
00:01:14.480 --> 00:01:16.480
|
|
tíldes
|
|
|
|
27
|
|
00:01:17.720 --> 00:01:19.820
|
|
a ver... ahí esta! Tíldes
|
|
|
|
28
|
|
00:01:23.300 --> 00:01:25.540
|
|
por ejemplo de esa forma: «Ñú»
|
|
|
|
29
|
|
00:01:27.940 --> 00:01:30.600
|
|
qué pasa si es que guardo así como está
|
|
|
|
30
|
|
00:01:31.520 --> 00:01:35.180
|
|
así como esta sin ponerle ninguna etiqueta meta>
|
|
|
|
31
|
|
00:01:35.180 --> 00:01:37.840
|
|
porque dentro de la etiqueta meta hay una propiedad
|
|
|
|
32
|
|
00:01:37.840 --> 00:01:39.840
|
|
que es el meta charset="UTF-8"
|
|
|
|
33
|
|
00:01:39.840 --> 00:01:41.840
|
|
charset se conoce como charset
|
|
|
|
34
|
|
00:01:42.060 --> 00:01:45.020
|
|
que la codificación de las palabras
|
|
|
|
35
|
|
00:01:45.500 --> 00:01:48.220
|
|
qué pasaría si es que yo no coloco esto dentro del head
|
|
|
|
36
|
|
00:01:49.200 --> 00:01:54.800
|
|
bueno tengo aquí el atributo lang que me indica que es español-españa, pero no me esta diciendo nada
|
|
|
|
37
|
|
00:01:55.020 --> 00:01:57.440
|
|
si nosotros nos vamos al navegador
|
|
|
|
38
|
|
00:02:01.040 --> 00:02:05.240
|
|
por defecto el navegador pues... a mi me coloca
|
|
|
|
39
|
|
00:02:05.520 --> 00:02:09.260
|
|
la Ñ, me pone aquí la Ñ
|
|
|
|
40
|
|
00:02:09.380 --> 00:02:11.900
|
|
pero eso no ocurren en todos los navegadores
|
|
|
|
41
|
|
00:02:11.900 --> 00:02:13.900
|
|
eso no ocurre en todos los navegadores
|
|
|
|
42
|
|
00:02:16.620 --> 00:02:18.740
|
|
esto es porque mi servidor
|
|
|
|
43
|
|
00:02:18.840 --> 00:02:20.160
|
|
mi servidor
|
|
|
|
44
|
|
00:02:20.160 --> 00:02:22.160
|
|
que es nginx
|
|
|
|
45
|
|
00:02:23.680 --> 00:02:25.680
|
|
tiene la configuración de
|
|
|
|
46
|
|
00:02:25.680 --> 00:02:27.680
|
|
UTF-8 por defecto
|
|
|
|
47
|
|
00:02:27.680 --> 00:02:30.700
|
|
si no tuviese esa configuración utf...
|
|
|
|
48
|
|
00:02:30.860 --> 00:02:33.140
|
|
perdón UTF-8 por defecto
|
|
|
|
49
|
|
00:02:33.140 --> 00:02:34.540
|
|
lo que haría
|
|
|
|
50
|
|
00:02:34.540 --> 00:02:39.520
|
|
sería mostrarme carácteres extraños en el body
|
|
|
|
51
|
|
00:02:39.880 --> 00:02:41.840
|
|
por ejemplo, voy a...
|
|
|
|
52
|
|
00:02:41.840 --> 00:02:43.840
|
|
ir a la parte de
|
|
|
|
53
|
|
00:02:44.920 --> 00:02:46.660
|
|
del terminal
|
|
|
|
54
|
|
00:02:50.600 --> 00:02:57.680
|
|
aqui voy a mirar un ratito la configuración de nginx
|
|
|
|
55
|
|
00:03:04.940 --> 00:03:07.100
|
|
y si observáis
|
|
|
|
56
|
|
00:03:09.300 --> 00:03:10.840
|
|
a ver
|
|
|
|
57
|
|
00:03:14.920 --> 00:03:15.980
|
|
aquí está!
|
|
|
|
58
|
|
00:03:16.740 --> 00:03:19.680
|
|
voy a bajarle un poquito
|
|
|
|
59
|
|
00:03:20.300 --> 00:03:21.600
|
|
el zoom
|
|
|
|
60
|
|
00:03:24.260 --> 00:03:26.960
|
|
ven aquí está: cat /etc/nginx/nginx.conf
|
|
|
|
61
|
|
00:03:28.720 --> 00:03:31.980
|
|
y en la parte de aquí, ahí está!
|
|
|
|
62
|
|
00:03:32.340 --> 00:03:33.700
|
|
yo le he puesto
|
|
|
|
63
|
|
00:03:33.700 --> 00:03:37.220
|
|
que sea charset="UTF-8" por defecto
|
|
|
|
64
|
|
00:03:37.220 --> 00:03:40.600
|
|
pero eso yo lo he puesto dentro del servidor nginx
|
|
|
|
65
|
|
00:03:41.440 --> 00:03:43.340
|
|
pero no todos los servidores
|
|
|
|
66
|
|
00:03:43.340 --> 00:03:44.340
|
|
tienen
|
|
|
|
67
|
|
00:03:45.380 --> 00:03:48.560
|
|
el meta charset dentro de...
|
|
|
|
68
|
|
00:03:48.800 --> 00:03:53.600
|
|
...su configuración, esto es porque yo he puesto el charset
|
|
|
|
69
|
|
00:03:53.760 --> 00:03:54.860
|
|
...UTF-8
|
|
|
|
70
|
|
00:03:54.860 --> 00:03:56.120
|
|
entonces de esa forma
|
|
|
|
71
|
|
00:03:56.120 --> 00:03:58.520
|
|
para mi en mi servidor
|
|
|
|
72
|
|
00:03:58.660 --> 00:04:00.380
|
|
es irreleante
|
|
|
|
73
|
|
00:04:00.380 --> 00:04:01.860
|
|
si yo pongo
|
|
|
|
74
|
|
00:04:01.860 --> 00:04:04.140
|
|
el meta charset aquí
|
|
|
|
75
|
|
00:04:04.560 --> 00:04:05.520
|
|
pero
|
|
|
|
76
|
|
00:04:05.520 --> 00:04:10.200
|
|
lo recomendable es colocarlo, es decir decirle a la página web
|
|
|
|
77
|
|
00:04:10.520 --> 00:04:13.500
|
|
en qué codificación está escrita
|
|
|
|
78
|
|
00:04:13.500 --> 00:04:15.500
|
|
cómo se hace eso
|
|
|
|
79
|
|
00:04:15.500 --> 00:04:16.880
|
|
muy sencillo
|
|
|
|
80
|
|
00:04:16.880 --> 00:04:19.560
|
|
vamos a colocar aquí la etiqueta meta
|
|
|
|
81
|
|
00:04:19.560 --> 00:04:20.500
|
|
que
|
|
|
|
82
|
|
00:04:20.500 --> 00:04:24.380
|
|
que es una etiqueta que cierra a si misma
|
|
|
|
83
|
|
00:04:24.380 --> 00:04:26.600
|
|
es decir no tienes que colocar
|
|
|
|
84
|
|
00:04:26.740 --> 00:04:29.620
|
|
etiqueta meta que se cierra
|
|
|
|
85
|
|
00:04:31.020 --> 00:04:32.680
|
|
simplemente colocáis ahí
|
|
|
|
86
|
|
00:04:33.380 --> 00:04:37.000
|
|
en XML era necesario colocar la barrita
|
|
|
|
87
|
|
00:04:37.000 --> 00:04:39.000
|
|
en HTML no es necesario
|
|
|
|
88
|
|
00:04:39.380 --> 00:04:41.980
|
|
si queréis la colocáis sino no
|
|
|
|
89
|
|
00:04:42.460 --> 00:04:44.680
|
|
correcto, ahora vamos a poner charset
|
|
|
|
90
|
|
00:04:44.680 --> 00:04:55.140
|
|
meta charset="UTF-8"
|
|
|
|
91
|
|
00:04:55.440 --> 00:04:57.140
|
|
de est forma
|
|
|
|
92
|
|
00:04:57.540 --> 00:04:59.280
|
|
si es que el servidor
|
|
|
|
93
|
|
00:05:01.200 --> 00:05:02.360
|
|
en este caso
|
|
|
|
94
|
|
00:05:02.360 --> 00:05:05.060
|
|
si es que yo en mi servidor
|
|
|
|
95
|
|
00:05:05.300 --> 00:05:07.940
|
|
no hubiese colocado
|
|
|
|
96
|
|
00:05:08.540 --> 00:05:10.260
|
|
el atributo
|
|
|
|
97
|
|
00:05:10.260 --> 00:05:13.120
|
|
charset UTF-8
|
|
|
|
98
|
|
00:05:14.080 --> 00:05:16.440
|
|
si yo no hubiese colocado esto
|
|
|
|
99
|
|
00:05:16.780 --> 00:05:18.740
|
|
automáticamente
|
|
|
|
100
|
|
00:05:18.880 --> 00:05:20.540
|
|
en la parte
|
|
|
|
101
|
|
00:05:20.540 --> 00:05:21.380
|
|
y aquí
|
|
|
|
102
|
|
00:05:21.380 --> 00:05:23.480
|
|
no aparecería
|
|
|
|
103
|
|
00:05:23.480 --> 00:05:25.480
|
|
no aparecería la Ñ
|
|
|
|
104
|
|
00:05:25.840 --> 00:05:26.800
|
|
ejemplo
|
|
|
|
105
|
|
00:05:27.760 --> 00:05:29.280
|
|
ya que tengo el terminal aquí
|
|
|
|
106
|
|
00:05:29.280 --> 00:05:31.520
|
|
y sé dónde está, voy a
|
|
|
|
107
|
|
00:05:31.520 --> 00:05:33.000
|
|
comentar
|
|
|
|
108
|
|
00:05:34.020 --> 00:05:35.460
|
|
voy a comentar
|
|
|
|
109
|
|
00:05:35.460 --> 00:05:36.780
|
|
ese...
|
|
|
|
110
|
|
00:05:37.480 --> 00:05:40.380
|
|
esa configuración del UTF-8
|
|
|
|
111
|
|
00:05:41.600 --> 00:05:42.580
|
|
voy a
|
|
|
|
112
|
|
00:05:43.260 --> 00:05:44.720
|
|
voy a editarla
|
|
|
|
113
|
|
00:05:45.400 --> 00:05:47.780
|
|
voy a comentarla ahorita para que...
|
|
|
|
114
|
|
00:05:47.780 --> 00:05:50.720
|
|
me arroje el error que les estoy explicando
|
|
|
|
115
|
|
00:05:52.100 --> 00:05:54.940
|
|
aquí está, charset
|
|
|
|
116
|
|
00:05:54.940 --> 00:05:57.380
|
|
le pongo una almuadilla delante
|
|
|
|
117
|
|
00:06:00.300 --> 00:06:04.200
|
|
y por supuesto reinicio el servidor nginx
|
|
|
|
118
|
|
00:06:11.140 --> 00:06:13.700
|
|
ahí esta lo he reiniciado
|
|
|
|
119
|
|
00:06:14.220 --> 00:06:16.420
|
|
ahora regresamos
|
|
|
|
120
|
|
00:06:17.220 --> 00:06:20.720
|
|
así como esta configuración poniendole el meta charset
|
|
|
|
121
|
|
00:06:20.720 --> 00:06:21.740
|
|
la Ñ
|
|
|
|
122
|
|
00:06:21.740 --> 00:06:23.740
|
|
se va a mostrar correctamente
|
|
|
|
123
|
|
00:06:25.820 --> 00:06:28.260
|
|
es decir no importa que haya desactivado yo...
|
|
|
|
124
|
|
00:06:28.260 --> 00:06:30.260
|
|
el charset en mi servidor
|
|
|
|
125
|
|
00:06:30.260 --> 00:06:32.260
|
|
se va a mostrar correctamente
|
|
|
|
126
|
|
00:06:34.580 --> 00:06:36.820
|
|
si observáis actualizó
|
|
|
|
127
|
|
00:06:37.320 --> 00:06:40.020
|
|
continúa estable
|
|
|
|
128
|
|
00:06:40.940 --> 00:06:45.940
|
|
ahora que pasaría si es que yo le quito la etiqueta meta charset
|
|
|
|
129
|
|
00:06:46.840 --> 00:06:48.820
|
|
yo le quito, yo le borro
|
|
|
|
130
|
|
00:06:51.040 --> 00:06:53.260
|
|
ahi está ya le borré la etiqueta
|
|
|
|
131
|
|
00:06:54.680 --> 00:06:57.120
|
|
entonces yo voy aquí al servidor
|
|
|
|
132
|
|
00:06:57.120 --> 00:06:59.120
|
|
a la parte de la página
|
|
|
|
133
|
|
00:06:59.120 --> 00:07:03.560
|
|
actualizo y automáticamente se arruina todo
|
|
|
|
134
|
|
00:07:04.260 --> 00:07:05.560
|
|
aparecen
|
|
|
|
135
|
|
00:07:06.280 --> 00:07:08.000
|
|
aparecen carácteres
|
|
|
|
136
|
|
00:07:08.000 --> 00:07:09.480
|
|
que yo no coloqué
|
|
|
|
137
|
|
00:07:10.200 --> 00:07:14.080
|
|
aparecen carácteres que yo no coloque
|
|
|
|
138
|
|
00:07:14.080 --> 00:07:16.080
|
|
una barrita arriba
|
|
|
|
139
|
|
00:07:16.200 --> 00:07:20.840
|
|
a por ejemplo, una parte de simbolo de grados
|
|
|
|
140
|
|
00:07:21.600 --> 00:07:24.100
|
|
aparece lo que yo no deseo que aparezca
|
|
|
|
141
|
|
00:07:24.100 --> 00:07:25.240
|
|
entonces
|
|
|
|
142
|
|
00:07:25.820 --> 00:07:27.700
|
|
para corregir ese error
|
|
|
|
143
|
|
00:07:28.220 --> 00:07:33.820
|
|
debemos colocar el meta charset="UTF-8" sí o sí
|
|
|
|
144
|
|
00:07:33.820 --> 00:07:35.820
|
|
para evitar problemas
|
|
|
|
145
|
|
00:07:35.820 --> 00:07:41.120
|
|
y ahora voy a regresar aquí a la parte de mi servidor lo voy a dejar normal como estaba
|
|
|
|
146
|
|
00:07:41.980 --> 00:07:42.680
|
|
con
|
|
|
|
147
|
|
00:07:43.220 --> 00:07:44.440
|
|
el UTF-8
|
|
|
|
148
|
|
00:07:44.580 --> 00:07:46.860
|
|
yo hago esto porque
|
|
|
|
149
|
|
00:07:48.240 --> 00:07:51.720
|
|
mi servidor siempre yo lo tengo en UTF-8
|
|
|
|
150
|
|
00:07:52.540 --> 00:07:53.280
|
|
es por eso
|
|
|
|
151
|
|
00:07:53.540 --> 00:07:57.600
|
|
vamos a reiniciarlo, ahí está!. bien!
|
|
|
|
152
|
|
00:07:58.440 --> 00:08:00.040
|
|
esta etiqueta es importante
|
|
|
|
153
|
|
00:08:00.040 --> 00:08:02.880
|
|
otra etiquet importante es el
|
|
|
|
154
|
|
00:08:04.500 --> 00:08:06.020
|
|
también es un meta
|
|
|
|
155
|
|
00:08:07.880 --> 00:08:10.900
|
|
que es el meta name viewport
|
|
|
|
156
|
|
00:08:11.340 --> 00:08:13.440
|
|
name, atributo name
|
|
|
|
157
|
|
00:08:13.440 --> 00:08:15.440
|
|
viewport
|
|
|
|
158
|
|
00:08:17.160 --> 00:08:21.620
|
|
bueno y me dirán para que rayos es esto
|
|
|
|
159
|
|
00:08:21.620 --> 00:08:23.420
|
|
el viewport
|
|
|
|
160
|
|
00:08:23.420 --> 00:08:25.780
|
|
propiedad name con su...
|
|
|
|
161
|
|
00:08:28.740 --> 00:08:30.420
|
|
con su atributo viewport
|
|
|
|
162
|
|
00:08:31.240 --> 00:08:33.080
|
|
es
|
|
|
|
163
|
|
00:08:34.980 --> 00:08:37.220
|
|
hacer que la página
|
|
|
|
164
|
|
00:08:38.540 --> 00:08:41.440
|
|
pueda ser mostrada correctamente
|
|
|
|
165
|
|
00:08:41.780 --> 00:08:45.120
|
|
en la pantallas pequeñas como los teléfonos móviles
|
|
|
|
166
|
|
00:08:46.880 --> 00:08:49.860
|
|
mayormente se utiliza la propiedad
|
|
|
|
167
|
|
00:08:50.160 --> 00:08:52.000
|
|
el atributo content
|
|
|
|
168
|
|
00:08:52.000 --> 00:08:54.000
|
|
para indicar y decirle
|
|
|
|
169
|
|
00:08:54.960 --> 00:08:56.580
|
|
al viewport
|
|
|
|
170
|
|
00:08:56.580 --> 00:08:58.580
|
|
ya al viewport
|
|
|
|
171
|
|
00:08:58.580 --> 00:09:00.580
|
|
vamos a ver qué es viewport
|
|
|
|
172
|
|
00:09:00.580 --> 00:09:02.580
|
|
el viewport es:
|
|
|
|
173
|
|
00:09:02.580 --> 00:09:05.180
|
|
todo el body, todo lo que...
|
|
|
|
174
|
|
00:09:06.060 --> 00:09:07.440
|
|
podéis observar aquí
|
|
|
|
175
|
|
00:09:11.000 --> 00:09:12.160
|
|
todo lo que véis aquí
|
|
|
|
176
|
|
00:09:12.160 --> 00:09:13.460
|
|
toda esta parte
|
|
|
|
177
|
|
00:09:14.120 --> 00:09:16.320
|
|
toda esta parte es el viewport
|
|
|
|
178
|
|
00:09:17.640 --> 00:09:20.840
|
|
voy actualizar aquí para que no se vean eso carácteres raros
|
|
|
|
179
|
|
00:09:21.040 --> 00:09:21.780
|
|
bien
|
|
|
|
180
|
|
00:09:22.100 --> 00:09:24.400
|
|
toda esta parte es el viewport
|
|
|
|
181
|
|
00:09:24.720 --> 00:09:25.440
|
|
correcto
|
|
|
|
182
|
|
00:09:25.440 --> 00:09:27.440
|
|
toda esta parte es el viewport
|
|
|
|
183
|
|
00:09:29.240 --> 00:09:33.560
|
|
toda la pantalla, todo lo que se muestra dentro de esta pantalla
|
|
|
|
184
|
|
00:09:33.920 --> 00:09:36.680
|
|
entonces qué vamos a decirle mediante está etiqueta
|
|
|
|
185
|
|
00:09:38.580 --> 00:09:40.220
|
|
a la pantalla
|
|
|
|
186
|
|
00:09:40.880 --> 00:09:42.940
|
|
la pantalla va a tener esta codiciones
|
|
|
|
187
|
|
00:09:43.320 --> 00:09:46.140
|
|
la página va a tener estas codiciones sobre la pantalla
|
|
|
|
188
|
|
00:09:46.820 --> 00:09:48.440
|
|
que el ancho
|
|
|
|
189
|
|
00:09:49.500 --> 00:09:50.840
|
|
el ancho
|
|
|
|
190
|
|
00:09:55.560 --> 00:09:57.080
|
|
va a ser igual
|
|
|
|
191
|
|
00:09:58.780 --> 00:10:01.200
|
|
el ancho de la web va a ser igual
|
|
|
|
192
|
|
00:10:01.200 --> 00:10:03.200
|
|
al ancho
|
|
|
|
193
|
|
00:10:03.360 --> 00:10:05.640
|
|
del dispositivo es decir
|
|
|
|
194
|
|
00:10:05.640 --> 00:10:07.640
|
|
igual al ancho de la pantalla
|
|
|
|
195
|
|
00:10:08.420 --> 00:10:09.220
|
|
ahí está
|
|
|
|
196
|
|
00:10:10.220 --> 00:10:12.040
|
|
el ancho
|
|
|
|
197
|
|
00:10:13.000 --> 00:10:14.720
|
|
de la página web
|
|
|
|
198
|
|
00:10:14.720 --> 00:10:16.720
|
|
va a ser igual
|
|
|
|
199
|
|
00:10:16.720 --> 00:10:20.220
|
|
al ancho de la página
|
|
|
|
200
|
|
00:10:20.620 --> 00:10:22.300
|
|
colocamos una coma
|
|
|
|
201
|
|
00:10:22.300 --> 00:10:24.300
|
|
para decirle algo más
|
|
|
|
202
|
|
00:10:25.200 --> 00:10:27.100
|
|
le vamos a decir
|
|
|
|
203
|
|
00:10:27.280 --> 00:10:35.060
|
|
que la escala inicial, initial-scale, escala inicial
|
|
|
|
204
|
|
00:10:36.520 --> 00:10:38.200
|
|
por defecto
|
|
|
|
205
|
|
00:10:38.600 --> 00:10:39.840
|
|
por defecto
|
|
|
|
206
|
|
00:10:40.640 --> 00:10:43.560
|
|
va a ser 1, ahí está
|
|
|
|
207
|
|
00:10:45.120 --> 00:10:53.400
|
|
y si queréis trabajar con números decimales mayormente se pone 1.0
|
|
|
|
208
|
|
00:10:53.400 --> 00:10:55.400
|
|
escala en 1
|
|
|
|
209
|
|
00:10:55.880 --> 00:10:56.720
|
|
es decir
|
|
|
|
210
|
|
00:10:57.100 --> 00:11:01.440
|
|
que si yo aquí mediante CSS digo
|
|
|
|
211
|
|
00:11:01.440 --> 00:11:04.900
|
|
la etiqueta de css (style>/style>) se coloca dentro de head
|
|
|
|
212
|
|
00:11:05.880 --> 00:11:07.340
|
|
aquí se coloca
|
|
|
|
213
|
|
00:11:09.760 --> 00:11:11.120
|
|
bueno como decía
|
|
|
|
214
|
|
00:11:11.500 --> 00:11:13.520
|
|
si yo le digo mediante diseño
|
|
|
|
215
|
|
00:11:13.520 --> 00:11:17.600
|
|
le digo el ancho va a ser tanto, entonces
|
|
|
|
216
|
|
00:11:17.920 --> 00:11:26.020
|
|
la pantalla pues va a funcionar con ese ancho que yo le dije, no lo va a escalar, va a utilizar ese ancho que le dije
|
|
|
|
217
|
|
00:11:26.020 --> 00:11:30.620
|
|
no va haber ningún problema con el diseño
|
|
|
|
218
|
|
00:11:30.620 --> 00:11:36.320
|
|
y es más que todo importantísimo, porque si no colocáis este atributo
|
|
|
|
219
|
|
00:11:37.060 --> 00:11:40.760
|
|
si no colocáis la etiqueta meta con su atributo name viewport
|
|
|
|
220
|
|
00:11:41.180 --> 00:11:48.720
|
|
no váis a poder hacer, lo que se conoce como Responsive Desing
|
|
|
|
221
|
|
00:11:49.340 --> 00:11:50.800
|
|
no váis a poder hacerlo
|
|
|
|
222
|
|
00:11:51.360 --> 00:11:57.480
|
|
podéis haber colocado los mediaqueries y todo el resto, pero si te olvidas de colocar esta etiqueta
|
|
|
|
223
|
|
00:11:58.500 --> 00:12:01.880
|
|
si no sabes por qué no funciona tu CSS
|
|
|
|
224
|
|
00:12:01.880 --> 00:12:03.880
|
|
esta etiqueta te va a
|
|
|
|
225
|
|
00:12:05.440 --> 00:12:10.140
|
|
va a colapsar todo, no se va a mostrar bien, algo va a fallar
|
|
|
|
226
|
|
00:12:10.140 --> 00:12:12.140
|
|
algo siempre va a fallar
|
|
|
|
227
|
|
00:12:12.360 --> 00:12:15.360
|
|
por eso es importante que colocáis esta etiiqueta
|
|
|
|
228
|
|
00:12:17.160 --> 00:12:17.780
|
|
bien
|
|
|
|
229
|
|
00:12:18.600 --> 00:12:19.580
|
|
hasta ahí
|
|
|
|
230
|
|
00:12:20.440 --> 00:12:21.480
|
|
vamos
|
|
|
|
231
|
|
00:12:22.980 --> 00:12:24.440
|
|
vamos mirando
|
|
|
|
232
|
|
00:12:24.440 --> 00:12:26.040
|
|
la parte
|
|
|
|
233
|
|
00:12:26.040 --> 00:12:28.840
|
|
de las etiquetas y la sintaxis
|
|
|
|
234
|
|
00:12:28.840 --> 00:12:30.840
|
|
de la estructura
|
|
|
|
235
|
|
00:12:30.840 --> 00:12:32.100
|
|
HTML
|
|
|
|
236
|
|
00:12:32.760 --> 00:12:35.280
|
|
en el siguiente vídeo vamos a
|
|
|
|
237
|
|
00:12:35.280 --> 00:12:38.760
|
|
ver ya, de la parte del body>
|
|
|
|
238
|
|
00:12:39.080 --> 00:12:41.800
|
|
aunque ya hemos visto un poquito, vamos a empezar
|
|
|
|
239
|
|
00:12:42.040 --> 00:12:46.140
|
|
con el header que es la parte principal del body
|
|
|
|
240
|
|
00:12:48.380 --> 00:12:54.320
|
|
aquí también antes de cerrar el vídeo
|
|
|
|
241
|
|
00:12:54.760 --> 00:12:56.460
|
|
que es favicon
|
|
|
|
242
|
|
00:12:56.460 --> 00:12:58.460
|
|
el favicon
|
|
|
|
243
|
|
00:12:59.420 --> 00:13:02.140
|
|
que es el logo que tiene por ejemplo aquí
|
|
|
|
244
|
|
00:13:02.680 --> 00:13:04.560
|
|
dónde está, a ver aquí está
|
|
|
|
245
|
|
00:13:05.160 --> 00:13:07.440
|
|
aquí tengo la página web de conocimientos libres
|
|
|
|
246
|
|
00:13:08.460 --> 00:13:11.260
|
|
aquí como podéis observar aparece un ícono
|
|
|
|
247
|
|
00:13:13.120 --> 00:13:21.720
|
|
voy a darle aquí en ver código fuente, aparece un ícono, ese ícono es esta imagen
|
|
|
|
248
|
|
00:13:24.160 --> 00:13:25.500
|
|
es esa imagen
|
|
|
|
249
|
|
00:13:26.080 --> 00:13:29.120
|
|
vamos a tomar el enlace de
|
|
|
|
250
|
|
00:13:29.500 --> 00:13:34.960
|
|
conocimientos libres para el ejemplo, porque ahorita no tengo imagenes dentro del directorio
|
|
|
|
251
|
|
00:13:35.300 --> 00:13:38.980
|
|
de course, en este directorio no hay imágenes no hay nada
|
|
|
|
252
|
|
00:13:39.360 --> 00:13:41.480
|
|
solamente el archivo index
|
|
|
|
253
|
|
00:13:41.960 --> 00:13:44.460
|
|
vamos a agarrar de ejemplo para terminar el vídeo
|
|
|
|
254
|
|
00:13:44.460 --> 00:13:47.920
|
|
vamos a ir a la parte del head>
|
|
|
|
255
|
|
00:13:47.920 --> 00:13:51.460
|
|
y vamos a escribir una etiqueta llamada link
|
|
|
|
256
|
|
00:13:53.080 --> 00:13:58.020
|
|
una etiqueta link se cierra así misma como la etiqueta meta
|
|
|
|
257
|
|
00:14:00.820 --> 00:14:02.620
|
|
entonces vamos a
|
|
|
|
258
|
|
00:14:03.460 --> 00:14:04.560
|
|
colocar
|
|
|
|
259
|
|
00:14:06.100 --> 00:14:08.160
|
|
un atributo que se llama "rel"
|
|
|
|
260
|
|
00:14:09.500 --> 00:14:10.420
|
|
con
|
|
|
|
261
|
|
00:14:10.420 --> 00:14:12.420
|
|
su información
|
|
|
|
262
|
|
00:14:12.660 --> 00:14:16.420
|
|
y le vamos a decir que ese enlace es un ícono
|
|
|
|
263
|
|
00:14:18.020 --> 00:14:20.880
|
|
va a tener su atributo href
|
|
|
|
264
|
|
00:14:21.200 --> 00:14:27.060
|
|
href hace referencia a un enlace externo de un recurso que se encuentra en otro lado
|
|
|
|
265
|
|
00:14:27.680 --> 00:14:29.200
|
|
en este caso
|
|
|
|
266
|
|
00:14:29.200 --> 00:14:31.200
|
|
voy a utilizar
|
|
|
|
267
|
|
00:14:31.200 --> 00:14:33.200
|
|
mi enlace de
|
|
|
|
268
|
|
00:14:33.200 --> 00:14:35.200
|
|
conocimientos libres
|
|
|
|
269
|
|
00:14:35.200 --> 00:14:37.640
|
|
la figurta que coji hace poquito
|
|
|
|
270
|
|
00:14:41.300 --> 00:14:43.240
|
|
el nombre de la imagen
|
|
|
|
271
|
|
00:14:44.720 --> 00:14:49.320
|
|
además de eso voy a decir que con la propiedad "sizes"
|
|
|
|
272
|
|
00:14:49.880 --> 00:14:53.700
|
|
le voy a decir el tamaño de esa imagen para ese favicon
|
|
|
|
273
|
|
00:14:54.040 --> 00:14:57.420
|
|
que sería de 16x16
|
|
|
|
274
|
|
00:14:57.420 --> 00:14:59.420
|
|
y con eso
|
|
|
|
275
|
|
00:14:59.740 --> 00:15:00.720
|
|
con esto
|
|
|
|
276
|
|
00:15:01.000 --> 00:15:04.620
|
|
estaría colocando lo que se conoce como favicon
|
|
|
|
277
|
|
00:15:04.920 --> 00:15:07.580
|
|
ahora los comentarios simplemente
|
|
|
|
278
|
|
00:15:08.460 --> 00:15:24.120
|
|
colocáis el coments
|
|
|
|
279
|
|
00:15:27.620 --> 00:15:29.420
|
|
ahora si yo
|
|
|
|
280
|
|
00:15:30.260 --> 00:15:34.520
|
|
guardo el index.html y regreso
|
|
|
|
281
|
|
00:15:35.340 --> 00:15:37.260
|
|
a la parte de
|
|
|
|
282
|
|
00:15:40.540 --> 00:15:42.460
|
|
a la parte de
|
|
|
|
283
|
|
00:15:44.880 --> 00:15:48.780
|
|
de la página web, voy a recargar
|
|
|
|
284
|
|
00:15:49.500 --> 00:15:53.720
|
|
y como podéis obervar automáticamente aparece el ícono
|
|
|
|
285
|
|
00:15:53.720 --> 00:15:57.420
|
|
el ícono en qué formato debería de estar pues
|
|
|
|
286
|
|
00:15:58.100 --> 00:16:07.180
|
|
podéis usar PNG o icon, yo recomiendo PNG para que no tengáis problemas con los móviles
|
|
|
|
287
|
|
00:16:08.340 --> 00:16:12.900
|
|
y pues es así de esta forma se coloca un favicon, bien!
|
|
|
|
288
|
|
00:16:12.900 --> 00:16:18.740
|
|
en el siguiente un poquito más sobre body
|
|
|
|
289
|
|
00:16:19.080 --> 00:16:23.680
|
|
y bueno seáis felices, nos vemos en el siguiente vídeo
|