Otro Blog Geek

¿Por qué otra librería que hace lo mismo?

Hace poco tuve que terminar de darle forma a un proyecto con Joomla! una de las cosas que más trabajo cuesta es darle estilo a un formulario usando CSS. Probé un par de soluciones como FancyForm y CRIR pero ninguna se adaptaba al código generado por Joomla, así que no me quedó más remedio que escribir mi propio script que hiciera lo propio.

Como funciona.

mooSmartForms está inspirado en otras librerías como CRIR y FancyForm, por lo tanto usa el mismo mecanismo. Mediante Javascript oculta los controles del formulario y añade un estilo para el control desactivado y otro para el control activado a la etiqueta asociada al control.

La librería permite aplicar una clase CSS a los elementos. Hace uso de mootools, de ahí el “moo” del nombre. Para que nuestro código sea “estilizable” tiene que tener las siguientes características.

• Cada checkbox o radio input necesita tener un elemento label asociado a su id.

Listo no hay más requisitos. A continuación un ejemplo de como sería ese código “estilizable”.

Para que el script haga su trabajo hay que insertarlo en la página y además necesitamos mootools.

Un pequeño ejemplo del aspecto que podemos conseguir con la librería. Ejemplo de mooSmartForms

Aquí tenéis mooSmartForms para descargarlo y usarlo como queráis. Tiene una licencia MIT, así que podéis hacerle todas las “perrerías” que os apetezca. Si queréis personalizar el estilo solo tenéis que editar el fichero mooSmartForms.css

Soporte.

He probado mooSmartForms con los siguiente navegadores:

• Internet Explorer 6 y 7
• Firefox 2
• Konqueror
• Safari 3 ( gracias a Álvaro por el testeo )
• Opera

Si conseguís que funcione en otro navegador agradecería que me lo hicierais saber :D. Aunque también se agradece un aviso con cualquier error que encontréis o con problemas que se me hayan pasado.

Para futuras versiones.

• Estilos para el resto de elementos de los formularios.
• Posibilidad para discriminar los elementos que queremos “estilizar”.
• Capacidad para añadir efectos a las transicciones entre los estados de los elementos.
• Posibilidad de elegir el nombre que queremos darle a las clases CSS de los elementos.

Para terminar.

Si encontráis algún error o algún problema podéis dejar un comentario en el post. Sin necesitáis añadir código al post, por favor, utilizad esta web.

Créditos.

Las imágenes que se usan para el estilo de ejemplo pertenecen al tema de iconos silk icons que tiene licencia Creative Commons.

Estos días me he tenido que pelear bastante en serio con Google Maps y Google Local Search. Necesitaba un mapa que permitiese buscar una dirección y que pudiera, una vez encontrada la dirección, guardarla en una base de datos.

Por suerte Google Maps permite hacer cosas así con poco código aunque de todas maneras me tocó pelearme durante un par de días con su API hasta que conseguí encontrar lo que quería. Casi todo lo necesario se encuentra en la documentación de su API, el único problema es que necesitas saber exactamente lo que buscas antes de poder encontrar algo. En este enlace está la ayuda de Local Search, que aunque no es demasiado extensa tiene algunos ejemplos interesantes.

Mis requsitos exactos eran los siguientes:

• Un mapa con un cuadro de búsqueda
• Un sistema para poder moverse por los resultados de la búsqueda de forma sencilla para el usuario

En este caso particular solo necesitaba las coordenadas del centro del mapa una vez que el usuario ha encontrado lo que buscaba. Este dato se copiará en un campo oculto de un formulario para poder guardarlo en una base de datos. En el ejemplo se mostrarán las coordenadas en un DIV junto al mapa.

Una vez que sabemos lo que necesitamos nos ponemos manos a la obra. Vamos a repasar las herramientas que vamos a usar:

• Lo primero que necesitamos es una key para acceder al API. Para ello visitamos esta dirección. Lo único necesario para conseguirla es una cuenta en Google, sirve la que se usa para acceder a GMail.
• Como vamos a hacer un uso intensivo de Javascript es una buena idea buscarse un ayudante. En mi caso he echado mano a la librería mootools 1.11 por que es con la que mejor me llevo, pero imagino que sirven otras librerías del mismo estilo como jQuery o prototype. El motivo para usar este tipo de librerías es que permiten moverse libremente por el árbol DOM del documento HTML y capturar eventos que ocurren en él de forma sencilla. Dos tareas que vamos a necesitar para nuestro ejemplo.
• Por último no nos puede faltar nuestra navaja suiza para el desarrollo web: Firebug ya que nos permitirá depurar y testear nuestro Javascript de forma sencilla.

Aquí podéis encontrar el ejemplo terminado y aquí os lo podéis descargar. Tiene una licencia MIT, así que podéis hacer lo que queráis con él, aunque agradecería un aviso si lo usáis para cualquier cosa, simple curiosidad
Por último unas cuantas aclaraciones. He intentado comentar el código lo más claramente posible, si tenéis cualquier duda podéis preguntar en los comentarios e intentaré responder. Si tenéis que añadir el código al post, por favor, hacedlo aquí (aquí tenéis una ayuda por si no sabéis usarlo) y añadid un enlace en el post.

He comentado el codigo linea por linea para los que, como yo, no tengan ni idea de Javascript, mootools o Google Maps. Espero que a ellos les pueda servir como ejemplo de lo que se puede hacer con estas 3 tecnologías juntas.

Hoy me ha surgido un problema bastante tonto con una página web que estaba terminando de diseñar para un cliente. Uno de los requisitos es que el cliente necesitaba un cuadro de texto en el que insertar una descripción en texto con formato. Hasta ahí todo bien, hasta que me he dado cuenta de que el cliente no sabe ni tiene por qué saber formatear un texto en HTML. Buscando un poco en Google he encontrado TinyMCE ( DEMO ).

TinyMCE es un editor HTML WYSIGYG ( What You See Is What You Get ) programado en Javascript que se integra en páginas web de forma rápida y sencilla. Convierte los <textarea> en editores completamente funcionales y muy configurables. Una lista de algunas de sus características:

• Soporte para varios navegadores.
• Extensible mediante temas y plugins.
• Soporte para diferentes lenguajes.

Al final parece que el cliente no se va a tener que pelear con HTML… menos mal.

Por cierto, ¿ he dicho ya que tiene licencia LGPL ?

Llevo unos días jugando con jQuery. Ya he dicho en algún post anterior lo mucho que me ha sorprendido la facilidad de uso y la potencia de esta librería. Por ahora solo he podido jugar un poco con los selectores y los efectos, aún no he tenido oportunidad de usar las herramientas de las que dispone, tanto para facilitar el uso de AJAX como para muchas otras cosas. De todas formas aquí va un ejemplo, un poco tonto, eso sí… de lo que se puede hacer con jQuery de forma muy sencilla.

Ejemplo de jQuery

[tag]programacion, javascript, jquery[/tag]

En un post anterior ya hablé de jQuery, lo usé para que los enlaces de OBG incluyan un icono a la izquierda que indique cuando salen del blog.

jQuery.noConflict();
jQuery(document).ready(function(){
                jQuery("a").not("[@href*='otrobloggeek.com']").css("background", "transparent url(/blog/wp-includes/images/link-externo.png) no-repeat");
                jQuery("a").not("[@href*='otrobloggeek.com']").css("padding", "0 0 2px 18px");
});

Este es el código en cuestión. Es una pequeña demostración de la potencia que nos brinda esta librería. Uno de los puntos fuertes de jQuery son los selectores, que nos permiten recorrer el árbol DOM del documento XML en cuestión; en nuestro ejemplo es HTML. jQuery nos permite mezclar selectores CSS con XPATH, con lo que podemos seleccionar cualquier elemento de la página de forma sencilla. Además, la documentación es bastante completa.

Yo he tenido algún quebradero de cabeza al intentar usarla por que uno de los plugins de OBG usa Prototype, otra librería similar a jQuery y ambas usan el mismo atajo para los selectores: $. Por suerte la documentación de JQuery explica qué hacer en estos casos.

Por cierto, el código de ejemplo, traducido a lenguaje natural sería algo así como: "Selecciona todos los enlaces cuyo destino no contenga 'otrobloggeek.com' y 'ponlos guapos'".

[tag]javascript, programacion, jquery[/tag]

He introducido algunos cambios light en el estilo del blog y ya de paso le he echado un ojito a jQuery; una librería Javascript que nos hace la vida más fácil.

• Un blockquote algo más "bonito" ( al menos para mi gusto ). Aquí os dejo el archivo .xcf de Gimp por si os gusta :D. Para incluirlo en la página hay que añadir algo parecido a esto en el estilo de la web
  
blockquote {
background: transparent url(_img/quote.jpg) no-repeat;
font-size: 1.1em;
font-style: italic;
padding: 10px 0 20px 50px;
width: 420px;
margin: 0 auto 1em;
}

  con lo que conseguimos que se vea más o menos así

  esto es una cita de ejemplo para ver como se ve el estilo nuevo de OBG. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi et ante. Donec ullamcorper dolor non metus. Curabitur eget sem. Suspendisse pede. Aenean non dolor. Donec mattis fermentum est. Duis purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean rutrum pretium risus. Etiam adipiscing congue nulla.

• Un icono a la izquierda de los enlaces externos, como este . Aquí es donde entra en juegojQuery. Usando este script se añade el icono que queramos a la izquierda de los enlaces:
  

  jQuery.noConflict();
  jQuery(document).ready(function(){
                  jQuery("a").not("[@href*='otrobloggeek.com']").css("background", "transparent url(/blog/wp-includes/images/link-externo.png) no-repeat");
                  jQuery("a").not("[@href*='otrobloggeek.com']").css("padding", "0 0 2px 18px");
  });
  

  
  Para usarlo hay que añadir antes jQuery a nuestra web. En la web de jQuery tenéis ejemplos de como hacerlo.

Por supuesto podeéis usar el código como queráis y donde queráis.
Edito:

El icono para los enlaces externos lo he sacado de la galería de iconos Tango que tienen una licencia Creative Commons 2.5 Attribution-ShareAlike

Edito 2:
En este post explico qué hace el código Javascript que pone guapos los enlaces.

Edito 3:
La medicación de la alergia me deja un poco atolondrado (sí, eso es posible) por eso acabo de subir el archivo Gimp con la imagen que aparece a la izquierda de las citas.
[tag]varios, javascript, jquery[/tag]

Una de las cosas que mas me ha fastidiado el cambio a wordpress es que he perdido un puñado de visitas que llegaban a mi antiguo weblog (poquitas en realidad) y supongo que también habré perdido algún permalink. Trasteando un poquito con javascript he conseguido un pequeño script que redirije las entradas del weblog viejo al nuevo mediante la etiqueta meta.

El script analiza la dirección por la que se ha llegado al a página, la parsea y formatea el permalink con el formato que yo he elegido en wordpress. Me ha costado sacrificar el día en el permalink, pero no creo que haya sido una gran pérdida.

var string = (location.href);
var getit = new Array();
var getit = string.split('/');
var result = getit[ getit.length-1 ];
var filename = result.split('.');

document.write("<meta http-equiv='refresh'");
document.write("content='0; url=http://otrobloggeek.com/");

if(filename[1]=="html"){

	document.write(getit[getit.length-3] + "/");
	document.write(getit[getit.length-2] + "/");
	document.write(filename[0] + "/");

}

document.write("'/>");

Hay que insertar el script anterior en el head de la plantilla de blogger para que genere una etiqueta meta que lo rediriga. Por supuesto soys libres de cambiarlo, modificarlo y adaptarlo a vuestras necesidades. Seguramente también funcionará en otros motores además de blogger y wordpress.

[tag]javascript, blogger[/tag]