Inicie Dreamweaver ejecutando el siguiente comando:
- Windows: <installation_path> -enableRemoteDebugging
- Mac: abra <installation_path> --args -enableRemoteDebugging
Nota: Escriba dos guiones delante de los argumentos
Las actualizaciones más recientes a la versión de 2014 de Dreamweaver CC incluyen la integración con Extract para ayudarle a crear sitios móviles y de escritorio a partir de composiciones PSD directamente en Dreamweaver. Las nuevas Guías interactivas facilitan la colocación y la reorganización de elementos HTML. Asimismo, la edición mejorada de la Vista en vivo permite realizar cambios en tiempo real.
Este artículo presenta las siguientes nuevas funciones y otras mejoras, y proporciona vínculos a recursos para obtener más ayuda y cursos de aprendizaje.
¿Es la primera vez que utiliza Dreamweaver? ¿Ya ha usado Dreamweaver antes y ahora quiere profundizar en sus conocimientos? ¿Desea saber qué ha cambiado desde la versión anterior a la versión actual? Tanto si es un usuario principiante o experimentado como si está evaluando la nueva versión de Dreamweaver, ahora puede acceder a todos los recursos esenciales de aprendizaje en la misma pantalla de bienvenida.
La actualización más reciente de la versión de 2014 de Dreamweaver CC ofrece acceso rápido a vídeos (incluidos los de las nuevas funciones), tutoriales prácticos, sugerencias y técnicas, y muchas otras cosas más desde la pantalla de bienvenida.
Esta nueva pantalla de bienvenida solo está disponible para los usuarios que tengan la configuración regional de inglés. Para los usuarios que tengan otras configuraciones regionales, se mostrará la pantalla de bienvenida y una descripción detallada de las nuevas funciones de Dreamweaver CC 2014.1.
Las guías interactivas y el icono de Vista rápida de elementos se muestran en la Vista en vivo al arrastrar imágenes desde el panel Extract. Estas ayudas visuales le ayudarán a colocar la imagen de forma rápida y precisa en la posición deseada.
Ahora podrá mover los elementos de la Vista en vivo arrastrando el nombre de la etiqueta que tengan asociada. Al colocar el puntero del ratón sobre el nombre de una etiqueta, aparecerá el cursor en forma de mano para indicarle que el elemento se puede arrastrar. Para facilitar la colocación del elemento arrastrado, puede ayudarse de las guías interactivas, ya que estas le indicarán la futura ubicación del elemento cuando lo suelte.
Ahora podrá seleccionar texto, imágenes u otros elementos de una etiqueta haciendo clic y arrastrándolos a cualquier lugar siempre que sea dentro de una etiqueta (selección de recuadro). La selección de recuadro le ayuda a seleccionar fácilmente varios elementos que estén dentro de una etiqueta.
La selección de recuadro de la Vista en vivo solo admite operaciones compatibles con el navegador.
Ahora, la visualización de elementos muestra el texto de sugerencia “Clase/ID” para indicar claramente que se puede especificar la clase o el ID.
Además, los cambios realizados en la visualización de elementos se guardan al hacer clic en “+”. Asimismo puedes pulsar Intro o Atrás para guardar los cambios como en las versiones anteriores de Dreamweaver.
Se han añadido diez temas de color nuevos a la Vista de código:
Para obtener más información acerca de los temas de la Vista de código, consulte Configuración del tema de color de la Vista de código.
Esta actualización incluye algunos cambios en la interfaz de usuario del Diseñador de CSS y un cambio en la configuración predeterminada de la casilla de verificación Mostrar conjunto.
Al iniciar, la casilla de verificación Mostrar conjunto está seleccionada de forma predeterminada y los cambios que haga a esta opción se aplicarán al resto de sesiones de Dreamweaver. Por ejemplo, si desactiva esta opción, la siguiente sesión de Dreamweaver conservará dicha configuración y mostrará la opción como desactivada.
A continuación, se indican los cambios en la interfaz de usuario:
Ahora puede depurar remotamente los documentos de Dreamweaver abiertos en Vista en vivo mediante las herramientas de desarrollo Google Chrome DevTools. En Google Chrome, puede activar y utilizar el puerto 5471 siguiendo los pasos siguientes:
Inicie Dreamweaver ejecutando el siguiente comando:
Nota: Escriba dos guiones delante de los argumentos
En el cuadro de diálogo que indica que el puerto 5471 está activado para la depuración, haga clic en OK.
Dreamweaver se iniciará.
Abra los documentos que quiera depurar en la Vista en vivo.
Para empezar a depurar, abra Google Chrome y vaya a localhost:5471. Aparecerá una lista de vínculos a todos los documentos abiertos en Dreamweaver.
Nota: Dado que la nueva pantalla de bienvenida y el panel Extract utilizan Chromium Embedded Framework (CEF), también verá las entradas relacionadas con estas características.
Ahora puede utilizar las herramientas de desarrollo Google Chrome DevTools para depurar los documentos requeridos.
Para detener la depuración y abrir Dreamweaver en modo normal, salga de Dreamweaver y vuelva a iniciarlo.
Ahora, cuando restablezca las preferencias mediante los métodos abreviados del teclado, Dreamweaver creará una copia de seguridad de las preferencias en la carpeta “Copias de seguridad de Adobe Dreamweaver CC 2014.1”. Esta carpeta se crea automáticamente en la misma donde se encontraba la carpeta de preferencias original de Dreamweaver, tanto en Windows como en Mac.
La ruta completa de la carpeta de copia de seguridad se mostrará en el cuadro de diálogo Restaurar preferencias.
Los documentos dinámicos como PHP, CFM y ASP ya no se abren en la Vista de código de forma predeterminada. Ahora se abren del mismo modo (Código/En vivo/Dividido) que el último documento que cerró o el último documento con el que trabajó.
La integración de Extract con Dreamweaver permite que los diseñadores y desarrolladores web puedan aplicar información de diseño y extraer activos optimizados para la web directamente en el entorno de programación. Extract proporciona una solución completa e independiente para extraer la información de estilo y los activos de composiciones PSD, lo que reduce la necesidad de alternar entre Photoshop y Dreamweaver.
Con el panel Extract en Dreamweaver, puede extraer CSS, imágenes, fuentes, colores, degradados y mediciones directamente en su página web. Además de estas funciones principales de Extract, Dreamweaver también ofrece las siguientes funciones únicas:
El espacio de trabajo predeterminado en Dreamweaver (denominado Extract) muestra el panel Extract a la izquierda para que pueda comenzar rápidamente. La primera vez que inicie Dreamweaver, el panel Extract presenta un sencillo tutorial para ayudarle a obtener más información sobre los flujos de trabajo de Extract. Puede hacer clic en Introducción para empezar a utilizar Extract.
Para obtener más información sobre los flujos de trabajo de extracción de Dreamweaver, consulte Integración de Dreamweaver con Extract.
La versión de 64 bits de Dreamweaver está disponible y admite las mismas funciones que la versión de 32 bits. Con esta adición, ahora puede descargar las estructuras siguientes de Dreamweaver de la aplicación Adobe Creative Cloud:
SO |
Ubicación predeterminada de instalación |
Carpeta Preferencias de aplicación |
---|---|---|
Windows de 32 bits |
C:\Archivos de programa\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Windows de 64 bits |
C:\Archivos de programa\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Mac de 64 bits |
/Applications/Adobe Dreamweaver CC 2014.1 |
~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1 |
Compruebe que el equipo esté ejecutando un sistema operativo de 64 bits:
Para comprobar si el equipo es de 64 bits, siga los pasos descritos en los artículos siguientes:
Descargue la versión de 64 bits de Dreamweaver de Creative Cloud e instale la versión.
Las guías interactivas son información visual de la Vista en vivo que indican las posiciones posibles en las que se puede insertar un elemento en los siguientes escenarios:
Las guías interactivas no son compatibles con documentos de cuadrícula fluida.
Las guías interactivas aparecen al señalar con el cursor los diferentes elementos de la página antes de colocar un elemento. Pueden aparecer encima, debajo, a la izquierda o la derecha del elemento sobre el que está el cursor.
Puede utilizar Vista rápida de elementos junto con guías interactivas para insertar de forma más precisa un elemento HTML en la estructura del documento.
Al detenerse un momento antes de colocar el elemento, aparece el icono de Vista rápida de elementos (</>). Cuando señala con el cursor este icono, se abrirá la Vista rápida de elementos y podrá colocar el elemento dentro de la misma.
Ahora puede cortar, copiar, pegar y eliminar elementos en Vista en vivo con el menú contextual del botón derecho. También puede duplicar elementos o seleccionar una etiqueta padre o hijo con el menú contextual de la Vista en vivo.
Puede utilizar los métodos abreviados del teclado (por ejemplo, en Windows, Ctrl + C, Ctrl + X, Ctrl + J y Supr) en la Vista en vivo.
En primer lugar, seleccione un elemento en la Vista en vivo para ver la Visualización de elementos. A continuación, haga clic con el botón derecho del ratón en el área de la etiqueta para ver las opciones anteriores del menú contextual. Las opciones son funcionales a nivel de etiqueta.
Ahora, además de aplicar selectores a un elemento, puede crear un selector en la fuente de CSS deseada y asignar una consulta de medios mediante la Visualización de elementos. Si escribe un selector que no existe en ninguna hoja de estilos y pulsa Intro, la Visualización de elementos le ofrece una serie de opciones para elegir una fuente de CSS y una consulta de medios.
Si no desea elegir una fuente de CSS o una consulta de medios, pulse Esc para cerrar las opciones.
Ahora también puede hacer clic con el botón derecho en un selector aplicado para ir al código correspondiente (opción Ir a código) o para pegar cualquier estilo copiado (opción Pegar estilos).
La opción Ir a código muestra las opciones secundarias si se añade el mismo selector a varias consultas de medios. La opción Pegar estilos muestra las opciones secundarias si los selectores copiados son pseudoselectores o selectores compuestos.
Ahora, Dreamweaver admite el movimiento de los elementos (a nivel de etiqueta) en Vista en vivo. Puede seleccionar un elemento en la Vista en vivo, y arrastrarlo y colocarlo en otra posición.
Haga clic en el elemento que desee mover y, cuando aparezca la Visualización de elementos (cuadro azul alrededor del elemento), arrastre el elemento. Cuando se inicializa la operación de arrastrar, el cursor del ratón cambia para indicar que el elemento está listo para moverse.
Los elementos de referencia (los elementos con respecto a los cuales desea colocar el elemento arrastrado) se resaltan con un borde azul. Las guías interactivas (de color verde) aparecen para indicar las posibles ubicaciones en las que se pueden colocar los elementos con respecto al elemento de referencia.
Solo los elementos estáticos se pueden mover en Vista en vivo. Las etiquetas de contenido dinámicas como PHP no se pueden mover.
Al detenerse un momento antes de colocar el elemento, aparece el icono de Vista rápida de elementos (</>). Cuando señala con el cursor este icono, se abrirá la Vista rápida de elementos y podrá colocar el elemento dentro de la misma.
Dreamweaver ahora admite la navegación por los elementos de la página mediante el teclado para facilitar la tarea a los usuarios que utilizan mucho el teclado y para agilizar el proceso de diseño web. Puede utilizar:
Para obtener más información, consulte Desplazamiento con teclado en Vista en vivo.
Al pulsar Ctrl + T en Windows o Cmd + T en Mac en la Vista en vivo, ahora se abre Quick Tag Editor para el elemento seleccionado. Quick Tag Editor cuenta con tres estados: Editar etiqueta, Ajustar etiqueta e Insertar HTML. Puede alternar entre estos estados con Ctrl/Cmd + T.
La barra de herramientas Documento se ha modificado y simplificado.
Los espacios de trabajo listos para su uso disponibles con Dreamweaver han cambiado y son los siguientes:
Actualmente, el espacio de trabajo predeterminado es Extract. Este espacio de trabajo muestra el panel Extract a la izquierda y la página web a la derecha. La primera vez que inicie Dreamweaver, el panel Extract muestra un sencillo tutorial para ayudarle a obtener más información sobre los flujos de trabajo de Extract. Para empezar a utilizar Extract, haga clic en Introducción.
Actualmente, la vista predeterminada para documentos HTML es la vista dividida (dividida horizontalmente para mostrar la Vista en vivo y la Vista de código). Los archivos dinámicos como los indicados a continuación se abren en la Vista de código completa de forma predeterminada. Al dividir la vista, estos documentos se muestran en la vista de Diseño y en la Vista de código.
Sugerencia: para cambiar a la Vista de diseño, haga clic en la lista desplegable adyacente a las opciones de “Vista en vivo” y haga clic en Diseño. Para cambiar la división horizontal por una división vertical, seleccione Ver > Dividir verticalmente. La Vista en vivo/de diseño ahora aparece a la izquierda. Para que aparezca la Vista en vivo/de diseño a la derecha, anule la selección de Ver > Vista en vivo a la izquierda o Vista de diseño a la izquierda.
Dreamweaver recuerda el estado de la Vista en vivo que elija para un documento HTML y aplica la misma vista a todos los documentos HTML que abra posteriormente. Por ejemplo, imagine que el documento que abre primero es HTML1. La vista del documento se divide con la Vista de código y la Vista en vivo. Imagine que cambia la vista de este documento a la Vista en vivo completa. A continuación, el siguiente documento que abra (por ejemplo, HTML2) se muestra en la Vista en vivo completa.
Las nuevas capacidades de edición en Vista en vivo se incorporaron en la versión anterior de Dreamweaver CC. En esta versión, estas funciones de edición en Vista en vivo también están disponibles para los documentos de cuadrícula fluida. La edición en Vista en vivo acelera el desarrollo de las páginas web fluidas ya que permite editar y ver la vista previa de los cambios de forma instantánea en la misma vista.
Las siguientes funciones ayudan a editar documentos de cuadrícula fluida en Vista en vivo:
Ahora también puede visualizar la estructura DOM de HTML de un documento de cuadrícula fluida con Vista rápida de elementos.
Nota: La vista rápida de elementos en los diseños con cuadrícula fluida no le permite copiar, pegar, duplicar o reorganizar los elementos HTML.
La interfaz de usuario para ver y editar documentos de cuadrícula fluida se ha modificado para incorporar las funciones de edición en la Vista en vivo. Ahora, al seleccionar un elemento en un documento de cuadrícula fluida, la Visualización de elementos aparece junto con los demás controles, como Ocultar elementos y Comienza una nueva fila.
Asimismo, los documentos de cuadrícula fluida ahora se abren directamente en Vista en vivo. Ya no es posible ver ni editar documentos de cuadrícula fluida en la vista de Diseño.
Para obtener más información sobre los documentos de cuadrícula fluida, consulte Diseño interactivo mediante diseños de cuadrícula fluida.
El cuadro de diálogo Insertar para documentos de cuadrícula fluida ahora contiene un asistente de posición. El asistente de posición permite colocar el elemento insertado antes o después del elemento seleccionado en Vista en vivo, o bien anidarlo dentro de la misma. Para obtener más información sobre la inserción de elementos de cuadrícula fluida, consulte Insertar elementos de cuadrícula fluida.
La opción Administrar elementos ocultos (botón de ojo en la barra de herramientas Documento) se ha desplazado al menú contextual de un documento de cuadrícula fluida.
Para administrar elementos ocultos, haga clic con el botón derecho del ratón en la página de cuadrícula fluida y, a continuación, seleccione “Administrar elementos ocultos” para ocultar los elementos ocultos. Para ocultar estos elementos, puede hacer clic en el icono de ojo en el HUD.
Ahora puede elegir uno de los temas de color siguientes disponibles para Vista de código:
Utilice las preferencias de colores de código para especificar un tema para Vista de código. Puede personalizar el tema para elegir esquemas de colores diferentes para los fondos, primeros planos y caracteres ocultos.
Para cada tipo de documento mencionado, puede personalizar los colores para las distintas categorías de etiquetas y elementos de código, como etiquetas relacionadas con formularios o identificadores de JavaScript. Por ejemplo, con el tema Cuervo aplicado a todos los tipos de documento, puede elegir un color azul para las etiquetas relacionadas con formularios en documentos HTML.
Todos los ajustes personalizados en un tema se guardan al hacer clic en Aplicar y el tema personalizado está disponible para su uso en distintas sesiones de Dreamweaver.
Puede mantener los temas de código personalizados sincronizados con sus instancias de Dreamweaver utilizando la opción Sincronizar configuración en Preferencias. Para obtener más información, consulte Sincronización de la configuración de Dreamweaver con Creative Cloud.
Para obtener más información, consulte Configuración del tema de color de Vista de código.
La sincronización de Vista de código y Vista en vivo permite ver inmediatamente una vista previa de los cambios realizados en el código en Vista en vivo. A diferencia de las versiones anteriores de Dreamweaver, no tiene que hacer clic en Actualizar para ver una vista previa de los cambios realizados en Vista en vivo.
Para ver la sincronización de Vista de código y Vista en vivo en funcionamiento, consulte los siguientes flujos de trabajo (cuando el cursor está en Vista de código):
Cualquier cambio realizado en el código JavaScript requiere la actualización o recarga completa de la página para reflejar los cambios en la Vista en vivo.
El panel Activos (Windows > Activos) está ahora disponible en Vista en vivo. Con el panel Activos puede administrar fácilmente las tareas siguientes:
Nota: Puede arrastrar activos desde el panel de vista previa solo en Mac.
Para obtener instrucciones detalladas sobre cómo utilizar el panel Activos, consulte Uso de activos.
Dreamweaver ahora incluye nuevas plantillas de inicio interactivas que ayudan a iniciar los sitios web interactivos más rápidamente. Puede elegir una de las plantillas siguientes en el cuadro de diálogo Nuevo documento (Archivo > Nuevo > Plantillas de inicio):
Cuando elige una plantilla y hace clic en Crear en el cuadro de diálogo Nuevo documento, Dreamweaver le pedirá que guarde el documento nuevo. Al guardar el documento, realiza una copia de la plantilla, que puede personalizar más tarde para adaptarla a sus necesidades.
La resolución de problemas con Dreamweaver a veces requiere que elimine la carpeta de preferencias que contiene todos los ajustes personalizados. Antes de esta versión, era preciso navegar manualmente a la carpeta de preferencias del equipo y eliminar la carpeta. Esta versión permite eliminar mediante un solo clic las preferencias utilizando un cuadro de diálogo:
Puede abrir el cuadro de diálogo Restaurar preferencias manteniendo pulsadas las teclas de método abreviado siguientes al iniciar Dreamweaver:
Utilice la opción de restauración de preferencias con prudencia. Al restaurar las preferencias y la configuración, se perderán todos los ajustes personalizados en el espacio de trabajo, los métodos abreviados de teclado, las extensiones y las preferencias de la aplicación.
En Mac, mantenga pulsadas las teclas Cmd + Opción + Mayús al iniciar Dreamweaver (haciendo clic en el icono de Dreamweaver en el Dock).
En Windows, realice los pasos siguientes:
Vaya a la carpeta de instalación, localice Dreamweaver.exe y haga clic en el archivo.
Mantenga pulsadas las teclas Windows + Ctrl + Mayús y haga doble clic en Dreamweaver.exe.
Asegúrese de que mantiene pulsadas las teclas de acceso directo arriba mencionadas incluso cuando aparezca el cuadro de diálogo Control de Cuenta de Usuario (UAC).
Puede importar la configuración de la versión anterior de Dreamweaver guardada en Creative Cloud mediante el cuadro de diálogo Preferencias. La configuración importada de la nube anulará todos los ajustes locales y se aplicará la próxima vez que se inicie Dreamweaver.
También, a partir de esta versión en adelante, además de las configuraciones que sincronizamos en las versiones anteriores, las siguientes configuraciones también se sincronizarán con Creative Cloud:
Esta versión de Dreamweaver incluye un gran número de mejoras en la experiencia del usuario con el Diseñador de CSS. El panel Diseñador de CSS también incluye una experiencia de incorporación para ayudarle a familiarizarse rápidamente con los flujos de trabajo.
La opción Plantillas de sitio de la pantalla de bienvenida se ha sustituido por Plantillas de inicio. Puede acceder a Plantillas de sitio en el cuadro de diálogo Nuevo documento (Archivo > Nuevo).
Dreamweaver ahora incluye las bibliotecas de jQuery actualizadas como se indica a continuación:
Se han eliminado las páginas de inicio de jQuery.
La integración directa de Dreamweaver con PhoneGap Build para empaquetar aplicaciones no se contempla en la última actualización a la versión de 2014 de Dreamweaver CC (octubre de 2014) ni en las posteriores.
Sin embargo, puede acceder directamente al servicio PhoneGap Build en línea y utilizar las actualizaciones más recientes de la característica para empaquetar sus como aplicaciones móviles nativas.
Inicia sesión en tu cuenta