DIRECCION GENERAL DE EDUCACIN SUPERIOR TECNOLGICA

Instituto Tecnolgico del Valle de Oaxaca

TIPOS DE VALIDACIONES Y EJEMPLOS

DOCUMENTO QUE PRESENTA:

Jorge Ivan Lpez Morales

M. T. I Ambrosio Cardoso Jimnez

Ing. Tecnologas de la Informacin y las Comunicaciones

Ex-Hacienda de Nazareno, Xoxocotln, Oaxaca. Marzo de 2014.

Validacin del cdigo de una pgina web

El porqu de la validacin: Con estas premisas, parece fcil averiguar la necesidad de la validacin: si conseguimos implementar a rajatabla las directrices del World Wide Web Consortium (W3C) acerca del lenguaje, habremos hecho todo lo que est en nuestra mano para que la pgina se vea bien en cualquier dispositivo, y ya ser responsabilidad de cada navegador el mostrarla conforme a lo establecido en los estndares del lenguaje. La validacin es el proceso que asegura que un documento escrito en un determinado lenguaje (por ejemplo XHTML) cumple con las normas y restricciones de ese lenguaje. Las normas y restricciones de los documentos escritos en XML (y en sus lenguajes derivados, como XHTML) se definen en el DTD o Document Type Definition ("Definicin del Tipo de Documento"). El concepto de validacin es objeto de controversia en el mbito del diseo web. Por una parte, la validacin no es obligatoria y las pginas web se pueden ver bien sin que sean vlidas. Por otra parte, una pgina vlida es ms correcta que otra pgina que no lo sea, ya que cumple con las normas y restricciones impuestas por XHTML. A continuacin se muestran 3 tipos de validacin:

Validacin con Dreamweaver

Si utilizas Dreamweaver para crear las pginas web, el validador se encuentra integrado en la propia herramienta. En primer lugar, accede a la configuracin de la herramienta de validacin desde la opcin Edicin > Preferencias > Validador:

Figura 1.1 Configuracin del validador de Dreamweaver En esta ventana de configuracin se puede elegir el DTD que se utiliza en caso de que la pgina web no indique el DTD que utiliza. Las pginas declaran el DTD que utilizan mediante el doctype, tal y como se explic en captulos anteriores. Una vez seleccionado el DTD por defecto (en la imagen anterior, se ha elegido el DTD de XHTML 1.0 de transicin), se puede acceder a la herramienta de validacin de Dreamweaver desde el icono que se muestra en la siguiente imagen:

Figura 1.2 Icono que permite acceder a la herramienta de validacin de Dreamweaver Si no se han producido errores al validar la pgina, Dreamweaver lo indica mediante un mensaje que declara a la pgina como vlida. Si se produce algn error, la pgina no es vlida y Dreamweaver muestra la lista de todos los errores encontrados junto con sus posibles soluciones:

Figura 1.3 Resultado de validar una pgina con Dreamweaver

Despus de corregir todos los errores, se puede pasar otra vez la prueba de validacin para comprobar que la pgina cumple con todas las restricciones que impone el tipo de doctype que utiliza.

Validador del W3C

La validacin de las pginas web no requiere el uso de editores avanzados como Dreamweaver, ya que el organismo W3C ha creado una herramienta que se puede utilizar gratuitamente a travs de Internet: http://validator.w3.org/

Figura 1.4 Pgina principal del validador del W3C Aunque la herramienta slo est disponible en ingls, su uso es muy intuitivo:

Validate by URI, permite escribir la URL de la pgina que se quiere validar. Esta
opcin es la ms sencilla para validar las pginas que ya estn publicadas en Internet.

Validate by File Upload, muestra un formulario mediante el que se puede subir

el archivo HTML correspondiente a la pgina que se quiere validar. Esta opcin es la

mejor para validar las pginas web que has desarrollado y que an no has publicado en Internet.

Validate by Direct Input, permite validar cdigo HTML de forma directa. Se

trata de la opcin ms rpida para validar trozos o pginas HTML completas. Esta opcin es la mejor cuando ests desarrollando las pginas y quieres asegurarte que el cdigo sea vlido.

La siguiente imagen muestra el resultado de la validacin de la pgina principal de Google realizada mediante la opcin Validate by URI:

Figura 1.5 Resultado de validar una pgina con el validador de W3C Si la pgina no pasa correctamente la prueba de validacin, se muestra el listado completo de fallos junto con la ayuda necesaria para resolver cada uno de los errores. Como se observa en la imagen anterior, incluso una pgina tan sencilla como la portada de Google contiene decenas de errores que impiden considerarla vlida. Por lo tanto, la pgina principal de Google no es una pgina vlida, aunque eso no impide que se vea bien en todos los navegadores y que los usuarios la consideren correcta. La siguiente imagen muestra el resultado de la validacin de la pgina principal de un archivo subido y que brevemente se le realizo la validacin mediante la opcin Validate by File Upload:

Figura 1.6 Resultado de validar una archivo con el validador de W3C En este caso se muestra un ejemplo de la validacin cuando marcha de manera regular y la validacin lo acepta como segura. En este ejemplo se utiliz el template del proyecto.

Figura 1.7 Archivo que ser subido para su prxima validacin.

Figura 1.8 Archivo que fue validado y tomado como bueno.

Este archivo que fue cargado y validado nos muestra que tenemos una advertencia pero por no ser de mayor importancia lo toma como buena tal vez tenga un comentario mal cerrado, un signo cerrado o abierto de manera que no coincide. La otra manera de validar nuestro cdigo es a travs de colocar el cdigo fuente directamente en un cuadro que nos indica donde colocarlo.

Figura 1.9 Cdigo fuente del mismo ejemplo anterior que ser subido para su prxima validacin.

Figura 1.10 Cdigo fuente del mismo ejemplo en este caso nos toma dos advertencias no muy dainas en nuestro cdigo pero tenemos que encontrarlas.

Ejemplos de errores comunes en HTML

La siguiente imagen es una captura de algunos de los errores frecuentes al tratar de validar una pgina en HTML5.

Figura 1.11 Tipos de errores comnmente en una pgina web.

Otros validadores
Adems de los validadores disponibles en herramientas como Dreamweaver y de los validadores gratuitos disponibles en Internet, existe otro mtodo de validacin sencillo, gratuito y muy rpido. La nica limitacin de este validador es que necesariamente se debe utilizar el navegador Firefox.

Si ya dispones del navegador Firefox, se puede instalar el validador mediante un complemento llamado HTML Validator. La instalacin se realiza como cualquier otro complemento, aunque en este caso la descarga dura un poco ms de lo normal porque ocupa ms de 2 MB. Tras su instalacin, la primera vez que se reinicia Firefox se muestra la siguiente ventana:

Figura 1.12 Configuracin del validador Html Validator En la ventana que se muestra se solicita al usuario que configure el tipo de validacin que se va a realizar. Las opciones para elegir son: HTML Tidy (que ofrece ayuda para resolver los errores y es mejor para HTML), SGML Parser (ofrece menos ayuda, pero es el mismo que el validador del W3C) o Serial (que realiza las dos validaciones de forma seguida). Si no sabes cual elegir, la opcin Serial es una buena alternativa, ya que primero realiza la validacin SGML Parser y a continuacin, si no se han producido errores, realiza la validacin HTML Tidy. Una vez configurado el validador, abre cualquier pgina web y vers cmo en la esquina inferior derecha de Firefox se muestra un pequeo icono que indica si la

pgina es vlida o no. Cuando la pgina no es vlida, aparece un icono correspondiente a un error. Si colocas el puntero del ratn sobre el icono, se muestra la informacin especfica sobre los errores encontrados:

Figura 1.13 Informacin de error proporcionada por el validador Html Validator Si pulsas dos veces sobre el icono, aparece una nueva ventana en la que se muestra la lista completa de errores, el lugar exacto en el que se han producido y las posibles soluciones para corregirlos. Para ver directamente el nmero de errores de la pgina, puedes pulsar el botn derecho del ratn sobre el icono del validador y seleccionar la opcin Show y despus Icon and Text. Despus de activar esta opcin, cada vez que cargues una pgina web se muestra toda la informacin de validacin. Aunque existen muchos otros validadores, el uso de Firefox junto con Html Validator es la nica alternativa que permite validar las pginas web sin esfuerzo. Abriendo cualquier pgina en el navegador Firefox, es posible visualizar al instante si la pgina es vlida o no y el nmero de errores que se han encontrado. FUENTES DE INFORMACIN: http://norfipc.com/web/como-validar-comprobar-codigo-html-css-paginas-web.php http://librosweb.es/xhtml/ http://blogandweb.com/html/validar-tu-pagina-html-en-el-3wc/

http://librosweb.es/xhtml/capitulo_13.html