Tutorial HTML Intermedio
Tutorial HTML Nivel Intermedio Capítulo 2 - ASP y PHP - Includes en ASP
Includes en ASP   /   Includes en PHP

Includes en ASP


Los includes es un tipo de codificación o programación que nos permite reutilizar determinado código en varias páginas sin tener que realizar modificaciones al mismo. Generalmente, estos includes se establecen de tal forma que realizar cambios a un conjunto de páginas es una acción muy rápida y sencilla.

Se emplean, mayormente, para cargar variables y la estructura de un sitio web.

En ASP, la sintaxis que se utiliza para el código es la siguiente:

<!-- #include virtual="/ruta y nombre de archivo" -->
virtual es la forma en que implementaremos los includes durante el desarrollo del tutorial. La otra variante que existe es file, la cual no utilizaremos debido a que no ofrece las facilidades de virtual... y que sea suficiente explicación al respecto Sonrie

/ruta y nombre de archivo es donde se especifica el directorio o subdirectorio y el nombre del archivo que se va a incrustar o insertar. Es algo del tipo /inc/top.asp.

Se especifica, tradicionalmente, un directorio llamado inc para colocar en el mismo todos los includes que se utilicen en el sitio, aunque puedes asignar el nombre que más te plazca para el mismo.

La extensión del nombre del archivo se suele utilizar como .inc o como .asp.

Se utiliza .inc cuando el código no incluye variables o programación que pueda dejar conocer a cualquiera lo que implementas o la forma en que funciona tu sitio.

Se utiliza .asp cuando el archivo a incluir contiene programación y no deseas que sea vista por terceros.

Cuando asignas la terminación .asp, las variables que contiene el archivo no se muestran o se presenta un erorr indicando que no han sido definidas. Con esta acción evitas que los visitantes a tu sitio puedan ver qué tipo de codificación o programación estás utilizando.

Así que, por cuestiones de seguridad, en este tutorial vamos a utilizar la extensión .asp para todos los archivos include que se utilizarán.

Veamos un ejemplo. El código siguiente nos indica que la parte superior e inferior de la página han sido removidos y se cargan como un include:

<!-- #include virtual="/inc/top.asp" -->
<div class="izquierda">Menu</div>
<div class="contenido">Contenido de la página</div>
<div class="derecha">Parte dercha</div>
<!-- #include virtual="/inc/pie.asp" -->
El código del archivo top.asp es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div class="top">Top</div>
Mientras que el código del archivo pie.asp es el siguiente:

<div class="pie">Pie</div>
</body>
</html>
¡Pruébalo!

En el directorio que has elegido para realizar las pruebas con el tutorial, crea un directorio inc y, en el mismo, dos nuevas páginas ASP cuyos nombres sean top.asp y pie.asp. Abrelos en ventanas adicionales del Bloc de Notas para tenerlos a la mano cuando sean requeridos.

En el archivo pruebaCSS.asp que has creado, copia y pega el siguiente código (si lo anotas para que vayas acostumbrándote y aprendiéndolo, es mejor):

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
Ahora, corta el código que a continuación se coloca en negritas:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-Mx" lang="es-Mx" />
<head>
<title>Mi primera página ASP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">@import url(prueba.css);</style>
</head>
<body>
<div class="contenedor">
<div class="top">Top</div>
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
... y pégalo en el archivo top.asp. Ahora, en el archivo pruebaCSS.asp agrega el siguiente código (recuerda que debes generar un directorio inc):

<!-- #include virtual="/inc/top.asp" -->
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
Toca el turno para el código presentado al fondo de la página. En el archivo pruebaCSS.asp corta el código que a continuación se coloca en negritas:

<!-- #include virtual="/inc/top.asp" -->
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<div class="pie">Contenidos del pie de página</div>
</div>
</body>
</html>
... y pégalo en el archivo pie.asp. A continuación, en el archivo pruebaCSS.asp, agrega el siguiente código:

<!-- #include virtual="/inc/top.asp" -->
<div class="contenidos">
<div class="izquierda">Menu</div>
<div class="contenido">Contenido principal de la página</div>
<div class="derecha">Parte derecha</div>
</div>
<!-- #include virtual="/inc/pie.asp" -->
Como podrás notar, no existe cambio alguno pues lo único que hemos realizado es implementar los includes sin realizar modificaciones o adiciones. Pasemos a conocer para qué hemos hecho estos pasos...

En el archivo pie.asp, anota el siguiente código, exactamente donde se indica:

<div class="pie">Derechos Reservados 2009®</div>
</div>
</body>
</html>
¡Eso!

Has hecho todo un include y ahora ya sabes cómo se implementan y cómo funcionan.

Sólo debes dar clic en el botón "Actualizar" o "Refresh" del navegador para visualizar los cambios implementados.

¡Ah! Pero no estás utilizando el Bloc de Notas y realizas el tutorial empleando Dreamweaver... bueno, calma... si no visualizas en forma correcta los cambios utilizando la opción "Design" (Diseño) que ofrece Dreamweaver, no te desesperes... es normal cuando utilizas este tipo de programación en las páginas. Es decir, la página se visualiza incorrectamente en Dreamweaver, y parece que estás cometiendo errores en su desarrollo...

Pues bien, la cosa es bastante sencilla. Al inicio del tutorial he comentado que se utilizaría el Bloc de Notas para el desarrollo del tutorial... simplemente porque Dreamweaver no puede visualizar las páginas en forma correcta cuando implementas programación con includes Sonrie

Includes en ASP   /   Includes en PHP

Experimentemos todo lo aprendido: página de ejemplo con ASP y PHP



Registro al Newsletter
Mantente al día con tutoriales más cortos sobre desarrollo de sitios web.










Políticas de Privacidad
Términos de uso
Derechos Reservados ® 1997 - 2012 iMeil.
La reproducción de este tutorial, parcial o total, no es permitida, salvo autorización previa, por escrito, de iMeil.