La versión Core, será de desarrollo más lento, y es la que usará Ellislab en sus productos comerciales.

Reactor será la versión “community”, en la que los usuarios podrán enviar sus propuestas de mejora, y un equipo de responsables del proyecto las revisará para ser incluidas o no en futuras versiones del framework.

A todos los efectos, la versión a usar es la Reactor. Ésta es la que aparece oficialmente para descarga en la web (aunque ambas están disponibles) y la que Ellislab recomienda.

Algunos de los cambios más importantes son:

• Se ha eliminado la compatibilidad con PHP 4, ahora se requiere PHP 5.1
• Añadida la protección CSRF en el form helper.
• Drivers.
• Application packages.
• Se ha eliminado el uso de los plugins, en favor de los helpers.
• Añadido $route[‘404_override’] para permitir manejar las páginas de error 404 por los controladores.
• Se ha eliminado el scaffolding.
• Soporte total de query strings.
• Nuevo sistema de caché, con soporte para APC y memcache.
• Compatibilidad con línea de comandos, para facilitar el uso del cron.

Se ha quedado fuera la inclusión de una librería de autenticación, que era una de las características más demandadas y a mi parecer muy necesaria, pero parece ser que está planeado y se incluirá en futuras versiones cuando se encuentre la manera correcta de implementarlo.

Podeis ver el anuncio oficial de Ellislab, y descargarlo aquí.

CSS3 nos trae una nueva herramienta para atacar este problema: los media queries. El funcionamiento de los media queries consiste en disponer de un único documento html para todas las versiones, y seleccionar una u otra hoja de estilo CSS dependiendo de algunos parámetros del dispositivo, principalmente la resolución de la pantalla. De esta manera eliminamos la necesidad de redireccionar a una versión móvil diferente de nuestro sitio, sino que cada dispositivo leerá un bloque de reglas CSS según su anchura.

En este videotutorial voy a enseñaros cómo utilizar los media queries mediante un sencillo ejemplo de diseño de tres columnas de contenido y un menú. Veremos cómo las columnas se reordenan según disminuimos el tamaño del navegador, y por lo tanto cómo se mostraría en dispositivos de ese tamaño.

Ver Demo CSS3 media queries

Ver screencast (duración: 8:03)

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

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

Aunque en el video no lo menciono, en lugar de definir los estilos dentro de los bloques @media, también podemos separarlos en distintas hojas de estilo y enlazarlos cambiando el atributo media, por ejemplo:

<link rel="stylesheet" href="principal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="iphone_version.css" type="text/css" media="screen and (max-width: 480px)" />

Si os interesa el tema os recomiendo leer este artículo de A List Apart: Responsive Web Design.

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.

Relacionados:

• Videotutorial: Patrones de diseño en PHP – Factory Pattern
• Videotutorial: Patrones de diseño en PHP – Observer Pattern
• Videotutorial: Patrones de diseño en PHP – Chain-of-command Pattern

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.