Contenido

Scripty2, un lavado por dentro y por fuera para Script.aculo.us

27 Jun

+ 5

Script.aculo.us, la librería gráfica de Prototype se ha lavado la cara y de que manera.

script2
(Ver Imagen)

Scripty2 se ha reescrito completamente desde 0 para suplir a la antigua librería, consiguiendo reducir su tamaño considerablemente, ideal para aplicarle efectos gráficos, enriquecer el interface del usuario de tus páginas en tan solo 20kb (gzzipped).

Como usarlo

Para disponer de las funcionalidades que la librería nos ofrece deberemos incluir la llamada al fichero correspondiente.

<script src="prototype.js" type="text/javascript"></script>
<script src="s2.js" type="text/javascript"></script>

Como podemos ver, necesitaremos prototype.js para que esta librería funcione. Además requiere la versión 1.6.3_rc3 de Prototype o superior.

Una vez añadido este código, podremos hacer uso de las funcionalidades que Scripty2 nos ofrece, funcionalidades que están divididas en 3 categorías:

  1. Core: Funciones básicas usadas en el resto de la librería.
  2. Fx: Colección de métodos para aplicarle efectos a los elementos de la página.
  3. Ui: Funciones para el parseo de CSS

Descargar y demos

Para ver las posibilidades que ofrece, se han desarrollado un par de ejemplos. Puedes descargarlo directamente (con documentación) aquí.

Librerías para generar gráficas con Javascript

26 Jun

+ 11

Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.

Protochart2
(Ver Imagen)

Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:

  1. Flot [jQuery]
  2. fgCharting [jQuery]
  3. jQuery Sparklines [jQuery]
  4. jqPlot [jQuery]
  5. TufteGraph [jQuery]
  6. jQuery Google Charting [jQuery]
  7. ProtoChart [Prototype]
  8. JSXGraph [Prototype o jQuery]
  9. Protovis [Native JS]
  10. PlotKit [Nativa JS]

Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.

  1. MooChart
  2. TabletoChart
  3. MooWheel

¿Me he dejado alguna que valga la pena conocer?

Prototype 1.6.1 RC2, compatibilidad con IE8

30 Mar

+ 0

Prototype ha anunciado la versión 1.6.1 RC2, envuelta de una importante adaptación para ser completamente compatible con Internet Explorer 8. Entre las mejoras que esta versión podemos encontrar la capacidad de usar almacenamiento DOM en el elemento Element.

Se busca gurú.

13 Mar

+ 7

Buenas, estoy preparando un test de frameworks JS y me gustaría encontrar un gurú (o alguien que se defienda) con alguno de los siguientes frameworks:

  1. MooTools 1.2.1
  2. Dojo 1.2.3
  3. Prototype 1.6.3
  4. Ext 2.2.1

Es bastante sencillo, tengo un script en jQuery con una serie de funciones que me gustaría migrar de la forma más optima a cada uno de los frameworks indicados arriba. Si alguien puede, y quiere, echarme una mano.

He dejado un mensaje en foro.

Muchas gracias a todos!!!

Rendimiento de las técnicas de POO en Javascript

18 Feb

+ 10

Hace unos días hablamos de programación orientada a objetos en Javascript y vimos que es una técnica interesante y las diferentes opciones usadas para conseguirla. Pero ¿cual de ellas es más eficiente en cuanto a rendimiento?

class_performance_javascript

En Broofa.com (y via Ajaxian) descubro que han hecho una prueba de rendimiento a las declaraciones en diferentes navegadores haciendo 100.000 llamadas al constructor de cada uno de estos métodos, ha generado subclases y ha llamado a métodos de dichas clases parada despues comparar la memoria usada en el proceso y los tiempos usados en dichos procesos.

Viendo los resultados observamos que Base2 se corona como técnica más rápida y más eficiente en cuanto a consumo de memoria seguida de la propuesta por John Resig. Por otro lado el rendimiento de Prototype llega a ser hasta 20x inferior que sus competidores.

¿Y MooTools?

Como no han incluido a MooTools en las pruebas me he tomado la libertad de añadirla yo y los resultados son realmente buenos.

mootools_class_performance

Podeis ver los resultados en diferentes navegadores en este script de ejemplo.

Actualización

He tenido un fallo en la comprensión del funcionamiento de JSLitmus y di por supuesto que a menor “amarillo” mejor cuando es diferente ya que esto mide el número de operaciones por segundo y no el número de segundos en realizar N operaciones.

Desde este punto, Prototype me sorprende con la potencia que obtenemos, dejando muy atrás a MooTools y Base2 que pasarían a ser los más lentos de los mostrados. Por otro lado el script de John Resig se mentiene al frente de la comparativa.

Zoomy.js, lightbox ligero con Prototype y Script.aculo.us

28 Oct

+ 4

Zoomy.js es una versión de lightbox que depende de Prototype + Script.aculo.us para funcionar y que nos permite disponer de un efecto dinámico en nuestras imagenes con solo 4KB de peso. [Descargar][Demo]

Growler, notificaciones con Prototype en tus aplicaciones

17 Oct

+ 3

Hace ya unos años, Daniel Mota desarrolló Growl, un script desarrollado sobre MooTools que nos ayudaba a mostrar notificaciones en nuestras aplicaciones de una forma sencilla y elegante. Despues, Alex Sancho lo portó para jQuery y nos ofrecío una puerta para los que desarrollamos con este framework.

Ahora tenemos Growler para los que desarrollan usando Prototype como framework javascript para sus aplicaciones.

growler

Cargado de una amplia lista de parámetros, podemos personalizar nuestras notificaciones y usarlas para alertar a nuestros usuarios de todo lo que ocurra en nuestra aplicación.

Avalancha de Frameworks ¿Con cual nos quedamos?

10 Abr

+ 16

Cuando trabajamos con Javascript nos encontramos que por culpa de las diferencias entre los diferentes navegadores, tenemos que condicionar nuestro código dependiendo de estas diferencias. Para ello, y por la comodidad y claridad que aportan al código, los frameworks javascript llegan, y en masa, para hacer felices y fáciles las horas que dedicamos a este lenguaje.

Personalmente siempre que puedo, los evito. Por lo menos para hacerlo yo, aunque sea solo una vez, pero la comodidad de uso y la seguridad de que va a funcionar en la mayoría de casos, engancha.

Por eso, si estamos pensando en usar uno de ellos para nuestras aplicaciones, debemos conocer las posibles alternativas de las que podemos hacer uso.

1. Prototype (http://www.prototypejs.org/)

Pese a ser la más usada, es la que menos conozco de las más conocidas. Famosa por su peso y la integración con script.aculo.us. Muchisima documentación.

Ejemplo

//Nuevo elemento
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
//Ajax
new Ajax.Request('/some_url',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});

Documentación / Descargar

2. MooTools (http://mootools.net/)

El primer framework que me enamoró, sin duda llegué atraido por la vistosidad de Moo.fx. Destinada principalmente para complementar el diseño de las aplicaciones web, con una gran cantidad de efectos. Todo ello sin descuidar las funcionalidades del día a día. Importante tener en cuenta la nueva versión 1.2 que será completamente diferente.

Ejemplos

// Crear un elemento
new Element('a', {
'styles': {
'display': 'block',
'border': '1px solid black'
},
'events': {
'click': function(){
//aaa
},
'mousedown': function(){
//aaa
}
},
'class': 'myClassSuperClass',
'href': 'http://mad4milk.net'
});
//Ajax
var myAjax = new Ajax(url, {method: 'get});
myAjax.request();

Documentación / Descargar

3. jQuery (http://jquery.com/)

Mi nuevo amor, hace cosa de un mes, que en los ratos libres voy migrando heySilver a jQuery. Intentando aprender los grandes y mejorando el código semana a semana. Sin lugar a dudas he descubierto que pese a no disponer de muchos efectos ni transiciones, dispone de todo lo necesario para hacer lo más fácil posible el trabajo diario.  La posibilidad de usar xPath y Selectores CSS para encontrar elementos de nuestro HTML es simplemente una maravilla.

// Nuevo elemento
$("#elemento span").append('<p class="clase"><a href="...">Enlace</a></p>');
// Ajax
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

Documentación / Descargar

4. MochiKit (http://www.mochikit.com/)

Nunca he tenido la oportunidad de meterle mano, quizas ha sido por falta de tiempo, quizas por falta de interes o quizas la poca claridad del código, pero si revisamos la documentación nos damos cuenta de que no es un framework que podamos desechar sin por lo menos dedicarle un par de semanas.

//Nuevo elemento
P({"class" : "clase"});
//Ajax
var url = "/src/b/bo/bob/MochiKit.Async/META.json";
var d = loadJSONDoc(url);
var gotMetadata = function (meta) {
if (MochiKit.Async.VERSION == meta.version) {
alert("You have the newest MochiKit.Async!");
} else {
alert("MochiKit.Async "
+ meta.version
+ " is available, upgrade!");
}
};
var metadataFetchFailed = function (err) {
alert("The metadata for MochiKit.Async could not be fetched :( ");
};
d.addCallbacks(gotMetadata, metadataFetchFailed);

Documentación / Descargar

5. Script.aculo.us (http://script.aculo.us/)

Aunque técnicamente es un complemento de prototype, ya que sin él no funciona, es posiblemente más famoso que el propio Prototype. Con él todos los efectos, transiciones y transformaciones son mas fáciles desde que script. aculo.us apareció.

//Nuevo elemento
element = Builder.node('p',{className:'error'},'An error has occurred');
// Ajax
new Ajax.Request('/foo/bar', {method:'post', postBody:escape('thisvar=true&thatvar=Howdy')});

6. Rialto (http://rialto.improve-technologies.com/wiki/)

Otra gran desconocida de este mundillo de líneas de código, pese a no estar compuesta de una gran cantidad de funcionalidades diarias, está cargado de widgets de fácil instalación que merece la pena ver.


//Nuevo Elemento (Combo)
var comb = new rialto.widget.Combo([["value1","text1"],["value2","text2"],["value3","text3"]],"MyComb",5,10,100,CADRE2,{position:"absolute",heightItem:25,suggest:false,enable:true});
//Ajax
var remote=new rialto.io.AjaxRequest({
url:'rialtoModel.xml',
method: 'get',
callBackObjectOnSuccess:this,
withWaitWindow:false,
onSuccess: this.parseXmlForListValue
}) ;

Documentación / Descargar

7. Dojo (http://dojotoolkit.org/)

Documentación / Descargar

8. Spry Framework (http://labs.adobe.com/technologies/spry/)

Documentación / Descargar

9. ASP.NET Ajax Framework (http://asp.net/ajax/)

Documentación / Descargar

10. Clean Ajax (http://sourceforge.net/projects/clean-ajax/)

Documentación / Descargar

11. YUI (http://developer.yahoo.com/yui/)

Documentación / Descargar

12. Ext (http://extjs.com/)

Documentación / Descargar

13. Base2 (http://code.google.com/p/base2/)

Documentación / Descargar

14. DOMAssistant (http://domassistant.com/)

Documentación / Descargar

Muchos, pero muchos más.

Polar Clock versión Javascript gracias a Prototype

26 Feb

+ 3

Hace unos 10 meses que vimos la posibilidad de vacilar a la gente usando el reloj más geek de todos los relojes (de los que se entienden, por que hay alguno por ahi que ….).

Polar Clock

Desde entonces han ido apareciendo herramientas que integran este tipo de reloj polar:

Y ahora via Ajaxian, descubro una implementación en Javascript mediante el uso de Prototype y exCanvas, personalmente creo que poca utilidad se le puede dar, pero al igual que las diferentes versiones, está curioso para mostrar la fecha de una forma diferente.

[Demo][Descargar]

Aprende a usar Prototype correctamente

9 Nov

+ 0

Rápido que me voy!! Tutorial 1 y Tutorial 2 de como usar Prototype correctamente. Vía.