Contenido

Crea tu propio framework de animaciones

25 mar

+ 5

Interesante artículo en el que nos muestra, en pocos pasos y mucho código como crear nuestro propio framework Javascript destinado a trabajar con animaciones. Ideal para los que queremos minimizar nuestro código Javascript eliminando esos KB que los frameworks nos incluyen

// Definimos el constructor
function Effect(opt) {
  this.opt = {
    element: opt.element,
    duration: opt.duration || 1000,
    fps: opt.fps || 40,
    onComplete: opt.onComplete || function(){}
  };
}

Effect.compute = function(from, to, delta) {
  return from + (to - from) * delta;
};

// Métodos de la clase
Effect.prototype = {
  start: function(props) {
    if(this.timer) return;
    var that = this, fps = this.opt.fps;
    this.time = +new Date;
    this.timer = setInterval(function() { that.step(props); },
                             Math.round(1000/fps));
  },
  step: function(props) {
     var currentTime = +new Date, time = this.time, opt = this.opt;
     if(currentTime < time + opt.duration) {
      var delta = (currentTime - time) / opt.duration;
     this.setProps(opt.element, props, delta);
    } else {
      this.timer = clearInterval(this.timer);
      this.setProps(opt.element, props, 1);
      opt.onComplete();
    }
  },
  setProps: function(elem, props, delta) {
    var style = elem.style;
    for(var prop in props) {
      var values = props[prop];
      style[prop] = Effect.compute(values[0], values[1], delta)
        + (values[2] || '');
    }
  }
};

Y para usarla, simplemente tendremos que definir las nuevas propiedades del elemento al que le queremos aplicar el efecto.

var elem = document.getElementById("myElementId");
var fx = new Effect({
  element: elem,
  duration: 1000
});
fx.start({
  'width': [0, 20, 'px'],
  'height': [0, 5, 'em']
});

Y listo, ya tenemos efecto. No he probado a encadenar efectos, pero debería funcionar, permitiendo conseguir animaciones interesantes.

MarkerCSS, framework CSS español para maquetar más fácilmente

28 ene

+ 10

MarketCSS es un framework CSS desarrollado por Jose Castro que nos permite simplificar la tarea de maquetar en CSS.

// Referencia "lh" + número de 80 a 200 de 10 en 10
// Interlineado de 80% a 200% de 10 en 10; por ejemplo "lh120"
<div class="lh120"></div>

// Referencia "b" negrita
<div class="b"></div>

// Referencia "i" cursiva
<div class="i"></div>

// Referencia "n" normal
<div class="n"></div>

// Referencia "u" subrayado
<div class="u"></div>

Mediante un sistema de referencias, que usaremos como clases en los elementos de nuestro HTML, obtendremos los resultados preestablecidos ahorrándonos una buena cantidad de código CSS.

Via

BaseJS, un framework JS exclusivo para el iPhone

27 abr

+ 0

Paul Armstrong, ha desarrollado BaseJS. Un framework Javascript especializado en los nuevos dispositivos móviles, concretamente los que usan WebKit como navegador web.

new io('/results.json', {
    format: 'json',
    method: 'post',
    params: { mustache: true },
    onSuccess: function(response) { 
        alert(response); // response == data returned from server
    }, 
    onFailure: function() { 
        alert('There was an error getting the data');
    }
});

Una de las curiosidades de este framework es que usa Sizzle como selector CSS3, lo que nos permite obtener todas las posibilidades establecidas por el estandar CSS3 con la que seleccionar elementos de nuestro DOM, sin tener en cuenta la velocidad del mismo. Todo esto siempre y cuando el navegador no tenga incorporado querySelector(), en caso contrario el se encargará de generar la llamada ha Sizzle para que dispongamos de el selector.

En tan solo 8kb, no podemos hacer maravillas, pero nos dará más de lo que necesitamos para hacer aplicaciones robustas y completamente compatibles con estos dispositivos.

El framework se encarga de extender los objetos nativos del lenguaje y elementos del DOM, algo diferente a lo que hace jQuery, que extiende elementos ondemand. De esta forma una vez cargada la página, todos los elementos disponen de las nuevas funcionalidades.

Tambien se aprovecha de la curiosa “caché” del iphone para almacenar datos. Y es que esta caché, por llamarla de alguna manera, no es una caché en si mismo, sinó un sistema de ficheros menores a 25kb que mediante la modificación de cabeceras “Expires” y “Cache-control” nos permite almacenar 19 ficheros de 25kb lo que es igual a 475kb de caché :D (Aunque se borrará al reinciar el dispositivo)

Podeis ver el código y la documentación o si directametne quereis descargarlo y poneros a trabajar con él desde aqui mismo.

Ext Core 3.0 ha visto la luz

6 abr

+ 8

Los amantes de Ext.js deben estar contentos ya que el día 4 de este mes ha salido a la luz la versión 3.0 del Core (o funcionalidades básicas).

Ext.onReady(function() {
    Ext.DomHelper.append(document.body, {tag: 'p', cls: 'some-class'});
    Ext.select('p.some-class').update('Ext Core successfully injected');
});

Esta versión, puede ser comparada con otros frameworks, como jQuery, MooTools, Prototype,… debido a que únicamente usa dispone de las funcionalidades necesarias para manipular el DOM, gestionar Eventos, aplicar estilos CSS, todo lo que puedas necesitar de Ajax y JSON y un pequeño set de animaciones.

Esta implementación, de tan solo 25kb (minified y gzipped) permite tenerlo en cuenta a la hora de optar por un frameworks JS debido a su peso, comparable con jQuery (19kb),  MooTools (18kb) o Prototype (29kb “sin comprimir”).

Esto es una gran noticia ya que recordemos en las pruebas que estuve haciendo sobre los frameworks JS, quedó bastante claro que a falta de las pruebas de Dojo (Gonzalo, muchísimas gracias por el fichero pero aún no he tenido tiempo de mirarlo), Ext.js era el framework JS más rápido en manipulación DOM.

Al puro estilo de MooTools, Prototype y otros, Ext.js permite la creación de Clases con fin de mejorar la integración de plugins para esta framework.

Más Información

  1. Manual de Ext.js Core 3.0
  2. Guía rápida de Ext.js para amantes de jQuery.
  3. Comparativa entre Ext.js Core 3.0 y jQuery 1.3.

Frameworks CSS más usados

14 feb

+ 10

En CSS-Trick han hecho una encuesta para saber que frameworks CSS son los más usados entre de los desarrolladores web.

frameworks_css

Revisando los resultados, vemos que más del 50% de los encuestados no usan un framework CSS en sus desarrollos, seguidos los que desarrollan su propio framework CSS a medida que lo van necesitando. Tenemos que irnos al 3er puesto para encontrar 960 Grid System que con un 11% se lleva el premio al framework CSS más usado seguido de BlueprintCSS con un 10%.

Me ha sorprendido la cantidad tan baja de desarrolladores que usan un framework CSS, ¿Tu usas alguno?¿Cual?

Emastic beta3, framework CSS

13 nov

+ 1

Emastic es un framework CSS con el que podremos facilitarnos el trabajo a la hora de maquetar nuestras aplicaciones web. Actualmente está en fase beta (concretamente la 3) y ya podemos ver las maravillas que con él podemos hacer.[ % ejemplo / absolute ejemplo]

WTFramework, un bookmark para conocer el framework de una web

13 nov

+ 2

¿Te gustaría conocer el framework que usan en esa aplicación tan molona que siempre visitas? Pues, puedes hacerlo revisando el código fuente o usando herramientas como Firebug para ver las entrañas y descubrilo, pero si eso puede suponer un problema, ya que te roba algo de tiempo, puedes usar WTFramework.

wtframework2

WTFramework es un bookmark que podemos guardar en nuestros marcadores y que al accionarlo sobre una aplicación nos muestra en la esquina superior derecha la información referente al framework JS que se está usando en ella.

Actualmente la lista de detectados es esta:

 

  • MooTools
  • jQuery
  • Prototype
  • Script.aculo.us
  • YUI
  • Base2
  • Mochikit
  • Dojo

[Bookmark]

BlueTripCSS, lo mejor de los CSS frameworks en uno

10 nov

+ 2

BlueTripCSS es un framework CSS que recoge las mejores ideas e implementaciones de los frameworks CSS más importantes y reconocidos. La idea era compactar todas estas grandes ideas dispersas en varios frameworks y crear uno con lo mejorcito de cada uno de ellos. A simple vista, parece que lo han conseguido, pero habrá que ponerle las manos encima para verificarlo.

Crea tu propio framework javascript

28 sep

+ 58

El uso de frameworks Javascript aporta muchas ventajas al desarrollo web, facilidad de uso, estandarización, cross-browsing, … pero estas ventajas nos hacer perder el control y el conocimiento del código, sin contar con la carga de funcionalidades extras que no llegamos a usar.

Por estos motivos, llevo ya tiempo pensando en montar un framework Javascript que cubra mis necesidades, algo ligero y completo que me permita tener el completo control sobre el javascript que desarrollo.

Franki.js

Vamos a ver como montar tu propio framework javascript, montando las funciones básicas para posteriormente ir añadiendo las que necesitemos sin alterar el resto del framework.

Franki.js es un nombre que creo le viene que ni pintado, ya que nos vamos a nutrir de trozos de otros scripts con los que montaremos nuestra criatura. Nos sentiremos con el Dr. Frankenstein creando a su criatura :D

var franki = {
   .. opciones ..
};

Extendiendo

La clave de los frameworks Javascript es sin duda la capacidad de extender elementos y así añadir nuevas funcionalidades a los elementos DOM con los que generalmente trabajamos. La función que es capaz de extender cualquier elemento es realmente sencilla, pero a la vez realmente poderosa.

extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
 },
// Ejemplo
franki.extend(document.getElementById("logo"), {option: 'nueva propiedad'});

Como podemos ver, esta función recibe 2 parámetros, el elemento  que queremos extender y las opciones que queremos añadir a dicho elemento.

Recogiendo elementos

La función que usamos más en nuestros scripts es sin duda document.getElementById(); y evidentemente tenemos que reducir el número de letras que hemos de teclear para obtener un elemento pasándole un ID.

get: function(id){
        return franki.extend(document.getElementById(id), franki);
},
// Ejemplo
franki.get("logo);

Aprovechando que ya disponemos de extend() devolvemos el elemento extendido con las propiedades que franki.js va a incorporar.

Esta función no hace nada especial, aunque puede extenderse fácilmente con todas las posibilidades que javascript nos ofrece.

Creando e Insercción de Elementos

La creación de elementos DOM es otra funcionalidad que usamos considerablemente en nuestros scripts, por lo que es realmente necesario enmascarar la función document.createElement();

 create: function(type){
        return franki.extend(document.createElement(type), franki);
  },
// Ejemplo
var newDiv = franki.create("div");

insert: function(what) {
        return this.appendChild(what);
},
// Ejemplo
franki.get("logo).insert(newDiv);

Seguimos devolviendo el elemento extendido con las propiedades que poco a poco a ir haciendo crecer.

Atributos y Estilos

Los elementos que hemos extendido, necesitan tener la capacidad de devolver y modificar los atributos y estilos que los componen, para ello crearemos 2 funciones más.

css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
},
// Ejemplo
var oldBorder = franki.get("logo").css("border");
franki.get("logo").css("border", "1px red solid");

attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
},
// Ejemplo
var oldSrc = franki.get("logo").attr("src");
franki.get("logo").attr("src", "NUEVO_SRC");

Como vemos, disponemos de 2 nuevas propiedades que automáticamente se añadirán a los elementos con los que trabajemos.

Gestión de eventos

Los eventos asociados a los elementos es algo que por comodidad y por compatibilidad con navegadores podemos aprovechar para incluir en nuestro framework.

 addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        this[type+fn] = function(){this['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
return this;
    },
// Ejemplo
franki.get("logo").addEvent("click", function(){ alert("Click");});

removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
return this;
    },
// Ejemplo
franki.get("logo").removeEvent("click", function(){ alert("Click");});

Estas funciones, sacadas de este post de John Resig, nos sirven para poder trabajar perfectamente con nuestros elementos, aunque podríamos optar por la última revisión de Incoherence Babble.

Encadenamiento

Algo que siempre me ha gustado de los frameworks javascript actuales es la posibilidad de encadenar funcionalidades en la misma línea. Esto además de ayudarte a reducir el peso de nuestros scripts ayuda (a mi por lo menos) a ver más claro el código que estas escribiendo.

La clave de nuestro framework para poder encadenar funcionalidades es SIEMPRE devolver el elemento con el que estamos trabajando. Si nos fijamos en las funciones anteriores, nos devuelven el elemento que estamos usando. De esta forma podemos conseguir cosas como estas.

franki.get("logo").css("border", "2px red solid").addEvent("mouseover", function(){alert("MouseOver");});

Últimos retoques

Necesitamos un alias para evitar la llamada franki.get(), que es la base del framework. Por ello podemos optar por el famoso $(), o cualquier otra combinación que nos guste o nos vaya bien.

window.get = el.get;
get("logo").css("border", "2px red solid");

Aclaraciones

Las funciones son muy básicas y únicamente son para que sirvan de ejemplo de por donde empezar a construir tu propio framework, las posibilidades de extensión son infinitas.

El código

Veamos como quedaría todo juntito :D

var franki = {
    get: function(id){
        return franki.extend(document.getElementById(id), franki);
    },
    extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
    },
    create: function(type){
        return this.extend(document.createElement(type));
    },
    insert: function(what) {
        return this.appendChild(what);
    },
    css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
    },
    attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
    },
    addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        this[type+fn] = function(){this['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
    return this;
    },
    removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
    return this;
    }
};
// Alias
window.$ = franki.get;

Promoción

¿Has usado este post para crear tu propio framework? Pues usalo tambien para promocionarlo, usa los comentarios, evitar pegar el código, mejor usar un enlace algún lugar donde ver el código/ejemplos/tutoriales/…

Mejoras

Jose nos comenta el problema que puede provocar que franki disponga de métodos públicos a los que podrían acceder externamente provocando errores al acceder al elemento this.

franki.css("border", "1px red solid");
// --> Error

Este ejemplo nos arrojaría un error al detectar que this (franki) no dispone de las propiedades própias de un HTMLElement, por ese momento Jose nos propone un sistema para sacar lo métodos de franki, haciéndolos privados e innaccesibles desde fuera.

var franki = (function(){
    var metodosExtendidos = {
    get: function(id){
        return franki.extend(document.getElementById(id), franki);
    },
    extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
    },
    create: function(type){
        return this.extend(document.createElemen(type));
    },
    insert: function(what) {
        return this.appendChild(what);
    },
    css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
    },
    attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
    },
    addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        var oThis = this;
        this[type+fn] = function(){oThis['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
    return this;
    },
    removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
    return this;
    }
};

    return {
       extend: function(el, opt){
         for (var name in opt) el[name] = opt[name];
         return el;
       },
       get: function(id){
               return franki.extend(document.getElementById(id), metodosExtendidos);
       }
    };
}());

Como podemos ver la variable metodosExtendidos se convierte en privada y es la usada en la función get() para extender el elemento que queremos usar.

Gracias Jose por la corrección, no había pensado en esa posibilidad.

10 frameworks javascript que debes conocer

4 sep

+ 17

Los desarrolladores web, Maquetadores y diseñadores ya deben conocer Javascript. El que no conozca javascript debería ir poniendose las pilas para estar al día en el lenguaje de cliente de futuro (y presente).

Para los que nos defendemos un poco en el tema y queremos ampliar nuestra capacidad y velocidad de desarrollo podemos optar por usar un framework que nos ofrezca una gran cantidad de opciones de uso cotidiano.

  1. SproutCore
  2. Spry
  3. JavaScriptMVC
  4. qooxdoo
  5. midori
  6. Archetype JavaScript Framework
  7. June Framework
  8. UIZE
  9. SimpleJS
  10. Fleegix.js