Contenido

Publicidad en aNieto2k

30 sep

+ 31

Tras unos meses de prueba y debido al poco interés por parte de los anunciantes he pensado en darle un uso productivo a los banners laterales. 

Aprovechando que aNieto2k se ha hecho algo conocido y que se está consolidando como blog de programación  web y WordPress, quiero aportar un granito de arena más a los eventos hispanos. Por ello, ofrezco, gratuitamente los dos espacios para promocionar eventos relacionados con la temática del blog.  

¿Que ofrezco?

  1. Un banner en el lateral (hay 2 disponibles).
  2. Completamente gratis y sin ningún tipo de compromiso.

¿Requerimientos?

  1. Estar relacionado con la temática del blog.
  2. Un banner de 200×125 estático (nada de Gif’s animados, flash, …)
  3. Enviarmelo con un mínimo de 2 meses de antelación (solo se promoveran eventos durante los 2 meses previos).
  4. Un jamón (esto es opcional :D).

¿Puntualizaciones?

Dependiendo del número de eventos mostrados se aplicará un porcentaje de páginas vistas para cada uno de ellos, por lo que se reusarán los 2 banners para diferentes eventos. Esto implica:

  1. No hay posibilidad de cambiar el % de un solo evento (osea no quiero).
  2. No hay posibilidad de aparecer en otro banner para evitar salir con otros eventos.

¿Como aviso de mi evento?

Pues muy simple, te pones en contacto conmigo y me informas de que va el evento, un enlace hacia el evento y un banner 200x125px. En cuando lo lea y tenga tiempo lo añadiré a los eventos ya existentes.

¿Que opinas de la iniciativa? ¿Deberían apuntarse otros blogs?

Me gustaría conocer impresiones sobre la iniciativa, dejalás en los comentarios.

Gana un gelaskin con HacheMuda

29 sep

+ 1

Guillermo me ha convencido (no le ha costado mucho :D) para formar parte del jurado del nuevo concurso que HacheMuda nos propone. Simplemente hay que crear un fondo de pantalla para el iPhone en el que aparezca el muñeco de HacheMuda. Tienes 3 posibles categorías con la posibilidad de obtener en gelaskin si ganas alguna de ellas. Tienes hasta el 6 de Octubre, asi que … ¿que haces leyendo esto?

Ficheros de configuración dependientes del servidor

29 sep

+ 15

Cuando desarrollamos una aplicación, generalmente trabajamos, inicialmente en local con unos datos para conectar a la base datos, unos ficheros con datos, unas rutas diferentes,… y esto suele provocar ediciones de fichero para que al subirlo a producción (al servidor online) no provoquen un error.

Una solución sencilla que podemos usar es la siguiente:

<?php
    // Nombre del fichero 
    $configfile = $_SERVER["SERVER_NAME"].".php";

    // Cargamos el fichero
    if (file_exists($configfile)) require $configfile;
    else die("Fichero ".$configfile." no existe");

?>

De esta forma podemos tener 2 ficheros con los datos necesarios para conectar en ambas bases de datos, con las rutas correctas para cada servidor,… completamente independientes. En mi caso, los ficheros son:

  1. localhost.php
  2. www.anieto2k.com.php

Automáticamente al entrar en la aplicación, comprobaremos $_SERVER["SERVER_NAME"] y cargaremos el fichero que sea oportuno.

Es una tontería, pero yo estuve mucho tiempo modificando los ficheros antes de subirlos y volviendo a modificarlos al volver a descargarlos :D

Evitando la caché con plugins en WordPress

29 sep

+ 15

La gente de AyudaWordpress comenta en ¿Utilizo caché o no? que uno de los problemas de usar plugins para cachear en contenido es el propio cacheo de secciones/ficheros que no deberían ser cacheadas/os.

Pues eso tiene fácil solución :D

En nuestros themes, simplemente tendremos que añadir estas líneas, dependiendo de si es un fichero o una función lo que queremos evitar que sea cacheado.

Ficheros

<!--mclude file.php-->
<?php include_once(ABSPATH . 'file.php'); ?>
<!--/mclude-->

La ruta del fichero ha de ser relativa desde la raiz de WordPress. Evamos un ejemplo que uso en mi theme.

<!--mclude wp-content/themes/anieto2k08/ad.php-->
<?php include_once(ABSPATH . 'wp-content/themes/anieto2k08/ads.php'); ?>
<!--/mclude-->

Funciones

<!--mfunc function_name('parameter', 'another_parameter') -->
<?php function_name('parameter', 'another_parameter') ?>
<!--/mfunc-->

Este código funciona en WP-Cache, 1BlogCacher, WP Super Cache.

Microsoft y Nokia adoptan jQuery

28 sep

+ 12

Desde el blog de jQuery, John Resig anuncia que Microsoft y Nokia están pensando adoptar a jQuery para su plataforma de desarrollo oficial.

Por una parte Microsoft está pensando en ampliar el uso de jQuery en Visual Studio y formar parte de la distribución. Además Microsoft está pensando en desarrollar nuevos widgets para usar fácilmente con la tecnología .NET.

Por otro lado, Nokia está trabajando en un navegador web basado en Webkit (ALELUYA!!!!!) en el que jQuery estará incluido de serie con todo lo que eso puede aportar a los desarrollos. Para empezar Nokia va a migrar algunas de sus aplicaciones para disfrutar de las maravillas que jQuery nos permite realizar.

jquery_prototype_mootools_extjs

Una importante noticia que demuestra una vez más lo relevante que jQuery se ha llegado a hacer en el desarrollo web actual.

Parámetros por defecto en funciones Javascript

28 sep

+ 7

Una de las propiedades de PHP que más me gustan es la posibilidad de especificar un valor por defecto a los parámetros que pasamos a un función.

function miFuncion(param = "uno", param2="dos"){
...
}
// Ejemplo
miFuncion();

De esta forma definimos un valor para los parámetros que en caso de no ser definidos será cargados inicialmente con dichos valores.

Javascript es un lenguaje que no permite especificar el valor de estos parámetros por defecto, pero el ingenio y la imaginación permite que grandes mentes puedan superar estas dificultades.

Function.prototype.defaults = function()
{
  var _f = this;
  var _a = Array(_f.length-arguments.length).concat(
    Array.prototype.slice.apply(arguments));
  return function()
  {
    return _f.apply(_f, Array.prototype.slice.apply(arguments).concat(
      _a.slice(arguments.length, _a.length)));
  }
}

Extendiendo el elemento Function nos evitamos tener que controlar en el interior de nuestra función los parámetros que recibimos:

function foo(a, b)
{
  a = typeof(a) != 'undefined' ? a : 42;
  b = typeof(b) != 'undefined' ? b : 'default_b';
  ...
}

Al haber extendido la función, ahora disponemos de un sistema con el que podemos definir los valores por defecto de los parámetros.

var foo = function(a, b)
{
  ...
}.defaults(42, 'default_b');

En este ejemplo, vemos como definimos por defecto los valores 42 para el parámetro a y ‘default_b’ para el parámetro b.

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.

Probando Stainless, el primer navegador multiproceso para OS X

26 sep

+ 7

Esta tarde los chicos de Applesfera nos traían la noticia de la aparición de Stainless, el primer navegador multiproceso para Mac (únicamente Leopard). Inspirado en Google Chrome este navegador, todavía en versión beta, nos permite tener las pestañas separadas en diferentes procesos con las ventajas que ello conlleva.

stainless

Internamente es una versión de WebKit por lo que los resultados obtenidos en los principales tests de estándares son bastante interesantes.

  • Acid2, pasado perfectamente.
  • Acid3, 74/100 aún le queda un poco, aunque con versiones más actuales de WebKit se solventaría.
  • CSS3 Selector test, curiosamente pasa todos los selectores except :link y :visited (que raro).
  • SunSpider (Test Javascript), sorprendentemente lo pasa en 2714 ms, un tiempo muy similar a Google Chrome.
  • Dromaeo (Test Javascript), en los tiempos de Google Chrome (6519.60ms).

stainless2

El multiproceso es sin duda el mayor atractivo de este nuevo navegador y la verdad es que las pruebas que he realizado han demostrado que el navegador es bastante estable, pero he podido hacer que pareciera que se colgaba para cerrar el proceso de la pestaña afectada y la navegación ha seguido sin ningún tipo de problema.

Las características de esta versión son muy escuetas y pobres, pero son un comienzo:

  • Multiproceso (un proceso por tab)
  • Drag & Drop entre ventanas.
  • Unificación de la barra de direcciones y motor de busqueda.
  • Navegación privada (no me ha funcionado).

A la espera de una verdadera versión de Google Chrome para OS X, podemos ir haciendo pruebas con la versión disponible para descargar.

Más de 7500 iconos para tus aplicaciones

26 sep

+ 2

Lucas, otra vez me demuestra que Internet es más grande de lo que nos podemos imaginar, y es que con otra recopilación de iconos para nuestras aplicaciones creo que pocos iconos puedan quedar por ahi que Lucas no haya encontrado. Entre los primeros 7500 iconos y estos más de 7500 tenemos más que suficientes para nuestras aplicaciones.

JSCommandlet, debuguea tu Javascript con Javascript

26 sep

+ 1

Los desarrolladores web vimos el cielo abierto con la aparición de Firebug, una forma muy cómoda y rápida de depurar nuestros scripts, diseños,… con la capacidad de verlo en vivo mientras manoseamos el código.

Para depurar Javascript es una herramienta perfecta, y lamentablemente no tiene hermanos parecidos en Internet Explorer 6 y 7, aunque empiezan a apuntar buenas maneras para Internet Explorer 8.

jscommandlet

Con JSCommandlet podemos montar nuestro propio debugueador de Javascript simplemente lanzando un bookmark en la página que queremos depurar, esta herramienta desarrollada en Javascript nos ofrece una interface similar a la consola de Firebug y nos permite ejecutar sentencias Javascript directamente en ella. Vale la pena conocerla por lo que pueda pasar :D