rutarelativa

Total de entradas publicadas: 397

Archivo de la categoria: Javascript

Como usar Javascript en peticiones Ajax Mootools

votar
Como usar Javascript en peticiones Ajax Mootools

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.

Continuar leyendo...

JQuery: Plugin maxImage, escalar imagenes

votar
Jquery: Plugin maxImage, escalar imagenes

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

Reloj en jQuery

votar
Reloj en jQuery

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

HistoryManager en Mootools

votar
HistoryManager en Mootools

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: Plugin Mootools editor de texto

votar
MooEditable: Plugin Mootools editor de texto

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.

Continuar leyendo...

Jugar al Pong desde tu navegador

votar
Jugar al Pong desde tu navegador

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

Api reCAPTCHA

votar
Api reCAPTCHA

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.

Continuar leyendo...

WpMooSnow: Plugin efecto nieve en JQuery para Wordpress

votar
WpMooSnow: Plugin efecto nieve en Jquery para Wordpress

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.

Continuar leyendo...

WpMooSnow: Plugin efecto nieve en Mootools para Wordpress

votar
WpMooSnow: Plugin efecto nieve en Jquery para Wordpress

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.

Continuar leyendo...

Autocomplete para Jquery, Mootools y Javascript

votar

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);
});
Continuar leyendo...
1 2 > >>
Últimos comentarios
  • Avatar del usuario Sampedro
    Sampedro Hola Alberto ¿te funciono el tip al final?, ¿cuando dices una...
  • Avatar del usuario Alberto
    Alberto yo tengo una aplicacion desktop y trabajo con netbeans 6 necesito...
  • Avatar del usuario Akeru
    Akeru Sera un placer verle por ahí... Hay varios compis que se las...
  • Avatar del usuario Sampedro
    Sampedro @Akeru Muchas gracias por su comentario cuando llegue a casa me...
  • Avatar del usuario Akeru
    Akeru Saludos...interesante "utilidad", para salir de la rutina.Con su...
Al azar
Lo más visto
Lo más comentado
Subir
iKat, mascota con realidad aumentada http://bit.ly/9YFgRT
Síguenos
Sobre

Sampedro Desarrollador en entornos web y Diseñador de profesión, muy activo, que busca siempre enfrentarse a retos cada vez más dificiles. Si un día no hago algo nuevo o no he superado alguna dificultad para mi es un día vacío. Cuento con dos titulaciones: Técnico en Explotación de Sistemas Informáticos y Técnico Superior en Desarrollo de Aplicaciones Informáticas. Fundé rutarelativa porque siempre quise tener un sitio en donde compartir mis experiencias profesionales y a los problemas que me enfrento día a día en el ámbito profesional.

Sergio Soy un desarrollador en entornos web y escritorio, entusiasta y amante de mi trabajo del que cada día espero aprender algo nuevo. Tengo una titulación de Técnico Superior en Desarrollo de Aplicaciones Informáticas y actualmente curso el primer año de Carrera Universitaria con el poco tiempo que me deja el trabajo. Fundé rutarelativa porque quiero que mi esfuerzo y tiempo invertidos en aprender y poner en práctica algo le resulte útil y fácil a otro usuario, del mismo modo que yo aprendo y ahorro tiempo con la ayuda de los demás.