Versiones de 2015 de Dreamweaver CC
Resumen de las nuevas funciones

Las versiones de Dreamweaver CC 2015.1, 2015.2, y 2015.3 ofrecen una experiencia innovadora en todo lo relacionado con el diseño y la creación de sitios web en Dreamweaver. Ahora, se puede acceder a las Bibliotecas Creative Cloud y a Adobe Stock desde el mismo Dreamweaver a fin de integrar los elementos de diseño y los estilos de las aplicaciones de escritorio y móviles de Adobe, así como imágenes y vídeos de gran calidad. Las funciones de colaboración de Creative Cloud proporcionan un flujo de trabajo sencillo entre diseñadores y desarrolladores.

Además, esta versión incluye varias mejoras realizadas en el panel DOM, el diseño web interactivo, Extract, las funciones de edición de la Vista en vivo y en diferentes áreas solicitadas por otros usuarios como usted. En este artículo se presentan estas nuevas funciones y mejoras, y se proporcionan vínculos a recursos para obtener más ayuda y formación.

Versión 2015.3 de Adobe Dreamweaver CC

Esta versión de Dreamweaver incluye una corrección del problema que aparecía con los equipos de Windows, que provocaba que el equipo no pudiera entrar en suspensión en el caso de que Dreamweaver se estuviera ejecutando (problema del temporizador de reactivación). 

Para obtener más información, consulte El equipo no puede entrar en suspensión si se está ejecutando Dreamweaver | Windows.

Adobe Dreamweaver CC 2015.2 (versión de marzo de 2016)

Mejoras del panel DOM

Gracias a la compatibilidad con selecciones múltiples, la edición de etiquetas, las clases y los ID, así como con la inserción de nuevos elementos, ahora podrá diseñar la mayor parte de las páginas web utilizando solo el panel DOM.

A continuación se proporciona más información sobre estas mejoras realizadas en el panel DOM:

Compatibilidad con la selección múltiple de elementos DOM

Ahora puede seleccionar varias etiquetas en el panel DOM de un documento para editar o realizar otras operaciones en varias etiquetas de forma simultánea.

  • Para seleccionar elementos contiguos, mantenga presionada la tecla Mayús y haga clic en las etiquetas en el panel DOM.
  • Para seleccionar elementos no contiguos, mantenga presionada la tecla Ctrl y haga clic en las etiquetas en el panel DOM.
Selección de elementos contiguos en el panel DOM
Selección de elementos contiguos en el panel DOM

Selección de elementos no contiguos en el panel DOM
Selección de elementos no contiguos en el panel DOM


Al seleccionar varios elementos en el panel DOM:

  • Se desactivan el Inspector de propiedades y el Diseñador de CSS.
  • Se borra la jerarquía de etiquetas mostrada en la parte inferior de la página.
  • El punto de inserción de la Vista de código queda inactivo.

Editar etiquetas, clases e ID desde el panel DOM

Ahora puede editar etiquetas, clases e ID haciendo doble clic sobre estos elementos en el panel DOM. También puede añadir clases o ID adicionales separándolos con un espacio. Para las etiquetas no asociadas a ninguna clase o ID, puede escribir el nombre de la clase o del ID tras hacer doble clic en la etiqueta.

Las sugerencias de código aparecen cuando comienza a escribir la etiqueta, la clase o el ID. Para limitar las sugerencias a las clases, comience a escribir con un punto. Para ver solo los ID en las sugerencias, comience a escribir con una almohadilla (#).

Edición de etiquetas en el panel DOM
Edición de etiquetas en el panel DOM

Edición o adición de clases en el panel DOM
Edición o adición de clases en el panel DOM

Edición y adición de ID en el panel DOM
Edición y adición de ID en el panel DOM

Para quitar una etiqueta, haga clic con el botón derecho del ratón en el panel DOM y seleccione Quitar etiqueta.

Insertar elementos en el panel DOM

Ahora puede insertar elementos nuevos en su página web mediante el panel DOM, de una de las siguientes maneras:

  • Pulse la barra espaciadora o haga clic en el icono de inserción situado junto al elemento necesario en el panel DOM. En la ventana emergente, haga clic en una de las opciones. Para incluir varios elementos en una etiqueta, seleccione los elementos necesarios y, a continuación, seleccione Ajustar etiqueta en las opciones de inserción.
Se insertará una etiqueta div del marcador de posición y se mostrará en el modo de edición. Puede escribir el nombre de la etiqueta requerido en lugar de la etiqueta div.
Opciones de inserción del panel DOM
Opciones de inserción del panel DOM

  • Haga clic en el elemento necesario en el panel Insertar y arrástrelo al panel DOM. Las guías interactivas aparecerán para indicar dónde se insertará el elemento. Suelte el elemento en la ubicación requerida.

Al insertar etiquetas utilizando el panel DOM, también se inserta el texto predeterminado (marcador de posición) y los atributos necesarios para las etiquetas:

  • Al insertar cualquiera de las etiquetas siguientes y confirmar los cambios, se insertará el texto predeterminado en las vistas de código, en vivo y de diseño:
    div, header, nav, aside, article, section, footer, h1-h6 y hgroup
  • Al insertar una etiqueta table y confirmar los cambios, se insertará una tabla de 3x3.
  • Al insertar la etiqueta embed o img y confirmar los cambios, aparecerá el cuadro de diálogo Seleccionar archivo y se le pedirá que seleccione un archivo adecuado.
  • Al insertar una metaetiqueta y confirmar los cambios, se agrega el siguiente código a la Vista de código: <meta name="" content="">
  • Al insertar la etiqueta figure y confirmar los cambios, se inserta una etiqueta figure con la etiqueta figcaption anidada.
  • Al insertar la etiqueta ul o la etiqueta ol y confirmar los cambios, se inserta una etiqueta ol/ul con la etiqueta li anidada.

Información visual para los nodos secundarios

Cuando se selecciona un nodo en el panel DOM, sus nodos secundarios se muestran en color azul claro.

Si se seleccionan explícitamente nodos secundarios, no se mostrará el resaltado de color azul claro.

Nodos secundarios resaltados al seleccionar el nodo principal
Nodos secundarios resaltados al seleccionar el nodo principal

Nodo secundario resaltado de forma similar al nodo principal
Nodo secundario resaltado de forma similar al nodo principal


Mejoras de seguridad para evitar la actuación repentina de Gatekeeper

Gatekeeper es una función de detección de software malicioso integrada en los Mac OS X 10.7 y posteriores. Esta función comprueba si existen firmas válidas de ID de desarrollador en las aplicaciones antes de que se instalen en el sistema Mac. Sin embargo, Gatekeeper no detecta ni bloquea aplicaciones que se cargan dinámicamente desde las aplicaciones y que tienen firmas válidas. Si compra Dreamweaver a través de fuentes no autorizadas, este defecto de Gatekeeper puede utilizarse para introducir plugins malintencionados en el paquete de instalación de Dreamweaver. 

Para evitar las potenciales actuaciones repentinas, Dreamweaver ahora le pedirá que confirme si desea cargar plugins de terceros si está instalado en una ubicación distinta de /Applications.

Solicitud de confirmación de carga de bibliotecas de terceros
Solicitud de confirmación de carga de bibliotecas de terceros

Para más información, consulte Cómo evitar la actuación inesperada de Gatekeeper.

Integración con CEF

Dreamweaver ahora está integrado con CEF3 2357. La Vista en vivo puede ahora procesar transiciones,
animaciones y transformaciones 3D de CSS3.

Para más información, consulte /es/Integración con CEF.

Mejoras en la consulta de medios visuales

Ahora podrá seleccionar una unidad px, em o rem al añadir consultas de medios de comunicación mediante la barra de consultas de medios visuales. Cuando se especifica un valor en una unidad y, posteriormente, se cambia la unidad, el valor se convierte automáticamente a la unidad recién seleccionada.

Especificar unidades al añadir una consulta de medios
Especificar unidades al añadir una consulta de medios

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

Mejoras en las bibliotecas de CC

Cambios en el cuadro de diálogo de remuestreo

La etiqueta de la interfaz de usuario "Redimensionar a" del cuadro de diálogo de optimización de imagen se ha cambiado a "Remuestrear a".

Además, cuando se realiza el muestreo de una imagen desde el panel Bibliotecas CC, aparece un control de giro sobre la imagen hasta que esta quede completamente muestreada.

Cuadro de diálogo de muestreo de Dreamweaver CC 2015.2
Cuadro de diálogo de muestreo de Dreamweaver CC 2015.2

Para obtener más información, consulte Bibliotecas Creative Cloud en Dreamweaver.

Extraer archivos SVG optimizados para la web de bibliotecas de CC

Si ha guardado imágenes con licencia, es decir, imágenes de Adobe Stock en las bibliotecas de Creative Cloud, podrá extraerlas como archivos SVG optimizados para la Web en las páginas web de Dreamweaver. Al arrastrar las imágenes desde el panel de bibliotecas de CC a las páginas web, estas se insertan como archivos SVG de manera predeterminada.

Si desea personalizar las propiedades de los archivos SVG, puede editar las preferencias en el archivo options.json.

Para obtener más información, consulte Extracción de ficheros SVG optimizados para la web desde bibliotecas CC.

Nuevas plantillas de inicio

Se han añadido tres nuevas plantillas de correo electrónico en esta compilación: correo electrónico fluido, correo electrónico híbrido y correo electrónico interactivo.

Para acceder a las plantillas, diríjase a Archivo > Nuevo > Plantillas de inicio > Plantillas de correo electrónico.

Nuevas plantillas de inicio de correo electrónico en Dreamweaver CC 2015.2
Nuevas plantillas de inicio de correo electrónico en Dreamweaver CC 2015.2

Mejoras realizadas en la edición de tablas en la Vista en vivo

Nuevas opciones de edición de filas y columnas

A continuación se describen las opciones de edición disponibles actualmente para las tablas en la Vista en vivo:

  • Eliminar mediante las teclas Eliminar/Retroceso.
  • Es posible cortar usando el menú contextual, el menú Edición o los métodos abreviados del teclado.
  • Es posible copiar usando el menú contextual, el menú Edición o los métodos abreviados del teclado.
  • Es posible pegar usando el menú contextual, el menú Edición o los métodos abreviados del teclado.
  • Es posible copiar y reemplazar otras filas o columnas mediante la opción Sustituir celdas seleccionadas del menú contextual.

Para ver estas opciones, active el modo de formato de tabla. Para ello, seleccione la tabla y haga clic en el icono de sandwich en Visualización de elementos. A continuación, seleccione las celdas deseadas y haga clic sobre ellas con el botón derecho.

Opciones de edición de celdas de tablas en la Vista en vivo
Opciones de edición de celdas de tablas en la Vista en vivo

Ahora puede navegar entre las celdas de una tabla en la Vista en vivo mediante las teclas de flecha izquierda y derecha. Haga clic en una celda de la tabla y pulse la tecla flecha izquierda para ir a la celda anterior o la tecla de flecha derecha para ir a la siguiente celda de la tabla.

Cambios en la pantalla de bienvenida

La pantalla de bienvenida ha cambiado en esta versión de Dreamweaver:

Pantalla de bienvenida de Dreamweaver CC 2015.2
Pantalla de bienvenida de Dreamweaver CC 2015.2

Adobe Dreamweaver CC 2015.1 (versión de noviembre de 2015)

Integración con las Bibliotecas Creative Cloud

Con la nueva compatibilidad para Bibliotecas Creative Cloud, puede colaborar y compartir los vectores y los temas de color creados con otras herramientas de diseño, como Photoshop, Illustrator u otras aplicaciones móviles. Puede examinar, gestionar y acceder a los activos creativos en cualquier momento, donde los necesite y en los distintos proyectos de Dreamweaver. 

Panel Bibliotecas CC en Dreamweaver
Panel Bibliotecas CC en Dreamweaver

Al insertar activos desde Bibliotecas Creative Cloud, puede elegir mantener el vínculo entre el activo y la fuente para que los activos estén actualizados en todo momento.

El nuevo panel Bibliotecas CC de Dreamweaver le ayuda a ver los activos en sus bibliotecas Creative Cloud y a insertarlos en sus páginas web. Puede insertar los activos en la Vista en vivo o en la Vista de código mediante sugerencias para el código.

Para obtener información más detallada, consulte Bibliotecas Creative Cloud en Dreamweaver.

Integración con Adobe Stock

La integración con Adobe Stock le permite descargar imágenes, gráficos vectoriales y vídeos libres de derechos directamente en las Bibliotecas Creative Cloud, así como administrar y reutilizar su contenido de Adobe Stock desde Dreamweaver.

Encuentre las imágenes, vectores y vídeos de Adobe Stock que necesita para darle un matiz visual atractivo a su página web mientras trabaja en Dreamweaver.

Búsqueda y compra de imágenes desde Adobe Stock
Búsqueda y compra de imágenes desde Adobe Stock

Mejoras en el diseño interactivo

Mejoras en Bootstrap

Compatibilidad con la versión 3.3.5 de Bootstrap

La versión de Bootstrap utilizada en Dreamweaver se ha actualizado a la versión 3.3.5. Como resultado, los componentes, fragmentos y plantillas de inicio de Bootstrap son los de la versión 3.3.5. 

La versión de jQuery también se ha actualizado a la versión 1.11.3.

Duplicar filas y columnas

Además de las funciones Añadir columna/Añadir fila disponibles para los documentos de Bootstrap en la Vista en vivo, ahora Dreamweaver también le permite duplicar filas y columnas.

Para duplicar una fila o una columna seleccionada, haga clic en el icono Duplicar () que aparece en la esquina inferior derecha. La fila o la columna entera se duplicará, junto con todo su contenido.

Nota:

la opción Añadir fila o Añadir columna duplica la fila o la columna con las clases, pero sin el contenido.

Opción de duplicar fila y columna en documentos de Bootstrap
Opción de duplicar fila y columna en documentos de Bootstrap

Mejoras en el flujo de trabajo de la creación de documentos de Bootstrap

Tanto si crea un documento de Bootstrap desde el cuadro de diálogo Nuevo documento como si lo hace a partir de una plantilla de inicio, el flujo de trabajo es fluido e impecable. Los cuadros de diálogo “Copiar archivos dependientes” y “Sobrescribir archivos existentes” ya no se muestran, a diferencia de las versiones anteriores de Dreamweaver.

Al crear y guardar un documento de Bootstrap en una ubicación específica, los archivos dependientes también se guardan automáticamente en la misma ubicación.

Mejoras en la consulta de medios visuales

Resaltado de los valores de los puntos de corte en uso

Ahora, Dreamweaver resalta las consultas de medios asociadas al tamaño de las ventanas gráficas que se estén usando, de modo que pueda identificarlas rápidamente. El resaltado se indica con unas flechas más oscuras y un fondo oscuro que señalan los valores de los puntos de corte de las consultas de medios.

Consultas de medios activos y consultas de medios inactivos (resaltadas)
Consultas de medios activos y consultas de medios inactivos (resaltadas)

Mejoras en el flujo de trabajo para añadir consultas de medios

Ahora, al hacer clic en + en la barra de consulta de medios visuales, Dreamweaver no le indicará que haga clic en las opciones de max-width o min-width, sino que mostrará inmediatamente una ventana emergente para añadir una consulta de medios. 

Además, la opción de max-width ya está seleccionada de forma predeterminada en la ventana emergente. Se ha introducido una lista desplegable que permite cambiar la opción a min-width o min-max. 

Cambios en la adición de consultas de medios
Cambios en la adición de consultas de medios

Mejoras en la edición de los puntos de corte

Ahora, puede editar los valores de las consultas de medios haciendo doble clic en los valores de los puntos de corte que aparecen en la barra de consulta de medios visuales. Al hacer doble clic en el valor de un punto de corte, se muestra un borde naranja, y el punto de inserción aparece dentro del borde.

Tras introducir los nuevos valores (en píxeles), pulse Intro o Retorno para confirmar los cambios, o bien pulse Escape para descartarlos.

Valor de punto de corte de 768 píxeles en modo de edición con un borde naranja
Valor de punto de corte de 768 píxeles en modo de edición con un borde naranja

Visualización del número de línea en la opción Ir a código.

La opción Ir a código del menú contextual de la consulta de medios visuales ahora muestra el número de la línea de código, para facilitarle su relación con el código correspondiente.

Números de línea para el código correspondientes a la consulta de medios visuales
Números de línea para el código correspondientes a la consulta de medios visuales

Mejoras en Extract

Compatibilidad con varias mesas de trabajo

Ahora, puede abrir archivos PSD con varias mesas de trabajo en el panel Extract de Dreamweaver para extraer los activos. Cada mesa de trabajo se muestra en el panel Capas en forma de carpeta. Para ver u ocultar el contenido, solo tiene que expandir o contraer la carpeta.

Para aumentar una mesa de trabajo específica, simplemente haga clic en el nombre de la misma.

Haga doble clic en “AJUSTAR”, que aparece en el encabezado del panel, para reducir la mesa de trabajo y ajustar el archivo PSD a la vista actual.

Compatibilidad con la extracción de sombras paralelas

Ahora, al extraer CSS de un archivo PSD que tenga la propiedad Sombra paralela, la propiedad se extrae como box-shadow en CSS.

Sugerencias para trabajar con estilos de capas no compatibles

Hay muchas situaciones en las que se crean varios estilos de capa dentro de un archivo PSD que sí funcionan de forma individual, pero no en conjunto. Extract se encarga de comprobar tales casos y le proporciona sugerencias para trabajar con los estilos de capas que no sean compatibles.

Extract detecta los siguientes casos:

  • Situación 1: tenemos varias instancias de propiedades que corresponden a colores de fondo. Por ejemplo, en el archivo PSD se han definido dos superposiciones de colores o de degradados.
  • Situación 2: hemos colocado una superposición de color con una opacidad inferior al 100 % encima de una superposición de degradado, o hemos asignado un color de fondo a la capa. En este caso, es difícil determinar el color mezclado que resultará de tal combinación.
  • Situación 3: tenemos una superposición de degradado con una opacidad inferior al 100 % y hemos asignado un color de fondo a la capa. En este caso, también es difícil determinar el color mezclado que resultará de tal combinación.

Cuando Extract detecta estos casos, muestra un icono de advertencia en la miniatura de la capa incluida en el panel Extract. También muestra el siguiente mensaje en la ventana emergente de la miniatura de la capa y en el CSS de la capa:

“La capa contiene varios estilos de capa que no se pueden representar en CSS”. Utilice el selector de color o extraiga la capa como una imagen”.

Asimismo, en los casos en los que un color de fondo semitransparente se superponga a otro color de fondo (situaciones 2 y 3 mencionadas anteriormente), los valores de todos los colores de fondo se muestran en el archivo CSS. Seguidamente, podrá extraer el valor que necesite.

Mejoras en la edición de la Vista en vivo

Mejoras en la edición de tablas

Selección de filas o columnas con un solo clic

Ahora es posible seleccionar filas y columnas de una tabla en la Vista en vivo con un solo clic. Se ha introducido un nuevo icono de flecha (similar al de la Vista de diseño) sobre el cual es posible hacer clic para seleccionar una fila o una columna.

  1. Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.

  2. Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.

  3. Pase el ratón sobre la fila o columna que desea seleccionar. Coloque el ratón sobre el borde de la fila o columna para mostrar una flecha que le indicará que puede hacer clic para realizar la selección.

  4. Haga clic para seleccionar la fila o la columna.

    Selección de una fila de tabla en la Vista en vivo
    Selección de una fila de tabla en la Vista en vivo

    Selección de una columna de tabla
    Selección de una columna de tabla en la Vista en vivo

  5. Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.

Selección de varias celdas mediante arrastre

Ahora puede seleccionar varias celdas, filas o columnas mediante arrastre. Haga clic en una celda y arrástrela a lo largo de varias celdas, filas o columnas para seleccionarlas.

  1. Seleccione la tabla para ver la Visualización de elementos con el icono de sándwich.

  2. Haga clic en el icono de sándwich para entrar en el modo de formato de tabla.

  3. Arrastre y seleccione las filas y columnas necesarias.

    Selección de varias celdas arrastrando
    Selección de varias celdas arrastrando

  4. Continúe con la edición de la fila o la columna según sea necesario mediante el menú contextual.

Eliminación de filas o columnas mediante la tecla Eliminar

Ahora puede eliminar filas o columnas seleccionándolas y pulsando la tecla Eliminar/Retroceso.

Inspector rápido de propiedades para texto

Ahora puede utilizar el Inspector rápido de propiedades para texto en la Vista en vivo para dar formato y añadir sangrías e hipervínculos a su texto rápidamente. El Inspector rápido de propiedades de texto se muestra al hacer clic en el icono de sándwich de los elementos de texto: h1-h6, pre y p.

Inspector rápido de propiedades para texto
Inspector rápido de propiedades para texto

  • La opción formato le permite cambiar la etiqueta del elemento de texto a una de estas: h1-h6, p, y pre. 
  • La opción vínculo le ayuda a crear un vínculo para el elemento de texto. 
  • Los iconos de negrita y cursiva le ayudan a añadir etiquetas <strong> y <em> al elemento de texto.
  • Los iconos de trabajo en bloque le ayudan a insertar sangría en el texto o a anularla. La etiqueta se inserta en el código o se elimina del mismo en concordancia.

En los documentos de Bootstrap, el Inspector rápido de propiedades para texto también le permite alinear y transformar los elementos de texto.

Inspector rápido de propiedades para texto en los documentos de Bootstrap
Inspector rápido de propiedades para texto en los documentos de Bootstrap

  • Alinear: alinea los elementos de texto de Bootstrap a la izquierda, en el centro, a la derecha o los justifica directamente aplicando las clases correspondientes.
  • Transformar: modifica las mayúsculas o minúsculas de un elemento aplicando clases de todo minúsculas, todo mayúsculas o mayúscula inicial.

Cambios en el Inspector rápido de propiedades de imágenes

El Inspector rápido de propiedades para imágenes ahora incluye diferentes opciones para personalizar las imágenes de los documentos de Bootstrap.

Inspector rápido de propiedades para texto en los documentos de Bootstrap
Inspector rápido de propiedades para texto en los documentos de Bootstrap

  • Recortar con forma: haga clic en las esquinas de las imágenes para recortarlas en forma circular, redondear las esquinas o presentarlas como imágenes en miniatura.
  • Convertir en adaptativa: haga clic para hacer que sus imágenes sean adaptativas y se ajusten a los diferentes tamaños de pantalla.

Actualizaciones integradas

Adobe proporciona actualizaciones constantemente para conseguir que Dreamweaver evolucione al ritmo del creciente desarrollo tecnológico. Ejemplos de estas actualizaciones son las bibliotecas de Bootstrap o las plantillas de inicio.

Puede descargar e instalar las actualizaciones integradas de forma automática o manual. También puede desactivar las actualizaciones integradas, o desinstalarlas y hacer que Dreamweaver se restituya a su último estado de instalación o actualización mediante la aplicación de escritorio Adobe Creative Cloud. El cuadro de diálogo de preferencias de Dreamweaver le permite especificar el modo de actualizar, desactivar o restituir las actualizaciones integradas.

Para obtener más información sobre las actualizaciones de la aplicación, consulte Actualizaciones integradas.

Preferencias de las actualizaciones integradas
Preferencias de las actualizaciones integradas

Servidor de prueba: mejoras en el flujo de trabajo

En la versión anterior (Dreamweaver CC 2015), se incorporó la inclusión automática de los archivos en el servidor de prueba para mejorar la experiencia de edición de los documentos dinámicos en la Vista en vivo. Por demanda popular, ahora se ha introducido una nueva preferencia en el cuadro de diálogo Configuración del sitio que permite a los usuarios desactivar esta función.

Para obtener información detallada, consulte Desactivar la inclusión automática de los archivos dinámicos.

Desactivar la opción de inclusión automática de archivos dinámicos
Desactivar la opción de inclusión automática de archivos dinámicos

Contracción de código basada en selección

Se ha vuelto a incorporar la contracción de los bloques de código seleccionados. Ahora, tendrá las siguientes opciones a su alcance:

  • Contraer código a nivel de etiqueta, al igual que en la versión anterior de Dreamweaver, y/o;
  • Contraer una porción de código al seleccionarla.
Cuando se selecciona un bloque de código, se muestra la opción correspondiente para contraerlo, como se indica a continuación:
Contracción de código basada en selección
Haga clic en “-” para contraer el código

Contracción de código basada en la selección
Haga clic en “+” para ampliar el código


Haga clic en “-” para contraer el código. Para ampliar la sección de código contraída, haga clic en “+”.

Haga clic en “-” para contraer el código. Para ampliar la sección de código contraída, haga clic en “+”. 
Haga clic en “-” para contraer el código. Para ampliar la sección de código contraída, haga clic en “+”. 
Haga clic en “-” para contraer el código. Para ampliar la sección de código contraída, haga clic en “+”. 

Para obtener más información sobre cómo contraer código, consulte Contraer código.

Mejoras en el Diseñador de CSS

Reorganización de los selectores

Ahora, puede reorganizar los selectores del panel Selectores arrastrándolos a la ubicación deseada dentro del propio panel.

Reorganización de los selectores en el Diseñador de CSS
Reorganización de los selectores en el Diseñador de CSS

Conservación de los tamaños personalizados de los paneles del Diseñador de CSS

Al contraer o ampliar los paneles del Diseñador de CSS, los tamaños de los mismos se conservan durante el resto de una misma sesión. Los paneles Fuentes y Medios se mantienen en los tamaños personalizados hasta que los vuelva a modificar.

Panel Propiedades desactivado para los archivos de Bootstrap

El panel Propiedades del Diseñador de CSS se ha desactivado para los archivos de Bootstrap en los que los estilos se hayan definido en archivos CSS de Bootstrap y sean de solo lectura.

Nota:

si desea modificar los estilos del documento de Bootstrap, cree otro archivo CSS que sobrescriba los estilos existentes y adjúntelo al documento.

Posibilidad de limitar las acciones de deshacer y rehacer a los documentos activos

Ahora, las acciones de deshacer y rehacer se pueden limitar solo a los documentos activos.

Las acciones de deshacer y rehacer afectan de forma predeterminada al documento activo y todos los archivos relacionados, como los archivos CSS asociados. Al limitar las acciones de deshacer al documento activo, tanto las acciones de deshacer como de rehacer se aplicarán exclusivamente a los cambios realizados en el archivo seleccionado. Por ejemplo, si está trabajando en un archivo HTML, las acciones de deshacer y rehacer solo afectarán a los cambios que realice en ese archivo HTML, y no en los archivos CSS relacionados. Para deshacer o rehacer los cambios que haya implementado en un archivo CSS relacionado, tendrá que cambiar al archivo CSS antes de deshacer o rehacer.

Si está trabajando en la Vista en vivo o en la Vista de diseño, las acciones de deshacer o rehacer se aplicarán solo a los cambios que afecten al código HTML. Digamos que está editando una página de Bootstrap en la Vista en vivo. A continuación, edita texto y cambia el tamaño de una consulta de medios en la barra de consulta de medios visuales. En este caso, solo podrá deshacer la edición del texto, pero no los cambios realizados en la consulta de medios, ya que dichos cambios se ubican en un archivo relacionado, y no en el archivo HTML. Para deshacer los cambios, tendrá que cambiar al archivo CSS relacionado.

Para limitar las acciones de deshacer y rehacer al documento en uso, siga estos pasos:

  1. Haga clic en Edición > Preferencias (Windows) o Dreamweaver > Preferencias (Mac).

  2. En la categoría General, vaya a la sección Opciones de edición y seleccione Limitar las acciones de deshacer al documento actual.

    Limitar las acciones de deshacer y rehacer al documento activo
    Limitar acciones de deshacer y rehacer al documento activo

  3. Haga clic en Aplicar y, luego, en Cerrar para cerrar el cuadro de diálogo Preferencias.

  4. Reinicie Dreamweaver para que los cambios surtan efecto.

Mejoras en el panel DOM

Ahora, puede copiar una etiqueta del panel DOM de un documento y pegarla en el panel DOM de otro documento a través del menú contextual del panel.

Nota:

solo las etiquetas que se copien del panel DOM se pueden pegar en otro panel DOM. Si copia una etiqueta de la Vista en vivo, solo la podrá pegar en la Vista en vivo, y no en el panel DOM.

Opción Restablecer para las guías de las nuevas funciones

Guías de nuevas funciones: las novedades flotantes y las sugerencias contextuales de funciones aparecen automáticamente la primera vez que se inicia Dreamweaver después de haberlo actualizado. Las novedades flotantes le ayudan a descubrir las nuevas funciones incluidas en la versión más reciente de la aplicación, mientras que las sugerencias contextuales de funciones le muestran los nuevos flujos de trabajo y las mejoras de las funciones.

Las veces siguientes que inicie Dreamweaver, se omitirán las guías de las nuevas funciones y no se mostrarán de forma predeterminada. No obstante, si quiere volver a verlas, puede dirigirse a las preferencias de Dreamweaver y usar la opción Restablecer.

 

  1. Vaya a Ayuda > Restablecer guías de las nuevas funciones. Aparecerá el cuadro de diálogo Preferencias.

  2. Restablezca las novedades flotantes o las sugerencias contextuales de funciones según necesite.

  3. Cierre las Preferencias y salga de Dreamweaver.

  4. Reinicie Dreamweaver. Ahora, las guías de las nuevas funciones volverán a mostrarse.

Actualización del validador de W3C

Ahora, Dreamweaver se ha actualizado para utilizar el nuevo servicio de validación para HTML5 de W3C: https://validator.w3.org/nu/ El servicio de validación anterior, validator.w3.org, ha quedado obsoleto.

El nuevo servicio de validación solo admite los siguientes analizadores sintácticos:

Valor Descripción
ninguno La elección del analizador sintáctico de HTML o XML se basa en el tipo de contenido.
xml Analizador sintáctico de XML: no cargará entidades externas.
xmldtd Analizador sintáctico de XML: cargará entidades externas.
html Analizador sintáctico de HTML: la configuración se basa en el tipo de documento (doctype).
html5 Analizador sintáctico de HTML en modo HTML5.
html4 Analizador sintáctico de HTML en modo HTML4 estricto.
html4tr Analizador sintáctico de HTML en modo HTML4 de transición.

Al igual que en las versiones anteriores de Dreamweaver, aún se puede especificar el analizador sintáctico alternativo que Dreamweaver puede elegir si no es capaz de identificar el analizador sintáctico según el tipo de contenido del documento o DTD. Con el nuevo validador, solo ha cambiado la lista de analizadores sintácticos disponibles.

Preferencias del validador de W3C
Preferencias del validador de W3C

Para obtener más información, consulte Validar documentos con el validador de W3C.

Compatibilidad con los archivos SVG en el panel Activos

El panel Activos muestra todos los activos de SVG del sitio de Dreamweaver asociado al documento actualmente activo. Al igual que cualquier otro activo del panel Activos, puede realizar distintas acciones en los activos SVG como, por ejemplo, editar, asignar direcciones URL o volver a utilizar activos en documentos y sitios.

Activos SVG mostrados en el panel Activos
Activos SVG mostrados en el panel Activos

Cambio en las opciones de zoom

El aumento/reducción de tamaño en la Vista de diseño mediante las acciones siguientes ya no está disponible en Dreamweaver:

Windows:

  • Pulsar Ctrl y utilizar la rueda del ratón
  • Pulsar Ctrl y utilizar el desplazamiento en el panel táctil

Mac:

  • Pulsar Cmd y utilizar la rueda del ratón
  • Pulsar Cmd y utilizar el desplazamiento en el panel táctil

No se han producido cambios en el resto de métodos de aumento/reducción del tamaño de un documento: Cmd/Ctrl++ o Cmd/Ctrl+-, y aplicar zoom desde el menú Ver > Nivel de aumento.

Cambios en el menú Ver

La opción Código y En vivo/Código y Diseño ha pasado a denominarse 'Dividir' en el menú Ver y tiene el mismo comportamiento que en la barra de herramientas Documento.

Menú Ver antes de Dreamweaver CC 2015.1
Menú Ver antes de Dreamweaver CC 2015.1

Menú Ver en Dreamweaver CC 2015.1
Menú Ver en Dreamweaver CC 2015.1


Sincronización más rápida de la configuración de Dreamweaver con Creative Cloud

Gracias a las múltiples mejoras de rendimiento en la función de sincronización de configuración, ahora puede sincronizar las configuraciones entre las instancias de Dreamweaver y Creative Cloud con mayor rapidez que nunca.  

API y panel Estilos CSS en desuso

El antiguo panel Estilos CSS se ha eliminado de Dreamweaver y, como resultado, las API asociadas al mismo también se han eliminado.

Las siguientes API básicas siguen estando disponibles:

  • dreamweaver.cssRuleTracker.newRule()
  • dreamweaver.cssStylePalette.getStyles()
  • dreamweaver.cssStylePalette.editStyleSheet()
  • dreamweaver.cssStylePalette.attachStyleSheet()
  • dreamweaver.cssStylePalette.getMediaType()
  • dreamweaver.cssStylePalette.setMediaType()
  • dreamweaver.cssStylePalette.getDisplayStyles()
  • dreamweaver.cssStylePalette.setDisplayStyles()
  • dreamweaver.cssStylePalette.newStyle()

De ahora en adelante, las siguientes API no serán compatibles:

  • dreamweaver.cssRuleTracker.editSelectedRule()
  • dreamweaver.cssRuleTracker.canEditSelectedRule()
  • dreamweaver.cssStylePalette.getSelectedStyle()
  • dreamweaver.cssStylePalette.editSelectedStyle()
  • dreamweaver.cssStylePalette.editSelectedStyleInCodeview()
  • dreamweaver.cssStylePalette.renameSelectedStyle()
  • dreamweaver.cssStylePalette.applySelectedStyle()
  • dreamweaver.cssStylePalette.duplicateSelectedStyle()
  • dreamweaver.cssStylePalette.deleteSelectedStyle()
  • dreamweaver.cssStylePalette.canEditSelectedStyle()
  • dreamweaver.cssStylePalette.canEditSelectedStyleInCodeview()
  • dreamweaver.cssStylePalette.canRenameSelectedStyle()
  • dreamweaver.cssStylePalette.canDuplicateSelectedStyle()
  • dreamweaver.cssStylePalette.canDeleteSelectedStyle()
  • dreamweaver.cssStylePalette.canApplySelectedStyle()
  • dreamweaver.canDisableSelectedStyle()
  • dreamweaver.canEnableAllDisabled()
  • dreamweaver.canDeleteAllDisabled()
  • dreamweaver.getSelectedStyleIsDisabled()
  • dreamweaver.setSelectedStyleIsDisabled()
  • dreamweaver.enableAllDisabled()
  • dreamweaver.deleteAllDisabled()

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