Ver índice de contenidos del libro

Capítulo 14. Fragmentos de código

Cuando se crean páginas web, es habitual repetir una y otra vez algunos trozos de código HTML, como por ejemplo las tablas, los formularios y la cabecera de las páginas. Para no tener que reescribir continuamente el mismo código, se utilizan los fragmentos de código, llamados "snippets" en inglés.

Crear fragmentos de código y trabajar con ellos es un proceso muy sencillo. A continuación se muestran los pasos necesarios para crear un fragmento correspondiente a una tabla completa de XHTML:

  1. Se escribe el código XHTML completo de una tabla vacía (con sus etiquetas <caption>, <thead>, <tbody>, <tfoot>, sus atributos summary, scope, etc.)
  2. Se guarda el código anterior en un archivo de texto con un nombre fácil de identificar (por ejemplo, "Tabla XHTML").
  3. Cuando se necesite insertar una tabla en una página XHTML, se copia y se pega todo el código creado anteriormente y se completa con los datos necesarios.

El método descrito anteriormente no es muy eficiente si se realiza de forma manual. Afortunadamente, muchos programas utilizados para el diseño web permiten gestionar de forma más cómoda los fragmentos de código o snippets.

A continuación se muestra la forma de trabajar con los fragmentos de código en el conocido programa Dreamweaver:

1) Si no está visible, se debe mostrar la ventana correspondiente a los fragmentos de código mediante la opción de menú Ventana > Fragmentos o pulsando Mayúsc. + F9. Una vez abierta esta ventana, el aspecto que muestra se ve en la parte inferior izquierda de la siguiente imagen:

Visualizando la ventana de fragmentos de código en Dreamweaver

Figura 14.1 Visualizando la ventana de fragmentos de código en Dreamweaver

2) Dreamweaver ya dispone por defecto de muchos fragmentos de código útiles. Si por ejemplo se pulsa sobre la carpeta Meta, Dreamweaver muestra un snippet llamado No crear caché. Al pinchar dos veces sobre el nombre del fragmento, se inserta su contenido en el lugar en el que se encuentre el cursor dentro de la página, tal y como muestra la siguiente imagen:

Insertando un fragmento de código de Dreamweaver en una página web

Figura 14.2 Insertando un fragmento de código de Dreamweaver en una página web

3) Para añadir un fragmento de código propio, se crea en primer lugar una carpeta en la que se guardarán todos los snippets propios. El nombre elegido para esta carpeta es Propios y la forma de crearla es pinchando sobre el pequeño icono que simboliza una carpeta:

Creando una nueva carpeta para guardar los fragmentos de código propios

Figura 14.3 Creando una nueva carpeta para guardar los fragmentos de código propios

Una vez escrito el nombre de la nueva carpeta, el aspecto que muestra la ventana de snippets es el siguiente:

Nueva carpeta creada para guardar los fragmentos de código propios

Figura 14.4 Nueva carpeta creada para guardar los fragmentos de código propios

4) Para crear un fragmento de código propio, se pulsa sobre el pequeño icono que simboliza un nuevo fragmento:

Creando un nuevo fragmento de código

Figura 14.5 Creando un nuevo fragmento de código

Después de pulsar sobre ese icono, aparece la ventana en la que se puede escribir el nombre y el contenido del fragmento:

Propiedades (nombre, descripción y contenido) del fragmento de código propio

Figura 14.6 Propiedades (nombre, descripción y contenido) del fragmento de código propio

En este caso, se trata de un fragmento de código que inserta un bloque completo de código XHTML. También es posible crear fragmentos que añaden código XHTML antes y después del texto que ha sido seleccionado previamente.

Una vez creado el snippet, ya se puede insertar en cualquier zona de la página XHTML simplemente pulsando dos veces sobre su nombre:

Insertando un fragmento de código propio en una página XHTML

Figura 14.7 Insertando un fragmento de código propio en una página XHTML

En las siguientes secciones de este capítulo, se incluyen algunos fragmentos de código imprescindibles para crear páginas web.