Hoy se ha publicado la primera Release Candidate de Prototype 1.7. Esta versión, que viene cargada la implantación de Sizzle como selector CSS3 además añade mejoras y cambios de sintaxis bastante interesantes. Sin duda un interesante lavado de cara que convierte a Prototype en una buena herramienta para nuestros desarrollos. [Descargar]
Contenido
DOMCached, librería para facilitar el almacenamiento DOM con jQuery y Prototype
aNieto2k hace 5035 días en: estandares, javascript, Programacion, web, webdev
Ayer vimos como Web SQL Database apunta buenas maneras para el futuro del almacenamiento de datos en el cliente. Tambien hemos visto lo interesante del almacenamiento DOM como sustituto de las odiosas cookies, Lawnchair nos ofrecía un interfaz límpio y cómodo para interactuar con estas opciones, y ahora DOMCached, nos facilita tambien la integración con jQuery y Prototype.
// Ejemplo jQuery
<script src="jquery.js"></script>
<script src="jquery-json.js"></script>
<script src="domcached.js"></script>
<script>
// Leemos el valor de "key"
var value = $.DOMCached.get("key");
if(!value){
// Si no está disponible lo cargamos desde el servidor
value = load_data_from_server()
// Lo añadimos al DOM para futuros usos
$.DOMCached.set("key",value);
}
</script>
Compatible con la mayoría de navegadores actuales, DOMCached está disponible como plugin para Prototype y para jQuery. Podemos ver el código fuente alojado en GitHub y probarlo en vivo mediante este ejemplo usando el plugin jQuery.
¿Como detectan el navegador los diferentes frameworks Javascript?
aNieto2k hace 5119 días en: estandares, javascript, Programacion, web, webdev
Detectar el navegador no siempre es la mejor solución para condicionar nuestros scripts, siempre que podamos deberíamos detectar si las funcionalidades que vamos a ejecutar están disponibles y en caso de no estarlo ofrecer una alternativa, sin importar el navegador. Pero, como bien sabemos, no siempre podemos hacer lo correcto.
En estos casos, saber como lo hacen los frameworks Javascript más usados nos permitirá hacernos una idea de como actuar frente a este problema.
jQuery
Aunque desde la versión 1.3 el atributo browser
está desaprovado, aún está disponible en el código para que se vayan migrando los scripts. Supongo que en breve dejará de estar, dejando paso a la detección de funcionalidades.
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};
En este caso, hace uso del userAgent
para comprobar mediante expresiones regulares el navegador del usuario. Se trata de una comprobación muy genérica y que no nos permite detectar móviles.
MooTools
Por otro lado, MooTools, nos ofrece un objeto (Browser
) que nos permite detectar el motor de renderizado sin importar el navegador.
var Browser = $merge({
Engine: {name: 'unknown', version: 0},
Platform: {name: (window.orientation != undefined) ? 'ipod' : (navigator.platform.match(/mac|win|linux/i) || ['other'])[0].toLowerCase()},
Features: {xpath: !!(document.evaluate), air: !!(window.runtime), query: !!(document.querySelector)},
Plugins: {},
Engines: {
presto: function(){
return (!window.opera) ? false : ((arguments.callee.caller) ? 960 : ((document.getElementsByClassName) ? 950 : 925));
},
trident: function(){
return (!window.ActiveXObject) ? false : ((window.XMLHttpRequest) ? ((document.querySelectorAll) ? 6 : 5) : 4);
},
webkit: function(){
return (navigator.taintEnabled) ? false : ((Browser.Features.xpath) ? ((Browser.Features.query) ? 525 : 420) : 419);
},
gecko: function(){
return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18);
}
}
}, Browser || {});
Como podemos ver, se encarga de realizar una serie de comprobaciones de funcionalidades para determinar el motor de renderizado que está usando el visitante.
Prototype
Prototype, al igual que MooTools nos ofrece un objeto (Browser
) que nos ofrece la versión del navegador.
Browser: (function(){
var ua = navigator.userAgent;
// Opera (at least) 8.x+ has "Opera" as a [[Class]] of `window.opera`
// This is a safer inference than plain boolean type conversion of `window.opera`
var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
return {
IE: !!window.attachEvent && !isOpera,
Opera: isOpera,
WebKit: ua.indexOf('AppleWebKit/') > -1,
Gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
MobileSafari: /Apple.*Mobile.*Safari/.test(ua)
}
})(),
Al igual que jQuery comprueba el navegador mediante expresiones regulares simples que no nos permite detectar versiones móviles.
YUI
YUI nos ofrece un atributo que nos indicará el navegador que está usando el usuario.
ua = nav && nav.userAgent, if (ua) { if ((/windows|win32/i).test(ua)) { o.os = 'windows'; } else if ((/macintosh/i).test(ua)) { o.os = 'macintosh'; } // Modern KHTML browsers should qualify as Safari X-Grade if ((/KHTML/).test(ua)) { o.webkit=1; } // Modern WebKit browsers are at least X-Grade m=ua.match(/AppleWebKit\/([^\s]*)/); if (m&&m[1]) { o.webkit=numberfy(m[1]); // Mobile browser check if (/ Mobile\//.test(ua)) { o.mobile = "Apple"; // iPhone or iPod Touch } else { m=ua.match(/NokiaN[^\/]*|Android \d\.\d|webOS\/\d\.\d/); if (m) { o.mobile = m[0]; // Nokia N-series, Android, webOS, ex: NokiaN95 } } m=ua.match(/AdobeAIR\/([^\s]*)/); if (m) { o.air = m[0]; // Adobe AIR 1.0 or better } } if (!o.webkit) { // not webkit // @todo check Opera/8.01 (J2ME/MIDP; Opera Mini/2.0.4509/1316; fi; U; ssr) m=ua.match(/Opera[\s\/]([^\s]*)/); if (m&&m[1]) { o.opera=numberfy(m[1]); m=ua.match(/Opera Mini[^;]*/); if (m) { o.mobile = m[0]; // ex: Opera Mini/2.0.4509/1316 } } else { // not opera or webkit m=ua.match(/MSIE\s([^;]*)/); if (m&&m[1]) { o.ie=numberfy(m[1]); } else { // not opera, webkit, or IE m=ua.match(/Gecko\/([^\s]*)/); if (m) { o.gecko=1; // Gecko detected, look for revision m=ua.match(/rv:([^\s\)]*)/); if (m&&m[1]) { o.gecko=numberfy(m[1]); } } } } } }
Al igual que jQuery y Prototype, recurre a las expresiones regulares para detectar el navegador, con la diferencia de que esta implementación nos permite detectar alguna versión más de las disponibles.
TimeFrame, selector múltiple de fechas para Prototype
aNieto2k hace 5133 días en: javascript, Programacion, webdev
TimeFrame es un selector de fechas múltiple desarrollado con Prototype.
El script nos permite configurar los aspectos básicos de un selector de fechas y además nos permite usar el formato de fechas similar al usado por DateJS.
<script type="text/javascript" charset="utf-8">
//<![CDATA[
new Timeframe('calendars', {
startField: 'start',
endField: 'end',
earliest: new Date(),
resetButton: 'reset' });
//]]>
</script>
Parámetros
Como vemos en el ejemplo anterior, el primer parámetro hace referencia al ID del elemento que usaremos para alojar el calendario y el segúndo parámetro se trata de un objeto con una serie de opciones que especificarán el aspecto que ha de tener el selector.
months
- Número de meses que mostramos (default:
2
). format
- Formato para las fechas en los elementos
<input />
(default:%b %d, %Y
) weekOffset
- Fecha de inicio de la semana (usa
1
para empezar la semana en Lunes). startField
,endField
- Declara un rango de inicio y fin. (por defecto lo genera automáticamente)
previousButton
,todayButton
,nextButton
,resetButton
- Declara los botones de navegación (por defecto lo genera automáticamente)
earliest
,latest
- Permite espeficiar los rangos de fechas anteriores o posteriores que no podrán ser seleccionadas
maxRange
- Limita el máximo de días a la vez
Demo y Descarga
Si lo quieres ver funcionando o descargarlo para probarlo en tu local puedes hacerlo aquí.
Scripty2, un lavado por dentro y por fuera para Script.aculo.us
aNieto2k hace 5276 días en: javascript, Programacion, webdev
Script.aculo.us, la librería gráfica de Prototype se ha lavado la cara y de que manera.
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:
- Core: Funciones básicas usadas en el resto de la librería.
- Fx: Colección de métodos para aplicarle efectos a los elementos de la página.
- 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
aNieto2k hace 5277 días en: javascript, Programacion, webdev
Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.
Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:
- Flot [jQuery]
- fgCharting [jQuery]
- jQuery Sparklines [jQuery]
- jqPlot [jQuery]
- TufteGraph [jQuery]
- jQuery Google Charting [jQuery]
- ProtoChart [Prototype]
- JSXGraph [Prototype o jQuery]
- Protovis [Native JS]
- 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.
¿Me he dejado alguna que valga la pena conocer?
Prototype 1.6.1 RC2, compatibilidad con IE8
aNieto2k hace 5365 días en: Asides, javascript, Programacion, webdev
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ú.
aNieto2k hace 5382 días en: javascript, Programacion, webdev
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:
- MooTools 1.2.1
- Dojo 1.2.3
- Prototype 1.6.3
- 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
aNieto2k hace 5405 días en: Curiosidades, estandares, javascript, Programacion, web, webdev
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?
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.
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
aNieto2k hace 5518 días en: Asides, javascript, Programacion, webdev