Tripix.net

Hace unas semanas que se publico la nueva web del Ayuntamiento de Granada. No le hice mucho caso por falta de tiempo, pero en cuento he tenido un momento para ver qué tipo de rediseño habían hecho… en fín, sin palabras, unas capturas creo que pueden ser reveladoras respecto a cómo se han currado el tema de accesibilidad… a buen entendedor, pocas palabras bastan:

Granada.org en un navegador estándar

mmm… diseño con ancho fijo 800 x 600 optimized

Granada.org desactivando Javascript

Ostia… si no se puede navegar ¿Dónde coj… están los menús?

Granada.org sin CSS

No veo nada…

Granada.org sin CSS y sin Javascript

Me temo que esta gente no sabe lo que es un encabezado… pero conocen a fondo el elemento TABLE

Y este sello??

Sin palabras

Solo recomendar la lectura de este artículo (en inglés) en el que se resumen muy bien cómo funciona el posicionamiento de elementos en CSS.

El artículo aborda de forma sencilla y clara atributos como:

• Display
• Position
• z-index

Y parece ser el primero de una serie…

Por curiosidad profesional he estado mirando los datos que me ofrece Google Analytics sobre el uso de navegadores en algunas de las webs que gestiono. Concretamente mi objetivo ha sido averiguar cuántos usuarios acceden con Internet Explorer 6. Y ese es para mi el dato más importante: el uso de IE6 está todavía en torno al 43%.

Los datos, que no me han sorprendido demasiado, son los siguientes:

Resumiendo:

• Internet Explorer tiene un uso medio cercano al 80%
• La versión más utilizada de IE es la 6, en torno al 43%
• El uso de versiones por debajo de la 6 (5 y 5.5) es casi despreciable

Como siempre que hago posts sobre estadísticas propias, insisto: son datos orientativos, la muestra no es totalmente representativa, pero desde luego dan pistas interesantes.

Reconozco que el título es un poco sensacionalista, pero un poner un post como “recursos para hacerte menús con CSS y HTML sintácticamente correcto y sin javascript” tampoco era una alternativa válida.

Bueno, a lo que vamos, acabo de ver una web donde puedes generarte menús de este tipo y en vez de hacer un post sobre el sitio he pensado que es más interesante recopilar los que a mi más me gustan:

Listamatic

El de siempre, el clásico, el único, el veterano, el del sonido estilo inconfundible. Una colección de menús tanto verticales como horizontales que recojen lo mejor de lo mejor. También incluyen ejemplos de menús anidados.

Más de 50 ejemplos disponibles, con su correspondiente código, a los que se suman tutoriales para aprender el arte de la creación de menús. Es el mejor recursos para aprender a hacer menús que es lo que realmente recomiendo a cualquiera que se quiera dedicar al desarrollo web y un punto de partida excelente. Imprescindible.

Enlace: http://css.maxdesign.com.au/listamatic/

List-O-Matic

Se trata de un generador de menus online basado en los que ofrece el listamatic. Puedes generar tu menú en 3 pasos:

• Define el número de enlaces
• Define el texto, título y url de cada uno
• Elige tu menú

Enlace: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

CSS Menu Maker

Es el que he descubierto recientemente y aunque tiene poca variedad de menús parece que tienen la intención de ir ofertando más opciones. Muy fácil de usar, ofrece diseños bastante interesantes.

Enlace: http://cssmenumaker.com/index.php

Smashing Magazine

Hace unos meses publicaron un post titulado “CSS-Based Navigation Menus: Modern Solutions” donde ofrecían ejemplos de webs que utilizan menús CSS. Únicamente ofrecen el link a los sitios originales y además algunos de ellos utilizan Javascript pero hay que reconocer que hicieron una magnífica selección.

Enlace: Smashing Magazine

[Vía Ajaxian]

Cada vez surgen más herramientas que pueden facilitarle la vida a los desarrolladores web a la hora de hacer sus maquetas en CSS. A rejillas como YUI Grids o Blueprint y herramientas como CSS Sculptor de Eric Meyer o Constantinology se une ahora YAML Builder, que mediante un interesante interfaz realizado en DHTML permite generar maquetas CSS de forma visual.

Vale la pena probarlo aunque solamente sea por ver lo que algunos pueden llegar a hacer con HTML, Javascript y DOM… una herramienta muy currada.

[Vía Sitepoint] Personalmente considero que una de las cosas mas complicadas de maquetar, cuando uno utiliza estándares para dicha labor, son los formularios.

El artículo de Sitepoint al que hago referencia (realmente es un capítulo del libro “The Art and Science of CSS“, en inglés) es el más completo que he leído sobre el tema; resume las mejores técnicas a utilizar en esta tediosa e ingrata labor y te ayudará a crear formularios con elementos estándares y a hacerlos medianamente accesibles.

Resumiendo:

• Utiliza label para etiquetar los campos
• Utiliza fieldset para agrupar bloques de elementos
• Utiliza legend para describir un grupo (o el grupo) de campos del formulario

Pero yo sigo teniendo problemas con los formularios complejos, normalmente usados por los departamentos de márketing de las empresas para intentar obtener multitud de datos de un usuario, en los que la abundancia de opciones con checkbox o radio me obligan a utilizar una tabla (no se lo digáis a nadie) para que la presentación quede más o menos agrupada.

Y no es que no se pueda hacer con layout en CSS, es que hacerlo es muy complejo, costoso en tiempo, y supone una cantidad de atentados contra la limpieza de la hoja de estilo que realmente considero que no vale la pena.