HTML5.- Validación de páginas en WebMatrix


Hi! ^-^ geeks,

El día de hoy luego de aprender un poco de HTML5 y CSS3 ahora vamos a aprender a validar nuestras páginas. Pero antes…..

 

Porque es importante validar nuestras páginas?

La validación se presenta por adoptar un estándar en nuestro caso es dado por W3C (World Wide Web Consortium) que pasa a ser el ente regulatorio. Esto es importante debido que sin pruebas de validación, la implementación consistente de estándares representa un mayor desafío y resulta más difícil para los desarrolladores del sitio confiar en estas.

Gracias a Markup Validation Service del W3C por hacer posible indicar cuando es un documento HTML5 a través de un simple Doctype (revisar primer post), al momento de realizar la validación de una página Web esta comprueba que es un documento HTML5 y verifica si el mismo cumple con dichos estándares.

Para validar tus sitios en base a HTML5 solo debes ingresar a:

Markup Validation Service

W3C Validator HTML5

Luego de esto solo deben de dar clic en Address para indicar la URL de la página a validar y le damos clic en Check para iniciar con dicho proceso. En un instante tendremos el listado y detalle de errores y alertas, en caso que el validador detectara alguno.

W3C Error Validator HTML5

W3C Validator HTML5 List Error

Si bien nos podemos dar cuenta esta herramienta resulta ser de gran utilidad para quienes están comenzado a realizar desarrollos en HTML5 y desean verificar errores en las páginas.

Del mismo modo si deseamos validar CSS3 debemos ingresar a:

CSS Validation Service

W3C Validator CSS3

En el caso del validador de CSS3 no olvidar entrar en Más opciones y cambiar el perfil de validación.

W3C Validator CSS3 Varias Opciones

W3C Validator CSS3 OK

Luego de realizar las respectivas validaciones una buena practica es enlazar la validación con nuestro sitio empleando un icono del consorcio.

Icons W3C (CSS3-HTML5)

Para esto les comparto el siguiente pedacito de código que tendremos que añadir en nuestros proyecto por lo general se acostumbra ubicarlos al final dentro de la etiqueta footer (revisar primer post):

Code Icons W3C (CSS3 - HTML5)

Ahora vamos a explicar un poco lo que hemos hecho aquí.

En el archivo CSS3.html ahora hemos incluido:

  • Líneas 19 – 23
    • En este bloque tenemos la incrustación del logo de CSS3 direccionando al sitio que demuestra que estamos cumpliendo con el estándar.
  • Líneas 25 – 27
    • En este bloque tenemos la incrustación del logo de HTML5 direccionando al sitio que demuestra que estamos cumpliendo con el estándar.
  • Líneas 19 y 25 <a href=”……”>
    • Dentro de las comillas dobles de la etiquetas colocamos las respectivas URLs que nos muestra nuestro código ya validado.

El código lo pueden encontrar a aquí los archivos son estilos.css y CSS3.html

Eso es todo por hoy muchach@s recuerden que puedes realizar sus consultas en formspring o déjanos tu comentario Wink

Mail: peter.conchar@fcmf.ug.edu.ec

No olvides seguir en twitter a:

@PeterConchaR

@Avanet

@SoreyGarcia

para estar al día con las entradas en este blog. 

Anuncios