Dreamweaver

DREAMWEAVER

Adobe Dreamweaver es una aplicación en forma de estudio (basada en la forma de estudio
de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos
y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente
producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la
programación web, por sus funcionalidades, su integración con otras herramientas como Adobe
Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium.
Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de código
abierto) y tiene soporte tanto para edición de imágenes como para animación a través de su
integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los
estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet
Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
Se vende como parte de la suite Adobe Creative Suite. A partir de la compra de Macromedia por
parte de Adobe. Las letras CS significan Creative Suite
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del
mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una
imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran
flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones
de C++ sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace,
que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores WYSIWYG. Sin
embargo, versiones más recientes soportan otras tecnologías web como CSS, JavaScript y
algunos frameworks del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los años 1990 y actualmente mantiene el
90% del mercado de editores HTML. Esta aplicación está disponible tanto para la
plataforma MAC como para Windows, aunque también se puede ejecutar en plataformas basadas
en UNIXutilizando programas que implementan las API's de Windows, tipo Wine.
Como editor WYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario,
haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin
necesidad de escribir código.
Algunos desarrolladores web criticaban esta propuesta ya que crean páginas HTML más largas de
lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la ejecución de las
páginas en el navegador web. Esto puede ser especialmente cierto ya que la aplicación facilita en
exceso el diseño de las páginas mediante tablas. Además, algunos desarrolladores web han
criticado Dreamweaver en el pasado porque creaba código que no cumplía con los estándares del
consorcio Web (W3C).
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas sin tablas en
versiones posteriores de la aplicación, haciendo que se reduzca el exceso de código.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados en su
ordenador para previsualizar las páginas web. También dispone de herramientas de
administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de encontrar y
reemplazar líneas de texto y código por cualquier tipo de parámetro especificado, hasta el sitio
web completo. El panel de comportamientos también permite crear JavaScript básico sin
conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de contenido
dinámico en Dreamweaver. En lo fundamental de las herramientas HTML WYSIWYG, también
permite la conexión a Bases de Datos como MySQL y Microsoft Access, para filtrar y mostrar el
contenido utilizando tecnología de script como, por
ejemplo, ASP, ASP.NET, ColdFusion, JSP(JavaServer Pages) y PHP sin necesidad de tener
experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir,
permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son pequeños
programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y
que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.
Dreamweaver goza del apoyo de una gran comunidad de desarrolladores de extensiones que
hacen posible la disponibilidad de extensiones gratuitas y de pago para la mayoría de las tareas de
desarrollo web, que van desde simple efectos rollover hasta completas cartas de compra.
También podría decirse que, para un diseño más rápido y a la vez fácil, podría complementarse
con Fireworks en donde se podría diseñar un menú u otras creaciones de imágenes (gif web, gif
websnap, gif adaptable, jpeg calidad superior, jpeg archivo más pequeño, gif animado websnap)
para un sitio web y después exportar la imagen creada y así utilizarla como una sola en donde ya
llevará los vínculos para dicho sitio.
A partir de la versión 5, Dreamweaver admite el resaltado de sintaxis para los siguientes idiomas
por defecto:
 ActionScript
 Active Server Pages (ASP).
 ASP.NET (no se admiten en la versión CS4 -
http://kb2.adobe.com/cps/402/kb402489.html)
 C#
 Cascading Style Sheets (CSS)
 ColdFusion
 Extensible HyperText Markup Language (XHTML)
 Extensible Markup Language (XML)
 Extensible Stylesheet Language Transformations (XSLT)
 Historial de versiones[editar · editar código]
Proveedor
Versión
mayor
Versión menor/nombre
alternativo
Fecha de
publicación
Notas
Macromedia
1.0
1.0
Diciembre de
1997
Primer lanzamiento, sólo
para Mac OS.
1.2 Marzo de 1998
Primera versión para
Windows.
2.0 2.0
Diciembre de
1998

3.0
4.2
Diciembre de
1999

UltraDev 1.0 Junio de 1999

4.0
4.0
Diciembre de
2000

UltraDev 4.0
Diciembre de
2000

6.0 MX
29 de mayo de
2002

7.0 MX 2004
10 de septiembre
de 2003

8.0 8.0
13 de septiembre
de 2005

Adobe
9.0 CS3
16 de abril de
2007
Sustituye a Adobe GoLive en
la serie Creative Suite
10.0 CS4
23 de septiembre

de 2008
11.0 CS5
12 de Abril de
2010

11.5 CS5.5
12 de Abril de
2011

12.0 CS6
21 de Abril de
2012

13.0 CC Abril de 2013


Color Significado
Rojo Versión antigua
Amarillo Versión antigua; soportada aún
Verde Versión actual
Requisitos del Sistema[editar · editar código]
Windows
 Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits
 Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3); Windows
Vista® Home Premium, Business, Ultimate o Enterprise con Service Pack 1; o Windows 7
 512 MB de RAM
 1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre
adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento
flash extraíbles)
 Resolución de 1580 × 800 con tarjeta de vídeo de 16 bits
 Java™ Runtime Environment 1.6 (incluido)
 Unidad de DVD-ROM
 Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia
HTML5
 Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet
de banda ancha y registrarse para poder activar el software, validar suscripciones y
acceder a servicios online.* No está disponible la activación por teléfono.
Mac OS
 Procesador Intel multinúcleo
 Mac OS X v10.6.8 o v10.7. Adobe Creative Suite 5, 5.5 y las aplicaciones de CS6 son
compatibles con Mac OS X Mountain Lion (v10.8) si se instalan en sistemas basados en
Intel.**
 512 MB de RAM
 1,8 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre
adicional durante la instalación (no se puede instalar en un volumen que utilice un sistema
de distinción entre mayúsculas y minúsculas en archivos, ni en dispositivos de
almacenamiento flash extraíbles)
 Resolución de 1280 × 800 con tarjeta de vídeo de 16 bits
 Java Runtime Environment 1.6
 Unidad de DVD
 Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia
HTML5
 Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet
de banda ancha y registrarse para poder activar el software, validar suscripciones y
acceder a servicios online.* No está disponible la activación por teléfono.

Entorno de trabajo. Vistas de edición

La pantalla inicial
Al entrar por primera vez en Dreamweaver, hay que elegir el tipo de espacio de trabajo (sólo
en Windows):
 Diseñador es un espacio de trabajo integrado en el que todas las ventanas de documentos y
todos los paneles forman una ventana de aplicación más grande, con los grupos de paneles
apilados a la derecha.
 Codificador es el mismo espacio de trabajo integrado, pero con los grupos de paneles
apilados a la izquierda; las ventanas de documentos muestran de forma predeterminada la
vista de código.
Después de pulsar Aceptar, aparece la ventana de inicio de la figura 2.1., que permite abrir
ficheros, crear nuevos así como crear a partir de plantillas.



Elementos del espacio de trabajo de Dreamweaver
Dreamweaver proporciona un diseño integrado en una única ventana.
Para abrir cualquiera de los numerosos paneles, inspectores y ventanas de Dreamweaver, se
utiliza el menú Ventana indicado en la figura 2.2.



A continuación se describen algunos elementos del espacio de trabajo:
 La barra Insertar, figura 2.3, contiene botones para la inserción de imágenes, tablas o
capas en un documento. Cada objeto en realidad es un fragmento de códigoHTML que
permite establecer diversos atributos al insertarlo.



 La barra de herramientas de documento, figura 2.4, contiene botones que
proporcionan diversas opciones de visualización y algunas operaciones comunes como
la obtención de una vista previa en un navegador o la colocación del título del
documento.




Vistas
Los documentos se pueden ver de las formas que se indican en la figura 2.5. En la parte de código,
se visualiza el documento en html mientras que en Diseño se previsualiza de la forma en que
quedará el documento definitivo.



 La barra vertical de herramientas Codificación (se muestra únicamente en la vista
Código) contiene botones con los que es posible realizar muchas operaciones de
codificación habituales.
 El inspector de propiedades, figura 2.5, permite ver y cambiar algunas de las
características más utilizadas del objeto o texto seleccionado actualmente.



 El selector de etiquetas, que aparece en la barra de estado en la parte inferior de la
ventana de documento, figura 2.7, indica las etiquetas que rodean al lugar donde está el
cursor en cada momento.



 Los grupos de paneles son conjuntos de paneles relacionados apilados bajo un
encabezado común. Se pueden ampliar, separar y ocultar pinchando en los lugares
indicados en la figura 2.8.
 El panel de archivos, figura 2.8., permite gestionar los archivos y las carpetas, de un
sitio local de Dreamweaver o de un servidor remoto. También proporciona una vista de
todos los archivos del disco local, como ocurre en el Explorador de
Windows (Windows) o en el Finder (Macintosh).



Abrir, guardar, recuperar y cerrar documentos

Introducción
Macromedia Dreamweaver 8 ofrece un entorno flexible para trabajar con una gran variedad de
documentos de diseño y desarrollo de páginas Web. Además de documentosHTML, es posible
crear y abrir una gran variedad de documentos basados en texto, incluidos archivos CFML, ASP,
JavaScript y CSS. Dreamweaver también admite archivos de código fuente, como Visual Basic,
.NET, C# y Java.

Creación de un documento nuevo
Se puede hacer de diferentes formas:
 Desde la ventana de inicio se pueden crear nuevos ficheros eligiendo el tipo de
documento a generar o bien a partir de plantillas predefinidas, figura 3.1.



 También se puede crear pinchando con el botón derecho sobre el título de alguna
solapa de edición de documento abierto en ese momento como se observa en la figura
3.2.


 Finalmente también se puede generar desde la barra de menús. Para ello se tendrá
que dar los siguientes pasos.
Seleccione Archivo -> Nuevo, figura 3.3.



Aparece el cuadro de diálogo Nuevo documento, figura 3.4. En la lista Categoría, se puede elegir el
tipo de página. Por ejemplo se elige Página básica. A continuación, en la lista de la derecha,
aparecen varios tipos de documentos. Siguiendo con el ejemplo se elige HTML para crear un
documento HTML.
 Se pulsa con el ratón en el botón Crear, figura 3.4.


 El documento nuevo se abrirá en la ventana del documento, figura 3.5.



Guardar un documento
Se puede llevar a cabo de varias formas:
Desde el Menú Archivo se elige Guardar o bien Guardar como, figura 3.6.



Pinchando con el botón derecho sobre el título de la solapa y de la misma forma que antes se
puede elegir Guardar o bien Guardar como, figura 3.7.



A continuación aparece el diálogo de exploración de ficheros. Se introduce el nombre del
documento, se elige la carpeta donde se quiera almacenar y se pulsa en el botón Guardar, figura
3.8.



También existen otras opciones de guardado:
 Guardar todo, permite grabar todos los ficheros abiertos en ese momento.
 Guardar en Servidor Remoto, sirve para enviar el documento al servidor Web.


Cerrar un documento
Se puede llevar a cabo de varias formas:
 Desde el Menú Archivo se elige Cerrar, para cerrar solo el documento activo, o bien
Cerrar todos, para hacerlo con todos los documentos que actualmente estén abiertos,
figura 3.9.


 Pinchando con el botón derecho sobre el título de una solapa y de la misma forma que
antes se puede elegir Cerrar o bien Cerrar todos, figura 3.10:


En caso de no haber grabado los últimos cambios, avisa apareciendo una ventana que proporciona
la posibilidad de guardarlos, figura 3.11.



Recuperar/abrir un documento ya existente
Se puede llevar a cabo de varias formas:
Desde la pantalla de inicio se pulsa sobre la opción Abrir, figura 3.12.



 Desde el Menú Archivo se elige Abrir, figura 3.13.



 Pinchando con el botón derecho sobre el título de la solapa de algún documento que
esté abierto, se pincha en la opción Abrir, figura 3.14.



 A continuación aparece el diálogo de exploración de ficheros, figura 3.15. Se navega a
través de las carpetas y de las unidades de disco para seleccionar el documento y
finalmente se pulsa en el botón Abir.



 El documento elegido se cargará en la Ventana de Documento, figura 3.16.



 Se puede abrir un documento que se haya editado recientemente con Dreamweaver.
Para ello, desde el Menú Archivo se elige Abrir reciente y aparece una lista con los
últimos documentos abiertos. Se selecciona el que interese y este se cargará en la
Ventana de Documento, figura 3.17.



El Sitio: Creación, configuración, edición y administración

Introducción
Dreamweaver dispone de una serie de funciones para administrar archivos y transferirlos desde y
a un servidor remoto:
 Mantiene estructuras de archivos y carpetas paralelas en sitos locales y remotos
transfiriendo archivos entre ambos y creando automáticamente las carpetas necesarias
si aún no existen en uno de los sitios.
 También se pueden sincronizar los archivos entre los sitios local y remoto; si es
necesario, Dreamweaver copia los archivos en ambos sentidos y elimina los no
deseados.
Aunque no se verán en este manual, Dreamweaver además incluye funciones que facilitan el
trabajo en colaboración en un sitio Web:
 Proteger y desproteger archivos de un servidor remoto de forma que otros miembros
de un equipo de diseño Web puedan ver quién está trabajando con un archivo.
 Añadir notas de diseño (Design Notes) a los archivos para compartir información con los
miembros del equipo acerca del estado del archivo, su prioridad, etc.
 Utilizar la función Informes de flujo de trabajo para ejecutar informes sobre el sitio y ver
información sobre el estado de protección/desprotección, así como para buscar las
notas de diseño adjuntas a los archivos.

Definición de un nuevo sitio
En el menú principal hay que pulsar la opción Administrar sitios y después escoger la
opción Administrar sitios, figura 4.1.



Aparece una ventana que permite Administrar de sitios, en este caso todavía no hay creado
ninguno por lo que se va a crear uno nuevo pulsando el botón Nuevo y eligiendo, del menú que se
despliega, la opción Sitio, figura 4.2.



A continuación aparece la herramienta de definición y configuración de sitios, figura 4.3. Se tienen
dos posibilidades:
 En la solapa Básicas se puede utilizar un asistente muy autoexplicativo, que va
solicitando paso a paso toda la información necesaria para definir el sitio.
 En la solapa Avanzadas permite definirlo manualmente. Este es el sistema que se va a
seguir durante el manual. En el cuadro de la izquierda aparecen todas lascategorías,
que son aspectos configurables de un sitio. Cada uno de ellos tiene a la vez varios
parámetros que se deberán configurar.
Se marca la primera categoría, Datos locales. En primer lugar hay que indicar el nombre del sitio,
la carpeta raíz local (del equipo) donde se van a ubicar todos los documentos que se utilicen. Se
ofrece la posibilidad de seleccionar una carpeta para almacenar todas las imágenes, esto puede
ser interesante para tener mejor organizada toda la información.



En la categoría Datos remotos, figura 4.4., se puede configurar el sistema de acceso al repositorio
donde se publicará la Web que se elabore desde el equipo. Según el acceso elegido aparecerán
todos los parámetros necesarios para establecer una adecuada comunicación con el sistema
remoto. De momento no se definirá ningún Acceso y se trabajará localmente.



Se pasa a la categoría Mapa de diseño del sitio, figura 4.5., donde se puede indicar el nombre de la
página principal o bien buscar mediante el explorador de ficheros.
En este caso en la página principal se incluirá index.html, al no existir aparece un diálogo que
permite crear dicho fichero en este momento.



Después de pinchar el botón Aceptar se vuelve a la ventana de administración de sitios pero esta
vez aparece el sitio recién creado, figura 4.6.
Se pulsa en Listo y, a partir de este momento, todos los documentos que se utilicen para la
elaboración de la Web se irán almacenando en el sitio.



En primer lugar se puede observar que en el panel de archivos aparece el sitio que se acaba de
definir, figura 4.7., que se ha seleccionado y actualmente está en curso.



Vistas del sitio
Además de la vista de la figura 4.7 donde aparece el sitio con todos sus elementos, se dispone de
otras formas de visualización para facilitar la labor de diseño y de sincronización de ficheros con el
servidor remoto o el de prueba.
Para ver mejor estas funcionalidades se va a utilizar una página que contiene varias páginas
compuestas de varios elementos, tal como se muestra en la figura 4.8.
Para expandir la vista de archivos se pulsa el botón Expandir para mostrar sitios remotos y
locales situado a la derecha de la barra de Archivos.



Esto provocará que se amplíe la pantalla para trabajar exclusivamente en el panel de archivos.
La Web se podrá ver de varias formas en función de la opción del menú que se elige:
 Archivos del sitio: la pantalla se divide en dos, figura 4.9.:
o En la parte izquierda aparece el sitio remoto con todos sus documentos
estructurados en carpetas. En caso de no estar definido, no aparece nada.
o En la parte derecha aparece el sitio local conteniendo todas sus carpetas y
documentos.



 Servidor de prueba: de igual forma la pantalla se divide en dos, figura 4.10:
o En la parte izquierda aparece el sitio situado en el servidor de prueba, con todos sus
documentos estructurados en carpetas. En caso de no estar definido, no aparece
nada.
o En la parte derecha aparece el sitio local conteniendo todas sus carpetas y
documentos.



 Mapa del sitio: se verá la estructura del sitio local en forma de árbol, partiendo de la
página principal, apareciendo las distintas páginas que se van llamando mediante
hiperenlaces, figura 4.11.



En cualquiera de las tres vistas así como en el panel de archivos se ofrece una serie de opciones
que permiten la conexión con el sitio remoto, la sincronización y el intercambio de ficheros entre
el sitio local y el remoto o el servidor de prueba, figura 4.12.



También desde cualquiera de las vistas se puede, en la parte derecha, seleccionar un archivo,
pulsar el botón derecho para que aparezca el menú contextual y aparecen una serie de opciones.
Es interesante destacar la opción que permite establecer el documento señalado como página
principal, ver figura 4.13