Contenido

Idle Spy para MooTools, usa Ajax solo cuando sea necesario

23 Ene

+ 3

Alfredo Artiles nos vuelve a deleitar con un espectacular script con el que aprovecharemos al máximo los recursos del usuarios y los de nuestro servidor haciendo peticiones Ajax solo cuando estemos en una aplicación web.

El script montado para funcionar con MooTools, se basa en que cuando cambiamos de pestaña el navegador continua ejecutando nuestros scripts de actualización mediante Ajax. Estas llamadas consumen recursos sin ser necesarios, ya que estamos en otra pestaña. Alfredo ha optado por controlar el movimiento del ratón y teclado sobre la página y en caso de pasar un tiempo sin que este actúe sobre nuestra página cancelará nuestras peticiones Ajax.

Modo de empleo

var idleSpy = new IdleSpy({
 idleTime: 300000
});
idleSpy.addEvents({
 'idle': function() { /* on user idle code here */ },
 'back': function() { /* on user back code here */ }
});
idleSpy.start();

Básicamente lo que nos ofrece el script es la posibilidad de definir un tiempo de espera antes de activar el evento idle en el que definiremos que hacer cuando llevemos X segundos sin actuar sobre nuestra página. Posteriormente, definiremos el evento back que se encargará de reestablecer todo lo que hayamos parado previamente.

¿Para jQuery?

Los que usamos jQuery tambien tenemos un plugin que nos permite realizar la misma tarea. jQuery idleTimer, nos permite definir ambos eventos.

// timeout en milliseconds; defaults 30000
$.idleTimer(10000);

$(document).bind("idle.idleTimer", function(){
// ....
});

$(document).bind("active.idleTimer", function(){
// ....
});

$.idleTimer('destroy');

Nicholas C. Zakas, implementó hace ya tiempo una versión para YUI que los desarrolladores que usen pueden tener en cuenta.

Actualizo (11:58)

Alfredo me avisa de que ha encontrado uno para funcionar con Prototype.

WpMooSnow, ponle nieve a tu WordPress con MooTools

4 Dic

+ 8

Sampedro de RutaRelativa desarrolla un plugin para WordPress que nos permite incluir nieve cayendo en nuestro blog. Algo muy interesante para las fechas que se acercan.[Demo][Descargar]

¿Como detectan el navegador los diferentes frameworks Javascript?

1 Dic

+ 2

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.

MooTools nos pide que actualicemos nuestras librerías

5 Nov

+ 1

La gente de MooTools publica en su blog una entrada para recomendarnos que actualicemos las versiones 1.1.2 y la versión 1.2.4.

El motivo, la desaparición de el método document.getBoxObjectFor en Mozilla Firefox 3.6.

La última versión de Gecko, elimina este método y afectará directamente a la versión 1.1.2 de MooTools ya que se usa en dos casos concretos:

  • Event.relatedTarget: Identifica el target de cualquier evento. Esta propiedad se usa en muchos sitios del framework.
  • Evento MooseWheel:  Firefox identifica el evento usando «DOMMouseScroll» en lugar «mousewheel»

Por este motivo nos informan de que tenemos la actualización de las dos versiones disponibles para descargar y reemplazar las que usamos actualmente.

MooTools 1.1.2 / MooTools 1.2.4

MilkChart, librería gráfica para gráficas

5 Oct

+ 2

MilkChart, es una librería para MooTools que nos permite generar gráficas de una forma sencilla usando los datos de una tabla de datos del propio HTML.

<script type="text/javascript" src="mootoolsCore.js"></script>
<script type="text/javascript" src="MilkChart.js"></script>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var chart = new MilkChart.Pie(table[, options]);
    })
</script>

<!-- Table structure -->
<table id="chart">
    <thead>
        <tr>
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>8.3</td><td>70</td><td>10.3</td><td>100</td></tr>
        <tr><td>8.6</td><td>65</td><td>10.3</td><td>125</td></tr>
        <tr><td>8.8</td><td>63</td><td>10.2</td><td>106</td></tr>
        <tr><td>10.5</td><td>72</td><td>16.4</td><td>162</td></tr>
        <tr><td>11.1</td><td>80</td><td>22.6</td><td>89</td></tr>

    </tbody>
    <tfoot>
        <tr>
            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
        </tr>
    </tfoot>
</table>

Para obtener una gráfica que permita hacer más visual el aspecto de los datos.

pien
(Ver Imagen)

Tipos soportados

La librería, nos permite usar una serie de gráficos con los que visualizar los datos:

// Modo Columna
var chart = new MilkChart.Column(table, [options]);

// Modo Barras
var chart = new MilkChart.Bar(table, [options]);

// Modo línea
var chart = new MilkChart.Line(table, [options]);

// Modo puntos
var chart = new MilkChart.Scatter(table, [options]);

// Modo pastel
var chart = new MilkChart.Pie(table, [options]);

Opciones disponibles

Para parametrizar la salida de datos disponemos de una serie de opciones que nos permiten configurar el aspecto de nuestras gráficas.

  • width – (int: Default a 400) Ancho de la gráfica (en px)
  • height – (int: Default a 280) Alto de la gráfica (en px)
  • padding – (int: Default a 12) Padding (en px)
  • font – (string: Default a «Verdana») Fuente de las etiquetas
  • fontColor – (string: Default a #000000) Color de las etiquetas
  • fontSize – (int: Default a 10) Tamaño de las etiquetas (en pt)
  • background – (string: Default a #ffffff) Color de fondo de la gráfica
  • chartLineColor – (string: Default a #333333) Color de las líneas
  • chartLineWeight – (int: Default a 1) Ancho de las líneas (en px)
  • border – (bool: Default a true) Dibuja un borde a la gráfica
  • borderWeight – (int: Default a 1) Tamaño del borde (en px)
  • borderColor – (string: Default a #333333) Border color
  • titleSize – (int: Default a 18) Tamaño del título (en pt)
  • titleFont – (string: Default a «Verdana») Fuente usada para el título
  • titleColor – (string: Default a #000000) Color de la fuente del título
  • showRowNames – (bool: Default a true) Muestra los labels de las columnas en los ejes
  • showValues – (bool: Default a true) Muestra los valores en los ejex
  • showKey – (bool: Default a true) Muestra los valores de las columnas
  • useZero – (bool: Default a true) Siempre usa 0 como menos valor
  • useFooter – (bool: Default a true) Coge los nombres de las columnas del footer

Descargar

10 plugins de jQuery y MooTools para generar calendarios

9 Sep

+ 0

Útil recopilación de 10 de los mejores plugins para jQuery y MooTools para generar calendarios dinámicos.

Librerías para generar gráficas con Javascript

26 Jun

+ 13

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?

Sexy Forms, el bueno, bonito y barato de los scripts para formularios

25 May

+ 10

Eduardo Sada, me avisa de que ya tiene lista una versión estable de Sexy Forms. Se trata de un script desarrollado como plugin de MooTools (está trabajando en la versión jQuery) con el que nos permite hacer formularios más estéticos sin perder la funcionalidad de los elementos del mismo.

sexyforms-example
(Ver Imagen)

Entre las ventajas que ofrece frente a scripts similares, nos encontramos mejoras estéticas como la posibilidad de usar templates y una integración perfecta en los principales navegadores.

Y quizás lo más importante de todo, sin perder la accesibilidad necesaria para que nuestro formulario pueda ser usado por cualquiera y como quiera.

Demo

Eduardo, nos deja una página de ejemplo para que veamos el resultado y descargar el script directamente desde allí.

jQuery vs MooTools, ¿cual es mejor?

19 May

+ 16

Aunque se intente camuflar con frases como «No son para lo mismo», «Las dos son muy buenas»,… hay una pregunta latente detrás que siempre posiciona en un bando u otro a los desarrolladores web. ¿Cual es mejor? Esta es la pregunta a la que le han buscado una solución intentando ser lo más objetivo posible. Yo no me voy a posicionar, por que no son para lo mismo y las dos son muy buenas 😀

Espectacular administrador de archivos con MooTools

3 May

+ 6

Esta tarde @diegojimenez publicaba via Twitter un enlace a este espectacular administrador de ficheros desarrollado con MooTools. Con él nos será posible copiar, cortar, pegar incluso previsualizar ficheros, leer ficheros, descomprimir ficheros comprimidos o reproducir ficheros audio. Todo ello desde nuestro navegador.

filemanager_mootools
(Ver Imagen)

Entre las funcionalidades de las que disponemos nos encontramos con:

  • Navegación por los ficheros y directorios de tu servidor web
  • Renombrar, mover, borrar, copiar y descargar ficheros
  • Ver previsualización de imagenes, ficheros de texto, ficheros comprimidos o ficheros de audio
  • Interface muy agradable a la vista
  • Subir imagenes mediante FancyUpload
  • Posibilidad de auto redimencionar imagenes mientras subimos
  • Úsalo para seleccionar un fichero de donde quieras que puedes necesitar en el backend de tus aplicaciones
  • Integración con TinyMCE

Instalación

Despues de haber añadido las llamadas pertitentes al <head /> de nuestra aplicación deberemos definir nuestro FileManager con las opciones que deseemos. Y asignar el elemento que hará visible el administrador de ficheros.

var manager = new FileManager({
   url: 'manager.php',
   assetBasePath: '../Assets',
   language: 'en',
   uploadAuthData: {session: 'MySessionId'}
 });
 $('example1').addEvent('click', manager.show.bind(manager));

Para interactuar con los ficheros del servidor debemos especificar el fichero .php que realizará las tareas que solicitemos.

<?php
include('../Backend/FileManager.php');
$browser = new FileManager(array(
  'directory' => 'Files/',
  'assetBasePath' => '../Assets',
  'upload' => true,
  'destroy' => true,
));
$browser->fireEvent(!empty($_GET['event']) ? $_GET['event'] : null);

Como podemos ver, el código es muy sencillo y tenemos a nuestra disposición un objeto que nos permitirá trabajar con él más fácilmente.

Demo

Tenemos dos demos para hacernos una idea de lo que podremos conseguir.

Descargar

Podeis descargarlo directamente desde aqui.