aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

aNieto2k iCal Version

16 feb

aNieto2k hace 1076 días en: Asides, CSS, javascript, Programacion, themes, webdev, Wordpress

+ 7

Hace unos días vimos como crear un calendario simulando el iCal del iPhone, pues aprovechando el script os presento, aNieto2k versión iCal. Esta noche subiré el código.

Se levanta el telón…

15 feb

aNieto2k hace 1077 días en: Humor

+ 28

Este chiste es culpa de mi amigo Pere Ferrater…

Se levanta el telón, …..

se ve al Excel disfrazado de Yoda y el PowerPoint disfrazado de Darth Vader llamando a una puerta.

¿Nombre de la película?

Respuesta en los comentarios.

Publicidad en aNieto2k (II)

15 feb

aNieto2k hace 1077 días en: Asides, webdev

+ 0

Para los que no se acuerden o no lo sepan aún está disponible el espacio lateral para promocionar eventos relacionados con el desarrollo web.

rel=”canonical”, lo último para combatir el contenido duplicado

14 feb

aNieto2k hace 1078 días en: estandares, web, webdev

+ 20

Via Adseok, descubro lo último propuesto por los principales buscadores para combatir el contenido duplicado. Se trata de un rel que usaremos con el tag <link /> entre los tags <head /> de las páginas que contengan contenido publicado dentro del mismo dominio.

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish" />

Este tag se ha de insertar en las página de contenido duplicado y el href apunta al contenido original. WordPress, al igual que la mayoría de CMS dispone de varias opciones para acceder al mismo contenido. Haciendo que los buscadores detecten este contenido como duplicado.

http://yourdomain.com/blog/

http://www.yourdomain.com/blog/

http://yourdomain.com/blog/index.php

http://www.yourdomain.com/blog/?paged=1

http://yourdomain.com/blog/?paged=1

....

Esto había sido un problema que los amantes del SEO estaban deseando solventar, incluso algunos creen que es el mayor avance seo desde los Sitemaps.

WP-Canonical, se encarga de hacer el trabajo por nosotros y nos introduce el <link /> necesario en los <head /> de todo el blog para que que los buscadores detecten que es contenido duplicado y que no lo és.

Instalación

Descargar el plugin
Subir el fichero canonical.php al directorio wp-content/plugins/
Activar el plugin
Esperar a que los robots pasen por tu WordPress y detecten el tag.

Sin plugin

Si no nos gusta la idea de añadir un plugin más a nuestra lista, podemos añadir este código al function.php de nuestro theme y obtendremos un resultado similar.

function set_canonical() {
  if ( is_single() ) {
    global $wp_query;
    echo '<link rel="canonical" href="'.get_permalink($wp_query->post->ID).'"/>';
  }
}
add_action('wp_head', 'set_canonical');

Crear un iCal (estilo iPhone) con jQuery

14 feb

aNieto2k hace 1078 días en: Apple, CSS, ipod, javascript, Programacion, webdev

+ 16

El calendario del iPhone va a dejar de ser únicamente conocido por ese nombre ya que ahora con jQuery podemos conseguir un calendario de similar aspecto para nuestras páginas web.

Mediante unas tablas, un poco de CSS y un mucho de jQuery obtenemos el resultado que podemos ver en el ejemplo. Tambien podemos descargar el código y usarlos en nuestras aplicaciones web.

Programación Orientada a Objetos en Javascript

14 feb

aNieto2k hace 1078 días en: javascript, Programacion, webdev

+ 6

Por definición, Javascript no es un lenguaje orientado a objetos, sinó orientado a prototipos. Esto solo significa que Javascript no diferencia entre Clases y Objetos, trata a ambos como parte de un objeto “prototipo” que sirve de base para crear los demás objetos.

A pesar de todo, existen implementaciones que nos permiten usar este paradigma o metodología con simulaciones desarrolladas en el propio lenguaje.

1) Joose-js

Joose-js, es quizás la librería más nueva que nos permite utilizar esta metodología, capaz de dotarnos de Clases, Herencia,… funcional en todos los navegadores.

Demo

// Create a class called Point
Class("Point", {
    has: {
        x: {
            is:   "rw",
            init: 0
        },
        y: {
            is:   "rw",
            init: 0
        }
    },
    methods: {
        clear: function () {
            this.setX(0);
            this.setY(0);
        }
    }
})

// Use the class
var point = new Point();
point.setX(10)
point.setY(20);
point.clear();

2) Prototype

Prototype es uno de los primeros frameworks JS que incorporaban esta posibilidad y que extendía los elementos que lo componían de esta forma.

Demo

var Animal = Class.create({
  initialize: function(name, sound) {
    this.name  = name;
    this.sound = sound;
  },

  speak: function() {
    alert(this.name + " says: " + this.sound + "!");
  }
});

// subclassing Animal
var Snake = Class.create(Animal, {
  initialize: function($super, name) {
    $super(name, 'hissssssssss');
  }
});

var ringneck = new Snake("Ringneck");
ringneck.speak();
//-> alerts "Ringneck says: hissssssssss!"

3) Base2

Base2, el framework desarrollado por Dean Edwards, es (sinó recuerdo mal) la primera implementación de este tipo en un framework JS.

Demo

var Animal = Base.extend({
  constructor: function(name) {
    this.name = name;
  },

  name: "",

  eat: function() {
    this.say("Yum!");
  },

  say: function(message) {
    alert(this.name + ": " + message);
  }
});

4) MooTools

MooTools, apareció hace 2 años (casi 3) y desde que nació apostó por esta metodología. Su código está desarrollado mediante Clases que se encargan de extender todos los objetos nativos del lenguaje.

Demo

var Cat = new Class({
    initialize: function(name){
        this.name = name;
    }
});
var myCat = new Cat('Micia');
alert(myCat.name); //alerts 'Micia'

var Cow = new Class({
    initialize: function(){
        alert('moooo');
    }
});
var Effie = new Cow($empty);

5) Simple Javascript Inheritance

John Resig publicó hace unos meses un sistema de tan solo 25 líneas para conseguir generar clases con sus respectivos objetos.

Código

(function(){
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;

  // The base Class implementation (does nothing)
  this.Class = function(){};

  // Create a new Class that inherits from this class
  Class.extend = function(prop) {
    var _super = this.prototype;

    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    initializing = true;
    var prototype = new this();
    initializing = false;

    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          return function() {
            var tmp = this._super;

            // Add a new ._super() method that is the same method
            // but on the super-class
            this._super = _super[name];

            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            var ret = fn.apply(this, arguments);
            this._super = tmp;

            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }

    // The dummy class constructor
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }

    // Populate our constructed prototype object
    Class.prototype = prototype;

    // Enforce the constructor to be what we expect
    Class.constructor = Class;

    // And make this class extendable
    Class.extend = arguments.callee;

    return Class;
  };
})();

Demo

var Person = Class.extend({
  init: function(isDancing){
    this.dancing = isDancing;
  }
});

var Ninja = Person.extend({
  init: function(){
          this._super( false );
  }
});

var p = new Person(true);
p.dancing; // => true

var n = new Ninja();
n.dancing; // => false

6) Class2k (osea una versión que he montado yo)

El nombre lo he puesto por poner algo, y el código lo he extraido de MooTools 1.11. Considero que es una implementación muy limpia y sin duda nos permite crear clases con sus objetos. Lo he portado para usarse con extend() y nos permite orientar a objetos nuestro código con solo 61 líneas.

Código

function extend(opt, el){
    var el = el || this;
    for (var property in opt) el[property] = opt[property];
    return el;
};
function type(el, type){ return (el instanceof type);}

function merge(){
	var mix = {};
	for (var i = 0; i < arguments.length; i++){
		for (var property in arguments[i]){
			var ap = arguments[i][property];
			var mp = mix[property];
			if (mp && type(ap, Object) && type(mp, Object)) mix[property] = merge(mp, ap);
			else mix[property] = ap;
		}
	}
	return mix;
};

var Class = function(properties){
        var klass = function(){
            return (arguments[0] !== null && this.initialize && type(this.initialize, Function)) ? this.initialize.apply(this, arguments) : this;
        };
        extend(this, klass);
        klass.prototype = properties;
        klass.constructor = Class;
        return klass;
};

extend({
    empty: function(){},
    extend: function(properties){
        var proto = new this(null);
		var Merge = function(previous, current){
	        if (previous && previous != current){
	            if (current.constructor != previous.constructor) return current;
	            switch(current.constructor){
	                case Function:
	                    var merged = function(){
	                        this.parent = arguments.callee.parent;
	                        return current.apply(this, arguments);
	                    };
	                    merged.parent = previous;
	                    return merged;
	                case Object: return merge(previous, current);
	            }
	        }
	        return current;
	    };
        for (var property in properties){
            var pp = proto[property];
            proto[property] = Merge(pp, properties[property]);
        }
        return new Class(proto);
    },
    implement: function(){
        for (var i = 0, l = arguments.length; i < l; i++)
			extend(arguments[i],this.prototype);
    },
}, Class.prototype);

Demo

var Animal = new Class({
	initialize: function(age){
	     this.age = age;
	}
});
var Cat = Animal.extend({
	initialize: function(name, age){
		this.parent(age); //will call the previous initialize;
		this.name = name;
	}
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); //alerts 'Micia'
alert(myCat.age); //alerts 20

¿Y tu que? ¿Usas la Orientación a Objetos en tu código Javascript?

Frameworks CSS más usados

14 feb

aNieto2k hace 1078 días en: CSS, estandares, Programacion, web, webdev

+ 10

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

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?

Primeras imagenes de Google Chrome para Mac Os X

14 feb

aNieto2k hace 1078 días en: Actualidad, Apple, de la red, estandares, web, webdev

+ 3

Aunque hace ya muchos meses que apareció Google Chrome en nuestras vidas. Como casi todos los productos de Google se ha convertido en algo que usamos a diario. Personalmente no es el navegador que más me gusta, pero gracias a su velocidad, tanto de arranque como en la carga de páginas, se ha ganado un icono fijo en mi escritorio (en el trabajo).

Esta imagen muestra que Google Chrome en Mac OS X es una realidad y que están trabajando en ella. Una versión que sorprendentemente aún no está para este sistema operativo.

Recordemos que hace unos meses hablamos de Stainless, una versión compilada para Mac OS X que no acababa de funcionar perfectamente, pero que nos permitía darnos una idea de lo que podríamos llegar a tener con la versión oficial.

Más información / Via