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