Recontra conocidas ya son los [menúes construídos con listas de ítems][1]. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF para lograr esos enlaces y nodos. Bueno, lo primero es el código HTML. Básicamente se compone de una lista con y algunos tienen sublistas, como verán en el ejemplo a continuación:

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero sí molesta. Las columnas se van a la cresta, enfin. Felizmente para esto existe una solución, y un hack.

Viejos tiempos esos de la etiqueta . Aunque me he deparado más de alguna vez en el presente siglo con sitios donde ponen un GIF y luego lo mapean creando links de navegación. Pésimo. Con Flickr se le dió un nuevo uso al método de agregar zonas sensibles dentro de imágenes con información anexa, lo cual se vió con muy buenos ojos cuando se necesita mostrar detalles de ciertas zonas dentro de las imágenes.

Últimamente me he puesto a escribir más artículos teóricos que prácticos. Siento desilucionar a algunos quienes entran a CSSLab por soluciones a sus problemas diarios en sus proyectos web, pero me interesa bastante difundir conocimiento, para así prevenir futuros problemas. Siempre es mejor prevenir que remediar. Bueno en este caso, volveré a tocar el tema de las queridas 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, por ejemplo. Pero como ando semántico por estos días, quiero aclarar qué son y cómo utilizar las listas. Comencemos por lo básico. Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a delucidar 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:

Aunque ha estado bastante de moda, me ha sido complicado dar una definición o hacerme parte de alguna sobre la Web 2.0. Creo que por lo mismo, porque ha sido tanto lo que le han dado que me hace ser reticente a unirme a ello. Enfin, más que los [estilos gráficos][1] o una manera diferente de construir sitios webs, me gusta el cambio de comportamiento en el usuario que ha conllevado, pasando de una web empresarial, una vitrina de información, a una web social donde el usuario toma el poder y toma la información como propia. Con la Web 3.0 me pasa algo similar, no existe aún un concenso pero sí está la idea: una [web semántica][2] donde se comporta tal como un ecosistema que evoluciona de acuerdo al contenido que alberga. Lo de semántico tiene mucho que ver, ya que lo hace universal, le da un sentido a cada elemento o atributo que contiene y lo potencia en los buscadores, que deberían de procesar todos estos avances y entregárnoslo como resultados más precisos y acertados. A raíz de eso, les tengo un reto. A ver si conocían las siguientes etiquetas HTML, y su significado:

Por primera vez en este milenio, nuevos elementos son agregados a HTML. Nuevas etiquetas de estructura, nuevos elementos de línea, nuevas maneras de agregar objetos y nuevos elementos interactivos son algunas de sus promisorias bondades. El desarrollo de HTML quedó estancado en 1999 con HTML 4. Desde ahí hasta ahora, la guerra de browsers no ha terminado: IExplorer con una gran parte de la cancha cubierta y Firefox y Opera dando la batalla por ganarse su merecido espacio. Desafortunadamente han dejado de lado una buena parte de los consejos de la W3C sobre los estándares, y se han esforzado en ofrecer tabs, password managers y lectores de RSS integrados, aparte de agregar skins y temas customizables. Era hora de hacer algo por el fondo mismo: el código fuente. Viendo que nada pasaba por parte de la W3C (quienes siguen enfocados con SVG, XForms y MathML), recientemente, 3 de los mayores fabricantes de browsers: Apple, Mozilla y Opera se unieron para desarrollar una versión mejorada del clásico HTML. Más reciente aún, la W3C despertó y escuchó al grupo y la nueva HTML 5 porfin ve una luz. Pero no se preocupen, no han reinventado la rueda.

#22 – 14 Agosto 2007

Para muchos, se justifica definitivamente el uso de hojas de estilo para construir sitios web al momento en que se potencia la gráfica con el código generado por el desarrollador. Este es el caso que muestro a continuación, donde con un truco entre imágenes y código CSS, podemos fácilmente generar mostradores gráficos de porcentajes, los que dependiendo de la creatividad se verán muy atractivos. De ninguna manera lograremos medidores dinámicos, donde la barra se mueva indicando alguna actividad. Con esta técnica podremos a través de porcentajes reales y absolutos entregadas mediante CSS crear diferentes classes, cada una con una instancia de porcentaje que queramos mostrar. Para un mejor entendimiento, el ejemplo de lo que se mostrará:

En mi afán por siempre facilitarme la vida y el trabajo, me tomé el tiempo y la molestia y desarrollé mi segundo widget. El tema esta vez: Comentarios Condicionales. Lo que sucedió es que nunca me aprendí las diferentes maneras de utilizarlos, y como ocurrió con mi widget anterior, siempre entraba a Quirksmode.org para copiarlo desde ahí. Finalmente, con este widget tienes todas las maneras de utilizar comentarios condicionales en tu proyecto web, a un click de distancia. Una vez más, gracias a Apple por hacerme la vida más fácil.

Una palabra algo rara esta del inherit. Y de hecho, algo con el que desde hace poco no habia visto su importancia. Por lo mismo me interesa compartirla en este momento en que por fin sale el sol y calienta algo de este horrible frio. Inherit = heredar. Como sabrán, en CSS existe muchas propiedades que heredan sus características a sus hijos (child). Por ejemplo, si definimos en el (como suelo hacer) que la familia tipográfica que utilizaremos será Helvetica, esto será heredado por todos los elementos que estén dentro del : body {   font-family: Helvetica, Arial, sans-serif; }