Si eres un fanático de los estándares o simplemente te gusta el diseño web, te recomiendo este link donde se recopilan los sitios que promueven el uso de los estándares y el CSS. La lista es muy completa, creo que están si no todos por lo menos los más populares. Día Chronie.
Por fin entregamos el sitio del Instituto Sonorense de Cultura, fueron muchas noches de leer el manual del CMS, y de aprender CSS por supuesto jeje, a prueba y error.
Bueno, lo más importante de este rediseño es que es casi tableless, (el CMS renderea cosas que no pude corregir), es cierto, cuesta más trabajo pero los resultados no pueden dejar de tomarse en cuenta. Código limpio y más fácil de mantener, separación de contenidos y presentación :), además el sistema de tags que usa el Article Manager herramienta responsable del funcionamiento del sitio hicieron que este rediseño fuera mmm… entretenido por decirlo de una manera, ya sabes, cuando descubres algo que siempre andabas buscando. Hay cosas del Article Manager que me gustan como su sistema de tags, similar al de Movable Type, pero tiene otras cosas que no me gustan para nada, por ejem. cuando ingresas una nota hay un editor WYSIWYG, que genera tags tan despreciables como los -font- jeje, todo lo que le hagas al texto a través del editor ese lo genera en HTML tags, osea colores, tamaños, etc. por fuera de eso todo es blancura ;).
El sitio usa 3 templates diferentes básicamente, el que usa el index general, el que usan los index de cada categoría y el que usan los artículos individuales. Antes cada template pesaba 45 kb, hoy pesan ¡5kb! y tienen más elementos en su funcionalidad que antes.
Hablando del diseño le dimos una revisada a las fuentes utilizadas y le dimos prioridades a los diferentes elementos de información, ya dentro de una nota la estructura en la información es más marcada, en el index y las categorías necesitamos desplegar más info en menos espacio, es por eso que los titulos no son tan grandes. Por el contrario en las notas individuales podemos jugar más con los elementos, meterles más diseño, lo que hice aquí fue poner el título grande, para que en cuanto entres sepas de que se está hablando, después sigue el sumario que es una pequeña introducción a la nota que da información al lector y que le sirve también para ver de que se trata, y ya si está interesado seguirá leyendo en el texto de lectura que es a donde va a caer después de los dos primeros elementos. Aquí puedes ver de que hablo.
En general el sitio ahora es más liviano, más usable además de cambiarle la cara al ISC que buena falta le hacía ya a dos años del primer diseño.
Al parecer es muy fácil de implementar y tienes el control del radio de la curvatura, interesante.
Este es un dolorcito de cabeza con el que todos nos hemos encontrado :p
Aquí puedes verlo funcionando.
Aquí el truco:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;}
El reto era obtener el mayor número de layouts basados en el mismo markup, cada uno con CSS y HTML válido, sin hacks y compatibles entre browsers. El resultado es un set de 40 layouts funcionales y listos para descargarse. Por: Alessandro Fulciniti
Muy buen recurso, la verdad es que muchas veces me he quebrado la cabeza tranto de hacer esto o lo otro, pero aquí vemos ejemplos funcionando y utilizando recursos al mínimo.
CSSmanía, directorio de sitios web diseñados en CSS, nos ha listado :). Yo envié uno de mis sitios, pero alguien (no se quien pero ¡gracias!) envío otro de nuestros sitios y también fue listado.
CSSmanía es uno de los directorios de sitios en CSS con más actividad en la actualidad, un sitio que debe estar en tus bookmarks definitivamente. Ha tenido gran éxito ya que dos grandes en esta área andan un poco flojos últimamente. stylegala.com y cssvault.com
Vía Material Gris me encontré que ExplodingBoy publica dos sets de menús hechos completamente en CSS, aquí uno, aquí el otro, el set completo te lo puedes descargar aquí. Muy recomendables la verdad.
Excelente recurso, 12 templates hechos totalmente en CSS y listos para usarse, gracias a Monorom.
(vía Digg)
De diseño limpio e intuitivo esta aplicación web nos ayuda a hacer pruebas con las variantes de las fuentes, tipo de letra, kernel, interlineado, tamaño, etc. todo para seleccionar las mejores características para tu proyecto.
La herramienta funciona gracias a las maravillas del CSS y con la ayuda de javascript. ¿Porque no había salido algo como esto antes? eso nadie lo sabe, pero a veces pasa que las buenas ideas están frente a nosotros y no las vemos, hasta que alguien con visión (conocimientos y muchas horas libres) toma la idea y la lleva a la realidad. Sin duda se convertirá en una herramienta muy usada por las personas que desarrollan web.
Directo a mis bookmarks ;) – Typetester -
Alguna vez quisiste que el footer se quedara pegado al bottom de la página?(así), en realidad creo que no es tan importante, ni crítico para la usabilidad de un sitio, pero ya si por “diseño” o capricho lo quieres hacer aquí hay una guía paso a paso cortesía de SD. Ya sabes… hacks y tweaks eso sí, todo en CSS.
Creo de todas formas que hay que saber como se hace, uno no sabe cuando un cliente le pedirá algo así. :p