SigT 2.0
Publicado el Domingo 30 de Julio del 2006 @ 19:00 por Armonth.
- 13
- 0
Comentar
Despues de 4 meses online y aprovechando la versión 2.0.4 de WordPress, lanzo la versión 2.0 de SigT, lo que viene a continuación es una batallita, por lo que en resumen es:
- Nuevo logotipo, nuevo tagline, nuevas ideas en proceso…
- Nuevo diseño, inspirado en lo mejor de mis sitios favoritos.
- Actualización a WordPress 2.0.4.
- Ya funciona el HTML en los comentarios (he deshabilitado en ellos el Markdown para eliminar problemas).
Cómo resumen digamos que me he inspirado en lo que más me gusta de mis sitios favoritos, en especial he extraido lo mejor de menéame (su diseño limpio) y adaptado a lo que es un blog.
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 quedo así…
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 un detalle: Las “páginas” no pueden ocultarse y te las saca todas si no generas el menú a mano.
Fuentes de inspiración
En un principio el diseño está bastante inspirado en el de menéame, yukei.net o La mate por un yogur, entre otros.
Cabecera
Lo primero fué tener una cabecera que ocupara poco ya que la anterior ocupaba mucho alto y he recibido varias sugerencias para cambiarlo.
Me fije en la de menéame que personalmente me encanta: Barra de búsqueda, secciones más importantes y/o informativas, logotipo y un espacio en blanco que puede servir para banners especiales, avisos importantes o simplemente publicidad y todo ello en menos de 130px de altura.
Entradas/Contenido
Luego le toco el turno a las entradas, tocaba fijar la altura del título del primer artículo/entrada a lo primero que ve el usuario, para ello hice varias pruebas con amigos…
He puesto el avatar del que publica en SigT que coincide con el mostrado por el autor en su ficha para de un vistazo ver a quien pertenece cada entrada y ahora tocaba solucionar otro asunto:
La información mostrada dentro de cada entrada a veces es más que la entrada propía, que si número de comentarios, trackbacks, Trackback URI, tags, feed de los comentarios, comentarios, trackbacks, etc…
Me fije en Yukei: El pone debajo del título una lista con el autor, número de comentarios, etc y luego pone un margen para que todo el texto quede a la derecha de esa información.
De está manera, uno puede tener esa información interesante (o no) fuera del texto pero manteniendola unida a la entrada. He puesto el avatar, el número de comentarios (enlazados directamente al primer comentario para saltarte la entrada), el número de trackbacks y un enlace para ir directamente al formulario de comentar.
De esta forma se enlazan rápidamente las tres partes que pueden interesar: Entrada (que se ve entera en la portada o enlazando el título), comentarios y formulario.
Ya de paso he hecho algunos “efectos” visuales, si los comentarios están cerrados el enlace “Comentar” se convierte en un texto normal y tachado. Las etiquetas las he conservado al final del cuerpo de la entrada.
Tocaba el turno de los trackbacks, como de costumbre los he separado sólo que está vez me he decantado por ponerlos en el menú al igual que menéame (la palabra “Trackback” es el trackback URI, solamente sale el título del trackback/pingback del que te lo ha hecho, si los trackbacks están cerrados se te informa de ello, si pasas el enlace por encima verás la fecha en que te han hecho el trackback).
Los iconos usados para número de comentarios/trackbacks, publicado el y etiquetado son del theme K2.
Menú
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 (Gracias 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.
Comentarios y formulario de comentar
La parte de comentarios no ha cambiado prácticamente salvo en colores y que ahora los autores se identifican por el color verde del borde de su avatar, lo mejor es que ahora informa correctamente cuando los comentarios están cerrados, hay comentarios, no hay comentarios, etc.
El formulario ha variado en que el tamaño de letra elegido es GRANDE, me fije que me gustaba comentar más en unos sitios que en otros por que no tenían esa fuente de 10px por defecto que se ve pero fuerza la vista. El detalle lo percibí sobretodo en La Mate por un Yogur y ProBlogger.
Ahora en los comentarios HTML vuelve a estar activo pero el Markdown no ya que el muy listo se salta las restricciones de etiquetas (vamos, que con Markdown activo en los comentarios podeis poner <h1> cuando en teoría no se puede :P).
Estándares, hacks y otras guarradas
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 “ahí” y toca añadir una clausula extra:
*margin-left: 0;
Resolución
El diseño se ve bien a 800×600 y superiores (a 640×480 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.
Testeo
El diseño lo he comprobado a 800×600, 1024×768 y 1280×1024 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 (aunque IE 6 sin antialasing, cambiando los border dotted por dashed, etc, puff…).
¿Os gusta el nuevo diseño? :)
13 Comentarios (feed)
-
Enrique nos comenta:
Bonito diseño, te quedó muy bien :D. No sé si soy yo, pero en los comentarios antiguos, no carga el gravatar por defecto de los comentaristas, parece que la imagen no se encuentra.
-
Armonth nos comenta:
Corregido, gracias…
-
MorPhaGo nos comenta:
Increíble. Magnífico. Muy buen diseño, aunque yo cambiaría el tamaño de letra que hay aquí en los comentarios y en los formularios en general. Se ve muy gordete.
Un saludo, buen trabajo.
-
Armonth nos comenta:
Morphago enviame por favor una screen especificando navegador + resolucion + so al mail…
Si te refieres al tamaño de lo que escribes en el formulario (inputs, textareas, etc) decir que es aposta :)
-
MorPhaGo nos comenta:
Si, me refería al tamaño de letra de los formularios de los comentarios, es enoorme.
-
Galadrim nos comenta:
Está bien el diseño, sencillo y sin complicaciones.
Quizá se hiciese mas “cálida” y cansase menos la vista, si el lado derecho de la web, tuviese otro color (vas leyendo y te encuentras blanco, blanco, blanco…xD )
Por lo demás, está bien.
Un saludo
-
maeghith nos comenta:
me gusta, me gusta el verde :)
PD: nada que ver con ninguna cerveza
PPD: que se te cuelan los spammers ;) -
felipe.lavin nos comenta:
Muy bien, es un honor poder servir con un granito de inspiración ;)
¿Has pensado en hacerlo público?
-
Armonth nos comenta:
Felipe lo he pensado, pero creo que no: Es muy dependiente de su casa, sólo que le quites uno de los chorrocientos plugins (algunos propios) empieza a petar…
Le tengo que meter una de function_exists() que da miedo…
Más adelante quizá, lo que sí que tengo que hacer es publicar el anterior el cual tiene menos trabajo de modificar, aunque no creo que guste tanto ¿o sí? :-P
PD: El Spam se coló por que con el cambio la API Akismet estaba puesta pero no actua si no le das a “Actualizar API Key”, vamos ‘cositas’ que uno aprende…
-
Lii Xan nos comenta:
Muy bueno el diseño, buen trabajo y si sacas el anterior diseño que sepas k de base lo voy a utilizar ;)
-
aNieto2k nos comenta:
Enhorabuena tio!
Espero que este dure más tiempo :D
Un saludo y enhorabuena por el diseño.
-
Armonth nos comenta:
Joder aNieto, lo dices cómo si cambiara cada mes de diseño :D
Aunque hubo una época en la prehistoria de la WWW (webs en HTML 3.0 + Dreamweaver + yo uno de los pocos seres humanos que conoce el validator del W3) que hacía un nuevo diseño cada 10 días en un par de horas, incluso dos en Flash…
Este diseño espero no cambiarlo salvo correcciones en MUCHO tiempo, a ver cuanto de equivocado estoy… :P
Gracias a todos :)
-
Gallego nos comenta:
He de decir que me encanta como te ha quedado. Enhorabuena, de verdad.