Categoría: Dev

Os presento Codesnug, una herramienta de almacenamiento de Snippets online

macbook-temp

Después de un largo tiempo de desarrollo (empecé el verano pasado) por fin puedo anunciar que Codesnug ya está entre nosotros. ¿Qué es Codesnug? Es una herramienta que permitirá a desarrolladores almacenar sus snippets de código y mantenerlos organizados y accesibles permanentemente. Pero eso no es todo. Codesnug también permite compartir el código con otros usuarios de la aplicación permitiendo su edición o únicamente su visualización, así como utilizar su API REST para gestionar los datos desde aplicaciones de tercerlos.

Una característica en la que me quise centrar es en la de exportación del código de tal manera que los usuarios no generen dependencia por la aplicación en caso de que decidan cambiar a otra. Tu código es tuyo y te lo puedes llevar cuando quieras simplemente pulsando un botón.

Codesnug soporta más de 30 lenguajes de programación distintos y espero ir ampliando este número en futuras actualizaciones a medida que el proyecto avance.

En definitiva, si eres desarrollador, te invito a que le des una oportunidad y que la pruebes. Estaría encantado de recibir feedback para mejorar su funcionamiento, corregir errores y ampliarla :)

Leer más

Optimizando las imágenes almacenadas en Amazon S3

Amazons3-wordpress

Utilizo Amazon S3 para almacenar las imágenes de este blog desde hace algún tiempo y estos días me he decidido a optimizar un poco las que tengo almacenadas para ahorrar unos céntimos en transferencia. Normalmente optimizo las imágenes que subo al blog utilizando ImageOptim, pero las distintas miniaturas que genera WordPress a partir de las originales no están comprimidas y es ahí donde se puede ahorrar espacio y transferencia.

Para realizar esta tarea tuve que hacer un fork del script Autosmush de gaganawhad para incluirle compatibilidad con todas las zonas de Amazon S3 (América, Europa, Asia…) añadiéndole un nuevo parámetro (r). Este script de PHP se ejecuta de manera muy simple, introduciendo el siguiente comando desde el terminal (lo he probado en Mac OS X) .

php autosmush -r [region-name] -t some-s3-bucket-name/path/to/files

Se requiere unas AWSAccessKeyId y AWSAccessSecret, que se obtienen desde la sección de credenciales de la consola de AWS.

Podéis descargar mi versión del Autosmush desde mi repositorio en Github.

Leer más

Genymotion, el sustituto del emulador de Android

GenymotionVirtualBoxAndroid-800PX

Los que solemos programar para iOS utilizamos el simulador que viene de serie con XCode estamos muy mal acostumbrados. Funciona bien, demasiado bien… y cuando nos toca programar para Android y usar el emulador oficial hay que hartarse de paciencia.

El emulador oficial de Android es lento y convierte en prácticamente indispensable la utilización de un dispositivo real. Gracias a @jcesarmobile me entero de la existencia de Genymotion, una máquina virtual para probar aplicaciones Android que funciona mucho mejor que el emulador oficial.

A parte de funcionar muy rápido, Genymotion dispone de un plugin para Eclipse que permite hacer debug automáticamente de las aplicaciones, por lo que su utilización es muy similar. Es gratuito para uso personal y en su versión de pago incluye muchas más opciones, pero para desarrollar aplicaciones relativamente simples está más que de sobra.

Para instalarlo, es necesario crear una cuenta en el servicio, descargar la aplicación (disponible para Windows, Mac y Linux y seguir las instrucciones del manual oficial. Una vez hecho, ya estará todo listo para empezar a desarrollar.

Una detalle que es posible que se necesite y que no viene incluido en la mayoría de máquinas virtuales proporcionadas por Genymotion son los servicios de Google Play, pero se pueden encontrar por Internet, descargarlos e instalarlos (flasheando la máquina virtual) con la versión correspondiente de Android.

Descargar Genymotion | Página Oficial

Leer más

Cómo instalar Django y PostgreSQL en Mac

python-djangoUnos apuntes rápidos para instalar y configurar Django y un servidor de bases de datos PostgreSQL en Mac. Python ya viene instalado en Mac OS X, así que no tendremos que tocarlo.

Django

En primer lugar necesitamos instalar setuptools como se describe aquí. Para ello descargamos el archivo ez_setup.py y lo ejecutamos (situándonos en el directorio en el que se encuentra) desde el Terminal introduciendo:

python ez_setup.py

Una vez hecho esto, tendremos que instalar pip descargando primero de esta página el archivo get-pip.py. Luego en el Terminal ejecutaremos el archivo descargado conel siguiente comando para instalarlo:

python get-pip.py

Una vez instalado pip, podremos instalar Django (La última versión puede ser diferente a la que aparece en el comando de abajo, consúltala aquí).

sudo pip install Django==1.6.1

Hecho esto, ya estará instalado Django y podremos crear nuestra primera aplicación en el directorio de elijamos (Es posible que tengamos que cerrar y volver a abrir el Terminal):

django-admin.py startproject

PostgreSQL

Para instalar PostgreSQL y hacer que funcione con Django es necesario que instalemos dos cosas: por un lado el servidor de la base de datos con la base de datos y por otro el módulo de Django encargado de interactuar con la base de datos (psycopg2).

La manera más sencilla y menos intrusiva para instalar el servidor de BD (no he encontrado información sobre cómo desinstalar la versión oficial) es utilizar la aplicación Postgres.app. Simplemente ejecutándola, ya tendremos nuestro servidor de BD funcionando sin problemas.

Una vez instalado, tendremos que añadir el directorio de ejecutables de la aplicación al PATH del sistema. Para ello, desde el Terminal introduciremos los siguiente comandos.

Ejecutaremos un editor de texto para modificar el contenido del PATH:

sudo nano /etc/paths

Añadiremos al final del fichero una línea que haga referencia al contenido de la aplicación:

/Applications/Postgres93.app/Contents/MacOS/bin

Una vez introducido pulsaremos “ctrl+x” para salir y luego “y” para guardar.

Si escribimos en el Terminal el siguiente comando, debería aparecer la línea que hemos introducido:

echo $PATH

Ahora podremos instalar el módulo psycopg2 de Django desde pip:

sudo pip install psycopg2

Una vez hecho, ya tendremos instalado tanto Django como PostgreSQL y podremos comenzar a desarrollar.

Leer más

Editar el CSS de la propiedad :hover con el inspector web de Chrome

Si eres uno de los que se ha peleado cientos de veces con los :hover de los enlaces HTML al aplicarle estilos, seguramente te interese saber que el inspector web de Chrome (en Safari no he encontrado la manera) dispone de una característica que permite editar estos estilos de manera muy simple.

Editar hover en inspector de chrome

Basta con pulsar sobre el botón en el que aparece un cursor en la parte superior derecha del inspector (“Toggle element state”). Una vez hecho clic, se nos desplegará una serie de opciones para elegir el estado del elemento: hover, focus, visited o active.

Con este pequeño truco podremos establecer mucho más fácilmente los estilos cuando pasamos el ratón sobre un elemento HTML.

Leer más

Cómo establecer un meta viewport distinto dependiendo del dispositivo

Al utilizar responsive design para diseñar sitios web podemos encontrarnos con ciertos problemas a la hora de establecer un ancho y una escala inicial en la meta etiqueta viewport. Por ejemplo, dependiendo de cómo lo hayamos desarrollado, el ‘width’ puede hacer que en el iPhone aparezca un zoom horroroso al cargar la web mientras que en el iPad se verá correctamente.

Para evitar esto, la opción principal es la de detectar el agente de usuario y mostrar un viewport u otro. Tenemos dos opciones: utilizar Javascript o PHP.

(más…)

Leer más

Todo sobre las miniaturas (thumbnails) de WordPress 2.9

Logo de WordPress grisWordPress 2.9 ha traído consigo una nueva característica que muchos reclamábamos desde hace bastante tiempo y que lo convierte en un gestor de contenidos mucho más potente de lo que ya era: la inclusión de thumbnails o miniaturas individuales para cada post. No he encontrado prácticamente información en castellano sobre este tema y el Codex de WordPress tampoco proporciona suficiente información, por lo que voy a intentar dejar lo más claro posible cómo se activan y la manera más fácil de utilizar los thumbnails según lo que he leído en este blog y mi propia experiencia.

1. Activación

Si deseamos asignar thumbnails a los artículos, primero deberemos hacer que nuestro theme/plantilla sea compatible con esta funcionalidad. Para ello, añadiremos al archivo “functions.php” que se encuentra en la carpeta de nuestra plantilla el soporte para ello.

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Al incluir este código, se añadirá automáticamente un campo personalizado a todos nuestros posts que será “the_post_thumbnail” y las opciones correspondientes para gestionarlo desde el panel de creación/edición de artículo.

2. Añadir una miniatura a un post

Wordpress ThumbnailTras haber activado la función correctamente como se indica en el paso 1, podremos añadir las thumbnails a los posts a través de una opción en la barra lateral del panel de creación de posts o desde el menú de subidas de imágenes haciendo clic en “Set Thumbnail”. Resulta totalmente trivial la manera de hacerlo y no creo que genere ningún tipo de duda.

3. Mostrar la miniatura en tu plantilla

Para mostrar la miniatura en tu plantilla, deberás editarla manualmente y llamar a la siguiente función donde quiera que se muestre la imagen:

<?php the_post_thumbnail(); ?>

Aunque de esta manera ya estaría totalmente funcional, seguramente haya mucha gente que prefiera adaptarla lo máximo posible a su theme. Esto se puede hacer añadiendo una serie de parámetros a la función, como el tamaño, la clase ( class de CSS), el atributo alt o el title.

3. 1. Gestionando el tamaño de la miniatura

Por defecto, el tamaño de la miniatura será el que tengamos seleccionado para las miniaturas de WordPress (‘thumbnail’) aunque se pueden elegir los otros dos tamaños o incluso personalizarlos según nuestros gustos o necesidades:
Tamaño pequeño:

<?php the_post_thumbnail('thumbanail'); ?>

Tamaño medio:

<?php the_post_thumbnail('medium'); ?>

Tamaño grande:

<?php the_post_thumbnail('large'); ?>

Tamaño personalizado (ancho, alto):

<?php the_post_thumbnail(array( 200,200 )) ?>

Si definimos el tamaño de la miniatura de esta manera, cogerá el tamaño normal de la imagen y lo reducirá, no cogerá el tamaño ‘thumbnail’.

3.2. Gestionando la clase de la miniatura

La clase de la miniatura servirá para añadirle un estilo predefinido en la hoja de estilos del theme. Por defecto es .wp-post-image, pero podremos elegir la que queramos definiendo nuestro propio estilo:

<?php the_post_thumbnail('medium', array('class' => 'imagen_post')); ?>

3.3. Gestionando los atributos alt y title

De la misma manera que hemos visto anteriormente, también se pueden modificar a nuestro gusto los atributos ‘alt’ y ‘title’ de la miniatura, pudiendo ponerlo lo que queramos:

<?php the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alt_que_queramos', 'title' => 'titulo_que_queramos')); ?>

4. Incluyendo el código completo y a prueba de fallos

Cuando ya tengamos decidido cómo queremos mostrar la thumbnail en nuestro post, sólo nos quedará incluir el código en nuestra plantilla. Sin embargo, deberemos tener en cuenta que los artículos antiguos no tendrán asginada una miniatura, por lo que los deberemos tratar de una manera diferente al resto mediante una comprobación ‘has_post_thumbnail’ (¿Tiene el post miniatura?). En caso afirmativo se mostrará la miniatura, pero en caso negativo se mostrará la miniatura que hayamos utilizado hasta entonces o sino una imagen genérica.

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
	the_post_thumbnail();
} else {
	$postimage = get_post_meta($post->ID, 'post-image', true);
	if ($postimage) {
		echo '<img src="'.$postimage.'" alt="" />';
	}else{ echo '<img src="http://tupagina.com/thumbail_generica.png" alt="Thumbnail genérica" />'; }
} ?>

Como podéis comprobar, esta nueva característica de WordPress puede resultar muy útil para los que tenemos themes con formato de revista o queremos mostrar los artículos de diferente manera según el lugar del blog en el que nos encontremos. Espero que os haya resultado útil.

Leer más

IETester, prueba tu web en todos los Internet Explorer

Con la llegada de Windows 7 e Internet Explorer 8, llega también un nuevo problema para los desarrolladores web: en Windows 7 no se pueden instalar versiones anteriores de IE8. Por suerte, existe una aplicación llamada IETester que permite visualizar nuestra página web como si se tratase cualquiera de los navegadores de Microsoft, desde Internet Explorer 5 hasta Internet Explorer 8.

Con IE Tester ya no necesitaremos batallar con el jaleo de intentar instalar varios IE al mismo tiempo, y podremos comprobar que todo funciona correctamente en todos los navegadores para aumentar la compatibilidad con nuestros visitantes.

Podéis descargar IETester (para Windows) en su página oficial.

Gracias a Manu por darme a conocer este programa.

Leer más

Estadísticas de Dreamhost con WordPress

Al parecer hay un problema con las estadísticas nativas de Dreamhost (Analog) y los blogs gestionados con WordPress y Textpattern situados en la raíz del directorio, ya que éstos muestran un error 404 al intentar acceder a las estadísticas. El problema está en el archivo .htaccess, y la solución es muy sencilla, basta con añadir el siguiente código antes del código que añade WordPress al .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/(stats|failed_auth.html).*$ [NC]
RewriteRule . - [L]
</IfModule>

El resultado final quedaría más o menos de la siguiente forma (Dependiendo de la estructura de nuestros permalinks):

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/(stats|failed_auth.html).*$ [NC]
RewriteRule . - [L]
</IfModule>
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Aunque para ser sinceros, prefiero mil veces AWStats, porque Analog tiene una estructura bastante caótica…

Leer más