Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

HTML Validación de páginas - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 28 de diciembre de 2020 por Amadeo M.

110 visualizaciones

Más información Transcripción

Descargar la transcripción

estamos hablando que los navegadores 00:00:00
realmente se tragan todo 00:00:02
pero a nosotros nos gustaría que nuestra página 00:00:04
estuviera validada, fuera de verdad una hoja 00:00:06
en condiciones, lo mismo nos va a pasar con las hojas de estilo 00:00:08
tenemos diversos programas 00:00:12
para comprobar 00:00:14
como se valida un lenguaje de marcas 00:00:15
voy a ir a este enlace que ya lo tengo abierto aquí 00:00:18
y voy a 00:00:20
ver 00:00:23
voy a intentar subir 00:00:25
un fichero para 00:00:26
que nos lo valide, ese fichero 00:00:28
corresponde a esta información 00:00:30
es un ejemplo que ya teníamos pero al cual 00:00:32
hemos introducido algo que sabemos que está 00:00:34
erróneo, aquí empieza la etiqueta 00:00:36
P que vemos que finaliza aquí 00:00:38
y sin embargo la etiqueta SPAN 00:00:39
la hemos dejado aquí 00:00:42
no están anidadas, no está una dentro de otra 00:00:44
bueno, vamos a 00:00:46
subir este ficherito 00:00:48
vamos a subir este ficherito 00:00:49
aquí 00:00:52
vamos a subir ese ficherito 00:00:53
ahí chequeamos 00:00:56
Y vamos a ver que nos indica 00:00:58
Pues efectivamente se da cuenta rápidamente 00:01:00
Dicen área 17, columna 31 00:01:03
Hasta no sé qué 00:01:05
Hemos cerrado esto 00:01:06
Teniendo esto sin cerrar 00:01:08
¿De acuerdo? 00:01:11
Bueno, pues muy bien, ya sabemos que hay errores en nuestra página 00:01:12
Vale 00:01:15
¿Podríamos verlo con nuestro propio navegador? 00:01:16
Pues podríamos 00:01:20
Esto es un método muy rápido 00:01:21
Que deberíamos hacerlo en nuestras páginas habituales 00:01:22
¿De acuerdo? 00:01:25
Por supuesto, como lo hemos visto aquí, podemos ir directamente a una dirección que ya esté, ¿de acuerdo? 00:01:25
O validarlo de esta manera, o incluso escribir nuestra página aquí directamente. 00:01:33
Bien, además, como características, se le puede incluir tipos de validación y tipos distintos. 00:01:39
Bueno, vamos a ver nuestra página como la vemos en nuestro navegador. 00:01:46
está nuestra página en el navegador 00:01:49
sabemos que nuestro span empieza aproximadamente 00:01:50
por aquí y acaba aquí 00:01:53
y nuestro párrafo empieza aquí y acaba 00:01:55
aquí, esto es lo que sabemos 00:01:57
entonces le dices, bueno, da algún error 00:01:59
si veo el fuente 00:02:01
pues no, no me está diciendo nada raro 00:02:01
no me dice nada raro, con lo cual 00:02:05
con esta información no me vale 00:02:07
pero simplemente sin utilizar 00:02:08
ni siquiera ningún 00:02:11
plugin ni nada por el estilo 00:02:12
si yo me voy a más herramientas 00:02:14
y herramientas para desarrolladores dentro de Chrome 00:02:17
o en Firefox, el equivalente 00:02:20
yo estoy viendo 00:02:21
esta información de esta manera 00:02:23
digo anda que curioso 00:02:25
aquí me abre como un árbol 00:02:27
en el cual está mi cabecera 00:02:29
perfecto, después está mi cuerpo 00:02:31
perfecto, hay un párrafo 00:02:33
que termina, que está aquí 00:02:36
que dentro tiene un span que lo cierra 00:02:38
digo anda que curioso 00:02:40
como ha movido el navegador 00:02:41
por su cuenta, este span que estaba 00:02:44
aquí fuera, lo ha metido aquí 00:02:46
dentro, ¿ven? ha cambiado 00:02:48
el árbol, el árbol de nuestro documento 00:02:50
lo ha cambiado completamente 00:02:52
entonces, si coincide con lo que 00:02:53
nosotros teníamos pensado, perfecto 00:02:56
si no coincide 00:02:58
pues está claro que está mal 00:02:59
y es posible que este documento que nosotros 00:03:01
habíamos dibujado, nuestra idea 00:03:04
realmente no fuera esta, sino poner aquí 00:03:06
span, aquí 00:03:08
fin de span y aquí 00:03:09
nuestro párrafo, ¿de acuerdo? 00:03:11
de tal manera que simplemente en la 00:03:14
Vemos ya que el árbol lo ha modificado. Esta parte en la cual nos ayudamos de herramientas propias de desarrolladores son muy útiles para emocionar cuestiones. Por ejemplo, yo pincho aquí. A ver si consigo pinchar ahí. Bueno, no consigo pinchar ahí. Bueno, pues ya está. 00:03:16
Cuando estoy por aquí, puedo ir viendo en qué zonas estoy trabajando, ¿de acuerdo? 00:03:38
Puedo ir viendo las zonas en las que voy trabajando. 00:03:46
Aquí estoy teniendo problemas precisamente porque el documento no estaba bien 00:03:49
y él no sabe muy bien en qué zona estamos trabajando. 00:03:52
Miren, cuando paso por encima, cómo él va abajo a las zonas correspondientes, ¿vale? 00:03:56
¿De acuerdo? Él sabe en qué zonas estamos. 00:04:03
Con lo cual esto lo vamos a utilizar a menudo en el desarrollo de nuestras páginas 00:04:05
Además muchos de ellos permiten escribir dentro 00:04:10
Permiten cambiar la información que tenemos dentro y probar cómo quedaría 00:04:13
O cambiar estilos, por ejemplo, si yo a ver de poner oblicuo pongo normal 00:04:17
Cómo nos quedaría la información, ¿de acuerdo? 00:04:22
Nos permite escribir en muchos sitios para probar cosas de esta página 00:04:25
Son muy interesantes estas herramientas de desarrollo 00:04:29
Igual que vamos a poder validar el lenguaje de marcas en HTML, vamos a poder validar nuestros CSS, ver si los enlaces corresponden a algo adecuado o no. 00:04:32
Y hay herramientas ya integradas que miran todo a la vez. 00:04:41
Muy interesante el tema de validar para no tener grandes problemas con nuestras páginas que estemos utilizando. 00:04:47
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
110
Fecha:
28 de diciembre de 2020 - 14:09
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
04′ 55″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
38.55 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid