Apr 1, 2011

Furni 75 Theme

¿Sabéis esa sensación de ver fotos de hace unos años, que en el momento crees que tu peinado o tu ropa mola mucho, y al verte tiempo después dices “joder, cómo iba así por la calle…” ? Pues eso me pasa cada cierto tiempo con el theme del blog.

A principios de año se me metió entre ceja y ceja que el anterior diseño ya no me gustaba y lo he tenido que cambiar sí o sí. Así que después de chorrocientas horas de duro trabajo, por fin tengo lista la versión 3 de llops blog.

Evolución del diseño

Home llops blog versión 1 Home llops blog version 2 Home llops blog versión 3

V1. Forni Theme – Home

V2. Forni Dark – Home

V3. Furni 75 – Home

Articulo llops blog V1 Articulo llops blog V2 Articulo llops blog V3

V1. Forni Theme – Post

V2. Forni Dark – Post

V3. Furni 75 – Post

Furni 75 based on Seven Five

El tema está basado en el Seven Five de Jason Schuller, bajo licencia GPL.

Como se puede ver en la demo, este theme está enfocado completamente al contenido social mediante widgets. Así que adaptarlo a un “blog clásico” y limpiar todo el código que no necesitaba no ha sido una tarea fácil (o al menos rápida).

Además, aunque la estructura me parece perfecta, para mí gusto, gráficamente está todo excesivamente “resaltado” (bordes de imágenes muy gruesos, tipografías pesadas, botones muy grandes…). Sin alejarme mucho de la línea principal he intentado llevarlo todo a un terreno más sutil.

Objetivo

Todos los cambios respecto al antiguo diseño tienen un único objetivo: mejorar la lectura. Buscaba un formato en el que pudieras estar leyendo 10 minutos y no cansara (soy consciente de los tochazos que escribo :p).

Así que me he deshecho de la columna de banners y de widgets, he ganado 150px en la columna central, he subido el tamaño de las tipografías, el interlineado y los párrafos, y me he tirado días enteros tocando paddings y margins de cada imagen, tabla, lista o icono para equilibrarlo todo lo posible.

Comentarios

Algo muy tonto que no había podido tener hasta ahora son los comentarios anidados. A partir de hoy 3 niveles para poder responder individualmente.

Además, he activado la opción de gravatar, que nunca me había gustado por culpa de los horrendos iconos por defecto. Pero solucionado, por aquí no veréis al odioso Mystery Man ;)

Seguir comentarios

Prácticamente todos los blogs de wordpress están “cojos” para seguir los hilos de comentarios (porque el feed de comentarios… ¿de verdad lo utiliza alguien?).

Gracias al genial plugin Subscribe to comments, ahora puedes suscribirte a un post en cualquier momento, aunque no participes:

Seguir comentarios

Y una vez suscrito, dispones de un panel muy majo para administrar toda tu actividad:

Tuve que dedicarle unos días para adaptar el plugin a lo que yo quería, pero… mola, ¿no? :)

A partir de ahora, ya no te vas a perder conversaciones tan interesante como esta: Código fuente, ¿se debe entregar?

Código

Sigo con el antiquísimo plugin ig:syntax_hiliter para formatear el código. Aunque está totalmente desactualizado (ni siquiera aparece en los plugins de wordpress.org) y existen decenas de opciones más nuevas, a mí me sigue pareciendo el más elegante.

En su día me cree mi propio archivo GeSHi para AS3, ya que no existe ninguno, y he aprovechado para hacer una nueva hoja de estilos. El resultado:

[as3]
package com.llops.ejemplo {
import flash.display.MovieClip;
import flash.events.*;

public class BolaClass extends MovieClip{
private var _ancho:int = 300;
private var _alto:int = 150;

function BolaClass(){
alpha = 0;
// Crear un delay aleatorio para comenzar
var retardo:Number = Math.random() * 2000;
var t:Timer = new Timer(retardo, 1);
t.addEventListener(TimerEvent.TIMER_COMPLETE, comenzar);
t.start();
}
}
}
[/as3]

También se puede utilizar en los comentarios, y en los anidados queda perfectamente encajado ;)

¿Aún en Google Reader?

Y si a pesar de todas estas maravillosas ventajas todavía prefieres leer desde el lector de feeds, hay un pequeño detalle para ti: Ozh’ Better Feed.

Better Feed

Así puedes saber si hay comentarios y de paso me ayudas a mover los artículos un poco.

Fuera coñas, me parece un plugin súper útil, y sin embargo su popularidad es muy baja…

Un problema

Un consejo muy obvio: todo todo todo el formato mantenlo en un fichero CSS.

Desde siempre, he arrastrado en el blog un gran problema: daba formato inline en el propio post. Por ejemplo, todos los márgenes de las imágenes, o los subtítulos de las entradas, formados por un strong y un underline, entre cosas más puntuales como formato en las tablas, anotaciones, etc.

No había sido consciente de lo que suponía hasta que he aplicado un theme completamente diferente. Y claro, me ha tocado abrir post por post para eliminar todos estos estilos “fijos” y poner clases, etiquetas, etc. Un auténtico coñazo.

Eso sí, he aprendido la lección.

Otros detalles

La tipo del logo y del favicon es la Suti. Como anécdota: es la primera vez que compro una fuente :)

Para el menú y los títulos utilizo la Lato, del impresionante proyecto Google Web Fonts.

Para darle un poco más de movimiento al lab he creado una página mucho más gráfica, y he dejado un random de imágenes sólo en la home:

Random Lab

He actualizado algunos datos desfasados en la página Acerca de, e incluso he cambiado la foto (ahora que los del SubFlash habéis comprobado que no soy un snippet ya no hace falta que me oculte).

Para el formulario de contacto sigo con el plugin Contact Form 7. Si necesitas un “contacta”, no hay mejor opción.

Y a nivel gráfico, si navegáis un poco veréis que hay bastantes detallitos aquí y allí.

¿Y ahora?

Ahora que tengo empresa nueva, página nueva y blog nuevo, me parece que ya no puedo perder el tiempo en nada más. Así que ya sólo me queda volver a escribir artículos de interés.

Lo bueno es que este theme es para siempre. Éste me va gustar toda la vida.

Información del artículo

Post publicado el 01 de April de 2011 a las 23:46 por llops

Categorias: General

Etiquetas: , , , , ,

Comparte

2 comentarios

  • Me encanta!
    yo también sigo con ig:syntax highlighter, algún día podemos unir esfuerzos para intercambiar archivos de template de lenguajes :)

    Felicidades!!!

  • Gracias Joan!
    Si es que somos unos románticos… :) Pues intercambiemos, que yo sólo tengo el de AS3 y con la sintaxis de hace 4 años, que no estará ni el for…each :p

    pd: uoooo mi primer reply