MD.PlantillaTexto(01)Esp.
dot
MÓDULO
PROGRAMACIÓN WEB HTML/CSS
UNIDAD 3
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
M051_03_V(03)
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
ÍNDICE
TU RETO EN ESTA UNIDAD ........................................................................ 3
1. INTRODUCCIÓN ..................................................................................... 5
2. ¿POR QUÉ VALIDAR NUESTRA WEB CON W3C?.................................... 6
3. ¿DÓNDE VALIDAR LA WEB? ................................................................... 7
4. ¿POR QUÉ NOS INTERESA QUE NUESTRA WEB ESTÉ VALIDADA? ....... 9
5. CÓMO EMPEZAR ................................................................................. 10
¿QUÉ HAS APRENDIDO? .......................................................................... 13
AUTOCOMPROBACIÓN............................................................................ 15
SOLUCIONARIO ....................................................................................... 17
BIBLIOGRAFÍA ......................................................................................... 19
1
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
TU RETO EN ESTA UNIDAD
En esta unidad vas a descubrir utilidades y métodos de controlar y validar nues-
tro código HTML con el fin de poder crear webs de un modo profesional y sin
errores de maquetación.
Al final de esta unidad deberás ser capaz de buscar y encontrar los errores o
mejoras a realizar sobre cualquier página Web.
3
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
1. INTRODUCCIÓN
Existe en Internet una organización llamada W3C (http://www.w3c.es/) que se
encarga de crear los estándares del lenguaje HTML.
La Web es un modo muy actual de compartir toda clase de archivos y opiniones.
Por ese mismo motivo se crean las conocidas como “redes sociales” de Internet.
HTML proporciona a estas redes una herramienta muy potente para poder
compartir toda esa información gracias a un estándar que hace que una Web se
vea siempre igual, independientemente del idioma, hardware o software del que
se disponga.
5
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
2. ¿POR QUÉ VALIDAR NUESTRA WEB
CON W3C?
Hay muchas maneras de usar los elementos HTML y CSS que existen ambos
lenguajes y que serían válidos para la mayoría de los navegadores. La misión de
W3C es establecer un estándar para que, al validar nuestra página, pueda ser
semejante a su estándar y conseguir que nuestra Web se vea correctamente y
se interprete igual en todos los navegadores, ya que la mayoría están actuali-
zándose para comprender y establecer este estándar.
6
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
3. ¿DÓNDE VALIDAR LA WEB?
Hay dos tipos de estándares: el de HTML, que aprenderemos en esta unidad, y
el de CSS, que lo dejaremos para posteriores unidades.
Para hacer una validación HTML de nuestro código podemos entrar en
https://validator.w3.org/ donde se nos suministra una herramienta gratuita para
validar el código y, tras la correspondiente validación, generará un informe de
errores y advertencias sobre el código fuente.
Para ello, insertaremos en el campo de texto denominado “Address” la dirección
URL de la página a validar y tras pulsar el botón “check”, nos generará el ante-
riormente mencionado informe. El inconveniente es que las rutas locales no las
detecta, es decir, nuestro HTML de prueba que tenemos guardado en el orde-
nador no lo validará. Para hacer una validación desde esta Web, por fuerza la
Web debe estar alojada en un servidor de internet.
7
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
Para solucionar esto y poder seguir con la lección necesitaremos un navegador
que nos permita instalar un plugin que haga uso de la API de W3C y nos permita
validar el código fuente de la página en construcción.
Para Mozilla Firefox, nos podemos descargar desde la tienda de aplicaciones un
addon en esta URL https://addons.mozilla.org/es/firefox/addon/html-validator/.
Si abrimos esta página desde el propio Mozilla Firefox, presionaremos en “Aña-
dir Plugin” y comenzará la instalación.
En Google Chrome, disponemos de algunos plugins que, sin ser oficiales, usan la
API oficial de W3C. Deberemos abrir la tienda y buscar W3C. Podremos elegir
cualquiera de ellos, teniendo en cuenta la valoración del mismo para saber cuál
se adapta mejor a nuestras necesidades. La forma de usar estos plugins suele
ser por medio de la combinación Alt+Shift+V. Podremos ver el resultado en la
ventana de depuración, dentro de la consola de depuración.
8
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
4. ¿POR QUÉ NOS INTERESA QUE NUESTRA
WEB ESTÉ VALIDADA?
Validar nuestra Web no asegura un mejor posicionamiento en los buscadores,
pero sí es un factor a tener en cuenta dentro de los muchos factores del posi-
cionamiento Web y, además, es el primer paso para que se posicione. También
nos aseguramos de que cualquier persona, sea de donde sea y use el navega-
dor que use, estará viendo correctamente nuestra página Web.
Es muy recomendable que a la hora de hacer nuestra Web hagamos compro-
baciones en los distintos navegadores para asegurarnos que esta se ve bien.
Deberemos también tener en cuenta los diferentes sistemas operativos. Para
ello disponemos de herramientas online que nos permite hacer ese trabajo de
forma automática.
Una buena herramienta para eso es http://browsershots.org/
9
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
5. CÓMO EMPEZAR
Para el primer ejemplo con el que también aprenderemos a usar el plugin ge-
neraremos el siguiente HTML en nuestro ordenador:
<!DOCTYPE html>
<html lang=”es”>
<head><title>Mi primera Web con meta etiquetas</title></head>
</html >
<body>
Este coche es de color rojo. Este coche es de color amarillo <div>
claro </div> mientras que aquel es de color azul.
</body>
</html >
Una vez generado y guardado en un archivo .html lo abriremos con el navega-
dor (después de haber instalado el plugin o la extensión correspondiente). Co-
mo podemos ver el archivo se visualiza sin ningún problema, pero si nos fijamos
en la esquina superior derecha veremos que aparece icono. Ese es el plugin del
HTML validator. Al hacer doble “click” con el ratón, se abre una ventana en la que
veremos los errores encontrados con su explicación.
10
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
En este ejemplo nos aparece unos “warning” o advertencias de que tenemos
algo del código mal. Nos indica la línea y el carácter en donde aparece dicho
error, y al pinchar sobre la línea del error, se nos marcará en el código fuente de
la parte superior dónde está el error.
Por otra parte, en el margen derecho se nos indica porqué dicha línea está
dando un error de HTML.
En este caso, nos indica que la etiqueta </html> no está donde debería estar, ya
que después de ella aparece el cuerpo de la web y la etiqueta </ html > debe ir
la última en la Web.
Hay que tener en cuenta que sobre todo en páginas con programación específica
es muy complicado seguir a rajatabla este estándar. Encontraremos ocasiones en
las cuales el validador nos dé un error o advertencia y no podamos solucionarlo
(pasa en muy pocas ocasiones y suele ser en el uso de plugins externos).
Si por ejemplo abrimos la página Web http://www.masterd.com/ y pasamos el
validador veremos que da un montón de advertencias de código: la mayoría son
solucionables ya que son generadas por errores en la programación, por ejem-
plo, el cerrar dos veces un párrafo </p></p>.
11
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
Mientras que si entramos por ejemplo en http://www.w3.org/ veremos que en
vez de un icono de una admiración aparece un círculo verde y, al hacer doble
clic con el ratón, nos indica que no existe ningún error de HTML y ninguna ad-
vertencia de código.
12
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
¿QUÉ HAS APRENDIDO?
En esta unidad has aprendido a crear y validar páginas webs sin errores HTML
con el fin de hacer páginas amigables para los buscadores, facilitándoles el tra-
bajo de indexación y consiguiendo mejoras de cara al posicionamiento Web.
13
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
AUTOCOMPROBACIÓN
1. ¿Por qué es bueno generar nuestra Web bajo un estándar?
a) Porque es imprescindible para posicionarla.
b) Porque así nos aseguramos que todos vean nuestra Web igual.
c) Porque eso facilita que le guste a la gente.
d) Ninguna de las respuestas anteriores.
2. ¿Qué nos permite validar nuestra Web?
a) Que nos den un certificado de calidad.
b) Que los buscadores nos indexen en primera posición.
c) Que nadie pueda coger información de nuestra Web.
d) Tener una Web más limpia y adaptada para posicionamiento.
3. Para asegurarnos que nuestra Web se ve bien, ¿qué hay que hacer?
a) La cerraremos y volveremos a abrir.
b) La comprobaremos abriéndola en diferentes navegadores.
c) Enviaremos una solicitud de verificación a W3C.
d) Crearemos un sistema de control XML de código.
15
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
4. Para validar nuestro código, ¿qué haremos?
a) Tendremos que ir comprobando línea a línea el código.
b) Usaremos un plugin o Web de validación de W3C.
c) Nunca podremos validarlo del todo.
d) No es aconsejable validar el código.
5. ¿Cuándo saldrán errores de validación?
a) Cuando carguemos o usemos librerías externas.
b) Cuando no esté activa la Web de W3C.
c) Cuando no compilemos nuestro código antes de probarlo.
d) Nunca se generan errores de validación.
16
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
SOLUCIONARIO
1. b 2. d 3. b 4. b 5. a
17
TESTEO Y VALIDACIÓN DE CÓDIGO HTML
BIBLIOGRAFÍA
Iniciación a HTML:
WILLARD, W. HTML: A Beginner's Guide. California: McGraw Hill, 2009.
19
