Vaya a cualquier sitio web y navegue de página en página y rápidamente se dará cuenta de que, aunque cada una de esas páginas puede ser diferente en muchos aspectos, también son muy similares en otras. Casi todos los sitios web incluyen elementos del diseño que se repiten en todas las páginas del sitio. Algunos ejemplos de elementos del sitio que se encontrarían en cada página serían el área de cabecera donde reside el logotipo, la navegación y el área de pie de página.
Los elementos repetidos en un sitio permiten la consistencia en la experiencia del usuario. Un visitante no necesita localizar la navegación en cada página porque una vez que la ha encontrado, sabe dónde estará en otras páginas del sitio que visita.
Índice de contenidos
Cómo’Includes’ hace que el diseño web sea más eficiente
Como alguien encargado de administrar un sitio web, estas áreas repetidas ofrecen un desafío. ¿Qué pasa si necesitas hacer un cambio en algo en esa área? Por ejemplo, si su pie de página (que está en cada página del sitio) incluye una declaración de derechos de autor con un año, ¿qué sucede cuando ese año cambia y usted necesita editar la fecha? Puesto que esa sección está en cada página, ahora necesita editar cada una de las páginas de su sitio individualmente para hacer ese cambio – ¿o sí?
El contenido incluido puede eliminar la necesidad de tener que editar cada página de su sitio para este contenido repetido. En su lugar, simplemente edita un archivo y todo su sitio y cada página en él recibe la actualización! Veamos algunas maneras en las que puede agregar esta funcionalidad a su sitio e incluir un archivo HTML en varios otros.
Contenido repetido en sistemas de gestión de contenido
Si su sitio utiliza un CMS, entonces es probable que utilice ciertas plantillas o temas que son parte de ese software. Incluso si usted construye estas plantillas desde cero, el sitio sigue aprovechando este marco para las páginas. Como tal, esas plantillas CMS contendrán las áreas del sitio que se repiten a lo largo de cada página. Simplemente ingrese al backend del CMS y edite las plantillas necesarias. Se actualizarán todas las páginas del sitio que utilizan esa plantilla.
Incluso si usted no tiene un sistema de gestión de contenido para su sitio, puede aprovechar los archivos incluidos. En HTML, hay includes que pueden ayudar a facilitar la gestión de estas áreas de plantillas de su sitio.
¿Qué incluye el HTML?
Un include es una sección de HTML que no es un documento HTML completo en sí mismo. En su lugar, es una parte de otra página que se puede insertar en una página web completa a través de la programación. La mayoría de los archivos incluyen los elementos mencionados anteriormente que se repiten en varias páginas de un sitio web. Por ejemplo:
- Navegación
- Información de copyright
- Áreas de cabecera
- Áreas de pie de página
Hay una ventaja en tener estas áreas repetidas incluidas en las páginas. Desafortunadamente, el proceso de inserción de un archivo no es algo que pueda ocurrir sólo con HTML, por lo que necesita tener algún tipo de programa o script que agregue sus archivos incluidos a sus páginas web.
Uso de Includes del lado del servidor
Server Side Includes, también conocido como SSI, fue desarrollado inicialmente para permitir a los desarrolladores web «incluir» documentos HTML dentro de otras páginas. Básicamente, un fragmento que se encuentra en un documento se incluye en otro cuando la página se ejecuta en el servidor y se envía al navegador web.
SSI está incluido en la mayoría de los servidores web, pero es posible que tenga que habilitarlo para que funcione. Si no sabe si su servidor es compatible con SSI, póngase en contacto con su proveedor de alojamiento.
He aquí un ejemplo de cómo puede utilizar SSI para incluir un fragmento de HTML en todas sus páginas web:
-
Guarde el HTML para los elementos comunes de su sitio como archivos separados. Por ejemplo, su sección de navegación puede guardarse como navigation.html o navigation.ssi .
-
Utilice el siguiente código SSI para incluir el código de ese documento HTML en cada página.
{C}
-
Añada este código en cada página que desee incluir el archivo.
Uso de PHP Includes
PHP es un lenguaje de scripting a nivel de servidor. Puede hacer varias cosas, pero un uso común es incluir documentos HTML dentro de sus páginas, de la misma manera que acabamos de cubrir con una SSI.
Al igual que SSI, PHP es una tecnología a nivel de servidor. Si no está seguro de si tiene la funcionalidad PHP en su sitio web, póngase en contacto con su proveedor de alojamiento.
Aquí hay un simple script PHP que puede utilizar para incluir un fragmento de HTML en cualquier página web con PHP:
-
Guarde el HTML para los elementos comunes de su sitio, como la navegación, para separar los archivos. Por ejemplo, su sección de navegación puede guardarse como navigation.html o navigation.ssi .
-
Utilice el siguiente código PHP para incluir ese HTML en cada página ( sustituyendo la ruta y el nombre de archivo entre las comillas).
navigation.php"); ?>
-
Añada este mismo código en cada página que desee incluir el archivo.
JavaScript Incluye
JavaScript es otra forma de incluir HTML en las páginas de su sitio. Esto tiene la ventaja de no requerir programación a nivel de servidor, pero es un poco más complicado – y obviamente funciona para un navegador que permite Javascript, lo que la mayoría hace a menos que el usuario decida desactivarlo.
Cómo puede incluir un fragmento de HTML utilizando JavaScript:
Guarde el HTML para los elementos comunes de su sitio en un archivo JavaScript. Cualquier HTML escrito en este archivo, debe ser impreso en la pantalla con la función document.write.
-
Sube ese archivo a tu sitio web.
-
Utilice un elemento para incluir el archivo JavaScript en sus páginas.
-
Utilice el mismo código en cada página que desee incluir el archivo.
Otros Incluir Métodos
Hay varias otras maneras de incluir HTML en sus páginas. Algunos son más complicados que otros, y muchos de ellos han quedado obsoletos en comparación con los estándares actuales.
- CGI Includes : Puede utilizar Perl u otro lenguaje de programación para crear sus páginas e incluir lo que desee, ya sea como archivos «require» o leyéndolos manualmente.
- Flash Includes : Si desea construir su sitio completamente en Flash, puede utilizarlo para incluir elementos del sitio. Este método es extremadamente anticuado y los sitios Flash completos son una rareza en la Web en estos días.
- Frames Includes : En lugar de utilizar los mismos elementos una y otra vez en varias páginas, puede crear un sitio enmarcado donde los marcos sean las partes duplicadas del sitio. Tenga en cuenta que, a excepción del elemento iframe, los marcos son obsoletos en HTML5.
- Content Management Tools Includes : Templating es uno de los principales puntos de venta de CMS y es realmente como se maneja esto en la mayoría de los sitios hoy en día. Mientras que los otros métodos cubiertos en este artículo funcionarán en muchos casos, la realidad es que cualquier sitio de sustancia es probable que vaya a ser construido sobre una CMS en estos días.
