Home » Dreamweaver » Trabajo con Dreamweaver

Trabajo con Dreamweaver

Dreamweaver MX 2004 ofrece un enfoque en tres frentes para el desarrollo web. Utilizando sus herramientas podemos introducir la información como si fuese texto directamente en la página, podemos tener insertada la información automáticamente con objetos y comportamientos incorporados y podemos ir entre bambalinas para trabajar directamente con el código subyacente que conforma nuestra página. Como es fácil de suponer, para construir cualquier tipo de sitio casi siempre utilizaremos una combinación de estos tres métodos.
En el capítulo 2 analizamos todas las decisiones que son necesarias para preparar el uso de Dreamweaver. Ahora estamos en un punto en que estamos listos para empezar, por lo tanto necesitamos primero definir un sitio e indicarle a Dreamweaver acerca de las decisiones tomadas. Después de definir nuestro sitio, comenzaremos a desarrollarlo mediante el añadido de páginas y a continuación mediante el añadido del contenido de esas páginas.
Cuando se inicia por primera vez Dreamweaver presenta una selección de interfaces. Las imágenes de este capítulo utilizan la opción de interfaz “diseñador”. Posteriormente cambiaremos nuestra selección, pero por ahora seleccionaremos la opción diseñador. En la figura 3-1 se muestra la interfaz diseñador de Dreamweaver MX 2004. Podemos personalizar esta configuración predeterminada para que se adapte a nuestras necesidades. Posteriormente en este capítulo analizaremos la configuración de nuestras preferencias, pero por ahora seguiremos con los valores predeterminados que nos servirán para comenzar con Dreamweaver.

Interfaz predeterminada de Dreamweaver MX 2004

Interfaz predeterminada de Dreamweaver MX 2004

Panel de archivos del sitio

Dreamweaver está diseñado para permitirnos generar aplicaciones web y, como tal, tiende a tratar a los sitios web como si fuesen una entidad: un conjunto completo de archivos e imágenes y elementos que trabajan mancomunadamente para producir nuestro mensaje. En la figura 3-2 se muestra el administrador del sitio que representa un poderoso centro de control desde el que podemos administrar todos nuestros sitios web. Usándolo podemos definir las características de cada sitio de manera que podemos administrarlos eficientemente, incluso aunque utilicen diferentes modelos de servidor y residan en diferentes servidores en Internet. Para enviar y recibir archivos desde cualquiera de nuestros sitios podemos utilizar el programa FTP que se incluye como complemento de Dreamweaver; y podemos gestionar el crecimiento de nuestro sitio mediante el añadido de páginas, la edición de páginas y la estructuración de los directorios y las páginas que lo conforman. Pero, para poder administrar un sitio, primero debemos definirlo.
Nota:    Podemos expandir el administrador de sitios a su mayor tamaño con los archivos locales en un lado y los archivos remotos en otro haciendo clic en el botón expandir/contraer (el icono que está más lejos a la derecha). Para volver a la vista de diseño normal volver a hacer clic en el mismo icono expandir/contraer del administrador del sitio.

Panel del administrador del sitio, ahora denominado Archivos

El panel del administrador del sitio, ahora denominado Archivos, simplifica el acceso a nuestros archivos cuando se editan las páginas.
Sobre la barra de herramientas del administrador del sitio aparece una lista desplegable que incluye todos nuestros sitios que actualmente tengamos definidos. Al seleccionar un sitio de la lista se instruye a Dreamweaver que ese es el sitio que se considera activo. Entonces, sus directorios y páginas quedan presentadas en la ventana que aparece debajo de la barra de herramientas. Si estamos utilizando una instalación nueva de Dreamweaver, entonces no tendremos ningún sitio (Dreamweaver ya no distribuye sitios de ejemplo) y tendremos que crear uno para continuar.
Junto a la lista desplegable de selección de sitios aparece otra lista desplegable que nos permite seleccionar la vista que se presenta en el panel del administrador del sitio. Podemos seleccionar entre cuatro opciones:

  • Vista local: Muestra los archivos que existen actualmente en la carpeta del equipo local que se define como repositorio de este sitio.
  • Vista remota: Muestra los archivos que existen actualmente en el servidor de producción que se definió en la configuración del sitio.
  • Servidor de prueba: Muestra los archivos que existen actualmente en el servidor de prueba que se ha definido en la configuración del sitio.
  • Vista de mapa: Muestra una representación gráfica de los archivos del sitio y sus relaciones basándose en los vínculos que Dreamweaver pudo identificar.

Nota:    Al seleccionar un sitio y conectarlo con su servidor remoto se cambiará la vista del administrador del sitio a vista remota. Esto es algo que debemos recordar cuando comencemos a trabajar. Debemos comprobar que estamos abriendo y editando el archivo adecuado.
El primer paso consiste en definir un sitio para tener algo sobre qué trabajar a medida que continuamos nuestro aprendizaje.

Definición del sitio

Existen dos caminos para llegar a las pantallas que se utilizarán para definir nuestros sitios. Podemos hacer doble clic en el sitio visualizado en la lista desplegable para editar la definición de ese sitio. O, podemos seleccionar la opción Administrar sitios  en la parte inferior de esa misma lista desplegable y la siguiente pantalla que aparecerá nos permitirá seleccionar un sitio para editar, crear un nuevo sitio o eliminar un sitio. Para definir un nuevo sitio se deben seguir estos pasos:

fig pag042

1.    Seleccionar Nuevo para definir un nuevo sitio o definir una conexión FTP o RDS. Una conexión FTP y RDS simplemente nos dan la posibilidad de abrir un servidor remoto utilizando uno de estos dos protocolos. Utilizándolos podemos recuperar y reemplazar archivos, pero no podemos sacar provecho de ninguna de las herramientas de gestión de sitios de Dreamweaver. Por el momento, crearemos un nuevo sitio.

fig pag043a

2.    Tal como se muestra aquí, se abrirá la ficha Básicas de la pantalla Definición del sitio. La ficha Básicas ofrece una interfaz asistente que nos ayuda en la tarea de crear la definición de nuestro sitio.

0103fig pag043b

3.    Introducir un nombre para nuestro sitio y hacer clic en el botón Siguiente. En este caso, lo denominaremos como MiSitio.
4.    La siguiente pantalla nos permite seleccionar si este sitio utilizará lenguajes para el lado del servidor, como, por ejemplo, ASP o ColdFusion, o simplemente serán páginas basadas en el navegador, con simple HTML puro.

0103fig pag044a

5.    En la siguiente pantalla, le podemos indicar a Dreamweaver cómo queremos trabajar con nuestros archivos durante el proceso de desarrollo. Podemos elegir almacenar en nuestro equipo local los archivos que se editarán, o editar directamente en la red local los archivos en el servidor remoto de prueba. Si en nuestro equipo local tenemos cargado un servidor web, Dreamweaver nos dará la oportunidad de crear una carpeta para nuestros archivos. También podemos especificar una ubicación de archivo, que varía con las otras opciones que hayamos elegido.

0103fig pag044b

6.    A continuación, especificamos una dirección URL para el sitio que estamos creando. Si estamos realizando pruebas locales, la dirección URL puede ser un directorio virtual configurado en nuestro servidor web. O podemos especificar un nombre de dominio totalmente calificado para un servidor web. Podemos probar la dirección URL para comprobar que la hemos introducido correctamente.

0103fig pag045a

7.    Finalmente, Dreamweaver quiere saber si dejaremos nuestros archivos en el equipo local o los subiremos a otro equipo. Si optásemos por la opción No, la definición del sitio habrá quedado finalizada. Si optásemos por la opción Sí, la pantalla siguiente nos permitirá especificar la configuración de nuestro servidor remoto. Podemos utilizar un servidor de red local, FTP, RDS, WebDav o Source Safe. Introducir la dirección URL de nuestro servidor. También podemos especificar un directorio remoto o simplemente introducir una barra (\) para usar la raíz del sitio.

0103fig pag046a

8.    Si estamos utilizando un servidor remoto, ahora se podría especificar si se quieren utilizar las funcionalidades Desprotección y Protección de Dreamweaver. Desprotección y Protección suministran un bloqueo simple y una función de marcado que nos alerta si estuviésemos intentando abrir o editar un archivo que ya está extraído por otro usuario. Podemos especificar si Dreamweaver debería proteger un archivo cuando lo abrimos o simplemente darnos una copia sólo para leer y hacernos proteger explícitamente el archivo. También podemos suministrar un nombre de manera que los otros puedan ver quién ha sido el que protegió el archivo y una dirección de correo electrónico de manera que puedan contactar con nosotros para conocer el tiempo en que seguirá bloqueado el archivo.

0103fig pag047a

9.    La última pantalla nos presenta un resumen de las elecciones realizadas. Al hacer clic en el botón Completado se creará nuestro sitio. En este punto podríamos utilizar la ficha Avanzadas y reajustar los detalles de nuestro sitio en la ventana Definición del sitio.

0103fig pag047b

10.    La ficha Avanzadas nos permite configurar opciones que nos brindan mayor control sobre el desarrollo e implementación de nuestro sitio. Si habíamos utilizado la ficha Básicas, en esta ficha podremos conocer algunos datos que se habían presupuesto. En la sección Datos locales podemos especificar la carpeta predeterminada de imágenes. Esto especificará la carpeta en donde Dreamweaver guardará de manera predeterminada todas las imágenes. También podemos introducir la dirección de nuestro sitio de manera que Dreamweaver pueda comprobar e informar la exactitud de los vínculos que utilizamos en nuestras páginas. La habilitación del caché guardará información acerca de nuestras páginas y otros elementos en un formato que acelera varias de las funcionalidades de gestión de archivos de Dreamweaver.

0103fig pag048

11. En el asistente básico se habrá definido la mayor parte de los detalles de las secciones del sitio remoto. Si se precisan utilizar estas opciones, aquí podemos configurar FTP pasivo, cortafuegos y SSH. También podemos elegir la opción que indica que Dreamweaver suba automáticamente los archivos cuando los guardemos.

0103fig pag049a

12. Los detalles del servidor de prueba ya deberían estar configurados desde el asistente básico.
13. Ocultación nos permite ocultar ciertas carpetas y archivos del proceso de publicación. Por ejemplo, supongamos que mantenemos archivos PNG de Fireworks en nuestra carpeta de imágenes para que las funcionalidades de integración de Dreamweaver puedan encontrarlos y editarlos en Fireworks. Quizás no nos interese que esos archivos PNG puedan ser subidos al servidor de producción desde donde podrían ser ubicados y descargados. Podemos encubrir los archivos PNG de manera que no sean tomados en cuenta durante el proceso de publicación.

0103fig pag049b

14. Notas de diseño (Design notes) nos permite guardar la información adicional acerca de las páginas en una nota asociada. Estas notas se utilizan para compartir información y también las pueden utilizar distintas funcionalidades de integración de Dreamweaver con Fireworks y Flash. Podemos elegir si queremos mantener las notas de diseño, así como también si las subimos de manera que puedan ser vistas por otros.

0103fig pag050

15. La sección Mapa de diseño del sitio nos permite definir la estructura del mapa del sitio que sea visualizable en el administrador del sitio. Para utilizar el mapa del sitio, debemos definir una página de inicio de manera que Dreamweaver sepa por dónde comenzar a generar el mapa. Podemos especificar cuántas columnas de páginas se visualizan y si se muestran los archivos ocultos y los archivos dependientes.

0103fig pag051a

16. El panel Archivos tiene varias columnas de información que podemos visualizar. La sección Columnas vista archivo de la ficha Avanzadas nos permite seleccionar cuáles son a nuestro entender las columnas importantes y en qué orden nos gustaría verlas. También podemos establecer propiedades de visualización de manera que el panel del sitio muestre la información del modo en que queremos verla.

0103fig pag051b

17. El panel Contribute nos permite configurar nuestro sitio para trabajar con Macromedia Contribute 2.

0103fig pag052

18. Hacer clic en el botón Aceptar para completar la definición del sitio. Volveremos así a la interfaz principal de Dreamweaver.
Ahora que ya hemos descrito nuestras preferencias a Dreamweaver ya estamos preparados para comenzar la creación de nuestro sitio.

izq sup der

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.