8.- Listas.

Otro elemento muy común a la hora de elaborar contenidos es el uso de listas, que las utilizamos cuando queremos enumerar algo, ya que siempre aportan un aspecto más visual, que ayuda a captar cuáles son los elementos que forman parte de esa enumeración, cómo se estructuran en el caso de que haya varios niveles,  y a recordar cuáles son, y cómo dependen jerárquicamente unos de otros.

A la hora de utilizar listas contamos con dos opciones:

  • Listas ordenadas (ol): en las que el orden de la enumeración es importante. Por ejemplo, si quiero enumerar los pasos a seguir en un determinado protocolo, quiero mostrar un índice de contenidos, etc. Estas listas llevan delante de cada elemento el orden que dicho elemento ocupa dentro de la lista y pueden ser numéricas o alfabéticas. Para la FPaD y FPS además se añade a estas listas la clase lista_esquema, que además muestra la numeración completa y separa la numeración del elemento por los caracteres ".- ". Esta numeración es automática.
  • Listas desordenadas (ul): en las que el orden de la enumeración no es importante. Por ejemplo, si quiero enumerar diferentes conceptos que no guardan un orden entre ellos. Estas listas llevan delante de cada elemento una viñeta que hace referencia a su nivel de anidamiento dentro de la lista. Para la FPaD y FPS se añade a estas listas la clase lista_verificacion que define 6 viñetas diferentes para cada nivel y así conseguimos darle uniformidad a todas nuestras listas.

En XHTML también existen las llamadas listas de definiciones, en las que no nos vamos a parar, ya que su uso es muy específico y poco común.

Un ejemplo del aspecto de cada una de ellas podría ser el que sigue:

Tipos de listas
DesordenadasOrdenadas
  • nivel 1
    • nivel 2
      • nivel 3
        • nivel 4
          • nivel 5
            • nivel 6
  • otro de nivel 1
  1. apartado 1
    1. apartado 1.1
    2. apartado 1.2
      1. apartado 1.2.1
  2. apartado 2

 

Para insertar una lista lo más cómodo es añadir todos los elementos, independientemente de su anidamiento, uno detrás de otro.

Posteriormente los seleccionamos todos y le decimos el tipo de lista que queremos mediante el botón adecuado: Lista desordenada. Icono en cuyo interior se ve esquemáticamente una lista con viñetas con forma de punto seguidas de una línea que representa un texto estilizado.  para desordenadas y Lista ordenada. Icono en cuyo interior se ve esquemáticamente una lista numerada, en cada línea con un número sucesivo (1,2,3), seguido de una línea que representa esquemáticamente una línea de texto.  para ordenadas.

Por último nos queda anidar correctamente los diferentes elementos, utilizando el botón Aumentar sangría Aumentar sangría. Se ve una lista estilizada representada con líneas con distinta indentación. Las que tienen más sangría, tiene una flecha azul que va de izquierda a derecha, como empujando para aumentar esa sangría. o Disminuir sangría  Disminuir sangría. Se ve una lista estilizada representada con líneas con distinta indentación. Las que tienen más sangría, tiene una flecha azul que va de derechaa izquierda, como arrastrando el texto que hay detrás hacia la izquierda, para reducir su sangría..

Veamos de forma visual cómo hacerlo.

Debes conocer

En los siguientes vídeos te muestro el proceso para crear las listas de ejemplo que hemos utilizado en este apartado.

Reflexiona

¿Cómo puedes hacer que en un elemento de una lista se inserte una nueva línea sin que nos aparezca un nuevo elemento de lista y que podamos seguir en el mismo elemento?