Resumen de las nuevas funciones

La versión de 2015 de Dreamweaver CC se centra en el diseño interactivo, las mejoras en las funciones de edición de código, la vista previa de las páginas web en los dispositivos y la extracción en lote de imágenes optimizadas para la web con diferentes resoluciones desde las composiciones de Photoshop. La integración con el framework de Bootstrap le ayuda a crear sitios web interactivos para dispositivos móviles antes que para escritorio. Las consultas de medios visuales complementan aún más la experiencia de diseño de los sitios web interactivos, pues le permiten visualizar y modificar su diseño en diferentes puntos de corte. 

Esta versión también incluye varias mejoras en las funciones de edición de la Vista en vivo y el Diseñador de CSS. En este artículo se presentan las mencionadas nuevas funciones y mejoras, y se proporcionan vínculos a recursos para obtener más ayuda y cursos de aprendizaje.

Ahora, Dreamweaver le permite probar sus páginas web finalizadas en varios dispositivos simultáneamente. Puede ver cómo se reajusta la página web según los diferentes factores de formato y probar las características interactivas de las páginas. ¡Y todo ello sin tener que instalar ninguna aplicación móvil ni conectar físicamente los dispositivos al escritorio! Solo tiene que escanear con sus dispositivos el código QR que se genera automáticamente y obtendrá una vista previa de sus páginas web en los mismos.

La inspección en vivo, cuando se activa en el escritorio, muestra todos los dispositivos conectados y le ayuda tanto a inspeccionar los diferentes elementos como a retocar el diseño a medida que lo vaya necesitando.

Para obtener información detallada, consulte Obtención de vista previa e inspección de páginas web en varios dispositivos.

Consultas de medios visuales

Las barras de consulta de medios visuales son la representación visual de las consultas de medios que están presentes en una página. Estas barras le ayudan a visualizar la página web en los diferentes puntos de corte y el modo en que los diferentes componentes de la página web se reajustan en las diferentes ventanas gráficas. Al ver la página en diferentes ventanas gráficas, puede hacer cambios de diseño que resulten específicos a esa ventana sin que afecten al diseño de la página en el resto de ventanas gráficas.

La función Consulta de medios visuales consta de tres barras con forma de filas horizontales y cada una representa una categoría de consulta de medios:

•  Verde: consultas de medios con condiciones de max-width
•  Azul: consultas de medios con condiciones tanto de min-width como de max-width
•  Morado: consultas de medios con condiciones de min-width

Para obtener más información, puede ver Consultas de medios visuales.

Compatibilidad con la depuración de código mediante Linting

Con esta nueva versión de Dreamweaver, ahora puede depurar el código para buscar errores habituales gracias a Linting. Linting es el proceso de análisis de código que se hace para avistar rápidamente los posibles errores o un uso extraño del código. Dreamweaver puede depurar archivos HTML, CSS y de JavaScript mediante Linting al cargarlos, guardarlos o editarlos. Luego, tanto los errores como las advertencias se muestran en el nuevo panel Salida.

Para obtener más información, consulte Depuración de código mediante Linting.

Compatibilidad con Emmet

¿Es un ávido desarrollador capaz de escribir varias líneas de código en Dreamweaver? Ahorre tiempo utilizando las abreviaturas de Emmet para programar. Estas abreviaturas, fáciles de recordar y escribir, se amplían y se muestran como código completo en la Vista de código al pulsar la tecla Tabulador.

Para obtener información detallada, consulte Insertar código utilizando Emmet.

Vista previa en la Vista de código

Si está trabajando en la vista Dividir, puede observar los cambios que haga a las imágenes o los colores de manera instantánea en la Vista en vivo o la vista de Diseño. Sin embargo, si prefiere trabajar en la Vista de código, las imágenes se muestran como nombres de archivos, lo que no resulta demasiado intuitivo la mayoría de las veces. Los colores (a menos que se utilicen colores predeterminados) también se muestran como un conjunto de números que puede resultar abrumador. Pero con esta versión de Dreamweaver, puede obtener rápidamente una vista previa de las imágenes y los colores utilizados en la Vista de código. Esta función le permite establecer relaciones visuales entre los nombres de los archivos de imágenes y los formatos de colores con la imagen o el color que representan en la realidad. Como resultado, puede tomar decisiones de diseño rápidamente y reducir el tiempo de desarrollo considerablemente.

Para obtener más información, consulte Vista previa de imágenes y colores en la Vista de código.

La Vista de código también muestra una vista previa de los errores. El número de línea donde hay código erróneo se resalta en rojo. De este modo, al pasar el ratón sobre el número, se muestra una breve descripción del error.

Nota: Solo se muestra el primer error de la línea. Si la línea solo tiene una advertencia, se muestra la descripción de la advertencia. Si la línea contiene una advertencia y un error, solo se muestra la descripción del error.

Nuevos fragmentos de código

Los fragmentos de código son porciones de código que puede reutilizar varias veces en los proyectos. Esta versión de Dreamweaver incorpora fragmentos de código nuevos y actualizados:

• Fragmentos de Bootstrap
• Transiciones y animación de CSS
• Efectos de CSS
• Fragmentos de CSS
• Fragmentos de HTML
• Fragmentos de JavaScript (actualizado)
• Fragmentos de PHP
• Fragmentos de preprocesadores
• Fragmentos de diseño interactivo

Para obtener información sobre el uso de los fragmentos de código, consulte Trabajar con fragmentos de código.

Además, ahora puede mantener los fragmentos de código actualizados en las instalaciones de Dreamweaver a través de la función de sincronización con la nube. Para obtener más información sobre la sincronización de los fragmentos de código con Creative Cloud y sus otras instalaciones de Dreamweaver, consulte Sincronización de la configuración de Dreamweaver con Creative Cloud.

Integración con Bootstrap

Bootstrap es el framework gratuito de HTML, CSS y JavaScript más usado para desarrollar sitios webs interactivos para dispositivos móviles antes que para escritorio. El framework incluye plantillas interactivas para CSS y HTML de botones, tablas, navegación, carruseles de imágenes (carousel) y otros elementos que puede usar en su página web. Además, también incorpora varios plug-in de JavaScript que facilitan el desarrollo de sitios webs interactivos increíbles incluso a los desarrolladores con conocimientos de programación básicos.

Dreamweaver le permite crear documentos de Bootstrap, además de modificar páginas web ya existentes que se crearon con Bootstrap. Puede empezar a diseñar un sitio web de Bootstrap con una plantilla de inicio. Estas se pueden seleccionar en el cuadro de diálogo Nuevo documento (Plantillas de inicio > Plantillas de Bootstrap). 

• Bootstrap: Agencia
  
• Bootstrap: Comercio electrónico
• Bootstrap: Portafolio
• Bootstrap: Producto
• Bootstrap: Bienes inmuebles
• Bootstrap: Currículum Vitae
  

También puede crear un documento de Bootstrap personalizado desde el cuadro de diálogo Nuevo documento (Nuevo documento > Bootstrap). A continuación, complete su sitio web añadiendo poco a poco algunos componentes de Bootstrap, como los acordeones y carruseles, a través del panel Insertar de Dreamweaver. También, si tiene composiciones de Photoshop, puede utilizar Extract para incluir imágenes, fuentes, estilos, texto y mucho más en su documento de Bootstrap.

Tanto si se trata de un archivo diseñado completamente en Bootstrap como si es un diseño en curso, puede modificarlo en Dreamweaver; no solo para editar el código, sino también para realizar cambios de diseño con las inmejorables funciones de edición visual, como la Vista en vivo, el Diseñador de CSS, las consultas de medios visuales y Extract. 

Para obtener información detallada, consulte Trabajar con archivos de Bootstrap.

Compatibilidad con la edición de tablas en la Vista en vivo

Puede editar las tablas de forma sencilla y rápida en la Vista en vivo mediante una o varias de las siguientes opciones:

Para obtener más información, consulte Cambio del tamaño de tablas y Aplicación de formato a tablas y celdas.

Nuevos menús de la Vista en vivo

Ahora, se han mejorado las funciones de edición de la Vista en vivo gracias a los siguientes menús:

• Modificar
• Formato
• Comandos
• Sitio
• La opción de “Pegado especial” en el menú Edición y el menú contextual

Compatibilidad con elementos de la IU de jQuery en la Vista en vivo

Ahora, a través del panel Insertar, puede introducir widgets de jQuery directamente en la Vista en vivo. Arrastre el elemento que desee desde el panel Insertar hasta la Vista en vivo y mantenga pulsado el ratón para utilizar una de las siguientes funciones de inserción:

• Guías interactivas: estas guías se muestran a medida que coloca el cursor sobre los elementos de la Vista en vivo tras haber arrastrado el elemento deseado desde el panel Insertar. Gracias a las guías interactivas, puede insertar elementos en la parte superior, inferior, a la izquierda o a la derecha de un elemento que esté seleccionado.

• Icono DOM: el icono DOM aparece al realizar una breve pausa una vez han aparecido las guías interactivas. Haga clic en el icono para ver la estructura DOM en una ventana emergente y colocar el elemento en la ubicación exacta de la estructura del documento que desee.

• Asistente de posición: el asistente de posición ayuda a colocar el elemento antes o después del elemento seleccionado en la Vista en vivo, o bien anidarlo dentro del mismo.

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

Panel DOM

La Vista rápida de elementos se ha cambiado por el panel DOM (Ventana > DOM). El panel DOM proporciona todas las funciones que solía ofrecer la Vista rápida de elementos y mucho más. Este panel está disponible en todos los espacios de trabajos y se conserva intacto; es decir, puede abrir dos documentos, y abrir y acceder a sus paneles DOM de forma simultánea.

El panel DOM le permite:

• Arrastrar elementos desde el panel Insertar para colocarlos con exactitud en la estructura del documento.
• Copiar, pegar, duplicar, mover o eliminar los elementos estructurales del documento.
• Ver todos los elementos de la página en contexto con la estructura del documento: el elemento seleccionado se resalta en el panel DOM.

Para obtener información detallada sobre el uso del panel DOM y la edición de la estructura HTML mediante el panel, consulte Panel DOM.

Sugerencias de código SVG en documentos HTML

Ahora, las sugerencias de código de todos los elementos y atributos SVG son compatibles con los documentos HTML. Gracias a estas sugerencias de código, ahora puede añadir elementos SVG en la Vista de código de los documentos HTML de la misma forma en que se añaden a un documento SVG.

Vistas previas de tecnología

A partir de esta versión, el equipo de Dreamweaver ofrece vistas previas de algunas funciones para recopilar la opinión de los clientes. Según estas opiniones, las funciones se mejorarán e incluirán como funciones básicas de Dreamweaver. Puede acceder a dichas funciones en el cuadro de diálogo Preferencias, en la categoría Vistas previas de tecnología.

Esta versión incluye la vista previa de la función de Resaltado de código. Dicha función resalta todas las repeticiones de cualquier texto que se seleccione en la Vista de código.

Para utilizar dicha función, siga los siguientes pasos:

Puede desplazarse por el texto resaltado con los siguientes métodos abreviados del teclado:

• Seleccionar coincidencia siguiente: F3 (Win); Cmd + G (Mac)
• Seleccionar coincidencia anterior: Mayús + F3 (Win); Cmd + Mayús + G (Mac)

Vista previa personalizada en la Vista de código mediante la API ShowPreview

Con esta versión de Dreamweaver, puede generar una ventana emergente con una vista previa personalizada que se muestre al colocar el ratón sobre el código en la Vista de código. Para implementar las vistas previas personalizadas, puede usar la nueva API, showPreview, además de la API existente mm:browsercontrol. Por ejemplo, puede usar estas API para mostrar una vista previa de todos los parámetros de una función de JavaScript al colocar el ratón sobre el nombre de dicha función.

Para obtener más información, consulte Referencias sobre las API de Dreamweaver: funciones de la Vista de código.

Plegado de código

En las versiones anteriores de Dreamweaver, se tenían que seleccionar los bloques de código en la Vista de código y luego contraerlos. En esta versión y las posteriores, se pueden contraer los bloques de código al colocar el ratón sobre los números de línea y hacer clic en el triángulo que aparece.

Ahora se puede plegar código (contraerlo) en los archivos HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML y SVG, y basarse en bloques de etiquetas.

Las acciones de copiar, cortar, pegar, así como la de arrastrar y soltar, conservan el plegado del código. Por ejemplo, si copia un bloque de código que está contraído, la acción de Pegar pegará el texto copiado como un bloque contraído.

A diferencia de la función anterior de contraer código, en los archivos HTML el contenido contraído ahora incluye la etiqueta de cierre y se procesa de manera diferente. Asimismo, el número de caracteres que se muestra en un bloque de código contraído ha aumentado. Esto le ayudará a obtener una vista previa de los atributos iniciales, si existieran.

Para obtener información más detallada, consulte Modo contraído.

Mejoras en Extract

• Extract para dispositivos
• Compatibilidad con unidades porcentuales

Extract para dispositivos

Los dispositivos no solo tienen diferentes tamaños, sino también distintas resoluciones. Una buena planificación de diseño para una página web interactiva debe incluir varias versiones de las imágenes utilizadas con diferentes resoluciones que se procesen correctamente en los dispositivos. Sin embargo, crear numerosas versiones de todas las imágenes del proyecto con resoluciones diferentes puede resultar una tarea abrumadora.

En Dreamweaver, Extract facilita esta tarea en gran medida. Con la versión 2015 de Dreamweaver, además de extraer una imagen de su composición de Photoshop, también puede extraer versiones con diferentes resoluciones de esa misma imagen. Durante la extracción, la imagen de Photoshop se ajusta automáticamente a las diferentes resoluciones predeterminadas.

De este modo, puede llamar a estas imágenes en JavaScript o en las consultas de medios para mostrarlas según el dispositivo en el que se vayan a visualizar. Por ejemplo, para una pantalla Retina de alta densidad, puede utilizar una versión de la imagen con doble aumento. 

Para obtener más información, consulte Extraer imágenes de archivos PSD.

Compatibilidad con unidades porcentuales

En el panel Extract, ahora puede ver la anchura y la altura de las imágenes en valores porcentuales, además de en píxeles. También puede ver las medidas en porcentajes.

Al hacer clic en un activo en el panel Extract, se muestra una ventana emergente que le ofrece la opción de alternar entre píxeles y porcentajes. La unidad que seleccione en esta ventana emergente se conservará cuando consulte las medidas entre los activos.

Mejoras en la edición de la Vista en vivo

Inserción anidada en la Vista en vivo

Ahora, puede insertar elementos dentro de otros elementos en la Vista en vivo. Al arrastrar elementos desde el panel Insertar, desde el panel Activos o desde dentro de la Vista en vivo y colocar el ratón sobre los diferentes elementos de la página, podrá observar la información visual que se ofrece para los elementos anidados (junto con las guías de inserción anteriores y posteriores).

• Guías de inserción anteriores y posteriores: se muestran al colocar el puntero sobre el 30 % de la parte superior e inferior del elemento.
• Información visual sobre el anidado: se muestra al colocar el puntero sobre el 40 % restante de la parte central del elemento.

Edición de los selectores directamente en Visualización de elementos

Ahora, para editar un selector, solo tiene que hacer clic en su nombre dentro de Visualización de elementos. Puede confirmar los cambios que realice haciendo clic en cualquier área de la página.

Cambios en la barra de herramientas Programación

Se han eliminado las siguientes opciones para contraer código de la barra de herramientas Programación:

• Contraer etiqueta completa
• Contraer selección

Nota: Estas opciones se han eliminado del menú contextual del botón derecho y del menú Edición.   Ahora se puede contraer código al colocar el ratón sobre el número de línea y hacer clic en el triángulo que aparece.   Sin embargo, las siguientes opciones no están disponibles en los archivos HTML, CSS y JS:

• Resaltar código no válido
• Alertas de errores de sintaxis en la barra de información

Ahora puede usar Linting para buscar errores de código y el panel Salida muestra los resultados de Linting.

Mejoras en el Diseñador de CSS

• Modos Todo y Actual
• Sugerencias para los valores de las propiedades
• Codificación de colores para las consultas de medios
• Otros cambios

Modos Todo y Actual

El Diseñador de CSS ahora cuenta con dos modos diferentes para visualizar y editar las propiedades CSS:

• Todo: en este modo se muestran todas las CSS, consultas de medios y selectores del documento actual. Este modo no reconoce la selección de la Vista en vivo o la Vista de Diseño.

Resulta muy útil si quiere crear CSS, consultas de medios o selectores.

• Actual: en este modo se muestran los estilos computados de cualquier elemento seleccionado en la Vista en vivo o la Vista de Diseño. Si en un archivo CSS se selecciona un selector, el modo muestra las propiedades de dicho selector.

Sugerencias para los valores de las propiedades

Ahora, Dreamweaver muestra las sugerencias de código en el Diseñador de CSS para configurar nuevas propiedades de forma similar a la Vista de código.

Codificación de colores para las consultas de medios

Las consultas de medios del panel Diseñador de CSS ahora tienen una codificación de colores que coinciden con las Consultas de medios visuales.

•  Verde: consultas de medios con condiciones de max-width
•  Azul: consultas de medios con condiciones tanto de min-width como de max-width
•  Morado: consultas de medios con condiciones de min-width

Otros cambios

• Opción Mostrar conjunto: la casilla de verificación Mostrar conjunto está seleccionada de forma predeterminada en la sección Propiedades cuando se inicia Dreamweaver por primera vez. Los cambios que se apliquen a esta opción (si se selecciona o se elimina la selección) se conserva en las sesiones siguientes de Dreamweaver.

• El panel se desplaza para mostrar la opción Añadir propiedad en el centro: al hacer clic en + en la sección Propiedades, la sección se desplaza de manera que la fila Añadir propiedad se muestre en el centro del panel. Si la sección Propiedades es demasiado pequeña, la fila Añadir propiedad se muestra en la parte inferior del panel.

• Resaltado del fondo al añadir nuevas propiedades: cuando el cursor está sobre el cuadro de texto Añadir nueva propiedad, la fila se resalta con un fondo gris.

• Cambio en las posiciones de los botones + y -: los botones + y - que se muestran en cada ventanilla del panel Diseñador de CSS se han reubicado desde el extremo derecho al extremo izquierdo para hacerlos más visibles.

• La categoría “Personalizadas” ha cambiado de nombre: el nombre de las propiedades personalizadas ha pasado a ser “Más”.

Cambios en el flujo de trabajo del servidor de prueba

Las mejoras de esta versión en el flujo de trabajo del servidor de prueba tienen el objetivo de facilitar y agilizar la edición de documentos que tengan código del lado del servidor en la Vista en vivo.

Cambios en la configuración del servidor

A diferencia de las versiones anteriores de Dreamweaver, ahora puede designar un servidor específico como servidor de prueba o servidor remoto, pero no como ambos a la vez. Las casillas de verificación de la interfaz del usuario de la configuración del servidor se han reemplazado con botones de opción para implementar la especificación de los servidores.

Si abre un sitio o importa la configuración de un sitio que se haya creado con versiones anteriores de Dreamweaver, y el sitio cuenta con un solo servidor que se haya definido como remoto y de prueba, se creará una entrada duplicada del mismo. De ese modo, uno quedará marcado como servidor remoto (con el sufijo “_remoto” o “_remote”) y el otro, como servidor de prueba (con su correspondiente sufijo “_de prueba” o “_testing”).

Inclusión automática de archivos dinámicos

Ahora, Dreamweaver sincroniza automáticamente los documentos dinámicos con el servidor de prueba al abrir, crear o guardar los cambios realizados en tales documentos. Sin embargo, en los flujos de trabajo de los servidores de prueba, Dreamweaver ya no muestra los cuadros de diálogo “Actualizar servidor de prueba” ni “Incluir archivos dependientes”.

Para obtener más información, consulte Inclusión automática de archivos dinámicos.

Cambios en el flujo de trabajo de Business Catalyst

Se ha eliminado la extensión de Business Catalyst y no se podrá usar en la versión de Dreamweaver CC 2015 ni en las posteriores. Dreamweaver CC 2014.1.1 es la última versión compatible con la extensión Business Catalyst.

Si desea usar Business Catalyst con la versión de Dreamweaver CC 2015 y las posteriores, utilice la opción de conexión SFTP de Dreamweaver. Para obtener más información, consulte la documentación de Business Catalyst.

Consulte aquí el anuncio oficial sobre este cambio en el sitio web de Business Catalyst. 

Otros cambios

• El panel Insertar se ha reorganizado para agrupar todas las opciones de las categorías Común, Diseño y Medios en una categoría más lógica: HTML.

• Se han eliminado del menú Ayuda los vídeos con presentaciones breves y el vínculo para iniciarlos. Esta opción tampoco está disponible para las configuraciones regionales que no sean inglés.

• Se han reducido las opciones disponibles en el menú desplegable de la barra Documento, situada en la parte inferior de una página; ahora solo están disponibles las opciones Orientación, Tamaño completo y Editar tamaños.