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.

Vista rápida de elementos

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. 

Vista rápida de elementos
Vista rápida de elementos

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 de propiedades de visualización rápida

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.

Inspector de propiedades de visualización rápida para editar atributos de imagen
Inspector de propiedades de visualización rápida para editar atributos de imagen

Inspector de propiedades de la Vista en vivo para dar formato al texto
Inspector de propiedades de visualización rápida para dar formato al texto


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.

Visualización de elementos para editar clases e ID
Visualización de elementos para editar clases e ID

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.

Edición de texto directamente en la Vista en vivo. Edición dinámica de texto.
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.

Inspector de propiedades de la Vista en vivo
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.

Arrastrar y soltar en la Vista en vivo desde el panel Insertar
Arrastrar y soltar en la Vista en vivo desde el panel Insertar

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. 
Propiedades de la opción Control de bordes antes de la versión 2014 de Dreamweaver CC
Propiedades de la opción Control de bordes antes de la versión 2014 de Dreamweaver CC

Propiedades de la opción Control de bordes en la versión 2014 de Dreamweaver CC
Propiedades de la opción Control de bordes en la versión 2014 de Dreamweaver CC


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: 

Copia de estilos con el Diseñador de CSS
Copia de estilos con el Diseñador de CSS

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

Cuadros de texto de edición rápida
Cuadros de texto de edición rápida

Especificación de las propiedades
Especificación de las 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”.

Cuadros de texto para agregar el valor y el nombre de propiedad
Cuadros de texto para agregar el valor y el nombre de propiedad

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.  

Método abreviado Flujo de trabajo
CTRL + Alt + [Mayús =] Añade un selector (si el control está en la sección del selector).
CTRL + Alt + S Añade un selector (si el control está en cualquier lugar de la aplicación).
CTRL + Alt + [Mayús =] Añade una propiedad (si el control está en la sección de la propiedad).
CTRL + Alt + P Añade una propiedad (si el control está en cualquier lugar de la aplicación).
Seleccionar + Supr Elimina el selector si está seleccionado.
CTRL + Alt + (RePág/AvPág) Cambia de sección en el subpanel de propiedades. 

Selectores más específicos/menos específicos

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

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

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.

Desplazarse a la categoría
Desplazarse a la categoría

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.

Nota:

Dreamweaver solo admite archivos de clave OpenSSH.

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

Nota:

Para deshacer/rehacer los cambios en los archivos JavaScript, cambie al archivo JS correspondiente y, a continuación, realice la acción deshacer/rehacer. 

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. Aparece la página de complementos de Adobe Creative Cloud. 

Ventana > Extensiones en Dreamweaver CC 13.0
Ventana > Extensiones en Dreamweaver CC 13.0

Ventana > Examinar opciones adicionales en Dreamweaver CC 2014
Ventana > Examinar opciones adicionales en la versión 2014 de Dreamweaver CC


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: 

Importar configuración de sincronización
Importar configuración de sincronización

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

Enviar errores/solicitudes de funciones en el menú Ayuda
Enviar errores/solicitudes de funciones en el menú Ayuda

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

Ahora Dreamweaver incluye 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.

Presentación de las nuevas funciones
Presentación de las nuevas funciones

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.

Galería de vídeos
Galería de vídeos

Nota:

Puede acceder a la descripción de las nuevas funciones y a la galería de vídeos en cualquier momento mientras utiliza Dreamweaver.
Para ello, vaya al menú Ayuda o a la pantalla Bienvenido y haga clic en la opción correspondiente.

Mensajes internos de la aplicación

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

Los mensajes aparecen en función de determinados "desencadenantes". 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 (desencadenantes).

Una vez que haya realizado una acción de acuerdo con las sugerencias recibidas, estas no vuelven a aparecer para el mismo desencadenante.
Sin embargo, el mensaje aparece de nuevo con los demás desencadenantes 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

Desencadenantes:

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

Mensaje de Vista rápida de elementos
Mensaje de Vista rápida de elementos

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

Desencadenantes:

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

Mensaje:

Mensaje de Vista en vivo
Mensaje de Vista en vivo

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 "desencadenantes". 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 desencadenante identificado.

Nota:

Para ver los mensajes de nuevo, puede restablecer la opción de ayuda de la aplicación en 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 del producto: 

Edge Animate

Desencadenante:

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

Mensaje:

Mensaje de Edge Animate
Mensaje de Edge Animate

Parfait

Desencadenante:

  • Insertar imagen > Editar configuración de imagen

Mensaje:

Editar configuración de imagen
Editar configuración de imagen

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.
desactivar sugerencias. desactivar los mensajes internos de la aplicación.
Preferencias para desactivar o restablecer la ayuda interna de la aplicación

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.

Menú Ayuda antes de Dreamweaver CC 2014
Menú Ayuda antes de la versión 2014 de Dreamweaver CC

Menú Ayuda de Dreamweaver CC 2014
Menú Ayuda en 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