Contenido

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?

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

25 May

+ 8

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 :D

Espectacular administrador de archivos con MooTools

3 May

+ 5

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.

MooTools 1.2.2

28 Abr

+ 1

MooTools anuncia la versión 1.2.2 de su framework JS. Esta revisión solventa problemas con la generación de Clases y algunos problemas menores.

OmniGrid, excelente DataGrid con MooTools

31 Mar

+ 2

OmniGrid es una excelente alternativa a los DataGrid basados en Javascript. Gracias a la potencia de MooTools, esta aplicación nos permitirá conseguir que mostremos datos de una forma más dinámica y con unas capacidades realmente intersantes.

Menús contextuales con MooTools

17 Mar

+ 5

Si estás pensando en añadir un menú contextual a tu aplicación web, esta opción desarrollada en MooTools es de las más bonitas que he visto. Con una gran cantidad de opciones podrás ajustar este menú a tu aplicación e integrarlo perfectamente.[Demo][Descargar]

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.

Cambia el tamaño de la fuente dependiendo del tamaño del párrafo

26 Ene

+ 4

En CSS-Tricks nos muestran como cambiar el tamaño de la fuente de nuestros parrafos dependiendo del número de palabras que estos contengan.

bigandsmallquote

// Código para MooTools
window.addEvent('domready',function() {

	$quote = $$('.post p')[0];

        var $numWords = $quote.get('text').split(' ').length; 

        if (($numWords >= 1) && ($numWords < 10)) {
                $quote.setStyle('font-size','36px');
        }
        else if (($numWords >= 10) && ($numWords < 20)) {
                $quote.setStyle('font-size','32px');
        }
        else if (($numWords >= 20) && ($numWords < 30)) {
                $quote.setStyle('font-size','28px');
        }
        else if (($numWords >= 30) && ($numWords < 40)) {
                $quote.setStyle('font-size','24px');
            }
        else {
                $quote.setStyle('font-size','20px');
        };
});
// Código para jQuery
$(function(){

    var $quote = $(".post p:first");

    var $numWords = $quote.text().split(" ").length;

    if (($numWords >= 1) && ($numWords < 10)) {
        $quote.css("font-size", "36px");
    }
    else if (($numWords >= 10) && ($numWords < 20)) {
        $quote.css("font-size", "32px");
    }
    else if (($numWords >= 20) && ($numWords < 30)) {
        $quote.css("font-size", "28px");
    }
    else if (($numWords >= 30) && ($numWords < 40)) {
        $quote.css("font-size", "24px");
    }
    else {
        $quote.css("font-size", "20px");
    }    

});

Una idea muy interesante pare tener presente….