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

Para comenzar necesitamos solo tres cosas:

• Google Chrome instalado.
• Instalada la extensión Speed Tracer.
• Café o té (a gusto)

Instalación y configuración de Speed Tracer

La instalación en Windows es muy simple, pero requiere dos pasos. Instalados Google Chrome e Speed Tracer debemos ir al icono del navegador de Google, dirigirnos a la solapa que dice “shortcut” y donde esta la ruta o target al ejecutable de Google Chrome agregar al final y con un espacio lo siguiente:

--enable-extension-timeline-api

Luego salvar los cambios y ejecutar Chrome.

La instalación en Mac OS X es un poco distinta, pero es muy simple también. Para Mac tenemos que descargar Speed Tracer bootstrap en resumidas cuentas hace lo mismo que en Windows pero de forma automática. Una vez que instalamos el programa nos aparece un nuevo icono de Chrome que ejecuta el navegador pero del modo adecuado para correr Speed Tracer sin problemas.

Primer acercamiento a Speed Tracer

Si la instalación la pudimos realizar con éxito al iniciar Chrome vamos a encontrarnos que al lado derecho de la barra de direcciones aparece un pequeño icono que justamente es igual al logo de Google Speed Tracer, algo igual a esto:

Como muchos se imaginaran la forma de iniciar esta fantástica herramienta es ingresando al sitio que queremos verificar y presionando el reloj, al hacer eso ingresaremos al monitor de Speed tracer en ventana nueva.

Para que comience la magia refresquemos desde el botón del navegador el sitio, en ese momento Speed tracer comenzara a grabar el funcionamiento del sitio con sus respectivas estadísticas.

Muchos al ver el funcionamiento y grabación de la sesión recordaran la mítica timeline del Flash, aquí la metodología es similar,  por otro lado tendremos un botón de grabación para comenzar o reanudar la recopilación de información, un botón reset para comenzar de nuevo. También podemos guardar el informe como es de esperarse para luego modificando el sitio comparar resultados.

La gráfica y el tiempo

Esta extensión tiene algo que la convierte en prácticamente única, y que nos brinda información que otros complementos no, la gráfica y el tiempo exacto de cada evento.

Esto quiere decir que a medida que vamos descargando el sitio la extensión va creando una gráfica de consumo de recursos, una vez que detenemos la grabación al igual que una gráfica de Google Analytics vamos a poder elegir el periodo de tiempo a evaluar y analizar de forma detallada y a la máxima potencia que fue lo que ocurrió en ese preciso lapso de tiempo.

Y repito, esto es por lejos lo mas potente que tiene la herramienta, ver con total exactitud que es lo que esta consumiendo recursos no tiene precio,  otras herramientas lo que hacen es contemplar el sitio como un todo y generar un informe en base a la totalidad de recursos, aquí la información nos dan el resultado con una precisión de milésimas de segundo, la gráfica es por demás descriptiva, basta con verla que podemos seleccionar el rango de un pico y ver que estaba pasando ahí.

Las gráficas, como en análisis en si se puede dividir en dos partes: El monitor de recursos y el monitor de eventos.

El monitor de Eventos

Simple de usar, podemos analizar los distintos eventos con alto nivel de precisión.  Y el informe por columnas es valioso por la información que podemos obtener, un informe tiene este aspecto:

En la tabla vamos a poder encontrar:

• Started: Tiempo relativo a la linea de tiempo cuando el evento se inicio.
• Duration: Tiempo que duro el evento en milisegundos
• Type: Tipo de evento (aquí esta la lista completa en inglés)
• Breakdown by time: Se indican los tres tipos de eventos que mas consumen tiempo de reloj durante la ejecución de ese evento en particular.

Ademas si lo deseamos cada una de estas filas se puede expandir click mediante para ver un poco más de detalles del evento en particular. A todo esto a medida que vamos pasando el punto del mouse sobre cada fila vamos viendo en la gráfica de arriba la linea exacta del evento.

El monitor de Recursos

Aquí con el monitor de recursos sinceramente me quedo con el de YSlow, no obstante es también practico y como principal ventaja puedo decir que cada recurso es separado del total mostrando las cabeceras recibidas del servidor. Algo útil para detectar anomalías como por ejemplo una ruta a un archivo rota, o una cache o tiempo de expiración inexistentes.

La desventaja que veo en esta herramienta es que no permite definir si se utiliza o no un CDN, algo que veo necesario para filtrar el total de recursos descargador de un mismo lugar, mejorando considerablemente el análisis.

Algo que me gusta del monitor de recursos es que nos da una serie de alertas para avisarnos de que algún elemento puede ser optimizado para mejorar el rendimiento por ejemplo colocando la cache-expiration a una imagen, etc.

Conclusión:

Speed Tracer es una excelente herramienta gratuita, y si trabajamos con ella y otras tantas como Firebug, Pagespeed, y YSlow la optimización de nuestro sitio web se convierte en una tarea mucho mas simple y divertida que antes.

Personalmente suelo buscar estas cosas, porque más allá de las manualidades, se puede aprender mucho sobre circuitos y conexiones que quizás son fáciles de hacer pero no tenía idea.

Para esto les voy a recomendar estos sitios que me parecen excelentes, y ninguno está íntegramente orientado a las tareas del hogar, sino más bien a aparatos y cosas en general.

El primero de ellos, lo encontré hace cerca de un año, se trata de Instructables, un sitio enorme, dónde sus usuarios brindan tutoriales sobre cómo construir desde estructuras de luces hasta comida extraña. Contiene muchísima información y siempre se encuentra algo interesante para leer y sumergirse en su funcionamiento.

Los artículos de Instructables suelen contar con esquemas, y explicaciones que pueden descargarse de forma gratuita, podemos incluso obtener un código para insertar las guías en nuestro propio sitio sin ningún problema. Es realmente un portal excelente que, para quienes estamos buscando siempre realizar circuitos extraños y esas cosas tan lindas, resulta extremadamente útil.

Por otro lado, una web que encontré hoy, pero se que lleva varios años también, Wiki How, que tiene básicamente el mismo funcionamiento que Instructables pero es mucho más pequeño y no contiene tanta electrónica. El sitio entero está dividido en categorías que nos permiten ir a buscar directamente lo que necesitamos.

Ambos sitios contienen plataformas de registro de usuarios y permiten colaborar con nuestros propios tutoriales y guías de DIY, también cuentan con diversas formas para mantenerse en contacto con la comunidad (Twitter, Facebook, Feeds RSS o Newsletter).

No he podido encontrar sitios de estas características en español y considero que, más que nada, es porque llevar adelante una plataforma de estas con éxito requiere muchísimo trabajo para hacerlo bien, si alguno de ustedes conoce un proyecto parecido en español (que no sea solamente de tareas del hogar) no dude en aportarlo.

Cuando hablamos de optimización del código de nuestros sitios web uno debe hablar de forma obligada de tres programas que son casi imprescindibles, tanto por lo fácil que resulta utilizarlos como la ayuda que nos proveen, ellos son Firefox, Firebug y Pagespeed, que es justamente de la extensión en la que vamos a centrarnos en este tutorial básico de uso.

¿Que es Page Speed?

Page Speed es una extensión o complemento para Firefox open source desarrollado ni mas ni menos por Google para todos los diseñadores o programadores web. Que tiene como razón de existir asistirnos en la mejora de nuestros código para una correcta optimizaron y un excelente desempeño. Esto da como resultado que nuestro sitio sea:

• Mas rápido
• Mas liviano
• Mas barato de mantener
• Mas eficiente

¿Suena bien verdad? … continuemos

¿Como instalar Page Speed?

Solo vamos a necesitar tres cosas, y para nuestra suerte todas gratuitas.

• Primero instalar Firefox, navegador que ya deberías tener instalado hace tiempo
• Luego tener instalado otra extensión: Firebug también gratis, liviana y que sirve para otras cosas, es imprescindible.
• Y por ultimo y ahora si, instalar la extensión de Page Speed.

¿Como utilizar Page Speed?

Bueno si seguimos los simples pasos anteriores y no se presento ningún problema al iniciar Firefox vamos a encontrarnos con una pequeña cucaracha en el borde inferior derecho de la pantalla.  Que y a diferencia de cualquier otra cucaracha esta es muy útil y simpática, se debería ver así:

Ahora al hacer click sobre ella, se abrirá lo que instalamos en el paso anterior, es decir, Firebug, ahora lo que tenemos que hacer e ir a la solapa “Page Speed” donde veremos un botón central que debería decir “Analyze Performance” haciendo Click en el esta maravillosa extensión comenzara a analizar automáticamente el sitio que esta abierto en ese momento en Firefox.

Por ejemplo obtendremos el siguiente informe:

Como pueden ver en la imagen que coloque, Page Speed va a evaluar el desempeño de nuestro sitio por una serie de factores, dependiendo de la situación marcara con tres distintos estados a cada uno, estos son:

• Tilde Verde: Todo funciona perfecto, no hace falta hacer nada, la vida es bella.
• Alerta Amarilla: Si buen funciona podría mejorarse.
• Alerta Rojo: Tarea requerida y es aquí donde debemos prestar especial atención porque Page Speed acaba de detectar un factor por el cual podremos obtener una mejora sustancial.

En total existen 21 posibles escenarios por los cuales page speed va a evaluar nuestro sitio, con la ayuda de Tamara a continuación pasamos a hacer una muy pequeña introducción de cada uno, obviamente en la ayuda oficial de Pagespeed encontraran mas información, pero como este es un tutorial básico de uso no queríamos dejar de contarles mas o menos de que trata cada factor.

Índice

Mantenemos el nombre de cada buena practica para que tengan una forma de buscar una rápida referencia, ya que Page Speed las mostrara con exactamente el mismo nombre que colocamos a continuación.

1. Leverage browser caching
2. Remove unused CSS
3. Serve static content from a cookieless domain
4. Put CSS in the document head
5. Use efficient CSS selectors
6. Leverage proxy caching
7. Minify CSS
8. Minify JavaScript
9. Optimize images
10. Minimize cookie size
11. Enable gzip compression
12. Combine external JavaScript
13. Minimize DNS lookups
14. Optimize the order of styles and scripts
15. Serve resources from a consistent URL
16. Avoid CSS expressions
17. Combine external CSS
18. Specify image dimensions
19. Minimize redirects
20. Defer loading of JavaScript
21. Parallelize downloads across hostnames

1. Leverage browser caching

Colocando una fecha de caducidad o edad máxima en los headers del HTTP para recursos estáticos, permite que el explorador cargue previamente los recursos descargados desde el disco local, en lugar de utilizar la red.

2. Remove unused CSS

Este punto nos dice que estamos teniendo declaradas varias cosas dentro de nuestra hoja de estilos que no estamos utilizando, algo que es bastante normal y que si no es exagerado no es para nada nocivo, una buena practica para evitar este tipo de problemas es utilizar distintos css dependiendo de la sección o parte del sitio, es decir, si por ejemplo declaramos x cantidad de clases en nuestro css para mostrar cierta imagen en la home del sitio, quitarla en el css del archivo individual.

Obviamente y como venimos viendo en este tutorial todo depende de la situación en concreto.

3. Serve static content from a cookieless domain

Brindar recursos estáticos desde un dominio sin cookies, reduce el tamaño total de solicitudes hechas desde una página.

4. Put CSS in the document head

Esto es fácil y bien simple. Primero una recomendación: es mas eficiente utilizar la propiedad <link> que @import y por otro lado debemos colocar los estilos bien arriba dentro del <head></head> del documento. Mas fácil imposible, la diferencia se nota bastante.

5. Use efficient CSS selectors

Obviando claves selectoras ineficientes, que combinen con un gran número de elementos puede acelerar la visualización de la página.

6. Leverage proxy caching

Habilitando el caching en los headers HTTP para recursos estáticos, permite al explorador descargar fuentes desde un servidor proxy cercano, en lugar de un servidor de origen remoto.

7. Minify CSS

Compactar nuestras hojas de estilo pueden ahorrarnos algunos kb que pueden parecer insignificantes pero que no lo son tanto cuando comenzamos a multiplicar por el numero de visitantes. Existen varias herramientas para optimizar archivos css.

8. Minify JavaScript

Similar al caso anterior, compactar correctamente nuestras bibliotecas javascript se traduce directamente no solo en un ahorro de transferencia de archivos sino también en mejores tiempo de carga, recuerden que cuanto menos pesa nuestro sitio mas rápido podrá ser descargado.

También recuerden que muchas veces y cuando se habla de bibliotecas comunes como jQuery, mootools, etc. podemos utilizar libremente a Google para que nos preste el alojamiento completamente gratis, y ahorrar toda esa transferencia de datos.

9. Optimize images

El formato correcto, el tamaño y la pérdida de compresión de imágenes puede salvar muchos bytes de información.

10. Minimize cookie size

Manteniendo las cookies lo más pequeñas posible, asegura que una solicitud HTTP pueda entrar en un solo paquete.

11. Enable gzip compression

Utilizar la compresión Gzip es una de las grandes mejoras que podemos hacer para acelerar la descarga de nuestros sitios, en Wordpress se puede hacer de forma mas o menos simple, en mi caso instale un plugin y listo pero dependiendo de la configuración de nuestro servidor habilitar la compresión se puede hacer de varias formas.

Como no todo es Wordpress les deje otro enlace para activar la compresión gzip desde el htaccess.

12. Combine external JavaScript

Combinar scripts externos en la menor cantidad de archivos posibles, acorta los RTTs y retrasa la descarga de otros recursos.

13. Minimize DNS lookups

Reducir el número de nombres de dominios únicos, desde donde los recursos son brindandos, acorta el número de resoluciones de DNS que el explorador debe hacer, y en consecuencia, el retraso RTT.

14. Optimize the order of styles and scripts

Ordenar las hojas de estilo y los scripts inline externos, permite mejor paralelización de las descargas y acelera el tiempo de visualización del explorador.

15. Serve resources from a consistent URL

Es  importante brindar un recurso desde una URL única, para eliminar los bytes duplicados de descarga y RTTs adicionales.

16. Avoid CSS expressions

Las expresiones CSS degradan la performance de la visualizacion; reemplazandolas con alternativas, mejorará la visualización, en especial para usuarios de Internet Explorer.

Nota: Estas prácticas aplican solamente a Internet Explorer 5 a 7, que soportan expresiones CSS. Las expresiones CSS son desaprobados por IE 8, y no soportados por otros exploradores.

17. Combine external CSS

La idea principal de esto es que evitemos hacer muchas solicitudes, es decir, no exagerar haciendo llamados a CSS externos, algo que Google recomienda es utilizar hasta un máximo de 3 archivos externos, pero preferentemente que sean solo 2, esto se logra combinando, por ejemplo podemos juntar los que poseen unas pocas lineas logrando así un solo archivo en lugar de 4 o 5.

18. Specify image dimensions

Simplemente definir las dimensiones de las imágenes utilizando height y width.

19. Minimize redirects

Minimizar redirecciones HTTP desde una URL a otra, acorta los RTT adicionales y el tiempo de espera para los usuarios.

20. Defer loading of JavaScript

Diferir la carga de funciones JavaScript que no son necesarias al comienzo, reducen la descarga incial, permitiendo que otros recursos sean descargados en paralelo, y acelerando la ejecución y el tiempo de visualización.

21. Parallelize downloads across hostnames

Servir recursos desde cuatro o cinco nombres de dominio diferentes, aumenta la paralelización de descargas.

Finalmente, Page Speed no es la respuesta definitiva

Si bien me encanta Page Speed y me parece una herramienta de tremenda utilidad estoy seguro que no es la respuesta definitiva en cuanto a optimizaron de recursos se refiere, inclusive no siempre sus sugerencias deben ser tomadas absolutamente al pie de la letra.

Page Speed provee una serie de lineamientos, y no a todos los sitios estos consejos les resultan de igual utilidad, ni siquiera significa que lograr pasar al 100% esta validación sea lo mejor, lo que recomiendo es prestar atención a sus consejos pero tampoco enloquecer por cumplirlos a todos.

Antes de empezar una captura de pantalla de como quedaría el globo o bocadillo (términos que aprendí gracias a Tamara hace 10 minutos porque no sabia el nombre real de este componente tan usado en los comics )

Y todo esto sin usar una sola imagen. Empecemos a ver como armar esto paso por paso.

1) Lo primero es el código HTML del globo estilo historieta.

2) Una vez que colocamos el código HTML pasemos a colocar el CSS componente a componente, lo primero que vamos a hacer es crear el estilo del div que es el globo propiamente, el mismo se hace usando como base la propiedades CSS para crear bordes redondeados, que ya vimos en otro tutorial. Por lo que el código seria el siguiente:

Como se ve en el código no hay nada raro, es exactamente lo mismo que vimos en el tutorial que les comente anteriormente, además que se le agrega una sombra, algo que le da un efecto visual muy lindo. Si hicimos todo bien el resultado parcial seria el siguiente:

3) Ahora solo falta agregar el triangulo inferior para darle ese aspecto de globo de historieta tan clásico, para hacer eso el código se divide en dos partes. La primer parte del código se encarga de generar el fondo del triangulo que luego se convertirá en el borde visualmente.

Y la segunda parte que incluye un hack para IE6 que se encarga de rellenar el triangulo.

Y eso es todo, si siguieron todos los pasos tendrán un globo diseñado íntegramente en CSS y sin usar absolutamente ninguna imagen.

La compatibilidad con navegadores es muy pero muy buena, sacando obviamente a Internet Explorer que si bien se ve correctamente los bordes redondeados no funcionan y veremos el globo con bordes rectangulares, algo que no es grave y que en primera instancia, y al menos a mi, no me impediría usar esta técnica

Es por esa simple razón que la mejor solución que encontré es la de pegar los subtítulos directamente a la película.

Para pegar o fundir los subtítulos a por ejemplo un archivo avi las posibilidades eran muchas pero sinceramente una mas complicada que otra, por ejemplo una posibilidad era virtualdub pero para hacer esto había que seguir tantos pasos y el proceso demoraba tanto que me terminaba desanimando, hasta que un día un amigo mió bastante fanático de las series me recomendó AVI ReComp y desde entonces no lo cambio por nada, porque ya desde que comence a usarlo pegar un subtitulo a una película fue tan simple que cualquier alternativa me representaba un dolor de cabeza, a continuación los pasos que tienen que seguir para hacer esta tarea de forma sencilla.

Simple tutorial para pegar subtítulos

1) Lo primero que tienes que hacer obviamente es obtener de forma gratuita AVI ReComp e instalarlo, el proceso es el mismo que con cualquier programa, paso obvio pero que aclaro por si hay algún perdido

Es importante que instalen todo, inclusive el AviSynth, todo sea porque luego no nos este pidiendo que instalemos codecs extraños ni nada.

Una vez que finalice toda la instalacion y ejecutemos el programa llegaremos a esta ventana:

2) Ahora lo primero que tienes que hacer es seleccionar el archivo de origen, para hacer esto basta que seleccionemos con el botón OPEN AVI la ruta donde se encuentra el mismo.

3) Luego seleccionamos la salida, es decir donde se guardara el archivo avi con los subtítulos integrados. Para hacer esto seleccionamos la ruta de destino con el botón “SAVE AVI”

4) Una vez finalizado los pasos anteriores pasamos a la parte en que le decimos al programa que subtítulos debe colocar y de que forma, para hacer esto en el menu del programa seleccionamos "additions" cuando hagamos esto veremos la siguiente pantalla:

En esta pantalla tenemos dos opciones muy importantes, la primera se refiere a si queremos bordes oscuros en los subtítulos función especialmente interesante para mejorar la visibilidad de los textos y segundo, la opción para seleccionar el archivo que contiene los subtítulos propiamente, para hacer esto tildamos la opción "enable/disable" y buscamos la ruta con los subtítulos, el programa admite subtítulos con extensiones txt, sub, srt, ass y ssa.

5) Listo, ya estamos, ahora debemos ir al menú y seleccionar “queue” y ahí apretar en orden los botones “add to queue” que se encarga de ingresar en la lista de tareas la grabación de lo que acabamos de hacer en los pasos anteriores, luego apretar en Start y listo, el programa comenzara a pegar los subtítulos en la película correspondiente.

El proceso suele demorar bastante, así que con paciencia, es ideal que hagamos esto cuando no tenemos que seguir trabajando con la computadora para evitar demoras.

Espero que les sea de utilidad este simple tutorial

Web para descargar el programa: AVI ReComp

• No dependemos de un tercero como puede ser Tinyurl por lo que el sistema no funciona solo cuando no funciona la bitácora completa.
• La forma de acortar la url no requiere de programación adicional, no hace falta incluir una función nueva ni nada.
• Queda mucho mejor mostrar una url con nuestro dominio que usando uno de terceros.
• Es mas fácil enviar a sitios como Twitter una url corta y propia que la url del post completa o bien utilizando un tercero.
• Es muy fácil hacerlo.

Si te parece buena la idea, el resultado por ejemplo es el siguiente:

URL Normal:  http://www.kabytes.com/tutoriales/enlaces-a-sitios-sociales-en-wordpress-y-sin-plugins/
URL Acortada: http://www.kabytes.com/9463

Empecemos, como usar WP como acortador de urls:

1) Lo lindo de esta forma de acortar la url es que es nativa de Wordpress al 100% y seguramente mas de uno ya estará sospechando al ver que la dirección corta tiene ese numero al finalizar y justamente, ese numero es el ID del post que solo WP genera al crear cada entrada por lo que en realidad es: http://www.kabytes.com/ID_POST

De esta manera y de la misma forma que mostré en el tutorial para mostrar los links sociales para mostrar esta url acortada basta usar el siguiente código dentro del bucle de WP:

http://www.kabytes.com/<?php echo $post->ID; ?>

Obviamente cambiando la url por la de su dominio, ya con eso estarán mostrando y sin ningún tipo de problema la url acortada.

2) Ahora viene lo lindo de acortar la url de esta forma, solo necesitamos editar el archivo.htaccess el mismo se encuentra en la raíz de nuestro servidor y colocar tal cual muestro el siguiente código que vi hace tiempo en Walhez:

# URL Corta
RewriteEngine On
RewriteRule ^([0-9]+)$ ?p=$1 [R=301,L]

Y listo, ya tendrán su propio acortador de direcciones de forma nativa en Wordpress, muy simple, además que esas url hacen una redirección 301 por lo que todo enlace transmitirá pagerank sin ningún problema

Como colocar los enlaces a los sitios sociales sin plugins:

Lo primero y prácticamente único que tenemos que hacer es colocar el siguiente código en el archivo single.php de nuestro querido theme de Wordpress.

Y listo, luego basta con agregar un estilo a cada enlace para que se muestre un icono en cada uno, en mi caso mantuve los mismos que en el tutorial de los CSS sprite y listo, en otro post explico como hacemos aquí para acortar automáticamente las urls de cada entrada

Lo bueno de mostrar los enlaces para enviar a los sitios sociales de esta forma es que no recargamos nuestra instalación de Wordpress con ningún plugin y no es necesario la utilización de ningún servicio externo que muchas veces tiende a demorar la carga del blog con solicitudes que no son realmente imprescindibles.

Espero que les sea de utilidad

De igual forma, el lograr validar un documento por la sencilla y excelente razón de querer superarnos es una difícil pero hermosa tarea que muchos decidimos encarar, ya que lograr cero errores en el escaneo de nuestro Sitio nos provoca una destacada sensación de orgullo y felicidad. Como poseedores de una bitácora tendemos a luchar con un factor extra que influye en la validez de nuestro documento, y me refiero al formulario de FeedBurner utilizado para que nuestros lectores se subscriban mediante correo electrónico, el cual, lamentablemente, no valida en su forma original.

Luego de no encontrar una respuesta concreta al asunto, decidí encarar por mis propios medios el formulario de registro y modificarlo para que el mismo valide. Lamentablemente la validez del mismo tiene como desventaja que anularemos la ventana emergente de FeedBurner y provocaremos que la página de confirmación directamente se cargue en la misma ventana en la cual nuestro sitio se está mostrando (lo que para algunos significa la pérdida definitiva del usuario). Veamos la línea donde se encuentra el problema:

Según la W3C el uso de "target="popupwindow"" no está permitido, así que lo que haremos es borrar dicho parámetro,  y modificar completamente el "onsubmit" con el fin de dejar, en dicho lugar, únicamente la dirección de la página de validación del registro de FeedBurner. Tendremos entonces el siguiente resultado en la primera línea del código:

También, muchos obtendrán errores de validación en el resto del formulario, lo cual se soluciona dejando todos los "label" e "input" dentro de un mismo "<div>" y "</div>", o "<p>" y "</p>". Por ejemplo, el siguiente es el formulario de registro que estoy actualmente utilizando en LeegaR Blog y pasa los estándares de validación:

Una de las frases que destaco del vídeo en el cual Matt Cutts confirma que la validez del documento no influye en el posicionamiento es "It's important to realize that the vast majority of pages on the web don't validate" (en Español, "Es importante darse cuenta de que la gran mayoría de páginas en la web no validan") por lo cual si queremos desprendernos del grupo mayoritario, y sacarnos la etiqueta de "Mi página no valida", podemos empezar a trabajar ahora mismo en el código de nuestro sitio hasta lograr la perfección. Saludos.