Dreamweaver trae muchas mejoras en cada versión que no debemos pasar por alto aunque parezcan sencillas. En el siguiente artículo presentamos algunos consejos útiles para los usuarios de Dreamweaver CS3.

Esta poderosa herramienta es muy utilizada por los programadores y diseñadores web, entre los lenguaje que podemos utilizar para crear nuestros sitios web se encuentran (HTML, ColdFusion, PHP, ASP, XSLT, CSS, JavaScript, XML, JSP, ASP .Net).

Razones que plantea Adobe por las cuales debemos actualizar:

  • Estructura Spry para Ajax
  • Datos Spry
  • Objetos Spry
  • Efectos Spry
  • Integración con Adobe Photoshop® y Fireworks®
  • Comprobación de compatibilidad con el explorador
  • Sitio web CSS Advisor (Asesor de CSS)
  • Diseños de CSS
  • Gestión de CSS
  • Adobe Device Central CS3

Definir Sitio:

Definir un sitio nos ayuda a administrar de una forma más fácil nuestro sitio web, ya sea local o remoto. También nos posibilita el uso de “Templates”, crear caché de nuestro sitio entre otras posibilidades. Para ello debemos ir a la ventana “Files” u oprimir la tecla “F8”.

Uso de Templates:

imagen1.jpgEl uso de Templates nos ayuda a mantener una plantilla de nuestro sitio. Esto nos posibilita el no tener que modificar todo el sitio cuando necesitamos realizar cambios. Para ello debemos seleccionar regiones editables.

  • Make Template: esta opción nos permite salvar nuestra página web como plantilla, podemos definir su nombre. El sitio con el cual usaremos la plantilla.
  • Editable Region: con ésta opción podemos definir las regiones que serán editables en el sitio. Debemos tener en cuenta que las regiones no editables deberán modificarse desde la plantilla.

Para crear una página desde la platilla es necesario crear un nuevo documento y seleccionar desde plantilla, luego nos mostrará una lista de las plantillas que hemos creado.

Chequear la compatibilidad de las páginas Web:

imagen2.jpgEl verificar nuestro sitio es un paso importante ya que nos ayuda a comprobar si el mismo es compatible o no, con la mayoría de los navegadores. Con la opción “Check Browser Compatibility” podemos verificar la compatibilidad. Nos mostrará los resultados en la ventana de resultados.

Podemos configurar los navegadores con los cuales analizaremos la compatibilidad y su versión, para ello solo debemos ir a “Settings”.

Validación de documentos:

imagen3.jpgDebemos tener en cuenta lo útil y necesario que es el realizar validaciones de nuestro sitio. Podemos configurar las validaciones de los documentos en “Settings”.

Estas validaciones se realizan en el documento actual, en el sitio completo que tenemos definido, o seleccionar los ficheros que deseamos validar.

Usar HTML en caracteres especiales:

En muchas ocasiones encontramos páginas web que en lugar de mostrarnos los caracteres especiales como vocales con tildes (á, é, í, ó, ú) muestras caracteres extraños ilegibles . Para que esto no ocurra debemos sustituirlo por su código HTML.

Entre los caracteres especiales que más usamos encontramos:

  • á – á
  • é – é
  • í – í
  • ó – ó
  • ú – ú

Estos caracteres especiales los podemos encontrar en la pestaña “Text” que se encuentra en la ventana “Insert”.
imagen4.jpg
Es muy aconsejable usarlos siempre que necesitemos insertar estos tipos de caracteres.

Usar la Regla:

imagen5.jpgEsta importante opción que muchas veces pasamos por alto nos ayuda a mantener una alineación de nuestro diseño.

Si pinchamos la regla con el clic izquierdo del mouse y arrastramos hacia el área de trabajo, nos mostrará unas líneas que nos ayudarán a mantener en alineación los objetos de nuestro diseño.

Usar hojas de estilos CSS:

imagen6.jpgEs muy útil tener organizado los estilos en un fichero. En la esta ventana CSS se encuentra en la parte derecha de Dreamweaver, también podemos activarla con las teclas “Shift+F11”.

Con los botones de la parte inferior derecha podemos:

  • Adjuntar una hoja de estilo externo.
  • Agregar una nueva regla.
  • Editar regla.
  • Eliminar regla.

Vincular hojas de estilos a nuestras páginas del sitio nos ayuda a no repetir los códigos, y al realizar un cambio solo hacerlo en el fichero CSS.

Vista previa:

imagen7.jpgEsta opción nos permite tener una vista previa de nuestras páginas web. En la lista de navegadores podemos seleccionar el navegador con el que deseamos realizar la vista previa. También podemos Editar esta lista en la opción “Edit Browser List”.

Dreamweaver CS3 incorpora una nueva opción que nos permite tener una vista previa de nuestra Web en diferentes marcas y modelos de teléfonos celulares, esta opción se llama “Preview in Device Central”.

Barra de código:

imagen8.jpgEsta barra nos permite varias opciones como:

  • Crear nuevo documentos.
  • Colapsar código completo.
  • Colapsar código seleccionado.
  • Expandir todo.
  • Seleccionar código.
  • Mostrar número de líneas.
  • Señalar código no válido.
  • Crear comentario.
  • Borrar comentario.
  • Mover estilos a un fichero externo.
  • Alinear código.
  • Aplicar formato al códigos.

Utilizar Spry framework para AJAX:

Entre las mejoras incorporadas en Dreamweaver CS3 en esta nueva versión, se encuentran el SPRY framework para AJAX.
imagen9.jpg

imagen10.jpgEl Spry framework para Ajax esta compuesto por librerías Javascript para proveer funcionalidades en el diseño Web.

Los Spry de Datos nos permite mostrar datos desde un XML. Veremos en varios pasos como crearlo. Primeramente debemos definir los “Spry XML Data Set”, en este caso hemos utilizado el xml de Maestros del Web.
imagen11.jpg

Pasos 1 : Spry XML Data Set

Definir el XML del cual podremos leer los datos.

  • Data Set Name: Aquí definiremos el nombre, podemos definir el que deseemos. En este caso usamos “MaestrosDelWeb”.
  • XML Source: Ruta donde se encuentra el XML, del cual se leerán los datos (preferiblemente debe estar dentro del directorio del sitio).
  • Get schema: Al presionar este botón se verifican los elementos que contiene.
  • Row element: Seleccionamos los elementos a mostrar. En este caso seleccionamos “item”, ya que son solo esos datos los que necesitamos leer.
    También podemos definir el tipo de datos, dirección, el tiempo en que se refrescaran los datos.
  • Luego presionamos el botón “OK”, si todo esta correcto.

Paso 2 : Spry Region. Insertar la región de los Spry

imagen12.jpg

Aquí se definirá el contenedor de los datos, el tipo, y el “Spry Data Set” a utilizar. En el paso anterior lo definimos con el nombre “MaestrosDelWeb”.

Spry Repeat. Mostrar los diferentes registros o item del XML. Si agregamos directamente los “Spry Repeat” sin seleccionar los “Spry Region” este nos preguntará si deseamos agregarla. Como es un paso necesario debemos agregarla.

Si solo deseamos mostrar un solo registro o item del XML no necesitamos usar los “Spry Repeat”. Estos nos permitirán recorrer todos los item del XML, para poder mostrarlos.

Pasos 3 : Insert Spry Repeat List. Insertar en forma de lista

imagen13.jpg
Esta opción nos permite insertar los datos provenientes del xml en forma de lista. Podemos seleccionar el contenedor. El nombre del Spry de Datos “MaestrosDelWeb” y los datos que mostraremos. Estos podemos agregarlos de uno en uno si queremos mostrar varios. Insert Spry Table. Insertar en forma de tabla.
imagen14.jpg

Y esta opción para resolver nuestros problemas cuando queremos mostrar nuestros datos en forma de tabla.

  • Spry Data Set: Seleccionamos el nombre de nuestro Spry de Datos.
  • Columns: Agregamos/Quitamos columnas, y la cambiamos de posición.
  • Luego oprimimos OK.

imagen15.jpgLas otras opciones podemos ajustarlas a nuestro gusto, estilos y demás. Estos también pueden ser insertados por la Ventana de Aplicación “Bindings”, podemos mostrarla de forma rápida con las teclas “Ctrl+F10”. Podemos marcarlos y arrastrarlos.

Con los Spry de Validación podemos validar Campos de Texto, Listas Desplegables, Checkbox. Esta importante función nos brinda la posibilidad de validar los formularios de nuestro sitio web de parte del cliente, sin necesidad de realizar un POST a nuestro sitio.

imagen16.jpgAl seleccionar esta opción, podemos seleccionar el tipo de validación del campo, que puede ser Correo Electrónico, Dirección IP, Fecha, URL, Código Postal, etc. Podemos definir el formato con el que se va a validar. Definir una cantidad mínima y máxima de caracteres.
imagen17.jpg
Los Spry Layout, nos brindan la posibilidad de crear interfaces de usuarios más dinámicas mediante componentes AJAX.

  • Spry Menu Bar: nos brindan la posibilidad de crear menús horizontales y verticales. En las propiedades podemos configurarlo y adaptarlo a nuestras necesidades.

    • imagen19.jpg

  • Spry Tabbed Panels: como su nombre lo indica podemos crear paneles tabulados de una forma muy fácil.
  • Spry Accordion, con esta opción podemos crear menú en forma de Acordión.
  • Spry Collapsible Panel, nos permite crear paneles plegables, con los mismos podemos mostrar y ocultar información al seleccionarlos.

Esperamos que estos tips les permitan hace buen uso de las diferentes opciones que brinda Adobe Dreamweaver CS3 y compartan su experiencia en los comentarios en el uso del programa.