Durante muchos años mi proceso de depuración en PHP se baso simplemente en utilizar echo y print_r, sinceramente no necesite más durante mucho tiempo.

Pero así como esta metodología es efectiva y extremadamente simple, también tiene restricciones, especialmente en aquellos sitios en donde PHP se ejecuta en segundo plano, sitios que por ejemplo utilizan AJAX hacen que el proceso de depurar mostrando mensajes directamente en el documento se vuelva algo muy dificultoso. La solución FirePHP.

¿Que es FirePHP?

FirePHP es un complemento de Firefox que funciona de forma conjunta con otra extensión que los desarrolladores conocemos muy bien, estoy hablando de Firebug. FirePHP es una herramienta fundamental para aquellos que gusten de depurar código PHP de forma simple y sin complicaciones.

FirePHP es complemente gratuito, así que no hay excusas para aprender a utilizarlo.

El complemento de Firefox FirePHP funciona enviando mensajes a la consola de Firebug, estos mensajes pueden configurarse de distintos modos, e inclusive permiten el envío de variables para mostrar su contenido directamente en la consola.

¿Que necesitamos?

Muy pocas cosas, lo mejor, todas gratuitas:

• Firefox
• Firebug
• FirePHP
• Un servidor con PHP corriendo, comúnmente utilizaremos un entorno LAMP, si quieren instalarlo facilmente en Windows te recomiendo EasyPHP, en Mac MAMP y finalmente si tienes una computadora vieja en casa puedes montar un servidor casero de pruebas.

Eso es todo.

¿Como configurar FirePHP?

1º Lo primero que necesitamos es ir al sitio oficial de FirePHP e instalar el complemento en Firefox, esto no requiere ningún conocimiento, simplemente instalamos la extensión. Obviamente Firebug ya debería estar instalado anteriormente.

2º Ahora necesitamos descarga, también de la web oficial de FirePHP los archivos PHP necesarios para crear la comunicación entre nuestra aplicación PHP y la extensión, las bibliotecas necesarias se denominan FirePHPCore.

Una vez que descargues y descomprimas el core de FirePHP nos vamos a encontrar con una carpeta con el nombre FirePHPCore-0.3.2 2 (última versión estable del core), dentro de esta carpeta ingresamos a Lib y copiamos íntegramente la carpeta que encontramos dentro, la carpeta se llama FirePHPCore.

La carpeta FirePHPCore la debemos copiar y pegar directamente en el proyecto que queremos depurar, esto no es obligatorio, pero si practico, ya que después tendremos que colocar la ruta a la carpeta desde nuestra aplicación.

3º La configuración es muy simple, dentro del archivo PHP que deseamos depurar instalamos la biblioteca e inicializamos la instancia de FirePHP:

<?php
require_once('FirePHPCore/FirePHP.class.php');
ob_start();
$firephp = FirePHP::getInstance(true);
?>

4º Ahora simplemente enviamos los mensajes que deseemos a la consola, existen varios métodos, el más simple es:

$firephp->log('Mensaje enviado a consola', 'Mensaje');

Para ver el mensaje, ingresamos a Firefox, abrimos Firebug y nos dirigimos a la pestaña “consola” y lo que veremos será lo siguiente:

Y eso es todo, pero vamos a ver algunas cosas más para aprovechar mejor la potencia de FirePHP.

Configurar tipos de mensajes

Con motivos de aprovechar mejor los distintos tipos de mensajes, y así lograr organizarnos mejor, podemos indicarle a FirePHP que tipo vamos a utilizar, para hacerlo simplemente indicamos el tipo al momento de inicializar, los 4 tipos distintos de mensajes posibles son:

$firephp->log('Un mensaje plano');
$firephp->info('Un mensaje de información');
$firephp->warn('Una alerta');
$firephp->error('Enviar un mensaje de error');

El resultado:

Envío de variables y formato de salida

Obviamente, de solo mensajes no vive el hombre, probablemente necesitemos mostrar arrays, objetos, etc. Por ejemplo si lo que queremos es mostrar el contenido de un array y de paso formatearlo como una tabla podemos hacer algo similar a esto:

$table   = array();
$table[] = array('Titulo 1','Titulo 2', 'Titulo 3');
$table[] = array('Col 1, fila 1','Col 2, fila 1','Col 3, fila 1');
$table[] = array('Col 1, fila 2','Col 2, fila 2','Col 3, fila 2');
$table[] = array('Col 1, fila 3','Col 2, fila 3','Col 3, fila 3');

$firephp->table('Tabla', $table);  

fb($table, 'Tabla', FirePHP::TABLE);

El resultado:

Este tutorial es básico, FirePHP cuenta con más opciones de configuración, en mi caso y por el momento estas que describí en la entrada son las que más utilizo.

Hoy en día, ya grande y con más computadora que lápiz y papel, puedo reconocer que hubiese sido fantástico aprender en ese momento, aunque nunca es tarde para empezar. Para ello hay sitios que se dedican a enseñar a través de tutoriales para aprender a dibujar y otros, como en este caso, que realizaron una infografía sobre las cuestiones básicas que debemos tener en cuenta para dibujar el cuerpo humano.

Descargar Infografía | Xanarts

Obviamente el dibujo no es algo que pueda aprenderse instantáneamente, como casi todo en la vida requiere de práctica, empeño y algo que para mi es fundamental: voluntad. No importa que los primeros bosquejos nos parezcan horribles, hay que seguir intentando.

Me encuentro con que esta infografía va por partes y permite analizar parte a parte cada sector del cuerpo humano, las diferentes perspectivas que necesitamos tener en cuenta para lograr un dibujo realista y sobre todo, algunas cuestiones anatómicas que son esenciales incluso para que luego de avanzar sobre la práctica podamos modificar, aumentar o deformar a gusto.

Es una ayuda importante si están pensando en comenzar a dibujar, y un excelente lugar de consulta para todos aquellos que ya dibujan de forma amateur y desean humanizar sus creaciones. Espero les sirva de cualquier manera, ya que crear, lo que sea, expresa el alma en otra dimensión.

1) Lo primero que hay que hacer es abrir el iTunes, una vez dentro nos dirigimos a:
Archivo -> Añadir a la biblioteca. Y seleccionamos el archivo epub que queremos importar.

2) Una vez seleccionado nos aparece dentro de la biblioteca la opción de Libros. Ahora simplemente conectamos nuestro dispositivo, lo seleccionamos y nos dirigimos a la opción libros del menú superior.

Ahora simplemente tildamos la opción de sincronizar libros, podemos seleccionar todos o bien solamente los que queremos sincronizar con nuestro dispositivo.

Una vez finalizado aceptamos los cambios y esperamos. Lo más probable si nunca leímos libros nativos desde el iTunes es que pida instalar una aplicación, ya solo iTunes nos recomienda iBooks que es gratuita, la instalamos y listo.

Eso es todo, al finalizar todo este proceso que no es para nada complejo nos dirigimos a nuestro dispositivo, abrimos iBooks y ahi tendremos nuestros libros listos para leer

Así se ve iBooks con nuestro primer libro sincronizado:

Realizar un diagrama de una base de datos es algo muy simple y rápido, y en mi caso se volvió en una necesidad, en muy pocos pasos les voy a explicar como pueden crear un diagrama de sus bases de datos en apenas unos segundos.

Guía para visualizar gráficamente una base de datos MySQL

1) Lo primero que necesitamos es el programa MySQL Workbeanch, un software muy potente, gratuito y disponible para los sistemas operativos Windows, Mac OS y las distros de Linux más utilizadas. Actualmente esta disponible la versión 5.2.31. La instalación es muy simple y es igual a la de cualquier otro programa.

2) Una vez instalado Mysql Workbench vamos a utilizar la opción disponible en su pagina de inicio “Create ERR Model From Existing Database”

Como se puede ver en la captura también tenemos disponible la opción de crear el diagrama en base a la importación de la sentencia de creación Mysql de una base de datos. En el ejemplo vamos a utilizar la opción de crear el diagrama utilizando una tabla ya existente.

Un EER (Enhanced Entity Model) o en español seria algo como “Modelo Entidad-Relación” significa simplemente que vamos a crear un diagrama de relaciones, una especie de modelado de datos de determinado sistema de información. Lo interesante de esta forma de modelar es que los diagramas realizados van a tener listas con atributos y descripciones, algo importantísimo para determinar la utilidad real del uso de esta herramienta.

3) El siguiente paso es configurar la base de datos. En mi caso utilizo una base de datos que tengo configurada en mi computadora, de ahí que los datos son del localhost y con los valores por defecto. La herramienta funciona perfectamente con cualquier base de datos independientemente de su ubicación, por lo que van a poder crear un modelo por más que la base de datos se encuentre en un servidor en producción.

4) En el próximo paso simplemente la base de datos se va a conectar, no tenemos que hacer nada, una vez que la conexión funciona simplemente pasamos al Select Schema.

5) Una vez conectada la herramienta con el servidor se nos pide que seleccionemos la base de datos a la cual le queremos realizar el esquema, la pantalla se ve de la siguiente manera, en mi caso voy a utilizar como ejemplo una base de datos creada por WordPress.

6) Si todo salió bien, vamos a tener las tablas cargadas de la base de datos que seleccionamos en el paso anterior, ahora tenemos la opción de filtrar que tablas utilizar y cuales no, esta parte es importante si queremos aislar nuestro estudio a determinadas tablas.

7) Ahora solo nos quedan dos pantallas más que iremos aceptando y que no requieren acción, el programa solo se encarga de realizar todos los trabajos, finalmente nos vamos a encontrar con la base de datos diagramada perfectamente mostrando las tablas, sus relaciones, los datos y sus clases.

El resultado, la base de datos utilizada por WordPress de forma gráfica:

Eso es todo, ¿Fácil verdad?

La base de datos de WordPress no utiliza relaciones, usa tablas MyISAM, por lo que la gráfica es solo útil para visualizar rápidamente el tipo de datos y la composición de las tablas. Cuando trabajamos con base de datos relacionales como innodb la herramienta cobra mucho más sentido ya que se disparan flechas mostrando las relaciones entre las distintas claves foráneas, les aseguro que es muy pero muy útil hacer eso cuando buscamos relaciones

Lo interesante de mod_pagespeed es que realiza de forma automática correcciones a nuestros sitios para que reflejen las mejores practicas para tener una web rápida, es decir, nos ayuda en la optimización sin prácticamente tocar una línea de código. Como yo siempre fui bastante reacio a las correcciones automáticas este fin de semana lo instale y realice varias pruebas, algunas con excelentes resultados y otros con no tanto.

Comencemos.

Requerimientos para instalar mod_pagespeed

• Acceso SSH a nuestro servidor, por lo general este tipo de acceso lo vamos a tener en servidores VPS o bien dedicados.
• Consola SSH
• Paciencia, cafe o cualquier snack que nos ayude emocionalmente

Instalación

El modulo page speed esta disponible para las plataformas CentOS/Fedora (32-bit y 64-bit), Debian/Ubuntu (32-bit y 64-bit) y finalmente, como es de esperarse obviamente, para Apache 2.2.

La instalación varia según la plataforma, la forma de realizarla sugerida por Google es la siguiente:

Para instalar los paquetes en Debian/Ubuntu, ejecutar desde la consola con acceso root:

dpkg -i mod-pagespeed-*.deb
apt-get -f install

Para CentOS/Fedora, ejecutar también como root:

yum localinstall mod-pagespeed-*.rpm

o

rpm -i mod-pagespeed-*.rpm

Nota 1: Si no cuentan con el repositorio de Google instalado (cosa muy probable) pueden hacerlo con el siguiente comando:

sudo touch /etc/default/mod-pagespeed

Nota 2: Antes de comenzar la instalación es muy importante que busquen en Google si su proveedor de alojamiento cuenta con alguna opción de instalación automática. Por ejemplo Dreamhost permite la instalación con tan solo tildar una opción. Otro ejemplo es Godaddy que también tiene preinstalado el modulo. En caso contrario muchos proveedores como Mediatemple están brindando guías punto a punto de como instalar este modulo especialmente en base a sus servidores y su configuración.

Editar el archivo pagespeed.conf

Una vez que finalizamos la instalación y si todo salió bien vamos a poder editar el archivo de configuración de Page Speed, es justamente desde aquí que le vamos a decir al modulo que tipo de optimización vamos a querer realizar en nuestro sitio. Para editar este archivo podemos utilizar vi, por lo general la ruta del archivo será la siguiente:

vi /etc/httpd/conf.d/pagespeed.conf

Antes de hacer nada, vamos a buscar dos líneas en especial que son las siguientes:

ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"

Estas lineas son muy importantes, indican donde se van a guardar los archivos generados por pagespeed como así también las cache dinámicas, por favor revisen si las carpetas indicadas están creadas y con permisos de escritura.

El archivo de configuración por defecto que viene con Page speed contiene una configuración básica de las distintas opciones, en si todo el archivo es bastante fácil de comprender, por ejemplo a continuación coloco un extracto de la instalación básica de los distintos filtros.

ModPagespeedFileCachePath            "/var/mod_pagespeed/cache/"
ModPagespeedFileCacheSizeKb          102400
ModPagespeedFileCacheCleanIntervalMs 3600000
ModPagespeedGeneratedFilePrefix      "/var/mod_pagespeed/files/"
ModPagespeedLRUCacheKbPerProcess     1024
ModPagespeedLRUCacheByteLimit        16384
ModPagespeedCssInlineMaxBytes        2048
ModPagespeedImgInlineMaxBytes        2048
ModPagespeedJsInlineMaxBytes         2048
ModPagespeedCssOutlineMinBytes       3000
ModPagespeedJsOutlineMinBytes        3000

¿Filtros? Probablemente muchos se quedaron pensando a que me refería, o al menos le llamo la atención la palabra, por suerte los llamados filtros de Page Speed son los que nos permiten a nosotros configurar en su máximo esplendor este modulo de apache, con ellos vamos a determinar que queremos que haga exactamente.

Uso de los filtros de Page Speed

Los filtros pueden estar o no activos, para ello basta con colocar una directiva en cada caso:

Desactivar filtros:

ModPagespeedDisableFilters nombrefiltroA, nombrefiltroB

Activando filtros:

ModPagespeedEnableFilters nombrefiltroA, nombrefiltroB

Es muy importante tener en cuenta estas dos cosas, porque de aquí vamos a poder ir haciendo las respectivas pruebas. Un pequeño consejo, en el mismo archivo de configuración (pagespeed.conf) donde vamos ir activando o desactivando filtros según nuestras necesidades tenemos la línea de pánico, es decir, aquella que vamos a utilizar si hacemos algo que rompe todo en nuestro sitio , la linea en cuestión en definitiva activa o desactiva el mod completo y es la siguiente:

ModPagespeed on

Si en lugar de on escribimos off vamos a desactivar el modulo completo, como dije antes, para usar el caso de pánico si vemos que algo que activamos hizo algún desastre

Filtros de mod_pagespeed

A continuación coloco los distintos filtros posibles de Page Speed y para que sirve cada uno de ellos, recuerden que para activarlos deben colocar ModPagespeedEnableFilters seguido del nombre del filtro, en caso de utilizar varios simplemente separen los nombres por comas.

add_instrumentation

Inserta en el código de forma automática un pequeño script javascript para controlar el tiempo de respuesta de nuestro sitio. El resultado luego lo podemos visualizar desde las estadísticas de Page Speed, las estadísticas vienen activadas por defecto al momento de instalar el modulo.

extend_cache

Brinda la posibilidad de potenciar el cacheo de elementos, para eso agrega un tiempo máximo de vida dentro de las cabeceras http, para aprovechar la capacidad de los navegadores modernos de guardar elementos en la cache local. Ademas utiliza un hash para renombrar los elementos que se encuentran en la cache.

Por ejemplo un elemento HTML y su cabecera http:

HTML tag   : <img src="logo.gif" />
HTTP header: Cache-Control:public, max-age=300

El mismo ejemplo utilizando el mod_pagespeed:

HTML tag   : <img src="ce.c17941127d34679357baa1b36fb4ecc5.logo,g" />
HTTP header: Cache-Control:public, max-age=31536000

collapse_whitespace

Quita todos los saltos de línea innecesarios en el HTML. Reduce el tamaño del documento al quitarlos acelerando la descarga.

combine_css

Como su nombre lo indica combina múltiples archivos CSS en uno solo. Con esto lo que logramos es reducir las llamadas al servidor. Por ejemplo si nuestro sitio cuenta con 3 archivos CSS mod_pagespeed los combina a los tres por orden de aparición en uno solo y lo guarda bajo un nombre creado en base a un hash.

combine_heads

Si nuestro documento contiene más de un head los combina en uno solo mejorando el renderizado en el navegador.

move_css_to_head

Mueve las llamadas a los archivos CSS al head por más que estas se encuentren al final del documento. Practica que mejora el renderizado de nuestro navegador.

elide_attributes

Un filtro para mi muy controversial. Elimina muchos tags “innecesarios” para reducir el tamaño del documento, pero a la vez deja a nuestro sitio como un documento invalido XHTML. Ademas hay que usarlo con mucha precaución si utilizamos por ejemplo jQuery porque elimina muchas veces cosas que son necesarias a la hora de “levantar” alguna variable. En lo personal no me gusta este filtro.

Ejemplo de un elemento:

  <button name="ok" disabled="disabled">

El mod_pagespeed reescribe:

  <button name="ok" disabled>

inline_css e inline_javascript

Ambos filtros hacen lo mismo. Copian el contenido de un CSS o JS externo y lo pegan directamente en el documento evitando hacer una llamada externa. Muchos se estarán preguntando que decide que se pega en el documento y que no, la respuesta esta en el extracto original del pagespeed.conf que coloque al principio, porque ahí es donde se estipula el tamaño máximo del archivo.

Por ejemplo con ModPagespeedCssInlineMaxBytes 2048 estamos diciendo que embeba en el documento todos los archivos CSS que no superen los 2048 bytes, si el archivo supera este tamaño que continue siendo una llamada externa, lo mismo ocurre con inline_javascript.

outline_css y outline_javascript

Hace exactamente lo contrario al ejemplo anterior. Si el CSS se encuentra dentro del documento y supera un tamaño máximo, este se quita del documento original y es llevado a un archivo externo. También este tamaño se decide desde las directivas utilizando ModPagespeedCssOutlineMinBytes y ModPagespeedJsOutlineMinBytes.

remove_quotes

Remueve las comillas innecesarias para ahorrar espacio. En este caso me parece una buena práctica. Probablemente el ahorro en recursos no sea impresionante, pero de seguro se notara al menos un poco al llegar a fin de mes

remove_comments

Quita todos los comentarios del código HTML. Ahorrando espacio, es una opción bastante buena para ahorrarnos trabajo a nosotros.

rewrite_css, rewrite_images y rewrite_javascript

Los tres filtros que a mi más me gustaron. Se encargan de comprimir nuestros archivos al máximo posible. En el caso de las imágenes reduce el tamaño sin perder absolutamente nada de calidad. De todas las opciones estas tres son las que sin lugar a duda más diferencia marcaran a la hora de tiempos de descarga y ahorro de recursos (especialmente si hablamos de transferencia de datos).

Algo interesante de mod_pagespeed es que al trabajar con cache de datos no sobrecarga demasiado al servidor, por ejemplo cuando visitamos una pagina con una imagen la misma se muestra de forma original, pero la magia viene en la segunda visita porque ya va a mostrar la imagen desde la cache con las mejoras y optimizaciones realizadas.

Conclusión

El modulo de Page Speed es otra apuesta de Google por promocionar una serie de buenas practicas que existen desde ya hace bastante tiempo para que nuestros sitios web se descarguen muy rápido. La realidad es que el modulo esta creado para aquellas personas que no desean lidiar desde un comienzo con esta serie de lineamientos. Es una forma de automatizar cosas que tendríamos que hacer nosotros automáticamente al publicar un proyecto. No obstante es útil y practico, una vez instalado nos vamos a olvidar de muchos aspectos y tendremos gran parte de nuestro sitio optimizado.

En el blog de Google Webmaster al momento de lanzar el modulo se habla de una mejora del doble de velocidad. Este numero es muy probable que se alcance en sitios que no tienen ninguna optimización, pero no ocurrirá en aquellos sitios que ya cumplan con varias pautas o buenas practicas, como por ejemplo la de comprimir archivos CSS, Javascript y una optimización del tamaño de las imágenes.

Queda en cada uno de nosotros que filtros probar y cuales no. Por el momento aquí Pagespeed esta desactivado, pero seguiré probando los fines de semana con menos trafico que combinación es la que funciona mejor

Más información sobre mod_pagespeed:

• Ejemplos uso de filtros
• Sitio oficial de mod_pagespeed

Hoy me puse a jugar un poco con ella y quería comentarle a modo de guía básica como funcionar, para que sirve y sobre todo como implementar esta fantástica herramienta. Comencemos.

¿Para que sirve la API de Google Font?

Principalmente para que podamos utilizar cualquier familia de tipografías en nuestro sitio web, independientemente de las que son consideradas por defectos en los navegadores más populares.

Siempre fue una critica hacia los navegadores las pocas tipografías aceptadas por defecto, pero desde hace un tiempo existen varias alternativas como FLIR para que los diseñadores puedan implementar cualquier familia de fuentes. No obstante muchas de estas alternativas tienen varias contras, como su compleja implementación.

Todos estos pormenores hicieron que CSS se tome en serio el asunto y casi por arte de magia en su versión 3 logre implementar font-face, una propiedad que permite definir cualquier tipografía en base al archivo fuente de la misma. Y es ahi donde justamente donde Google se puso a trabajar brindando un api para hacer el trabajo sucio.

¿Cuando debería utilizar la API de Google Font?

Aquí vamos a encontrarnos con varias opciones y cada uno debería poder determinar cuando merece la pena usar un API y cuando no. A mi me gusta evaluarlo de la siguiente forma y decido utilizar un API cuando:

• Necesito utilizar distintas familias de tipografías no instaladas por defecto y no quiero tener que trabajar en subir los archivos de las fuentes, ni definirlas manualmente en mi CSS.
• Cuando quiero ahorrar transferencia. Ya que la transferencia ocasionada por el archivo de la tipografías corre por cortesía de Google.
• Cuando quiero velocidad. Es similar al caso anterior, pero aquí hagan pruebas, muchas veces la paralelización de descargas desde distintos host acelera considerablemente el tiempo de descarga de un sitio web, otras veces….no tanto.

Bien, me gusto ¿Que necesito para empezar?

Solo tiempo y un poco de ganas.

Ademas y antes de comenzar te voy a recomendar que mires la lista completa de tipografías incluidas en el API que si bien no son millones son unas cuantas, numero que muy posiblemente aumente en los próximos meses.

¿Como puede implementar el API en mi sitio?

Muy pero muy fácil, con una simple linea de código.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

No es muy difícil darse cuenta que lo único que tenemos que cambiar es la Font+Name para habilitar la tipografía en nuestro sitio. Si lo deseamos y queremos usar más de una tipo vamos a indicarlas como parametros separados por |

Por ejemplo vamos a activar las tipografías Tangerine, Inconsolata y Droid Sans:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Luego vamos a definir la nueva tipografia instalada en nuesta hoja de estilo de la siguiente forma:

h1{font-family: 'Tangerine', serif; color: green}

Es decir, que prácticamente estaremos trabajando con nuestra hoja de estilo como lo hicimos siempre.

¿Un ejemplo de utilización completo?

<html>
<head>
<title>Ejemplo de uso de la API de Google Fonts</title>
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

<style>
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-size:30px;
font-family: arial; }
h1, h2, h3{margin-bottom:10px; padding:0;}
h1{font-family: 'Tangerine', serif; color: green}
h2{font-family: 'Inconsolata', serif; color: blue}
h3{font-family: 'Droid Sans', serif;color: red}
</style>

</head>

<body>
<h1>Escribiendo con Tangerine!</h1>
<h2>Escribiendo con Inconsolata!</h1>
<h3>Escribiendo con Droid Sans!</h1>
</body>

</html>

Y el resultado lo pueden ver online directamente.

Utilizar la API de Google Fonts, es realmente fácil y por las pruebas que hice es bastante rápido el renderizado de las distintas familias de tipografías, por lo que su uso es bastante recomendado.

¿Desventajas de uso?

Si bien estoy bastante contento con el resultado no creo que por el momento la API de Google Fonts reemplace a los sistemas que se vienen utilizando hasta el momento para generar compatibilidad con tipografías no instaladas por defecto, las principales razones son:

• No hay todavía disponibles muchas familias de fuentes.
• Muchas personas no quieren depender de un tercero a la hora de servir sus sitios.
• Si el API falla todo nuestro sitio va a mostrar las tipografias por defecto con un resultado probablemente bastante desagradable (aunque esto se puede configurar desde el CSS como siempre)
• Si el navegador no tiene compatibilidad con la propiedad font-face también va a mostrar una fuente por defecto.

Finalmente…

Si bien tenemos cosas a favor y en contra, jugar un poco con Google Font me gusto mucho, creo que es una API con futuro si se mejora el repositorio de archivos tipográficos, brindando más posibilidades que las pocas que hay hoy en día.

Luego de quitarle la capa de suciedad, el ventilador volvió a funcionar perfectamente, por lo que la operación fue un éxito. Confieso que me dio miedo abrirla, pero una vez que quité la tapa todo resultó muy simple y sin consecuencias indeseadas.

Para todos aquellos que posean una Dell Inspiron 1425, o modelos similares, he aquí un pequeño tutorial para abrirla y limpiarla. Así evitaremos cualquier accidente relacionado con este componente tan necesario para el correcto funcionamiento de cualquier ordenador.

Precisaremos un destornillador de precisión, un paño para colocar la máquina y otro paño seco o papel tissue para limpiar. Debemos prestar especial atención a la forma en la que vamos desarmando todo, para luego saber con exactitud como volver hacia atrás.

Paso 1: colocamos la computadora cerrada e invertida sobre el paño designado. Con el destornillador Phillips (punta estrella) adecuado nos disponemos a extraer los siete tornillos de la tapa.

Paso 2: una vez que hemos aflojado los siete tornillos los dejamos todos juntos a un lado y procedemos a extraer la tapa, y vemos el dispositivo al cual está adosado el ventilador, allí nos encontramos con cinco tornillos más que debemos quitar.

Paso 3: Una vez hecho esto quitamos con mucho cuidado y siempre hacia arriba todo el dispositivo. Lo separamos y observaremos como tanto el cooler como el compartimento que lo contiene, están sucios.

Paso 4: Quitamos la suciedad del compartimento lo mejor posible, no utilizar paños húmedos, simplemente la extraemos envolviendo, en un paño o papel tissue, una vez hecho esto, soplamos el excedente y será suficiente. Por otro lado con mucha suavidad limpiamos el cooler, también soplar o utilizar aire comprimido puede servirnos.

Una vez que tenemos todo limpio, chequeamos que la pasta de nuestro procesador (el cuadrado) siga en perfecto estado, sino, deberemos reemplazarla para evitar tildados. Volvemos hacia atrás todo, colocando primero el cooler con su dispositivo en su lugar, atornillamos, tapamos y atornillamos nuevamente.

Si alguno ha hecho la prueba con otro modelo y considera que el procedimiento es muy similar, por favor no dude en comentarlo, para ampliar la solución a otras notebooks. Espero les sea útil.

Antes de empezar, el enlace al ejemplo del slider jQuery y un pequeño video de como se ve el resultado.

¿Que necesitamos?

• Framework jQuery en su ultima versión. Como siempre yo lo cargo desde Google
• Pikachoose que es el plugin que yo utilizo.
• Las imágenes que queremos mostrar en este slider, es importante que todas tengan el mismo tamaño, si bien que tengan distinto tamaño no afecta en nada porque el excedente se oculta el resultado es optimo cuando nosotros mismos cortamos las imágenes, de esa forma mostramos exactamente lo que queremos.
• Unos 20 minutos de tiempo y café o mate a gusto.

Preparando el lienzo

El código html es muy limpio y prolijo, solo requerimos una lista común y un contenedor.

<div class="slider">
<ul id="slider_imagenes">
<li><img src="gato01.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato02.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato03.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato04.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato05.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato06.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato07.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
<li><img src="gato08.jpg"/><span><a href="#">Kabytes.com!</a></span></li>
</ul>
</div>

El html no tiene ciencia alguna. Pido disculpas por no utilizar los atributos alt ni title, pero para hacer el ejemplo quería dejarlo lo mas limpio posible mostrando solo los elementos imprescindibles para que funcione el slider, luego ustedes pueden agregar estas etiquetas para cumplir con los estándares como corresponde.

Lo único que hay que decir aquí, es que dentro del span vamos a colocar el texto que queremos mostrar en el slider, es decir, lo que se va a mostrar por encima de la banda negra semi transparente.

Configurando el slider

Ya tenemos el cuerpo del html, ahora solo necesitamos configurar los javascript necesarios.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/pikachoose-min.js"></script>

<script language="javascript">
<!--
$(document).ready(
	function (){
		$("#slider_imagenes").PikaChoose({
		auto_play: true,
		thumb_width: 123,
		thumb_height: 94,
		buttons_text: { play: "", stop: "", previous: "Anterior", next: "Proxima" }});
		});
-->
</script>

En las dos primeras lineas de código cargamos las bibliotecas javascript necesarias. Luego vamos a configurar el slider de imágenes.

• $(“#slider_imagenes”).PikaChoose Le decimos al plugin que div utilizar. Esto es lo que tenemos que prestar atención por si vamos a hacer mas de un slider en la misma pagina.
• auto_play El slider comienza a reproducirse ni bien se termina la carga, las opciónes son true o false.
• thumb_width y thumb_height El tamaño de las miniaturas, es un escalado de las imágenes.
• buttons_text Son simplemente las traducciones de los enlaces de texto para desplazarse.

Es muy simple la verdad, ademas si consultan la documentación de Pikachoose van a encontrar más opciones, una que me parece importante comentar es user_thumbs que admite dos valores, true o false, esto habilita o no las miniaturas y permite la inserción de miniaturas propias, es decir, que no se generan de forma automática.

Estilos del slider de imágenes

Los estilos que utilice los van a poder ver directamente desde el código fuente del ejemplo que esta online y a su disposición, les comento que esta dividido en dos grupos, uno que es el definido por nosotros y otro que viene por defecto con el plugin, ese no hace falta ni tocarlo para que se visualice correctamente.

Y eso es todo, hay que jugar un poco con las opciones pero el resultado es muy bueno. Probablemente este slider jQuery de imágenes quede muy bien si lo combinamos con nuestras fotos de Flickr

La cuestión es que por mas pruebas que hice cambiando la configuración de MySQL y de Apache los resultados eran muy similares a los obtenidos en pruebas pasadas, hasta que recordé que hacia un tiempo, y para otro proyecto, había instalado una cache de scripts PHP, para ser mas  preciso eAccelerator.

¿Como funciona eAccelerator?

Todo programador sabe (o debería saber) la diferencia entre un lenguaje compilado y uno interpretado. PHP es un justamente un lenguaje interpretado, eso significa que por cada ejecución esta se interpreta, creando una estructura de datos que posteriormente se ejecuta.

Este proceso como se imaginaran es bastante costoso y lento a comparación del realizado por un lenguaje compilado. Quizás este sea unos de los puntos débiles de PHP.

Finalmente tenemos este problema, y es justamente donde entra eAccelerator. Este maravilloso proyecto lo que hace es crear una cache de todos nuestros scripts en PHP, evitando que cada uno de estos tenga que interpretarse por cada ejecución, ahorrando recursos y ganando mucha velocidad.

Lo que esta muy bien de este acelerador es que no requiere acción alguna de nosotros luego de la instalación.

Muchos se estarán preguntando ¿que pasa si un archivo PHP es modificado? la respuesta es simple, nada, eAccelerator detecta la fecha de modificado de un archivo y sobreescribe la cache por la mas reciente. Mas simple imposible.

¿El resultado de instalar eAccelerator con WordPress?

Impresionante, WordPress instalado sin casi utilizar plugin estaba consumiendo 14mb de ram aproximadamente (con picos de casi 20mb), luego de instalar eAccelarator solo 4.48mb.

Instalación de eAccelerator

La instalación fue bastante simple y no necesito mas que algunos comandos desde consola, aunque recomiendo que sigan alguna guía exactamente para la versión de sistema operativo instalado en su servidor, les dejo la que hice yo y funciono la perfección, con la configuración sugerida por PHP.ph en CentOS 5.

yum install php-devel
yum groupinstall 'Development Tools'

Cambiamos de directorio, bajamos los archivos e instalamos

cd /tmp
wget http://bart.eaccelerator.net/source/0.9.5.2/eaccelerator-0.9.5.2.tar.bz2
tar xvfj eaccelerator-0.9.5.2.tar.bz2
cd eaccelerator-0.9.5.2
Phpize.
phpize
./configure
Install it.
make
make install

Creamos un archivo de configuración

vi /etc/php.d/eaccelerator.ini [Enter]

extension="eaccelerator.so"
eaccelerator.shm_size="0"
eaccelerator.cache_dir="/var/cache/eaccelerator"
eaccelerator.enable="1"
eaccelerator.optimizer="1"
eaccelerator.check_mtime="1"
eaccelerator.debug="0"
eaccelerator.filter=""
eaccelerator.shm_max="0"
eaccelerator.shm_ttl="0"
eaccelerator.shm_prune_period="0"
eaccelerator.shm_only="0"
eaccelerator.compress="1"
eaccelerator.compress_level="9"

Creamos un directorio donde se va a guardar la cache de scripts y le damos permisos. Finalmente reiniciamos el Apache.

mkdir -p /var/cache/eaccelerator
chmod 0777 /var/cache/eaccelerator
/etc/init.d/httpd restart

Si todo salió bien vamos a tener instalada y funcionando correctamente la extensión de eAccelerator en nuestro servidor.  Para probarlo podemos crear un archivo .php con este contenido.

<?php phpinfo(); ?>

Ejecutarlo en cualquier dominio y ver si la extensión aparece instalada. Otra opción, y mas fácil de ver si esta funcionando, es instalar el plugin para WP TPC Memory usage, que es el del screenshot y verificar en las opciones dentro de la lista de extensiones instaladas si se encuentra la de eAccelerator.

Nota: Buscando mas información sobre eAccelerator y WordPress veo que Andrés en Anieto2k comenta que utilizando Zend Optimizer los resultados pueden ser aún más impresionantes. Será cuestión de probar

Plugin de WordPress para activar eAccelerator

Ahora si no tenes acceso a ssh y no hay forma de modificar la configuración de tu servidor hay una alternativa. Instalar un plugin que activa por nosotros las ventajas de eAccelerator.

Ademas del plugin de eAccelerator en Neosmart nos permiten descargar otro que activa XCache, que hace prácticamente lo mismo, esta ultima alternativa para crear cache PHP es muy similar y aunque no los probé leí en varios lados que es igual de buena. Si alguno tiene ganas y tiempo puede hacer la prueba a ver cual funciona mejor.

Los plugins por lo que leí estan en una etapa muy experimental, asi que es cuestión de hacer la prueba y ver si funciona y que tal es el rendimiento en nuestro servidor. Por favor si alguien lo hace avise en los comentarios

Antes de comenzar les dejo un enlace al resultado del ejemplo que voy a utilizar para que puedan verlo en funcionamiento y una captura de pantalla:

¿Que necesitamos?

• Una cuenta de Flickr con nuestras mejores fotos, no es necesario que sea una cuenta PRO.
• La biblioteca gratuita jflickrfeed.
• La última versión del framework jQuery (Pueden cargarlo gratis cortesía de Google)
• Café y unos minutos de nuestro tiempo

Conociendo la ID del feed de nuestra cuenta de Flickr

Para poder comenzar vamos a necesitar desde Flickr un único dato, el identificador del feed de la cuenta. Para hacer esto tenemos que dirigirnos a nuestra cuenta, específicamente al home de la misma, que tiene una url con la siguiente forma http://www.flickr.com/photos/nombre_usuario/ una vez ahí nos dirigimos al pie de la pagina, y nos vamos a encontrar con lo siguiente enlace:

Ese es el feed de la cuenta, el enlace que obtendrán ahí tiene la siguiente forma (en negrita el id que nos interesa)

http://api.flickr.com/services/feeds/photos_public.gne?id=12674896@N04&lang=en-us&
format=rss_200

Preparando el documento

Ya tenemos el ID de nuestro feed de flickr, ahora vamos a prepara el documento con las bibliotecas necesarias, para hacer debemos colocar el siguiente código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jflickrfeed.min.js"></script>

En la primera linea cargamos jQuery desde Google y en la segunda apuntamos al javascript que descargamos directamente desde jflickrfeed.

El cuerpo del documento HTML es puede ser el siguiente:

<div id="container">
<h1>Ejemplo basico: Flickr Feed + jQuery</h1>
Este es un ejemplo muy básico de utilización del plugin jFlickrFeed.
<div id="marco" class="thumbs"></div>
</div>

Configurando jQuery con el feed de Flickr

Ahora vamos a lo interesante, como configurar para que muestre correctamente las miniaturas de nuestra cuenta de Flickr donde nosotros queramos. El código del ejemplo es el siguiente:

<script type="text/javascript">
$(document).ready(function(){
		$('#marco').jflickrfeed({
			limit: 18,
			qstrings: {
				id: '12674896@N04'
			},

				itemTemplate: '<li><a href="{{link}}" target="_blank">
				<img src="{{image_s}}" alt="{{title}}" /></a></li>'
                   });
});
</script>

Vamos a ver el código por partes.

• $(‘#marco’).jflickrfeed : Vamos a decirle que selector utilizar para cargar las imágenes, es decir, la función va a buscar dentro del documento una div con id = marco y ahí colocara los datos.
• limit: 18 : Este es el valor que tenemos que cambiar si queremos variar el numero de miniaturas a mostrar, en mi ejemplo selecciono 20.
• id: ’12674896@N04′ : Como se imaginaran, aquí debemos colocar el identificador que conseguimos en el primer paso.
• itemTemplate : Todo lo que se va a colocar aqui es la forma de la plantilla en que se colocan las imagenes, como se ve en el ejemplo van a ver algunas variables entre doble corchetes, esas son reemplazadas por jQuery por los valores correspondientes a las imágenes.

Un poco de CSS para darle estilo a los resultados

<style type="text/css">
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-family: arial; }

#container {
width: 550px;
padding: 30px;
background: #f9f9f9;
margin: 10px auto;
text-align: left; }

.thumbs {
margin: 0;
padding: 0;
overflow: hidden; }

.thumbs li {
list-style: none;
float: left;
margin: 5px;
padding: 3px;
background: #eee;

-moz-box-shadow: 0 0 4px #444;
-webkit-box-shadow: 0 0 2px #000; }

.thumbs li a img:hover {
-moz-box-shadow: 0 0 4px green;
-webkit-box-shadow: 0 0 2px green; }

.thumbs li img { display: block; }

.thumbs li a img { border: none;}
</style>

El css es fácil de entender es prácticamente el mismo que utiliza el plugin jQuery. La verdad que acá entra la imaginación para darle un estilo diferente y acorde al estilo de donde estarán integradas las imágenes.

Y listo, eso fue todo. Como podrán ver no es nada complicado integrar el feed de flickr a nuestros proyectos utilizando jQuery, creo que el trabajo pasa mas por el tema de lo estético que lo funcional