Reutilizar código con fragmentos

Si nota que está repitiendo bloques de código varias veces, puede utilizar fragmentos de código para agilizar el proceso de escritura de código. Escriba el código tan solo una vez, guárdelo como un fragmento y, a continuación, haga doble clic en el panel Fragmentos de código para insertarlo en varios lugares.

Los fragmentos de código creados con el panel Fragmentos de código no son específicos del sitio, por lo que se pueden reutilizar en otros sitios. También puede utilizar fragmentos de código por diferentes dispositivos, así como por diferentes versiones de Dreamweaver, utilizando los ajustes de sincronización.

Dreamweaver viene con muchos fragmentos de código ya incorporados. Sin embargo, también puede crear sus propios fragmentos de código y guardarlos.

Examine los siguientes casos de uso para entender donde puede utilizar fragmentos de código en el flujo de trabajo:

• Si está trabajando en una empresa que sigue determinados estándares de diseño, o si trabaja por su cuenta en múltiples proyectos, puede utilizar fragmentos de código en cualquier situación, para lograr uniformidad de diseño, almacenando estas partes de código comunes como fragmentos de código y, después, insertándolos en su código.
• Si necesita definir, mantener y aplicar algunos estándares de programación, los fragmentos resultarán útiles.
• Los elementos interactivos programados manualmente de una página web pueden consumir mucho tiempo. Utilice algunos de los fragmentos de código de la sección Bootstrap o Responsive_Design_Snippets del panel Fragmentos de código (por ejemplo, un fragmento de código de tabla interactivo). Con un solo clic ha conseguido insertar casi 20 líneas de código para esa tabla interactiva.
  Edite la tabla según sea necesario. Puede combinar columnas o filas, añadir columnas o filas, o darles el estilo que desee y, a continuación, seleccione el código y guárdelo como un nuevo fragmento que podrá reutilizar en el resto de las páginas que cree. Para obtener más información sobre la creación de fragmentos de código, consulte Crear fragmentos de código.
• Los comportamientos JavaScript, los efectos de CSS y los estilos de CSS son también excelentes candidatos para la reutilización de código..

Panel Fragmentos de código

En Dreamweaver, puede administrar fragmentos de Código mediante el panel Fragmentos de código (Ventana > Fragmentos de código).

Un panel de fragmentos de código es como una colección de piezas de código.

Qué se puede hacer con el panel Fragmentos de código

Con el panel Fragmentos de código pueden realizarse las tareas siguientes:

Expanda las carpetas para ir hasta un fragmento de código y, a continuación, haga doble clic en el mismo o haga clic en el icono Insertar para insertar el fragmento de código en la ubicación del cursor. Para envolver texto existente en un fragmento de código, seleccione el texto, después inserte el fragmento de código y el texto se envolverá en el fragmento de código. Para más información, consulte Insertar fragmentos de código.

Administre sus fragmentos alojándolos en carpetas con un convenio de nomenclatura intuitivo. Para crear una carpeta de fragmentos, haga clic en el icono Nueva carpeta. Se creará una nueva carpeta de fragmentos en un nodo seleccionado. Para cambiar la ubicación de la carpeta de fragmentos, arrástrela hasta la posición deseada. (Para obtener más información, consulte Creación de carpetas de fragmentos de código.

Utilice los fragmentos de código previamente empaquetados y edítelos para crear sus propios fragmentos de código. Si no, cree sus propios fragmentos de código desde cero y, a continuación, guardarlos en el panel Fragmentos de código para volver a utilizarlos posteriormente. Para más información, consulte Crear fragmentos de código.

Para editar un fragmento existente, seleccione el fragmento y haga clic en el icono Editar. Para más información, consulte Editar fragmentos de código.

Eliminar fragmentos de código que ya no se necesiten. Para eliminar un fragmento de código, selecciónelo y haga clic en el icono Eliminar.

Para cambiar el nombre de un fragmento de código, haga clic con el botón derecho en el fragmento de código para abrir el menú contextual. Seleccione Cambiar nombre del fragmento y, a continuación, escriba el nuevo nombre del fragmento de código.

Las claves desencadenantes permiten crear códigos breves intuitivos que puede escribir, en lugar de ir a un determinado fragmento del panel Fragmentos de código y después insertarlo. Si ha definido claves desencadenantes, sitúe el cursor en el punto necesario del código. A continuación, escriba el texto de la clave desencadenante y pulse la tecla Tabulador. El fragmento de código se insertará en su código. Para obtener más información, consulte Añadir claves desencadenantes e insertar fragmentos de código utilizando las claves desencadenantes.

Insertar fragmentos

Puede insertar fragmentos de Código en su código, en el lugar donde esté situado el cursor.

Crear fragmentos de código

Editar fragmentos de código

Para realizar cambios en un fragmento de código existente, puede hacer lo siguiente:

• Haga clic con el botón derecho en el fragmento, para abrir el cuadro de diálogo Editar fragmento
• Seleccione el fragmento y haga clic en el icono Editar fragmento de la parte inferior del panel.

Al editar un fragmento de código, las repeticiones existentes del fragmento en el documento no se actualizan.

Puede editar todos los campos en el cuadro de diálogo Fragmentos como, por ejemplo, el nombre, la descripción, la clave desencadenante y el código.

Crear carpetas de fragmentos de código

Añadir claves desencadenantes e insertar fragmentos de código utilizando las claves desencadenantes.

Utilice las claves desencadenante para añadir rápidamente fragmentos de código.

En primer lugar, asigne claves desencadenantes a todos sus fragmentos utilizados con frecuencia. A continuación, en Vista de código, escriba el texto de la clave desencadenante y pulse Tabulador, con lo que Dreamweaver añadirá el fragmento en la ubicación del cursor.

Cómo distribuir fragmentos de código por varios dispositivos

La función de sincronización en la nube de Dreamweaver ayuda a mantener sincronizados los fragmentos entre dos equipos.

Utilice la función de configuración de la sincronización de Dreamweaver a fragmentos puerto creados con una instancia de Dreamweaver en otro equipo que ejecute Dreamweaver (por ejemplo, las instalaciones de Dreamweaver de la oficina y el hogar). 

Para ir a los ajustes de sincronización: