Resumen de las nuevas funciones: mayo de 2015

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 comunes gracias a Linting. Linting es el proceso de ejecución de un programa para identificar los posibles errores de 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 de 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 Introducir código mediante Emmet.

Preprocesadores de CSS

Vista previa de imágenes y colores en la Vista de código

Vista previa de imagen

Ahora, Dreamweaver le permite obtener una vista previa de las imágenes en la Vista de código al colocar el ratón sobre la dirección URL de la imagen.

Las vistas previas de las imágenes ahora están activadas para rutas de imágenes remotas como <img src="https://a2.behance.net/img/profile/no-image-138.jpg?cb=1816124956" />.

Si Dreamweaver no es capaz de mostrar la vista previa de las rutas remotas, se mostrará el mensaje “No se puede cargar la imagen”.

Puede obtener una vista previa de los siguientes tipos de archivos de imágenes:

JPEG
JPG
PNG
GIF
BMP
SVG

La vista previa de la imagen se muestra al colocar el ratón sobre las direcciones URL en los siguientes casos:

• url( );
• data-uri( )
• Valor del atributo src de la etiqueta img

Vista previa de colores

También se ha mejorado la vista previa de los activos en la Vista de código. Ahora, Dreamweaver le permite obtener una vista previa de los colores en la Vista de código al colocar el ratón sobre los valores de color. Los formatos compatibles son los siguientes:

Valores hexadecimales de color de 3 y 6 dígitos: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228, 0,5);
HSL: hsl(120, 100 %, 50 %);
HSLA: hsla(120, 60 %, 70 %, 0,3);
Nombres de colores predeterminados: oliva, verde azulado, rojo, etc.;

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:

• Boostrap_Snippets
• CSS_Animation_And_Transitions
• CSS_Effects
• CSS_Snippets
• HTML_Snippets
• Fragmentos de JavaScript (actualizado)
• PHP_Snippets
• Preprocessor_Snippets
• Responsive_Design_Snippets

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

Integración con Bootstrap

Ahora puede abrir los sitios web creados con el framework de Bootstrap (versión 3 y posterior) en Dreamweaver y editar las páginas con las funciones de diseño visual o código. Dreamweaver reconoce los archivos CSS asociados si sus nombres contienen “bootstrap”. 

También puede añadir componentes de Bootstrap en Dreamweaver (con el panel Insertar) y modificar el diseño de varias ventanas gráficas editando fácil y rápidamente las cuadrículas.

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

Plantillas de inicio de Bootstrap

Dreamweaver ahora incluye plantillas de Bootstrap que le ayudan a empezar a trabajar rápidamente con diseños interactivos. Puede acceder a las siguientes plantillas de Bootstrap desde el cuadro de diálogo Nuevo documento:

• Bootstrap-eCommerce
• Bootstrap-One PageBootstrap-Portfolio
• Bootstrap-The Agency
• Bootstrap-The Grid

Plegado de código

Ahora es posible plegar código en los archivos HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML y SVG en bloques de etiquetas. Cuando se coloca el ratón sobre la columna de número de línea, aparece un pequeño triángulo junto a los números de línea de la Vista de código. Aquí podrá hacer clic para contraer o ampliar los bloques de código. Esta nueva función de plegado de código reemplaza a la existente, que se basaba en la selección del código para contraerlo.

Los iconos de plegado de código (triángulos invertidos) se muestran en todos los bloques de etiquetas que tienen más de dos líneas de código en la Vista de código.

Las operaciones 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 operación de Pegar pegará el texto copiado como un bloque contraído.

Plegado de código en los archivos HTML

A diferencia de la función anterior de contraer código, el código contraído ahora podrá incluir la etiqueta de cierre y se procesa de manera diferente a la implementación anterior.

El número de caracteres que se muestran en un bloque de código contraído ha aumentado. Esto le ayudará a obtener una vista previa de los atributos iniciales, si existieran, en el bloque de etiquetas contraído. Por ejemplo, si la etiqueta Div contraída tiene un ID y atributos de clase, el bloque contraído tendrá este aspecto:

En Windows, puede obtener una vista previa del código dentro de un bloque contraído al colocar el ratón sobre el código contraído. El bloque contraído se amplía automáticamente cuando el código que está dentro de un bloque contraído se selecciona mediante las funciones Selector de etiquetas, Buscar y reemplazar, Ir a línea, Vista rápida de elementos, Vista en vivo o Deshacer/Rehacer. Cuando se deja de seleccionar el bloque de código, este se vuelve a contraer automáticamente.

Plegado de código en archivos CSS, LESS, SASS, SCSS y JS

Ahora los bloques de código que aparecen entre llaves se pueden contraer en los archivos CSS, Less, Sass, SCSS y JS.

Coloque el ratón sobre la zona que tenga código contraído en cualquier línea que contenga llaves de apertura “{”.

Al hacer clic en contraer, el contenido que aparezca entre llaves y coincida con la vista previa se mostrará como “{…}”

Plegado de código en los archivos PHP

En los archivos PHP, los elementos de HTML y los bloques de código de CSS y JS se pueden contraer, además de los bloques de código de PHP.

Todo bloque de PHP que empiece por “<?php” y termine con “<?php” se puede contraer.

Para contraer el bloque de código, coloque el ratón sobre la zona de código contraído, en cualquier línea que contenga <?php, y haga clic en el icono de contraer.