draw9patch en OSX no funciona – Android SDK

El otro día me puse a crear varias imágenes 9patch para la aplicación para Android que estamos haciendo en UhuruLabs. Al intentar arrancar draw9patch mediante la consola me daba el siguiente error:

El problema es que en la descarga del SDK no se incluía un fichero .jar que contiene la clase SwingWorker. La solución es descargar dicho .jar y ubicarlo en el sitio que toca. En este caso, este es el fichero a bajar: swing-worker-1.1.jar y hay que dejarlo en tools/lib/ dentro del directorio donde se encuentre el SDK.

+info:
http://mangohq.com/2010/12/how-to-fix-draw9patch-in-android-sdk-version-8-0-1/
http://groups.google.com/group/android-developers/browse_thread/thread/eb53f751f8361766/20dd69642e76c7b8?pli=1

jQuery en Magento

Un ratito he estado dándole vueltas a por qué al intentar añadir un producto al carro desde Magento el enlace no hacía nada. La url del enlace era una llamada a una función javascript con lo que estirando un poco del hilo con la herramienta para desarrolladores de Chrome he detectado que algo pasaba con jQuery.

Por lo visto si usas jQuery con Magento tienes que indicar en el header que no entre en conflicto con otros frameworks. Para esto simplemente hay que poner esto al final del head.phtml:

Hay otras formas pero esa a mí me ha valido.

+info
++info

SetLocale en PHP

Hace poco tuve un problema con el setlocale en PHP. Tengo instalado un plugin, hecho por mi, en una instalación de WordPress que tengo en mi ordenador, con un servidor local.

El plugin funcionaba en local a las mil maravillas, ya que con el setlocale de php cambiaba los idiomas de acuerdo a la selección de idioma del usuario:

setlocale(LC_ALL, $code_locale);

Donde $code_locale lo saco de la información del lenguage seleccionado por el usuario de otro plugin, WPML, del que ya comenté algo el otro día.

El caso es que al subir mi plugin al servidor de producción, no se mostraban bien los días de la semana. De hecho siempre se mostraban en inglés. Haciendo un poco de debugging con echos comprobé que, haciendo una llamada a setlocale con el segundo parámetro a 0:

$code_locale = setlocale(LC_ALL, 0);

el $code_locale que me estaba devolviendo era una simple “C” y no algo como “es_ES” que es lo que me esperaba.

Leyendo un poco por el manual de setlocale en inglés, me enteré de que el sistema estaba en POSIX (supongo que tendrá que ver que el servidor sea un Linux) y por eso PHP me devolvía una “C”.

Un poco más de investigación me llevó a la conclusión de que con ponerle “.UTF8” después del código del lenguage que quería sería suficiente, con lo que quedaría por ejemplo para francés:

setlocale(‘fr_FR.UTF8’);

y aquí la función que he acabado usando:

Enlaces en wordpress multiidioma con WPML

Para la última página que estoy haciendo me pidieron que esta fuese multiidioma. Al estar haciéndola con WordPress instalé el plugin WPML para crear todo el contenido en diferentes idiomas.

Me surgió un problema entonces, y explico la situación. Desde ciertas páginas se requiere acceder a otras páginas que están en el idioma adecuado. En este caso estos accesos debían hacerse desde el contenido del template de cada página y no desde un menú. Por ejemplo, si tengo una página inicio y desde esta quiero ir a una página hija, contacto,  de una llamada nosotros:

Inicio -> Nosotros / Contacto

En mi caso el menú solo iba a a tener un nivel con lo que a Contacto solo se podría acceder añadiendo un link en el template. Pero no podía poner el texto tal cual ya que la traducción iba a hacerse posteriormente y no se en que idioma. Además el problema no está en el propio texto del enlace, ya que se podría haber solucionado con una llamada a la función para localización de temas:

_e(‘Contacto’, ‘domain’);

El problema es que quería que tanto el texto del enlace como la dirección fuese adecuada al idioma. Para esto WPML tiene una función genial que cambia el enlace de acuerdo al ID del elemento que estás traduciendo y al idioma que vayas a utilizar.

icl_link_to_element(ID, type, text, arguments, anchor);

Donde :

  • ID es el identificador de la página/entrada/etiqueta/categoria a donde quieres ir.
  • Type es el tipo que podrá ser post, page, tag o category
  • Text es el texto que quieres para el enlace, pudiendo usar aqui la función de localización __()
  • Arguments, argumentos opcionales pasados por GET
  • Anchor, no tiene mucho sentido pero puedes poner que en vez de el enlace en cuestión utilice otro a capón

En fin, problema resuelto, WPML se encarga (si tiene la traducción de la página) de traducir los enlaces al idioma adecuado.

+ info: http://wpml.org/documentation/support/creating-multilingual-wordpress-themes/hard-coded-theme-links/

Actualización a iOS SDK 4.1

Para uno de los proyectos que estamos desarrollando en Uhuru Labs creamos una aplicación para iPhone. En esta es necesaria la introducción de números decimales con lo que pensamos que estaría bien tener un teclado numérico con coma decimal para la introducción de dichos datos. Para nuestra sorpresa hasta la versión 4.1 del SDK no se incluye un teclado de estas características con lo que decidimos buscar alguna teclado custom para este propósito. Buscando esto dimos con esta página donde se explica como crear un teclado custom para tener simplemente números y coma decimal. En esta misma página y nada más empezar a leer se nos comunica que en la versión 4.1 del SDK para iOS ya existe un keyboard especial que se dedica a estos menesteres.

Al estar desarrollando con el SDK 4.0 decidimos que lo más conveniente era instalar el nuevo SDK y utilizar el ya implementado teclado antes de desarrollar uno custom.

Dicho y hecho, descargamos desde la web de desarrolladores de Apple el nuevo SDK, e instalamos. Al abrir nuestro proyecto nos encontramos con un par de errores. El primero era que el proyecto estaba definido para Base SDK Missing y al intentar compilar daba un error diciendo:

base sdk missing there is no sdk with the name iphoneos4.0

Por lo visto el proyecto estaba apuntado todavía al SDK 4.0 cuando el programa de instalación de la 4.1 sobreescribe el 4.0 y lo borra del mapa. Lo que hay que hacer para solucionar esto es acceder a Project / Edit Projet Settings y una vez en la ventana de configuración cambiar la entrada Base SDK a IOS Device 4.1.

Una vez corregido este error y al intentar compilar se nos mostraba el siguiente error:

Code Sign error: The identity ‘iPhone Developer’ doesn’t match any valid certificate/private key pair in the default keychain

Parece ser que si pones como Base del SDK a IOS Device 4.1, en la entrada Code Signing Identity de la configuración del proyecto te pone por defecto iPhone Developer. A no ser que te hayas apuntado a la red de desarrolladores de iOS no tendrás un certificado en tu keychain con lo que no podrás compilar. Para arreglar esto simplemente selecciona la opción Simulator en la barra principal de tu proyecto en Xcode, y ya te compilará sin problemas pudiendo utilizar las últimas funcionalidades del nuevo SDK.

Supersized

Para la última actualización que hice de la web de MUT Design querían que una imagen ocupara completamente la pantalla. Para esto me puse a buscar por internet algún plugin para jQuery dando con Supersized, un sencillo plugin que permite hacer precisamente esto.

Puse un div después de cada una de las imágenes para que, poniéndole un postion:absolute este quedara por encima de la imagen y pudiera ahí poner texto o lo que hiciera falta.

Una de las cosas que me llevó un poco de cabeza fue como saber si la pantalla con la que se estaba viendo la página era cuadrada o rectangular, ya que entonces la imagen debería de cambiar ya que su ratio también cambiaba. Para ello hice dos copias de las imágenes, unas con ratio 1280×960 y otras con ratio 1280×645. Luego mediante jQuery detecto el ratio a aplicar de acuerdo a la pantalla con la que se está visualizando la web, cargando unas imágenes u otras.

El código utilizado para realizar el cambio de las imágenes es este:

En este código lo que hago es cambiar el atributo src de las imágenes haciendo que apunte a una imagen en un subdirectorio donde están las imágenes iniciales, con lo que dependiendo del ratio se cargan unas u otras.

jQuery Novice to Ninja

Hace unos tres meses, cuando España estaba jugando la semifinal de la copa del mundo, la gente de Sitepoint hizo una oferta en la que cada equipo estaba asociado a un libro en pdf y cuantas más fases pasaba el equipo, más barato era el libro, hasta que el equipo que ganaba el campeonato hacía que su libro fuera gratuito durante un dia.

El libro asociado a la selección española fue jQuery Novice to Ninja y yo me lo compré cuando España estaba en semifinales, con lo que pagué por el libro unos 8€. Al final resultó que me lo podía haber sacado gratis pero por 8€ valía la pena y realmente lo necesitaba y resultó ser una gran compra ya que es mi punto de referencia en cuanto a jQuery se refiere.

Ayer estaba haciendo una cosa con la web de Rethink Marketing y me puse a buscar por internet. Di con una página que es el libro en pdf tal cual. Te lo puedes bajar si tienes cuenta en scribd.com. No se si será legal ni cuanto tiempo durará pero merece la pena hacerse una cuenta. Además te ahorras los 29.95$ que cuesta en pdf…

http://www.scribd.com/doc/38198961/2010-jQuery-novice-to-Ninja-1

Un pedazo de libro de jQuery online y gratuito. Que más se puede pedir…

Ordenación de imágenes con jQuery

En el proyecto que estoy haciendo para la empresa de estudios de georadar he hecho un apartado de administración en el que he incluído un par de secciones, entre ellas una de imágenes. En ella doy la posibilidad de subir imágenes para que sean mostradas en el frontEnd.

Como se que esta gente me lo acabará pidiendo he hecho que las imágenes puedan ser ordenadas. Y que mejor forma para ordenar una lista de imágenes que utilizar un drag&drop con jQuery.

Buscando por internet he encontrado que la jQuery UI tiene implementada una función que hace esto en una lista desordenada (<ul>), el método sortable(). He buscado un poco más y he encontrado esta página http://jsbin.com/oqani/10 donde se muestra de forma clara como utilizar dicho método.

Al hacer esto, y siguiendo los pasos de la página, se crea un array con los identificadores ordenados (identificadores que previamente he puesto en cada uno de los elementos de la lista). Con lo que simplemente hay que pasarle a php la lista de identificadores y actualizar la base de datos.

Esto último lo he hecho via AJAX ya que me parecía el método más cómodo y limpio de ordenar los identificadores de cada una de las imágenes.

Funciona genial. Si alguien tiene dudas de como implementar todo el sistema ya sabeis.

Act: No lo voy a dar por terminado todavía. Voy a intentar crear un placeholder cuando hago el drag, a ver si me sale.

Act2: No ha sido dificil el tema del placeholder, y queda bastante mejor

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…