Archivo de la categoria: Javascript

Cuando realizamos una petición Ajax, ya sea en el framework que estemos utilizando, nos hará falta en bastante ocasiones tener que llamar alguna función en Javascript o realizar alguna sentencia. Ya sea antes o después de la petición, o antes o después de pintar los datos en HTML. Vamos a practicar tres formas posibles de usar Javascript en peticiones Ajax mediante Mootools.

MaxImage es un plugin para Jquery que escala la imagen que nosotros le digamos al tamaño completo de su contendor. Es decir por ejemplo una imagen que sea de 3000px no cabría en un monitor con una resolución de 1280px. MaxImage se encarga de reducir el tamaño al mismo que su contenedor padre. El plugin además tiene la posibilidad de activar un slideshow de imágenes. Muy útil se queremos realizar una galería de imágenes en pantalla completa como se puede observar en la demostración.

Con la nueva versión de CSS3 ya no necesitaremos usar estos plugins y podremos realizarlo con la nueva propiedad background-size que se encargara de dar un tamaño a la imagen para utilizarla de fondo en alguna capa. Si le damos valor 100% se mostrara al tamaño máximo de la capa, escalando la imagen como realiza el plugin.

Fuente y demo: Aaronvanderzwan

Navegando por delicious encuentro un Plugin para jQuery que muestra la hora en unas esferas simulando un reloj. Realizado por tutorialzine, comenta que antes de fin de año quiso mostrar cuantas horas quedaba para el nuevo año de forma colorida y novedosa. Es fácil de integrar y de entender ya que al final lo hizo en forma de tutorial. Se me ocurre una buena forma para mostrar un loading en jQuery simulando estas esferas. De todas formas me gusta más la librería Mootools y espero que alguien algún día lo pase a dicha librería.

Descarga: Reloj en jQuery
Demo: Reloj en Jquery

Las aplicaciones AJAX ayudan a la interactividad del usuario, reducir la carga innecesaria que supone cargar una página completa, y para muchísimas más cosas. Pero los usuarios siguen sin estar acostumbrados a las peticiones AJAX, además se sienten incómodos al no poder retroceder como es debido a la página anterior. Por ello Digitarald.de creó HistoryManager en Mootools que nos ayuda a poder retroceder en nuestras peticiones AJAX como si una navegación normal se tratase. Existe un inconveniente al usar esta clase ya que se ha quedado obsoleta con la nueva versión de Mootools 1.2.4. Buscando una nueva clase que solucionara la compatibilidad con la nueva versión encontré que el usuario peterpunk lo había solucionado. He preparado una demo que podéis descargar y ver el código que contiene todo documentado.

Demo: HistoryManager en Mootools
Demo: Descargar demo
Descargar: HistoryManager

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.

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.

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.

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.

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);
});