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