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.

Esta página de error se puede personalizar editando la plantilla /errors/error_db.php en nuestra carpeta de la aplicación. El problema es que este mensaje se mostrará en lugar de nuestra vista o en medio de ella, y además se mostrará siempre a menos que desactivemos la opción de debug de la base de datos, y si lo hacemos nuestra aplicación fallará silenciosamente, no tenemos forma de capturar este error y realizar las operaciones que nos convengan, lo cual sería especialmente útil cuando hacemos peticiones ajax.

Para solucionar esto existen dos métodos no documentados en la clase DB que nos permite capturar el mensaje de error y el número:
$this->db->_error_message() y $this->db->_error_number().

Estos métodos son envoltorios de las funciones mysql_error() y mysql_errno() de php. En la documentación de mysql podemos encontrar el listado de códigos de errores que nos devuelve mysql_errno() (y por lo tanto $this->db->_error_number()), por si nos interesa realizar distintas operaciones según el tipo de error ocurrido.

Como ejemplo os mostraré una forma sencilla de gestionar estos mensajes de error:

En primer lugar debemos desactivar el debug de la base de datos poniendo la opción $db['default']['db_debug'] a FALSE en el archivo /config/database.php.

Después en nuestro método del modelo, tras el query a la BD podemos poner:

if($data['error'] = $this->db->_error_message());
return $data;

En el controlador recogeremos esta variable devuelta y la pasaremos a la vista, y en la parte de la vista que nos interese pondremos:

<?php if(isset($error)) echo '<div class="error">'.$error.'</div>';?>

De la misma manera podemos manejar los errores vía ajax devolviendo esta variable codificada con json en nuestro controlador y gestionándola en el javascript de la vista.

Finalmente, ante la avalancha de peticiones espero volver en breve con un último videotutorial sobre CodeIgniter.

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: 11:29)

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

Por último recomendaros que os paséis por el foro de CodeIgniter en Español, donde podréis encontrar multitud de recursos sobre este framework.

HTML

Para el html del menú vamos a emplear la estructura típica de listas anidadas. La última entrada será un enlace directo, sin submenú:

<ul id="menu">
<li><a href="#">Menu 1</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 2</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu 3</a>
	<ul>
		<li><a href="#">Submenu 1</a></li>
		<li><a href="#">Submenu 2</a></li>
		<li><a href="#">Submenu 3</a></li>
		<li><a href="#">Submenu 4</a></li>
	</ul>
</li>
<li><a href="#">Menu sin submenu</a></li>
</ul>

Añadiendo el CSS

Para dar estilo al menú tenemos primero que quitar los estilos por defecto de las listas, eliminar los bullets y márgenes y añadirle display:block para que queden perfectamente alineados los elementos uno debajo de otro. Después tenemos que ocultar con display:none los submenús para que aparezcan todos colapsados por defecto. Vamos a añadir algunas extensiones de CSS3 para mejorar visualmente nuestro menú. Estás extensiones sólo serán visibles en navegadores modernos (Firefox, Chrome y Safari), pero no en Internet Explorer. De esta manera podemos añadir bordes redondeados y sombras al menú y al texto. La propiedad -webkit-transition solo funciona en navegadores basados en webkit (Safari y Chrome), y la utilizaremos para mejor el hover añadiendo un fundido en el color del texto y el background. En los navegadores que no soporten estas propiedades simplemente veremos el menú con esquinas normales, hover típico on-off de CSS y sin sombras.

#menu{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:1px 1px 3px #888;
	-moz-box-shadow:1px 1px 3px #888;
}
#menu li{border-bottom:1px solid #FFF;}
#menu ul li, #menu li:last-child{border:none}	
a{
	display:block;
	color:#FFF;
	text-decoration:none;
	font-family:'Helvetica', Arial, sans-serif;
	font-size:13px;
	padding:3px 5px;
	text-shadow:1px 1px 1px #325179;
}
#menu a:hover{
	color:#F9B855;
	-webkit-transition: color 0.2s linear;
}
#menu ul a{background-color:#6594D1;}
#menu ul a:hover{
	background-color:#FFF;
	color:#2961A9;
	text-shadow:none;
	-webkit-transition: color, background-color 0.2s linear;
}
ul{
	display:block;
	background-color:#2961A9;
	margin:0;
	padding:0;
	width:130px;
	list-style:none;
}
#menu ul{background-color:#6594D1;}
#menu li ul {display:none;}

Añadiendo la funcionalidad con jQuery

Ahora vamos a ver lo sencillo que es hacer funcionar nuestro menú vertical. Primero añadimos el evento click a cada enlace del menú. Después comprobamos si el siguiente elemento tras el enlace es un ul, ya que si es así este contendrá un submenú, si no será un elemento de un submenú o bien un elemento principal que no contiene submenú (en nuestro ejemplo, el último enlace). Si contiene un submenú, al hacer click este se expandirá o colapsará (slideToggle()), a la vez que colapsaremos el submenú que esté visible que no sea el actual. La función event.preventDefault() sirve para evitar que cuando hagamos click el navegador siga el enlace del href tras ejecutar nuestra función javascript.

<script type="text/javascript" charset="utf-8">
$(function(){
	$('#menu li a').click(function(event){
		var elem = $(this).next();
		if(elem.is('ul')){
			event.preventDefault();
			$('#menu ul:visible').not(elem).slideUp();
			elem.slideToggle();
		}
	});
});
</script>

Podéis escribir en los comentarios cualquier duda que tengáis e intentaré responderla, así como sugerencias para próximos tutoriales.

Este es el tercer videotutorial de la serie CodeIgniter, podéis encontrarlos todos en la página de screencasts, o suscribiros al podcast de iTunes.

Descargar ficheros con el código del ejemplo.

Ver screencast (duración: 11:21)

• Descargar videotutorial en alta calidad – MP4 (47 MB)
• Descargar videotutorial optimizado para iPod/iPhone – M4V (37 MB)

• Compatibilidad con PHP 5.3.0.
• Añadida la clase Cart Class.
• Ciertas mejoras en el Form helper.
• Añadida función is_php() para comparar versiones de PHP.
• Modificada la función show_error() para permitir enviar códigos de respuesta HTTP.

Lo más interesante que veo es la compatibilidad con PHP 5.3 (sobre todo desde que MacOS X Snow Leopard viene con esta versión de serie), y la nueva clase Cart. Esta clase es útil para programar una tienda virtual, ya que proporciona una interfaz sencilla para crear y actualizar un carrito de la compra. Aunque ya se rumoreaba desde hace tiempo que se iba a incluir esta clase, se esperaba para la versión 2.0, ya que es raro que introduzcan librerías nuevas en versiones menores.

Cuando tenga un hueco espero en breve seguir con mi serie de video tutoriales de CodeIgniter.