jueves, 10 de noviembre de 2011

13.- Diseño de estructuras web: iframe vs include

Desde un punto de vista estructural, los sitios web se desarrollan a partir de capas que dividen las distintas áreas que las componen, a saber: encabezamiento, menú general, menú local, contenidos y navegación contextual y pie de página, véase figura1. Recuérdese también el apartado de diseño de estructuras web con capas y CSS layouts. En el presente artículo se abordará la forma de interacción, navegación y enlace de los contenidos del sitio web dentro de la estructura.

Figura1. Áreas clave de la estructura de un sitio web
Método iframe
El método iframe (Incorporated Frame = Marco Incorporado) consiste en embeber un marco o ventana dentro del área de contenidos del sitio web, ocupando el 100% del ancho y el 100% del alto disponible en el espacio. De esta forma todo contenido del sitio web será cargado en dicho espacio. Una de sus ventajas es que el contenido cargado en un iframe es independiente del resto, lo que ofrece una gran flexibilidad para cargar contenidos de cualquier tipo. También su método de enlazamiento resulta muy sencillo y efectivo. Todos los iframes disponen de un atributo name con el que es posible identificarlos correctamente. Estos nombres pueden ser utilizados como los destinos de carga de las páginas de contenido enlazadas desde un menú general o local, véase tabla1 y tabla2.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Ejemplo de estructra iframe</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>

    <style>
    .capa1 {width: 100%; height: 100px; clear: both; background-color: #e0e0e0;}
    .capa2 {width: 30%; height: 600px; float: left; background-color: #ededed;}
    .capa3 {width: 70%; height: 600px; float: left; background-color: #ffffff;}
    .capa4 {width: 100%; height: 50px; clear: both; background-color: #e0e0e0;}
    .contenido {padding: 10px;}
  
    ol.romanos    {list-style-type: upper-roman;}
    li {margin: 10px;}
  
    a:link    { color: #224a6a; font-size: 0.9em; font-family: arial; }
    a:visited { color: #236b6a; font-size: 0.9em; font-family: arial; }
    a:hover   { color: #4497da; font-size: 0.9em; font-family: arial; }
    a:active  { color: #44c5da; font-size: 0.9em; font-family: arial; }
  
    </style>

</head>
<body>


<div class='capa1'>
<div class='contenido'>texto1</div>
</div>


<div class='capa2'>
<div class='contenido'>
    <div>
    <ol class='romanos'>
    <li><a href='http://www.bne.es/' target='visor'>Biblioteca Nacional de España</a></li>
    <li><a href='http://www.loc.gov/' target='visor'>The Library of Congress</a></li>
    <li><a href='http://www.bl.uk/' target='visor'>The British Library</a></li>
    <li><a href='http://www.bnf.fr/' target='visor'>Bibliothèque nationale</a></li>
    <li><a href='http://www.d-nb.de/' target='visor'>Deutschen Nationalbibliothek</a></li>
    <li><a href='http://www.kb.nl/' target='visor'>Koninklijke Bibliotheek</a></li>
    </ol>
    </div>
</div>
</div>


<div class='capa3'>
    <iframe src='#' name='visor' style='width: 100%; height: 100%; border: 0;'></iframe>
</div>


<div class='capa4'>
<div class='contenido'>texto4</div>
</div>


</body>
</html>
 Tabla1. Sitio web con método iframe para carga de contenidos

 Tabla2. Ejecución en el navegador del código fuente de la tabla1

No obstante, el método iframe, pese a sus grandes ventajas como la simplicidad y sencillez que aporta al conjunto final de la superestructura de la web, tiene inconvenientes. Por ejemplo, aún siendo un elemento aceptado por la comunidad de desarrolladores y ampliamente utilizado para la elaboración de aplicaciones AJAX (Asynchronous Javascript and XML), está considerado como un elemento poco accesible, ya que al generar un marco para cargar contenidos hace que también sean independientes del resto de la estructura, no estando integrados en un único código fuente. Esto hace que sea difícil la lectura para cualquier sistema especial de interpretación para personas con discapacidad. Otro inconveniente, esta vez de diseño, es relativo a la altura de la página. Normalmente la altura de una página de contenido suele ser variable y resulta recomendable su visualización completa sin scroll. Con iframe es necesario establecer la altura de forma absoluta, haciendo que los contenidos visualizados dentro de su ventana activen en muchas ocasiones su correspondiente scroll vertical. Estas cuestiones han llevado a muchos desarrolladores a elaborar páginas web mucho más sencillas, también de tipo estático ó páginas web mucho más funcionales, modulares y completas de tipo dinámico mediante el método include.

Método include
Consiste en el empleo de una función del lenguaje PHP denominada include que es utilizada para incrustar páginas web en formato HTML ó scripts en lenguaje PHP. Esta capacidad de incluir el código fuente de distintas páginas web y combinarlo en una, permite una estructuración perfecta del sitio web, sin necesidad de emplear iframe. La forma más común de componer la estructura del sitio web es creando un archivo matriz en PHP que contenga un include por cada área de la estructura, por ejemplo un include con el archivo que contiene el código del encabezado, un include para el archivo que contenga el menú general y otro para el pie de página. Véase la tabla3 con el ejemplo de uso de include y de los distintos archivos auxiliares con el código del sitio web.

<?php
// archivo matriz: structure-index.php
// ===================================

include("structure-inc.head.php"); // Carga código de encabezamiento
include("structure-inc.menu.php"); // Carga menú general
echo "<div>Emplazamiento de los contenidos</div>";
include("structure-inc.foot.php"); // Carga el pie de página

?>
<?php 
// archivo auxiliar: structure-inc.head.php
// ========================================

echo "

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>Ejemplo de estructra iframe</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>

    <style>
    .capa1 {width: 100%; height: 100px; clear: both; background-color: #e0e0e0;}
    .capa2 {width: 100%; height: 50px;
clear: both; background-color: #ededed;}
    .capa3 {width: 100%; height: 50px; clear: both; background-color: #e0e0e0;}
    .contenido {padding: 10px;}
    </style>

</head>
<body>


<div class='capa1'>
<div class='contenido'>encabezamiento</div>
</div>


";
?>

<?php 
// archivo auxiliar: structure-inc.menu.php
// ========================================

echo "

<div class='capa2'>
<div class='contenido'>menu general</div>
</div>


";
?>
<?php 
// archivo auxiliar: structure-inc.foot.php
// ========================================

echo "

<div class='capa3'>
<div class='contenido'>pie de página</div>
</div>

</body>
</html>

";
?>
 Tabla3. Ejemplo de aplicación del método include para componer sitios web

Se observará en el ejemplo cómo se combina la programación PHP y HTML para dar forma al sitio web. De hecho programar un sitio web en lenguaje PHP implica conocimientos profundos de HTML. Esto significa que la forma de representar los contenidos siempre es la misma, pero la manera en que se conjuga la información varía, adquiriendo una funcional propiedad de modularidad. Se pueden crear tantas páginas de contenido como se deseen, con la estructura principal del sitio web, siempre que se mantengan las instrucciones include con la referencia a los archivos auxiliares que portan la estructura. Véase el resultado de aplicar el código de la tabla3 en la siguiente tabla4.

Tabla4. Ejecución en el navegador del código de la tabla3 

Vistas las ventajas, también se observan algunos inconvenientes. Por ejemplo PHP es un lenguaje de programación del lado del servidor. Esto significa que para poder ejecutarse este tipo de páginas se requiere de un servidor web con unas especificaciones muy concretas:
  1. Apache HTTP Server (Servidor dónde se aloja el sitio web programado en PHP)
  2. Compilador PHP (Intérprete del lenguaje PHP)
  3. MySQL (Recomendable, pero no necesario para ejecutar PHP)
Con HTML no era necesario este despliegue de medios, pero también son mayores las limitaciones. Por suerte, existen muchos paquetes y distribuciones de instalación de los componentes referidos. En lo sucesivo, se empleará una distribución enormemente singular y poco conocida que ayudará al estudiante a probar sus propios códigos PHP sin necesidad de instalar ningún programa en ningún ordenador, tan sólo utilizando su Pen-Drive. Continuará...

2 comentarios:

  1. Diseño web y Diseño de páginas web profesionales en México DF CDMX Somos expertos en posicionamiento web, páginas optimizadas a celulares, precios bajos

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.