Las listas en HTML (1)

JMiur [E]

Las listas son uno de las etiquetas más comunes que usamos en una página web. Cuando comenzamos a aprender este lenguaje, suele parecernos que son algo "poco interesante" y a decir verdad, durante mucho tiempo fue así porque ¿para qué puede servir una lista si no es para hacer listas?

En los últimos tiempos, vaya uno a saber por qué, las listas comenzaron a tener un papel importante; alguien las sacó del olvido y se han transformado en las nuevas estrellas de las web. Blogger las usa para muchas cosas, desde lo "normal" como los archivos hasta lo insólito como los perfiles; en WordPress es aún peor, casi todo es una lista, hay un abuso de esas etiquetas y eso causa problemas a la hora de usarlas porque es un elemento que tienen una serie de propiedades especiales y porque los navegadores suelen interpretarlas de manera diferente.

Hay tres tipos de listas:

<UL> </UL> crea una lista desordenada (sin numeración).
item 1 item 2 item 3	item 1 item 2 item 3	<ul type="disc\|square\|circle"> <li> ....... </li> </ul>

El atributo type define el gráfico que se muestra y por defecto es un bullet pero los navegadores los muestran de formas diferentes o simplemente ignoran ciertos tipos.

Por defecto, la etiqueta UL tiene las siguientes propiedades CSS:

display: block;
font-family: Times New Roman;
font-size: 12pt; /* lo que equivale a 16px */

/* se separa de arriba y de abajo el equivalente a la altura de la fuente */
margin: 1em 0;

/* se separa de la izquierda el equivalente a dos veces y media el ancho de la fuente */
/* esto lo hace para dejar espacio para colocar el gráfico indicado en type */
padding: 0 0 0 2.5em;

list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<OL> </OL> crea una lista ordenada (numerada)
item 1 item 2 item 3	item 1 item 2 item 3 item 4	<ol type="1\|a\|A\|i\|I" start="n"> <li> ....... </li> </ol>

El atributo type define el tipo de numeración y también depende de los navegadores:

1 muestra números(1, 2, 3, 4, ...)
a letras en minúscula (a, b, c, d, ...)
A letras en mayúscula (A, B, C, D, ...)
i números romanos en minúscula (i, ii, iii, iv, ...)
I números romanos en mayúscula (I, II, III, IV, ...)

El atributo start indica el inico del contador de la lista.

Por defecto, la etiqueta OL tiene las mismas propiedades que la etiqueta UL excepto su tipo:

list-style-type: decimal;

En ambos casos, tanto en lista ordenadas como desordenadas, la regla indica que su contenido sólo deben ser etiquetas <LI> </LI>

Los atributos que pueden usarse son los mismo:

<li type="disc|square|circle"> </Ii>
<li type="1|a|A|i|I" start="n"> </li>

Tienen una particularidad; no hace falta que estén dentro de listas; podemos utilizarlos de manera independiente en cualquier parte aunque, en este caso, el resultado podrá variar con los navegadores y, en algunos casos, esto es completamente ignorado.

Por defecto, la etiqueta LI tiene las siguientes propiedades:

margin: 0;
padding: 0;
display: list-item;
line-height: 1.25em;
height: 1.25em
width: 100%
list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<DL> </DL> es la llamada Definition List.
ITEM 1 DEFINICION 1	ITEM 1 DEFINICION 1 ITEM 2 DEFINICION 2	<dl> <dt> ....... </dt> <dd> ....... </dd> </dl>

En principio, fue creada para armar listas de definiciones. Cada item de este tipo de lista se coloca en una etiqueta DT (Definition Term) y su definición dentro de una etiqueta DD (Definition Definition) que va inmediatamente después de la anterior.

Por defecto, la etiqueta DL tiene las misma propiedades que UL pero padding es cero. Además, las propiedades de la lista (list-style-position, list-style-type y list-style-image) no se aplican.

Hay dos etiquetas más que crean listas pero, aunque siguen funcionando, ya no se utiliza: <DIR> </DIR> y <MENU> </MENU>. Ambas son iguales que UL, no tienen atributos y sólo pueden contener etiquetas LI. Ambas se consideran depreciadas.

Otra etiqueta asociada a las listas y que tiene muy poco uso es la llamada List Header: <LH> </LH>

Se utiliza para colocar el título de la lista y debe ser colocada inmediatamente después de UL, OL o DL

<ul>
<lh id="nombreUnico" class="nombre"> ....... </lh>
<li> ....... </li>
</ul>

¿Realizas respaldos de tu blog?

Es muy buena la pregunta que se hace Alejandro

. Deberíamos empezar a acostumbrarnos a utilizar esta nueva posibilidad que apareció junto con muchas otras y que quedó un poco relegada frente a la conmoción de los comentarios incrustados [1 - 2]

Esta función la encontramos si accedemos al blog a través de Blogger Draft y allí vamos a Configuración | Básico:

Hacemos click en Exportar Blog y ya nos encontraremos en una nueva página donde se nos advierte que lo podemos hacer ya sea para mover el blog a otro servicio o para guardarlo en nuestra PC (más información).

La inteligencia superlativa de los desarrolladores de Blogger ha hecho que JUSTO al lado del enlace para realizar el backup se encuentre la opción de suprimir el blog así que hay que mirar bien lo que hacemos o bien guardar el enlace directo en los marcadores lo que nos evitará dolores de cabeza:

http://draft.blogger.com/export-blog.g?blogID=XXXXXXXX

Eso es todo, nuevo click en Exportar Blog y se descargará un archivo XML que contendrá los posts y los comentarios y cuyo tamaño dependerá de lo que tengamos publicado.

La descarga es muy rápida, el archivo generado es un texto así que, aunque sea "grande" (10 megas en mi caso), el proceso no tarda más que unos segundos.

Hace unos días, Juan de BlogHotPoint me preguntaba sobre las posibilidades de hacer un backup y le sugerí que probara esta nueva función. Lo hizo y amablemente me envió un mail detallando los resultados de su experimento que consistía en exportar e importar a un blog de pruebas. Resumiendo:

Se exportaron e importaron los posts.
No se recuperaron los comentarios.
Todos los post "importados" se los debe republicar uno por uno.

Lo de los comentarios es significativo ya que, aunque es bastante engorroso leer ese archivo XML, los datos de los comentarios están allí.

A esto, podríamos agregar alguna advertencia que puede inducir a error. El backup sólo es de la base de datos, en ese sentido, es similar a otros sistemas como WordPress aunque un poco más limitado ya que los datos personales y de configuración no son guardados (sólo las entradas y los comentarios). El resto, debe hacerse de otro modo: la plantilla se debe respaldar de manera individual lo mismo que cada uno de los códigos de los elementos de la sidebar y del footer.

La guerra de las jotas

Wallpapers (árboles)

aBowman: Gadgets/Widgets porque sí

Drag and drop usando Scriptaculous (2)

El Drag and Drop de script.aculo.us tiene dos partes, arrastrar (drag) y soltar (drop).

Los elementos arrastrables se definían así:
new Draggable(IDelemento, opciones);

Para controlar lo que hace un elemento cuando lo soltamos luego de arrastrarlo, usamos este método:
Droppables.add(IDelemento, opciones);
donde el ID es el del elemento destino es decir, donde soltaremos algo que arrastramos.

Así, sin ninguna opción, si lo soltamos dentro del área, el objeto desaparece de nuestra vista:

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar');
Droppables.add('bloqueSoltar');
</script>

Este es el resumen de las posibles opciones a utilizar:

Hoverclass es la clase CSS optativa que será agregada al elemento contenedor cuando algo sea arrastrado dentro de ella.

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar', {revert: true});
Droppables.add('bloqueSoltar', {hoverclass: 'claseHover'});
</script>

Accept es también el nombre de una clase CSS pero con esta, podemos definir cuales son los elementos que podemos arrastrar y soltar en ese área.

En el ejemplo, uno de los bloques es aceptado y el otro no:

<div id="demo1" class="esteSI">MOVER</div>
<div id="demo2" class="esteNO">MOVER</div>
<div id="boqueSoltar"> </div>
<script type="text/javascript">
new Draggable('demo1', {revert: true});
new Draggable('demo2', {revert: true});
Droppables.add('bloqueSoltar', {accept: 'esteSI', hoverclass: 'claseHover'});
</script>

Aprovechemos el ejemplo del puzzle que nos muestra la Wiki de Scriptaculous para crear algo más y ver de qué se trata todo esto:

<script type="text/javascript">
(function() { 
var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
Sortable.create('puzzle', {
tag: 'img', overlap: 'horizontal', constraint: false,
onUpdate: function() {
info.update('Hasta ahora hubo ' + (++moves) + ' movimiento' + (moves > 1 ? 's' : ''));
if (Sortable.sequence('puzzle').join('') == '123456789')
info.update('Puzzle resuelto en ' + moves + ' movimientos').morph('felicitaciones');
}
});
})();
</script>

<style type="text/css">
#puzzle {margin: 0 auto; width: 450px;} 
.felicitaciones {color: #FF9933 !important;}
</style>