Práctica11. Test de usabilidad

Uno de los enfoques de la usabilidad corresponde al comportamiento del usuario durante el proceso de navegación, hasta la localización de los contenidos que resuelven su demanda informativa. Para experimentar el número de clics que el usuario realiza durante una búsqueda y evaluar la usabilidad de los menús de navegación global, local y contextual se pueden llevar a cabo tests de usabilidad. En el caso propuesto, se presenta un test experimental desarrollado exprofeso para la asignatura, en el que se indican a lo largo de 10 preguntas distintas consultas que el usuario deberá resolver en 1 minuto. Cada movimiento y enlace es recopilado de forma tal que al finalizar el test puede ser analizado y estudiado desde un punto de vista cualitativo.

Prueba de un test de usabilidad de un medio de comunicación

19.- Usabilidad web

El concepto Usabilidad como tal, no está recogido en el Diccionario de la Real Academia, debe su origen, probablemente, a alguno de los siguientes términos en inglés Usability = Usabilidad, User friendly = Fácil de usar, Friendly use = Facilidad de uso, véase (HASSAN, Y.; MARTÍN FERNÁNDEZ, F.J.; GHZALA, I. 2004). Según su origen, se advierte que la facilidad de uso es el objetivo de la usabilidad, que adaptado al caso de la web, implica un uso sencillo y amigable de la misma. 

Según la norma ISO 9126, usabilidad se define como "la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso". De forma muy parecida también es definida por la norma ISO 9241 aunque con un enfoque más propio de la mercadotecnia "eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico". 

Otro punto de vista más especializado (NIELSEN, J. 2006) entiende que la usabilidad web es "la aclaración del propósito del sitio, ayudar a los usuarios a encontrar lo que buscan, mostrar el contenido del sitio convenientemente y diseñar el sitio web para mejorar la interacción con el usuario, evitando ser definida a priori". 

Como elemento divulgativo añadido, se puede proponer una definición en la que se aclare explícitamente que la experiencia y la inteligencia del diseño son, al sentido común con el que se diseñan las páginas web, la mejor usabilidad posible: 

Usabilidad web es la simplificación necesaria de las funciones y contenidos de un sitio o página web en sus elementos denotativos y connotativos esenciales, de forma tal que su motivación, objeto, navegación y contenidos estén al alcance del usuario de forma clara y sencilla, visualmente y cognitivamente identificables,  recuperables con inmediatez, expresados y concebidos con la inteligencia del diseñador y la experiencia del usuario. BLÁZQUEZ OCHANDO, M.

El concepto de usabilidad según Steve Krug

Según Steve Krug, la usabilidad consiste en evitar que el usuario del sitio web tenga que pensar cómo acceder a los contenidos, con qué elementos debe interactuar ó que se pregunte sobre el significado de las opciones, la navegación, cómo recuperar y en definitiva cómo está enfocado o diseñado el sistema. Por lo tanto la regla central de la usabilidad, consiste en evitar que el usuario se pregunte dónde se encuentra cada cosa.

Qué nos hace pensar

Si el objetivo es lograr que el usuario piense menos, se debe procurar que los botones realmente parezcan botones, los enlaces sean enlaces de verdad y los términos que se utilicen sean concisos y breves. Un usuario pensará o reflexionará más si en el sitio web, encuentra sintagmas o frases en los enlaces, si los botones tienen una forma parecida a un botón pero no lo son ó si los enlaces tienen flechas o aditivos visuales como flechas, corchetes, etc.

Cómo se utiliza la web
Uno de los comportamientos más habituales consiste en ojear las páginas que componen un sitio web. Este proceso indica que en la mayoría de las ocasiones el usuario no lee completamente todo el contenido textual de las páginas, centrando su actividad reflexiva en unos pocos detalles que tendrán que ser suficientemente denotativos como para tomar una decisión y continuar en la misma página o acceder a la siguiente. Durante este proceso que podría denominarse "echar un vistazo" dichos elementos denotativos se convierten en lo único importante para el usuario, el resto de detalles, textos, gráficos y opciones dejan de existir.

Este comportamiento puede deberse a la necesidad de resolver rápidamente las necesidades y problemas que al usuario se le plantean, por motivo de economizar el tiempo que tiene disponible ó reducir su frustración cuando visita una página web y no encuentra directamente lo que estaba buscando. Otra razón por la que "echar una ojeada" resulta común es que sencillamente no se necesita leer todo el contenido para comprenderlo, de hecho este acto casi reflejo, se ha convertido en una costumbre después de que se esté habituado a repasar periódicos, libros, revistas, exportando el comportamiento a la web.

Cuando el usuario ojea, no siempre elige la mejor opción para llegar a la información que necesita. No siempre es la decisión óptima, pero sí la más razonable. Ello sucede porque no hay consecuencias graves si el usuario se equivoca en la página a cargar. También es posible que el usuario desee conocer otras opciones ó alternativas para descubrir qué contenidos que pueden ser de utilidad y descartar para futuras ocasiones cuáles no. Todo ello hace que la combinación entre navegación, búsqueda y ojeo sea un trabajo creativo e intuitivo para el usuario y que se genere una experiencia de uso que posteriormente se tratará de aprovechar.

En conclusión se puede afirmar que sin grandes explicaciones e instrucciones, el usuario es capaz de hacerse una "composición de lugar", "una idea", "un bosquejo" sobre cómo funciona un sitio web, ojeando y navegando entre sus páginas, acertando en mayor o menor medida con respecto a la idea original de su diseñador.

Consideraciones de diseño

• Jerarquía visual: Lo más importante deberá ser destacado del resto. Los contenidos similares tendrán que tener un estilo de identificación visual y tipográfica homogéneo a lo largo de todo el sitio web. Los contenidos referentes a un titular o epígrafe de nivel superior, deberán estar identificados en el mismo área para que sea evidente su dependencia. 

• Dónde se hace clic: Dejar claro qué es un enlace y qué no lo es, puede ayudar a reducir el número de clics a lo largo del sitio web. Se estima que 3 clics equivalen a 1 clic claro y reflexionado. Cuando la navegación impide el acceso directo, se necesita conseguir redireccionar al usuario entre distintas opciones, pero por regla general un sitio web más horizontal, será más fácil de acceder que uno diseñado con muchos niveles verticales en su jerarquía.
• Eliminar lo accesorio: Esto es omitir palabras innecesarias, que no expresen de forma precisa el objeto, la significación, y el hilo argumental de los contenidos. Realzar el contenido práctico y esencial para conseguir páginas más cortas y visibles con un solo golpe de vista.

• Minimizar el ruido visual: Implica reducir los efectos visuales excesivos y molestos que alerten constantemente la atención del usuario y que perjudiquen la máxima claridad de los contenidos y de las opciones de navegación del sitio web. Estos elementos son líneas de puntos, excesivos subrayados, imágenes de fondo repetidas, imágenes demasiado grandes, abundantes efectos rolovers, excesivo aparataje de interfaz que sobrecarga la claridad del conjunto.

• Diseño de la navegación: Utilizar sistemas de navegación como breadcrumbs, definir rutas de navegación a todos los contenidos del sitio mediante pocos niveles jerárquicos, en beneficio de sitios web más horizontales y con una mejor estructuración de secciones. El objeto de la navegación es que el usuario encuentre lo que necesita, motivo por el cual tiene que tener libertad para elegir, ya sea utilizando el buscador, consultando las preguntas frecuentes u ojeando por su cuenta. Por otra parte la navegación debe ser un elemento clarificador que indique  en qué lugar se encuentra el usuario visualizando una página, de qué sección procede, qué otras están clasificadas de la misma forma, que proporcione un método de acceso a los contenidos del sitio que sea extrapolable a otros muchos casos y que permita establecer un cierto grado de confianza con respecto a la correcta organización del resto de contenidos.

• Convenciones: Definir en todo momento en qué página se encuentra el usuario mediante breadcrumb ó usted está aquí. Mantener siempre visibles los elementos de navegación como los breadcrumbs. Utilizar secciones y subsecciones ordenadas jerarquicamente. Emplear navegación local con una columna y su correspondiente lista de enlaces. Opcionalmente usar un menú de tipo sólo texto en el pie de página con las principales accesos directos del sitio web.  

Evaluación de la usabilidad

• Qué sitio es (Identificar el sitio web)
• En qué página estoy (Nombre página)
• Cuáles son las principales secciones del sitio (secciones)
• Qué opción tengo en este nivel (Navegación local)
• Dónde estoy en el esquema de cosas (Usted está aquí + Breadcrumb)
• Cómo busco algo (Buscador)

Bibliografía

GARRET, J.J. 2011. The elements of user experience: user-centered design for the web and beyond. New Rider

HASSAN, Y.; MARTÍN FERNÁNDEZ, F.J.; GHZALA, I. 2004. Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información. Hipertext, n.2. Disponible en: http://www.hipertext.net/web/pag206.htm

HOM, J. 1998. The Usability Methods Toolbox Handbook. Disponible en: http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/UsabilityMethodsToolboxHandbook.pdf

KRUG, S. 2002. Don´t make me think: a common sense approach to web usability = No me hagas pensar: Una aproximación a la usabilidad en la web. Prentice Hall

NIELSEN, J.; LORANGER, H. 2006. Prioritizing Web Usability. New Riders
FLORÍA CORTÉS, A. 2000. Recopilación de Métodos de Usabilidad. Disponible en: http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

Práctica9. Implementación de un buscador básico

Una de las aplicaciones más importantes de cualquier sitio web es su sistema de recuperación de información. Con el objetivo de conocer y acercar el proceso de implementación y funcionamiento de un buscador básico, así como sus particularidades y funcionamiento y configuración, se propone la resolución de la presente práctica.

• Descargar Práctica9. Implementación de un buscador básico

Descargar ejemplo de práctica9

Práctica8. Gestión, redirección y construcción de enlaces

En muchos casos el proceso de construcción de enlaces depende de la correcta obtención de la información del mismo. Por ello, los distintos lenguajes de programación del lado del servidor disponen de funciones y rutinas diseñadas para captar tales datos y manejarlos según las necesidades de redirección. En resumen, se trata de gestionar los enlaces y diferenciar sus apartados para elaborar un proceso de redirección completamente automático. En la presente práctica, se comprobará cómo funciona el gestor de enlazamiento para enlaces de tipo F y la importancia de dominar la información de las direcciones URL.

• Descargar Práctica8. Gestión, redirección y construcción de enlaces

Descargar ejemplo de práctica8

16.- Gestores de enlazamiento y redirección para la navegación

Un gestor de enlazamiento es un programa especializado en generar o reconstruir direcciones URL válidas a partir de variables, pistas, nombres, cadenas de texto, identificadores o enlaces orientados al SEO. De hecho no siempre el enlace visible, amigable y fácilmente comprensible para la lectura del usuario puede ser interpretado, por el sistema de información. Esto implica no sólo la capacidad de construir la URL sino de establecer una estructura de decisiones condicionada por el origen desde la página en la que se efectúa el enlace (citante) y efectuar la redirección a la página de destino especificada (citada). Todos estos aspectos deben ser resueltos para crear una experiencia de navegación adecuada en sitios web dinámicos. Un ejemplo básico de gestor de enlazamiento y redirección es el que se muestra en la tabla1, utilizado para los modelos de enlace C/D, que contienen variables GET con los valores del documento enlazado. En tal caso el programa es capaz de determinar con cada variable y valor la página o documento que debe cargar o a la que debe redireccionar.

<!-- Tipo de enlace: ejemplos -->
http://wapache/index.php?page=document001
http://wapache/index.php?page=titulo-del-documento
http://wapache/index.php?page=titulo-del-documento&date=2011-12-15

<?php
// Se establece como primera condición que la variable "page"
// con la que se conforma la URL original, sea distinta a un
// contenido vacío ó se encuentre en blanco. En tal caso, no
// se enlaza ni redirecciona ningún contenido
if($_GET[page] != ""){

    // CASO 1 ============================================
    // Si el origen de la página citante es "index" o lo que
    // es lo mismo, la página de portada del sitio web, se
    // genera una URL ( documents/[nombre-pagina].php )
    if($origin == "index"){ 

        // Obsérvese que la función de impresión en pantalla
        // contiene un código Javascript que permite
        // redireccionar a una página web predeterminada
        echo "
        <script language='javascript'>
        window.location.href='documents/$_GET[page].php'
        </script> 
        ";

    } // Fin de caso 1

    // CASO 2 ============================================  
    // Si el origen de la página citante es otro documento que
    // se encuentra en la misma carpeta "documents", la URL
    // relativa a generar sólo requerirá el nombre del archivo
    // almacenado en la variable "page"
    if($origin == "doc"){ 

        // Se repite el código javascript con distinta URL
        // a la que debe ser redireccionado
        echo "
        <script language='javascript'>
        window.location.href='$_GET[page].php'
        </script>
        "; 
 
    } // Fin de caso 2

} else {}
?>

 Tabla1. Gestor de enlazamiento y redirección basado en variables GET

Aunque en el ejemplo de la tabla1, se da por sentado que los contenidos se encuentran en forma de documento ó página web generada en archivo con extensión .php ó .html, también cabe la posibilidad (muy frecuente) de que la página dinámica se reedita mediante un visor de contenidos en PHP. Esto implica el uso de bases de datos MySQL en las que se almacena la información que se muestra al usuario. Por ejemplo una variable GET denominada "id" puede hacer referencia a un registro de una tabla donde se guarda la información del documento que demanda el usuario. Otras posibilidades consisten en combinar el identificador, con otros datos, como el título, autor o fecha de publicación de cada documento. Estos datos y valores combinados, ayudan a generar una URI (Uniform Resource Identifier), o lo que es lo mismo, direcciones URL unívocas que identifican cada recurso documental del sitio web o del sistema de información.

Por otro lado, el ejemplo de la tabla2, muestra un gestor de enlazamiento y redireccionamiento especializado en enlaces de tipo F, caracterizados por no disponer de extensión alguna del tipo de archivo, así como por constar de un nombre completo optimizado para su lectura y recuperación por buscadores y usuarios (friendly links). La forma de operar es distinta en cuanto a la forma de interpretar la información del enlace. En este caso no se recibe el nombre del archivo citado por método GET, de hecho no hay variables que se envíen a través de la URL. Por ese motivo es necesario captar esa información a través de la función y variable de servidor  pathinfo("$_SERVER[REQUEST_URI]"); que extrae el enlace entrante en el que hizo click el usuario. Permite obtener toda la información de directorios, subdirectorios y nombre de archivo base que corresponde al documento citado en el enlace. A este recurso "citado", se le denomina también "basename" argumento por el que se extrae su nombre. Una vez que es conocido, se pueden construir los distintos casos y condicionantes, por ejemplo; en el caso de que "basename" no sea la propia página de portada "index.php" se estará refiriendo a un objeto o elemento distinto, es decir, un documento y en tal caso el usuario pretende acceder a él. Esto implica a su vez tener en cuenta el origen del enlace, para lo que se comprueba el origen de la página citante y se redirecciona en función del caso a la página citada referida en la variable $path_parts[basename] añadiendo la extensión de tipo de archivo que corresponda.

<!-- Tipo de enlace: ejemplos -->
http://wapache/document001
http://wapache/titulo-del-documento-propiamente-dicho
http://wapache/2011-12-15/titulo-del-documento

<?php
// La variable "$path_parts" almacena la URL completa del
// enlace original. Al emplear la función "pathinfo" 
// se pueden distinguir todos los directorios, subdirectorios
// y nombre del archivo de base ó "basename" de la URL
$path_parts = pathinfo("$_SERVER[REQUEST_URI]");

// CASO 1 ============================================
// Dado que toda la información de la URL original está 
// almacenada, se consulta el nombre del archivo de base.
// Si coincide con la página index, de entrada del
// sitio web, significará que la solicitud del usuario es una
// redirección ó actualización de la página de portada.
// Debido a que el enlace a la portada es único se opta por
// dejar vacía la acción de ejecución del caso, pero podrían
// añadirse procesos de redireccionamiento exprofeso
if($path_parts[basename] == "index.php") { } 

// CASO 2 ============================================
// Si el nombre del archivo de base es distinto a "index.php"
// se ejecuta el caso2, comprobándose que el origen de la
// página citante es la portada del sitio. De esta forma se
// compone la URL a medida con la ruta de directorios
// correspondiente hasta el archivo demandado
elseif($origin == "index") {
  echo "
  <script language='javascript'>
  window.location.href='../documents/$path_parts[basename].php'
  </script>
  ";
}

// CASO 3 ============================================
// Si las condiciones del caso1 y 2 no se cumplen, se comprueba
// que el origen de la página citante es otro documento, al
// que se aplica una composición URL distinta
elseif($origin == "doc") {
  echo "
  <script language='javascript'>
  window.location.href='../$path_parts[basename].php'
  </script>
  ";
} 

// CASO 4 ============================================
// Si ninguno de los casos anteriores coincide con la demanda
// se determina que no se efectue redirección alguna
else {}
 
?>

 Tabla2. Gestor de enlazamiento y redirección para modelo F de enlaces

Véanse también las siguientes referencias:

• $_SERVER[] Server and execution environment information.
  http://www.php.net/manual/en/reserved.variables.server.php
  
• pathinfo() Information about a file path.
  http://php.net/manual/es/function.pathinfo.php

Práctica7. Creando la trama de navegación

Conocido el método de enlazamiento y navegación dinámicos incorporarlos al caso del proyecto de sitio web y a la estructura que se había diseñado en prácticas anteriores. Será necesario enlazar páginas para cada sección desde el menú general de forma dinámica, así como las distintas páginas de contenidos en las que están agrupadas.

• Descargar Práctica7. Creando la trama de navegación

Descargar ejemplo de práctica7

15.- Navegación dinámica vs navegación estática

Hasta el momento se han abordado aspectos fundamentales de la construcción de un sitio web, desde su concepción, organización, estructura formal y técnica, su programación óptima, aspectos de estilo y formato, pero no se han atendido otros que resultan cruciales, como es la forma de navegación y enlazamiento del sitio web.

Tipos de enlaces

Antes de explicar los métodos de navegación estática y dinámica, se deben observar la tipología de enlaces que con frecuencia se utilizan en toda la web, véase tabla1. Los más conocidos y utilizados son los enlaces de tipo absoluto que ó bien pueden apuntar y enlazar a una página web dinámica (programada en PHP, ASP, Ruby, Python o cualquier otro lenguaje de programación del lado del servidor) ó a una página web estática (normalmente programada en HTML). Se denomina enlace absoluto cuando se identifica en la construcción de la URL el protrocolo de internet ( http://www. ) añadiendo el nombre del dominio, subdominio, extensión ( dominio.org ) y agregando finalmente la ruta de carpetas o repositorios hasta localizar el archivo o documento a enlazar ( document001.php ).

Otro tipo de enlaces básico son los denominados enlaces relativos. Éstos son de uso común en la práctica totalidad de los sitios web. Se utilizan para enlazar contenidos sin necesidad de reseñar la ruta completa o absoluta hasta el recurso ó documento objetivo. Esto implica una acortación importante en la longitud de la URL y una simplificación en su construcción. Un enlace relativo puede ser utilizado para enlazar un documento que se encuentra en el mismo origen o nivel del que parte el link, por ejemplo ( Un enlace como este  <a href='document002.html'>documento2</a> dentro del código de una página denominada document001.html implica que tanto el documento1 como el 2 están dentro del mismo nivel de carpetas, con independencia de su posición en la estructura de repositorios del sitio web). Cuando el recurso que se pretende enlazar se encuentra en un nivel jerárquico de carpetas inferior al que se encuentra el origen del que parte el link se reseña la carpeta/s a las que son necesarias acceder hasta el recurso objetivo, creando una ruta más elaborada, por ejemplo ( documents/document001.html ). Pero en el caso en el que el recurso a enlazar se encuentre en un nivel de carpetas superior, ó en otro nivel distinto, se hace necesario especificar mediante la sintaxis ( ../ ) que la ruta de acceso ha de subir un nivel de carpetas ó tantos como fueren necesarios ( ../../../ 3 en este caso ) para acceder al documento ó carpetas en las que está alojado el documento, por ejemplo ( ../css/estilo.css ).

Enlaces	Descripción
http://www.dominio.org/document001.php	[ ModeloA; absoluto; dinámico; no-nivel ] Enlace absoluto a una página web dinámica.
http://www.dominio.org/document001.html	[ ModeloA; absoluto; estático; no nivel ] Enlace absoluto a una página web estática.
documents/document001.html	[ ModeloB; relativo; estático; N-superior ] Enlace relativo desde el nivel raíz del sitio web a un documento dentro de una carpeta denominada documents.
../css/estilo.css	[ ModeloB; relativo; estático; N-inferior ] Enlace relativo desde un primer nivel de carpetas hasta la carpeta css que contiene el archivo estilo.css
http://www.dominio.org/document001.php?id=243&section=biblioteconomia	[ ModeloC; absoluto; dinámico; no-nivel; variables GET ] Enlace absoluto a una página web dinámica con variables enviadas por método GET.
document001.php?id=142&section=musicologia	[ ModeloC; relativo; dinámico; N-igual; variables GET] Enlace relativo a una página web dinámica con variables enviadas por método GET.
index.php?page=documentacion-y-bibliotecas	[ ModeloD; relativo; dinámico; N-igual; variables GET + SEO ] Enlace a página web dinámica "index.php" con página de destino predefinida en variable  "page" con nombre optimizado para SEO (Search Engine Optimization).
index.php/documentacion-y-bibliotecas	[ ModeloE; relativo; dinámico; N-igual;  mod rewrite + SEO ] Enlace relativo a página web dinámica "index.php" con ruta dirigida por medio de función Mod rewrite htaccess, optimización de enlaces para SEO (Search Engine Optimization) en la configuración del servidor que aloja el sitio web.
index.php/calendarios-de-transferencia	[ ModeloF; relativo; dinámico; N-igual; parser URL + SEO ] Enlace relativo a página web dinámica "index.php" similar al modeloE pero cuya ruta no es dirigida por el servidor del alojamiento del sitio web, sino por un programa gestor de redireccionamientos integrado dentro del propio sitio web y programado en PHP o cualquier otro lenguaje del lado del servidor.

Tabla1. Tipología de enlaces de la web

Pero como se ha visto en el artículo anterior relativo a formularios, se puede empezar a pensar en que uno de los tipos de enlaces más importantes es el que incorpora variables, que por lo general suele ser dinámico, ya que la página de destino, debe ser capaz de procesarlas y extraer sus datos, por ejemplo ( document001.php?id=142&section=musicologia ) caso en el que document001.php deberá ser capaz de entender que id=142 corresponde a un identificador de un contenido sobre section=musicologia.

Otro tipo de enlace derivado del modeloC es el modeloD. Consiste en utilizar una única variable por método GET, que identifique el título completo o casi completo del artículo o documento objetivo. Si bien el enlace apunta a la página "index.php", ésta contendrá algún tipo de script o rutina programada capaz de interpretar el redireccionamiento que debe efectuar para cargar la página especificada por la variable "page". Esto significa que deberá identificar el documento por su título normalizado y además éste deberá ser único y distinto del resto de la colección de documentos ó de la base de conocimiento, también deberá determinar la extensión del documento. 

El enlace modeloE corresponde a un método de redireccionamiento a páginas web que se resuelve en el lado del servidor mediante la activación de la función mod_rewrite propia de los servidores HTTP de tipo Apache. Se lleva a cabo un proceso de reescritura de la URL de un recurso, documento ó página web de acuerdo a un patrón establecido, por ejemplo la supresión de extensiones, el acortamiento ó transformación del nombre del archivo por el del título del recurso, la adición de nuevos elementos en la ruta original (por ejemplo, fecha, nombre de un repositorio ó sección), etc.

Finalmente el modeloF, apenas se podría distinguir del modeloE, si no fuera por el soporte de interpretación, que es distinto al explicado anteriormente. Si bien sólamente aparece el título del documento o recurso objetivo, éste es interpretado por un programa denominado Gestor de enlazamiento y redirección para la navegación. Se trata de un ingenio que es capaz de analizar la estructura de un enlace y descomponerla en todos elementos. Una vez éstos son identificados se reconstruye la URL correspondiente al recurso objetivo.

Navegación estática

• Enlazamiento interno absoluto o relativo a páginas web estáticas.
• El enlazamiento de los contenidos, recursos o documentos no permite la introducción de variables por método GET.
• No se utilizan los modelos de enlace para los recursos internos del sitio web, C, D, E y F.
• Implica introducir el nombre completo de los archivos y su extensión.
• Son estáticos para todo el sitio web.
• No admiten variaciones en su codificación.
• Interpretables para cualquier navegador web del cliente y para cualquier servidor web HTTP básico.

Navegación dinámica

• Permite todos los métodos de enlazamiento interno de tipo absoluto, relativo a páginas web estáticas y dinámicas.
• Se posibilita el uso de variables por método GET en la URL, de tal forma que pueden darse todos los modelos y tipos de enlaces. Con URL acortada, con identificador, con denominación completa o parcial del título del documento o página objetivo, etc.
• Implica ó una configuración del servidor web HTTP para gestionar los enlaces o un programa gestor ó parser capaz de interpretar las URL especializadas en SEO.
• Implica métodos de redireccionamiento y construcción automática de los enlaces, por lo tanto son enteramente dinámicos para todo el sitio web.
• Para la correcta interpretación de las variables del enlace se requiere de un servidor web HTTP + PHP (intérprete ó lenguaje del lado del servidor)

Práctica6. Controlando la información de los formularios

El control de la información transmitida por medio de formularios es una constante en el diseño y desarrollo del interfaz para la interacción con el usuario. Permite el envío de los parámetros necesarios para el funcionamiento del sitio web, la publicación de comentarios, entradas, información, el envío de mensajes, parámetros de funcionamiento para las opciones de búsqueda y recuperación, entre otros. En la siguiente práctica se tratará de probar todos estos aspectos.

• Descargar Práctica6. Controlando la información de los formularios

14.- Arquitectura de formularios y su adaptación dinámica

Los formularios constituyen un elemento esencial en todo el aparato de comunicaciones y edición del sitio web. Es por ello que requieren un tratamiento especial y una revisión en su modo de construcción. Los formularios son empleados como recipiente de recogida de datos. Su modo empleo más común es el envío de mensajes y correos como método de contacto. Pero también son utilizados para otros cometidos, por ejemplo, como sistema de selección y filtrado de opciones en un buscador, como campos de edición para un registro, para representar datos de una edición, para enviar valores y contenidos entre distintas páginas web y finalmente el uso dinámico de la información que el usuario introduce en el sitio web. Dicho de otra forma, supone uno de los nexos que conectan el sistema de información al usuario.

Formularios estáticos

Se considera formulario estático aquel que no emplea funciones de PHP para la recogida de información enviada por si mismo o a otra página o programa de PHP (Léase cualquier programa elaborado con un lenguaje de programación dinámico orientado a objetos). Ello significa que un formulario estático es únicamente una estructura de etiquetas HTML con una disposición básica en cuanto a su modo de funcionamiento (es decir, un modo de funcionamiento sencillo, unidireccional a un determinado destino que se identifica claramente con un correo electrónico), por ejemplo véase tabla1.

<form name='contactar' id='contactar' action='mailto:mblazquez.ccdoc@gmail.com' method='post'>

<input type='hidden' name='id' value=''/> identificador
<input type='text' size='40' name='titulo' value=''/> título
<input type='password' size='40' name='pass' value=''/> contraseña

<input type='radio' name='centro' value='archivo'/> Archivo
<input type='radio' name='centro' value='biblioteca'/> Biblioteca
<input type='radio' name='centro' value='museo'/> Museo

<input type='checkbox' name='user' value='investigador'/> Investigador
<input type='checkbox' name='user' value='profesor'/> Profesor

<textarea cols='60' rows='4' name='comentarios'></textarea>

<select name='tipologia'>
  <option value='monografia'>Monografía</option>
  <option value='diccionario'>Diccionario</option>
  <option value='articulo'>Artículo</option>
</select>

<select name='tematica'>
  <optgroup label='Ciencias y técnicas auxiliares'>
    <option value='bibliofilia'>Bibliofilia</option>
    <option value='bibliografia'>Bibliografía</option>
    <option value='encuadernacion'>Encuadernación</option>
  </optgroup>
  <optgroup label='Museología'>
    <option value='museografía'>Museografía</option>
    <option value='patrimonio'>Patrimonio</option>
  </optgroup>
</select>

<input type='button' onClick="history.go(-1)" value='atrás'/>
<input type='button' onClick="history.go(1)" value='adelante'/>
<input type='button' onClick="window.location='http://'" value='cargar página'/>
<input type='button' onClick="window.location.reload()" value='recargar página actual'/>

<input type='submit' name='go' value='Enviar datos'/>

</form>

 Tabla1. Principales componentes del formulario

• http://www.w3schools.com/html/html_forms.asp

Elemento	Descripción
<input type='text'.../>	Elemento principal de un formulario. La caja de texto es empleada para almacenar 1 línea de texto o cadena de caracteres.
<input type='hidden'.../>	Caja de texto oculta en el formulario, no visible para el usuario. Ampliamente utilizada para almacenar valores especiales, identificadores de registros, o cualquier información necesaria para la ejecución de una rutina en PHP. Es muy frecuente utilizar un campo oculto para alojar el valor del identificar de un registro de un documento, o un código alfanumérico que debe ser utilizado posteriormente para efectuar una consulta o un valor que debe ser almacenado con fines estadísticos, de contabilización, por ejemplo.
<input type='password'.../>	Campo de texto confidencial destinado a la introducción de contraseñas, evita que se visualicen en pantalla y bloquea la copia del valor de la contraseña que se escribe. Utilizado frecuentemente en el desarrollo de aplicaciones de acceso a páginas web.
<input type='radio'.../>	Campo de selección por círculo, permite establecer distintas opciones entre las que se debe seleccionar una de ellas.
<input type='checkbox'.../>	Selección de una o varias opciones mediante cajas de verificación con ticks.
<textarea...></textarea>	Campo para el área de texto. Cuando se necesita reseñar textos más largos de una línea, se utiliza este elemento.
<select...> <option...></option> </select>	Campo selector que permite escoger una opción entre las presentadas en la lista.
<select...> <optgroup...> <option...></option> <optgroup> </select>	Campo selector, con opciones agrupadas.
<input type='button'.../>	Campo de botón, utilizado para añadir eventos javascript, funcionando como método desencadenante de acciones. Por ejemplo, cargar una página web al hacer click, actualizar la página actual al hacer click, etc.
<input type='submit'.../>	Botón de envío de formularios.

 Tabla2. Descripción de componentes del formulario

El método de envío de datos

La forma o protocolo con el que se envía la información es fundamental dependiendo del uso que se hace de la información contenida en los mensajes. Recuérdese que muchos formularios, actúan como interfaz entre el usuario y el sistema, para que éste actúe de una determinada forma ó simplemente para que publique una información ó sea enviado a un determinado destino. Para ello los mensajes escritos desde formularios pueden ser enviados mediante método GET, reconocible e identificable mediante una cabecera pública ó bien por el método POST, cuya información queda asegurada hasta su recepción en el servidor de destino.

[ Método GET ]

Permite efectuar una solicitud al servidor de tal forma que ésta pueda ser identificada mediante URI. Los valores y datos del mensaje se envían desde la cabecera y no dentro del cuerpo del mismo, por ello quedan expuestos y se considera un método de comunicación menos seguro.

[ Método POST ]

Permite efectuar una solicitud al servidor de forma segura sin posibilidad de identificar el recurso enviado por URI. Esto se debe a que los datos y variables de la petición se encuentran en el cuerpo del mensaje y no en la cabecera.  Por ejemplo, esto significa que los datos enviados en un proceso de comunicación como en un grupo de noticias, una lista de correos, un comentario, un correo electrónico o la petición de publicación de información no pueden ser identificados a excepción de la página del servidor al que se destine la solicitud.

• http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

El formulario dinámico

La información enviada a través de formularios ya fuere por método POST o GET, puede ser recuperada y gestionada mediante variables globales propias de los lenguajes de programación dinámicos, por ejemplo PHP. De tal forma que si se dispone de un formulario como el presentado en la tabla1 y un archivo de recepción de los datos del formulario, como el dispuesto en la tabla2, sería posible enviar mensajes e imprimirlos en pantalla.

<!-- archivo: enviar.html -->
<!-- ==================== -->
<form action='recibir.php' method='post'>
  <input type='text' name='title'/>
  <textarea cols='60' rows='3' name='description'></textarea>  
  <input type='submit' name='send' value='Publicar'/>
</form>

 Tabla1. Formulario para el envío de datos con método POST

<?php
// archivo: recibir.php
// ====================
echo "<div>";
echo "<div>$_POST[title]</div>";
echo "<div>$_POST[description]</div>";
echo "</div>";
?>

 Tabla2. Archivo de recepción que presenta en pantalla la información del mensaje

De esta forma es posible utilizar la información enviada para que sea almacenada, mostrada en pantalla, enviar parámetros de ejecución para un programa o símplemente para enviar un correo electrónico. En PHP se utilizan las variables globales $_GET[nombre] y $_POST[nombre] en alusión al método por el que fue enviada la información del formulario y el nombre del parámetro que fue enviado desde una caja de texto, área de texto, selector o cualquier otro elemento del formulario. En PHP una variable es un recipiente utilizado para almacenar información, datos, textos o valores de tipo numérico, textual o alfanumérico. De esta forma con independencia del tipo de formulario empleado la información enviada es empaquetada y guardada en estas variables de tal forma que puedan ser recuperadas y posteriormente utilizadas. Se denominan variables globales, porque pueden ser utilizadas en cualquier punto del programa PHP que se edite para recibir la información del formulario. No obstante también tienen caducidad si no son recibidas por el destinatario, perdiéndose la información. Por otra parte, también es práctica común utilizar una sóla página para el envío, recepción y proceso de la información, véase tabla3.

<?php
// archivo: enviar-recibir.php
// ===========================
echo "<form action='enviar-recibir.php' method='get'>
  <input type='text' name='title'/>
  <textarea cols='60' rows='3' name='description'></textarea>  
  <input type='submit' name='send' value='Publicar'/>
</form>
";

if($_GET[send]){   echo "<div>";
   echo "<div>$_GET[title]</div>";
   echo "<div>$_GET[description]</div>";
   echo "</div>";
}
?>

 Tabla3. Archivo de envío y recepción de datos

Obsérvese que en la tabla3, a diferencia de los casos anteriores, se añade una estructura de control condicional para desencadenar la impresión en pantalla del mensaje sólamente si este fue enviado. En este código la condición if(condición){instrucción} establece entre paréntesis que la variable send debió de ser enviada, es decir, el usuario debió de hacer click en el botón publicar. Si esa condición se cumple, se ejecuta todo el proceso que ha sido alojado entre la apertura y cierre de llaves. En este caso es la impresión del campo título y campo descripción del formulario.

A pesar de lo expuesto, existen otras formas de enviar información, no únicamente mediante formularios. Se trata del caso del método GET por medio de URL. Tal como se explicaba anteriormente, el protocolo GET implica una identificación mediante URI (Universal Resource Identifier) es decir, que la información es enviada a través de una URL y es visible por aparecer en la cabecera de las peticiones que se envían mediante HTTP. De hecho cuando se aprecian direcciones como las de la tabla4, se aludirá al método GET, por medio de URL.

http://www.dominio.org/publicaciones.php?id=10&url=biblioteca&title=fuentes-bibliotecarias&text=Esto%20es%20una%20prueba

<?php
   echo "$_GET[id]";
   echo "$_GET[url]";
   echo "$_GET[title]";
   echo "$_GET[text]";
?>

 Tabla4. Archivo de envío y recepción de datos

La información puede ser recuperada igualmente, con la salvedad de que ésta debe ser emplazada con una sintaxis determinada. Como se puede observar la URL separa el nombre y extensión del archivo de los valores o datos que serán transmitidos por medio de un signo de interrogación ( ? ). Seguidamente se reseñan en color azul el nombre de la variable que contendrá un determinado dato, separado por el signo igual ( variable=dato ). Cuando existen más de una variable a transmitir, se emplea el signo ampersand ( & ) para distinguir la primera variable de las subsiguientes ( variable1=dato1&variable2=dato2 ).

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.

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

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

Descargar ejemplo de práctica5

Práctica4. Construyendo la estructura del sitio web

De acuerdo a lo que se viene explicando, uno de los métodos más efectivos para lograr una estructura de sitio web es el empleo de funciones include de PHP para introducir los distintos fragmentos que componen el código del sitio web. En la práctica4 se costruirá la estructura del sitio web conforme a este método.

Aunque el editor Eclipse PDT, permite la edición del lenguaje PHP, será necesario utilizar un servidor Apache HTTP y un intérprete del lenguaje PHP para poder comprobar los resultados de la programación efectuada. Se recomienda seguir las instrucciones dadas por el profesor en este aspecto (Se requiere asistencia).

Dado que no es posible instalar programas en los ordenadores de las aulas, ello impide el uso de una distribución de componentes necesaria. Por este motivo se recomienda el uso de una distribución especial de Apache HTTP y PHP, denominada WAPACHE. 

Wapache

WAPACHE es un paquete de componentes que contiene el servidor Apache HTTP y el compilador PHP necesarios, listos para ser utilizados desde cualquier pen-drive, sin necesidad de efectuar ningún tipo de instalación. Descargando esta distribución, se puede descomprimir y alojar en una memoria sólida pudiendo posteriormente interpretar la mayoría de los programas y páginas web desarrolladas en PHP. El único inconveniente es que no incluye el sistema de bases de datos MySQL.

•  Descargar WAPACHE 2.0.0

Para la realización de la presente práctica será necesario tener claro los siguientes aspectos:

• Una vez descomprimido Wapache cambiar el nombre de la carpeta "wapache-2.0.0-php-5.0.3" por "wapache" para que el acceso a sus componentes sea más sencillo.
• En la siguiente ruta (wapache\bin\Wapache.exe) se encuentra el archivo ".exe" que permite ejecutar Wapache con su servidor Apache y el compilador PHP. Al ejecutarlo aparecerá una ventana con algunos enlaces de prueba. Dicha ventana, será la página de lanzamiento de todas las pruebas que llevemos a cabo. 
• Para probar nuestro sitio web en Wapache, será necesario copiar la carpeta del proyecto y pegarla en la siguiente ruta (wapache\htdocs\carpeta-del-proyecto). Una vez hecho este paso, modificar el archivo index.html de la carpeta htdocs y añadir un enlace que permita acceder al proyecto recién copiado.

Si se han seguido todos los pasos, se está en condiciones de comenzar la práctica4. Recuérdese que el objetivo es crear una estructura de sitio web basándose en el método include que ha sido explicado en el artículo anterior.

• Descargar Práctica4. Construyendo la estructura del sitio web

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.

• W3C. 2000. HTML4.01: Iframe specs. Disponible en: http://www.w3.org/TR/REC-html40/present/frames.html#edef-IFRAME

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.

Descargar página

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á...

• PHP Group. 2011. Include. Disponible en: http://php.net/manual/es/function.include.php