martes, diciembre 13, 2011

Tutorial de desarrollo web, Parte X: Listas

Previously, on The CubeBlog...
Parte I: Introducción
Parte II: Hola, mundo
Parte III: Estructurando el texto. Encabezados, párrafos y saltos de línea. Entidades
Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas
Parte V: Introducción al CSS
Parte VI: Jerarquía en HTML. Herencia en CSS
Parte VII: Tablas (1). Bordes CSS (1)
Parte VIII: Tablas (2). Bordes CSS (2)
Parte IX: Identificadores y clases (1)

Seguimos otra semana más con el cursillo de desarrollo web. Esta semana el curso va a ser algo breve, por dos razones: una, el tema de esta semana no es tampoco algo muy extenso; y dos, que estoy en una semana bastante agobiante así que no puedo tampoco extenderme mucho. Pero aún así, aquí tenéis, una semana más, la resolución a los ejercicios del último post.
Hasta ahora, para hacer listas en HTML, si las hemos hecho, hemos tenido que recurrir a unas maneras bastante rudimentarias. Escribir números al principio de cada párrafo o salto de línea, o tal vez escribirles un guión o punto manualmente. Sin embargo, como la mayoría de los procesadores de texto, HTML también nos proporciona herramientas para crear listas, tanto enumeradas como no. Vamos a analizar cada uno de los tres estilos de listas que podemos encontrarnos.
En primer lugar, tenemos la lista no enumerada, cuyas líneas comenzarán con guiones, círculos, cuadrados, etc. Esto lo haremos con las etiquetas <ul> y <li>. La etiqueta "ul" (de "unordered list" o "lista desordenada") contendrá toda la lista completa, mientras que la etiqueta "li" ("list item" u "objeto de lista") contendrá cada uno de los elementos de nuestra isla. Pongamos un ejemplo:


<ul>
<li>Primer elemento.</li>
<li>Segundo elemento.</li>
</ul>

Este código se vería así:
  • Primer elemento
  • Segundo elemento
Como véis, es bastante intuitivo, no hay mucho que mostrar.
El segundo tipo de lista es la lista enumerada, cuyas líneas comenzarán con un número o letra, que se irá incrementando con cada elemento de la lista. Esto se hará mediante las etiquetas <ol> ("ordered list" o "lista ordenada") y, una vez más, <li>. Como vemos, la etiqueta "li" es usada en ambos tipos de lista, de modo que para mostrar un ejemplo sólo nos hace falta cambiar las etiquetas "ul" del ejemplo anterior por etiquetas "ol" y quedaría así:

<ol>
<li>Primer elemento.</li>
<li>Segundo elemento.</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
Antes de aventurarnos con el tercer tipo de lista, sería interesante ver unas cuantas instrucciones CSS que estas dos listas soportan. Probablemente la que más usaremos sea list-style-type, la cual cambiará el tipo del marcador de la lista. Por ejemplo, si a nuestra lista desordenada le añadiéramos este atributo:

<ul style="list-style-type:square;">

El resultado sería el siguiente:
  • Primer elemento
  • Segundo elemento
De esta forma existen muchas formas de cambiar los marcadores de nuestra lista, depende de si es lista ordenada o desordenada. Los valores para una lista desordenada podrán ser: "circle", "square", "disc" o "none" (creo que son bastante explícitos). La lista ordenada, por contra tiene una gran variedad de posibles valores, que listo a continuación:

armenian, cjk-ideographic, decimal, decimal-leading-zero, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha, lower-alpha, lower-greek, lower-latin, lower-roman, none, upper-alpha, upper-latin, upper-roman

La mayoría son bastante intuitivos también, al menos la mayoría, aunque supongo que al lector le interesará ir probando cada uno de los valores para comprobar sus efectos.
Aunque existen otras instrucciones CSS para las listas, algunos bastante útiles, otros sólo con fines estéticos, no vamos a entrar ahora en más instrucciones de este estilo, ya que son bastante más complejas, así que las estudiaremos más adelante.
Finalmente, el tercer tipo de lista es la lista de definiciones. Esta lista no se parece a las anteriores, ni usa ninguna de sus etiquetas, sino que introduce tres etiquetas nuevas: <dl> ("definition list" o "lista de definiciones"), <dt> ("definition term" o "término de definición") y <dd> (que vendría a ser "definition definition", lo cual es algo rebundante, pero bueno). Este tipo de lista nos permite crear una lista de títulos con un significado pegado a él. Veamos un ejemplo, que seguro que lo entenderemos enseguida:

<dl>
<dt>Término 1</dt>
<dd>Esta es la definición del primer término.</dd>
<dt>Término 2</dt>
<dd>Esta es la definición del segundo término.</dd>
</dl>

Este código se vería:


Término 1

Esta es la definición del primer término.

Término 2

Esta es la definición del segundo término.

Sencillo de entender, ¿no? No hay mucho que explicar tampoco sobre esta última lista, sólo que el concepto de "término" y de "definición" se lo ponemos nosotros, pero no tiene por qué alternar un "dt" con un "dd", sino que, según nuestros propósitos, podemos arreglarlo a nuestra manera. Pero estaría siempre interesante que el "dt" sea más importante que el "dd", por cuestiones organizativas.
Finalmente, hablar de las listas "anidadas". Realmente no hay gran cosa que decir sobre esto, sólo que una lista puede contener a otra, de esta manera:

<ol>
<li>Primer elemento.</li>
<ul>
<li>Primer subelemento.</li>
<li>Segundo subelemento.</li>
</ul>
<li>Segundo elemento.</li>
</ol>

Que se vería así:
  1. Primer elemento.
    • Primer subelemento.
    • Segundo subelemento.
  2. Segundo elemento.
Como vemos, el propio navegador coge otro tipo de marca para la sublista, para evitar confusión con la lista primaria (a pesar de que ya de por sí le pone un mayor indentado).
Y, con esto, terminamos este décimo (¡sí, décimo ya!) post de desarrollo web, pasando al ejercicio.

EJERCICIO

Como no podía ser de otra manera, esta semana vamos a coger el archivo "compraventa.html" y vamos a modificar ambas listas, convirtiéndola, la de "compra" en una lista ordenada, y la de "venta" en una lista desordenada. Por otro lado, modificaremos el "faq.html", quitaremos la tabla y lo convertiremos en una lista de definiciones.

Y eso es todo por esta semana. La semana que viene habré terminado los trabajos del ciclo así que podremos dar algo más complejo. ¡Hasta entonces, pues!

No hay comentarios: