Contenido

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.

Scripteka, la biblioteca de scripts de Prototype

8 nov

+ 4

Si estás usando prototype y necesitas algún script, deberías pasarte por Scripteka. En ellla encontrarás 60 (y creciendo) script desarrollados para integrarse con Prototype y aportar más funcionalidades a nuestras aplicaciones de forma cómoda y rápida.

Prototype 1.6.0 RC1 va la luz

17 oct

+ 2

La gente de Prototype anunció ayer la versión 1.6.0 RC1, una versión con muchos puntos para ser la nueva versión de este framework, en ella podemos ver una gran cantidad de cambios y mejoras realmente interesantes. Tambien hay que tener en cuenta la reducción de peso, quedandose en 21kb.[Descargar]

Prototip, mejorando la usabilidad del sitio

8 oct

+ 5

Los ToolTips son una forma de hacer llegar a los usuarios más información acerca de los elementos mostrados en pantalla. Con Prototip, podremos hacer que nuestros elementos muestren toda la información que necesitan mostrar para que el usuario no tenga duda alguna del funcionamiento de la página web.

Colección de clones de Lightbox para todos

19 sep

+ 68

Está claro que el uso de clones de Lightbox se ha estandarizado por la blogosfera a un velocidad increible, y que se ha llegado a hacer necesario para todo blogger disponer de uno de estas versiones, con las que mostrar de una forma elegante a nuestros usuarios las imagenes y demás contenidos que introducimos en nuestra web. Pero hay tantos que no sabemos por cual decidirnos.

LightBox JS 2.0

lightbox.JPG

Enlace / Peso: 12kb. / Framework: Prototype, script.aculo.us / Descargar / Modificaciones:  Lightbox Gone WildLightbox Using iFrame, Lightbox without Lightbox, LightWindow, Multifaceted Lightbox

Continua —>