En este post vamos a aprender a utilizar listas, unas estructuras impresionantemente útiles a la hora de ordenar el contenido.

Listas

No son mas que una forma de estructurar nuestro contenido como ítems en (valga la redundancia) una lista. Las hay de 3 tipos: listas ordenadas, listas sin ordenar y listas de definición.

Listas ordenadas

Su aspecto es el siguiente:

Observamos que en las listas ordenadas cada ítem se encuentra numerado. Las etiquetas necesarias para las listas ordenadas son 2 <ol> y <li>. Y la estructura de una lista ordenada es la siguiente:

<ol>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ol>

Así por ejemplo el código de la lista de la imagen seria el siguiente:

<ol>

<li>Primer ítem</li>

<li>Segundo ítem</li>

<li>Tercer ítem</li>

</ol>

La cantidad de ítems por lista es ilimitada.

Listas desordenadas

Tienen el siguiente aspecto:

Observamos que esta vez los ítems no se encuentran numerados sino que se encuentran acompañados por viñetas, estas no solo pueden tener forma de puntos sino que con CSS podemos cambiarlas por cuadrados, por una imagen de nuestra preferencia o inclusive podemos crear una lista sin viñetas.

Las etiquetas que se utilizan también son 2: <ul> y <li>. Su estructura es la siguiente:

<ul>

<li>...</li>

<li>...</li>

<li>...</li>

<li>...</li>

</ul>

el código del ejemplo es el siguiente:

<ul>

<li>Primer ítem</li>

<li>Segundo ítem</li>

<li>Tercer ítem</li>

</ul>

Listas de definición

Finalmente el último tipo de lista tiene el siguiente aspecto:

Como verán este es el tipo de lista más complejo y cada ítem se divide en un término y una definición. Las etiquetas que usaremos son 3: <dl> <dt> y <dd>. Y su estructura será la siguiente:

<dl>

<dt>primer término</dt>

<dd>definición del primer término</dd>

<dt>segundo término</dt>

<dd>definición del segundo término</dd>

<dt>tercer término</dt>

<dd>definición del tercer término</dd>

<dt>cuarto término</dt>

<dd>definición del cuarto término</dd>

</dl>

El código del ejemplo es el siguiente (las etiquetas <br /> las puse para separar mejor los ítems):

<dl>

<dt>Linux</dt>

<dd>Kernel monolítico desarrollado por Linus Torvalds</dd>

<br />

<dt>Internet</dt>

<dd>Conjunto descentralizado de redes de comunicación</dd>

<br />

<dt>Creative Commons</dt>

<dd>Organización no gubernamental sin ánimo de lucro</dd>

</dl>

Hasta acá hemos visto los 3 tipos de lista, queda bajo el criterio del webmaster elegir el tipo mas conveniente de acuerdo a la necesidad.

Es muy importante aclarar que los ítems no solo pueden ser textos, sino que también podemos incluir dentro de ellos cualquier otro tipo de elementos: imágenes, párrafos, divs (después vamos a ver bien que son), links y hasta otras listas; en este último caso lograremos listas anidadas. Por ej:

<ul><!--abro una lista desordenada-->

<li><!--agrego un ítem a esa lista-->

Mis videojuegos favoritos:

<ol><!--abro una lista ordenada dentro de ese ítem-->

<!--agrego varios ítems a la lista ordenada-->

<li>Call of Duty 1</li>

<li>Prince of Persia the Sands of Time</li>

<li>Indiana Jones and the Fate of Atlantis</li>

<li>Toda la saga Monkey Island</li>

<li>Frets on Fire</li>

</ol><!--cierro la lista ordenada-->

</li><!--cierro el primer ítem de la lista desordenada-->

<li><!--agrego otro ítem a la lista desordenada-->

Mis piezas de soft preferidas:

<dl><!--abro una lista de definición-->

<!--agrego un ítem a la lista de definición-->

<dt>Wordpress</dt>

<dd>Versátil y poderoso CMS de Automattic</dd>

<!--agrego un ítem a la lista de definición-->

<dt>Opera</dt>

<dd>Poderoso, liviano, veloz y completísimo navegador web.</dd>

<!--agrego un ítem a la lista de definición-->

<dt>Notepad++</dt>

<dd>Excelente editor de texto para programadores, soporta múltiples lenguajes y consume muy pocos recursos</dd>

</dl><!--cierro la lista de definición-->

</li><!--cierro el ítem de la lista desordenada-->

</ul><!--cierro la lista desordenada-->

Como vemos podemos anidar varios tipos de listas para lograr estructuras más complejas. Nuestra lista se ve así (aviso que lo que dice ahí es lo primero que se me vino a la cabeza):

¿Y House?

Para los que estaban preguntando donde se metían ahora el sitio sobre Doctor House que veníamos desarrollando desde el primer post, les cuento que no me olvide. En este post lo que vamos a hacer es una segunda página (usando listas, obvio) con una pequeña descripción de los personajes principales de la serie (menos de House ya que lo describimos en la home). En el próximo post que tratará sobre links y anclas, “conectaremos” esta página, con la que ya veníamos trabajando.

Antes de empezar aclaro que la info la saque de Wikipedia, no la escribí yo.

Primero que nada recuerden codificar su archivo como utf-8 (en notepad++ van al menú Formato/Codificar en UTF-8). Ahora vamos a crear la estructura base de la página (espero que todavía se acuerden como):

<?xml version="1.0"  encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

<head>

<title>Doctor House | Personajes Principales</title>

</head>

<body>

</body>

</html>

Ahora guárdenla como personajes.html dentro de la carpeta donde tenían la otra página. ¿Ya esta?, bueno sigamos. Ahora vamos a agregarle un título h1 y un separador horizontal:

<?xml version="1.0"  encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >

<head>

<title>Doctor House | Personajes Principales</title>

</head>

<body>

<h1>Los Personajes Principales de la Serie</h1>

<hr />

</body>

</html>

Su página debería estar quedando así:

Bueno ahora vamos al plato fuerte, la lista. La misma será una lista de definición con la siguiente estructura:

<dl>

<dt>Personaje (actor)</dt>

<dd><p><img .../>...</p>

<dt>Personaje (actor)</dt>

<dd><p><img .../>...</p>

...

<dt>Personaje (actor)</dt>

<dd><p><img .../>...</p>

</dl>

Las imágenes que vamos a usar son las siguientes:

Todas obviamente van en la carpeta images que ya habíamos creado la vez pasada. Ahora si nuestra lista completa queda de la siguiente forma:

<dl>

<dt>Dra. Lisa Cuddy (Lisa Edelstein)</dt>

<dd>

<p><img src="images/cuddy.jpg" width="90" align="left" alt="Lisa Cuddy" style="margin: 4px;" />Es Decana en Medicina, endocrinóloga y directora del hospital, y por tanto jefa de House, con quien se enfrenta constantemente por su poco ortodoxa manera de hacer su trabajo. Pese a ello, y a todos los problemas que le ha causado, se niega a plantearse su despido, al considerarle el mejor médico del hospital y uno de los mejores médicos diagnostas del mundo. A lo largo de la serie ha demostrado sus intenciones de ser madre por lo que ha intentado métodos de inseminación artificial. Conoció a House en la época de la universidad y lo contrató porque ningún otro hospital lo había admitido. A partir de la tercera temporada la tensión sexual entre ella y House se hace cada vez más evidente.

</p>

</dd>

<br /><br />

<dt>Dr. James Evan Wilson (Robert Sean Leonard)</dt>

<dd>

<p><img src="images/wilson.jpg" width="90" align="left" alt="James Wilson" style="margin: 4px;" />Es un oncólogo y Jefe del Departamento de oncología del hospital. Es el único amigo de House que se conoce en la serie, por lo que sólo él se atreve a hablarle con sinceridad y discutirle de tú a tú, aportando un contrapunto a los a veces extravagantes razonamientos de House y siempre soporta sus bromas y maltratos. Por lo general no participa en el diagnóstico de los casos. Es un médico ejemplar y siempre apegado al protocolo (todo lo contrario a House). Vivió en casa de House durante algunos capítulos, debido a una infidelidad de su mujer. Durante el transcurso de la 4ª temporada mantiene un romance con la  Dra. Amber Volakis. A raíz de la muerte de esta, al final de la 4ª temporada, renuncia al Hospital, pero retorna en la siguiente temporada.

</p>

</dd>

<br /><br />

<dt>Dr. Robert Chase (Jesse Spencer)</dt>

<dd>

<p><img src="images/chase.jpg" width="90" align="left" alt="Robert Chase" style="margin: 4px;" />Intensivista, es un australiano que muestra una gran ambición y oportunismo, cosa que en ocasiones le lleva a enfrentarse con todos sus compañeros. Procedente de una familia rica. House lo hostiga constantemente a causa de ello. Su padre, un reumatólogo de fama mundial, también ha aparecido en la serie (Se revela su muerte en la 2da. temporada, en el capítulo 8; The Mistake, por cáncer de pulmón). Estuvo en el seminario, pero para complacer a su padre se convirtió en médico. Actualmente trabaja en cirugía ya que fue despedido por House, que creyó que ya había aprendido todo lo que podía. Es novio de la  Dra. Cameron en la 4ta temporada y se casa con ella al final de la 5a temporada.

</p>

</dd>

<br /><br />

<dt>Dra. Allison Cameron (Jennifer Morrison)</dt>

<dd>

<p><img src="images/cameron.jpg" width="90" align="left" alt="Allison Cameron" style="margin: 4px;" />Inmunóloga a quien House afirma que la contrató, antes que por sus excelentes antecedentes, por su belleza física, ya que normalmente una mujer de esa belleza no estudia medicina y termina casándose con un hombre rico. En el pasado se casó, movida por un amor confundido con compasión, con un hombre que tenía una enfermedad terminal. Hay cierta tensión amorosa entre ella y el Dr. House, ya que en determinados momentos ella se ha mostrado atraída por él. Actualmente es la jefa de urgencias del hospital debido a que renunció a su puesto en el último capítulo de la tercera temporada. Es novia del Dr.Robert Chase en la cuarta temporada y posteriormente se convierte en su esposa al final de la 5a temporada.En la sexta temporada rompe con Chase se va del hospital y del departamento culpando a House de corromper a Chase para que este matara a Dibala. En la sexta temporada ella declara su amor hacia él.

</p>

</dd>

<br /><br />

<dt>Dr. Eric Foreman (Omar Epps)</dt>

<dd>

<p><img src="images/foreman.jpg" width="90" align="left" alt="Eric Foreman" style="margin: 4px;" />Neurólogo, se siente habitualmente maltratado por su jefe, aunque también lo reconoce como un gran médico. Es muy inteligente y la mayoría de las veces suele ser enviado a las investigaciones menos convencionales, tales como los constantes allanamientos de morada que realizan, debido a sus antecedentes como delincuente juvenil, por los cuales dijo en una ocasión House que lo había contratado. Dejó el equipo de House porque pensaba que si continuaba trabajando con él acabaría siendo como él, pero luego regresa para vigilar todos los movimientos que hace House con su nuevo equipo. En la quinta temporada mantiene una relación con la Dra Remy Hadley.

</p>

</dd>

<br /><br />

<dt>Dr. Lawrence Kutner (Kal Penn)</dt>

<dd>

<p><img src="images/kutner.jpg" width="90" align="left" alt="Lawrence Kutner" style="margin: 4px;" />Médico del deporte y rehabilitación. Es uno de los médicos contratados por House en la cuarta temporada. Es de origen indio y a los seis años vio como sus padres eran asesinados en un atraco a la tienda que regentaban. Es el más entusiasta del grupo, en varias ocasiones realizó acciones arriesgadas y era objeto de las bromas de House. En el episodio 20 de la 5ta temporada Simple explicación se suicida sin razón alguna. Reaparece en el episodio 24 de la 5ta temporada como una alucinación del Dr. House.

</p>

</dd>

<br /><br />

<dt>Dra. Remy Hadley (Olivia Wilde)</dt>

<dd>

<p><img src="images/13.jpg" width="90" align="left" alt="13" style="margin: 4px;" />Internista contratada por House en la cuarta temporada. House siente mucha curiosidad por ella por lo que al final la contrata. Además tiene la enfermedad de Huntington la cual tenía un 50% de probabilidad de padecer al ser un trastorno genético que tenía su madre. La Dra. Hadley no conoce esto hasta que se hace la prueba en el capítulo 16 de la cuarta temporada, "El corazón de Wilson". Además, House y Foreman creen que es bisexual, confirmándolo en la quinta temporada. Es llamada "Trece" (apodada por House) ya que era el número que usaba en la prueba de selección para ser uno de los médicos contratados por House. Mantiene una relación con Foreman en la 5a temporada.

</p>

</dd>

<br /><br />

<dt>Dr. Chris Taub (Peter Jacobson)</dt>

<dd>

<p><img src="images/taub.jpg" width="90" align="left" alt="Chris Taub" style="margin: 4px;" />Cirujano plástico. Es el tercer candidato contratado por House en la cuarta temporada. Abandonó la cirugía plástica al mantener relaciones con la hija de uno de sus socios por lo cual sus compañeros le dijeron que se largara o se lo contarían a su esposa. También se ha revelado en la serie que en su juventud intentó suicidarse a causa de una depresión porque tiene la nariz enorme, pero su familia lo ayudó a sobreponerse.

</p>

</dd>

</dl>

Observen que dentro de cada ítem incluí un párrafo y dentro de este, texto y una imagen alineada a la izquierda. Las etiquetas <br /> solo tienen como fin separar visualmente a los ítems. Nuestra página ahora se ve así:

Es cierto, todavía tiene un aspecto bastante austero, pero eso mejorará cuando vayamos aprendiendo css. La próxima links y anclas.

Creative Commons License
The Tutorial de diseño web (parte 4): Listas by Iván Stadius, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.