Accesibilidad

Artículo Dreamweaver

Mark Fletcher
Mark Fletcher
www.vtc.com*

La edición de código con Dreamweaver MX

Macromedia siempre ha estado consciente de que los desarrolladores pasan cierta cantidad de tiempo desarrollando código manualmente. Sus herramientas toman en cuenta la manera en que se crea el código e incorporan tecnologías tales como la edición roundtrip (la capacidad de trasladarse entre un editor de HTML basado en texto y Macromedia Dreamweaver MX sin afectar mayormente el contenido ni la estructura del documento fuente) para mejorar el flujo de trabajo.

Mientras que Dreamweaver 4 disponía solamente de características básicas de edición de código, Dreamweaver MX ahora aumenta esa capacidad aún más con un entorno de desarrollo de edición de código completo que se asemeja al de Macromedia HomeSite y ColdFusion Studio. Ahora, Dreamweaver MX ha añadido colores a la sintaxis de código, Sugerencias para el código, el Selector de etiquetas y más, lo cual hacen de Dreamweaver MX un producto mucho más atractivo que antes para los desarrolladores que prefieren crear código manualmente.

En este artículo explicaré cómo los puristas de la creación de código manual pueden trabajar cómodamente en Dreamweaver MX.

Trabajar en el espacio de trabajo HomeSite/Estilo de codificador

La primera vez que abre Dreamweaver MX (esto corresponde a Windows solamente), se le da la oportunidad de seleccionar entre tres tipos diferentes de espacios de trabajo. Si selecciona la opción HomeSite/Estilo de codificador, por ejemplo, se mostrará una vista preliminar de cómo aparece en pantalla ese espacio de trabajo; lo he resaltado con borde rojo a continuación:

Seleccionar esta opción convierte a Dreamweaver MX en un espacio de trabajo que tanto los desarrolladores de HomeSite como los de ColdFusion Studio conocen. Siempre podrá cambiar al espacio de trabajo de estilo de codificador en cualquier momento. Para cambiar el espacio de trabajo de Dreamweaver MX:

  1. Elija Editar > Preferencias.
  2. Seleccione la categoría General.
  3. Haga clic en el botón Cambiar espacio de trabajo.
  4. Seleccione las opciones siguientes: Espacio de trabajo de Dreamweaver MX o HomeSite/Estilo de codificador.
  5. Haga clic en el botón Aceptar.
  6. Vuelva a iniciar Dreamweaver MX.

Obtener sugerencias para el código

Las Sugerencias para el código de Dreamweaver ofrecen una manera rápida y libre de errores de escribir y editar el código. Tanto en la vista de Código como en el Inspector de código, las sugerencias analizan lo que uno escribe y automáticamente muestran un menú de etiquetas, atributos, parámetros de función o métodos de objeto pertinentes. Las Sugerencias para el código son compatibles con HTML, CFML, ASP, ASP.NET, JSP, PHP, ActionScript y WML. Son completamente personalizables y ampliables para utilizar con etiquetas y objetos personalizados. Las etiquetas que aparecen las determina el tipo de documento que se ha elegido crear. Para insertar una etiqueta utilizando las Sugerencias para el código:

  1. Escriba un paréntesis de apertura (<) para mostrar una lista de etiquetas.
  2. Desplácese por la lista y haga doble clic en una etiqueta para insertarla.
  3. Si la etiqueta admite atributos, presione la barra espaciadora para mostrar una lista de atributos válidos. Seleccione un atributo y presione Intro.
  4. Escriba el valor del atributo; si el atributo admite sólo ciertos valores, seleccione un valor de la lista de valores permitidos.

Ahora podrá seguir añadiendo más atributos y valores repitiendo los pasos 3 y 4. Asegúrese de no escribir un espacio entre el valor y las comillas ("). Presione Esc para cerrar la lista. Para editar una etiqueta:

Utilice las Sugerencias para el código para editar una etiqueta existente en la vista de Código colocando el punto de inserción a la izquierda del paréntesis de cierre de la etiqueta y presionando la barra espaciadora. Esto mostrará una lista de los atributos admitidos por la etiqueta. Para añadir estilo usando las Sugerencias para el código y las clases CSS:

  1. Comience por añadir los estilos personalizados que desee a una hoja de estilo externa o añádalos a la sección HEAD de su página web.
  2. Después de haber insertado la primera parte de la etiqueta (la etiqueta de párrafo, por ejemplo), presione la barra espaciadora y en el menú seleccione Clase.
  3. Presione Intro (o Retorno) para mostrar todas las clases que ha creado anteriormente, como se muestra a continuación:
  4. Cuando haya seleccionado la clase que desea, simplemente presione Intro (o Retorno).

Equilibrar las etiquetas y los paréntesis

Dreamweaver dispone de una maravillosa manera de verificar que las etiquetas estén equilibradas (es decir, que tengan las correspondientes etiquetas de apertura y cierre) por medio de dos comandos: Seleccionar etiqueta padre y Seleccionar etiqueta hijo. Estos comandos son útiles al trabajar con varios niveles, como por ejemplo un esquema de disposición de tabla anidada. Para seleccionar una etiqueta padre:

  1. Coloque el punto de inserción dentro del código anidado que desea verificar.
  2. Elija Editar > Seleccionar etiqueta padre.

Esto resaltará la etiqueta de apertura y cierre y lo que éstas encierran en la vista de Código. Si continúa seleccionando este comando, y las etiquetas están correctamente equilibradas, Dreamweaver MX finalmente resaltará las etiquetas de apertura y cierre <html> y </html> del código entero.

Uso del panel Referencia

Dreamweaver MX viene con un conjunto completo de información de referencia incorporada, incluyendo los siguientes libros:

  • Macromedia ColdFusion Markup Language reference
  • O'Reilly HTML Reference
  • O'Reilly CSS Reference
  • O'Reilly JavaScript Reference
  • Macromedia SiteSpring Project Site Tag Reference
  • UsableNet Accessibility Reference
  • Wrox ASP 3.0 Reference
  • Wrox JSP 3.0 Reference

Puede acceder al panel Referencia por medio de la vista de Diseño o de Código, al igual que a través del Inspector de código. Para abrir el panel Referencia:

Al trabajar en la vista de Diseño, puede hacer clic en una etiqueta en el Selector de etiquetas y luego en el botón de referencia para abrir el panel y mostrar información acerca de la etiqueta que seleccionó. Cuando trabaje en la vista de Código o en el Inspector de código, haga lo siguiente:

  1. Seleccione una etiqueta, atributo o palabra clave.
  2. Haga clic con el botón derecho del ratón (Windows) o haga clic y presione la tecla Control (Macintosh) y elija Referencia del menú contextual (también puede presionar Mayús+F1).

Ajuste el tamaño del texto en el panel Referencia haciendo clic en la flecha pequeña en la esquina superior derecha del panel, como se muestra a continuación:

El panel Referencia también está vinculado a los Accessibility Reports. Para mostrar automáticamente la pauta WAI (Web Accessibility Guideline) para el problema seleccionado actualmente, seleccione un elemento del panel de resultados y haga clic en el botón Info. Consulte la ilustración.

Inspeccionar las etiquetas

El Inspector de etiquetas, ubicado en el menú Ventana, proporciona una manera fácil y rápida de editar las etiquetas por medio de una hoja de propiedades similar a las que se encuentran en HomeSite y ColdFusion Studio.

El Inspector de etiquetas consta de dos herramientas integradas: la vista de estructura y la hoja de propiedades de etiquetas. Con estas herramientas podrá editar el código sin necesidad de trabajar directamente en la ventana del documento.

La vista de estructura le permite seleccionar una etiqueta rápidamente en vista de Código o vista de Diseño. Podrá insertar nuevas etiquetas ya sea del menú de opciones o del menú contextual, como se muestra en esta ilustración.

Al trabajar con un documento XML, puede valerse del comando Insertar etiqueta vacía. Por ejemplo, si selecciona esta opción y añade BR, se agregará la etiqueta siguiente: <BR/>. A pesar de que la mayoría de las etiquetas XML son etiquetas contenedoras (por ejemplo, <contenedor></contenedor>), los desarrolladores a veces incluyen etiquetas vacías para indicar que algo ha ocurrido, como por ejemplo un salto de línea. El símbolo "/" le indica al analizador de XML que ésta es una etiqueta vacía.

Al seleccionar una etiqueta, se mostrará una lista de todos los atributos asociados con ese elemento. Dreamweaver MX siempre añade el atributo al final de la etiqueta.

Insertar etiquetas con el Selector de etiquetas

El Selector de etiquetas le permite insertar cualquier etiqueta que esté incluida en las bibliotecas de etiquetas de Dreamweaver. Para insertar una etiqueta nueva:

  1. Mientras trabaja en la vista de Código, haga clic con el botón derecho del ratón (o haga clic y presione la tecla Control) y seleccione Insertar etiqueta del menú. (También aparece el panel haciendo clic en el icono del Selector de etiquetas que se encuentra en la barra de herramientas del documento.)

    El panel izquierdo contiene una lista de las bibliotecas de etiquetas disponibles, y el derecho muestra las etiquetas dentro de la carpeta de etiquetas seleccionada.

    También puede hacer clic en el nodo de carpeta para mostrar varias categorías, tales como Composición de página, Elementos de página, Formato y disposición, Tablas, etc. Si selecciona Elementos de página, por ejemplo, aparecerán tres iconos: General, Específico del navegador y Eliminados en nuevas versiones. Hacer clic en cualquiera de estos iconos mostrará las etiquetas correspondientes en el panel derecho, como se muestra en esta ilustración .
  2. Cuando haya seleccionado la etiqueta adecuada, haga clic en el botón Datos de etiqueta para mostrar información acerca de cómo utilizar esta etiqueta. También puede hacer clic en el botón Referencia para invocar el panel Referencia, el cual le permite ver información sobre todos los atributos asociados, al igual que datos de la etiqueta.
  3. Haga clic en el botón Insertar para insertar la etiqueta en el código. Si el código requiere información adicional, aparecerá un editor de etiquetas.

Editar, añadir e importar bibliotecas de etiquetas

El Editor de la biblioteca de etiquetas, ubicado en el menú Editar, se utiliza para administrar todas las bibliotecas de etiquetas a continuación, que vienen incluidas con Dreamweaver MX:

  • HTML
  • CFML
  • ASP
  • ASP.NET
  • PHP
  • JRun
  • WML
  • Plantillas de Dreamweaver MX
  • Etiquetas del sitio del proyecto Sitespring

Las bibliotecas de etiquetas son fundamentales para la aplicación y todos los editores de etiquetas se refieren a ellas. El Editor de la biblioteca de etiquetas le permite añadir y eliminar bibliotecas de etiquetas, etiquetas y atributos; definir las propiedades de una biblioteca de etiquetas; y editar los atributos de las etiquetas.

Una de las características maravillosas del Editor de la biblioteca de etiquetas es que le permite determinar cómo aparece el código en la ventana del documento. Por primera vez, los desarrolladores ahora pueden definir visualmente las opciones de salto de línea, formato del contenido y uso de mayúsculas y minúsculas. Esta ilustración muestra un ejemplo de cómo pulir la apariencia de la etiqueta <table>. Para editar la apariencia de una etiqueta:

Supongamos que desea hacer que las etiquetas de las celdas de una tabla (<td>) de cada fila de la tabla aparezcan en la misma línea del código. He aquí cómo puedo lograrlo:

  1. Abra el Editor de la biblioteca de etiquetas (Editar > Bibliotecas de etiquetas).
  2. Haga clic en el nodo de carpeta Etiquetas HTML.
  3. Seleccione la carpeta "td".
  4. Elija Sin saltos de línea en el menú emergente Saltos de línea.
  5. Escoja Sin formato del menú emergente Contenido:
  6. Haga clic en Aceptar para guardar los cambios.

Ahora, al insertar una tabla, todas las etiquetas <td> aparecerán en una línea en lugar de en líneas separadas, como se muestra en esta ilustración. Para añadir nuevas bibliotecas de etiquetas:

  1. El Editor de la biblioteca de etiquetas le da flexibilidad al añadir bibliotecas de etiquetas, etiquetas y atributos. En el Editor de la biblioteca de etiquetas haga clic en el botón de suma (+) de Etiquetas y elija Nueva biblioteca de etiquetas. Aparecerá el cuadro de diálogo Nueva biblioteca de etiquetas.
  2. Escriba un nombre para la nueva biblioteca y haga clic en Aceptar. Aparecerá la nueva carpeta de la biblioteca en la parte inferior del cuadro de desplazamiento.
  3. Con la carpeta nueva aún seleccionada, ahora elija los tipos de documentos en los cuales estará disponible la nueva biblioteca.
  4. Haga clic en el botón de suma (+) de Etiquetas y elija Nuevas etiquetas.
  5. En el cuadro de diálogo Nuevas etiquetas asegúrese de que la nueva biblioteca esté seleccionada y luego introduzca el nombre nuevo de la etiqueta o las etiquetas, como se muestra en el ejemplo a continuación:
  6. Con la nueva carpeta de etiquetas seleccionada, vuelva a hacer clic en el botón de suma de Etiquetas y elija Nuevos atributos.
  7. En el cuadro de diálogo Nuevos atributos, introduzca todos los atributos asociados con la etiqueta:
  8. Seleccione uno de los atributos y seleccione la opciones adecuadas de May/min de atributo y de Tipo de atributo, como se muestra en esta ilustración.
  9. Cuando haya agregado todas las etiquetas y atributos, haga clic en Aceptar para guardar los cambios que haya hecho a las bibliotecas de etiquetas.
  10. Con estos elementos establecidos, ahora podrá utilizarlos por medio del Selector de etiquetas, el Inspector de etiquetas o las Sugerencias para el código, como se muestra a continuación:

Cuando se desarrolló Dreamweaver MX, Macromedia estaba consciente de que muchos desarrolladores del web tendrían que trabajar con etiquetas personalizadas, tales como las etiquetas XML. Para satisfacer las necesidades de este tipo de usuario, el Editor de la biblioteca de etiquetas tiene la capacidad de importar etiquetas personalizadas que se convierten en parte integral del entorno de autoría. Esto asegura que cuando comience a escribir una etiqueta personalizada (en la vista de Código), las Sugerencias para el código mostrarán automáticamente una lista de todos los atributos de las etiquetas personalizadas.

Dreamweaver MX le permite importar lo siguiente:

  • Archivos XML DTD o de esquema
  • Etiquetas personalizadas ASP.NET
  • Bibliotecas de etiquetas JSP (*.tld, *.jar, *.zip)
  • Etiquetas de servidor JSP (web.xml)
  • Etiquetas de servidor JRun

Puede importar etiquetas personalizadas e integrarlas en el entorno de autoría escribiendo una etiqueta personalizada. Para importar etiquetas personalizadas:

  1. Abra el Editor de la biblioteca de etiquetas (Editar > Bibliotecas de etiquetas).
  2. Haga clic en el botón de suma (+).
  3. Elija ASPNet, DTDSchema, JSP como se muestra en esta ilustración.

Para importar etiquetas desde un archivo XML DTD o de esquema:

  1. Abra el Editor de la biblioteca de etiquetas (Editar > Bibliotecas de etiquetas).
  2. Haga clic en el botón de suma (+) y elija Esquema DTD > Importar XML DTD o archivo de esquema.
  3. Introduzca el archivo o URL del archivo DTD o de esquema.
  4. Introduzca el prefijo que se ha de utilizar con las etiquetas. El prefijo se utiliza para identificar las etiquetas de una página como parte de una determinada biblioteca de etiquetas.
  5. Haga clic en Aceptar.

Para aprender a importar etiquetas ASP.NET personalizadas, etiquetas JSP de un archivo o servidor (web.xml), o etiquetas JRun, consulte la documentación de Dreameweaver MX.

Como puede ver, Dreamweaver MX contiene una abundancia de herramientas nuevas que le permiten a los puristas del código trabajar en un entorno parecido al de otros programas de edición manual, como HomeSite y ColdFusion Studio. Gracias a la flexibilidad de Dreamweaver MX, los diseñadores, desarrolladores y programadores pueden finalmente trabajar dentro de un mismo entorno para crear y administrar con facilidad cualquier sitio web profesional. Como habrá descubierto en este artículo, las nuevas características de edición de código aseguran que escribirá el código más rápidamente que nunca.

Acerca del autor
Mark Fletcher es uno de los autores con más experiencia en Virtual Training Company, donde se especializa en la creación de CD de capacitación* y tutoriales en línea utilizando los productos de Macromedia tales como Dreamweaver*, UltraDev, Fireworks, HomeSite y Sitespring. Mark también desarrolla tutoriales en línea para WebAssist.com*, un desarrollador de extensiones para Dreamweaver y UltraDev.