Otra vez con las listas

4, septiembre, 2007

Según nos cuentan en CSSLAB , siempre es mejor prevenir que remediar. Por eso recalca el tema de las listas en HTML. Son bastante útiles, ya que sus propiedades intrínsecas (el que sean elemento bloque y contengan bastante rígido su contenido) las hace muy maleables al momento de estructurar menús. A continuación aclara lo qué son y cómo utilizarlas.

Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a dilucidar cuándo una lista es una lista:

Si creamos una lista y le quitamos sus marcadores (bullets o números) con CSS, entonces probablemente no es una lista

Esto hace ver que nuestro menú con listas no son semánticos. Los elementos de este menú son secuenciales, pero no
necesariamente pertenecen a una lista. Les damos estilos, les ponemos fondos, cambiamos su color con :hover,
pero si le quitamos los estilos, vuelve a ser una lista (ordenada o no) de elementos. No una secuencia. Entonces sí tiene sentido que sea una lista.

En HTML existen 3 tipos de listas:

<dl> definition lists

Las listas de definición corresponden a pares de término y su definición.

<dl>
<dt>Beodo</dt>
<dd>Un beodo es un ebrio, borracho.</dd>
</dl>

<dt> corresponde a un definition term, o en castellano un término a definir. Y <dd> es la descripción de ese término.

<ul> unordered lists

Listas desordenadas son viejas amigas. Se utilizan cuando no importa el orden de los elementos contenidos:

<ul>
<li>vaso</li>
<li>cerveza</li>
<li>sed</li>
</ul>

Aquí da lo mismo el orden de los factores, el que no alterará el producto final.

<ol> ordered lists

Ya las listas ordenadas sí importa en qué orden las pongamos. Por eso por defecto, <ol> se renderiza con números secuenciales.

<ol>
<li>Toma la cerveza y ponla a esfriar.</li>
<li>Prepara tu sed, en 1 hora y media aproximadamente ya podrás saciarla.</li>
<li>Vierte la cerveza helada en un vaso y empina tu brazo hacia tu boca.</li>
</ol>

Aclarados los conceptos, todo esto ayuda que los contenidos tengan más sentido a tus usuarios y principalmente a los buscadores, lo que les asegurará mejores posicionamientos en ellos.

Más información en: XHTML Semántico aplicado a listas

Anuncios

Selección de 45 excelentes diseños para un blog

28, agosto, 2007

smashingmagazine.pngLos de Smashing Magazine han realizado una recopilación con 45 excelentes diseños para un blog, y según comentan:

Diseñar un blog es fácil. En cualquier sitio para su alojamiento, encontrarás siempre un número de plantillas que puedes aplicarse a tu weblog en segundos. No hay que trabajar mucho, no hay jugar con los colores necesario y no se requiere ninguna mente que activa para la presentación. Sin embargo, al final cada weblog se parecer a un determinado blog típico[…]

[…] los diseños enumerados fueron seleccionados por su atención a los detalles pequeños. Los diseños gráficos bonitos y coloridos no hacen un buen blog. El blog necesita una estructura visual sólida, una jerarquía profunda de los elementos del sitio; también tiene que poder construir un puente entre el contenido y su presentación. Para hacer esto, necesitas pensar de la precisión, del minimalismo y del uso sano de la ilustración.

Estos son los criterios por los que han seleccionado los diseños enumerados en 45 Excellent Blog Designs, todo eso sirve para encontrar nuevas ideas que puedes desarrollar en tus propios diseños.

cabana.png

Mis felicitaciones al blog Cabana digital (WordPress), único representante en nuestro idioma que aparece en la lista, un trabajo del equipo de diseño formado José Cabana y Patricia M. de Cabana.


125 codigos útiles

22, agosto, 2007

Juan Pablo de JUQUE Y WEBLOG, nos proporciona una gran lista que es una recopilación de códigos (HTML, CSS, Javascript, y snippets de AJAX) para simplemente inspirarse, copiar, aprender o incluirlos en tu blog. 125 Code Snippets for web designers.


Cien recursos esenciales para desarrolladores Web

9, agosto, 2007

En BLOG VECINDAD… encuentro una lista de todo lo que puedes necesitar si te dedicas al desarrollo web, se trata de 100 Essential Resources for Web Developers. Contiene muchos enlaces a revistas en desarrollo web, blogs, recursos en código, usabilidad, foros, etc.


Dar estilo a las listas ordenadas con CSS

4, agosto, 2007

En BLOGANDWEB, su autor desde hace un tiempo ha estado buscando la forma para dar estilo a las listas ordenas (o listas numeradas) con CSS sin conseguirlo, el objetivo era dar estilo a los números en la lista para diferenciarlos de su contenido y acentuarlos mejor. La solución la encontró en webdesignerwall, que destaca por su sencillez.

Puedes ver la totalidad del artículo con la estructura de código html y CSS, y la explicación en castellano. Puedes ver las muestras del resultado en las siguientes figuras:

lista1.gif

lista2.gif

lista3.gif


Lista de recursos para Photoshop

29, junio, 2007

logo

En BLOG VECINDAD… tenemos una lista muy interesante sobre recursos para Photoshop, tomada de photoshop talent:

Directorios de Tutoriales para Photoshop:

Publicaciones de Tutoriales para Photoshop:

Bancos de Fotografías:

Patrones y Texturas:

Pinceles:

Podcasts:

Otros sitios acerca de Photoshop:


Todos los sitios sobre temas para WordPress en una sola página

28, junio, 2007

En DIGIZEN… encuentro un buen enlace a Witty Sparks que ha publicado un listado de enlaces a directorios de temas para WordPress , donde destaca que los han organizado por grupos: los más hermosos, los minimalistas, los optimizados para “adsense”, los más que se han bajado, entre otras categorías.

Además, tiene un listado de los repositorios tradicionales de temas.

Esta es una referencia indispensable para los que estamos constantemente buscando temas para nuevos blogs. así que directamente a los favoritos.