Ahorrar tiempo: plantillas web con Server Side Include (SSI)
Hoy vamos a hablar de una técnica que no por antigua es menos útil. Además, en un vistazo a muchos sitios web que se encuentran por ahí, se da uno cuenta de que a veces se emplean recursos de programación y complejos CMS para sitios que realmente no tienen tanta complicación.
Qué es Server Side Include (SSI)
Es una tecnología web de servidor que permite insertar un archivo en otro. Su principal utilidad es para crear plantillas para sitios web con las zonas que se repiten y son comunes a todas las páginas que componen el sitio.
Qué ventajas tiene utilizar SSI
La más evidente es el ahorro de tiempo. Si la plantilla que contiene el diseño del sitio web está almacenada en uno o varios archivos independientes del contenido, cualquier cambio que realicemos será expandido automáticamente a todas las páginas del sitio. Por ejemplo, cuando agreguemos una nueva página a nuestro sitio, habrá que actualizar el menú de navegación. Si empleamos páginas estáticas habrá que cambiar el menú en todas y cada una de las páginas. Si usamos SSI, con modificar sólo la plantilla donde tenemos el menú será suficiente.
Cuándo utilizar SSI
Aunque pueda parecer que la aparición de potentes CMS hizo obsoleta la utilización de SSI, no es así. El método adecuado para crear una web es el que se ajuste a su tamaño y necesidades. Si tenemos, por ejemplo, un sitio pequeño, de, digamos, entre 3 y 8 páginas y con contenido totalmente estático, creo que merece la pena aunque sea probar SSI antes de meternos con un CMS como Wordpress (facilísimo de usar pero con una complicada creación de plantillas y diseños), Drupal o Joomla (potentes pero con muchas funciones que para sitios muy pequeños no vamos a necesitar). Lo que se debe evitar en cualquier caso es construir las páginas estáticamente una a una, copiando la plantilla cada vez que creemos una nueva, ya que para cualquier cambio de deseemos hacer en el futuro en el diseño deberemos hacerlo en todas las páginas.
Habilitando Server Side Include en nuestro servidor
Si disponemos de IIS lo activaremos a través de la interfaz del administrador (es tan intuitivo que no lo explicamos aquí. Si hay dudas, se puede consultar la ayuda y el manual de administrador de IIS. Si tenemos un alojamiento compartido, lo haremos a través del panel de control del hosting o llamando al soporte técnico).
Si nuestro servidor es Apache, tendremos que crear un archivo .htacces en la raíz de nuestro sitio web. Si empleamos Windows en nuestra máquina local, no nos va a dejar crear o renombrar un archivo que se llame así. Para crearlo debemos crear primero un archivo de texto llamado, por ejemplo, htaccess.txt. Seguidamente abrimos línea de comandos y nos situamos en la carpeta donde está el archivo a través del comando CD (abreviatura de Change Directory). Por ejemplo, CD C:/Apache/htdocs/misitio
Una vez estamos en la carpeta o directorio, ejecutamos el comando REN (abreviatura de RENAME) de esta manera: ren htaccess.txt .htaccess
Editamos este archivo con el block de notas (botón derecho->abrir con) o, mejor aún, con Notepad++ y añadimos estas líneas:
AddType text/html .shtml AddHandler server-parsed .html AddHandler server-parsed .shtml Options Indexes FollowSymLinks Includes
La segunda línea lo que hace es activarlo para archivos .html. Si quisiéramos activarlo para cualquier otra extensión de archivo (no lo hagáis para Php, Asp, Jsp y similares ya que llevan todos un sistema idéntico incorporado) no hay más que crear otra línea idéntica cambiando .html por la extensión deseada (por ejemplo, .htm).
Creando plantillas con SSI
Bien. Ahora que ya tenemos SSI activado en nuestro servidor, crearemos nuestra primera plantilla:
Archivo cabecera1.html:
Contiene la primera parte de la cabecera, hasta title. Muchos incluyen la cabecera completa, hasta body o más allá pero es un grave error ya que la etiqueta title y, opcionalmente, las meta description deben poder ser modificadas individualmente en cada página. Cada página debería tener su propio título y descripción.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
Archivo cabecera2.html. Continuamos con la plantilla base. Podemos incluir aquí cosas como bloques de publicidad o un menú de navegación comunes a todas las páginas. Como veremos más adelante, dejamos un hueco entre plantilla1 y plantilla2 para insertar el título y la descripción.
</head> <div id="wrapper"> <!-- start header --> <div id="header"> <div id="menu"> <ul> <li class="current_page_item"><a href="./">Inicio</a></li> <li><a href="foros">Foros</a></li> <li><a href="contacto.html">Contacto</a></li> </ul></div> </div> <!-- end header --> <div id="logo"> <h1><a href="./">tu sitio.com</a></h1> <h2>Tu sitio favorito</h2> </div> <!-- start page --> <!-- start sidebar --> <div id="sidebar"> <ul> <li id="search"> <h2>Buscar</h2> <form method="get"> <fieldset> <input id="s" name="s" type="text" /> <input id="x" type="submit" value="Search" /> </fieldset> </form> </li> <li> <h2>Menú</h2> <ul> <li><a href="./">Inicio</a></li> <li><a href="pagina1.html">Pagina1</a></li> <li><a href="pagina2.html">pagina1</a></li> </ul> <h2>Recursos</h2> <ul> <li><a href="enlaces.html">Páginas amigas</a></li> <li><a href="foro">Nuestros foros</a></li> </ul> </li> </ul> </div> <!-- end sidebar --> <div id="page"><!-- start content --> <div id="content"></div> </div> </div>
Y en cada página de nuestro sitio incluimos las plantillas mediante la directiva <!--#include file="archivo-insertado.html"-->
Archivo: index.html
<!--#include file="cabecera1.html"--> <title>Mi web</title> <meta name="description" content="descripción del sitio" /> <!--#include file="cabecera2.html"--> <h2>Introducción</h2> <div class="entry">Bla bla bla</div> <!--#include file="pie.html"-->
Observad el "sandwich" hecho entre los includes y la etiqueta title. Cada directiva include es la que, como la propia palabra indica, incluye o inserta el contenido en nuestra página. Como podéis observar, hemos creado otro archivo denominado pie.html. El pie se encargará de cerrar las etiquetas html como el body y otras. También podemos incluir aquí, teniéndolo que hacer una única vez, los códigos de nuestros contadores de estadísticas. Además, en el copyright, cuando cambiemos de año sólo habrá que hacerlo en esta página y el cambio se verá reflejado en todas las páginas:
<!-- end content --> <div style="clear: both;"></div> <!-- end page --> <!-- start footer --> <div id="footer"> <div id="footer-wrap"> (c) 2009 tuweb.com</div> </div> <!-- end footer --> <!-- Start of StatCounter Code --> <script type="text/javascript"><!--mce:0--></script> <script src="http://www.statcounter.com/counter/counter_xhtml.js" [etc...] <!-- End of StatCounter Code --> </body> </html>
