Entorno de programación en Dreamweaver

Si quiere trabajar con código en Dreamweaver, puede elegir utilizar el espacio de trabajo de desarrollador. Este espacio de trabajo muestra la Vista de código de forma predeterminada, y tiene solo los archivos y los paneles de fragmentos acoplados a la izquierda de la pantalla.

Si necesita más funcionalidades, haga clic en Ventana y, a continuación, elija el panel en cuestión.

En Dreamweaver, puede trabajar con código de varias maneras. Puede utilizar:

• Vista de código: aspecto claro y minimalista que permite trabajar exclusivamente con código, sin paneles ni ventanas adicionales. Para obtener más información, consulte Visualización de código en la ventana de documento.
• Vista dividida: en esta vista se dispone tanto de la vista de código como de la vista de diseño, para poder ver los cambios conforme se escribe código. Para obtener más información, consulte Codificación y edición simultánea de una página en la ventana de documento: vista dividida.

Puede moverse entre diferentes vistas haciendo clic en los botones de alternancia entre Código, Dividida y Diseño/En vivo, en la parte superior del espacio de trabajo.

También puede utilizar el inspector de código para mostrar el HTML en una ventana flotante. El inspector de código permite ver el diseño de la página web y el código de forma simultánea, sin tener que dividir la vista por la mitad. Para obtener más información, consulte Visualización de código en una ventana independiente con el inspector de código.

Visualización de código en la ventana de documento: vista de código

Codificación y edición simultánea de una página en la ventana de documento : vista dividida

Visualización de código en una ventana independiente con el inspector de código

El Inspector de código le permite trabajar en una ventana de programación independiente, como si trabajara en la vista de Código.

Escribir código más rápidamente en Dreamweaver

Vista de código en Dreamweaver ofrece funciones de utilidad para la programación, que ayudan a los diseñadores en la transición al desarrollo en Vista de código, y los programadores experimentados pueden beneficiarse de ayudas visuales, como la sangría automática, el coloreado de código y las fuentes redimensionables, para reducir errores y mejorar la legibilidad.

Estas son algunas de las funciones que ofrece Dreamweaver.

Sugerencias de código y completado de código

La función de sugerencias de código (o completado de código) de Dreamweaver le permite seleccionar etiquetas, atributos y estilos CSS de un menú emergente a medida que escribe. Esta función de completado automático del código le permite codificar con mayor rapidez y con menos errores.

Este es un ejemplo que muestra cómo funciona en HTML. 

Cuanto empiece a escribir “<”, Dreamweaver abrirá un menú emergente con todas las etiquetas HTML disponibles. Conforme siga escribiendo la etiqueta, Dreamweaver actualizará automáticamente las opciones disponibles de código HTML y le permitirá seleccionar una etiqueta aplicable. Cuando pulse Intro, Dreamweaver le insertará automáticamente la etiqueta. A continuación, aparecerá un segundo menú emergente con todas las propiedades disponibles de esa etiqueta.

La ayuda de sugerencias de código también está disponible para CSS, JavaScript y PHP (versiones 5.6 and 7.1 de PHP). 

Para obtener más información, consulte Sugerencias de código y completado de código.

Compatibilidad con las versiones 5.6 y 7.1 de PHP

Dreamweaver admite las versiones 5.6 y 7.1 de PHP. 

Puede elegir compilar los archivos PHP de su sitio con la versión 5.6 o 7.1 de PHP, usando el cuadro de diálogo Configuración del sitio (por separado para cada sitio), o las preferencias de la aplicación (para todos los archivos PHP guardados fuera de los sitios de Dreamweaver). A continuación, Dreamweaver configura las sugerencias de código y comprobaciones de linting (análisis de errores potenciales) para la versión seleccionada de PHP.

Para los nuevos sitios de Dreamweaver, el compilador de PHP predeterminado está establecido en la versión especificada en Editar > Preferencias > PHP.

Para obtener más información sobre la compatibilidad con PHP en Dreamweaver, consulte:

• Configurar las preferencias de PHP
• Sugerencias de código PHP

Para obtener información general sobre las versiones 5.6 y 7.1 de PHP, consulte los siguientes recursos:

• Migración de PHP 5.6.x a PHP 7.0.x: http://php.net/manual/en/migration70.php
• Migración de PHP 7.0.x a PHP 7.1: http://php.net/manual/en/migration71.php
• Para obtener más información sobre PHP 7.1: http://php.net/releases/7_1_0.php

Sugerencias de código de objeto JavaScript

Dreamweaver admite sugerencias de código de objeto en JavaScript. Dreamweaver proporciona sugerencias de código para objetos básicos de JavaScript, como conjuntos, fechas, números y cadenas. 

Además, Dreamweaver sigue las funciones de JavaScript que se creen y proporciona sugerencias de código utilizando sus propios nombres de función.

Para obtener más información, consulte Sugerencias de código y completado de código.

Refactorización de código JavaScript

Dreamweaver incorpora refactorización de código. La refactorización de código es el proceso de reestructurar código informático existente sin cambiar su comportamiento externo. El código resulta más legible y fácil de entender. La depuración de código permite ahorrar tiempo gracias a una serie de pequeñas funciones y a una sustitución adecuada. Con la refactorización de JavaScript, puede cambiar nombres de funciones y variables siendo consciente del ámbito de actuación.

Para obtener más información, consulte Escribir y editar código.

Coloreado de código para los diferentes tipos de archivos

Dreamweaver permite usar colores en código HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML y YAML.

Varios cursores para las tareas repetitivas

Escriba más de una línea de código a la vez para hacer rápidamente cosas, como crear una lista con viñetas, actualizar una serie de cadenas y hacer varias modificaciones a la vez.

Esta función es una enorme impulsora de la productividad, debido a que no es necesario escribir varias veces la misma línea de código. Los cursores múltiples lo hacen todo de una vez.

Al editar código, puede hacer lo siguiente:

• Añadir cursores múltiples para añadir nuevo contenido en varios lugares
• Seleccionar texto en varios lugares, para aplicar la misma edición a diferentes partes del documento

Para obtener más información, consulte Añadir cursores múltiples o selecciones múltiples.

Edición rápida de archivos de código relacionados

Para realizar cambios rápidos en el código, sitúe el cursor en los fragmentos de código específicos y utilice el menú contextual, o presione Ctrl-E (en Windows) o Cmd-E (en Mac), para acceder a la función Edición rápida.

Dreamweaver le mostrará opciones de código específicas pare el contexto y herramientas en la misma pantalla.

Caso de uso del escenario

Suponga el siguiente ejemplo:

Está editando un archivo HTML y observa algo que parece incorrecto en Vista en vivo. A continuación, cambia a Vista de código y observa que tiene que editar otro archivo relacionado (pongamos por caso un archivo CSS) para solucionar el problema. 

En lugar de cambiar de pestaña, haga clic con el botón derecho en el código correspondiente y haga clic en Edición rápida, o utilice un método abreviado de teclado y Dreamweaver abrirá la sección correspondiente del código en el archivo CSS relacionado, dentro del propio archivo HTML.

A continuación, puede editar el código CSS sin tener que ir a otro lugar ni cambiar de pestaña. Los cambios se actualizan automáticamente en el archivo CSS.

Para más información, consulte Edición rápida.

Documentación de CSS contextual

Documentos rápidos proporciona documentación para las propiedades CSS dentro de la propia vista de código.

Ya no es preciso ir a una página web fuera de Dreamweaver para obtener información sobre las propiedades CSS. Para activar Documentos rápidos, presione Ctrl + K (en Windows) o Cmd + K (en Mac).

Para obtener más información, consulte Obtención de ayuda con CSS desde Dreamweaver con Documentos rápidos.

Soporte inicial de Emmet

Emmet es un complemento que permite programar y generar código HTML y CSS a gran velocidad.

El complemento Emmet viene con Dreamweaver, lo que le permite utilizar abreviaturas de Emmet sin tener que molestarse en instalar el complemento.

Utilice abreviaturas de Emmet en la vista de código o en el inspector de código de Dreamweaver y presione la tecla Tabulador para expandir estas abreviaturas a formato HTML o CSS.

Las abreviaturas de HTML se expanden en páginas HTML y PHP.

Las abreviaturas de CSS se expanden en páginas CSS, LESS, Sass y SCSS o en la etiqueta style de las páginas HTML.

Para obtener más información sobre cómo usar Emmet, consulte Uso del kit de herramientas de Emmet con Dreamweaver.

Contracción del código

Dreamweaver le permite contraer secciones de código de modo que pueda centrarse fácilmente en las secciones que esté editando de forma activa. 

Puede contraer el código según etiquetas o paréntesis, o puede contraer el código según su selección. 

Para obtener más información, consulte Contracción y expansión del código.

Validación de código

Dreamweaver ofrece una potente funcionalidad de inspección de código (linting) para ayudarle a depurar errores del código. 

Analiza el código para señalar potenciales errores o usos sospechosos del código. En Dreamweaver, la inspección (linting) puede detectar y marcar errores en la sintaxis de HTML, errores de análisis de CSS o advertencias en los archivos de JavaScript.

Para obtener más información acerca de la inspección del código en Dreamweaver, consulte Inspeccionar código.

Si trabaja con PHP y el documento contiene código no válido, Dreamweaver mostrará ese código en Vista de diseño (si está abierto) y lo resaltará en Vista de código (según las preferencias que haya establecido).

Si selecciona el código en alguna de las vistas, el inspector de propiedades mostrará información sobre por qué el código no es válido y cómo se puede reparar.

Compatibilidad con preprocesadores CSS

Dreamweaver es compatible ahora con preprocesadores CSS, como SASS, Less y SCSS, con un completo coloreado del código, ocultación de código y compilación. 

La compatibilidad con preprocesadores CSS le permite ahorrar tiempo al trabajar con sitios grandes con hojas de estilo complicadas.

Para obtener información sobre la compatibilidad de preprocesadores de CSS en Dreamweaver, consulte Uso de preprocesadores de CSS en Dreamweaver.

Almacenamiento y reutilización de fragmentos de código

Guarde los bloques de código utilizados con más frecuencia como fragmentos de código dentro del panel Fragmentos. Después podrá insertar estos bloques de código en varias páginas.

Los fragmentos de código almacenados en el panel Fragmentos no son específicos del sitio, por lo que se pueden reutilizar en otros sitios.

También puede utilizar fragmentos de código en diferentes dispositivos, así como en diferentes versiones de Dreamweaver, mediante la configuración de sincronización.

Para obtener más información, consulte Reutilización de código con fragmentos.

Vista previa en tiempo real en el navegador

Obtenga rápidamente una vista previa de los cambios en el navegador, en tiempo real, sin necesidad de actualizar manualmente la página del navegador. Dreamweaver se conecta ahora con el navegador, por lo que los cambios aparecerán en el navegador al instante, sin tener que volver a cargar la página.

Para obtener más información, consulte Vista previa en tiempo real en el navegador.

Personalización de los métodos abreviados de teclado

En Dreamweaver puede usar los métodos abreviados de teclado que desee. Si está acostumbrado a usar métodos abreviados del teclado específicos, como, por ejemplo, Mayús+Intro para añadir un salto de línea, o Control+G para ir a una posición concreta del código, puede añadirlos a Dreamweaver mediante el editor de métodos abreviados del teclado.

Para obtener instrucciones, consulte Personalización de los métodos abreviados de teclado.

Apertura de archivos en Vista de código de forma predeterminada

Cuando abre un tipo de archivo que no suele contener HTML (por ejemplo, un archivo JavaScript), éste se abre en la vista de Código (o en el Inspector de código) en lugar de en la vista de Diseño. Puede especificar qué tipos de archivo desea abrir en la vista de código.