SigT 2.0

Autor: Armonth | El domingo 30 de julio del 2006 @ 07:00.

Despues de cuatro meses online y aprovechando la actualización realizada a la última versión de WordPress (la 2.0.4) que tiene mejoras de velocidad, corrige bugs y lava más blanco (}:P), aprovecho para lanzar la versión 2.0 de SigT, lo que viene a continuación es una batallita, por lo que se puede resumir brevemente en cuatro puntos:

  1. Nuevo logotipo, nuevo tagline, nuevas ideas en proceso...
  2. Nuevo diseño, inspirado en lo mejor de mis sitios favoritos1.
  3. Actualización a WordPress 2.0.4.
  4. Ya funciona el HTML en los comentarios (he deshabilitado en ellos el Markdown para eliminar problemas).

Nuevo logotipo, nuevo tagline, nuevas ideas

He actualizado a WordPress 2.0.4 y con ello he puesto un diseño que ya lleva varias semanas de rodaje, el logotipo está hecho 100% en XHTML+CSS al estilo de los ASCII Art y es obra de Javier Román de Daedalus Factory.

La gracia de este tipo de logos es que al ser texto son vectoriales, muy rápidos y sencillos, la desventaja es que como ni un solo navegador mantiene de forma uniforme el mismo tamaño al mismo valor (varian incluso cuando usas pixeles) mejor volcarlo en una imagen. Podeis ver el logotipo generado en CSS aquí.

A las preguntas de ¿por qué un buho? ¿por qué bloggers con insomnio? es porque dije "me gustan los buhos, por la noche no duermen como yo, que tengo insomnio" y ahí quedo...

Nuevo diseño

El principal motivo para hacer un diseño nuevo es la cantidad ingesta de información "apegotada" en el diseño viejo. Lo primero que hice fué fijarme en algunos detalles como el de las páginas que, al no poderse ocultar, te las saca todas si no generas el menú a mano.

Otro punto es la cabecera que queria que ocupase poco ya que la anterior ocupaba mucho a lo alto y he recibido varias sugerencias para cambiarlo. Me fije en la de menéame que personalmente me encanta: las secciones más importantes, barra de búsqueda, logotipo y un espacio en blanco para publicidad o lo que se tercie y todo ello en menos de 130px de altura.

Luego le toco a las entradas, el contenido fijando la altura del titular del primer artículo/entrada ensayando con varios amigos de tal forma que fuese lo primero que ve el usuario (y teniendo en cuenta los "mapas de calor" típicos que circulan por páginas de usabilidad). He puesto el avatar del usuario que publica la entrada (y que coincide con el de su ficha) para que se vea rápidamente quién publica qué...

Tocaba también corregir el problema de la meta-información: que si número de comentarios, de trackbacks, trackbaci URI, tags, feed de los comentarios, los comentarios y los trackbacks, etcétera... ¡algunas entradas contienen más meta-información que contenido real!.

Para ello me fije en Yukei: el pone debajo del título una lista con el autor, número de comentarios, etcétera y luego pone un margen para que todo el texto quede a la derecha de esa información. Es una buena forma de tener esa información "dentro" del contenido (asociado al contenido) pero a la vez fuera del mismo. Eso hice yo con el número de comentarios (enlazando al primer comentario de la entrada), trackbacks y un "Comentar" que enlaza al formulario para comentar (incluso con pequeños "efectos gráficos" ya que si los comentarios están cerrados saldrá sin enlace y tachado).

Con los trackbacks, como es costumbre, los he separado. Sin embargo me he decantado por ponerlos en el menú de la derecha al igual que en menéame (la palabra "Trackback" es el trackback URI, solamente muestra el título del trackback/pingback del que te lo ha hecho, añade información extra si los trackbacks están cerrados, etcétera). ¡Ah, por cierto!: los iconos usados para número de comentarios/trackbacks, fecha y etiquetas son del theme K2.

El menú es el gran afectado con el rediseño, antes mostraba más información que 10 entradas juntas, ahora solamente muestra unas entradas destacadas, una sección laboratorio que actualmente está OFF donde pondre proyectos, los archivos, estadísticas de días online / artículos / comentarios / trackbacks (agradecimientos a aNieto2k por la ayuda) y un icono-feed para suscribirse al canal RSS 2.0 de SigT.

Eso en la portada, en una entrada solamente aparecen los trackbacks y la sección de laboratorio.

Por último la parte de comentarios y su formulario no ha cambiado práticamente salvo en colores y que ahora los autores se identifican por el color verde que sale en el borde de sus avatares. Lo mejor es que ahora informa correctamente cuando los comentarios están cerrados, si hay o no comentarios, etcétera.

El formulario destaca porque el tamaño de letra es GRANDE. Caí en la cuenta que me gusta comentar en unos sitios más que en otros porque no usan fuentes de 10px y fuerzan la vista. Esto es bueno porque sitios con mala combinación de colores o que fuerzan la vista para leer no ayudan a que uno repase lo que escribe (y yo soy de los que repasan antes de darle a "enviar"). El detalle lo percibí en La mate por un yogur y ProBlogger.

A todo ello, ahora los comentarios vuelven a poder usar HTML pero he desactivado Markdown ya que el "muy listo" se salta las restricciones de etiquetas (vamos, que con Markdown activo podéis poner <h1> en los comentarios cuando en teoría no se puede :P)

Por último el diseño es XHTML 1.1 valido, el CSS por desgracia no, porque tiene algunos hacks, todos ellos para IE y es que hay desde cosas simples como que para quitar la alineación a las listas normalmente se hace con:

ul {
  padding-left: 0;
}

Pero el IE se lo pasa por el forro de los cojones y toca añadir una clausula extra:

*margin-left: 0;

Resolución, testeo, feedback...

El diseño se ve bien a 800x600 y superiores (a 640x480 ni he probado, seguramente el menú salte a la parte baja), por encima de 1024 el diseño automaticamente se va centrando para que no haya demasiado espacio en blanco, ahí también he sufrido lo mio para hacer funcionar correctamente el alineado del logo (que usa position absolute) con el resto y con IE, en la mayoría de navegadores con un max-width: 1024px; se ha solucionado pero IE eso no lo entiende y ha tocado usar un expression.

El diseño lo he comprobado a 800x600, 1024x768 y 1280x1024 en: Mozilla Firefox bajo GNU/Linux y bajo Windows (Gracias Kazka), Internet Explorer 6 y Konqueror, en todos ellos se ve más o menos bien (bueno... en Internet Explorer 6 no hace ningún antialasing, cambia los bordes "dotted" por "dashed", etcétera, puff...).

Y ahora la pregunta necesaria (¡need feedback people!) ¿Os gusta el nuevo diseño? :)


  1. Inspirado en lo que más me gusta de mis sitios favoritos, en especial la cabecera de menéame (su diseño limpio), Yukei y La maté por un yogur mezclando y adaptando a lo que es un blog. 

Comentarios