De esta manera el emisor no tiene conocimiento de qué receptor va a ejecutar el comando, favoreciendo el acoplamiento débil.

Ver screencast (duración: 8:05)

• Descargar videotutorial en alta calidad – MOV (14 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (9 MB)

Podéis ver el resto de videotutoriales en la página de screencasts, o suscribiros al podcast de iTunes.

Ejemplo de implementación

Primero creamos el interfaz que implementarán los objetos receptores, seguido de la clase emisora CommandChain, que será la encargada de mantener la lista de instancias de los objetos receptores y pasarles las peticiones a éstos.

<?php
interface ICommand{
	function onCommand($comando, $args);
}
 
class CommandChain{
	private $_commands = array();
 
	public function addCommand($cmd){
		$this->_commands[] = $cmd;
	}
 
	public function runCommand($comando, $args){
		foreach($this->_commands as $cmd){
			if($cmd->onCommand($comando, $args)) return;
		}
	}
 
}

A continuación creamos las clases de los objetos receptores SMSCommand y MailCommand, que implementan el interfaz ICommand.

class SMSCommand implements ICommand{
	public function onCommand($comando, $args){
		if($comando!='NotifyUser' || $args['metodo']!='sms') return false;
		echo("SMSCommand ejecutando $comando. Notificando usuario ".$args['user']. " via SMS.\n");
		return true;
	}
}
 
class MailCommand implements ICommand{
	public function onCommand($comando, $args){
		if($comando!='NotifyUser' || $args['metodo']!='mail') return false;
		echo("SMSCommand ejecutando $comando. Notificando usuario ".$args['user']. " via Email.\n");
		return true;
	}
}

Finalmente, para utilizarlo instanciamos el gestor CommandChain y le añadimos los objetos receptores, para después llamar a su método runCommand que enviará el comando a dichos objetos y sólo uno de ellos responderá dependiendo de un criterio, en este caso del argumento metodo.

$c = new CommandChain();
$c->addCommand(new SMSCommand());
$c->addCommand(new MailCommand());
$c->runCommand('NotifyUser', array('metodo' => 'mail', 'user' => 'test'));

Ver screencast (duración: 12:09)

• Descargar videotutorial en alta calidad – MOV (22 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (16 MB)

Podéis ver el resto de screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes. Os recomiendo especialmente que no os perdáis los tutoriales de dos de los patrones más usados: el Singleton y el Factory Pattern.

Ejemplo de implementación

En primer lugar creamos la clase abstracta de la que heredarán las clases observables, y el interfaz que implementarán los observadores.

<?php
abstract class Observable{
	protected $observers;
	function __construct(){
		$this->observers = array();
	}
 
	public function registrarObserver($observer){
		if(!in_array($observer, $this->observers)){
		    $this->observers[] = $observer;
		}
	}
 
	public function deregistrarObserver($observer){
		if(in_array($observer, $this->observers)){
		    $key = array_search($observer, $this->observers);
		    unset($this->observers[$key]);
		}
	}
 
	abstract public function notificarObservers();
 
}
 
interface Observer{
	public function notificar($sender, $params);
}
?>

A continuación creamos las clases específicas, en este caso una clase observable y dos clases de logging que actuarán de observadores.

<?php
class MiObservable extends Observable{
 
	public function __construct(){
		parent::__construct();
	}
 
	public function notificarObservers(){
		foreach ($this->observers as $observer) {
			$observer->notificar($this, $this->param);
		}
	}
 
	public function Evento($texto){
		$this->param = $texto;
		$this->notificarObservers();
	}
}
 
class Log implements Observer{
	public function notificar($sender, $param){
		echo get_class($sender)." envio $param a las ".date('h:i:s', time())."<br />";
	}
}
 
class SalvarLog implements Observer{
	public function notificar($sender, $param){
		echo "Guardando en BD $param enviado por ".get_class($sender)."... <br /><br />";
	}
 
}
?>

Para utilizarlo, instanciaremos las clases y registraremos los observadores de esta manera:

<?php
$obj = new MiObservable();
$obj->registrarObserver(new Log());
$obj->registrarObserver(new SalvarLog());
 
$obj->Evento('Test 1');
sleep(1);
$obj->Evento('Test 2');
 
$obj->deregistrarObserver(new SalvarLog());
$obj->Evento('Test 3');
?>

Ver screencast (duración: 5:41)

• Descargar videotutorial en alta calidad – MOV (9 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (6 MB)

Podéis ver el resto de screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

Ejemplo de implementación

<?php
abstract class Vehiculo{
	protected $numruedas;
	public function getNumruedas(){
		return $this->numruedas;
	}
 
}
 
class Coche extends Vehiculo{
	protected $numruedas = 4;
}
 
class Bici extends Vehiculo{
	protected $numruedas = 2;
}
 
class VehiculoFactory{
	public static function crearVehiculo($tipo){
		$clasebase = 'Vehiculo';
		if(class_exists($tipo) && is_subclass_of($tipo, $clasebase))
			return new $tipo;
		else
			throw new Exception("No se reconoce el tipo de vehiculo $tipo");
 
	}
 
}
 
$vehiculo = Array('Bici', 'Coche');
 
foreach ($vehiculo as $v) {
	echo "El vehiculo $v tiene ".VehiculoFactory::crearVehiculo($v)->getNumruedas()." ruedas<br />";
}
?>

Empezaremos con el patrón Singleton, ya que es el más fácil de entender y utilizar. Hay varias maneras de implementar una clase singleton, pero aquí os voy a mostrar la forma más sencilla.

Ver screencast (duración: 6:00)

• Descargar videotutorial en alta calidad – MOV (12 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (7 MB)

Podéis ver el resto de screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

¿Qué es un Singleton?

Un singleton consiste en una clase que solo puede tener una instancia y provee de un punto global de acceso a ella. Para ello se crea una instancia de la clase la primera vez que se referencia, y se devuelve ésta en posteriores llamadas. Esto ayuda a crear clases reusables y no depender de variables globales.

Un claro ejemplo de uso es cuando diseñamos una clase para gestionar la conexion y querys con la base de datos. A lo largo de nuestro script crearemos instancias de esa clase, pero nos interesa que siempre sea la misma ya que todas las conexiones compartirán los mismos parámetros y solo cambiará el contenido del query, por lo que no necesitamos una nueva instancia cada vez, consiguiendo con ello una mejora en el rendimiento.

Ejemplo de implementación

class Singleton
{
	private static $singleInstancia;
 
	private function __construct(){ }
 
	public static function getInstancia(){
		if(!self::$singleInstancia){
			self::$singleInstancia = new self();
		}
		return self::$singleInstancia;
	}
 
        /* A partir de aquí vamos añadiendo los métodos la clase */
	function Metodo(){
		var_dump(self::$singleInstancia);
	}
 
}

Usaremos la clase de esta manera:

$mysingleton = Singleton::getInstancia();
$mysingleton->Metodo();

Para hacer nuestro singleton más robusto podríamos definir algunos de los metódos ‘mágicos’ de PHP para evitar el clonado y manejar la serialización, pero los he omitido para mantener la sencillez del ejemplo.

Para los que acaben de conocer mi blog a través del planet, les recomiendo que le echen un vistazo a mis Videotutoriales, sobre todo si están interesados en el framework PHP CodeIgniter (aunque también hay alguno sobre CSS y jQuery).

Ver Demo menú acordeón multinivel

Ver screencast (duración: 8:17)

• Descargar videotutorial en alta calidad – MOV (25 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (13 MB)

No olvidéis echarle un vistazo al resto de videos en la página de videotutoriales, o suscribiros al podcast de iTunes.

Cómo usarlo

Para ver el HTML y CSS no tenéis mas que ver el código fuente del ejemplo de arriba, es bastante similar al del artículo anterior. En el html se añade un nivel más de anidamiento de listas, y en el CSS se le añade la regla #menu ul li li{padding-left: 10px;} para que los niveles inferiores tengan padding (esto podéis modificarlo como queráis).
Para cargar el javascript, podéis copiar el código en la cabecera tal como está en el ejemplo, o bien descargaros el archivo JS con el plugin e insertarlo de esta manera:

<script src="jquery.accordion.js" type="text/javascript" charset="utf-8"></script>

Después sólo os queda llamar al plugin:

<script type="text/javascript" charset="utf-8">
$(function(){
      $('#menu').accordion();
});
</script>

Esto supone un problema: si añadimos una regla genérica a las rutas para redirigir cualquier url al controlador paginas/cargar, no funcionaría el resto de controladores de nuestra aplicación. Deberíamos añadir una regla para cada página o bien para cada controlador que tengamos, con lo cual perdemos dinamismo y nos obliga a editar el fichero de rutas con cada cambio.

Extendiendo la librería Router

Lo que nos interesa es un controlador ‘catch-all’, que capture cualquier texto de la url y lo procese siempre que no exista otro controlador con ese nombre. Para ello vamos a extender la librería de rutas creando un archivo MY_Router.php y guardándolo en application/libraries/. El método estándar para extender librerías es crear un archivo con el mismo nombre añadiendo el prefijo MY_. Aquí tenéis el código de MY_Router.php:

<?php
class MY_Router extends CI_Router {
 
    function MY_Router()
    {
        parent::CI_Router();
    }
 
    function _validate_request($segments)
    {
        // Comprueba que el controlador no existe
        if (!file_exists(APPPATH.'controllers/'.$segments[0].EXT))
        {
            $segments = array("paginas", "cargar", $segments[0]);
 
        }
        return parent::_validate_request($segments);
    }
}
?>

Como veis lo que hacemos es extender el método _validate_request de la librería Router, que es el que procesa los segmentos de nuestra url. En él comprobamos si el nombre del primer segmento de la url corresponde a un controlador existente, si no es así añadimos al array de segmentos nuestro controlador y método paginas y cargar y llamamos al método _validate_request de la librería Router original pasándole estos parámetros.

Finalmente nos queda crear el controlador Paginas.php:

<?php
class Paginas extends Controller {
    function __construct(){
        	parent::Controller();
    }
 
    function cargar($title){
    	.....
    }
}
?>

Dentro de la función cargar, $title contendrá el título de nuestra url, es decir el primer segmento que le pasamos: www.dominio.com/titulo-de-la-pagina. En dicha función lo gestionaremos como nos interese, siendo lo más lógico utilizar ese título como identificador de nuestra página y buscarla en la base de datos para mostrarla.

Ver Demo CSS3

Ver screencast (duración: 15:49)

• Descargar videotutorial en alta calidad – MOV (46 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (24 MB)

Como siempre, podéis encontrar todos los screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

HTML y CSS

En el fuente del ejemplo de arriba tenéis código completo, pero voy a destacaros aquí las partes importantes. En el CSS:

a.foto{
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(207, 207, 207)));
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -webkit-box-shadow:0px 0px 20px #6F5F4C;
  -moz-box-shadow:0px 0px 20px #6F5F4C;
  -webkit-transition:all .3s linear;
}
a.foto:hover{
  -webkit-transform: rotate(-5deg) scale(1.08);
  -moz-transform: rotate(-5deg) scale(1.08);
}
a.foto span{
  text-shadow:1px 1px 2px #9F886D;
}

Y el HTML:

<a class="foto" href="#">
   <img src="underworld_evolution.jpg" alt="Underworld" />
   <span>Texto descriptivo a pie de foto</span>
</a>

¿Cuándo utilizar estas propiedades?

Es importante tener siempre presente que estas propiedades no son soportadas por todos los navegadores, por lo tanto tenemos que restringir su uso a mejoras estéticas, que no influyan en la maquetación o la usabilidad de la web. Los navegadores que no las soporten (como Internet Explorer) simplemente verán una versión un poco “descafeinada” de nuestro sitio.

También es interesante conocer todo el potencial de CSS3 que nos proporciona webkit si estamos interesados en el desarrollo web móvil, ya que además de Safari y Chrome, los navegadores de iPhone, Android, las nuevas Blackberry, Nokia y Palm Pre están basados en webkit.

Podéis encontrar el resto de screencasts en la página de videotutoriales, o suscribiros al podcast de iTunes.

Descargar ficheros con el código del ejemplo.

Ver screencast (duración: 24:02)

• Descargar videotutorial en alta calidad – MOV (67 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (35 MB)

» Advertencia: El audio está un poco desincronizado con el vídeo. En algunas partes apenas se nota, pero en otras sí, sobre todo por el final. De todas formas creo que se entienden bastante bien los conceptos, y como es un video largo no he creído necesario volverlo a grabar.

Y con este sí finalizo la serie de videos sobre CodeIgniter. Mi próximo screencast será sobre algo relacionado con CSS y frontend, así que os recomiendo que os sigáis pasando por aquí a todos los que estéis interesados en todos los aspectos del desarrollo web en general y no sólo en la programación pura de backend.

Hoy día gracias al avance de los navegadores podemos usar cualquier fuente utilizando la propiedad CSS @font-face, siempre que tengamos en cuenta y respetemos la licencia de cada una, que debe permitir empotrado mediante @font-face. Podemos ver un listado de fuentes y licencias que permiten este uso en el wiki de webfonts.info.
A continuación os explicaré cómo utilizar @font-face para poder usar fuentes de verdad en la web.

La forma fácil

La forma más sencilla es utilizar el generador de fontsquirrel. Simplemente tenemos que subir la fuente que queramos utilizar, marcar los formatos EOT, SVG y WOFF, y nos descargaremos un paquete que contiene nuestra fuente en los distintos formatos y un ejemplo con el código CSS para hacerlo funcionar.

Explicación del CSS. ¿Por qué tantos formatos?

Echemos un vistazo al css para poder usar la fuente Quicksand Light:

@font-face {
   font-family: 'QuicksandLight';
   src: url('Quicksand_Light.eot');
   src: local('Quicksand Light'), local('QuicksandLight-Regular'), 
   url('Quicksand_Light.woff') format('woff'), 
   url('Quicksand_Light.otf') format('opentype'), 
   url('Quicksand_Light.svg#QuicksandLight-Regular') format('svg');
}
h1{font: 60px/68px 'QuicksandLight', Arial, sans-serif;}

En primer lugar definimos el nombre de la fuente con font-family. Este nombre es el que usaremos cuando asignemos dicha fuente mediante la propiedad font, en este ejemplo al h1. Después se debe poner inmediatamente el src con la versión EOT, que es el formato utilizado por Internet Explorer. De esta manera IE descargará y utilizará este formato, y no seguirá buscando los siguientes ya que no reconoce el valor local() del segundo src.
El resto de navegadores ignorarán el EOT y probarán los siguientes formatos hasta que encuentren uno que funcione en ellos. WOFF es el nuevo formato que será soportado por Firefox 3.6 y apunta a ser el futuro en los formatos de fuentes empotradas, así que no está de mas incluirlo. Firefox 3.5, Safari, Opera y Chrome 4 usarán el fichero OTF o TTF.
El formato SVG es necesario para versiones antiguas de Chrome y Safari para iPhone.
Después solo nos queda añadir la propiedad font a los elementos que queramos, sin olvidarnos de añadir otras fuentes web-safe por si algo falla (en este caso Arial y sans-serif).

Aquí podemos ver una una demo utilizando la fuente Quicksand.

Finalmente, si no queremos pasar por el proceso de buscar una fuente con licencia empotrable y convertirla, podemos utilizar los kits de fontsquirrel, entre los que tenemos una amplia selección de fuentes preparadas para descargar en paquetes que contienen todos los formatos necesarios, con un fichero html y css de ejemplo de uso.