Ya sé que existe mucha información en la web acerca de este tema, pero no creo que hayan muchos enfocados a Dreamweaver. Este artículo forma parte de una serie dedicada a promover el uso de estándares al escribir código para tecnología web usando Dreamweaver. Escribo específicamente acerca de DW por varias razones:
- Primero que nada, aunque es la razón menos importante, es el editor que más uso. Digo que es la menos importante ya que el escribir siguiendo los estandares no es algo que tenga que ver con tal o cual editor, lo menciono ya que estaré demostrando como utilizar funciones específicas de DW para lograr estos resultados.
- Como ya he dicho antes, debido a sus capacidades WYSIWYG DW es uno de los editores web mas utilizados por personas sin mucha experiencia escribiendo código. Debido a esto muchos de los usuarios de DW no están familiarizados con estos conceptos. Este es el grupo al cual va dirigido este artículo.
- También debo agregar que, aunque la manera de lograr los resultados que queremos se relacionan con DW, los conceptos generales no se relacionan con ningún editor web.
Voy a empezar con los siguientes consejos:
Valida tu código HTML/CSS
Creo que lo más importante es tener el mayor control posible del código que escribes. Las posibilidades de perder ese control aumenta mientras aumenta el tamaño del proyecto. Es por eso que verificar que el código es valido en todas las etapas del proyecto es importante. Un código válido ayuda a disminuir los problemas de visualización de las páginas. También ayuda a que las páginas se vean de forma más homogénea en todos la mayoría de los navegadores.
DW posee herramientas para hacer validaciones HTML pero siempre he considerado que no son muy buenos. Se puede validar el XHTML usando el comando: File -> Validate -> As XML, pero muchas veces no funciona de forma deseada. Mi recomendación es usar el Validador de la W3C para realizar validaciones (X)HTML y el Validador de CSS para las hojas de estilo. Recomiendo el uso del Webmaster Toolbar para hacer validaciones sin la necesidad de ir a la página de la W3C. También te da la posibilidad de validar documentos en tu servidor local:
El uso del validador también ayuda a fortalecer el conocimiento del HTML y CSS. El validador provee siempre una explicación detallada del problema, por ejemplo:
Si usamos Google Translate para traducir la página podemos ver el problema claramente:
Por último, es bueno tener en cuenta que el validaror es una herramienta. Te ayuda a tener un control de código. Para ser sincero, yo repudio el uso de “hacks” CSS (mayormente aplicados a Internet Explorer 6), pero también pienso que cada programador tiene el derecho a utilizar los recursos necesarios mientras entienda las consecuencias y mientras (de nuevo) tenga control de su código.
Como nombrar los archivos
Esto es algo que tampoco tiene que ver con DW y que también que se ha discutido bastante pero me parece que no está de más mencionarlo aquí debido a las veces que he visto a usuarios de DW tener problemas por a la mala forma de nombrar archivos dentro de un servidor.
Al momento de nombrar cualquier tipo de archivo que será incluido en el servidor (.html, .jpg, .php, .js, etc) es importante tener en cuenta las siguientes consideraciones:
- El nombre del archivo sólo debe poseer caracteres de la a a la z (sin incluir la ñ ni letras con acento), números del 1 al 9, underscore (_) y guiones (-).
- Los nombres deben ser únicos en cada directorio. Esto debería ser algo obvio ya que ningún sistema operativo permite tener dos archivos que se llamen iguales en un directorio, pero también tenemos que tener en cuenta que Windows no puedes usar nombres iguales sin importar mayúsculas mientras que en sistemas operativos tipo UNIX (Linux por ejemplo) sí se permite.
- También es bueno escoger una manera de remplazar los espacios en blancos y usar esta “convensión” siempre. Ejemplos para eso: usar underscore (nombre_archivo.html), usar guión (nombre-archivo.html), usar mayúsculas (algo que es menos usado) (nombreArchivo.html). Yo suelo usar la la segunda opción ya que pienso que es más fácil de leer.
Usar texto alterno (alt) para las imágenes
El uso del atributo alt en las los tags <img /> (imágenes) y <area /> (área) es requerido ya que es necesario proveer un una explicación alterna en casos que las imágenes no pueden ser visualizadas correctamente o si el contendido está siendo visto por alguna persona con algún tipo de impedimento visual.
Al momento de insertar una imagen DW te pide primero que nada que especifiques un texto alterno y, de forma opcional, una descripción más extensa:
Si decides no hacerlo en ese momento sólo necesitas dar clic al botón de cancelar. Siempre podrás agregar o cambiar el Texto ALT si le das clic a la imagen específica y buscas en el Panel de Propiedades el campo Alt:
Usar Labels correctamente en los formularios
Los label son básicamente etiquetas que se asignan a los inputs (text, checkboxes, radio boxes, etc), textarea y select menus. Su propósito es describir el uso del campo, por ejemplo, en este caso el label del campo “name” es “Name” (Imagen sacada de los ejemplos de dialog de jQueryUI):
Parecería obvio el hecho de que se deben proveer instrucciones específicas para el usuario al momento de llenar una formulario, pero si tomamos en cuenta la manera como los elementos están organizados en la página (page flow) muchas veces la relación label/campo no es tan evidente. Esto es un problema mayor si el usuario posee un impedimento visual. Es por eso que es importante hacer que esta relación sea lo más clara posible.
Hay dos formas de crear esta relación:
- Meter el campo dentro del elemento label:
<label>Nombre <input id="nombre" name="nombre" type="text" /> </label>
- Igualar el valor del atributo for del label al iddel campo.
<label for="nombre">Nombre</label> <input type="text" name="nombre" id="nombre" />
Ambas prácticas son perfectamente válidas aunque, según mi experiencia, en la mayoría de los casos se usa la segunda opción ya que es mucho más flexible. DW provee la funcionalidad para utilizar ambos métodos. Si estás en vista de diseño y le das al botón de agregar un campo de formulario DW pregunta primero si vas a utilizar un label con el campo:
Las opciones son:
- ID: el id del campo que vas a crear, por ejemplo: nombre (los id en html tienen que ser únicos en cada página. Se siguen las normas de nombrar un archivo pero además sólo se puede empezar con una letra).
- Label: El label (etiqueta) del campo, por ejemplo: Favor de especificar su nombre.
- Estilo (Style): Aquí escogeremos uno de los métodos explicados anteriormente : 1-usar el atributo for y 2-incluir el campo dentro del label o 3-optar no usar label.
- Posición (Position): Indica la posición del label: 1-antes del campo o 2-después del campo.
