viernes, 16 de diciembre de 2011

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 ejemplo de práctica9

jueves, 15 de diciembre de 2011

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 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:

viernes, 2 de diciembre de 2011

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 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)

jueves, 1 de diciembre de 2011

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.

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

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.

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

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

viernes, 11 de noviembre de 2011

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.

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.

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

jueves, 3 de noviembre de 2011

Práctica3. Editando las páginas de contenidos

Para cada sub-categoría de contenidos definida en la práctica2, se deberá elaborar una página web simple en formato HTML y CSS teniendo en cuenta los principios expuestos en los artículos de maquetación de textos y estructuración de páginas de contenidos. Recuérdese que el objetivo es la elaboración de páginas de contenidos lo más sencillas posibles, sin artificios, con calidad para la lectura de los textos, máxima visibilidad, legibilidad y correcta maquetación, control de márgenes, entre otros.

12.- Cómo estructurar una página de contenidos

Toda página de contenidos ha de seguir unas especificaciones de presentación, pero también de estructuración que faciliten al máximo la lectura y distinción de todos sus apartados. En cualquier contenido debería estar presente la siguiente organización:
  • Encabezamiento o título del contenido. (obligatorio) - El encabezamiento deberá estar destacado tipográficamente sobre toda la página de contenidos, con estilo uniforme para el resto de páginas del sitio web.
  • Resumen. (optativo) - Apartado recomendable en toda página de contenido, deberá aparecer justo debajo del encabezamiento.
  • Palabras clave. (optativo) - Las palabras clave de la página de contenido deberán estar conformadas de acuerdo con el lenguaje controlado, que se diseñe para el sitio web.
  • Autor. (obligatorio) - Se reseñarán los datos del autor, filiación, contacto y correo electrónico.
  • Versión. (obligatorio) - Se especifica en negrita la última versión del documento y se reseñan en lista o en lineas sucesivas las distintas versiones del documento y sus fechas de publicación. Sería recomendable mantener copias de cada versión y enlazar cada fecha con su documento.
  • Derechos. (optativo) - Es recomendable la especificación del tipo de derechos sobre la información que se está publicando. En caso de tomarse de una fuente de información, especificar dicho hecho y explicar el tipo de uso que se esta haciendo de la información.
  • Tabla de contenidos. (obligatorio) - Se debe crear una tabla de contenidos a modo de índice con cada epígrafe o apartado de la página de contenidos. Por ejemplo, introducción, método, estado de la cuestión (aunque esto puede variar dependiendo de la temática y motivación del sitio web)
  • Apartados de desarrollo de los contenidos. (obligatorio) - Todos los apartados de desarrollo deberán estar sujetos a métodos sencillos de maquetación, tal como se viene refiriendo en el artículo anterior del blog.
  • Bibliografía y fuentes. (obligatorio) - En forma de lista ordenada o desordenada se deberán referenciar toda la bibliografía y fuentes utilizadas para confeccionar el contenido del sitio web, o que han sido citadas por su importancia para dar lugar al aparato crítico de la página.
En cuanto a la maquetación de las páginas de contenidos, se recomienda seguir las indicaciones que se muestran a continuación:
  • Los estilos que se definen en una página de contenidos deberán ser mantenidos en todas las demás de su clase y condición. 
  • El color de fondo de las páginas de contenidos serán siempre blancos ( color: #ffffff; )
  • El color del texto de la página será siempre negro ( color: #000000; )
  • El color del título de los epígrafes deberá ser oscuro tendiendo a negro.
  • El color de fondo de las capas para imágenes o tablas deberá ser muy claro y tenue. Se recomienda el uso de escala de grises. 
  • Las imágenes y los párrafos de textos deberán constar en líneas independientes. 
  • Todos los elementos de texto y multimedia, deberán estar contenidos en capas <div>
  • Todas las capas <div> mantendrán un esquema de márgenes proporcional y equidistante.
Ejemplos de páginas correctamente estructuradas

Artículos
Especificaciones RSS1.0
Especificaciones W3C

11.- Maquetación de textos

La correcta maquetación de textos, imágenes y listados ayuda a crear una presentación de los contenidos, limpia, clara y precisa. Por ello se recomienda tener control sobre sus principales propiedades, los márgenes, justificados, sangrados, alineaciones, proporciones, etc. Las hojas de estilo en cascada, también denominadas CSS, ayudan en este propósito y por ello se han reseñado las propiedades más importantes a tener en cuenta en el proceso de maquetación de textos.

Las propiedades del texto
Una de las claves para la correcta visualización de la información del sitio web es la definición de los atributos del texto de forma tal que sean perfectamente visibles y legibles en el sitio web. Se recomienda utilizar los atributos relativos al tipo de fuente (utilizar fuentes normalizadas con valores arial, sans serif, serif, tahoma, verdana, times new roman), tamaño de la fuente (utilizar medidas en px, pt ó em), grosor de la fuente (utilizar valores lighter para letra normal ó bold para letra negrita destacada), tipo de decoración (utilizar valores de subrayado o tachado) y color de la fuente (Utilizar código hexadecimal de color), véase tabla1.
.texto {font-family: arial, sans serif; font-size: 12px; font-weight: lighter; font-style: normal; text-decoration: none; color: #000000;}
 Tabla1. Propiedades del texto

Encapsular los textos en capas

Una regla de oro para el control de los textos y contenidos del sitio web es su encapsulado dentro de una capa <div>. Si se desea repercutir un estilo determinado en un texto, se necesitará encapsularlo previamente, véase la tabla2. Este método es aplicable a cualquier elemento textual, imagen, lista e incluso tablas, de cara a lograr una normalización en la representación de los contenidos.
<div class='texto'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor consectetur nisl, nec viverra sapien tincidunt ornare. Suspendisse potenti. In at interdum ligula. Vivamus ligula quam, varius eu placerat eu, porta eu mi. Nam nec felis orci, ac consectetur diam. Praesent quis odio in erat fermentum euismod at vitae odio. Nunc rhoncus dolor ac erat laoreet gravida.</div>
 Tabla2. Encapsulado de un texto en una capa

Las propiedades de las capas

A su vez las capas pueden tener sus propios estilos para la representación de los contenidos. Se recomienda determinar siempre que sea posible el ancho, el alto, los márgenes externos e internos, el color de fondo y el borde, véase capa1 de la tabla3. Además un determinado tipo de capa, puede incluir también las propiedades del texto, véase el estilo de capa2 de la tabla3.
.capa1 {width: 90%; height: auto; margin: 10px; padding: 10px; background-color: #f1f1f1; border: solid 2px #e2e2e2;}


.capa2 {width: 50%; height: auto; margin: 10px; padding: 10px; background-color: #e2e2e2; border: solid 2px #d4d4d4; font-family: arial, sans serif; font-size: 14px; font-weight: lighter; font-style: normal; text-decoration: none; color: #000000;}
 Tabla3. Márgenes externos e internos

Márgenes 
Todos los textos del sitio web deberán constar de márgenes internos y externos, ello se establece con los atributos CSS margin (margen externo) y padding (margen interno). Véase tabla4. El espaciado mínimo recomendado en cada margen deberá ser de 10px como mínimo.
<div style='margin: 20px; padding: 30px;'>texto</div>
 Tabla4. Márgenes externos e internos

Justificados
La alineación de los textos, siempre que sea posible, deberá de ser justificada a ambos lados del margen, por lo que el atributo text-align tomará el valor justify. Véanse las distintas opciones de alineación en la tabla5.
<div style='text-align: left;'>texto</div>
<div style='text-align: right;'>texto</div>
<div style='text-align: center;'>texto</div>
<div style='text-align: justify;'>texto</div>  
 Tabla5. Alineación de textos a derecha, izquierda, centro o justificado

Sangrados
Opcionalmente, se recomienda el sangrado del comienzo de cada apartado, capítulo o sección de la información a fin de determinar que la temática abordada resulta distinta a la del párrafo anterior. Ello se consigue mediante el atributo text-indent. Un valor habitual se sitúa a partir de 30px, véase tabla6.
<div style='text-indent: 30px;'>texto sangrado</div>
 Tabla6. Sangrado de textos

Control de dimensiones
A veces el texto que es contenido dentro de una capa, está embebido en otra a su vez. En tales casos es necesario determinar que anchura, altura y en definitiva dimensiones tendrá. Ello se consigue determinando el ancho y alto de la capa contenedora del texto, véase tabla7.
<div style='width: 80%;'>texto</div>
<div style='width: 200px;'>texto</div>
 Tabla7. Dimensiones de las capas

Imágenes y texto
En muchos casos el texto acompaña imágenes e ilustraciones. En esa situación se necesita establecer un formato flotante si se quieren alinear los textos a las imágenes, ya sea a izquierda o a derecha, véase tabla8. Se recomienda siempre establecer un margen externo para evitar que el texto quede pegado a la imagen, siendo dicho margen superior a 10px.
<div style='width: 50%;'>
<img src='#' style='float: left; margin: 20px;'/> texto
</div>
 Tabla8. Ejemplo de integración de imágenes y texto dentro de la misma capa

Pero por lo general el método más claro y efectivo de presentar la información es mostrando las imágenes en espacios independientes al texto, ocupando todo el ancho de la página o estructura div que se haya predeterminado. En estos casos se hace necesario especificar que no puede haber capas flotantes ni a derecha, ni a izquierda, para ello se utiliza el atributo clear con el valor both, véase tabla9.
<div><img src='#' style='clear: both; margin: 10px;'>pie de foto</div>
<div style='clear: both;'>texto</div>
 Tabla9. Ejemplo de imágenes y textos en capas independientes

Listas
Las listas deberán guardar algunos de los estilos presentados en la tabla10. No se recomienda el uso de imágenes o viñetas para cada elemento de la lista. Además se recomienda encapsular las listas en una capa <div> con márgenes internos y externos.
ul.circulo    {list-style-type: circle;}
ul.cuadrado   {list-style-type: square;}
ol.romanos    {list-style-type: upper-roman;}
ol.alfabetico {list-style-type: lower-alpha;}
<div style='margin: 10px; padding: 10px;'>
   <ul class='circulo'>
   <li>Opción desordenada 1</li>
   <li>Opción desordenada 2</li>
   <li>Opción desordenada 3</li> 
   </ul>
</div>

<div style='margin: 10px; padding: 10px;'>
   <ol class='romanos'>
   <li>Opción ordenada 1</li>
   <li>Opción ordenada 2</li>
   <li>Opción ordenada 3</li> 
   </ol>

</div>
 Tabla10. Aplicación de estilos en listas ordenadas y desordenadas

Tablas
Para toda tabla que se edite, se recomienda reseñar los atributos de ancho máximo, borde, tipo de borde, ancho de borde, color de borde y separación colapsada. Para la fila de encabezamiento de las columnas de la tabla <th> se recomienda aplicar un estilo diferenciador con respecto a las filas que contendrán los datos y textos <td>, véase tabla11.
.tablas {width: 90%; border: solid 2px #cccccc; border-collapse: collapse;}
.filas1 {padding:15px;}
.filas2 {padding:10px;}
<table class='tablas'>
<tr><th class='filas1'>título de columna</th></tr>
<tr><td
class='filas2'>fila con datos</td></tr> 
<tr><td class='filas2'>fila con datos</td></tr>
<tr><td class='filas2'>fila con datos</td></tr> 
<tr><td class='filas2'>fila con datos</td></tr>
</table>
 Tabla11. Alineación de textos a derecha, izquierda, centro o justificado