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


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.


Listamatic, casi todos los menús de navegación mediante CSS

4, May, 2007

listamatic.png

Si se te han acabado las ideas en lo que a listas se refiere, Max Design nos proporciona una buena colección con muchas combinaciones. Se trata de Listamatic, un típico recurso de recopilación de enlaces y utilidades, que tomando como ingredientes las listas y las hojas de estilo, hacen de él una buena referencia para ver las posibilidades de los CSS.


Crear menús utilizando listas y CSS

19, abril, 2007

David en COREDUMP, nos enseña en un tutorial paso a paso como crear un menú horizontal y un menú vertical utilizando el recurso de las listas. Una vez tenemos el concepto básico claro, el resto es usar nuestra imaginación para realizar menús impactantes.

muestra de los menus


Las mejores listas de sitios Web 2.0

10, febrero, 2007

Con el ritmo de aparición de nuevos servicios de todo tipo basados en la web, dentro de lo que genéricamente se ha dado en llamar web 2.0, resulta muy difícil estar al día y poder separar el grano de la paja.En este sentido, me ha llamado la atención el directorio Go2Web20.net, y muy en especial su “libro”: en la parte inferior derecha del sitio tenemos varias opciones, todas ellas igualmente interesantes: además del consabido sumario RSS, una integración en Del.icio.us y una extensión para Firefox. El enlace “The Book” es el que hace aparecer una sola —enorme— pàgina con el listado completo de sitios, con una explicación sumaria de cada uno.

Esta es una composición con los logos de todos los sitios actualmente incluídos en el directorio (haciendo clic sobre ella aparece una versión a mayor tamaño para ver los detalles.) El diseño en sí de este tipo de sitios es un topicazo como una catedral, pero este ya es otro tema: la tiranía de las tendencias y las modas, la necesidad de ir con el rebaño para llegar a algún sitio…

Claro que hay muchos otros sitios que recopilan listas de sitios 2.0, como la de wwwhatsnew, el blog de Bob Stumpel (everything 2.0), Web 2.o Slides (¡una presentación com más de 1400 sitios!) o la de Real World. Son listas enormes, casi inabarcables y en cambio continuo: un vivo retrato de lo que es la web.

Y por supuesto, no olvidemos que cada vez más existe la tendencia de integrar varios (o muchos) servicios en una sola web (Mashups y sitios externos que aprovechan las API de otros servicios, widgets …) También podemos encontrarlos listados y clasificados, como en el Mashup Dashboard.

Personalmente utilizo mucho Netvibes: aunque tiene sus limitaciones, en él puedes incluir un montón de elementos que te ahorran mucho tiempo a la hora de empezar el día de trabajo. En un solo sitio echas un vistazo al correo, últimas noticias en sumarios RSS, y mil cosas más. La página personalizada de Google se está convirtiendo rápidamente en algo así. Le falta algo de atractivo visual, pero está en el buen camino.

Visto en: Trial Bloggy