MooEditable es un simple pero potente Plugin para Mootools que convierte nuestros textareas (cajas de texto en HTML) en editores WYSIWYG. Como cualquier editor de texto nos mostrará una barra de herramientas en las cuales podemos encontrar:

Formato de texto: Negritas, cursivas, subrayado y tachado. Listas: Numéricas y por puntos. Tabulaciones a nuestros párrafos. La opción de poder rehacer y deshacer. Insertar imágenes e hipervínculos. Cambio entre diseño y HTML.

GoogieSpell es un ligero script en Javascript que está basado en el corrector ortográfico de Gmail. Su instalación es sencilla y nos ayudará a colocarlo fácilmente en cualquier campo de nuestros formularios. Da soporte a diferentes idiomas, entre los que podemos encontrar Inglés, Español, Francés, Italiano, Danés, etc.; también es soportado por los exploradores web más comunes, como Firefox, Internet Explorer, Safari y Opera. GoogieSpell, el corrector ortográfico para tu Web, tiene las siguientes características:

Soporte de 27 idiomas. Funciona en IE 5.5 o superior, IE 6.0, IE 7, FF 1.0 +, Safari, Opera. Genérico, extensible y fácil de instalar. Basado en Ajax. Peso de 50KB. Buena documentación.

Sin duda una buena alternativa para nuestras pequeñas y grandes aplicaciones en donde el usuario tenga que escribir grandes textos y necesite un corrector ortográfico en la misma Web, sin necesitar programas de terceros.

Demo: GoogieSpell corrector ortográfico para tu Web Descarga: Descargar GoogieSpell corrector ortográfico para tu Web

Quizás el título te lleve a engaño, puesto que jugar al Pong desde tu navegador podemos hacerlo con algún emulador o en flash, por ejemplo; pero lo que os voy a enseñar es como jugar al Pong con las ventanas de tu navegador web. Es decir, imaginaros que una ventana popup es la pelota y otras dos ventanas popup hacen de los palos laterales. Pues así vais a jugar. El manejo es muy fácil: el jugador 1 se mueve con las teclas A (hacia arriba) y Z (hacia abajo) y el jugador 2 con las flechas arriba y abajo para el movimiento propio. La P es para jugar, la Q para quitar y la Barra espaciadora es para pausar el juego. Bien, dicho todo esto, ya es hora de jugar al Pong desde tu navegador web, o como ellos los llaman Browser Pong.

Enlace: Browser Pong

Sin duda alguna, uno de los mejores captcha que he podido probar hasta ahora ha sido reCAPTCHA, una auténtica máquina para evitar el Spam. Es totalmente gratuito, contiene una API bastante útil y una buena documentación para personalizarlo. Otra de las razones de su poder es que además de las funciones para detectar si es una persona o máquina quien rellena un formulario, es que puede leerte el captcha que debemos insertar para personas discapacitadas. Una de las cosas que no me gusta nada es el diseño que tiene con ese color rojo y sus grandes dimensiones, es por eso por lo que escribo estas líneas. Para obtener realmente lo que es la imagen captcha disponemos de unas funciones dentro de su API que nos ayudará a visualizarlo y colocarlo en nuestra Web.

<!-- function demo() { var file = document.createElement( "script" ); file.setAttribute( "type", "text/javascript" ); file.setAttribute( "src", "http://www.rutarelativa.com/files/wpmoosnow/moosnow.js" ); document.getElementsByTagName("head")[0].appendChild( file ); file.onreadystatechange = function () { if (file.readyState == 'complete') var snow = new mooSnow({container: $("cbcr")}); }; file.onload = function () { var snow = new mooSnow({container: $("cbcr")}); }; $("web").scrollIntoView(true); } -->

Ya estamos en época estival, en breve comienza la Navidad y lo que ello conlleva: compra de objetos decorativos para el hogar, el árbol e incluso los hay que visten sus mascotas para la ocasión. Vuestro blog no podría ser menos y ahora podrá lucir un aspecto más Navideño. Hemos realizado un plugin efecto nieve en Mootools para Wordpress con un efecto de copos de nieve cayendo desde el "cielo".

¿Pero ya existen muchos plugins efecto nieve, no?

Si es verdad, pero este efecto nieve en Mootools está actualizado a la última version de Mootools 1.2.4 por Dimitar Christoff y creado por Rutarelativa para Wordpress de forma que sea mucho más fácil la instalación y además es muy configurable. Por eso este este es tu plugin perfecto para mostrar efecto nieve en Wordpress y tener tu blog listo para las Navidades.

Puntos a favor de WpMooSnow Instalación sencilla con tan sólo un par de clics. Configuración en el panel de administración donde es posible cambiar colores, fuentes y efectos. Está testeado y es compatible con los exploradores IE6+, Firefox 2.0+, Opera 9+, Safari Windows 3.2.1+ y Google Chrome 2.0+. Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en Mootools para Wordpress funcionando.

<!-- function demo() { var file = document.createElement( "script" ); file.setAttribute( "type", "text/javascript" ); file.setAttribute( "src", "http://www.rutarelativa.com/files/wpmoosnow/moosnow.js" ); document.getElementsByTagName("head")[0].appendChild( file ); file.onreadystatechange = function () { if (file.readyState == 'complete') var snow = new mooSnow({container: $("cbcr")}); }; file.onload = function () { var snow = new mooSnow({container: $("cbcr")}); }; $("web").scrollIntoView(true); } -->

Algunos usuarios ya disfrutan del plugin WpMooSnow que incluye en tu blog de Wordpress un bonito efecto nieve, pero sólo funcionaba para los usuarios de la librería para javascript llamada Mootools. Existe un gran número de usuarios que utilizan en lugar de Mootools la librería JQuery, y es por eso por lo que hemos querido adaptar este plugin para esos usuarios.

Ya, pero yo uso Mootools, ¿que hago?

Dirígete al post donde hablamos sobre el plugin y ahí te informamos de todo.

Me gustaría ver en acción el efecto nieve en una demo

Puedes ver una demo del plugin efecto nieve en JQuery para Wordpress funcionando.

En muchos de nuestros proyectos tenemos la necesidad de que las cajas de texto vayan prediciendo las palabras o frases que vaya escribiendo el usuario sin que el lo escriba completamente. A esto se le denomina autocomplete. Existen en varios lenguajes pero hoy nos vamos a centrar en el lenguaje Web. Para que esto pueda ser posible necesitamos tener habilitado Javascript y utilizar algunas de las librerías que existen en Jquery, Mootools o Javascript.

Autocomplete para Jquery

Descargar Ajax AutoComplete for jQuery Ver demo

Modo de empleo:

<input type="text" name="q" id="query" /> var options, a; jQuery(function(){ options = { serviceUrl:'service/autocomplete.ashx' }; a = $('#query').autocomplete(options); });

Navegando por Delicious he encuentrado un plugin para realizar una galería en Jquery que muestra imágenes en pantalla completa que incluye un sistema de navegación con un diseño simple y claro. Para todos los que busquéis una galería de imágenes en Jquery, esta es una buena opción a tener en cuenta. Lo que realiza es:

Redimensiona las imágenes al tamaño de la ventana del navegador para que se visualizen en pantalla completa. Temporizador entre imágenes con transiciones y precarga entre ellas. Control de navegación para realizar pausa / play / hacia delante y atrás

A mi personalmente me encanta, el único problema que le veo es el gran consumo de CPU al pasar de una imagen a otra; supongo que la resolución de pantalla dependerá de esto al tener que redimensionar las imágenes al tamaño del explorador. Podéis ver la demo vosotros mismos para poder decidir antes de añadirlo a vuestros proyectos.

Fuente: Supersized: Galería de imágenes en Jquery.

Desde que descubrí que los exploradores podían guardar en sus bookmarks (favoritos) código Javascript me puse a investigar y descubrí que este fenómeno se le denomina bookmarklet. Tras una rápida búsqueda por internet me encontré con varios, pero voy a destacar 5 bookmarklet muy útiles.

¿Que son los bookmarklet?

Trozos de códigos en Javascript que le dan al explorador funcionalidades extras. Estos se guardan en los bookmarks (favoritos) del explorador web y su ejecución se realiza mediante la barra de direcciones que darán al explorador funcionalidades extras, por ejemplo traducir un texto seleccionado con el traductor de Google, o redimensionar la ventana.

¿Como se crean?

Crea un nuevo marcador (favorito), añádele un nombre por ejemplo "bookmarklet 1" y en la dirección pega tu código Javascript.

Traducir texto mediante la herramienta de idioma de Google: javascript: if( window.getSelection() == "" ) { t = prompt( 'Traducir:',''); } else { t = window.getSelection(); } if( t != null && t != "") { f = document.createElement('form'); f.action = "http://translate.google.com/translate_t"; f.method = "post"; f.target = "_blank"; q=document.createElement('input'); q.name="text"; q.type="hidden"; l=document.createElement('input'); l.name="langpair"; l.type="hidden"; q.value=t; l.value=(window.getSelection()=="")? "es|en": "en|es"; f.appendChild(q); f.appendChild(l); document.getElementsByTagName( "body" )[0].appendChild(f); f.submit(); } else { exit(); }