Son muchas las veces que me hubiese gustado personalizar algún Checkbox, bien para hacerlo más grande, cambiar algún color o cualquier cosa para conseguir que llamase más la atención o simplemente que cuadrase mejor con el resto del diseño de la Web. Cuando se intenta hacer esto con atributos de CSS se tarda bien poco en rechazar la idea por que el navegador hace lo que quiere, y además como es costumbre cada navegador hace una cosa diferente.

Hay varias posturas, los - por decirlo de alguna manera - puristas del diseño y la Web acostumbran a decir que lo mejor, en pro de la usabilidad, sería no confundir al usuario en cuanto al uso de estos elementos… para que no le parezcan elementos diferentes en cada sitio que visite, aún siendo exactamente lo mismo.

Y en cierto modo… en alguna ocasión he tenido ese mismo punto de vista, el problema viene cuando la página en cuestión tiene un diseño muy llamativo y los checkbox rudimentarios pueden “romper” el conjunto, evidentemente no sería conveniente modificar el diseño de los checkbox en la intranet de un banco, o en el carrito de compra de una tienda online, pero si es la página de un videojuego, una red social o cualquier otro portal mas destinado a este tipo de ocio, no estaría de más que con un diseño lógico que no buscase confundir a nadie hiciese que los formularios de una página mantengan una “harmonía” con el resto de la página.

Elementos como las áreas de texto ya se pueden personalizar suficiente - aunque como siempre iría bien que todos los navegadores interpretasen de la misma manera - pero los Checkbox y los Radio Buttons han quedado “apartados” en cuanto a diseño, por eso Stéphane Caron ha desarrollado un script que apenas ocupa 2kb, y permite utilizar las imagenes que queramos para modificar tanto Checkbox como RadioButton, afortunadamente funciona en todos los navegadores de uso común.

Desde aquí podéis descargar el script, que necesita jQuery para funcionar.

Su uso es dificilmente simplificable, lo primero que hay que hacer es incluir la librería jQuery - si no se ha incluido ya - el código del script en la cabecera de la página donde se vaya a usar.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/prettyCheckboxes.js" type="text/javascript"></script>

Un detalle importante es que para que el script funcione correctamente todas las etiquetas necesitan el atributo for enlazando con la ID de su checkbox / radio button correspondiente.

Iniciamos el script:

$(document).ready(function(){
$('input[type=checkbox],input[type=radio]‘).prettyCheckboxes();
});

Si solo se quiere iniciar el script con un elemento especifico, se puede hacer así:

$(document).ready(function(){
$('input.myCheckbox').prettyCheckboxes();
});

Una vez ya está iniciado, habría que definir algunos parametros para personalizarlo:

$(document).ready(function(){
$('input[type=checkbox],input[type=radio]‘).prettyCheckboxes({
checkboxWidth: 17, // The width of your custom checkbox
checkboxHeight: 17, // The height of your custom checkbox
className : ‘prettyCheckbox’, // The classname of your custom checkbox
display: ‘list’ // The style you want it to be display (inline or list)
});
});

Si se quieren marcar todos los checkbox que forman parte de un grupo, se puede utilizar la función checkAllPrettyCheckboxes().
Esta función necesita 2 parametros, el primero es una referencia al elemento que está llamando la función - casi siempre es “this” - y el segundo parametro hace referencia al contenedor de los checkbox, como por ejemplo $(’#checkboxDemo’).

<input id="checkbox-all" onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'));" name="checkbox-all" type="checkbox" value="checkbox-all" />

Y ya está, la verdad es que es un buen script que facilita muchísimo el trabajo… y para facilitar aún más dan hasta unas imagenes para facilitarnos la tarea de diseñarlas.

Esta es la página del proyecto prettyCheckboxes, donde se encuentran los mismos códigos que yo he posteado aquí, y además algunos ejemplos (en inglés).

Después de mucho tiempo dudando sobre si debo escribir esto, al final me decido. A pesar de que no se demasiado de música es evidente que estas dos canciones son si no iguales, muy muy parecidas, y he ido preguntando a gente a ver qué opinaba sobre el posible plagio, y la mayoría de opiniones han sido… que sí, es una copia.

En fin, estas son las dos canciones, la de Screwdriver estaba antes que la de Frontkick.
Por cierto, Youth Defense League ya hizo una versión de esta canción.

Skrewdriver - Voice of Britain

Frontkick - Danger

Skrewdriver es seguramente el grupo de RAC más importante que ha habido nunca, y frontkick - que antes formaban antiguos miembros de Oi! The Arrasse - dista bastante de la índole ideológica de Screwdriver, pero aún así parece ser que escuchaban sus canciones.

Acabo de terminar el sexto dibujo vectorizando, aunque este no es 100% vectores, por que al final le he puesto un como fondo foto real, con algunos filtros - aunque he hecho versión 100% vectores - para que quedase mejor, almenos a mi gusto :P. Como nota, he de decir que este dibujo lo he hecho desde Ubuntu con Photoshop, que aunque tiene algunos detalles que me resultan algo incomodos supongo que merece la pena.

He hecho dos fondos de escritorio a resolución 1680×1050 - para pantalla panorámica - que están en la sección Wallpapers y pondré aquí abajo, después de este video, donde muestro más o menos los pasos que he ido siguiendo.

Vectorizando 6, Lucía from Josep Viciana on Vimeo.

Espero alguna que otra critica constructiva, xD

Algunas páginas - por desgracia - utilizan el plug-in de Java, por ejemplo la página de mi banco… y para poder utilizarla tengo que tener instalado el Java que tan poco me gusta.

Hace unos años recuerdo que la liaba mucho para instalar Java, supongo que por que no tenía apenas conocimientos de como utilizar Ubuntu, y como lo utilizaba casi como una sandbox no me importaba ensuciar el sistema.

Ahora que utilizo Ubuntu como sistema principal, voy encontrando maneras aún más fáciles de hacer las cosas, y además bastante más limpias.

Para instalar Java para Firefox en Ubuntu basta con escribir estas lineas en Terminal:
sudo apt-get update
sudo apt-get install sun-java6-jre sun-java6-plugin
sudo update-java-alternatives -s java-6-sun
gksudo gedit /etc/jvm

Y en la primera linea del archivo que se abre, escribir esto:
/usr/lib/jvm/java-6-sun
Cerramos y guardamos gedit.

Si todo ha salido bien, escribiendo about:plugins en la barra de direcciones de Firefox debería aparecer Java(TM) Plug-in.

A pesar de que el desarrollo de Wine está en un punto bastante bueno y sigue mejorando, es normal que hayan algunas caracteristicas que no consiga hacer funcionar correctamente, por ejemplo, cuando se usa Photoshop CS2 la opción Guardar para Web o Save for Web no funciona.

Hay una manera de solucionar esto, dando por supuesto que estamos en Ubuntu 8.04 en Español, habría que cambiar el comando del lanzador que se utilice para abrir Photoshop por esta linea:

wine "c:\Archivos de programa\Adobe\Adobe Photoshop CS2\Photoshop.exe"

En principio con esto debería funcionar la opción de Guardar para Web, a mi como mínimo me funciona.

Parece una tontería pero tiene sentido, y aunque Photoshop se puede utilizar sin esa opción estoy seguro de que mucha gente ya está acostumbrada al atajo Control Alt Shift S, que atajo tan raro y útil xD

En realidad, aunque haya puesto con Ubuntu, esto supongo que funcionará con cualquier distribución, lo único que hay que tener en cuenta es que tiene que estar instalado en Español, por que la ruta que se pone es Archivos de programa, si está en inglés sólo hay que cambiarla por Program Files…