Berriart

Cómo crear un menú responsive con Sidr

2013-02-22T08:11:54Z

Este fin de semana he publicado Sidr, un plugin jQuery para crear menús laterales al estilo de la aplicación móvil de Facebook.

La razón de hacerlo, es que a pesar de la infinidad de plugins existentes para hacer menús responsive, ninguno se adecuaba a todas mis necesidades:

Sencillo y ligero
Compatible con (casi) cualquier diseño
Que no limite el contenido a una lista (<ul>)
Que permita multiples menús

He intentado hacerlo lo más flexible que he podido, pero sin meter demasiadas opciones ni funcionalidades que luego no se usan; y aunque mi intención era facilitarme la creación de menús responsive, es totalmente usable en desktop.

Lo primero es incluir la librería y uno de los temas (dark o light) que van incluídos con el plugin. Aunque también puedes aplicarle tus propios estilos.

	<!DOCTYPE html>
	<html>
	  <head>
	    <!-- Your stuff -->

	    <!-- Include Sidr bundled CSS theme -->
	    <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
	  </head>
	  <body>
	    <!-- Your stuff -->

	    <!-- Include jQuery -->
	    <script src="javascripts/jquery.js"></script>
	    <!-- Include the Sidr JS -->
	    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
	  </body>
	</html>

Luego tienes que crear un enlace o un botón que al clickarlo haga abrir y cerrar el menú. Normalmente se pondría en una barra superior y se ocultaría en desktop con media queries, pero eso ya al gusto de cada uno. A ese botón le asociamos un sidr llamando al plugin, y se le indica que contenido va a tener el menú.

<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }
}
</style>

<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr">Menu</a>
</div>

<div id="navigation">
    <nav class="nav">
        <ul>
            <li><a href="#download">Download</a></li>
            <li><a href="#getstarted">Get started</a></li>
            <li><a href="#usage">Demos &amp; Usage</a></li>
            <li><a href="#documentation">Documentation</a></li>
            <li><a href="#themes">Themes</a></li>
            <li><a href="#support">Support</a></li>
        </ul>
    </nav>
</div>

<script>
    $('#responsive-menu-button').sidr({
      source: '#navigation'
    });
</script>

Aunque en el ejemplo solo meto en el menú lateral un <ul> puedes meter lo que quieras (por ejemplo también el buscador), y puedes ponerlo tanto a la derecha como a la izquierda. Para más información aquí tenéis la documentación completa y las demos.

Tengo la intención de separarlo de jQuery para que se pueda usar sin dependencias, pero inicialmente era más fácil crearlo así, y como de momento uso jQuery en el 95% de los proyectos… Espero que me deis algo de feedback, y que si lo usáis en algún proyecto me aviséis para que me regodee un poco.

Scroll suave (smooth scrolling) con jQuery

2012-06-29T08:33:02Z

Si usas jQuery en tus proyectos, sería muy fácil hacer ese efecto de desplazamiento suave entre las anclas de tu página. Os paso un fragmento de código que uso yo para hacerlo en los proyectos en los que trabajo:

/* Smooth scrolling para anclas */
$('a.smooth').live('click', function(e) {
    var $link = $(this);
    var anchor  = $link.attr('href');
    $('html, body').stop().animate({
        scrollTop: $(anchor).offset().top
    }, 1000);
});

Si os fijáis en el código lo que hago es añadir el evento a todos los enlaces de la clase smooth, por lo tanto un ejemplo de código HTML en el que esto se aplicaría sería:

<a href="#ancla1" class="smooth">Ir al ancla1</a>
<a href="#ancla2" class="smooth">Ir al ancla2</a>
<a href="#ancla3" class="smooth">Ir al ancla3</a>
<div id="ancla1">Contenido 1</div>
<div id="ancla2">Contenido 2</div>
<div id="ancla3">Contenido 3</div>

El 1000 que se puede ver en el código javascript se refiere a los milisegundos que dura el efecto, lo podéis cambiar para regular ese tiempo al gusto.

Ejecutar crons y evitar que se solapen

2012-05-15T21:29:09Z

En más de una ocasión he tenido problemas de solapamiento a la hora de ejecutar scripts desde el crontab. Porque si decidimos usar un cron job para ejecutar scripts periódicamente con intervalos pequeños de tiempo, o también scripts con mucho tiempo de ejecución (a veces incluso mezclamos ambas cosas) es probable que corramos el riesgo de que los scripts se solapen y se cargue demasiado el servidor, o que incluso ‘se cuelgue’. Pienso además que nos pasa más a menudo a los programadores de PHP (sobretodo porque seguramente ese cron job no debería estar hecho en PHP, pero somos así de monolingüistas).

Una posible solución, y que es la que usaba hasta hace poco, es la de crear un fichero de control: Al iniciar la ejecución del script lo primero sería comprobar si ese fichero existe y comenzar solo si no está creado, si todo va bien lo siguiente sería crearlo para evitar el solapamiento y borrarlo justo al finalizar la ejecución.

Esta solución no me gustaba del todo porque si por cualquier razón el script no acababa de ejecutarse, el fichero de control no se borraba y entonces nunca más se volvía a ejecutar hasta que te dabas cuenta y borrabas el fichero de control manualmente. Por eso he pensado que lo mejor es comprobar directamente si el script está en ejecución antes de lanzar el siguiente sin usar fichero de control.

Para probarlo he usado un script que seguro se va a solapar:

<?php
while(1) {
    $zero = 0;
}

Para ejecutarlo desde el cron lo que he hecho es un pequeño shell script que también va a ser el encargado de evitar el solapamiento:

#!/bin/bash
PHP_EXECUTABLE="/usr/bin/php"
SCRIPT_DIRECTORY="/home/alberto"
SCRIPT_NAME="test.php"
if ps -fea | grep $SCRIPT_NAME | grep -v grep
then
    date
    echo "Overlaping message end"
else
    cd $SCRIPT_DIRECTORY
    $PHP_EXECUTABLE $SCRIPT_DIRECTORY"/"$SCRIPT_NAME > /dev/null 2>&1
fi

Como podéis ver lo que hago es comprobar con el comando ps si el script está en ejecución antes de lanzarlo de nuevo. Lo que hay que hacer luego simplemente es añadirlo al crontab, en mi caso dejando un pequeño log para poder comprobar si se solapa o no:

* * * * * /home/alberto/test.sh > /home/alberto/test.log

¿Qué os parece el método? ¿Qué habéis hecho vosotros si alguna vez os ha pasado?

HTML5 DevUp, conferencia de desarrollo HTML5 en Barcelona

2012-04-05T10:11:38Z

La gente de Ideateca (casi-vecinos aquí en Bilbao) ha organizado para este 27 de abril una conferencia en Barcelona sobre HTML5. Os lo comento aquí porque hablamos de una conferencia muy orientada a desarrolladores y dónde los ponentes son gente ‘que se mancha las manos’.

En la conferencia se hablará del futuro del HTML5, un estándar que todos estamos empezando a adoptar, pero también de su estado actual y de como podemos aprovechar al máximo las funcionalidades desarrolladas hasta el momento tanto en la web como en los dispositivos móviles, dónde las implementaciones en HTML5 en vez de en nativo están creciendo como la espuma.

Entre los ponentes podemos encontrar a expertos a nivel mundial, que supongo que serán los que más llamen la atención y los que más salgan en los medios, aunque por mi parte voy a destacar a parte del producto nacional que también estará allí y a los que por una razón u otra sigo más de cerca:

Javi de TapQuo: Es un javascripter emprendedor, creador de una de las herramientas de desarrollo que más me ha gustado en los últimos tiempos. Esta herramienta es LungoJS, un framework para el desarrollo de aplicaciones móviles con HTML5 muy fácil de usar y a la vez muy completo. He tenido la oportunidad de asistir a un par de charlas/taller con él y merece la pena.
Miguel Schneider de Telefónica: Es el director de desarrollo de BlueVia, la plataforma para desarrolladores del Open Web Device. Que si aún no os suena, os sonará, porque se trata del dispositivo móvil que dispondrá de sistema operativo nativo en HTML5 y dónde las aplicaciones correrán también en HTML5 de forma nativa.
Javier Usobiaga o @htmlboy: Es un amante del HTML5 y CSS3 que últimamente anda de gira por España dándo cursos y evangelizando junto con su mujer con la que tiene el estudio Swwweet.com. En la conferencia hablará sobre el diseño web responsive, algo en lo que últimamente yo estoy totalmente volcado, a ver si saco un rato y os escribo un par de posts sobre el tema.
Ibon Tolosana de Ideateca: Ibon es el que está llevando los temas técnicos en Ideateca, empresa organizadora del evento, y que además es un crack y un pionero en todo lo relacionado con los juegos y el HTML5. Es el creador de CAAT, un framework para el desarrollo de juegos en canvas de HTML5. Si queréis podéis echaros unos ludos a Sumon, uno de los juegos que han desarrollado con ello (ojo que engancha).

Al resto de ponentes los podéis ver aquí.

Por si queréis asistir, deciros que se celebrará en el Auditorio central de la Torre Diagonal 00 en Barcelona el 27 de abril, y si queréis conocer el programa completo para convenceros lo podéis leer aquí. Siento decir que yo no podré asistir, no por falta de ganas, si no por tener otros compromisos que nada tienen que ver con el desarrollo.

Imágenes adaptaptadas al dispositivo en diseños ‘responsive’

2012-03-05T22:48:46Z

Llevo un tiempo dándole vueltas a las diferentes soluciones a la hora de servir imágenes en un diseño responsive. No me refiero simplemente a hacer que las imágenes sean fluídas y que se adapten al dispositivo, sino que hablo de que no sea necesario descargar una imagen de 1280px en un dispositivo que solo tiene 480px de ancho.

Imaginad una web que tenga muchas imágenes de alta resolución (hablando de páginas web), o si no sois capaces echad simplemente un vistazo a esta web. Si nos estamos adaptando a los dispositivos móviles, lo que no podemos es hacerle descargar al usuario más de 5 megas en fotos y luego escalarlas a la mitad, mucho menos si tenemos en cuenta el ancho de banda de las tarifas móviles españolas.

Por eso creo, y no soy el único, que habría que servir diferentes tamaños (y por lo tanto diferentes pesos) de imágenes en función del dispositivo que esté accediendo a tu web. La mejor solución que he encontrado es Adaptive Images, o cualquier sucedáneo del mismo. Pero el problema es que aunque es lo mejor que he visto no me convence, tiene ciertas pegas y no me gustaría que fuese peor el remedio que la enfermedad.

Las pegas que le veo a este sistema son:

Todas las imágenes servidas de esta manera dejarán de ser ‘contenido estático’ ya que será un archivo PHP el encargado de decidir la imagen a servir en base a la resolución del dispositivo.
Las imágenes afectadas no se podrán servir desde un dominio libre de cookies ya que el sistema se basa en ellas para funcionar.

Aún así, en webs que no tienen un excesivo tráfico no creo que conlleve un gran problema y creo que utilizar Adaptive Images mejorará la experiencia del usuario en dispositivos móviles sin afectar negativamente al resto de usuararios, pero me gustaría que me dijerais si vosotros os habéis planteado esto y si habéis encontrado una manera mejor de hacerlo.

Bundle para crear sitemap en Symfony2

2012-02-05T10:52:46Z

Creo que se puede decir que ya está lista la primera versión de mi primer Bundle público de Symfony2, se trata de BerriartSitemapBundle. Tal y como se indica en el nombre se trata de un bundle para crear sitemaps en tu proyecto Symfony2.

La verdad es que me he basado en uno existente para crearlo (AvalancheSitemapBundle), y la mayor diferencia entre ambos es que el de Avalanche123 está preparado para usarse con DoctrineMongoDB y el mio con Doctrine, por lo que los datos del sitemap se podrían almacenar en una BD MySQL.

La verdad es que no veía la necesidad de instalar mongodb exclusivamente para almacenar las URLs del sitemap y como no me parece descabellado usar la misma BD del proyecto para hacerlo, decidí que yo quería algo parecido a ese Bundle pero con MySQL, así que lo hice y aquí está.

Solo lo he probado en un proyecto y es una primera versión, así que puede que tenga algún que otro fallo, si los encontráis no dudéis en decírmelo (a través del Issue Tracker de Github por favor).

El siguiente paso en el desarrollo del bundle será añadirle la posibilidad de generar físicamente los ficheros del sitemap en disco y comprimirlos con gzip, para que no tenga que generar al vuelo el sitemap cada vez que hay una petición. Si además de esta se os ocurre alguna otra funcionalidad que os gustaría que le añadiera, ya sabéis, me lo contáis y lo valoro.

Mi entorno de desarrollo web

2012-01-26T22:48:18Z

Hoy os quería comentar cual es mi entorno de desarrollo, no para convenceros de que me copiéis, sino más bien para que me digáis vuestra opinión, qué os parece y que me recomendaríais. Cuando me acostumbro a algo me cuesta bastante cambiar aunque sepa que con el tiempo va a mejorar mi forma de trabajar, no sé si es porque me hago viejo, pero soy capaz de intentarlo, así que no dudéis en dejarme cualquier comentario al respecto.

Un PC con una distro Linux, en mi caso Ubuntu, que me viene muy bien porque tiene todo lo que yo quiero y además es lo suficiente fácil de usar para que el resto de usuarios del ordenador en mi casa no se enfaden.
- Apache, MySQL y PHP incluídos, y a poder ser actualizados
Netbeans es hasta el momento mi IDE preferido, aunque relamente estoy deseando cambiar porque siempre me da la impresión de que estoy cazando moscas a cañonazos. Si sigue por el buen camino Sublime Text 2 puede ser un buen candidato para el cambio, aunque todavía le queda camino por recorrer si quiere convencerme.
Git y Subversion para trabajo en grupo y control de versiones. Como cliente gráfico uso el propio Netbeans ya que me parece muy buena la integración que incluye con ambos, aunque muchas veces soy más amigo de usar directamente el terminal. Si sigo usando ambos es porque para proyectos de WordPress uso Subversion, pero si no, Git sería ya mi único amigo en este aspecto.
Como navegador para desarrollo sigo usando Firefox, no por el navegador en sí, ya que prefiero Chrome (o mejor dicho Chromium), sino por todos los Addons sin los que no podría vivir:
- Firebug, sin ninguna duda la herramienta que más problemas me ha resuelto en los últimos años.
- HostAdmin, de dev a pre y a prod en un solo click.
- YSlow y Page Speed para asegurarme que estoy haciendo las cosas bien en algunos aspectos de rendimiento. Son buenas checklists.
- Web Developer, ShowIP, SearchStatus, defyFormValidation,… y algún otro más también están instalados en mi navegador, pero no les doy uso tan a menudo
Focus Booster es mi pomodoro (sí, ya sé, usa Adobe Air, pero qué le vamos a hacer, nadie es perfecto). Sencillo y efectivo. (Si os interesa que tal me va usando el pomodoro os diré que bien cuando soy estricto con ello, lo que me cuesta es ser realmente estricto).

Seguro que me queda alguna herramienta por nombrar, ahora es un poco tarde y la cabeza no funciona del todo bien, si me acuerdo editaré el post y la añadiré. Si a alguno os apetece y como últimamente ya no se ven muchos memes, podríais tomarlo como tal y contar en vuestros respectivos blogs como es vuestro entorno, si no, como ya he dicho estaría muy bien que me dejarais algún comentario con vuestra opinión.

Profiling con WordPress y XHProf

2012-01-10T00:50:07Z

A veces, y la mayoría por culpa de algún plugin peleón, he querido hacer profiling de alguna instalación de WordPress, para ello he utilizado XHProf (aunque empecé a intentarlo con XDebug). XHProf está desarrollado en un principio por Facebook y para Facebook, aunque en 2009 lo liberaron para que lo pudiéramos usar los demás. Por si no lo sabíais Facebook tiene una serie de herramientas propias liberadas, muchas relacionadas lógicamente con PHP.

Con esta herramienta se pueden saber ciertos datos de la ejecución de una página, entre ellos:

Listado y número de llamadas a una función/método
Tiempo de ejecución de una función/método
Tiempo de CPU de una función/método

No voy a explicar aquí como instalar XHProf en vuestro servidor, lo que os voy a poner es un pequeño plugin que he desarrollado que habilita el profiling en WordPress cuando tienes WP_DEBUG activado y XHProf instalado. Lo he llamado WP XHProf Profiler como era de esperar :p

Enlace al plugin: http://www.berriart.com/en/wp-xhprof-profiler/

Symfony2, permisos en el directorio cache (y en logs)

2012-01-09T22:04:03Z

Supongo que habréis sido más espabilados que yo, pero si alguno de vosotros también se ha peleado con los permisos del directorio app/cache, aquí tenéis la solución. Mi problema era que en la instalación de Symfony2 siempre le daba permisos 777 a los directorios app/cache y app/logs, pensaba que con eso valía.

En un principio parece que sí, se accede vía web y sin ningún problema se van generando los ficheros de caché. Pero si más adelante ibas a la línea de comandos e intentabas alguna acción que tuviera que reescribir esos ficheros (generados por usuario apache o similar) te decía que el usuario que usabas no tenía permisos. Pues nada, yo volvía a darle permisos 777 con ayuda del sudo, hacía lo que tenía que hacer y de nuevo volvía a darle permisos para que el usuario apache no tuviera problemas en sobreescribir lo que yo había generado desde consola con mi usuario. Menudo lío ¿no?

Llegado un punto en el que este loop empezaba a convertirse en infinito, busqué un poquito y descubrí que no tenía que ir muy lejos a buscar la solución, estaba escrita en la propia documentación de Symfony2. Y realmente tampoco era tan complicada si hubiera pensado un poquito, ambos usuarios deben tener permisos sobre esos directorios:

sudo rm -rf app/cache/*
sudo rm -rf app/logs/*
sudo setfacl -R -m u:www-data:rwx -m u:`whoami`:rwx app/cache app/logs
sudo setfacl -dR -m u:www-data:rwx -m u:`whoami`:rwx app/cache app/logs

Dónde www-data es el nombre del usuario de los accesos web (en algunos casos es apache, http,…) y dónde whoami es el nombre del usuario con el que accedes y ejecutas la consola de Symfony.

Probando las novedades de PHP 5.4

2012-01-02T09:37:11Z

A pesar de que algunos aún estamos asimilando y adaptándonos a las novedades de PHP 5.3, se está hablando mucho estos últimos días de las novedades de PHP 5.4, a raíz de la reciente liberación de la cuarta release candidate de esta versión. Así que después de leer sobre ello me he decidido a probar un poco y la he instalado en casa.

De las novedades de la versión las que más me han llamado la atención y las que creo que más útiles me van a resultar son los traits y el servidor web embebido. Aparte de estas dos y de las mejoras en el propio motor y extensiones, otras novedades de las que no voy a hablar hoy pero parecen interesantes son:

Array dereferencing (un poco raro lo de poner corchetes al final de una función :p )
Soporte para DTrace
Nueva función http_response_code()
Llamadas indirectas a métodos estáticos de una clase mediante un array
Permite el uso de $this en closures dentro de métodos

Traits

Creo que se puede decir que los traits han sido la solución de PHP para implementar lo que muchos pedían, ‘herencia múltiple’ o la posibilidad de crear una clase que extienda múltiples clases, y así poder reaprovechar mejor el código. La manera de usar sería:

<?php

trait HelloWorld {
    private $whatelse;

    public function sayIt() {
        echo 'Hello World!'. PHP_EOL;
        echo $this->whatelse . PHP_EOL;
    }
}

class Producto {
    use HelloWorld;

    public function __construct($string) {
        $this->whatelse = $string;
    }
}

class Servicio {
    use HelloWorld;

    public function __construct() {
        $this->whatelse = date('c');
    }
}

$servicio = new Servicio();
$producto = new Producto('Internet');

$servicio->sayIt();
$producto->sayIt();

Esta sería la respuesta a este pequeño script:

Hello World!
2011-12-29T23:27:19+00:00
Hello World!
Internet

Sé que no es el mejor ejemplo pero creo que se entiende.

Servidor web embebido

Ya dejan bien claro desde PHP que se trata simplemente de un servidor para desarrollo, y no para usar en entornos de producción. Pero aún así, creo que nadie va a negar la utilidad de que PHP incluya su propio servidor y que no necesitemos instalar Apache ni ningún otro servidor web para poder ejecutar y probar nuestras aplicaciones. Para arrancar el servidor simplemente tenemos que ejecutar lo siguiente (es probable que tengas que hacer sudo):

php -S <addr>:<port> -t <docroot>

Por ejemplo:

php -S localhost:80 -t /var/www

Al ejecutarlo arrancaríamos el servidor web en el puerto 80 con el document root en /var/www; el log de accesos y errores aparecería directamente en consola. Para pararlo simplemnte pulsaríamos Ctrl+C.

Instalación

Como sabéis PHP5.4 no es una versión estable, pero si queréis instalarlo en vuestro entorno de desarrollo o de pruebas podéis ir a esta web, descargarlo y compilarlo.

Si usáis Ubuntu y no os queréis complicar, podéis hacerlo mucho más fácilmente siguiendo este pequeño tutorial. Eso sí, aviso que cuando lo probé yo el paquete no estaba actualizado aún y te instalaba la RC3.

Por último, feliz año a todos y que programéis mucho :p