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.
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.
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.
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.
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.
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.
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.
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.
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.
- 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.
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.
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”.
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. |
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.
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.
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.
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.
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.
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.
Para obtener más información sobre la instalación de complementos, consulte Complementos.
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.
Ahora puede acceder directamente a los formularios de deseos y de comunicación de errores desde Dreamweaver: Ayuda > Enviar error/solicitud de funciones.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.