Posts filed under ‘Scriptaculous’

Versión Prototype/Scriptaculous del juego Same

Cuando instale ubuntu el único juego, de los que trae por defecto Gnome, que me gusto fue el Same, es simple, fácil, ninguna gracias pero me gusto mas que los otros. Grata impresión la mía al encontrar que hay una version de este juego online, que funciona bajo Prototype 1.6 y Scriptaculous 1.8, creado solo con 179 lineas de código, cuenta con animaciones (gracias a la librería effect) y sonido (una de las nuevas librerías de scriptaculous, sound.js).

Asi que si estas aburrido, juega un rato.

Enlace: Prototype/Scriptaculous Version of Same Game
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 1:28 am Deja un comentario

Script.aculo.us Samplr

Dos post atrás les comentaba sobre Scripteka.com, que es un sitio en donde encontraran todo tipo de librerías para ocupar con Prototype, Samplr es la misma idea, pero recopilando scripts que funcionen con la librería Effect de Script.aculo.us.

Hay unos scripts verdaderamente buenos y que pueden ser muy útiles, en el sitio encontraras 9 extensiones y tienes 21 enlaces a otros mas que ha ido recolectando el autor del sitio.

Enlace:
Script.aculo.us Samplr
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:57 am 2 comentarios

Scripteka.com – Repositorio de librerías para Prototype

Scripteka es un sitio en el que encontraras librerías y/o extensiones de todo tipo para que puedas ocupar con el framework Prototype, como por ejemplo datepicker, tooltips, validadores, entre otros.

En este momento cuenta con mas de 60 scripts (64 al día de hoy y subiendo) en el que de seguro encontraras lo que buscabas para tu proyecto. Bastante simple el sitio e intuitivo, te entregan una breve introducción a la librería, el autor, sitio web y la valoración entregada por los usuarios registrados.

Sinceramente me impresiona como ha crecido este framework y su comunidad, hace una par de días atrás salio la version 1.6 de prototype, además se actualizo la suit scriptaculous a la 1.8 y en conjunto lanzaron un libro, contando también con Scripteka que recopila todas las librerías para prototype existentes (ojo que si falta alguna, puedes dar aviso para que la agreguen), etc. y etc. Así que si aun no te decides por que framework ocupar, por aquí puede ser tu camino.

Enlace: Scripteka.com
.

Ver VideosTe VerdeImagenes para hi53GP

noviembre 10, 2007 at 12:29 am 2 comentarios

Que fácil es AJAX con Prototype

AJAX, quien no ha oído hablar de AJAX o a leído algo acerca. Esta es una de las tecnologías fundamentales de la web 2.0 y la rama que mas se quiere aprovechar y potenciar para las próxima etapa, web 3.0. Ahora les explicare otra razón mas de porque un framework nos ayuda tanto, a optimizar recursos y ser mas productivos.

Antiguamente, y ni tan antiguo, uno creaba un largo código para ocupar ajax, por ejemplo.

function newAjax(){
   var xmlhttp=false;
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         xmlhttp = false;
      }
   }   
   if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
      xmlhttp = new XMLHttpRequest();
   }
   return xmlhttp;
}

function setContent(page, container)
{
   container = document.getElementById(container);
   ajax=newAjax();
   ajax.open("GET", "/pages/"+page,true);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         container.innerHTML = ajax.responseText
      }
   }
   ajax.send(null)
}

Si se fijan es un código extenso y que obviamente tiene errores, ya que solo es capaz de crear un solo objecto XMLHttpRequest, es decir si uno realiza dos llamadas simultaneas realizaba ambas pero se sobreescribían, teniendo resultados inesperados y desconcertadores. Pues con Prototype es tan simple como esto:

function setContent(page, container)
{
   new Ajax.Updater(container, "/pages/"+page);
}

Simplemente con una linea podemos hacer lo mismo, y aquí ya no tendremos el error que comente anteriormente. Con Ajax.Updater primero identificamos el id el contenedor que actualizaremos, después la dirección del documento que llamamos, y hay un tercer parámetro que son sus opciones, que pueden ver en mas detalle en la wiki de scriptaculous.

Como para extender mas las funcionalidades, contamos por ejemplos con Ajax.Request, que es el encargado de realizar la consulta, este no inserta el contenido devuelto automáticamente, simplemente tiene parámetros como onComplete con el cual podemos definir que hacer con el contenido, bastante practico si queremos hacer por ejemplo un sistema de identificación. Además tenemos Ajax.PeriodicalUpdater, que es muy similar a Ajax.Updater, solo que nos da un parámetro extra con el cual podemos hacer que se actualiza cada n segundos.

Si ven las opciones son varias, la herramienta esta, solo falta que la ocupes, y como dije en otro articulo, el limite solo lo pones tu.

Enlaces:

Ajax en scriptaculous
Prototype JS
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 9, 2007 at 2:38 pm 10 comentarios

Extendiendo Elementos DOM con Prototype

Sin duda el Prototype es uno de los más ocupado, y cabe reiterar que es mi favorito. En si es uno de los framework’s mas robustos y “fieles” al momento de crear nuestras aplicaciones y ocupar javascript.

Con esta librería, a parte de ayudarnos un montón en el uso de elementos DOM, AJAX, Eventos, etc., es muy fácil de extender y modificar o compatibilizar, más aun, este framework a nuestros desarrollos, por ejemplo extendiendo elementos DOM.

Para aclarar un poco mas la idea, veamos ejemplos prácticos de uso. Digamos que queremos insertar código en un div vía DOM, lo normal y cotidiano seria innerHTML pero con prototype lo podemos hacer mas fácil aun.

$('iddiv').update("hola mundo");

Ahora creemos los nuestros, imaginemos que queremos continuar el texto, seria algo así, primero creamos la extensión y después la ocupamos las veces que queramos.

//extendiendo el elemento

Element.addMethods({

   updateplus: function(element, content) {

      content = typeof content == 'undefined' ? '' : content.toString();

      $(element).innerHTML += content;

      return element;

   }

});//ahora lo probamos

$('iddiv').updateplus(', como les va?');

Esto haría que el contenido del div (id=iddvi) tenga como contenido “hola mundo, como les va?”. Fácil no?, podemos hacer quizá un mensaje de advertencia utilizando la librería Effects de scriptaculous, por ejemplo:

Element.addMethods({

  flash: function(element, content) {

     content = typeof content == 'undefined' ? '' : content.toString();

     $(element).update(content);

      new Effect.Highlight(element);

      return element;

   }

});

Y el código seria tan simple como esto:

$('iddiv').flash('Error: nombre de usuario existente');

Y así con una infinidad de opciones, ya que el limite aquí solo lo pones tu.

Breve artículo inspirado por Extending the limits.


.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

septiembre 9, 2007 at 12:24 am 1 comentario

Efecto Acordion con Script.aculo.us

Este efecto, en lo personal, lo había visto en la librería mootools y me encanto, por el mismo hecho lo he tenido que ocupar en su versión para prototype (que es la librería que utilizo con el framework script.aculo.us). Aunque no es lo mismo que si crean un Acordion especial para esta magnifica librería, incluso ya existe uno para JQuery y otro para Rico.

Accordion v1.0

En fin, de los creadores de lightWindows, que hace un tiempo les comentaba, nos llega Accordion v1.0, el cual sin duda es lo que estaba esperando. Tiene una fluidez bastante lograda, gracias a los avances de las iberias de scriptaculous, funciona muy bien tanto en formato vertical y horizontal, y obviamente cumple su cometido con un muy buena pinta en todos los navegadores, o por lo menos los mas usados.

Sin duda una gran clase de parte de stickmanlabs que vale la pena usar.

Enlace: Accordion v1.0
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

agosto 2, 2007 at 5:20 pm Deja un comentario

JSValidate: Validación de Formularios con Prototype y Script.aculo.us

Hace mucho tiempo vengo usando script.aculo.us con prototype como mi librería favorita para el uso de AJAX, Animaciones y manejo de eventos DOM en general.

El uso de estas librerías nos ayudan bastante al momento de manejar Javascript en general, sobre todo al usar AJAX o al usar Eventos DOM, ya que estos son los que mas dolores de cabeza nos dan al momento de probar en distintos navegadores, pues estas librerías nos ayudan a corregir esos errores y asegurarnos de que todo funcione como debe ser.

Por lo general, anexo a las clases que trae script.aculo.us, ocupo otras mas, por ejemplo.

Entre otras clases que he ido creando y espero mas adelante ir dando a conocer para que las prueben.

JSValidationDesde que lanzaron la ultima versión de script.aculo.us, por una inexplicable razón, el validador que ocupo para los formularios empezó a mandar errores, y por lo visto no la han actualizado aun, así que me puse a buscar otra pronto que sea muy parecida y pueda manejar, y he llegado a JSValidate.

JSValidate, es una clase bastante buena que he estado probando y me ha dado buenos resultados, es bastante rápida y tiene un estilo único al momento de mostrar los errores. Sacando el máximo de provecho de recursos es capaz de hacer un recorrido y reconocer todos los elementos que debe validar por medio de la clase por ejemplo:

<input type=”text” name=”q” class=”jsrequired” />

Con eso indicas que ese campo no debe ir vacío.

<input type=”text” name=”nombre class=”jsrequired jsvalidate_alpha” />

Con eso indicas que el campo no debe ir vacío y además validar que solo ingresen caracteres alfabéticos y no números.

La clase trae los siguiente parámetros para validar:

  • jsrequired.
  • jsvalidate_number
  • jsvalidate_digits
  • jsvalidate_alpha
  • jsvalidate_alphanum
  • jsvalidate_email
  • jsvalidate_uscanzip
  • jsvalidate_usstate
  • jsvalidate_usphone
  • jsvalidate_creditcard
  • jsvalidate_ssn
  • select-notfirst

De todas maneras, los nombres son editables y además si tienes conocimientos en Expresiones Regulares, puedes agregar todas las que quieras.

Sin duda una gran clase para tomar en cuenta y ver sus avances. Aunque en lo personal, prefiero la que tengo por otras razones que mencionare otro día.

PD: Pido disculpas por los dias que no postee nada o casi nada, es que formatee mi PC y cambie a Ubuntu y he tenido unos problemas, pero ya espero estar pronto de vuelta.
.

Ver VideosTe VerdeVideos 3GP3GPsomos tu y yo

agosto 1, 2007 at 2:29 pm 4 comentarios



Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.