Contenido

Permisos y capacidades en WordPress

27 sep

+ 10

Para que podamos administrar nuestro blog lo más correctamente posible, y que cada uno de los usuarios encaje en un rol y no pueda acceder a funcionalidades que no estén dentro de las capacidades permitidas para ese rol, WordPress dispone de un sistema con el que manejar este control de permisos es posible.

1) Roles

Lo primero que debemos saber es la cantidad de roles disponibles dentro de una instalación de WordPress.

  1. Administrador
  2. Editor
  3. Autor
  4. Contribuidor
  5. Suscriptor

Estos 5 usuarios dividen una lista de 10 posibles niveles que podemos emplear como usuarios.

Continua —>

CoverFlow en Javascript Open Source

25 sep

+ 3

Si estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox 3.5 + y Safari 4.0) ya que usa canvas para conseguir el efecto. Por suerte, están trabajando en la compatibilidad con los más antiguos.[Descargar][Demo]

Como evitar que dejen comentarios en Google Sidewiki desde tu página web

25 sep

+ 3

Miguel(adSeok) nos muestra una forma evitar que Google SideWiki, la nueva aplicación de Google para intentar dispersar el contenido, permita que los usuarios dejen un comentario mediante esta herramienta.

screenshot
(Ver Imagen)

Esta nueva aplicación, permite que los usuarios que la tenga instalada, puedan generar contenidos (que únicamente serán vistos por otros usuarios que tengan la aplicación) en forma de comentarios sobre una página web, simplemente mediante un click en un nuevo menú lateral.

 RewriteEngine On
 RewriteCond %{HTTP_USER_AGENT} GTB [NC]
 RewriteRule .* notoolbar.php [L]

Con este pequeño código que vemos arriba ubicado en nuestro .htaccess, nuestra página no permitirá acceder que esta aplicación deje comentar nuestras páginas.
Ojo, que el script no permitirá que los usuarios que tengan el plugin instalado puedan acceder a la página redireccionando a notoolbar.php

Aplicaciones Javascript escalables

25 sep

+ 4

Hoy he estado leyendo ojeando una de las presentaciones de Nicholas Zakas, concretamente la de “Scalable Javascript Applications Architecture“. Aunque no es lo primero que leo sobre el tema, me ha gustado la claridad con la que Nicholas lo explica. Voy a intentar dejar constancia de las impresiones sacadas por si a alguien le puede ayudar.

1) Teoría de módulos

La teoría de módulos (como Nicholas la llama) nos dice que una forma de crear una aplicación que sea escalable y fácil de mantener, esta debe estar compuesta por módulos.

¿Que son módulos?

Un módulo (en nuestros términos) es aquella aplicación independiente que forma parte de una estructura mayor. Cada uno de ellos tiene un trabajo y únicamente se encarga de hacerlo.

estacion-espacial-internacional
(Ver Imagen)

(Me ha encantado esta imagen, da una imagen clara del significado de módulo).

Código

Core.register("hola-mundo", function(sandbox){
 // Variables privadas
 var priv = "Privada";

 // Métodos públicos
 return {
   init: function(){
     try{
      sandbox.console("iniciamos el módulo");
     } catch(ex) {
      alert("No se ha encontrado sandbox");
     }
   },
   destroy: function(){
    // destructor
   }
 };
});

Aquí vemos un ejemplo de módulo que registramos con Core.register() que lo veremos más adelante.

Si analizamos el módulo vemos que el primer parámetro informa el nombre del módulo y el segundo especifica la funcionalidad del módulo. Esta funcionalidad recibe como parámetro sandbox (tambien lo veremos más adelante).

Esta funcionalidad nos devolverá un objeto con al menos dos métodos (init() y destroy()) que compondrán las opciones disponibles en el módulo.

init() será tratado como el constructor del módulo y se ejecutará en el momento que se genere el módulo. Por otro lado destroy() será tratado como el destructor del módulo ejecutándose cuando el módulo sea eliminado.

Sandbox

En desarrollo de software se llama Sandbox al entorno aislado de pruebas donde ejecutan los experimientos sobre las aplicaciones. En este caso, prácticamente se basa de lo mismo ya que cada uno de los módulos usará un entorno aislado para los demás módulos.

Código

var Sandbox = function() {
   var private = "Privado";

   return {
     alert: function(str){
       alert(str + private);
     },
     console: function(str) {
       console.log(str);
     }
 }
};

Como vemos el Sandbox, se trata de un elemento que nos ofrece una serie de métodos con los que podremos interactuar con la aplicación. Por ejemplo, podría emplearse para interactuar con el DOM de la aplicación mediante un framework JS (o no), se podría implementar una versión sencilla y controlada de realizar peticiones Ajax o validar formularios,…. Todo ello disponible desde los módulos.

De esta forma los módulos únicamente deben preocuparse de lo que el Sandbox les permite sin preocuparse de lo que hay por debajo de él, facilitando así el desarrollo y la funcionalidad de cada uno de los módulos.

Ejemplo:

// Añadimos método notify() al Sandbox
var Sandbox = function() {
  ...
   notify: function(opt){
     // Comprobaciones previas
     // ....
     $("#notify #title").text(opt.title);
     $("#notify #content").html(opt.content);
   }
  ...
};

// Usamos el método notify() de Sandbox desde el módulo.
Core.register("hola-mundo", function(sandbox){
   // Variables privadas
   ver ver = "1.0";

   return {
    init: function(){
      try{
        sandbox.notify({
          title: "Hola Mundo v." + ver,
          content: 'Esto es una <strong>Prueba</strong>.<br />Para mostrar el uso de módulos'
        });
      } catch(ex) {
        alert("No se ha encontrado sandbox");
      }
    },
    destroy: function(){
     // destructor
     }
   };
});

En el ejemplo vemos que al iniciar el nuestro módulo, llamaremos al método notify() de sandbox sin preocuparnos de lo que hará este método.

El método tras una serie de validaciones prévias, simplemente añadirá un título y un contenido a un elemento #notify usando jQuery.

De esta forma, el Sandbox hace de filtro entre el módulo y el framework controlando lo que este pretende hacer sobre nuestra aplicación.

El Core

En todo lo anterior hemos visto una variable (Core) que parece que es la piedra angular de todo esto.  Se trata de un pequeño script que nos permite registrar módulos y asociar una nueva instancia del SandBox a cada uno de ellos cada vez que se ejecuta.

var Core = function(){
   // Variable privadas
   var modules = {};

   // Cremos la instancia
   function createInstance(moduleID){
    var instance = modules[moduleID].creator(new Sandbox(this)),
    name, method;

    if (!debug) {
      for (name in instance){
        method = instance[name];
        if (typeof method == "function") {
          instance[name] = function(name, method) {
            return function(){
              try { return method.apply(this, arguments);    }
              catch(ex) { log(1, name + "(): " + ex.message);    }
            }
          }(name, method);
        }
      }
    }
  return instance;
 }

 // Método públicos
 return {
   register: function(moduleID, creator) {
     modules[moduleID] = {
       creator: creator,
       instance: null
     };
   },
   start: function(moduleID) {
     modules[moduleID].instance = createInstance(moduleID);
     modules[moduleID].instance.init();
   },
   stop: function(moduleID){
     var data = modules[moduleID];
     if (data.instance) {
       data.instance.destroy();
       data.instance = null;
     }
   },
   startAll: function(){
     for (var moduleID in modules) {
       if (modules.hasOwnProperty(moduleID)) {
         this.start(moduleID);
       }
     }
   },
   stopAll: function() {
     for (var moduleID in modules) {
       if (modules.hasOwnProperty(moduleID)) {
         this.stop(moduleID);
       }
     }
   }
 };
}();

Como vemos se trata de un pequeño script (esto es una base, se puede extender dependiendo de las necesidades del proyecto) que nos permite generar los módulos que queremos por cada aplicación.

Ejemplo

Core.register("...", function(sandbox){});
Core.register("...", function(sandbox){});
Core.register("...", function(sandbox){});
Core.register("...", function(sandbox){});
...

// Iniciamos todos módulos
Core.startAll();

Código completo

Bueno, para verlo todo junto, he creado un fichero .js donde podrás verlo más claramente.

10 estilos para el plugins wp-PageNavi

25 sep

+ 2

Si eres un usuario de WP-PageNavi en tu WordPress, quizás uno de estos estilos harán que mejoren la estética de la paginación de tu blog.[Demos]

jQuery 1.3 Visual Cheat Sheet

24 sep

+ 9

Antonio de Woork nos vuelve a sorprender, gratamente, con una nueva Cheat Sheet. En este caso se trata de jQuery 1.3 y una espectacular (y extensa) hoja recopilatoria con todas las opciones del potente framework.[Descargar][Preview]

Sirve el theme por defecto de WordPress a Internet Explorer 6

24 sep

+ 11

Si la iniciativa NOIE6Day no te convence, puedes optar por hacer que tu WordPress muestre el theme por defecto (kubrick) a tus usuarios con Internet Explorer 6. Para ello, únicamente tendremos que añadir esto al fichero functions.php de nuestro theme.

add_filter('template', 'serve_default_to_iesix');
add_filter('option_template', 'serve_default_to_iesix');
add_filter('option_stylesheet', 'serve_default_to_iesix');
function serve_default_to_iesix($theme) {
 if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 6') !== false)
    $theme = 'default';
 return $theme;
}

Desde este momento, tus usuario tendrán el theme por defecto activo cuando visiten tu blog.

$_GET en Javascript

24 sep

+ 3

Hace ya más de 3 años vimos una función para recoger parámetros pasados por GET mediante Javascript. Esta implementación pasaba por parsear la URL actual y obtener de ahí los parámetros. Pues en codeNothing? han implementado una versión para los amantes de php.

;(function(window){
var
 $_GET = window.$_GET = {},
 $_VAN = window.$_VAN = {},
 location = window.location,
 search = location.search,
 href = location.href, 

 index = search.indexOf('?') != -1 ? search.indexOf('?') + 1 : 0,
 get = search.substr(index).split('&'),
 vanity = href.replace(/^https?:\/\/(.*?)\//i, '').replace(/\?.*$/i, '').split('/'); 

 for (var i in get){
 var split = get[i].split('=');
 $_GET[split[0]] = split[1]||null;
 }
 for (var i in vanity)
 $_VAN[i] = vanity[i]||null;
})(window);
// Modo de uso

var param = $_GET["param"];
alert("Parámetro: " + param);

Como podemos ver, esta función  nos permite añadir al objeto window la variable $_GET y usarla exactamente igual que en PHP.

Booking Calendar, reservas online sobre WordPress

24 sep

+ 4

Booking Calendar es un plugin para WordPress que nos permite administrar un gestor de reservas online usando un WordPress como plataforma. Se trata de añadir la capacidad de gestionar reservas de periodos al puro estilo páginas de reservas de noches de hotel.

booking-calendar
(Ver Imagen)

Como podemos ver, se trata de mostrar al usuario un calendar y un formulario para pedirles una serie de datos necesarios para asociarlos a la reserva.

booking-calendar-admin
(Ver Imagen)

Instalación

Al igual que todos los plugins de WordPress, hemos de seguir unos simples pasos, comunes a todos los plugins.

  1. Descargamos el fichero
  2. Descomprimimos y subimos a nuestro wp-content/plugins/
  3. Activamos el plugins desde el panel de administración.
  4. Configuramos las opciones propias del plugins
  5. Lo disfrutamos :D

Configuración

Tenemos disponible 2 opciones, una versión FREE, límitada en funcionalidades, y una versión comercial a un precio de $99, en la versión FREE nos encontramos con este panel de configuración donde podemos cambiar algunas de las opciones que el plugin límitado nos ofrece.

booking-calendar-admin-options
(Ver Imagen)

Como usarlo

Su uso es tan simple que únicamente tendremos que añadirlo en nuestros artículos pulsando un botón que aparecerá nuevo en el panel de opciones del editor enriquecido.

booking-calendar-admin-insert
(Ver Imagen)

Realmente un plugin excelente para gestionar un pequeño hotel rural, o una casa que querámos alquilar…

Cachea cualquier cosa con Javascript

23 sep

+ 5

Las aplicaciones actuales, que requieren tanto Javascript se ven muchas veces obligadas a usar sistemas de caché para evitar realizar peticiones repetidamente.

var cache = {};

function myFunction() {
 if (cache.myFunction) return cache.myFunction;

 ....

 cache.myFunction = resultado;
 return resultado;
}

Esto, podría pasar por un pequeño ejemplo para tener un simple sistema de caché como resultado de una función. Esto nos obliga modificar las funciones que deseamos que dispongan de esta funcionalidad.

Gunnar Steinn, publica un sistema realmente interesante para evitarnos tener que modificar las funciones de nuestros scripts.

function cacheMethod(context, fn) {
 var oldFunc = fn;
 var funcName = fn.toString();
 funcName = funcName.substr('function '.length);
 funcName = funcName.substr(0, funcName.indexOf('('));

 context[funcName] = function() {
 if (cacheMethod.cache[funcName] == null)
 cacheMethod.cache[funcName] = {};

 // Create a unique key of parameters
 var key = Array.prototype.join.call(arguments, "|");;
 if (cacheMethod.cache[funcName][key] == null)
 cacheMethod.cache[funcName][key] = oldFunc.apply(this, arguments);

 return cacheMethod.cache[funcName][key];
 };
}

El sistema, que únicamente genera automáticamente el mismo sistema que hemos visto antes, únicamente sobreescribe la función antigua con una nueva que comprueba que exista caché antes de enviar los datos.

Como usarlo

Para usarlo únicamente tendremos que informar el contexto en el que queremos guardar la caché y el nombre de la función/objeto que queremos hacer que cachee el resultado.

cacheMethod(contexto, function);

En este momento la function, ya estará sobrecargada con el sistema de caché.