Slider en cabecera para tema twentyeleven en WordPress

Muchas veces he utilizado como tema base para crear un template para WordPress, el tema twentyeleven, que viene por defecto en la instalación de la última versión.

Siempre había querido hacer un slider con las imágenes que se muestran en la cabecera y que son configurables desde Apariencia / Cabecera. El caso es que el otro día tuve que hacerlo para un cliente y, antes de ponerme a hacerlo desde cero, busqué un poco por si alguien lo había hecho ya, no es cuestión de ir reinventando la rueda porque sí.

El caso es que encontré un plugin que añade una opción más a la ventana de configuración de la cabecera para que esta se muestre como un slider, utilizando para ello el plugin para jQuery Nivo Slider (qué casualidad, porque yo iba a poner ese).

El caso es que después de instalar el plugin y de realizar un par de ajustes ya me aparecían las imágenes de la cabecera pasando de una a otra.

Ahora solo me hacía falta configurar mis imágenes para que salieran estas en lugar de las que vienen por defecto en twentyeleven.

Abrimos el archivo functions.php y al final del todo lo que haremos será:

  1. Deshabilitar las imágenes de la cabecera que vienen por defecto y…
  2. Habilitar nuestras imágenes habiendo subido previamente las nuevas al servidor via ftp

Para esto lo que habrá que hacer, como ya he dicho, es escribir el siguiente código al final de functions.php:

Con esto lo que hacemos es borrar las antiguas imágenes y poner cinco nuevas.

Mucha gente utiliza los child themes, o temas basados en otros, para crear modificaciones de estos. Yo no lo hago pero más que nada porque no me he puesto nunca. Simplemente me gusta enredarme con el código y crear un nuevo tema a partir del original, aunque igual lo de hacer un child theme sea mejor opción.

Espero que le sirva a alguien 😀

Act: Suelo dejar para el final el tema de hacerlo todo compatible a versiones antiguas de IE. En este caso IE7 no carga las imágenes. Por lo visto el utilizar la opción auto insert del plugin no le gusta mucho al dichoso IE y no carga bien. La solución es cambiar el código de carga de las imágenes directamente en el archivo header.php. Donde pone esto:

Por esta línea:

Con esto ya cargará bien las imágenes en IE7 y nos podremos olvidar del tema…

+ info: http://wordpress.org/extend/plugins/header-image-slider/
http://wpti.ps/functions/replace-remove-header-image-twenty-eleven-theme/

Rotación mediante CSS3 / Webkit

Hace un tiempo estuve viendo el proyecto Stampaxx, una buena colección de sellos para indicar de que va tu proyecto. Me pareció una idea genial, un diseño super cuidado y encima gratis. Me gustó tanto que decidí echar un vistazo a los autores: Thomas y Mike

La web de Thomas un sencillo carrousel con sus proyectos, sencilla y atractiva, genial. Pero lo que me llamó la atención fue algo que ví en la web de Mike. Yo navego siempre con Chrome y me impactó un montón cuando, al pasar el ratón por el logo de acceso a twitter, este giraba 180 grados. Me puse a investigar y vi que lo hacía mediante CSS, así que intenté hacerlo con mi logo…

Primero lo que hay que hacer es cargar el logo con un background en lugar de cargar la imagen desde html:

y luego indicarle a los navegadores webkit la rotación que tienen que hacer y cuando la tienen que hacer:

Esto funciona en mi caso teniendo el logo de esta forma en mi código html

Esto, evidentemente va contra todos mis principios de validación de código ya que esto solo vale para navegadores webkit, pero es que queda tan chulo…

Generador @font-face por fontSquirrel

Creo que ya he hablado de la magnífica fontSquirrel alguna vez, el servicio gratuito de tipografías online que compite directamente con Google Fonts y además, hinchando pecho, David contra Goliat. Pero lo que encontré hace unas semanas le da una vuelta de tuerca al servicio de los de la ardilla.

FontSquirrel tiene un generador de fuentes para web gratuíto que hace que se lleve el gato al agua. No se si Google Fonts u otros como DaFont lo tienen, pero sin lugar a dudas este se lleva la palma.

Sólo tienes que introducir tu tipografía y darle a generar, en unos segundos tendrás tu fuente lista para web, con todos los estilos y ejemplos posibles.

Creeeeeema.

http://www.fontsquirrel.com/fontface/generator

Cómo bajar las fuentes de Google en OSX

Siguiendo los pasos indicados en la página inicial del proyecto Google Fonts en Google Code me bajé todas las fuentes para poder utilizarlas en mis diseños.

Estos son los pasos:

  1. Bajar e instalar Mercurial según la versión de OSX (Lion – 10.7, Snow Leopard – 10.6, etc…)
  2. Abrir el Terminal (Aplicaciones/Utilidades/Terminal) y poner la siguiente orden:

    Donde destino es el nombre del directorio donde se guardarán las fuentes

Con estos dos simples pasos empezará a descargarse toda la base de datos de fuentes del proyecto. Una vez finalizada si sale una nueva fuente en Google Fonts solo con utilizar la siguiente orden en el Terminal estando dentro del directorio destino se actualizará el proyecto bajando solo las nuevas fuentes:

+info: http://code.google.com/p/googlefontdirectory/

jScrollPane – scrollbars con jQuery y CSS

Para el próximo proyecto que vamos a hacer en casa vamos a hacer web, evidentemente. Para ello ya estoy diseñando con Photoshop los diferentes elemento que tendrá la web. Buscando por internet inspiración prodigiosa encontré la web de cargo collective, donde tienen un buen porrón de webs chulas.

Una de ellas es Apollo11 que contiene fotos antiguas del proyecto Apollo de la NASA.

En fín, yo a lo que iba es que me gustó mucho el scrollbar que tienen en esa web. Tirando del hilo me encontré con que estaba hecho con un plugin para jQuery, jScrollPane. Ah! Mi querido jQuery, que haría yo sin tí…

Así es que ya tengo esa parte de la web diseñada, ahora habrá que ver si, después de maquetar, me funciona bien en todos los navegadores, pero en principio debería quedar tal que así:

Google WebFonts v2

Que tiemble MyFonts, FontSquirrel y demás servicios online de tipografías chulas. Ya está aquí Google WebFonts v2.

Con esta aplicación web puedes hacerte una colección de las tipografías proporcionadas por Google y luego descargártela. Estaría bien que luego se pudieran compartir por seguir el rollo social y esas cosas que tanto se llevan ahora con la guerra que se llevan con google plusone y todo el cotarro.

En fin, igual he dado alguna idea…

Alternativa a Lorem Ipsum

Para diseñar cualquier cosa siempre uso Lorem Ipsum para poner texto fictício. Si ya estás harto de usar siempre el mismo texto puedes meterte en fillerati y usar algún texto de un libro famoso.

Solo están en inglés, pero como texto fictício cuela. Además el diseño en CSS3 + HTML5 + JS hace de la página un punto de inspiración bastante chulo.

http://www.fillerati.com/

@font-face con ie

@font-face está salvándome la vida últimamente en bastantes proyectos, haciendo que mi código sea más fácil de leer por motores de búsqueda y simplificando mucho la forma que tenía de hacer web, por no hablar del ahorro de KB en imágenes que solía gastar en estos menesteres del diseño tipográfico.

El caso es que el otro día, acabando la web de Uhuru Labs me metí en mi máquina virtual de windows donde hago las pruebas en Internet Explorer. Siempre había leído que IE fue de los primeros navegadores en adoptar @font-face y siendo así le di un voto de confianza y probé a ver como quedaba la fuente en este navegador al final de la maquetación. Cual fue mi sorpresa cuando ví que no se veía la fuente, si no que estaba cargando la siguiente de la lista de fuentes colocadas en font-family.

Me puse a buscar como un loco y dí con la solución. Para variar, Internet Explorer va por el buen camino hasta que se le cruzan los cables y decide no utilizar el estandar que utilizaría todo el mundo para importar fuentes, poniendo la fuente y el formato en el que está en el campo @font-face del fichero .css. Esto por ejemplo lo entiende un navegador normal.

@font-face {

font-family: Impact;
src: url(../font/impact.ttf) format(‘truetype’);

}

No, lo que espera Internet Explorer es que el diseñador utilice un tipo de fuente casposo llamado Embedded OpenType (EOT), creado por ellos por supuesto, para hacerle la vida un poco más complicada al mundo.

Con lo que, para que los niñatos que entran en la web con Internet Explorer la vean decentemente (siento si eres uno de ellos, de verdad que lo siento mucho…) hay que poner, además de las líneas que he puesto arriba otras tantas como estas:

@font-face
{

font-family: Impact;
src: url(../font/impact.eot); /* EOT para IE */

}

Para hacer esto, previamente habremos tenido que crear el fichero .eot a partir del .ttf. Yo esto lo hago con este conversor de .ttf a .eot. Rápido, sencillo de utilizar y directo al grano. Estas miniaplicaciones me gustan mucho.

Act: Estas miniaplicaciones me gustan mucho cuando funcionan. Quito el enlace porque me he vuelto loco para averiguar que el .eot que me había generado el conversor para una web que estoy haciendo era defectuoso, con lo que no cargaba bien la fuente en ie8.

He buscado un poco y lo mejor que se puede hacer es instalarse una aplicación para windows (creada para w98!), asquerosa en cuanto a diseño pero que funciona. Genera el .eot y este se carga perfectamente desde ie8. La aplicación se llama WEFT. Una vez instalada, la aplicación hace un escaneo de las fuentes instaladas en el sistema (ojo, porque si la fuente no la tienes instalada no podrás seleccionarla) y cuando termina lanza un wizard para generar una fuente. Hay que seguir todos los pasos. Yo personalmente no se ni para que sirve la aplicación, porque pide un montón de cosas raras como en que url vas a usar la fuente y tal. Yo he puesto carlosfaria.info y todo lo demás por defecto. El .eot generado lo lee ie8 perfectamente.

Si alguien necesita ayuda con el WEFT que pregunte que estaré encantado de ayudarle.

+info: Font Face Support in IE by Webfonts.info

Pictos

Con cada vez más encima el tema de CSS3 y sus aplicaciones la gente se está poninedo las pilas para que se usen todas sus características y así tengamos una web más ágil y ligera.

Es el caso de Drew Wilson y su typeface Pictos, ideada para empezar a prescindir de imágenes en los proyectos web donde es necesaria una buena interfaz. Usando @font-face podemos cargar el typeface y usar las letras como si fueran imágenes, con lo que el resultado es una web muy chula en interfaz y muy ligera en cuanto a código.

Un par de ejemplos en su web (No contiene imágenes, es todo texto, aunque no lo parezca)

http://pictos.drewwilson.com/

Processing

Ayer por la noche, a eso de la una de la mañana, después de salir un poco a cenar, me dio por hacer un wallpaper. Pensé que sería una buena idea hacerlo con Processing, así aprendería un poco y empezaría a crear un par de imágenes.

Quería hacer un wallpaper con circulos de varios tamaños, con diferente opacidad y que uniera una línea a cada centro. En 10 minutillos tenía hecho el script principal y en otros 10 hice un poco de retoque de colores, tamaños y demás. Hice también que se regenerara la imagen al presionar el botón izquierdo del ratón y que se guardara al presionar el derecho.

Aún tengo que retocar un poco el script y además es algo bastante simple (y seguramente no muy original), pero por algo se empieza.

/**
* Ellipses desktop wallpaper maker.
*
* First script for processing
* Carlos Faria | 2010 | http://creativecommons.org/licenses/by-sa/3.0/
*
* http://carlosfaria.info
*/
//Variable declaration
int maxNumEllipse = 20;
int maxSizeEllipse = 200;
int nEllipse = maxNumEllipse;
int nSizes = 5;
int[] sizeEllipse = new int[nSizes];
int prev_x = 0,prev_y = 0;
//Setup
void setup()
{
size(1280, 800);
smooth();
noStroke();
for (int i = 0; i < nSizes; i++) {
sizeEllipse[i] =int(random(maxSizeEllipse));
}
}
//Draw
void draw()
{
background(int(random(51)));
for (int i=0; i< nEllipse; i++)
{
int x=int(random(width));
int y=int(random(height));
int sizeSingle = sizeEllipse[int(random(nSizes))];
fill( random(255), random(255), random(255), 150);
ellipse(x,y,sizeSingle,sizeSingle);
if(i!=0)
{
stroke(57,50);
line(prev_x, prev_y, x, y);
noStroke();
}
prev_x = x;
prev_y = y;
}
noLoop();
}
/* Redraw when left mouse button pressed. Every click a new desktop wallpaper.
*  Right Mouse Click saves image.
*/
void mousePressed()
{
if (mouseButton == RIGHT)
{
save(“ellipseDesktop.png”);
}
else
{
nEllipse = (int)random(maxNumEllipse);
if(nEllipse==0) nEllipse=maxNumEllipse;
redraw();
}
}

download script: processing.pde (zip)

Unas muestras de lo que puede conseguir el script y un par de modificaciones con Photoshop descargables desde Picasa. Los wallpapers están hechos para mi maquina, un MacBook, con lo que la resolución que utilicé es la que mejor me va (1280×800). Con un simple cambio en el size se pueden hacer wallpapers para la resolución deseada, además de poder cambiar el número de circulos, la opacidad, el tamaño máximo de los circulos, etc…