Validación del código html
0 recomendaciones502 vistas
Este documento describe diferentes métodos para validar el código de una página web, incluyendo el uso de Dreamweaver, el validador del W3C, e instalando un complemento de validación en Firefox. Explica que la validación asegura que el código cumple con los estándares del lenguaje como XHTML. También muestra ejemplos de errores comunes y cómo corregirlos usando estas herramientas de validación.
Validación del código html
- 1. DIRECCION GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA Instituto Tecnológico del Valle de Oaxaca “TIPOS DE VALIDACIONES Y EJEMPLOS” DOCUMENTO QUE PRESENTA: Jorge Ivan López Morales M. T. I Ambrosio Cardoso Jiménez Ing. Tecnologías de la Información y las Comunicaciones Ex-Hacienda de Nazareno, Xoxocotlán, Oaxaca. Marzo de 2014.
- 2. Validación del código de una página web El porqué de la validación: Con estas premisas, parece fácil averiguar la necesidad de la validación: 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 página se vea bien en cualquier dispositivo, y ya será responsabilidad de cada navegador el mostrarla conforme a lo establecido en los estándares del lenguaje. La validación 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 ("Definición del Tipo de Documento"). El concepto de validación es objeto de controversia en el ámbito del diseño web. Por una parte, la validación no es obligatoria y las páginas web se pueden ver bien sin que sean válidas. Por otra parte, una página válida es más correcta que otra página que no lo sea, ya que cumple con las normas y restricciones impuestas por XHTML. A continuación se muestran 3 tipos de validación: Validación con Dreamweaver Si utilizas Dreamweaver para crear las páginas web, el validador se encuentra integrado en la propia herramienta. En primer lugar, accede a la configuración de la herramienta de validación desde la opción Edición > Preferencias > Validador:
- 3. Figura 1.1 Configuración del validador de Dreamweaver En esta ventana de configuración se puede elegir el DTD que se utiliza en caso de que la página web no indique el DTD que utiliza. Las páginas declaran el DTD que utilizan mediante el doctype, tal y como se explicó en capítulos anteriores. Una vez seleccionado el DTD por defecto (en la imagen anterior, se ha elegido el DTD de XHTML 1.0 de transición), se puede acceder a la herramienta de validación de Dreamweaver desde el icono que se muestra en la siguiente imagen: Figura 1.2 Icono que permite acceder a la herramienta de validación de Dreamweaver Si no se han producido errores al validar la página, Dreamweaver lo indica mediante un mensaje que declara a la página como válida. Si se produce algún error, la página no es válida y Dreamweaver muestra la lista de todos los errores encontrados junto con sus posibles soluciones: Figura 1.3 Resultado de validar una página con Dreamweaver
- 4. Después de corregir todos los errores, se puede pasar otra vez la prueba de validación para comprobar que la página cumple con todas las restricciones que impone el tipo de doctype que utiliza. Validador del W3C La validación de las páginas 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 través de Internet: http://validator.w3.org/ Figura 1.4 Página principal del validador del W3C Aunque la herramienta sólo está disponible en inglés, su uso es muy intuitivo: Validate by URI, permite escribir la URL de la página que se quiere validar. Esta opción es la más sencilla para validar las páginas que ya están publicadas en Internet. Validate by File Upload, muestra un formulario mediante el que se puede subir el archivo HTML correspondiente a la página que se quiere validar. Esta opción es la
- 5. mejor para validar las páginas web que has desarrollado y que aún no has publicado en Internet. Validate by Direct Input, permite validar código HTML de forma directa. Se trata de la opción más rápida para validar trozos o páginas HTML completas. Esta opción es la mejor cuando estás desarrollando las páginas y quieres asegurarte que el código sea válido. La siguiente imagen muestra el resultado de la validación de la página principal de Google realizada mediante la opción Validate by URI: Figura 1.5 Resultado de validar una página con el validador de W3C Si la página no pasa correctamente la prueba de validación, 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 página tan sencilla como la portada de Google contiene decenas de errores que impiden considerarla válida. Por lo tanto, la página principal de Google no es una página válida, 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 validación de la página principal de un archivo subido y que brevemente se le realizo la validación mediante la opción Validate by File Upload:
- 6. Figura 1.6 Resultado de validar una archivo con el validador de W3C En este caso se muestra un ejemplo de la validación cuando marcha de manera regular y la validación lo acepta como segura. En este ejemplo se utilizó el template del proyecto. Figura 1.7 Archivo que será subido para su próxima validación. Figura 1.8 Archivo que fue validado y tomado como bueno.
- 7. 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 código es a través de colocar el código fuente directamente en un cuadro que nos indica donde colocarlo. Figura 1.9 Código fuente del mismo ejemplo anterior que será subido para su próxima validación. Figura 1.10 Código fuente del mismo ejemplo en este caso nos toma dos advertencias no muy dañinas en nuestro código pero tenemos que encontrarlas.
- 8. Ejemplos de errores comunes en HTML La siguiente imagen es una captura de algunos de los errores frecuentes al tratar de validar una página en HTML5. Figura 1.11 Tipos de errores comúnmente en una página web. Otros validadores Además de los validadores disponibles en herramientas como Dreamweaver y de los validadores gratuitos disponibles en Internet, existe otro método de validación sencillo, gratuito y muy rápido. La única limitación de este validador es que necesariamente se debe utilizar el navegador Firefox.
- 9. Si ya dispones del navegador Firefox, se puede instalar el validador mediante un complemento llamado HTML Validator. La instalación se realiza como cualquier otro complemento, aunque en este caso la descarga dura un poco más de lo normal porque ocupa más de 2 MB. Tras su instalación, la primera vez que se reinicia Firefox se muestra la siguiente ventana: Figura 1.12 Configuración del validador Html Validator En la ventana que se muestra se solicita al usuario que configure el tipo de validación 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 opción Serial es una buena alternativa, ya que primero realiza la validación SGML Parser y a continuación, si no se han producido errores, realiza la validación HTML Tidy. Una vez configurado el validador, abre cualquier página web y verás cómo en la esquina inferior derecha de Firefox se muestra un pequeño icono que indica si la
- 10. página es válida o no. Cuando la página no es válida, aparece un icono correspondiente a un error. Si colocas el puntero del ratón sobre el icono, se muestra la información específica sobre los errores encontrados: Figura 1.13 Información 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 número de errores de la página, puedes pulsar el botón derecho del ratón sobre el icono del validador y seleccionar la opción Show y después Icon and Text. Después de activar esta opción, cada vez que cargues una página web se muestra toda la información de validación. Aunque existen muchos otros validadores, el uso de Firefox junto con Html Validator es la única alternativa que permite validar las páginas web sin esfuerzo. Abriendo cualquier página en el navegador Firefox, es posible visualizar al instante si la página es válida o no y el número de errores que se han encontrado. FUENTES DE INFORMACIÓN: 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/