Opciones

Search:

Home

HTML-Kit

Actualizado el 14-01-2007
versión para imprimir

Tidy

HTML-Kit nació como una interfaz gráfica para html tidy, que es un analizador sintáctico de archivos html.

Tidy puede analizar y corregir tus páginas html, sugiriendote la forma correcta. También puede utilizarse para eliminar código defectuoso o no standard, o incluso para transformar la página a xhtml o css.

Por ejemplo, una de las posibilidades mas interesantes es la de limpiar el código html generado por word y otros programas de microsoft (sobradamente conocidos por utilizar una ingente cantidad de código no standard). Para ello, desde el programa de microsoft que estes usando, graba tu documento como html. Abrelo de nuevo en HTML-kit y escoge (en el menu que aparece dandole a la flecha junto al icono de tidy) Strip surplus tags in Word 2000 pages.

En general, para analizar tu página, si la tienes en la ventana del editor, pulsa el icono de tidy (o F9)

Verás que la ventana del editor se divide en dos y que se llena la ventana de mensajes.
El panel de la izquierda es tu código original, intocado. El panel de la derecha (output) es el código propuesto por tidy, chequeado, indentado y corregido.

Aunque tidy es una herramienta excelente, no puedes esperar que el código de salida sea exactamente lo que estabas buscando, asi que antes de darlo por bueno, debes compararlo con tu código original.

Puedes visualizar la página que resultaría del código de salida haciendo click en la pestaña de output (para asegurar que tiene el foco) y despues preview. Si luego quieres visualizar de nuevo tu codigo original, haz click en la pestaña editor y luego de nuevo a preview.

Una vez te hayas asegurado de que el resultado te satisface, puedes hacer click con el botón secundario del ratón en la ventana de output y escoger la opción copiar resultado al editor que reemplaza tu codigo original con la salida de tidy.

Problemas con tidy

¿ Al ejecutar tidy la ventana de salida permanece en blanco ?

Esto significa que tidy ha encontrado un error en el código que no ha sabido arreglar. Fijate en la ventana de mensajes y busca los que tienen el icono rojo de error. Haciendo click en ellos el cursor se desplazará a la linea correspondiente. Debes fijar estos errores a mano, y ejecutar tidy de nuevo.

Tidy está pensado para analizar páginas html/xhtml. si tu página incluye código javascript, repasalo con cuidado ya que suele ser fuente de conflictos. Si lo que quieres es analizar una página que incluye scripts de servidor (asp, php) la mejor opción es ejecutar tidy no sobre el archivo, sino sobre la página resultante. La forma mas rápida para hacerlo es abrir la url en el editor y ejecutar tidy sobre el código final.

Tidy está diseñado como analizador sintactico. No puedes utilizarlo (al menos por ahora) como simple indentador de código.

preferencias

Las preferencias de tidy se guardan en un archivo de texto (en el directorio HTML-Kit\Data\Default con la extensión .htc) y en el registro de windows, HKEY_CURRENT_USER\Software\Chami\HTML-Kit\1.0\Settings .

Puedes decidir que mensajes quieres que te muestre tidy desde Editar | Preferences | Tidy | Display selected warnings only, o mas rápidamente, haciendo click con el botón secundario del ratón sobre la ventana de mensajes, en el tipo de mensajes que deseas suprimir, y haciendo clcik en la opción hide

Al cambiar las preferencias de tidy puedes hacer click en OK para incorporarlas a la configuración por defecto, o puedes generar unas preferencias alternativas, haciendo click en Save Config y proporcionando un nombre para esta configuración alternativa,

Para invocarlas, ejecuta tidy desde Tools | Tidy | Run tidy with custom config file ....

Si tidy advierte sobre etiquetas que son correctas, puedes forzar que las ignore incluyendolas como nuevas etiquetas en el cuadro de preferencias. Asegurate de introducir estas nuevas etiquetas sin comillas y los signos < >

Preferencias en detalle

Dentro del apartado switches puedes afinar la ejecución de tidy.

Adding XML declaration to XML/XHTML output: Si está chequeada, Tidy añadirá la declaración de documento XML en su salida. Si el documento ya contiene su propia declaración XML, esta opción se ignora.
Add XML proccessing instructions: lo mismo que la anterior.
Add xml:space="preserve" Tidy conservará los espacios en blanco que encuentre dentro de elementos como PRE, STYLE o SCRIPT
Allow numeric character references: Tidy empleará entidades numéricas (excepto &, <, > y ") en lugar de entidades de nombre: por ejemplo, ñ en lugar de ñ
Always output BOM: Especifica si Tidy debe incluir un Unicode Byte Order Mark character (opcional solo para documentos UTF-8 y UTF-16. BOM siempre es incluido si se trata de salida XML/XHTML con documentos UTF-16). NOTA: Para facilitar una interpretación correcta, se recomienda que los documentos transmitidos como UTF-16 empiecen siempre con un carácter de ESPACIO NO SEPARABLE DE ANCHURA ZERO (ZERO-WIDTH NON-BREAKING SPACE, hexadecimal FEFF, también llamado Byte Order Mark, BOM) que, al invertirse los bytes, se convierte en el hexadecimal FFFE, un carácter que nunca será asignado. De este modo, un agente de usuario que reciba un hexadecimal FFFE como los primeros bytes de un texto sabrá que los bytes deben ser invertidos para el resto del texto.
Assume XML proccessing instructions: Si tidy debe o no procesar el documento como XML. Esta opción es automática si se especifica XML como formato del documento de entrada.
Check Accesibility priority 1(2, 3): varias comprobaciones sobre el niven de accesibilidad del documento para personas descapacitadas.
Combine Class names: Si Tidy detecta que un elemento HTML emplea varias clases de estilo, combinará todas en una nueva clase.
Combine styles: Si Tidy detecta que un elemento HTML usa varias declaraciones de estilo, las combinará en una sola declaración.
Convert " marks to ": Si Tidy debe reemplazar " con ". La comilla simple ' se reemplaza por ' ya que el uso de ' no está soportado por algunos navegadores.
Convert CDATA to normal text: Si tidy debe convertir en texto normal el contenido de secciones <![CDATA[]]>.
Convert ampersands to &: Si debe convertir & en &.
Convert attributes to uppercase: Si debe mostrar los nombres de atributo en mayúscula.
Convert backslashes in URLs: Reemplaza dentro de las URLS las barras invertidas "\" por "/".
Convert HEX color values in names: reemplaza valores númericos por el nombre del color; por ejemplo, "#ffffff" con "white".
Convert I and B tags in EM and STRONG: Si deben reemplazarse las etiquetas físicas por sus equivalentes lógicos, es decir, por y por . Si tienen atributos, se pasan sin cambios a la nueva etiqueta.
Convert to non-breaking spaces to entities: Si los espacios irrompibles deben mostrarse como entidades ( ) o con su valor unicode  .
Convert predefinied values to lowercase: Atributos con valores predefinidos en minuscula (necesario en XHTML).
Convert Tags to Uppercase: Etiquetas HTML en mayusculas
Discard empty paragraphs: Tidy puede eliminar párrafos vacios . Si la opción es no eliminarlos, los sustituirá por dos saltos de linea BR.
Do no converts characters > 127 to entities: No pasar los caracteres ascii superiores a la posición 127 a entidades html.
Drop font tags: Eliminará etiquetas y <CENTER> (necesita tener tambien marcada la opcion clean).
Enclose block text with P tags: Tidy podrá encerrar entre signos de párrafo P cualquier texto dentro de un elemento HTML que admita esta posibilidad.
Enclose text in the body: Espedifica si Tidy debe rodear cualquier texto que encuentre en el cuerpo de la página (que no este a su vez rodeado por una etiqueta) con etiquetas de párrafo P.
Fix illegal chars in the URI per HTML 4.0: Tidy comprobará que los atributos en las URLS no lleven caracteres ilegales y si los encuentra los escapará siguiendo la recomendación HTML 4.0 (por ejemplo & por &).
Hide comments: Si tidy debe mostrar comentarios
indent CDATA sections: Si debe indentarse texto dentro de una sección <![CDATA[]]>.
indent attributes: Si esta chequeado, Tidy pasará cada atributo de un elemento HTML a una nueva linea.
indent content: Si debe indentar el contenido de la pagina.
insert newline before BR: Si debe incluirse una nueva linea antes de cada .
keep the last attribute: Si esta marcado, y Tidy encuentra atributos duplicados en una etiqueta, conservará el ultimo.
literal attributes: Si está marcado, Tidy conservará los espacios en blanco contenidos dentro de valores de atributo.
output only the body contentTidy analizará y mostrará solo el contenido entre las etuiquetas BODY.
output spaces in word 2000 pages: Si en documentos generados por word tidy debe mostrar espacios en blanco en lugar de  .
output unfixed markups (ignore errors) mostrar la salida con errores no fijados.
remove propietary attributes: Tidy puede eliminar atributos html no standards
replace quotes and dashes in word pages
replace unexpected hyphens in comments: Reemplaza guiones - innecesarios dentro de comentarios html por el signo =
run in quiet mode: En quiet mode puedes eliminar algunos de los mensajes de bienvenida o de caracter informativo de Tidy.
set "generator" metatag to html-tidy: Se incluye una etiqueta META GENERATOR indicando que la página ha sido editada con html-tidy.
show warnings: Mostrar advertencias. No mostrar advertencias puede ser util si en una pagina tenemos unos pocos errores sepultados entre cientos de advertencias.
smart indent: Tidy puede decidir si indentar ciertos elementos HTML como TITLE, H1-H6, LI, TD, TD, o P, dependiendo de su contenido.
strip surplus tags in word 2000 pages: Tidy intentará eliminar todo el código html basura generado por word cuando guarda archivos como html.
supress optional end tags: Tidy puede completar o omitir etiquetas finales opcionales.
upgrade to style sheets: Tidy puede eliminar etiquetas html y sustituirlas por reglas de estilo.
use numeric entities: Si debe usar nombres de entidades o entidades numéricas (excepción de &, <, > ").
wrap attribute values: Tidy puede ajustar al ancho de linea disponible los valores de atributo.
wrap lines within ASP pseudo elements: Si Tidy debe ajustar al ancho de linea disponible texto que contenga instrucciones ASP
wrap lines within JSTE pseudo elements: Idem con código JSTE
wrap lines within PHP pseudo elements: Idem con código PHP
wrap script strings literals: Si Tidy debe ajustar al ancho de linea disponible cadenas de texto que aparezcan dentro de un script.
wrap within <![..]> section tags: Si Tidy debe ajustar el ancho de linea para el texto dentro de secciones CDATA.

Ejemplo práctico

Abriendo en html-kit la página de un conocido periodico (documento html de unas 3.500 líneas) y ejecutando tidy, no ofrece ninguna salida. Esto quiere decir que hay un error grave de html que tidy no puede solventar y que hay que corregir a mano.

Mirando en la ventana de mensajes nos informamos que hay 691 advertencias y 8 errores. No es tan grave como parece. Las advertencias muchas veces se refieren a fallos mas o menos tolerables o admisibles (etiqueta IMG sin atributo ALT alternativo, por ejemplo). Para centrarnos en los errores, vamos a editar | preferences | tidy | warnings y cambiamos a display: none. Ahora solo vemos los errores.

Haciendo scroll sobre la ventana de mensajes vemos el primer error: discarding unexpected </a>.

Click sobre el error nos lleva a la linea exacta donde esta el fallo. Rápidamente vemos el problema. Hay una etiqueta de enlace rodeando una tabla con una imagen ... Lo corregimos metiendo el enlace dentro de la tabla. Nos encontramos un par de etiquetas de cierre seguidas </a></a>, y finalmente, lo que es mas grave, tres o cuatro FORM mezclados de mala manera con varias tablas html. Solucionados estos errores, tidy se ejecuta correctamente.