La nueva versión 2014 de Dreamweaver CC incluye varias mejoras en la Vista en vivo y en el Diseñador de CSS para ayudarle a crear y actualizar contenido móvil y web de forma sencilla. La nueva función Vista rápida de elementos le ayuda a ver, desplazar y editar rápidamente el formato HTML.

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.

Revise el formato del documento con la nueva Vista rápida de elementos, que genera un árbol HTML interactivo para el contenido estático y dinámico. Modifique la estructura estática de contenido en el propio árbol HTML. 

Se ha incluido la Vista rápida de elementos (Ver > Vista rápida de elementos) para ayudarle a agilizar el proceso de desarrollo. En versiones anteriores de Dreamweaver, resaltaba los elementos HTML en la Vista en vivo, cambiaba a la vista de código y editaba los elementos. Después de editarlos, volvía a la Vista en vivo para previsualizar los cambios. Ahora, con la Vista rápida de elementos, puede ver todos los elementos de la página en una sola y práctica vista, y editar el contenido estático.

Para obtener más información, consulte Vista rápida de elementos.

Nuevas funciones de edición de la Vista en vivo

Inspeccione y modifique las propiedades de los elementos HTML desde la propia Vista en vivo y compruebe el resultado sin necesidad de actualizar la página.  

• Inspector rápido de propiedades
• Visualización de elementos
• Edición dinámica de texto
• Inspector de propiedades de la Vista en vivo

Inspector rápido de propiedades

La Vista en vivo muestra ahora el Inspector de propiedades de visualización rápida para los elementos HTML de las páginas. Dependiendo del elemento HTML que seleccione, el Inspector de propiedades de visualización rápida permite editar atributos o texto directamente en la Vista en vivo.

Para obtener más información, consulte el Inspector de propiedades de visualización rápida.

Visualización de elementos

Con la nueva Visualización de elementos, ahora puede asociar elementos HTML con clases e ID directamente en la Vista en vivo. La Visualización de elementos muestra las clases y los ID disponibles para ayudarle a visualizar y a elegir la opción necesaria.

Para obtener más información, consulte Asociación de elementos HTML con clases e ID.

Edición dinámica de texto

Ahora puede editar el texto directamente en la Vista en vivo y previsualizar los cambios sin tener que cambiar entre diferentes vistas.

Haga doble clic en el elemento de texto en la Vista en vivo para pasar al modo de edición. Para obtener más información, consulte Edición de texto directamente en la Vista en vivo.

Inspector de propiedades de la Vista en vivo

El Inspector de propiedades ahora está disponible en la Vista en vivo para poder editar rápidamente la página sin cambiar a la vista de Diseño o de código.

Para obtener más información, consulte el Inspector de propiedades de la Vista en vivo.

Inserción en la Vista en vivo

En esta versión, puede insertar elementos HTML directamente en la Vista en vivo mediante el panel Insertar. Los elementos se insertan en tiempo real sin necesidad de cambiar los modos. También puede obtener una vista previa de los cambios de inmediato. 

Para obtener más información, consulte Inserción de elementos directamente en la Vista en vivo.

Mejoras en el Diseñador de CSS

Interfaz de usuario mejorada para el control de bordes

Un control con fichas que ayuda a definir todas las propiedades de los cuatro bordes de forma fácil e intuitiva.

• Control con fichas para no ver todos los valores a la vez y reducir la confusión.
• Iconos intuitivos y prácticos para todo tipo de usuarios.
• Dos conjuntos de iconos para indicar los estados de no definido/eliminado y desactivado.
• Una ficha unificada “Todos los lados” para definir todas las propiedades de los bordes a la vez.
• La fila calculada ahora dirige a la ficha más adecuada mientras se inspeccionan elementos. 

Para obtener más información, consulte Establecimiento de propiedades de borde.

Copia y pegado de estilos

Ahora puede copiar estilos de un selector y pegarlos en otro. Puede copiar todos los estilos o copiar solamente categorías específicas de estilos, como diseños, textos y bordes.

Haga clic con el botón derecho en un selector y elija entre las opciones disponibles: 

• Si un selector no tiene ningún estilo, se desactivan las opciones Copiar y Copiar todos los estilos.
• Pegar estilos se desactiva para los sitios remotos que no se puedan editar. Sin embargo, las opciones Copiar y Copiar todos los estilos están disponibles.
  
• Es posible pegar estilos que ya existen parcialmente en un selector (superposición). Se pega la unión de todos los selectores.
  
• La copia y el pegado de estilos también funcionan para diferentes vínculos de archivos CSS: estilos importados, vinculados y en línea.
  

Cuadros de texto de edición rápida

Dreamweaver incluye ahora cuadros de texto de edición rápida en los que puede especificar el código de la forma abreviada de las propiedades como margen, relleno, borde y radio del borde. Este cambio se ha realizado para los usuarios que prefieren especificar un código a utilizar el ratón o el teclado para especificar propiedades. 

Mejoras en el flujo de trabajo de las propiedades personalizadas

Anteriormente, hacía clic en + en el panel Propiedades del Diseñador de CSS para añadir “Otras” propiedades (o propiedades personalizadas). Ahora, el usuario dispone de un conjunto de cuadros de texto (nombre y valor de la propiedad) al final de la lista Propiedades. Estos cuadros de texto permiten introducir directamente el nombre de la propiedad y su valor sin tener que hacer clic en +.

Para añadir filas adicionales de propiedades personalizadas, pulse Tabulador.

El nombre del grupo de propiedades “Otras” se ha cambiado cambia a ”Personalizado”.

Métodos abreviados de teclado

Ahora puede añadir o eliminar selectores y propiedades de CSS mediante métodos abreviados de teclado. También puede desplazarse entre los grupos de propiedades en el panel Propiedades.  

Selectores Más específico/Menos específico

Con esta versión, Dreamweaver ofrece un máximo de tres (o menos) sugerencias de reglas mientras añade un selector. Puede hacerlo más o menos específico con la tecla de flecha arriba o flecha abajo.

Desplazarse a la categoría

Anteriormente, al hacer clic en las categorías Fondo u Otro en la parte superior del panel Propiedades del Diseñador de CSS, estas categorías se hacían “visibles” en el panel. En realidad las categorías no se mostraban en la parte superior del panel.

Ahora, las categorías Fondo y Otro (cuyo nombre ha cambiado a Personalizado) se muestran en la parte superior del panel cuando se hace clic en ellas.

Compatibilidad con conexiones SFTP utilizando el archivo de identidad

La versión 2014 de Dreamweaver CC le permite conectar sus servidores de publicación por SFTP mediante pares de claves públicas-privadas y claves de identidad (con o sin frase de contraseña). Con esta mejora a Dreamweaver, la opción de proveedores de servicios de alojamiento web se ha ampliado: puede suscribirse a cualquier proveedor de servicios que requiera la utilización de pares de claves públicas-privadas para la autenticación.

Para obtener más información, consulte Conexiones SFTP.

Mejoras en Deshacer/Rehacer

Hasta ahora, para deshacer/rehacer una operación realizada en el panel Diseñador de CSS, había que hacer clic en el archivo CSS (en archivos relacionados) y, a continuación, deshacer/rehacer la operación. 

Con las mejoras introducidas en la función de deshacer/rehacer, puede deshacer/rehacer una operación directamente en la Vista en vivo de un documento o en el panel Diseñador de CSS. Estos cambios se reflejarán automáticamente en el archivo CSS asociado. Para indicar que el archivo relacionado ha cambiado, la pestaña del archivo correspondiente se resalta aproximadamente 8 segundos.

• Al deshacer/rehacer una acción en el panel Diseñador de CSS, la Vista en vivo se actualiza automáticamente.
• Cuando se edita el documento utilizando el código fuente y se deshacen los cambios en la Vista en vivo, la visualización cambia a la Vista dividida y se presenta el código fuente relacionado.

Todas las acciones de deshacer o rehacer se registran a nivel de archivo HTML. Esto significa que los cambios manuales realizados en un archivo CSS se pueden deshacer desde cualquier archivo relacionado. Por ejemplo, supongamos que style1.css y style2.css están relacionados con index.html. Si añade estilos a .h1 en style1.css y realiza una acción de deshacer en style2.css, el estilo de .h1 se elimina de style1.css.  

Cambios en los flujos de trabajo de Business Catalyst y PhoneGap Build

Business Catalyst y PhoneGap Build se encuentran disponibles como complementos de Dreamweaver. Ahora instale Business Catalyst y PhoneGap Build como extensiones y, a continuación, siga utilizando estos servicios como antes.

Para instalar las extensiones de Business Catalyst y PhoneGap Build, vaya a Administrar > Examinar opciones adicionales, busque las extensiones e instálelas.

Cambios en el acceso a extensiones para Dreamweaver

Ahora puede ver e instalar extensiones de Dreamweaver con Adobe Creative Cloud. Las extensiones ahora se denominan “complementos”.

Si desea examinar Adobe Creative Cloud para buscar complementos, haga clic en Ventana > Examinar opciones adicionales en Dreamweaver. Aparecerá la página de complementos de Adobe Creative Cloud. 

Para obtener más información sobre la instalación de complementos, consulte Complementos.

Cambios en la sincronización de configuración

La función de sincronización de configuración en Dreamweaver le permite mantener sus configuraciones sincronizadas con las instancias de Dreamweaver de sus equipos y Creative Cloud. La versión 2014 de Dreamweaver CC detecta automáticamente si ha activado la sincronización de configuración en la versión anterior de Dreamweaver y le permite importar dichos ajustes desde Creative Cloud.

Al iniciar la versión 2014 de Dreamweaver CC por primera vez tras la instalación, aparece el siguiente cuadro de diálogo: 

• Para importar configuraciones almacenadas en Creative Cloud, haga clic en Importar configuración de sincronización. 

Nota: Esta opción deja de estar disponible posteriormente. 

• Para sincronizar la configuración en la instancia de Dreamweaver actual con Creative Cloud, haga clic en Sincronización local.
  
• Para sincronizar la configuración automáticamente, seleccione Sincronizar configuración siempre automáticamente.
• Para ver las opciones avanzadas de la sincronización de configuración, haga clic en Avanzadas.

Envío de errores o solicitudes de funciones directamente desde Dreamweaver

Ahora puede acceder directamente a los formularios de deseos y de comunicación de errores desde Dreamweaver: Ayuda > Enviar error/solicitud de funciones.

Centro de Ayuda

El nuevo Centro de Ayuda de Dreamweaver muestra cómo se utilizan las nuevas funciones y cómo se realizan las tareas habituales. 

A diferencia de las versiones anteriores, ahora puede descubrir fácilmente nuevas funciones y flujos de trabajo eficaces al iniciar Dreamweaver por primera vez. En cualquier momento puede omitir la presentación de las nuevas funciones o desactivar los mensajes de ayuda internos de la aplicación. Si es necesario, también puede restablecerlos.

• Descripción de las nuevas funciones
• Mensajes internos de la aplicación
• Mensajes internos del producto
• Desactivación o restablecimiento de los mensajes internos de la aplicación y del producto
  

Descripción de las nuevas funciones

Ahora Dreamweaver incluye una breve presentación de las nuevas funciones que ofrece la última versión.
En la presentación se muestran las nuevas funciones y se incluye una galería de vídeos
donde se pueden ver las nuevas funciones en acción.

La descripción de las nuevas funciones o la opción de una breve presentación aparece al
iniciar Dreamweaver. También se ofrece la opción de omitir la presentación e ir a la pantalla
Bienvenido para seguir trabajando.

Nota: La descripción de las nuevas funciones aparece al instalar o actualizar
Dreamweaver o al eliminar preferencias y reiniciar Dreamweaver.

Este es un resumen de lo que se muestra en la descripción de las nuevas funciones:

• Mensaje de bienvenida. También se le pedirá que especifique si ha utilizado Dreamweaver CC anteriormente para poder personalizar la experiencia en consecuencia.
• Presentación y breve descripción de cada una de las funciones (con una opción para omitir la presentación).
• Galería de vídeos relacionados con las nuevas funciones.

Galería de vídeos

Al final de la descripción de las nuevas funciones, aparece la galería de vídeos con vídeos
relacionados con las nuevas funciones. Al pasar el ratón sobre las miniaturas, se muestra una breve descripción del vídeo.

Mensajes internos de la aplicación

Ahora Dreamweaver muestra sugerencias para mejorar la productividad mientras trabaja
en sus proyectos. Con estas sugerencias se pretende ayudar a realizar la tarea en cuestión de forma más eficaz.

Los mensajes aparecen en función de determinados “desencadenadores”. Por ejemplo, al hacer clic en los selectores de etiqueta en cualquier vista o al hacer clic con el botón derecho en un elemento para inspeccionarlo, aparece el mensaje de la Vista rápida de elementos.

La Vista rápida de elementos es una función totalmente nueva que ayuda a ver y editar el formato HTML más fácilmente que los demás métodos probados (desencadenadores).

Una vez que haya realizado una acción de acuerdo con las sugerencias recibidas, estas no vuelven a aparecer para el mismo desencadenador.
Sin embargo, el mensaje aparece de nuevo con los demás desencadenadores identificados.

Puede desactivar los mensajes internos de la aplicación en las Preferencias. Para obtener más
información, consulte Desactivación o restablecimiento de los mensajes internos de la aplicación y del producto. 

Ejemplos de mensajes internos de la aplicación: 

Vista rápida de elementos

Desencadenadores:

• Se hace clic en los selectores de etiqueta (todas las vistas).
• En vivo + Inspeccionar o clic con el botón derecho + Inspeccionar en un elemento.

Mensaje:

Inspector de propiedades de la Vista en vivo para clases e ID 

Desencadenadores:

• Se edita el ID mediante el Inspector de propiedades en la Vista de diseño.

Mensaje:

Mensajes internos del producto

Dreamweaver se integra perfectamente con muchas otras aplicaciones de Creative
Cloud y los mensajes internos del producto presentan estos flujos de trabajo de integración. Mediante estos flujos de trabajo, puede sacar mayor partido a Adobe Creative Cloud y a toda su funcionalidad.

Los mensajes internos del producto aparecen en función de determinados “desencadenadores”.
Por ejemplo, cuando intente utilizar Transiciones de CSS, se propone el flujo de trabajo “Edge Animate” a través del mensaje interno del producto.

Los mensajes internos del producto contienen una breve descripción del flujo de trabajo alternativo (o mejor) que se puede usar en una situación determinada.
También incluye una miniatura de vídeo en la que se puede hacer clic para ver un vídeo que explica el flujo de trabajo.
El botón Más información enlaza con un artículo o un blog que proporciona más información.


Los mensajes internos del producto se muestran una sola vez cuando se produce el desencadenador identificado.

Ejemplos de mensajes internos del producto: 

Edge Animate

Desencadenador:

• Hacer clic en una transición de CSS y, a continuación, hacer clic en +

Mensaje:

Parfait

Desencadenador:

• Insertar imagen > Editar configuración de imagen

Mensaje:

Desactivación o restablecimiento de los mensajes internos de la aplicación y del producto

Vaya al cuadro de diálogo Preferencias > Accesibilidad y siga estos pasos:

• Para desactivar los mensajes, quite la marca de la casilla Mostrar ayuda integrada.

Si restablece los mensajes, no aparecerán los mensajes que ya se hayan mostrado.
Solo se muestran los mensajes que no han aparecido anteriormente.

• Para ver los mensajes que ya se han mostrado, haga clic en Restablecer.

Cambios en el menú Ayuda

Se ha reorganizado el menú Ayuda para que pueda acceder rápidamente a la descripción de las nuevas funciones, la galería de vídeos, la ayuda y los recursos de aprendizaje, así como enviar formularios de errores o solicitudes de funciones.