Los que me leen desde hace años, habrán notado que suelo cambiar el diseño y tema de mi bitácora (blog) cada 3 años aproximadamente. La última vez que lo hice fue en el 2014. En ese entonces modifiqué un tema existente y lo adapté al diseño que tenía en mente. Pero con el paso del tiempo tuve problemas para mantenerlo, debía estar pendiente de nuevas tendencias para agregarlo y al no hacer un tema hijo, perdía las actualizaciones originales del tema.

Skatux: el pinguino de mi blog
Skatux, el logo de mi web ha vuelto al encabezado e icono del sitio

Mejoras del tema y de rendimiento

Lo primero que hice fue descargar la última versión del tema original. Hice un diff para ver las diferencias y así solo incluir las modificaciones requeridas. Me llamó ver como cosas que hacía anteriormente con modificaciones de código ahora las podía hacer con CSS. También ahora he podido migrar partes del diseño a flexbox en vez de usar floats y clears para alinear elementos.

También he incluido mejoras en el rendimiento como eliminar la carga de archivos de CSS y JS que no necesito. Agregué en el HTML la precarga de dominios para la publicidad de Google Adsense y otros elementos de terceros.

Con la ayuda de GTMetrix pude descubrir las fallas de mi sitio web. Posteriormente empecé a aplicar cada consejo para aumentar el rendimiento del sitio. No pude llegar hasta el puntaje máximo porque el problema es con la configuración de elementos de terceros como el botón de seguir de Twitter, publicidad de Adsense, entre otros. No se tiene acceso a esos elementos y son requeridos por el sitio. Aunque sé que llegué al puntaje máximo sobre las cosas que poseo control.

Mejoras de accesibilidad

Siempre he usado el color naranja como el distintivo de mi blog. Pero al aplicar las pruebas de accesibilidad de Lighthouse descubrí que los tonos naranjas no pueden ir sobre blanco. Por lo tanto tuve que buscar el color mas próximo para así tener mi sitio accesible a todo tipo de personas. También agregué elementos requeridos a algunas imágenes o mejoras del código para facilitar la lectura del sitio en dispositivos para personas con discapacidad.

También tuve que acomodar el tamaño de algunas fuentes y separar elementos para mejorar la visualización. Eso si, sin afectar el diseño del sitio.

La experiencia de actualizar mi blog

Mejorar el trabajo que realicé hace 5 años fue interesante. Me da pena ver como hacía algunas cosas. Pero comprobé como he mejorado mis conocimientos en WordPress y desarrollo web general. También es interesante conseguirse con código o archivos obsoletos. Encontré 2 plugines para vender publicidad, cuyas empresas ya no existen y por lo tanto eliminé.

Vale la pena cada cierto tiempo realizar esta tarea para modernizar las tecnologías del blog. Comprobar si has mejorado o aprendido nuevas cosas y ganar nuevos conocimientos para aplicarlos en trabajos

Espero que noten las mejoras en la carga del sitio. Si encuentran algún problema en bug, no duden en reportarlo para solucionarlo y mejorar la calidad del sitio.

Gracias por leer este artículo 🙂

En el pasado JSConf de Europa, Ryan Seddon realizó una excelente charla sobre todo el proceso de un navegador web (como Firefox, Chrome, Edge o Safari) para visualizar una página web.

Este proceso me parece un tema esencial para todo desarrollador web (tanto frontend como backend), sin embargo, he notado que son pocos quienes saben el proceso de dibujado de la página web y al momento de crear sitios web, no lo hacen de forma correcta o muy deficiente, causando problemas de rendimiento en equipos con poca capacidad de cómputo.

Por los momentos solo está en inglés, pero pueden activar la traducción de subtítulos de Youtube a español y disfrutar un poco del video si no entienden el idioma original del vídeo.

Si quieres seguir investigando sobre este tema, les recomiendo lee este largo pero interesante artículo titulado How browsers works (Cómo funcionan los navegadores), espero que les sea de gran utilidad para futuros desarrollos.

Si son desarrolladores web profesionales y les gustan / obligan a crear páginas de alta calidad totalmente validadas por el estándar w3c, me imagino que su proceso es subir la página a Internet y luego validarla con el HTLM Validator, es un proceso tedioso si estas comenzando a aprender sobre XHTML o deseas validar páginas que dependen de acciones, entre otras cosas.

Para ello, existe un excelente plugin para firefox llamado HTML Validator, no se porqué no está en la página oficial de extensiones de firefox, sin embargo pueden entrar a la página del plugin y descargarlo para su arquitectura y sistema operativo. (posee soporte para Windows, Linux, FreeBSD,OpenBSD para 32 y 64 bits)

Al instalarlo, observarán en la esquina derecha inferior, un sí­mbolo verde si la página aprueba el estándar o rojo si ocurre lo contrario. Al hacer clic sobre él, se abrirá una ventana mostrando el código fuente de la página junto a la lista de errores, lo interesante es que al leer sobre cada error, se explica como deberí­a hacerse correctamente a través de ejemplos para poder corregir el error posteriormente y no volverlo a cometer.

Ventana del plugin html validator

Ventana del plugin html validator

Es muy importante si eres desarrollador web, seguir el estándar w3c ya que garantizarás que tus trabajos sean visibles de forma correcta en el 95% de los navegadores (Internet Explorer es el único navegador que no respeta esto y poco a poco le ha tocado adaptarse al estándar) y darás mayor calidad a tus páginas.

¿Quién dijo que la música geek era mala? Con el siguiente video que me pasó Cisco #2 (del ex-blog cafeinageek.com) veremos un excelente rap (musicalmente) hecho por The SEO Rapper sobre el uso de estandares web, css y muchas cosas mas.

Si les gustó, les recomiendo entrar a la página The SEO Rapper y observen mas ví­deos de este grandioso artista geek.

Bueno regresé después de tanto tiempo sin de verdad actualizar la página, pero la universidad me tenia full y me quitaba todo el tiempo para la página. Bueno por ahora decidí­ cambiar todo el contenido de la pagina a php para que me permita hacer grandes actualizaciones de manera rápida.

Y gracias a esto me dí­ cuenta que al migrar todas las paginas de HTML a PHP y utilizando CSS he reducido aproximadamente un 40% y 80% a cada archivo html. Lo cual aparte de que me permite modificar por ejemplo el menú principal de arriba en todas las paginas al mismo tiempo, me ahorra un 40% ó 80% de espacio en Disco y de ancho de banda.

Tal vez le parezca como tardí­o que haya hecho esto a estas alturas pero siempre me habí­a dado pereza, por lo que invito a todos los webmaster que sigan usando el HTML antiguo y sin CSS a que migren sus páginas a contenido dinámico y con CSS para que observen las ventajas del mismo.