Descubra cómo puede crear fragmentos mediante el panel Fragmentos de Dreamweaver y reutilizar el código a través de distintos sitios de Dreamweaver.

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.

¿Cómo aprovechar al máximo un fragmento?

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.

Panel Fragmentos en Dreamweaver
Panel Fragmentos en Dreamweaver

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

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

Insertar fragmentos

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.

Crear carpetas de 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.

Crear 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.

Editar 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

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.

Cambiar el nombre de fragmentos de código

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.

Añadir/editar claves desencadenantes

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.

  1. Sitúe el cursor en el punto de inserción en el lugar en que desee insertar el fragmento de código.

  2. En el panel Fragmentos de código (Ventana > Fragmentos de código), haga clic dos veces en el fragmento o haga clic en el botón Insertar del panel Fragmentos de código.

    También puede hacer clic con el botón derecho del ratón (Windows) o pulsar la tecla Control y hacer clic (Macintosh) en el fragmento y, a continuación, elegir Insertar en el menú emergente.

Nota:

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 claves desencadenantes.

Nota:

Para ver cómo es un fragmento de código, inserte un fragmento en la Vista de diseño.

Crear fragmentos de código

  1. En el panel Fragmentos, haga clic en el icono Nuevo fragmento situado en la parte inferior del panel.

  2. Introduzca un nombre para el fragmento de código.

    Nota:

    Los nombres de fragmentos no pueden contener caracteres no válidos para los nombres de archivos, por ejemplo barras (/ o \), caracteres especiales o comillas dobles (“).

  3. (Opcional) Introduzca una descripción de texto del fragmento.

    Una descripción de texto posibilita al resto de miembros del equipo identificar y utilizar el fragmento.

    La creación de un fragmento de código con descripción suficiente facilita identificarlo para su uso posterior.
    La creación de un fragmento de código con descripción suficiente facilita identificarlo para su uso posterior.

    Nota:

    También pueden crearse claves desencadenantes para añadir fragmentos de código a su código. Para obtener más información, consulte Añadir claves desencadenantes e insertar fragmentos de código utilizando las claves desencadenantes.

  4. Haga clic en OK.

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

  1. En el panel Fragmentos, haga clic en el icono Nueva carpeta de fragmentos situado en la parte inferior del panel.

  2. Arrastre los fragmentos que desee a la nueva carpeta o a otras carpetas.

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.

  1. En el panel Fragmentos de código, haga clic con el botón derecho (Windows) o Control-clic (Macintosh) y seleccione Añadir tecla desencadenante.

    Seleccione Añadir tecla desencadenante en el panel Fragmentos
    Seleccione Añadir tecla desencadenante en el panel Fragmentos
  2. Introduzca el texto necesario en el campo de clave desencadenante.

    En la siguiente imagen, se asigna una tecla desencadenante de mailto a un fragmento de código para la creación de un vínculo mailto, con lo que resultará fácil acordarse más adelante. Asegúrese de crear claves desencadenantes sencillas, cortas e intuitivas.

    Escriba texto en el campo Tecla desencadenante.
    Escriba texto en el campo Tecla desencadenante.

    Nota:

    Las claves desencadenantes no pueden contener caracteres especiales (salvo el guion bajo). Además, no se pueden utilizar la misma clave desencadenante para dos fragmentos diferentes.

  3. Para añadir fragmentos a su código utilizando las teclas desencadenantes, escriba el texto desencadenante (en Vista de código) y pulse Tabulador para insertar el fragmento en su código.

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:

  1. Haga clic en Editar > Preferencias.

  2. En la sección de Ajustes de sincronización, haga clic en Sincronizar ajustes ahora.

    Los ajustes se guardarán en la nube. La próxima vez que se inicie Dreamweaver, se importarán estos ajustes. Los ajustes locales se sustituirán por los importados de la nube.

    Se sincronizan los fragmentos de código y el resto de ajustes de preferencias.

    Para obtener más información sobre ajustes de sincronización, consulte Sincronización de ajustes de Dreamweaver con Creative Cloud.

Nota:

Si realiza a menudo ajustes de sincronización, active la sincronización automática, haciendo clic en Activar sincronización automática en la sección de ajustes del panel Preferencias. Todos los cambios en los ajustes se guardan automáticamente en la nube.

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