Ahora sí mis compañebrios blogguebrios… ya está listo el nuevo diseño del sitio.
Me retrasé más de lo esperado, pero al fin ha quedado listo.

Algunos me han criticado el nombre en la imagen de header por ser un mal diseño, y lo acepto… no soy nada bueno con el jotoshop.
En poco tiempo haré el cambio, y espero contar con la ayuda de algunos amigos que en verdad sepan de eso, jeje.

Bueno, el theme es el primero que hago totalmente por mi cuenta. Utilicé como base la estructura del theme Kubrick que viene por default en Wordpress (para no batallar con los tags de WP) pero borrando la hoja de estilos y creando un CSS totalmente nuevo.

Espero las críticas, cualquier cosa que no les guste, o que sí les guste. Si tienen alguna recomendación, soy todo oídos.

Les dejo las capturas comparativas del viejo diseño (minyx) con el nuevo. La captura también servirá para el recuerdo.

Captura del viejo diseño

Nuevo diseño del blog

Espero les guste el nuevo formato, y sigue avanzando.

Aquí va la segunda parte del artículo El diseño de los Blogs famosos robado íntegramente desde Tecnoculto.

Smashing Magazine - A Small Study Of Big Blogs

Hace unos días, resumía un excelente artículo del blog Smashing Magazine en el cual mencionan algunas de las características del diseño de los 50 blogs más importantes (según Technorati).

A manera de recordatorio, he aquí las conclusiones de ese primer artículo:

Los top-blogs usan:

Un diseño hecho con CSS de 3 columnas, centrado, con un ancho fijo que se encuentra entre los 951 y los 100 pixeles, de los cuales por lo menos el 58% se destina al texto, con letras oscuras sobre un fondo claro, con 85 a 94 caracteres por línea. La fuente preferida es Verdana de 12 pixeles, y para los títulos de las entradas la fuente preferida es Arial de 20 a 22 pixeles.

Bueno, pues Smashing Magazine ha publicado la segunda parte de este artículo, y he aquí un resumen del mismo:

(más…)

Calcular el número de páginas webs que existes es prácicamente imposible porque en primer lugar deberíamos definir ¿Qué es considerado un sitio web?.

Los más expertos en la materia aseguran que un sitio web es todo servidor que está activo y es accesible desde un navegador, respondiendo a esta definición en el año 1990 únicamente se crearon 9 sitios webs, esta cifra se antoja ridícula si lo comparamos a los cerca de 170 millones de sitios webs que existen hoy en día.

En estos últimos años los países que han experimentado un mayor crecimiento de websites son Estados Unidos, Japón, Alemania, China y Corea del Sur.

En la siguiente gráfica podemos ver el gran crecimiento pero también se aprecia el estancamiento de las denominadas “web activas” (se actualizan a diario), estas webs activas ya representan únicamente un 48% del total de sitios lo que indica el gran número de sitios webs abandonados o que se utilizan únicamente porque aún generan ingresos publicitarios.

El crecimiento de Internet como se puede ver en las gráficas es imparable y en estos últimos años se duplica cada trienio:

• 2002 - 40 millones de sitios
• 2005 - 80 millones de sitios
• 2008 - 160 millones de sitios

Cierto es que el crecimiento en este último trienio ha sido debido en gran medida a la aparición de los blogs y redes sociales, que ponen al alcance de cualquiera la posibilidad de crear un sitio web.

Grandes efemérides en la historia de Internet

La primera página web

Si nos preguntamos ¿Cuál fue La primera página web?, la respuesta es un poco complicada… depende de lo que entendamos por página web.

Si tomamos por definición que: “una Página web es una fuente de información adaptada para la World Wide Web (WWW) y accesible mediante un navegador de Internet”, podemos afirmar que la primera página web conocida es esta (1991) creada por Berners-Lee (Se considera el inventor y el protector de la web al mismo tiempo).

Es curioso que lo de W3 para referirse a la WWW no llegará a buen puerto y se quedara finalmente en WWW o Web, muy interesante el código fuente.

En esta línea del tiempo seguro que encuentras alguna efeméride interesante.

(más…)

Un artículo bastante bueno que me encontré el otro día en TecnoCulto hace un pequeño estudio del diseño de algunos de los blogs más famosos.

Me resultará útil para mi futuro diseño… que a propósito… ¡¡ya estoy muy retrasado con él!!

Les dejo la entrada tal y como viene de la fuente:

El blog Smashing Magazine ha realizado un interesante estudio para determinar cómo es el diseño de los 50 blogs más importantes en la lista de los más enlazados de Technorati.

Desde mi punto de vista, sus resultados no deben ser tomados en cuenta con demasiada seriedad para decidirnos sobre el diseño que más nos favorece a nosotros. Como bien saben los que se dedican a estos menesteres, el diseño web no es una serie de reglas, como una receta de cocina. La coherencia, el significado y la eficiencia se consiguen tomando en cuenta el tema del blog, sus lectores, la tecnología que utiliza y las preferencias de los autores. Yo diría que la palabra clave es “armonía”.

De todas formas, es interesante descubrir qué decisiones de diseño han tomado “los grandes”.

(más…)

Esta madrugada me encontraba actualizando Tags de algunos viejos posts y en más de una ocasión me ocurrió que tenía videos incrustados y al actualizar el post el chistosito de Wordpress me borraba el código o trataba de ajustar las etiquetas <object> dejando los videos inutilizables.

Hace un tiempo instalé el plugin My Video para insertar videos de una manera fácil, y me ha funcionado bastante bien.
Pensé en actualizar los códigos de mis posts para que funcionaran con el plugin, pero pensé en lo molesto y tardado que sería el irme de uno en uno escribiendo las etiquetas [ youtube ]xxxxx[ /youtube ] a cada video (pueden ver en el TagCloud la cantidad de videos que hay), así que mejor me decidí a modificar el plugin My Video para ser usado de una manera más simple y sencilla posible.
Así que… les presento mi primer Plugin para Wordpress: Tubeasy.

• Descripción || Description
• Instalación || Install
• Modo de uso || HOWTO Use
• Por hacer || TODO List
• Descarga || Download

(más…)

Como algunos ya se habrán dado cuenta, este blog ha estado cargando cargando lento en los últimos días. Esto se debe a que el servidor donde me hospedo está realizando una actualización masiva de servidores MySQL. Debido a esto, estuve tentado a sacar del aire mi sitio por unos días, ya que lo que más odio es la carga lenta de una web. Pero pensé: “Mejor busco la manera de optimizar mi sitio”. Y en eso ando últimamente.

Andaba merodeando por el blog de unijimpe y me encontré en la portada con una clase en PHP escrita por Leon Chevalier de Acid Drop, que permite acelerar la carga de nuestra web al unir y comprimir los archivos CSS y Javascript asociados a nuestro web.

¿Cómo se acelera la carga?

Para acelerar la carga de una web hay varios puntos a tener en cuenta:

• Menos peticiones HTTP, es decir cargar menos archivos asociados a un web.
• Agregar headers indicando que los archivos estáticos expiran en el futuro.
• Utilizar compresión Gzip los elementos estáticos de una página.
• Optimizar el tamaño de los CSS, Javascript y el HTML, por ejemplo eliminando espacios en blanco y saltos de línea en el código.

Todos estos criterios están implementados mediante la clase class.compressor.php la cual pueden descargarla en: Improve website load time by 500% with 3 lines of code (actualización del script). Hay que tener en cuenta que esta clase funciona con PHP 4 y si deseas utilizar la compresión de Javascript es necesario PHP 5.

Utilizando la Clase

El uso de esta clase es muy sencillo, lo primero es adjuntar la clase al inicio de nuestra página y luego crear una instancia del objeto compressor de la siguiente forma.

require_once(‘class.compressor.php’); //Incluir la ruta completa de la ubicación de la clase
$compressor = new compressor(‘css,javascript,page’);

El segundo paso es colocar al final de la página una llamada al método finish el cual ejecuta la compresión necesaria, esto de la forma:

$compressor->finish();

Entonces si por ejemplo tenemos una determinada página que carga varios Javascript y un css incluyendo la clase para comprimir tendríamos el siguiente código fuente:

<?php
require_once(‘class.compressor.php’);
$compressor = new compressor(‘css,javascript,page’);
?>
<html>
<head>
<title>Ejemplo de class.compressor.php</title>
<link href=”styles.css” mce_href=”styles.css” rel=”stylesheet” type=”text/css”>
<script type=”text/javascript” src=”js/mootools.js” mce_src=”js/mootools.js”></script>
<script type=”text/javascript” src=”js/swfobject.js” mce_src=”js/swfobject.js”></script>
<script type=”text/javascript” src=”js/functions.js” mce_src=”js/functions.js”></script>
</head>
<body>
<!–código html de nuestra web–>
</body>
</html>
<?php
$compressor->finish();
?>

La implementación es bastante sencilla, como pueden ver. Ahora falta ver resultados verdaderos.

Uso de la clase en Wordpress

Debido a que la estructura de Wordpress es simple pero complicada a la vez, recomiendo que primero creen una carpeta dentro del directorio raiz de Wordpress. Por ejemplo, “clase”.
Suban el fichero y las librerías de la clase a ese directorio, y otorguen permisos de escritura al directorio. Esto último es muy importante para el correcto funcionamiento de la clase.

/*NOTA*/ Esto puede ocasionar problemas de seguridad, así que tengan cuidado al implementar este proceso.

Ahora editen el archivo del encabezado de su plantilla (header.php) agregando las 2 líneas para la llamada a la clase y la creación de la nueva instancia antes de la etiqueta <HTML> o la cabecera <!DOCTYPE>. No olviden modificar la ruta de acceso al archivo.

<?php require_once(‘./clase/class.compressor.php’); //Incluir la ruta completa de la ubicación de la clase
$compressor = new compressor(‘css,javascript,page’); ?>

Guarden los cambios y ahora abran el archivo para el pié de página (footer.php) o el correspondiente donde se cierre la etiqueta </HTML>. Justo después del cierre incluyan la línea <?php $compressor->finish(); ?> y guarden cambios.

Pueden hacer pruebas usando Firefox y el add-on Firebug antes y después de implementar la clase para ver las diferencias de tiempo.
Según la página del autor, esta clase puede mejorar la carga del sitio hasta en un 500%.

Resultados

En las pruebas realizadas en este blog, sí hubo una mejora en el tiempo de carga y ejecución de consultas a la base de datos, aunque tampoco fueron resultados verdaderamente sorprendentes.

Antes de incluir la clase, realicé 10 refresh a la página “Acerca de“, por su poco contenido y ninguna dependencia de archivos de otro sitio.

Los resultados mostraron un promedio de carga del sitio de 8.346 segundos y 2.666 segundos para las consultas a la base de datos.

Después de incluir la clase hubo cierta mejora. El promedio de carga del sitio bajó a 5.185 segundos y las consultas también descendieron a 1.664 segundos.

Según los resultados, el rendimiendo del sitio mejoró ligeramente. El tiempo de carga se redujo a sólo un 62.125% y las consultas a la base de datos a un 62.415%.
Osea que las mejoras fueron de un 37.874% y 37.584%, respectivamente.

No es un 500%, pero es algo.

Descarga

La versión 0.3.1 de la clase la puedes descargar directamente de aquí:
aciddrop website speedup v0.3.1.
La información del autor la encontrarás en este enlace:
Boost your website load time with 3 lines of code.
Las actualizaciones al script las encontrarás aquí:
Site speed boost script updated.

Para quienes ya conozcan este plugin para wordpress, les traigo una traducción que acabo de realizar a la versión 1.2 ya que (hasta donde pude buscar) no hay versiones en español de este plugin.

Para quiénes no lo conozcan, NoFollow-Free es un plugin para wordpress que nos permite remover el atributo “nofollow” del campo autor del comentario y/o del enlace en el cuerpo del comentario y/o del enlace del usuario registrado.
En palabras más simples… Wordpress trae por default integrado este atributo en los comentarios, que su función es la de ordenarle a los robots rastreadores (como googlebot o yahoo slurp) que no hagan seguimiento de los enlaces tanto en el campo del nombre del autor, como en los que son encontrados dentro del texto del comentario. Una manera de evitar darle enlaces externos o, lo que es lo mismo, un pagerank mayor a quienes comenten en un blog. Esto mayormente está orientado a los spammers.
Pues bien, la función de este plugin es la de remover ese atributo nofollow para darle seguimiento a esos enlaces y que puedas ofrecer a tus visitantes los “merecidos” enlaces externos para mejorar su pagerank y posicionarse mejor en los buscadores.

Trae algunas opciones adicionales, como el uso de lista negra de palabras, comentarios mínimos para remover el nofollow, y también mostrar una banda en la parte superior de la página para mostrarle a tus visitantes podrán conseguir seguimiento de sus enlaces.

Para quienes deseen probar este plugin ya traducido al español pueden descargarlo en el enlace que está abajo. Y para los que ya tengan este plugin en inglés, también les ofrezco un parche para traducirlo.

NoFollow Free en español (57 KB)

Parche actualización de NoFollow Free al español (6 KB)

NOTA: Si instalan las versiones en ambos idiomas en conjunto (no sé por qué) deben desactivar uno para poder activar el otro. Ambas versiones no pueden ser activadas al mismo tiempo.

Si desean más datos sobre el plugin, pueden visitar el sitio oficial: michelem.org.