Listas anidadas en HTML – 2 de 2

En la primera parte de este artículo combinamos los conocimientos que ya habíamos adquirido sobre las listas para ilustrar el modo de anidarlas.

Lo primero que te propongo es que realices un ejercicio práctico. Observa la siguiente página cuidadósamente y trata de reproducir el código necesario para generarla.

No te dejes intimidar por la profundidad de la lista (hasta cuatro niveles). Recuerda que debes aproximarte de fuera a dentro, comenzando por la más exterior.

Te recomiendo que cada vez que abras una etiqueta la cierres para crearte un contenedor y asegurarte de que no se te olvida por accidente su cierre. Luego prosigue rellenando los espacios entre etiquetas.

Si tienes algún problema, haz clic sobre el enlace con el botón derecho y descárgate el fichero con el código fuente para consultar la solución.

Quiero que te fijes ahora en las listas del ejemplo. Observa que las listas ordenadas anidadas muestran una numeración ascendente con números normales (arábigos) independientemente del nivel en que se encuentren. En cambio, las listas no ordenadas presentan un bolo que dependerá precisamente del nivel de profundidad.

Observa ahora el siguiente ejemplo, en el que he alterado precisamente estos indicadores por defecto, tanto en las listas ordenadas como en las que no lo están.

Fíjate cómo, en las listas ordenadas, además de usar números arábigos para expresar el orden, podemos hacerlo de los siguientes modos:

– Letras mayúsculas
– Letras minúsculas
– Números romanos en mayúsculas
– Números romanos en minúsculas.

Además, disponemos de distintos símbolos para las listas no ordenadas.

Voy a enseñarte cómo hacer esto, pero antes tengo que contarte algo importante relacionado con el modo en que fue evolucionando el lenguaje HTML desde su creación.

En un principio el HTML era caótico. No sé si recordáis la guerra cruenta entre navegadores (sobre todo entre Netscape Navigator y Microsoft Internet Explorer) en la que cada uno añadía nuevas funcionalidades al lenguaje que dificultaban los esfuerzos de estandarización y compatibilidad.

El W3C intentó poner un poco de orden en esta situación y apostó por una versión más estricta del lenguaje inspirada en los rigores de XML, que denominó XHTML.

Además de unas normas sintácticas más severas (como la escritura de las etiquetas en mayúsculas y la necesidad de cerrarlas), introdujo un concepto decisivo: la separación entre contenido y diseño.

Tras la guerra entre navegadores nos encontramos con un buen número de etiquetas y atributos que indicaban cómo se diseñaba el texto: qué tipo de letra, tamaño, color, márgenes, etc…

Con XHTML se desligó la función semántica del lenguaje (dime qué quieres hacer) de los detalles de presentación (cómo quieres verlo). Para eso recurrió a un artilugio denominado hojas de estilo, las cuales se ocupaban de todos los aspectos concretos de visualización.

Como consecuencia XHTML realizó una purga y nombró como obsoletas aquellas etiquetas o atributos que se ocupaban de cuestiones de diseño, pues entendía que todo eso era función de las hojas de estilo. Un ejemplo, entre muchos, es la etiqueta <font>, que se ocupaba de definir el tipo de letra a utilizar.

¿Qué tiene que ver todo esto con las listas anidadas, preguntarás?

Pues bien, antes de que llegase el XHTML escricto, existía un atributo en las etiquetas <ol> y <ul> que permitía definir el tipo de numeración o bolo si no queríamos utilizar los que el navegador proponía por defecto.

XHTML estricto considera que esos atributos están obsoletos, pues insiste en que todos los aspectos de diseño deben realizarse a través de las hojas de estilo.

Pero, a pesar de que estén obsoletos, aún siguen estando activos y te explicaré cómo hacerlo a la antigua usanza hasta que empecemos los artículos de CSS (Cascading Style Sheets), las hojas de estilo con las que resolveremos todas las consideraciones de presentación y diseño de HTML.

¿Recuerdas qué era la famosa etiqueta DOCTYPE que aparece al comienzo de cada página? Compara la del primer ejemplo con la del segundo. Se trata de una DTD (definición de tipo de documento) que indica al navegador, último responsable de la presentación de la página, a qué conjunto de normas se adhiere la página.

El primer ejemplo está usando XHTML estricto con todo lo que eso implica, entre lo que está no usar ni etiquetas ni atributos obsoletos (deprecated).

El segundo usa una versión más relajada denominada Transitional, que en su día se empleó para dar tiempo a los navegadores a que poco a poco fueran migrando a XHTML puro. El XHTML transicional tiene el rigor sintáctico del XHTML, como el cierre de todas las etiquetas y su escritura en minúsculas, pero permite el uso de estas etiquetas obsoletas.

Como he querido usar atributos obsoletos para especificar cómo numeraré las listas ordenadas y qué bolos emplearé en las no ordenadas, en vez de emplear hojas de estilo CSS, he cambiado la DTD del segundo ejemplo a XHTML transicional. Fíjate bien en la primera línea.

Si no lo hubiese puesto podría obtener resultados imprevisibles según el navegador empleado.

Por lo general trabajaremos con XHTML estricto o con HTML5 (la nueva gran revolución) en esta serie, pero resulta interesante también conocer el modo clásico de proceder.

Observa el código fuente del segundo ejemplo y se desvelará el misterio. Con el atributo type dentro de las etiquetas <ol> y <ul> indicamos cómo será la numeración o el bolo:

– orden con letras mayúsculas: type=»A»
– con letras minúsculas: type=»a»
– con números romanos en mayúsculas: type=»I»
– con números romanos en minúsculas: type=»i»
– y, naturalmente, con números arábigos, type=»1″, que no es necesario indicar, pues es el valor por defecto.

Por ejemplo, para una numeración por letras minúsculas, la etiqueta sería:

<ol type="a"> ... </ol>

Con las listas no ordenadas tenemos las siguientes opciones:

– bolo cuadrado: type=»square»
– bolo con punto negro: type=»disc»
– bolo con punto en blanco: type=»circle»

Por ejemplo:

<ul type="disc"> ... </ul>

Es interesante que aprendas esto. Pero pronto te haré desaprenderlo cuando nos metamos en profundidad en el apasionante mundo de las CSS.

Javier Montero


Listas anidadas en HTML – 2 de 2


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas anidadas en HTML – 1 de 2

En los últimos artículos de esta serie mostramos los tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de defición. Comprendidos estos conceptos, anidar listas será una tarea realmente sencilla.

Comencemos observando el aspecto de una lista anidada.

Date cuenta de que, en un primer nivel, nos encontramos con una lista ordenada. En un segundo aparecen distintas listas no ordenadas.

Veamos cómo diseñar el conjunto.

La forma de atacar una anidación de listas es partiendo desde fuera hacia dentro. Comenzamos esquematizando el primer nivel y a él le añadimos las listas de segundo nivel.

Antes de la lista ordenada de primer nivel nos encontramos con un simple encabezado que sirve de título:

<h2>Menú</h2>

Y comienza la fiesta:

Vamos a crear la estructura de la lista ordenada exterior, pero sin rellenar los campos con los distintos elementos. Esto ayudará a que no nos perdamos en las marañas.

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

Se trata de una lista con tres elementos.

Como si de un vídeo de cocina se tratase, vamos preparando las listas no ordenadas de segundo nivel para cuando llegue el momento de agregarlas al sofrito:

Esta vez la detallaremos completas, pues no hay ningún nivel inferior:

La primera:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Esto no tiene ningún misterio: una simple lista sin ordenar con tres elementos.

La segunda:

<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Y, finalmente, la última:

<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Hasta aquí todo es muy sencillo. Presta atención ahora, pues llega el momento crítico.

Vamos a analizar ahora los distintos elementos que componen la lista numerada de primer nivel.

Fíjate en el primer elemento (échale un vistazo nuevamente al fichero de ejemplo) y trata de responder a la siguiente pregunta:

¿De qué está compuesto el primer elemento?

La respuesta debe llegarte de un modo inmediato si comprendes que el primer elemento se compone de todo lo que hay entre el número 1 y el número 2.

Es decir, nos encontramos, en primer lugar, con un encabezado:

<h3>Primer plato</h3>

Puesto que para el título empleamos un h2, parece lógico utilizar aquí otro de menor jerarquía como un h3.

Después del encabezado, nos aparece la primera de las listas no ordenadas de segundo nivel que ya cocinamos hace un rato:

<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul

Por lo tanto, el primer elemento de la lista de primer nivel es, completo:

<h3>Primer plato</h3>
<ul>
    <li>Macarrones</li>
    <li>Gazpacho</li>
    <li>Judías pintas</li>
</ul>

Razonando del mismo modo, el segundo elemento de la lista de primer nivel se compone de todo lo que hay entre el 2 y el 3. Es decir:

<h3>Segundo plato</h3>
<ul>
    <li>Pollo al ajillo</li>
    <li>Merluza frita</li>
</ul>

Finalmente, el tercer elemento es:

<h3>Postre</h3>
<ul>
    <li>Fruta</li>
    <li>Yogur</li>
    <li>Café</li>
</ul>

Ya sólo falta el toque final. Volvemos al esqueleto de la lista de primer nivel y entre cada <li>…</li> insertamos cada una de las piezas.

He aquí nuestro resultado final:

<h2>Menú</h2>
<ol>
    <li>
        <h3>Primer plato</h3>
        <ul>
            <li>Macarrones</li>
            <li>Gazpacho</li>
            <li>Judías pintas</li>
       </ul>
    </li>
    <li>
        <h3>Segundo plato</h3>
        <ul>
        <li>Pollo al ajillo</li>
        <li>Merluza frita</li>
        </ul>
    </li>
    <li>
        <h3>Postre</h3>
        <ul>
            <li>Fruta</li>
            <li>Yogur</li>
            <li>Café</li>
        </ul>
    </li>
</ol>

Ya sabes que la indentación no es necesaria, pero ayuda a esclarecer la estructura del código.

Descárgate el código fuente haciendo clic con el botón derecho sobre el enlace del comienzo del artículo si quieres ver fichero el fichero completo.

Cuando hayas practicado esto un par de veces podrás escribir directamente el código con agilidad. Tómate, entre tanto, el tiempo que haga falta desglosando cada lista de fuera a dentro, tal como hemos hecho aquí.

En el próximo artículo presentaré un nuevo ejemplo, esta vez anidando listas ordenadas entre sí. Veremos las particularidades que tienen este tipo de estructuras.

Javier Montero


Artículos relacionados:

Creación de listas ordenadas en HTML
Listas no ordenadas en HTML
Listas de definición en HTML


Listas anidadas en HTML – 1 de 2


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Python – Capítulo 23: El que ríe el último ríe mejor

El título que he elegido para este artículo contiene un acertijo. ¿De qué crees que hablaremos hoy?

Es complicado, así que te daré otra pista: «los últimos serán los primeros».

En el capítulo de hoy mostraremos cómo organizar una estructura LIFO (una pila o stack) en Python y para ello nos valdremos, una vez más, de nuestras potentes y versátiles listas. ¡Qué sería de nosotros sin ellas!

Aclaremos previamente, por si no lo conoces, qué entendemos por una pila.

Una pila, o stack en inglés, es el término que se emplea en programación para designar una estructura de datos ordenada en la que almacenamos información y la recuperamos del modo que lo último que entre sea lo primero que sale.

De ahí vienen las siglas LIFO: Last In, First Out; el último en entrar, el primero en salir.

Piensa en una montón de papeles que vas apilando uno encima de otro. Cuando los quieres recuperar, accedes en primer lugar al que está arriba de la pila. Una vez lo retiras tienes acceso al siguiente, y así sucesivamente.

El concepto opuesto es el de cola, que es una estructura FIFO: First In, First Out; el primero que entra, el primero que sale. Piensa en la típica cola ante la taquilla de un concierto. El primero que llegó es el que primero tiene derecho a comprar la entrada. El que llegó el último tendrá que esperar a que hayan salido todos los que están delante de él antes de que le toque su turno.

Si quizás has hecho tus pinitos en el mundo de la programación en lenguaje ensamblador, el concepto de pila, o stack, te resultará ya familiar, al igual que las dos instrucciones que se empleaban para introducir y recuperar datos: push y pop, respectivamente. En Python se emplean casi las mismas.

Vamos a ilustrar el concepto pensando en un ascensor como si de una estructura LIFO se tratase: entras en el ascensor y te sitúas atrás para dejar sitio a los demás; cuando llega la hora de salir, el último en entrar es el primero en abandonar el ascensor y tú, que entraste el primero, eres ahora el último en salir.

Al principio el ascensor está vacío. Vamos a crear una lista sin elementos:

>>> ascensor = []
>>> ascensor
[]

Ese par de corchetes tiene hasta forma de ascensor, ¿a que sí?

El método para agregar elementos a una lista, justo después del último, ya lo conoces del capítulo 19. Vamos a emplearlo para hacer que Luis suba en el ascensor:

>>> ascensor.append('Luis')
>>> ascensor
['Luis']

El siguiente en entrar será Pedro:

>>> ascensor.append('Pedro')
>>> ascensor
['Luis', 'Pedro']

Le siguen Marta y Juan:

>>> ascensor.append('Marta')
>>> ascensor.append('Juan')
>>> ascensor
['Luis', 'Pedro', 'Marta', 'Juan']

El ascensor llega a la planta baja y es hora de abandonarlo.

Para extraer el último elemento de una lista, Python dispone del método pop().

>>> ascensor.pop()
'Juan'
>>> ascensor
['Luis', 'Pedro', 'Marta']

Fíjate bien en que pop() hace dos cosas: por un lado, recupera el último elemento, el cual podrías, por ejemplo, presentarlo o asignarlo a una variable; por otro, elimina ese elemento de la lista.

Si vuelvo a hacer un pop(), ¿quién crees que saldrá ahora?

>>> ascensor.pop()
'Marta'

Le sigue Pedro y, a continuación, Luis, que estaba apretujado al fondo:

>>> ascensor.pop()
'Pedro'
>>> ascensor
['Luis']
>>> ascensor.pop()
'Luis'

Si no nos hemos equivocado en las cuentas, el ascensor está ya completamente vacío. En efecto:

>>> ascensor
[]

Con dos sencillos métodos, append() y pop(), hemos diseñado una estructura LIFO en todas las de la ley.

El método pop() podemos utilizarlo aunque nuestra lista no sea LIFO. Veámoslo:

Demos marcha atrás en el tiempo hasta el momento en el que el ascensor estaba completamente lleno:

>>> ascensor=['Luis', 'Pedro', 'Marta', 'Juan']
>>> ascensor
['Luis', 'Pedro', 'Marta', 'Juan']

Se abren las puertas y le toca salir a Juan, que ha sido el último en entrar. Sin dudarlo, considera que sería poco caballeroso por su parte salir el primero y, cortésmente, le cede el paso a Marta.

Cuando al método pop() le facilitamos un índice, extraerá el elemento correspondiente, en lugar del último de la lista.

El índice de Marta en la lista es 2. Por lo tanto:

>>> ascensor.pop(2)
'Marta'
>>> ascensor
['Luis', 'Pedro', 'Juan']

¡Cuánta caballerosidad! No sólo el lenguaje Python es elegante y cortés en sí mismo, ¡incluso los mismos elementos que ilustran como ejemplo sus estructuras de datos!

Javier Montero


Python – Capítulo 23: El que ríe el último ríe mejor


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas de definición en HTML

Continuamos la serie de artículos dedicadas a las listas en HTML explicando el tercer tipo que aún nos resta: las listas de definición.

Este tipo de listas las utilizamos para dar el formato típico de un diccionario en el que se presenta un término y, a continuación su definición. Con un poco de imaginación, podréis encontrar, sin duda, otros usos creativos.

Pero antes que nada, observad previamente el aspecto que tienen.

En inglés, lista de definición se dice definition list. Con las iniciales, ya tenemos la etiqueta que caracteriza a este tipo de listas: <dl>.

A diferencia de las listas ordenadas y no ordenadas, en las que empleamos la etiqueta <li> para delimitar cada elemento (item), ahora necesitaremos dos, una para el término y otra para su descripción en sí.

Para el término de la definición usamos la etiqueta <dt>, de definition term.

Para la descripción de la definición disponemos de la etiqueta <dd>, de definition description.

Según esto, la lista de definición del ejemplo anterior no debe suponer ya ningún misterio:

<dl>
  <dt>Ordenadas</dt>
  <dd>Cada elemento va precedido por un número de orden</dd>
  <dt>No ordenadas</dt>
  <dd>Cada elemento se precede por un bolo común que no sugiere ninguna 
ordenación en particular</dd>
  <dt>De definición</dt>
  <dd>Dan formato a una definición de términos al estilo de un diccionario</dd>
</dl>

Recordad que la indentación no es obligatoria; se ha indentado con el único propósito de hacer más legible el código.

Para finalizar, hay algo más que debéis saber de las listas de definición: puede haber listas en las que algún elemento aparezca sin describir. En este caso habría un <dt>, pero no su correspondiente <dd>. Y a la inversa, puede haber términos con dos o más definiciones, es decir, con varios apartados <dd>.

En el próximo artículo aprederemos a anidar listas entre ellas. Entre tanto, practicad esto a vuestras anchas. Si no hacéis páginas web, tal vez escribáis en un blog. La mayoría de los sistemas de blog admiten la inserción de código HTML. Probad las listas, estructurad el texto.

Javier Montero


Listas de definición en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Listas no ordenadas en HTML

En Creación de listas ordenadas en HTML explicamos el modo de generar listas cuyos elementos aparecían ordenados automáticamente en una secuencia numérica creciente. El segundo tipo de listas lo constituyen aquellas en las que los items no reflejan una ordenación particular más que la que refleja su escritura. Cada elemento aparece precedido de un bolo o viñeta, un punto, y no por un número.

Observad el aspecto de una lista no ordenada haciendo clic sobre el enlace.

La única diferencia, en lo que se refiere a su creación, respecto a las listas ordenadas, está en la etiqueta que indica el tipo de lista.

En inglés, lista no ordenada se dice unordered list. Si nos quedamos con las iniciales de estas palabras tenemos la etiqueta empleada en su definición: <ul>

La lista no ordenada del ejemplo anterior se crearía, entonces, del siguiente modo:

<ul>
  <li>Listas ordenadas</li>
  <li>Listas no ordenadas (esta que estáis viendo)</li>
  <li>Listas de definición</li>
</ul>

Observad cómo los distintos elementos se siguen referenciando con la etiqueta <li>.

Javier Montero


Listas no ordenadas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Creación de listas ordenadas en HTML

Una de las primeras técnicas que uno aprende cuando estudia HTML y que da lugar a un resultado vistoso es la creación de listas.

Existen tres tipos básicos de listas en HTML: ordenadas, no ordenadas y de definición. En el artículo de hoy explicaremos el modo de crear las primeras.

Una lista ordenada no es más que una en la que los distintos elementos (items) aparecen numerados secuencialmente.

Observad el siguiente ejemplo de lista ordenada para comprender exactamente de qué estamos hablando.

Su creación es sencilla, como veréis a continuación.

Lista ordenada se dice, en inglés, ordered list. Si memorizáis las iniciales de estas dos palabras tendréis la etiqueta HTML responsable de su creación: <ol>.

Con la correspondiente etiqueta de cierre, toda nuestra lista queda entre los pares de etiquetas:

<ol> ... </ol>

Escribimos los distintos elementos incluyéndolos también en un par de etiquetas características. En inglés, elemento de lista se dice list item. Volved a coger las iniciales de estas dos palabras y tendréis la etiqueta que envolverá cada item de la lista: <li>.

No debéis preocuparos por la numeración de cada elemento, aparecerá de modo automático.

Ya tenemos todo lo necesario para confeccionar la lista del ejemplo:

<ol>
  <li>Listas ordenadas (esta que estáis viendo)</li>
  <li>Listas no ordenadas</li>
  <li>Listas de definición</li>
</ol>

La indentación no es necesaria, pero ayuda a ver el esquema con claridad.

Practicadlo un par de veces y esta técnica será definitivamente vuestra.

Javier Montero


Creación de listas ordenadas en HTML


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

Python – Capítulo 19: Agregando elementos a una lista

Hasta ahora hemos trabajado con listas en las que su longitud se ha mantenido constante desde su creación. En el capítulo de hoy veremos cómo agregar dinámicamente nuevos elementos.

Arranquemos Python IDLE o el intérprete interactivo.

Vamos a crear una lista que emplearemos para gestionar la lista de espera de un vuelo de la compañía Python Airlines.

>>> lista_espera = ['Luis Luisero', 'Pedro Pedrete', 'Javier Javiercín', 'Rosa Rosae']

Si quedan vacantes, Luis será el primero con derecho a ocupar una plaza, seguido de Pedro. Rosa lo va a tener algo más difícil, pues está la última en la cola.

Llega una nueva usuaria, Marta Martínez, y se le informa que debe permanecer en lista de espera, pero que aún tiene a cuatro personas por delante.

Para inscribirla, ejecutamos el siguiente comando:

>>> lista_espera.append('Marta Martínez')

El método append agrega un elemento a una lista en última posición.

Un poco de terminología. Un método es una especie de función que actúa sobre un objeto determinado. En este caso, el método append está acuando sobre lista_espera. El nombre del objeto y el método aparecen separados por un punto.

Comprobemos que ha cumplido con su cometido:

>>> lista_espera
['Luis Luisero', 'Pedro Pedrete', 'Javier Javiercín', 'Rosa Rosae', 'Marta Martínez']

Pero lo va a tener realmente complicado. Al parecer hay rumores de que sólo habrá tres vacantes, aunque no se pierde nada por intentarlo.

De repente llega al mostrador de facturación una conocida del piloto. La meterán en lista de espera, para ser discretos, pero en una posición que asegure que cogerá el avión.

Debemos asegurarnos que esté la tercera en la cola.

Podemos agregar un elemento a una lista en la posición que deseemos aplicando el método insert, facilitando como parámetro adicional el índice en el que quedará ubicado. El elemento que estaba situado en esa posición se desplazará un puesto hacia la derecha.

Puesto que va a ser el tercer elemento, su índice es dos. Recordemos que el primer elemento de una lista tiene por índice cero.

>>> lista_espera.insert(2, 'Helen Chufada')

Veamos qué ha pasado:

>>> lista_espera
['Luis Luisero', 'Pedro Pedrete', 'Helen Chufada', 'Javier Javiercín', 'Rosa Rosae',
 'Marta Martínez']

Volar volará, pero no hay derecho…

Javier Montero

Python – Capítulo 18: Creación de sublistas

Objetivo: aprender los conceptos básicos de slicing aplicados a las listas en Python.

Las listas dan mucho de sí; no en vano son uno de los artilugios estrella en la programación en Python. Hoy voy a mostrarte cómo crear sublistas, es decir, listas que son un trozo (en inglés, slice) de otra mayor. Por ejemplo, dada la lista de días de la semana, una sublista sería aquella que contiene los días laborables.

Arrancamos IDLE o el intérprete de comandos de Python e introducimos una lista sencilla sobre la que cacharrearemos:

vocales = ['a','e','i','o','u']
>>>vocales
['a', 'e', 'i', 'o', 'u']

Para extraer una sublista de una lista empleamos la notación:

lista[i:j]

donde i y j son dos índices que separamos por dos puntos (:)

El primer índice, i, corresponde al índice del elemento inicial a partir del cual, incluido, comenzará la sublista. El otro indica el extremo superior, pero esta vez sin incluir.

Todo se entenderá más claro si vocalizamos mejor:

>>> vocales[2:4]
['i', 'o']

Como ves, se nos ha creado una lista (fíjate en los corchetes) que contiene todos los elementos que van desde el que tiene índice 2 (incluido) al de índice 4 (sin incluir), es decir, los de índices 2 y 3. Vuelvo a recordar que el primer elemento tiene por índice cero, por eso el de índice dos corresponde a la ‘i’.

La lista original no se ve afectada por esta operación:

>>> vocales
['a', 'e', 'i', 'o', 'u']

¿Qué provocaría esto?

>>> vocales[2:3]
['i']

En efecto, pues sólo se extraerían los que comienzan por índice 2 y terminan en índice 2 también.

¿Y esto otro?

>>> vocales[2:2]
[]

Observa que obtenemos una lista vacía, sin ningún elemento. Es lógico; el inicio tendría por índice 2 y el final índice 1. No tiene ningún sentido que el extremo derecho sea menor que el izquierdo.

¿Cómo haríamos para extraer una lista que fuera idéntica a la original?

Pensemos… El primer índice es cero, el último es 4. Pero esto no vale:

>>> vocales[0:4]
['a', 'e', 'i', 'o']

porque sólo incluiría los de índices 0, 1, 2 y 3.

Solución: poner como extremo superior 5 o cualquier valor por encima. Probémoslo:

>>> vocales[0:5]
['a', 'e', 'i', 'o', 'u']

>>> vocales[0:100]
['a', 'e', 'i', 'o', 'u']

Esto merece una explicación:

En condiciones normales, cuando referenciamos a una lista a través de un índice fuera de sus límites, como en estos dos últimos ejemplos, obtendríamos un error. Esto no es así para el caso de las sublistas. Debemos pensar en el valor derecho, más que como un índice real, como una cota superior. Todo lo que encuentre entre medias lo extraerá, sin importar que la lista concluya antes.

Para facilitar el trasiego con sublistas Python permite utilizar valores por defecto.

1) Si omitimos el primer valor del slice , Python sobreentiende que el comienzo es desde el principio de la lista:

>>> vocales[:3]
['a', 'e', 'i']

Como ves, el mismo efecto que haber hecho esto otro:

>>> vocales[0:3]
['a', 'e', 'i']

2) Si omitimos el segundo valor del slice Python sobreentiende que se trata del último de la lista:

>>> vocales[3:]
['o', 'u']

La omisión de ambos nos permite, obviamente, recuperar la lista completa, de principio a fin:

>>> vocales[:]
['a', 'e', 'i', 'o', 'u']

Puede parecer algo inútil, pero ya veremos más adelante que este uso puede permitirnos ciertas sutilidades elegantes.

Para finalizar, volvamos a la lista que mencionamos al comienzo:

>>> semana = ['lunes', 'martes', 'miércoles', 'jueves', 
'viernes', 'sábado', 'domingo']

¿Qué comando emplearías para extraer los días laborables y, además, asignar ese resultado a la lista laborables?

Si has comprendido la lección de hoy, seguro que no tendrás dificultad en dar con esto:

>>> laborables = semana[:5]
>>> laborables
['lunes', 'martes', 'miércoles', 'jueves', 'viernes']

Volveremos más adelante con el slicing refinándolo aún más y aprendiendo algunas técnicas comunes. Entre tanto, asegúrate de practicar estos conceptos simples.

Javier Montero Gabarró


Fecha de la última modificación: 21 de junio de 2013.


http://elclubdelautodidacta.es/wp/2011/09/python-capitulo-18-creacion-de-sublistas/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Consulta el índice completo de artículos relacionados con Python.

Python – Capítulo 17: Más días festivos a la semana

Objetivo: Ilustrar la modificación de elementos de una lista.

Las listas de Python son estructuras dinámicas y pueden ser modificadas. Hasta ahora hemos accedido a los elementos de una lista simplemente para consultar su valor. En la sesión de hoy modificaremos su contenido.

Empleando el intérprete interactivo de Python, introduzcamos una lista que nos es ya familiar y asignémosla a la variable semana:

>>> semana = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']

El intérprete se la traga y no devuelve nada, ya que se trata de una asignación. No obstante, verifiquemos que está en memoria:

>>> semana

['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']

Lo cantaba Bob Geldof y la mayoría lo suscribimos. ¿A quién le gusta un lunes?

Python es tan poderoso que puede hacer cambiar tu valoración sobre el primer día de la semana. Vamos a transformarlo en un festivo.

Los elementos individuales que constituyen una lista pueden ser modificados in situ accediendo a ellos a través de su índice. Decimos que las listas son estructuras de datos mutables. Más adelante, cuando hablemos de las tuplas, conoceremos otra estructura similar, inmutable, que no permite esta modificación in situ.

>>> semana[0]='fiesta'

Así de simple. Accedemos a los elementos de una lista a través de su índice como si de variables individuales se tratara, asignándoles el valor que deseemos. Recuerda que el primer elemento de una lista tiene por índice cero.

Revisemos nuestra semana tras esta sencilla operación:

>>> semana

['fiesta', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']

Esto, sin duda, tiene ya otro color, aunque presenta un serio problema: el martes pasa a ser el nuevo día negro, más oscuro aún, si cabe, por el hecho de estar precedido por tres días de ocio.

Nada que no podamos solucionar:

>>> semana[1]='fiesta'

>>> semana

['fiesta', 'fiesta', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo']

Y ya puestos, presta mucha atención a esta asignación múltiple:

>>>semana[2]=semana[3]=semana[4]=semana[5]='fiesta'

>>> semana

['fiesta', 'fiesta', 'fiesta', 'fiesta', 'fiesta', 'fiesta', 'domingo']

¿Quién dijo eso de que no todos los días eran fiesta?

Javier Montero Gabarró


Fecha de la última revisión: 20 de febrero de 2013


http://elclubdelautodidacta.es/wp/2011/08/python-capitulo-17-mas-dias-festivos-a-la-semana/


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Consulta el índice completo de artículos relacionados con Python.

LaTeX – Capítulo 9: Listas anidadas

En LaTeX podemos incluir listas dentro de otras listas, proceso que denominamos anidación.

Comencemos abriendo el PDF del capítulo.

Podemos apreciar tres secciones, cada una con un ejemplo de anidación diferente.

La primera sección ilustra la anidación de listas simples. Observemos como el bolo es diferente para los elementos de primer nivel y para los de segundo. LaTeX se ocupa de eso por nosotros, no necesitamos indicar nada al respecto en nuestro código.

La segunda sección nos muestra dos listas enumeradas dentro de una lista simple. Obviamente, la numeración se reinicia automáticamente al comenzar la segunda lista.

En el tercer ejemplo tenemos varias listas enumeradas anidadas. Es de destacar como por defecto LaTeX, en el segundo nivel, sustituye las cifras por letras, facilitando así una mejor comprensión visual de la estructura del conjunto.

El código fuente, a estas alturas, no debe suponeros ningún misterio:

% El Club del Autodidacta
% http://elclubdelautodidacta.es/wp

%Listas anidadas

\documentclass{article}
\usepackage[spanish]{babel}
\usepackage[utf8]{inputenc}
\begin{document}
\section{Anidación de listas simples}
\begin{itemize}
\item Literatura española
\begin{itemize}
\item Luis Landero - El mágico aprendiz
\item Juan José Millás - El mundo
\item Eduardo Mendoza - Mauricio o las elecciones primarias
\end{itemize}
\item Literatura extranjera
\begin{itemize}
\item Gustave Flaubert - Madame Bovary
\item Katherine Neville - El fuego
\end{itemize}
\end{itemize}
\section{Anidación de lista enumerada en lista simple}
\begin{itemize}
\item Literatura española
\begin{enumerate}
\item Luis Landero - El mágico aprendiz
\item Juan José Millás - El mundo
\item Eduardo Mendoza - Mauricio o las elecciones primarias
\end{enumerate}
\item Literatura extranjera
\begin{enumerate}
\item Gustave Flaubert - Madame Bovary
\item Katherine Neville - El fuego
\end{enumerate}
\end{itemize}
\section{Anidación de listas enumeradas}
\begin{enumerate}
\item Literatura española
\begin{enumerate}
\item Luis Landero - El mágico aprendiz
\item Juan José Millás - El mundo
\item Eduardo Mendoza - Mauricio o las elecciones primarias
\end{enumerate}
\item Literatura extranjera
\begin{enumerate}
\item Gustave Flaubert - Madame Bovary
\item Katherine Neville - El fuego
\end{enumerate}
\end{enumerate}
\end{document}

Tremendamente sencillo y con un resultado absolutamente profesional.

Javier Montero

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies