• 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.

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/

La verdad es que una herramienta que nos permita manejar estos ficheros de forma colaborativa y utilizando una interfaz web medianamente intuitiva y fácil de usar era algo que llevaba tiempo necesitando pero que entre pitos y flautas no tenía tiempo de buscar. Conocía la existencia de Launchpad, pero yo pensaba que era sólo para proyectos de software libre por lo que para proyectos cerrados no me valía (ahora me he dado cuenta de que también tiene servicio de pago, aún así siempre prefiero una alternativa open source y que pueda instalar en mis propios servidores). La cuestión, es que sin quererlo, he encontrado la solución cuando hacía otra consulta en la página sobre traducciones de WordPress.

Como habréis podido adivinar por el título de este post la solución que he encontrado se llama Pootle (PO-based Online Translation / Localization Engine) y también es válido para otros tipos de archivo de traducción como pueden ser los XLIFF. Podéis ver en este enlace un versión live de esta aplicación si queréis ver un poco mejor de que se trata, pero si queréis cacharrear un poco más podéis instalarlo directamente en Ubuntu que es bastante sencillito (en otras distribuciones o SO os buscáis la vida :p ). Como casi siempre, hay paquete:

sudo apt-get install pootle

Yo lo he configurado para que use mysql en vez de sqlite3 editando el fichero localsettings.py. Si tú también lo vas a hacer, deberás instalar primero el paquete python-mysqldb, crear una BD para ello, y modificar estos datos en el fichero de configuración (hay otros datos que también puedes modificar ahí, como por ejemplo configurarlo para usar memcached):

sudo apt-get install python-mysqldb
gedit /etc/pootle/localsettings.py

Una vez que tengas todo listo y configurado solo tienes que hacer correr el servidor de Pootle:

sudo PootleServer

Esto lo hará correr por el puerto 8080, si ya tienes algo ahí o prefieres usar otro puerto solo tienes que indicárselo:

sudo PootleServer --port=XXXX

Finalmente, si todo ha ido bien tendrás tu servidor montado. Sino has hecho alguna otra configuración, puedes acceder a él accediendo a la URL: http://127.0.0.1:8080/. Si has seguido estos mismos pasos puedes loguearte con el usuario admin password admin y empezar a toquetear y cambiar configuraciones (cambia también el pass ). Ya os contaré algunas impresiones si finalmente lo implantamos para algún proyecto.

Karmacracy ya era integrable en varios clientes de Twitter, en móviles y existen plugins para varios navegadores, pero yo echaba en falta la integración en mi CMS favorito, que como todo el que me lee sabe, es WordPress. Así que me puse manos a la obra, como siempre lo dejé a medias, y hace unos días lo retomé. Finalmente ha salido algo decente y ya lo tenéis disponible: WP Karmacracy

Ahora, que me estoy poniendo al día con Symfony2 y ellos (al igual que muchos otros) han cambiado a Git, creo que definitivamente también tengo que ponerme al día con ello y en eso estoy. Además, por lo que estoy viendo, creo va a valer mucho la pena en los casos en los que trabajes con más gente. Si estáis en el mismo punto que yo, creo que este artículo os ayudará bastante, al menos a mi me lo ha parecido: Git – SVN Crash Course.

Uno de los problemas que le veo ahora mismo es la dificultad de instalar un servidor Git con una herramienta de gestión tipo Trac. Es decir, tener un Github instalado en mi propio servidor (la mayoría de este tipo de webs son gratis para proyectos open source pero de pago para proyectos privados). Lo mejor que he encontrado es Gitorious, pero su instalación en un servidor Ubuntu es mucho más complicada que la instalación de su alternativa de SVN, el Trac, al menos a mi me lo parece.

El tema es que una de las cosas que voy a hacer, sí o sí, es forzar a los usuarios a registrarse para comentar en las páginas de los plugins y los themes. Por varias razones, una es para que el que quiera un poquito de soporte al menos necesite un poco de esfuerzo para pedirlo (registrarse), otra que así podré tener más datos de quienes usan mis themes/plugins y una manera de contactarles. Seguramente me ayude también a quitar un poco de SPAM.

Al ir a hacerlo me he dado cuenta de que no puedo limitar lo de comentar estando registrado en cada post o página, si no que solo puedo limitarlo en general para todo el blog. Así que ya puesto me he currado un pequeño plugin que permite hacerlo. Os presento el plugin para WordPress: Comment Privileges By Post.

Espero que le resulte útil a alguien más que a mí.

Si tienes un servidor Ubuntu con Apache y quieres instalarlo a continuación te describo los pasos que he seguido yo para hacerlo (recuerda que si no estás como usuario ‘root’ tendrás que hacer sudo):

Instalar suvbersion:
apt-get install subversion libapache2-svn

Instalar Trac y el módulo de Python para Apache:
apt-get install libapache2-mod-python libapache2-mod-python-doc trac

Crear la carpeta que hará de ‘Document Root’ para poder acceder al trac via web, por ejemplo:
mkdir /var/www/trac

Si lo quieres proteger, como es mi caso, crea un fichero .htpasswd:
htpasswd -c /var/www/trac/.htpasswd admin

Preparar el Virtual Host:
vi /etc/apache2/sites-available/trac

Y escribir:

<VirtualHost *>
ServerAdmin mymail@domain.com
ServerName trac.domain.com

<Location /projects> #set up Trac handling
SetHandler mod_python
PythonHandler trac.web.modpython_frontend
PythonOption TracEnvParentDir /var/www/trac
PythonOption TracUriRoot /projects

#authentication scheme
AuthType Basic
AuthName "My Tracker"
AuthUserFile /var/www/trac/.htpasswd
Require valid-user

</Location>

ErrorLog /var/log/apache2/trac_error.log

# Possible values include: debug, info, notice, warn, error, crit,
# alert, emerg.
LogLevel warn

CustomLog /var/log/apache2/trac_access.log combined

</VirtualHost>

Vamos a crear un repositorio SVN para el código:
mkdir /var/lib/svn
mkdir /var/lib/svn/myproject
svnadmin create /var/lib/svn/myproject

Yo lo he preparado para poder tener diferentes tracs, así que estos pasos se pueden repetir:
mkdir /var/www/trac/myproject
trac-admin /var/www/trac/myproject initenv
sudo chown -R www-data:www-data /var/www/trac/myproject

Finalmente reiniciamos Apache:
/etc/init.d/apache2 restart

Y ya podríamos acceder a nuestro trac en este ejemplo en: http://trac.domain.com/projects

Espero que os sirva de ayuda.

• Firebug: Para mi es hoy en día una herramienta indispensable que me ayuda a depurar mi código Javascript y a solicionar problemas con el CSS entre otras cosas.
• YSlow y Google Page Speed son dos Addons que necesitan del Firebug para funcionar y que te ayudarán a mejorar la velocidad de carga de tu web.
• Web Developer: Una barra de herramientas que tiene multiples utilidades. Desde una regla para medir píxeles sobre el navegador hasta validadores o la posibilidad de desactivar el Javascript o las hojas de estilo.
• Search Status: Herramienta que ofrece información SEO sobre tu web y que prácticamente la uso para poder ver de forma clara los enlaces con ‘nofollow’.
• ColorZilla: Es solo un color picker, un cuenta gotas para poder conocer el valor en código CSS de cualquier color que estés viendo en una web.
• Screengrab: Es una herramienta para hacer capturas de páginas web, ya sean completas o selecciones. Muy útil para hacer documentación o reportar bugs.
• Dummy Lipsum: El nombre lo dice todo, simplemente un generador de ‘Lorem Ipsum’ para cuando necesitemos unos textos de prueba.
• IE NetRenderer: Una manera sencilla de poder ver lo que estamos haciendo en diferentes versiones del Fucking Internet Explorer. Sí, ya sé que hay más maneras de hacer eso incluso usando linux, pero ésta es rápida y en algunos casos no necesito más.
• HostAdmin: Creo que ha sido mi último descubrimiento y ahora no paro de usarlo. Me sirve para cambiar mi fichero /etc/hosts dónde fuerzo los dominios desde el propio Firefox, útil para cambiar entre dev, testing y producción.

Una de las mejores y más conocidas herramientas para diagnosticar problemas y encontrar soluciones al excesivo tiempo de carga de una web es YSLOW. Se trata de una herramienta adicional que se añade al Firebug de Firefox (creada por Yahoo) y que te advierte sobre incumplimientos de sus ‘Buenas prácticas para acelerar la carga de una web‘. Google enseguida recomendó utilizar esa herramienta a los webmasters, pero como tampoco quería ser menos y aunque también sigue recomendando YSLOW, decidió que tenían que hacer la suya propia (Page Speed) y redactar sus propias prácticas recomendadas.

Así que ahora tenemos dos buenas herramientas y dos buenas guías (coinciden en muchos puntos) a utilizar para mejorar la carga de nuestra web. Aquí os pongo algunos de esos consejos que creo que son bastante fáciles de aplicar, pero lo mejor es que leáis las guías con detenimiento:

• Hacer las menos peticiones HTTP posibles. Para ellos se puede por ejemplo unificar diferentes javascripts u hojas de estilo en una sola, o también unificar las imágenes utilizadas en el CSS en una y mostrar la que necesites utilizando la propiedad ‘background’.
• Minimizar los Javascript y CSS. Si utilizas alguna librería externa seguro que tiene su versión minimizada, y si no lo puedes hacer tu mismo usando herramientas como YUI Compressor (también de Yahoo por cierto)
• Añadir una cabecera de control de caché desde tu .htaccess, para que los navegadores de los usuarios nos echen una mano.
• Comprimir con Gzip. Algunos navegadores aceptan el contenido comprimido y los que usamos Apache2 solo tenemos que habilitar el módulo ‘deflate’ y añadir lo siguiente a nuestro .htaccess para conseguirlo.

  # Hacer GZIP de los JS CSS textos
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript

• Poner todo el CSS lo más comprimido posible y a poder ser en un solo fichero en la parte superior de la página, en el head. En cambio el Javascript es mejor ponerlo en el fondo, justo antes de cerrar la etiqueta </body>
• Reducir el número de DNS Lookups. Es decir, el número de dominios que se tienen que resolver al cargar una página. Aunque a veces cuando hay por ejemplo muchas imágenes se recomienda que se carguen desde diferentes dominios para poder descargarlas en paralelo.
• Usar dominios libres de cookies, y servidores ligeros y a ser posible CDNs para servir el contenido estático.
• …

Algunos dirán que lo que digo es una barbaridad, pero me parece una de las mejores herramientas y sobre todo la más ligera. Porque aunque en un principio parezca que es muy light, si sabemos cómo, podemos personalizarla y convertirla en una gran herramienta. Hace tiempo Miquel ya nos dió unos consejitos, pero como se nos ha pasado a Mac, ahora me tengo que buscar la vida :p

Os explico mi configuración y ya me diréis que opináis:

Lo primero es ir a las preferencias (Editar->Preferencias), y adecuaremos unas cuantas cositas:

- Pestaña ‘Ver’:

• Mostrar números de línea
• Resaltar línea actual
• Resaltar pareja del corchete

- Pestaña ‘Editor’:

• Insertar 4 espacios en lugar de tabulaciones
• Activar sangría automática
• Desactivar copia de seguridad, ya que crea archivos con el mismo nombre con el caracter ‘~’ al final, que hace que linux los trate como ocultos y que si los subimos al servidor nos traeran graves problemas de seguridad

Los colores que vienen por defecto para resaltar el código, no me gustan. Yo prefiero el fondo negro, ahorro energia y descanso la vista :p Así que nos vamos a la siguiente pestaña ‘Tipografías y colores’. De los esquemas existentes, tampoco me convencen ninguno, así que lo que hice fue descargarme otro. Aquí podéis descargar colores para Gedit, a mi el esquema que más me gusta y el que uso es el Darkwin. Para instalarlo, descargalo y luego en la pestaña pulsa en el botón ‘Añadir’ y agregalo.

Ahora llega el turno de instalar plugins o complementos para el Gedit. Por defecto trae algunos preinstalados que solo necesitamos activar desde la cuarta pestaña del panel de preferencias. Activaremos los siguientes:

• Herramientas externas – Permite ejecutar comandos o programas externos a Gedit para facilitarnos el trabajo. Más adelante explicaré como configurarlo.
• Panel de examinador de Archivos – Pone a nuestra disposición un panel lateral para examinar y acceder a los archivos de nuestro proyecto (Tecla rápida F9).
• Recortes – Permite insertar ‘recortes’ de código, o estructuras muy utilizadas (loops, ifs,…). Escribe la palabra clave y luego pulsa tabulador, el resto se escribirá solo.
• Sangrar líneas – Permite el sangrado de líneas de manera rápida mediante Ctrl+T.

Además de estos, creo que es una buena opción instalar otro plugin más, pero este no viene por defecto, se llama Symbol Browser. Se trata de un panel lateral que permite la exploración de objetos, funciones, defines,…

Yo os explico como le he instalado en Ubuntu 9.04, pero si necesitáis más información podéis ver este artículo que fue como lo descubrí. Lo primero que hay que hacer es instalar Exuberant Ctags, que es la herramienta ne la que se basa este plugin, luego descargamos el plugin y lo instalamos. No olvides después de instalarlo activarlo en la pestaña ‘Complementos’ como hemos hecho con los anteriores.

sudo apt-get install ctags
cd ~/.gnome2/gedit/
wget http://sourceforge.net/projects/symbol-browser/files/symbol-browser-bin/gedit-symbol-browser-plugin-bin-ubuntu-i386-0.1/gedit-symbol-browser-plugin-bin-ubuntu-i386-0.1.tar.gz/download #La URL puede cambiar al cambiar de versión
tar -xzf gedit-symbol-browser-plugin-bin-ubuntu-i386-0.1.tar.gz

Eso sería todo. Bueno, más bien casi todo. Por último habría que configurar el plugin ‘Herramientas externas’ para poder realizar diferentes tareas, como comprobar la syntaxis de nuestro código, consultar la documentación de PHP, ‘standarizar’ nuestro código con el programa PHP-Beautifer,… Para ver como hacerlo creo que lo mejor es que os paséis por la web de la que he recogido la mayor parte de la info que he puesto en este post, ya que mejor que él seguro que no lo explico: Micah Carrick