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

Pues aprovechando esta salida, y teniendo en cuenta que se me ha ocurrido una semi-idea para la que tal vez pueda usar esta API, he creado una clase en PHP para facilitar su manejo, Minube PHP. Teniendo en cuenta que la idea puede no llegar nada o quedarse aparcada como tantas otras cosas, he creido conveniente publicar la clase para que otros que si vayan a llevar a cabo las suyas se ahorren el trabajo.

Minube PHP: http://www.berriart.com/minube-php/

(Hace más de un mes que no escribía en el blog, soy un poco vago ¿verdad?)

Os voy a contar los dos métodos que conozco y que he utilizado para hacerlo cuando lo he necesitado. El primero lo copié de un widget de bitacoras.com (no me acuerdo cual) hace bastante tiempo. Es digamos bastante bruto, pero valida CSS, HTML y es compatible en casi cualquier navegador.

Código:

<style type="text/css">
div#rounded-box1 {background:transparent;margin:2em auto;padding:0;width:400px;}
.rb4 {background:#d40000;margin:0 auto;padding:0;width:398px;height:3px;}
.rb3 {background:#d40000;margin:0 auto;padding:0;width:396px;height:2px;}
.rb2 {background:#d40000;margin:0 auto;padding:0;width:392px;height:1px;}
.rb1 {background:#d40000;margin:0 auto;padding:0;width:388px;height:1px;}
.rb-content {background:#d40000;margin:0 auto;padding:0;width:400px;}
.rb-content p {color:#fff;margin:0 10px;padding:0;}
</style>
<div id="rounded-box1">
<div class="rb1"></div>
<div class="rb2"></div>
<div class="rb3"></div>
<div class="rb4"></div>
<div class="rb-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu
arcu sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut,
volutpat quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla
lacus tellus, accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>
<div class="rb4"></div>
<div class="rb3"></div>
<div class="rb2"></div>
<div class="rb1"></div>
</div>

Demo:

La segunda opción es la que utilizo para los enlaces del menú superior del blog, está copiada del menú de Smashing Magazine, y es sin duda la opción que más me gusta. No es compatible con Internet Explorer 6, pero que queréis que os diga, ¡qué actualicen!

Código:

<style type="text/css">
div#rounded-box2 {background:#d40000;margin:0 auto;padding:0;width:400px;border-radius:7px;-moz-border-radius: 7px; -webkit-border-radius : 7px;}
div#rounded-box2 p {margin:0;padding:10px;color:#fff;}
</style>
<div id="rounded-box2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pede. Nulla eu arcu
 sit amet neque ornare scelerisque. Nulla facilisi. Nam nunc lorem, bibendum ut, volutpat
quis, suscipit in, risus. Donec eget elit hendrerit erat commodo aliquam. Nulla lacus tellus,
accumsan vitae, condimentum non, fermentum eu, ligula.</p>
</div>

Demo:

Como bonus track, os dejo esta otra manera, que como poco resulta muy curiosa, en la que consiguen la redondez utilizando un &bull; (•) muy grande.

Hacerlo es bastante sencillo, solo tendréis que escribir las siguientes líneas al comienzo del script:

<?php

define('WP_USE_THEMES', false);	// A menos que vayas a usar el sistema de themes de wordpress
				// debes definir WP_USE_THEMES antes de hacer el require

// Al incluir este archivo, creamos la conexión a la BD y podremos hacer uso de las funciones
require('/ruta-al-directorio-del-wordpress/wp-blog-header.php');  

?>

Hay que tener en cuenta que si vas a utlizarlo por consola o utilizando un cron, Apache no mandará las variables de servidor, así que seguramente tengas que forzarlas tú mismo antes de hacer el ‘require’, si usas WordPress MU tendrás que hacerlo sí o sí. Ej:

$_SERVER['HTTP_HOST'] = 'www.berriart.com';
$_SERVER['REQUEST_URI'] = '/';

Puede que algunas funciones no estén disponibles porque necesiten de algún archivo que no se incluya de manera normal en el WordPress. Por ejemplo si se quiere usar ‘fetch_rss’ para parsear feeds, seguramente tengamos que incluir el archivo ‘rss.php’ de la carpeta ‘wp-includes’ porque éste solo se incluye por defecto en algunas páginas del administrador.

include_once(ABSPATH . WPINC . '/rss.php');

Realmente esos widgets, al igual que los de las barras laterales, son plugins de wordpress por lo tanto lo que tenemos que hacer es un plugin que luego subiremos a su correspondiente carpeta y activaremos en el panel de administración. Además, podremos activar, desactivar o mover ese panel que crearemos para el dashboard, tal como se puede hacer con los que vienen por defecto. Nada mejor que un ejemplo y un poco de código para explicar como hacerlo:

<?php
/*

Plugin Name: Sample Dashboard Widget

Plugin URI: http://www.berriart.com/

Description: Sample code for creating a dashboard widget 

Author: Alberto Varela

Version: 1.0

Author URI: http://www.berriart.com
*/

// Función para mostrar el contenido del widget
function sampledashboardwidget_main_function() {
	echo "Hello World";
}

// Utilizamos la función wp_add_dashboard_widget para añadir el
// widget al panel
function sampledashboardwidget_register_dashboard_widget() {
	wp_add_dashboard_widget('sampledashboardwidget', // ID único del widget
	'Sample Dashboard Widget', // Título para el widget
	'sampledashboardwidget_main_function', // Función principal del wiget
	'sampledashboardwidget_setup');	// Este último parámetro es opcional y solo lo usaremos
					// en caso de necesitar una página de opciones, en ese
					// caso pondremos la función que corresponda
}

// Añadir finalmente el widget mediante el sistema 'hooks' de WordPress
add_action('wp_dashboard_setup', 'sampledashboardwidget_register_dashboard_widget');

// Si se quiere hacer por ejemplo una página de administración, al estilo del widget 'stats',
// podemos añadirla mediante el cuarto parametro de la función 'wp_add_dashboard_widget'
function sampledashboardwidget_setup() {
	if( isset($_POST['sdw_option']) ) do_something();
	echo '<form><input type="text" name="sdw_option" /><input type="submit" /></form>';
}

?>

Creo que no hace falta dar muchas más explicaciones y con esto como inicio cualquiera que se anime y tenga una idea puede crear un nuevo widget para el dashboard. Por cierto, yo no sabía que se podía agregar una página de opciones al widget, pero el otro día Rick me iluminó.

Así es como quedará en el panel de tu WordPress y podrás ver quienes son los últimos que te han enlazado. Como ya dije en su día, prefiero las ‘technorati reactions’ a los ‘incoming links’ de Google que vienen por defecto desde la versión 2.3, hay muchos enlaces que Google no ve o no muestra.

La verdad que debería haberlo hecho antes porque es una de las páginas más visitadas de este blog y uno de los plugins que más se descargan de los que he hecho. Por sino sabéis de que va, se trata de un widget para el panel de administración que te muestra los perfiles en redes sociales y las webs de la gente que te comenta. Sino lo habéis usado nunca os recomiendo que al menos lo probéis, es una buena manera de conocer a la gente que comenta en tu blog.