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.

Adobe Dreamweaver CC 2014.1.1 (febrero de 2015)

Nueva pantalla de bienvenida

¿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.

Pantalla de bienvenida
Pantalla de bienvenida

Nota:

la 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.

Mejoras en el panel Extract

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.

Panel Extract
Panel Extract

Mejoras en la edición de la Vista en vivo

Arrastre y colocación de elementos

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.

Selección de recuadro

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.

Nota:

la selección de recuadro de la Vista en vivo solo admite operaciones compatibles con el navegador.

Mejoras en la visualización de elementos

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 “+”. También puede pulsar Intro o Retorno para guardar los cambios, al igual que en las versiones anteriores de Dreamweaver.

Nuevos temas en la Vista de código

Se han añadido diez temas de color nuevos a la Vista de código:

  • ReconOjos
  • Havenjark
  • Luz solar, oscuro
  • Luz solar, claro
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Luz fría
  • Roboticket

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.

Mejoras en el Diseñador de CSS

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:

  • El panel Diseñador de CSS se desplaza al añadir una propiedad: al hacer clic en “+” en la sección Propiedades, el panel se desplaza para que la fila Añadir propiedad se coloque casi en el centro del panel Propiedades. Si la sección Propiedades es demasiado pequeña, el panel se desplaza para mostrar la fila Añadir propiedad en la parte inferior de la sección.
  • Resaltado del fondo: cuando el cursor está sobre el cuadro de texto Añadir nueva propiedad, la fila se resalta con un fondo gris. 
  • Posición de los botones “+” y “-”: los botones “+” y “-” que solían aparecer a la derecha de cada sección del panel Diseñador de CSS (Fuente, Selectores, Consulta de medios y Propiedades), ahora se han colocado a la izquierda para hacerlos más visibles.
  • La categoría “Personalizados” ahora se llama “Más”.

Depuración remota de Vista en vivo

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:

  1. Inicie Dreamweaver ejecutando el siguiente comando:

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: abra <installation_path> --args -enableRemoteDebugging

    Nota: escriba dos guiones delante de los argumentos

  2. 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á.

    Haga clic en Aceptar en el cuadro de diálogo para iniciar Dreamweaver
    Haga clic en Aceptar en el cuadro de diálogo para iniciar Dreamweaver

  3. Abra los documentos que quiera depurar en la Vista en vivo.

  4. 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.

  5. Para detener la depuración y abrir Dreamweaver en modo normal, salga de Dreamweaver y vuelva a iniciarlo.

Otras mejoras

Cambios en el flujo de trabajo de la restauración de preferencias

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.

Restablecimiento de la configuración y las preferencias
Restablecimiento de la configuración y las preferencias

Cambio en la vista de documentos dinámicos

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ó.

Adobe Dreamweaver CC 2014.1 (octubre de 2014)

Extract en Dreamweaver

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:

  • Acceso directo a sus archivos PSD en Creative Cloud y a los archivos PSD compartidos con usted en una carpeta de colaboración
  • Sugerencias de código contextual para definir fácilmente fuentes, colores y degradados en sus CSS
  • Compatibilidad con la función Arrastrar y colocar para crear etiquetas de imagen desde capas PSD
  • Pegado de estilos directamente en la Vista en vivo (por ejemplo, en el Diseñador de CSS y en la Visualización de elementos)

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.

Panel Extract Espacio de trabajo predeterminado
Panel Extract

Para obtener más información sobre los flujos de trabajo de extracción de Dreamweaver, consulte Integración de Dreamweaver con Extract.

Arquitectura de 64 bits

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

Preguntas frecuentes

  • ¿Se ejecutará una aplicación de 64 bits en una versión de Windows de 32 bits? - No
  • ¿Puedo instalar las versiones de 32 y 64 bits en el mismo equipo Windows? - No
  • ¿Cómo puedo comprobar si el sistema ejecuta una versión de 32 o 64 bits de Dreamweaver?
    • Windows: inicie Dreamweaver. Abra el Administrador de tareas y busque el proceso de Dreamweaver. Si la versión iniciada de Dreamweaver es de 64 bits, el nombre del proceso será “Dreamweaver.exe”. Si, por el contrario, la versión iniciada es de 32 bits, el nombre del proceso será “Dreamweaver.exe *32”.
    • Mac: abra el Monitor de actividades y vaya a Vista > Columnas > Tipo. Busque Dreamweaver en Monitor de actividades y observe la columna Tipo. Si la versión de Dreamweaver es de 64 bits, la columna Tipo indicará “64 bits”.

Instalación de la versión de 64 bits de Dreamweaver

  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:

  2. Descargue la versión de 64 bits de Dreamweaver de Creative Cloud e instale la versión.

Mejoras de Vista en vivo

Guías interactivas

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:

  • Al arrastrar desde el panel Insertar
  • Al arrastrar desde el panel Activos
  • Al arrastrar (mover) elementos en la Vista en vivo

Nota:

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 señalado por el cursor.

  • Encima y Debajo: Aparece al señalar con el cursor todo tipo de elementos/etiquetas, excepto etiquetas en línea. Cuando señala con el cursor el primer 50 % (la parte superior) del elemento, aparecen guías encima del elemento señalado. Cuando señala con el cursor el segundo 50 % (la parte inferior) del elemento, aparecen guías debajo del elemento señalado.
Guías interactivas encima y debajo de elementos señalados
Guías interactivas encima y debajo de elementos señalados

  • Izquierda y Derecha: Aparece al señalar con el cursor las etiquetas en línea, por ejemplo, <a>, <span> o las etiquetas que tienen el conjunto de propiedad flotante “float property”.
Guías interactivas a la derecha e izquierda de elementos señalados
Guías interactivas a la derecha e izquierda de elementos señalados

Inserción precisa de un elemento estructural

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á Vista rápida de elementos y podrá colocar el elemento dentro de la misma.

Icono de Vista rápida de elementos
Icono Vista rápida de elementos que ayuda a insertar con precisión

Menú contextual en Vista en vivo

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.

Nota:

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. 

Cambios en la Visualización de elementos

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.

Opciones de la fuente de CSS y consultas de medios en la Visualización de elementos
Opciones de la fuente de CSS y consultas de medios en la Visualización de elementos

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).

Opciones Ir a código y Pegar estilos en la Visualización de elementos
Opciones Ir a código y Pegar estilos en la Visualización de elementos

Nota:

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.

Desplazamiento de elementos en Vista en vivo

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.

  1. 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.

  2. 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.

Nota:

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. 

Desplazamiento con teclado en Vista en vivo

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 desplazarse por los elementos de la página, utilice las teclas de flecha arriba y abajo. El desplazamiento con teclado en Vista en vivo facilita el acceso a elementos anidados y ajustados.
  • La tecla Tab permite desplazarse por los selectores en Visualización de elementos.

Para obtener más información, consulte Desplazamiento con teclado en Vista en vivo.

Quick Tag Editor 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.

Quick Tag Editor en Vista en vivo
Quick Tag Editor en Vista en vivo

Cambios en el espacio de trabajo de Dreamweaver

Cambios en la barra de herramientas Documento

La barra de herramientas Documento se ha modificado y simplificado.

  • Las opciones de la Vista de diseño y Vista en vivo se han combinado en un solo control (desplegable).
Opciones de la vistas Diseño y Vista en vivo de Dreamweaver CC (octubre de 2014)
Opciones de la vista de Diseño y la Vista en vivo en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Botones de la vista de Diseño y la Vista en vivo en la barra de herramientas Documento en versiones anteriores
Botones de la Vista de diseño y la Vista en vivo en la barra de herramientas Documento en versiones anteriores

  • El campo Título de documento ahora se encuentra en el Inspector de propiedades.
Barra de herramientas Documento de Dreamweaver CC (octubre de 2014)
Barra de herramientas Documento en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Campo Título de documento en el Inspector de propiedades de la versión 2014 de Dreamweaver CC (octubre de 2014)
Campo Título de documento en el Inspector de propiedades en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Campo Título de la barra de herramientas Documento en versiones anteriores
Campo Título de la barra de herramientas Documento en versiones anteriores

  • Los botones de Inspeccionar y Código en vivo han sido reemplazados por iconos.
Iconos de Código en vivo e Inspeccionar de Dreamweaver CC (octubre de 2014)
Iconos de Código en vivo e Inspeccionar en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Botones de Código en vivo e Inspeccionar en versiones anteriores
Botones de Código en vivo e Inspeccionar en versiones anteriores

  • Las opciones Atrás, Adelante y Actualizar están agrupadas en la barra Dirección y se encuentran en el centro de la barra Documento.
Barra de direcciones con las opciones Atrás, Adelante y Actualizar de Dreamweaver CC (octubre de 2014)
Barra de direcciones con las opciones Atrás, Adelante y Actualizar en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Barra de direcciones con las opciones Atrás, Adelante y Actualizar en versiones anteriores
Barra de direcciones con las opciones Atrás, Adelante y Actualizar en versiones anteriores

  • Vista previa/Depurar en navegador, las opciones de la Vista en vivo y los iconos de Administración de archivos aparecen agrupados y alineados a la derecha de la barra de herramientas Documento.
Iconos de Vista previa, Depurar en navegador, Opciones de la Vista en vivo y Administración de archivos de Dreamweaver CC (octubre de 2014)
Vista previa, Depurar en navegador, opciones de la Vista en vivo e iconos de Administración de archivos en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Iconos de Vista previa, Depurar en navegador, Opciones de Vista en vivo y Administración de archivos de versiones anteriores
Iconos de Vista previa, Depurar en navegador, Opciones de Vista en vivo y Administración de archivos de versiones anteriores

Cambios en el espacio de trabajo predeterminado

Los espacios de trabajo listos para su uso disponibles con Dreamweaver han cambiado y son los siguientes:

  • Código
  • Diseño
  • Extract
Espacios de trabajo
Espacios de trabajo

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.

Espacio de trabajo de Extract
Espacio de trabajo de Extract

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.

  • PHP
  • Plantilla PHP (Example.dwt.php)
  • ASP
  • Plantilla ASP (Example.dwt.asp)
  • JSP
  • Plantilla de JSP (Example.dwt.jsp)
  • CFM
  • Plantilla CFM (Example.dwt.cfm)
Vista predeterminada de los documentos HTML en la Vista en vivo y la Vista de código
Vista predeterminada de los documentos HTML en la Vista en vivo y la Vista de código

Vista predeterminada de los documentos dinámicos en la Vista de código completa
Vista predeterminada de los documentos dinámicos en la Vista de código completa

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.  

Cambios en los documentos de cuadrícula fluida

Compatibilidad para la edición en Vista en vivo

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.

Opciones de cuadrícula fluida en versiones anteriores
Opciones de cuadrícula fluida en versiones anteriores

Opciones de cuadrícula fluida con Visualización de elementos de Dreamweaver CC (octubre de 2014)
Opciones de cuadrícula fluida junto con la Visualización de elementos en la actualización más reciente de Dreamweaver CC (octubre de 2014)

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.

Barra de herramientas Documento de Dreamweaver CC (octubre de 2014)
Barra de herramientas Documento en la actualización más reciente de Dreamweaver CC (octubre de 2014)

Barra de herramientas Documento en un documento de cuadrícula fluida en versiones anteriores
Barra de herramientas Documento en un documento de cuadrícula fluida en versiones anteriores

Para obtener más información sobre los documentos de cuadrícula fluida, consulte Diseño interactivo mediante diseños de cuadrícula fluida.

Cambios en el flujo de trabajo de inserción

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.

Cambio en la opción Administrar elementos ocultos

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. 

Opción Administrar elementos ocultos del menú contextual de Dreamweaver CC (octubre de 2014)
Opción Administrar elementos ocultos en el menú contextual en la actualización más reciente de Dreamweaver CC (octubre de 2014)

El icono de ojo para la administración de elementos ocultos en versiones anteriores
El icono de ojo para la administración de elementos ocultos en versiones anteriores

Temas de color listos para su uso en Vista de código

Ahora puede elegir uno de los temas de color siguientes disponibles para Vista de código:

  • Clásico (predeterminado; igual que en las versiones anteriores de Dreamweaver)
  • Cuervo
  • Pizarra
  • Blanche
  • Geneva
Temas Clásico, Cuervo, Pizarra, Blanche y Geneva
Temas Clásico, Cuervo, Pizarra, Blanche y Geneva

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.

Nota:

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.

Sincronización de Vista en vivo y 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):

  • Operaciones de texto, como Cortar/Copiar/Pegar/Eliminar, Deshacer/Rehacer.
  • Desplazamiento de elementos en Vista rápida de elementos cuando el cursor está en Vista de código.
  • Escritura en Vista de código.
  • Acciones Eliminar/Duplicar/Copiar/Pegar en Vista rápida de elementos (opciones del botón derecho).
  • Operaciones en el Inspector de propiedades, como el cambio de formatos de texto: Negrita/Cursiva, cambio de clase, ID, formato, propiedades de página, y aplicación de fuentes.
  • Añadir/eliminar clases o ID mediante sugerencias de código en Vista de código.
  • Inserción de elementos, como Div, imágenes, hipervínculos y elementos estructurales del panel Insertar en Vista de código.
  • Añadir/editar estilos CSS en la etiqueta <style>. 
  • Edición de código en archivos CSS.

Nota:

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. 

Panel Activos en 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:

  • Arrastrar o insertar activos (imágenes, URL o medios) del panel de vista previa o la vista de lista del panel Activos.

Nota: puede arrastrar activos desde el panel de vista previa solo en Mac.

  • Copiar el valor de un color y pegarlo en cualquier campo de texto de Dreamweaver, como en las propiedades del Diseñador de CSS, en Vista de código, en el selector de color o incluso en otras aplicaciones como el Bloc de notas.

Nota:

 

  • Debido a que las categorías Scripts, Plantilla y Biblioteca son más importantes en Vista de código, estas se han ocultado en el panel Activos de Vista en vivo.
  • En esta versión de Dreamweaver CC, las categorías Flash y Películas se combinan en una única categoría denominada "Medios".
         

Panel Activos en Vista en vivo
Panel Activos en Vista en vivo

Panel Activos en Vista de código y Diseño
Panel Activos en Vista de código y Diseño

Para obtener instrucciones detalladas sobre cómo utilizar el panel Activos, consulte Uso de activos.

Nuevas plantillas de inicio

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):

  • Página Acerca de
  • Entrada de blog
  • Comercio electrónico
  • Correo electrónico
  • Cartera
Nuevas plantillas de inicio interactivas
Nuevas plantillas de inicio interactivas

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.

Restablecer preferencias al iniciar

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:

Restaurar preferencias
Restaurar preferencias

Puede abrir el cuadro de diálogo Restaurar preferencias manteniendo pulsadas las teclas de método abreviado siguientes al iniciar Dreamweaver:

  • (Win) Tecla Windows + Ctrl + Mayús
  • (Mac) Cmd + Opción + Mayús

Nota:

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:

  1. Vaya a la carpeta de instalación, localice Dreamweaver.exe y haga clic en el archivo.

  2. Mantenga pulsadas las teclas Windows + Ctrl + Mayús y haga doble clic en Dreamweaver.exe.

Asegúrese de mantener pulsadas las teclas de método abreviado mencionadas anteriormente incluso cuando aparezca el cuadro de diálogo de Control de cuenta de usuario (CCU). 

Otras mejoras

Cambios en la sincronización de configuración

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.

Importar configuración de versiones anteriores de Dreamweaver
Importar configuración de versiones anteriores de 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:

Cambios en el Diseñador de CSS

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.

Cambios en la pantalla de bienvenida

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).

Actualizaciones de la versión de jQuery

Dreamweaver ahora incluye las bibliotecas de jQuery actualizadas como se indica a continuación:

  • De jQuery - 1.8.3 a jQuery - 1.11.1
  • De IU de jQuery - 1.9.2 a IU de jQuery - 1.10.4

Se han eliminado las páginas de inicio de jQuery. 

Actualización de PhoneGap

La integración directa de Dreamweaver con PhoneGap Build para el empaquetado de aplicaciones no es compatible con la actualización más reciente a la versión de 2014 de Dreamweaver CC (octubre de 2014), y 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. Para obtener más información, consulte Uso de PhoneGap Build con la actualización más reciente a la versión de 2014 de Dreamweaver CC.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea