Validar nuestro código en DreamWeaver

dreamweaver
Crear un album de fotos con DreamWeaver
25 diciembre, 2014
dreamweaver
Uso del refresh en DreamWeaver
25 diciembre, 2014

Validar nuestro código en DreamWeaver

dreamweaver

Poniendo a tono nuestro programa

Simplemente abra Dreamweaver MX 2004 y seleccione en el menú Edición » Preferencias (PC: Ctrl+U, MAC: Cmd+U).

Seleccione la opción Accesibilidad de la lista Categoría (imagen 1) y marque las 4 casillas de verificación: Objetos de formulario, Marcos, Media, Imágenes.

Imagen 1: Categoría Accesibilidad en Preferencias.

¿Qué pasa cuando usted inserta uno de estos elementos?, un cuadro de dialogo sera desplegado, en estos cuadros de dialogo usted debe insertar información referente al elemento, como por ejemplo el atributo alt y longdesc en el elemento img, estos cuadros de dialogo literalmente le obligan a insertar los valores requeridos para los atributos en los documentos XHTML. Simplemente no presione el botón de Cancelar, de otra manera usted deberá codificar a mano la información, también puede optar por eliminar el elemento y volver a comenzar. Esto último no es muy gracioso y también implica un gran tiempo consumido.

Ahora le especificaremos la manera en que Dreamweaver deberá formatear nuestro código.

Seleccione Formato de código de la lista Categoría (imagen 2), y en el panel, seleccione <minúscula> en la opción May/min de etiqueta predeterminada. Finalmente, seleccione minúscula=”valor” en la opción May/min de atributo predeterminado. Para el centrado, seleccione el botón de opción Etiqueta DIV.

Imagen 2: Categoría Formato de Código en Preferencias.

Hemos seleccionado <minúscula> en la opción May/min de etiqueta predeterminada porque XHTML no permite etiquetas en mayúsculas. La misma regla se aplica para el caso de los atributos. Si usted desea saber que pasa si usted usa etiquetas y atributos en mayúsculas para documentos cuyo tipo es el XHTML, cree una página con etiquetas y atributos en mayúsculas y trate de validarla en http://validator.w3.org/. Usted obtendrá los errores.

Además, no olvide seleccionar la casilla de verificacion Hacer el documento compatible con XHTML, con esto haremos que Dreamweaver use automáticamente documentos de tipo XHTML si nosotros creamos un nuevo documento, para ello deberemos seleccionar Nuevo documento de la lista Categoría, además en el panel resultado (imagen 3), seleccione Europeo Occidental en la opción Codificación pred.

Imagen 3: Categoría Nuevo Documento en Preferencias

Ahora, cuando usted cree un nuevo documento en Dreamweaver, usted verá algunos cambios (Vista Código), el mayor de ellos es el tipo de documento:

XHTML 1.0 de transición

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Los otros 2 tipos de documentos disponibles para usar en XHTML 1.0 son:

XHTML 1.0 Estricto

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Conjunto de marcos XHTML 1.0

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Si usted desea usar en sus tipos de documento el XHTML estricto en vez de XHTML en transición, simplemente cambie el fichero Default.html ubicado en C:/Archivos de Programa/Macromedia/Dreamweaver MX 2004/Configuration/Templates/.

Usted posiblemente habrá notado que Dreamweaver aún utiliza las etiquetas <b> y <i> para enfatizar el texto, estas etiquetas no conducen a una semántica correcta en nuestro código. Si usted desea escribir código XHTML válido, usted debe usar las etiquetas <strong> y <em>. Vamos a configurar Dreamweaver para tal efecto inmediatamente.

Seleccione General en la lista Categoría (imagen 4), y debajo de Opciones de edición, asegurese que la opción Utilizar <strong> y <em> en lugar de <b> y <i> este marcada.

Imagen 4: Categoría General en Preferencias.

Finalmente, la última cosa en nuestra lista, es configurar las capacidades de nuestro Validador en Dreamweaver, seleccione Validador en la lista Categoría (imagen 5), y marque la opción XHTML 1.0 de transición.

Imagen 5: Categoría Validador en Preferencias.

Ahora Dreamweaver esta configurado!, iremos más profundo y haremos algo de hacking.

Doctypes y Charsets

Dreamweaver realiza un buen trabajo generando el código para documentos XHTML.

<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html > <head>   <meta http-equiv="Content-Type"    content="text/html; charset=iso-8859-1" />   <title>Untitled Document</title> </head> <body> </body> </html>

Sin embargo, todavía existen algunos errores, y los espacios de nombres (name space) están incompletos. Esto no es un gran problema, resolveremos todo esto inmediatamente.

Ubique el fichero denominado Default.html en su disco duro. Si usted posee un sistema operativo Windows, este fichero se localiza en C:/Archivos de Programa/Macromedia/Dreamweaver MX 2004/Configuration/Templates. Si usted está usando Macintosh, usted puede encontrar encontrar el fichero en Macintosh HD > Applications > Macromedia Dreamweaver MX 2004 > Configuration > Templates.

Realice un respaldo de este fichero (SIEMPRE realice respaldos si usted edita cualquier fichero de configuración principal de Dreamweaver), llame a este fichero algo como Default.html.bak

Abra el fichero Default.html en Notepad (o SimpleText para usuarios Macintosh), e ingrese el siguiente código:

<?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html   xml:lang="es" lang="es"> <head>    <title>Documento sin Título</title>    <meta http-equiv="Content-Type"     content="text/html; charset=iso-8859-1" />    <meta http-equiv="Content-Language" content="es-ES" /> </head>  <body> </body>  <html>

Note que en este ejemplo, la declaración XML está incluida. Los autores de documentos XHTML recomiendan usar encarecidamente declaraciones XML en todos sus documentos. Sin embargo, una declaración XML como la mostrada arriba no es requerida en todos los documentos XML, de hecho, algunos navegadores (Agentes de Usuario) fallan cuando confrontan una declaración XML.

Mientras usted se encuentre modificando este fichero, podrá agregar vínculos hacia cualquier hoja de estilo en cascada (CSS), insertar etiquetas meta básicas que usted siempre vaya a usar en todo nuevo documento que cree.

NOTA: Si usted siente la necesidad de profundizar el tema del por qué usar ISO-8859-1, le recomiendo leer el artículo ISO-8859-1, de Wikipedia, la enciclopedia libre.

Guarde el fichero Default.html, y cierrelo.

Un último consejo

Después que usted haya completado las distintas operaciones, cree un nuevo documento que use todos estos elementos a los que se han hecho referencia en el artículo, y haga su propia revisión del código. Además corra el validador para asegurar que su código es válido. Después de todo este esfuerzo, la última cosa que usted desee hacer será crear páginas con código inválido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *