A pedido de dosdedos y Mariano Luque, que ayer estubo en el evento del MMUG y me pidio un par de enlaces para empezar con esto de CSS, nace este post con los recursos que tengo agendados… los cuales me sacan muchas veces del agua. Espero les sean de utilidad.

Para leer:
Throwing Tables Out the Window - Un interesante artículo de Douglas Bowman, en el cual plantea el rediseño de Microsoft.com sin tablas. (versión en español)

Porqué el diseñar con tablas es estúpido: problemas definidos, soluciones ofrecidas - Una forma muy interesante de hacernos ver la realidad del diseño con tablas.

¿Por qué maquetar con estándares? - Muy buen artículo de Alzado sobre esta temática.

Referencia:
W3C: Guía Breve de CSS

Guía de referencias para CSS 2

Hojas de Estilo en Cascada, nivel 2 revisión 1. Especificación CSS2.1. Recomendación del 25 De Febrero De 2004 del W3C. (Formato PDF)

Ejemplos:
Todos estan en ingles, pero son entendibles.

Diseñando un sitio de 3 columnas en XHTML y CSS

Sombras con CSS - Muchos ejemplos sobre diferentes tipos de sombras.

Transparencia en CSS, para Internet Explorer (IE), Mozilla y Safari.

RollOver con CSS.

Menú de imágenes con CSS.

Mapa de imágenes con CSS.

Centrado horizontal y vertical con CSS.

Hace pocos minutos que volví de la reunión en La Voz del Interior, en la cual estuve con Franco Piccato (Editor de Contenidos Multimedia), el Ing. Marcelo Rizzi (Encargado del área de sistemas) y Marcela (Área de sistemas).
El objetivo era plantearles los resultados que había obtenido con el prototipo del sitio de “La Voz” basado en XHTML y CSS.

Desde ya que estoy muy agradecido que hayan dedicado tiempo en escucharme, con lo cual me di cuenta que las ganas de mejorar y hacer cosas nuevas… están.

Empecé comentándoles como había surgido la idea de hacer este prototipo (la parte I de esta “historia”), en el medio intercalamos un poco con los inicios del MMUG Cba y sus objetivos, derivando en el tema que nos había reunido: Los beneficios de realizar el sitio de La Voz con estándares.

Los números que tenía en la carpeta no podían pasar desapercibidos y derivar en la siguiente inquietud de parte del Ing. Rizzi: ¿Cómo se implementa esto? Y ahí es donde vinieron los “problemas”.

El sistema de gestión de contenidos que usan hoy fue realizado en 1.999, por lo cual, varias cosas son bastantes difíciles de adaptar a los objetivos de la propuesta que les presente.
Son concientes de las falencias a nivel código que tiene el sitio actual, por lo cual, son temas que van a ser contemplados para la nueva versión.

Desde mi punto de vista, hoy La Voz se ha convertido en una empresa muy grande, a lo mejor demasiado, como para permitirse tomar decisiones rápidas. De afuera probablemente parezca algo fácil de solucionar con un poco de efectivo, pero hoy termine de comprender que en este tipo de empresas las decisiones no siempre dependen del bolsillo del “dueño”.

Para concluir (por ahora) acordamos en seguir con un contacto más fluido, sobre todo para esta etapa de futuro rediseño, que todavía no se sabe que rumbos va a tomar.

El lunes, después del evento del MMUG, voy a publicar los datos obtenidos de este “análisis”, los archivos y el feedback obtenido en la presentación.

El el segundo evento del MMUG Cba hice una breve introducción al CSS para sondear un poco como estábamos de conocimientos y sobre todo, de interés sobre el tema.
La respuesta fue muy positiva en tanto que la gente reconoció que si bien sabia que había muchas ventajas en el uso de CSS para el diseño de sitios webs, no se había detenido a implementarlo.

El tema es que probablemente la mayoría no sabia cuales eran las verdaderas ventajas, y se me ocurrió que tal vez hacer una demostración con un caso real. En ese momento se me vino a la cabeza el famoso artículo de Throwing Tables Out the Window (versión en español) de Douglas Bowman en el cual comentaba los beneficios de la optimización de código y ponía como ejemplo el sitio de Microsoft, mostrando cuales serian las ventajas que obtendrían si basaran su sitio en CSS en vez de tablas. Podría haber presentado ese informe, pero me pareció que no iba a ser relevante por el hecho de que seguramente los asistentes a las reuniones del MMUG Cba no son asiduos visitantes del sitio de Microsoft.

Por lo cual creí conveniente buscar algo con lo cual estubieramos familiarizados y que tuviera un verdadero provecho hacerle esta “optimización”.

Días después, renegando para buscar unos artículos viejos que había publicado en La Voz, me di cuenta que tenia en frente uno de los sitios mas visitados de Córdoba, en el cual no hay nadie que no haya sufrido algunos momentos navegándolo. Teléfono en mano, me comunique con Franco Piccato (Editor de Contenidos Multimedia de La Voz del Interior y coordinador de los equipos de trabajo de los portales www.lavozdelinterior.com.ar y www.cordoba.net) para comentarle mi idea para la charla.

Después de varios minutos explicándole de que se trataba, se mostró muy interesado, no solo por el tema, sino por una implementación real. Me puso en contacto de inmediato con el responsable de la parte de tecnología del sitio web, quien me termino de contar todas las peripecias del sitio actual, y los inconvenientes que posee. Acordamos una reunión para esta semana, en donde le voy a llevar una muestra de la versión CSS de La Voz.

El fin de semana termine la maqueta y me puse a hacer números sobre líneas de código y bytes, los resultados son muy interesantes.

El lunes voy a presentar los resultados en la charla y luego vendrá un post por estos lados con un resumen del debate, y claro esta, los archivos para que podamos comparar los resultados. Espero en un futuro, estar haciendo el post sobre la implementación real.

La gente de Peachpit nos envio (al MMUG CBA) de obsequio el libro Stylin’ with CSS: A Designer’s Guide (publicado en Abril del 2005), y como soy el encargado de estas cuestiones dentro del grupo, tuve el honor de traerlo para casa.

Desde Usabilidad… de Nielsen, que no leia un libro con tantas ganas. Sin dudas Charles Wyke-Smith ha sabido comprender como es mejor explicar estas cuestiones, sin entretenerse en aspectos teóricos (aunque revisa los aspectos más importantes y explica de forma clara los términos más técnicos utilizados en CSS).

Desde el sitio del libro, es posible descargar todos los ejemplos citados dentro del mismo. Tambien hay un par de links interesantes y erratas.

La versión en inglés tiene 275 páginas, separadas en 8 capítulos: xhtml. Introducción al CSS. Fuentes y texto. Posicionando elementos. Layout básicos. Layout avanzados. Creando componentes de interfaz. Construyendo sitios web.

Si estás empezando, este libro seguramente te despejará muchas dudas; y si estas en un nivel intermedio, podes encontrar trucos realmente útiles. En el sitio de Cuspide no esta disponible, me voy a dar una vuelta por las librerias de Córdoba y en cuanto tenga info de donde comprarlo actualizo el post.