jueves, 17 de noviembre de 2011

Práctica5. Adaptación dinámica de las páginas de contenidos

Hasta el momento se ha trabajado con páginas de contenido estáticas basadas en HTML. Pero como se pretende enseñar, éstas páginas pueden ser adaptadas para su aprovechamiento en la estructura del sitio web dinámico en PHP. Tomando un contenido estático y la estructura ya creada en la práctica4, no resulta difícil averiguar que cada página de contenido es una página matriz en la que se cargan mediante include el encabezado, los menús y el pie de página.
Ejemplo de adaptación
En la siguiente tabla, se muestra un ejemplo de cómo debe ser adaptada una página de contenidos. En primer lugar se parte de una página matriz tipo, que permita cargar el encabezado ("inc.head.php"), el menú general ("inc.menu.php") y el pie de página ("inc.foot.php"). A partir de este modelo, el código fuente correspondiente a los textos e informaciones de la página, se introducirá entre el menú y el pie de página, ya que es el espacio o área de la estructura destinado al contenido. De esta forma, se logra componer todas las piezas correctamente.


<?php
// Página de contenidos = Página matriz
// ====================================

include("inc.head.php");
include("inc.menu.php");

echo "
<div style='padding: 20px;'>


<h1>Titular</h1>

<h2>Resumen</h2>
<div class='textos'>texto del resumen</div>

<h2>Autor</h2>
<div class='textos'>Apellidos, Nombre</div>
<div class='textos'>Institución</div>
<div class='textos'>Datos de filiación</div>
<div class='textos'>Correo electrónico</div>

<h2>Versión</h2>
<div class='textos'>Última versión</div>
<div class='textos'>Versiones anteriores</div>

<h2>Tabla de contenidos</h2>
<div class='textos'>
    <ol>
       <li><a href='#p1' title='titulo'>Apartado 1</a></li>
       <li><a href='#p2' title='titulo'>Apartado 2</a></li>
       <li><a href='#p3' title='titulo'>Apartado 3</a></li>
       <li><a href='#p4' title='titulo'>Apartado 4</a></li>
    </ol>
</div>

<h2><a name='p1'>Apartado 1</a></h2>
<div class='textos'>Texto del apartado 1</div>

<h2><a name='p2'>Apartado 2</a></h2>
<div class='textos'>Texto del apartado 2</div>

<h2><a name='p3'>Apartado 3</a></h2>
<div class='textos'>Texto del apartado 3</div>

<h2><a name='p4'>Apartado 4</a></h2>
<div class='textos'>Texto del apartado 4</div>

</div>
";

include("inc.foot.php");
?>
<?php
// 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;}

h1 {font-family: verdana; font-size: 18px;}
h2 {font-family: verdana; font-size: 14px;}
th {padding: 5px; font-family: verdana;}
td {padding: 5px; font-family: verdana;}
       
.textos {font-family: verdana; font-size: 12px; text-align: justify; color: #000000; line-height: 25px;}
       
.imagenes {margin: 10px; padding: 10px; text-align: center; background-color: #eeeeee; border: solid 2px #cccccc; border-radius: 15px;}
       
.tablas {margin: 0 auto; background-color: #f2f2f2; border: outset 2px #c0c0c0;}

a:link    {font-family: verdana; font-size: 12px;}
a:visited {font-family: verdana; font-size: 12px;}
a:hover   {font-family: verdana; font-size: 12px;}
a:active  {font-family: verdana; font-size: 12px;}
</style>

</head>
<body>


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

?>
<?php
// inc.menu.php
// ============

echo "
<div class='capa2'>
<div class='contenido'>menú general</div>
</div>
";

?>
<?php
// inc.foot.php
// ============

echo "
<div class='capa3'>
<div class='contenido'>pie de página</div>
</div>
</body>
</html>
";

?>
Tabla1. Ejemplo de adaptación dinámica de una página de contenidos con el método include

No hay comentarios:

Publicar un comentario

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