Sugerencias de código y completado de código

Las funciones inteligentes de sugerencias o de completado de código de Dreamweaver le permiten insertar y editar código rápidamente al reducir los errores tipográficos y otros errores comunes.

También puede utilizar esta función para ver:

• Atributos disponibles para una etiqueta
• Parámetros disponibles para una función
• Métodos disponibles para un objeto

Dreamweaver admite sugerencias para código de los siguientes lenguajes y tecnologías:

• HTML
• CSS
• JavaScript 
• PHP

Siga leyendo para aprender cómo funcionan para estos lenguajes las sugerencias de código y el completado de código.

Activar sugerencias de código

Para habilitar las sugerencias de código, haga clic en Editar > Preferencias > Sugerencias de código y seleccione Habilitar sugerencias de código. Para deshabilitar las sugerencias de código, anule la selección de Habilitar sugerencias de código.

Para habilitar la inserción automática de llaves y comillas, seleccione Insertar llaves automáticamente e Insertar comillas automáticamente, respectivamente.

Para habilitar las descripciones en las sugerencias de código, seleccione Habilitar sugerencias de herramientas de descripción. Podrá ver entonces las descripciones junto con las sugerencias de código.

Sugerencias de código HTML

Los siguientes tipos de sugerencias para el código están disponibles para HTML:

• Sugerencias de etiquetas
• Sugerencias de nombre de atributo
• Sugerencias de valores de atributo

Sugerencias de etiquetas

Pulse la tecla < en el teclado para empezar a escribir el código. A medida que escribe, Dreamweaver muestra las etiquetas HTML válidas. Si la cadena que está escribiendo aparece en el menú, desplácese hasta ella y pulse Intro o Retorno para completar la entrada.

Por ejemplo, al escribir <, un menú emergente muestra una lista de nombres de etiqueta. En lugar de escribir el resto del nombre de la etiqueta, puede seleccionar la etiqueta del menú para incluirla en el texto.

Estas sugerencias para etiquetas HTML también incluyen una breve descripción de la etiqueta según corresponda.

Sugerencias de nombre de atributo

Dreamweaver muestra los atributos adecuados para las etiquetas durante la codificación en Dreamweaver. Escriba un nombre de etiqueta y pulse la barra espaciadora para que se muestren los nombres de atributo válidos que puede utilizar.

Sugerencias de valores de atributo

El texto de la sugerencia del valor de atributo puede ser estático o dinámico (ya que en las sugerencias para el código se muestran valores basados en lo que está presente en archivos relacionados). 

La mayoría de las sugerencias de valor de atributo son estáticas. Tome por ejemplo el valor del atributo de destino, que en sí mismo es estático por naturaleza, por lo que las sugerencias son estáticas también. 

Dreamweaver muestra sugerencias dinámicas para el código para los valores de atributo que lo requieren, como id, target, src, href y class.

Estos son algunos ejemplos de sugerencias para el código mostradas dinámicamente. 

Sugerencias de código dinámicas para src

En este ejemplo, cuando se escribe el src, se presentan valores de atributo válidos y cuando se seleccionan imágenes, Dreamweaver muestra las imágenes válidas reales que están presentes en la carpeta de imágenes. Después es posible desplazarse y elegir la que se desea.

Si se tienen activos en las Bibliotecas CC, estos activos también aparecen cuando se escribe el src. Estos activos de Bibliotecas CC se indican con un icono de nube.

Cuando se elige un activo de una Biblioteca CC, aparece un menú emergente que permite que se vuelva a muestrear el tamaño de la imagen y cambiar el formato de imagen.

Sugerencias de código dinámicas para href

Cuando se escribe href, Dreamweaver muestra una lista de archivos en la carpeta, a la vez que da la opción de examinar y seleccionar el archivo al que se quiere vincular.

Sugerencias de código dinámicas para la identificación y el estilo

Si se han definido ids en los archivos CSS, cuando se escribe id en los archivos HTML, Dreamweaver muestra todos los ids disponibles.

De igual manera, si se han definido estilos CSS, cuando se escribe style en los archivos HTML, Dreamweaver muestra todos los estilos disponibles.

Sugerencias de código CSS

Las sugerencias de código están disponibles para los diferentes tipos de CSS siguientes:

• @rules
• Propiedades
• Pseudoselectores y pseudoelementos
• Método abreviado

Además de sugerencias de código, también hay sugerencias para las propiedades CSS.

Sugerencias de código para CSS @rules

Dreamweaver muestra sugerencias para el código para todas las @rules junto con una descripción de la regla CSS, como se muestra aquí.

Sugerencias de propiedades CSS

Cuando se escribe en las propiedades de CSS, al escribir dos puntos, aparecen sugerencias para elegir un valor válido.

En el ejemplo siguiente, cuando se escribe font-family: aparecen los conjuntos de fuentes válidos.

Se puede seleccionar uno de los conjuntos de fuentes, también se puede abrir el cuadro de diálogoAdministrar fuentes dentro de estas sugerencias y definir las fuentes que se deseen. 

Otro ejemplo de sugerencias para el código útiles cuando se trabaja con color en CSS. Cuando se escribe en cualquier propiedad relacionada con el color (por ejemplo, color de borde o color de fondo), al pulsar dos puntos, las sugerencias para el código muestran una lista de colores. Se puede seleccionar un color de la lista, o bien abrir el Selector de color en las propias sugerencias para el código y configurar el color que se desee.

Si se tienen muestras de color en las bibliotecas CC, las sugerencias para el código también las muestran.

Sugerencias de pseudoselectores y pseudoelementos

Puede añadir un pseudoselector CSS a un selector, para definir un estado particular del elemento. Por ejemplo, al utilizar :hover, el estilo se aplica cuando el usuario pasa el cursor por encima del elemento especificado por el selector.

Al teclear “:”, Dreamweaver muestra una lista de pseudoselectores válidos si el cursor está en el contexto adecuado.

Al teclear “:”, Dreamweaver muestra una lista de pseudoelementos válidos (utilizados para diseñar partes específicas del documento) si el cursor está en el contexto adecuado.

Sugerencias de métodos abreviados CSS

Las propiedades de métodos abreviados son propiedades que le permiten establecer simultáneamente los valores de varias propiedades CSS diferentes. Como ejemplos de propiedades de métodos abreviados CSS pueden citarse las propiedades background (fondo) y font (fuente).

Como se podrá ver en el ejemplo que aparece a continuación, si se teclea una propiedad de método abreviado CSS (como, por ejemplo, background (fondo)), tras teclear un espacio, Dreamweaver muestra lo siguiente:

• Valores de propiedades adecuados en orden de relevancia
• Valores obligatorios que deben utilizarse (por ejemplo, si se utiliza font (fuente), en ese caso resultan obligatorios font-size (tamaño de fuente) y font-family (familia de fuentes))
• Expansión del navegador para esa propiedad

Cuando se rellenan las propiedades de métodos abreviados de CSS, las sugerencias de código visualizan también los valores de propiedades que haya tecleado.

Sugerencias de código CSS

Para algunas propiedades CSS (como box-shadow o text-shadow), Dreamweaver muestra sugerencias que indican qué valores deberían ir a continuación y también indica qué valores son los obligatorios utilizando un asterisco. 

También puede ver cómo el navegador interpreta el CSS.

Sugerencias para el código JavaScript

En los archivos JavaScript, Dreamweaver proporciona sugerencias para los parámetros de función y variables. 

En el siguiente ejemplo, el fragmento de código indica el tipo.

Dreamweaver actualiza automáticamente la lista de sugerencias para el código disponibles mientras se trabaja con archivos JavaScript. Por ejemplo, si se está trabajando en un archivo HTML principal y se cambia a un archivo JavaScript para realizar un cambio. El cambio que se hace en el archivo JavaScript se refleja en la lista de sugerencias para el código al regresar al archivo HTML principal. 

Inspección de objetos en vivo

Dreamweaver también actualiza automáticamente las sugerencias de código de tipo JavaScript.

Por ejemplo, si ha definido una variable como un número, Dreamweaver retiene esa información. Al hacer referencia posteriormente a esa variable en el código, se indicará su tipo.

Si se cambia el tipo de variable (por ejemplo, a una cadena), en ese caso las sugerencias de código de Dreamweaver indicarán automáticamente que la variable es una cadena.

Inclusión de documentación dinámica

Si ha añadido comentarios para una función en particular, en ese caso, cuando se sugiere esa función, Dreamweaver visualiza también la documentación de dicha función. 

Sugerencias de código PHP

Dreamweaver admite sugerencias para el código para las versiones PHP 5.6 y 7.1. Estas sugerencias para el código PHP son específicas del sitio y cubren todas las funciones, clases y constantes clave.

Para obtener más información sobre 5.6 y 7.1 de PHP, consulte el Manual de PHP.

Para obtener más información sobre sugerencias para el código específicas del sitio, consulte Sugerencias de código específicas del sitio.

Una función útil de las sugerencias para el código PHP es el completado automático de variables.

Cuando se escribe un signo de dólar ($), aparece una lista de todas las variables existentes en el script actual. Se selecciona el que se desee y se pulsa Intro o Retorno. Las variables de los archivos relacionados también aparecen, eliminando el riesgo de reutilizar la misma variable para otro propósito.

Cuando PHP 7.1 se establece como predeterminado, Dreamweaver muestra las sugerencias de código específicas de PHP 7.1.

Editar la configuración de retardo de sugerencias de código PHP

Para mejorar el rendimiento de la escritura del código en archivos.php, Dreamweaver 2017.5 y las versiones posteriores disponen de un retardo añadido de las sugerencias de código PHP. Al escribir código PHP, Dreamweaver muestra las sugerencias con un retardo de 400 ms. Si desea modificar los ajustes de retardo para el código PHP, siga este procedimiento: 

Sugerencias de código específicas del sitio

Dreamweaver permite a los desarrolladores que trabajan con Joomla, Drupal, Wordpress u otros frameworks ver sugerencias de código PHP conforme escriben en la Vista de código. Para mostrar estas sugerencias para el código, deberá crear en primer lugar un archivo de configuración empleando el cuadro de diálogo Sugerencias de código específicas del sitio. La configuración indica a Dreamweaver el lugar en el que debe buscar las sugerencias para el código específicas para el sitio.

Para ver un tutorial en vídeo sobre el uso de sugerencias para el código específicas del sitio, consulte www.adobe.com/go/learn_dw_comm13_es.

Crearl archivo de configuración

Utilice el cuadro de diálogo Sugerencias de código específicas del sitio con el fin de crear el archivo de configuración necesario para mostrar sugerencias para el código en Dreamweaver.

De manera predeterminada, Dreamweaver almacena el archivo de configuración en el directorio Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets.

Almacenamiento de las estructuras de sitios

Puede guardar la estructura del sitio personalizada que ha creado en el cuadro de diálogo Sugerencias de código específicas del sitio.

Cambiar el nombre de las estructuras de sitios

Al cambiar el nombre de la estructura del sitio, recuerde que no puede utilizar los nombres de las tres estructuras de frameworks predeterminadas ni la palabra “custom”.

Añadir archivos o carpetas a la estructura de un sitio

Puede añadir archivos o carpetas asociados a su framework. Después de agregar archivos o carpetas, puede especificar las extensiones de nombre de archivo de los archivos que desea explorar. 

Búsqueda de extensiones de nombre de archivo en un sitio

Utilice el cuadro de diálogo Buscar extensiones para ver y editar las extensiones de nombre de archivo incluidas en la estructura del sitio.