Autor invitado: Antonio Cambronero.
Sobre cómo he rediseñado eCuaderno, persiguiendo una transformación rápida, segura y eficaz
Me gustaría explicar, a grandes rasgos y en este post de invitado, el proceso que he seguido en el cambio de diseño de eCuaderno. Pero, antes, hagamos un poquito de historia.
Hace casi exactamente 10 años, el 24 de septiembre de 2007, José Luis Orihuela, anunciaba así un rediseño, que también tuve el placer de implementar:
Este rediseño parte de la base de reconocer que, desde la popularización de los lectores de fuentes RSS, los visitantes que llegan navegando a los weblogs son mayoritariamente turistas (no la parroquia), por lo que conviene aligerar los sitios, descomplicarlos y facilitar a los usuarios ocasionales la lectura y exploración del blog.
El objetivo es hacer un sitio limpio, sobrio y claramente legible.
Dos años antes, en septiembre de 2005, finalizábamos también la migración de eCuaderno desde Movable Type, un sistema de blogging que estuvo muy en boga en aquella época, a WordPress.
Pero en una década, los blogs han cambiado mucho.
A pesar de ello, aquel rediseño -con el theme «CopyBlogger»- ha resistido muy bien el paso del tiempo. Sin embargo, había que aplicarle ya una mayor frescura, conferirle modernidad, y, sobre todo, conseguir un blog más rápido, seguro y optimizado para dispositivos móviles. En definitiva, eCuaderno estaba pidiendo a gritos un profundo lavado de cara.
Abramos un pequeño paréntesis, para hablar algo de cómo conocí a José Luis Orihuela.
El 3 de Marzo de 2003, José Luis Orihuela protagonizaba el número 40 de mi serie de posts incluyendo textos de bloguers invitados, escritos en exclusiva para Blogpocket (la sección conocida como BlogGuest).
Aquél post es histórico en la Blogosfera pues en él se recetaba cómo impulsar la blogosfera hispana con 5 ideas. Hay que darse cuenta de que 2004 es el año establecido como el despegue de la web 2.0 y que en marzo de 2003 ni siquiera habíamos oído la palabra YouTube.
Para mí, aquella fecha es muy especial también porque, debido a su participación en BlogGuest, marca el comienzo de una amistad que áun perdura.
Para celebrar el 8º cumpleaños de Blogpocket, en enero de 2009, edité la segunda parte de un PDF conmemorativo, BlogGuest 2–8 años. Entre los artículos escritos para la ocasión, se encontraba otro de José Luis Orihuela, que, seis años después, situaba a los blogs en el lugar exacto: Qué son los blogs y cómo dejar de confundirlos con otra cosa.
¿Dónde puedes encontrar los PDFs de BlogGuest? Entra en el siguiente post y descárgalos libremente: El origen del guest blogging en la blogosfera hispana.
Proceso de rediseño de eCuaderno
Dejemos pues la arqueología Web y pasemos, sin más preámbulos, al proceso que se ha seguido para rediseñar eCuaderno, como prometía al principio de este artículo. Espero que te sirva para tu próximo cambio de look.
1. Optimización previa del sitio
Antes de iniciar ningún cambio, lo que se hizo fue una limpieza de plugins y aligerar algo el diseño, suprimiendo elementos innecesarios o que estaban penalizando la velocidad de carga del blog.
Básicamente, se deja la instalación con dos plugins importantes: uno para cubrir la seguridad y otro para disponer de un sistema de almacenamiento en caché (1). Con este último, se acelera la velocidad de carga de las páginas.
Fundamentalmente, en esta primera fase, se trató de deshacer la estructura existente, y acercarnos lo más posible a la estructura ideal explicada en el siguiente post: Cómo crear un blog que le guste a Google.
Una vez realizada esa primera fase, el test de GTMetrix arrojó los resultados que se muestran en la imagen siguiente.
(1) Realmente, alojar el blog en un buen hosting es fundamental y la base si tu propósito es lograr un sitio Web rápido, seguro y optimizado. eCuaderno se aloja en SiteGround y aquí se explican las razones. Si estás buscando tu hosting especializado en WordPress, no dudes en contratar uno de sus planes de servidores compartidos. Si lo haces con este enlace, eCuaderno se beneficia de un mes de hosting gratis y tú te llevas uno de los mejores servicios de alojamiento Web que existen.
Evidentemente, el cambio de plantilla sería un factor importantísimo, a la hora de optimizar el rendimiento.
2. Construcción de un entorno de pruebas
Para que el desarrollo del nuevo sitio, con el cambio de plantilla incluido, no afectara al sitio en funcionamiento, lo que se hizo fue crear un entorno de pruebas con otro dominio.
Puedes crear un entorno de pruebas, añadiendo un dominio adicional en tu hosting (nosotros utilizamos «creatublog.org»).
Para profundizar en la clonación de un blog de WordPress, te invito a consultar el siguiente artículo: La guía definitiva para clonar WordPress.
3. Backup del blog
Realizar un backup del blog nos permitió copiar todo; base de datos, imágenes, archivos y configuración, al blog de pruebas.
¿Qué hay que guardar en un backup? Hay que hacer una copia de lo siguiente. No solo de la base de datos, sino también de los archivos que forman parte de la personalización del blog (por ejemplo, las imágenes).
¿Cómo se puede llevar a cabo un backup completo de la instalación de WordPress, tal y como se necesita para una clonación?
Se puede emplear el plugin UpDraft Plus, llevando los archivos de backup a un respositorio externo y en la nube, como Dropbox.
Más información sobre un sistema de backup en WordPress: Cómo hacer un backup de WordPress: la guía definitiva.
4. Instalación de WordPress en el entorno de pruebas
Una vez creado el dominio adicional, se puede instalar WordPress con un clic. Para ello, sigue las instrucciones descritas en el siguiente artículo: Cómo crear un blog en 5 minutos.
5. Restauración de los archivos y restauración de la base de datos
Nuestra copia de seguridad se encontraba en Dropbox, por lo que lo primero que hubo que hacer es descargar los archivos al ordenador y, desde allí, subirlos al entorno de pruebas.
Todo el proceso de restauración del blog, se explica detalladamente en La guía definitiva para clonar WordPress.
6. Instalación y activación de la nueva plantilla en el blog de pruebas
Con los pasos anteriores, ejecutados correctamente, teníamos una copia exacta de eCuaderno, en un entorno de pruebas. La única diferencia era una URL diferente: «creatublog.org/», en lugar de «ecuaderno.com/».
Era hora de instalar el nuevo theme. José Luis eligió una plantilla de Genesis Framework. Una buena idea, porque con ello se optimiza el rendimiento y se posee un HTML bien codificado, orientado también al SEO y a la usabilidad.
A continuación, se puede leer acerca de Cómo configurar un theme de Framework Genesis para WordPress.
En el caso de la plantilla Whitespace, la configuración es muy sencilla y solo requiere la instalación de dos plugins adicionales y un par de áreas de widgets.
7. Aplicar la configuración de la nueva plantilla en el blog original
Una vez finalizada la personalización de la plantilla Whitespace en el blog de pruebas, hubo que aplicarla en eCuaderno.
Lo primero, fue instalar, en eCuaderno, el theme Genesis e instalar y activar el theme Whitespace.
Para configurar el theme, no hizo falta repetir la mayoría de los pasos realizados en el blog de pruebas ya que existen dos herramientas que automatizan esa labor.
El plugin «Widget Importer & Exporter» permite exportar la configuración de los widgets, en el blog de pruebas, para importarla después en el blog original.
La opción «Exportar/Importar» de Genesis, nos da la posibilidad de exportar toda la configuración de este framework y, luego, importarla en el blog de destino.
8. Paso a HTTPS
Una vez clonada la configuración de la nueva plantilla en el blog original, la última fase consistió en activar el protocolo HTTPS. Este protocolo, a difrencia del simple HTTP, se traduce en mayor seguridad y velocidad.
Por suerte, eCuaderno se encuentra alojado en SiteGround y eso permitió pasar a HTTPS simplemente con un clic.
Una de las opciones del plugin, propio de SiteGround, «SG Optimizer» es precisamente la de activar HTTPS poniendo a «On» el correspondiente interruptor. No es preciso realizar nada más.
En cualquier caso, en el siguiente artículo de Blogpocket es posible hallar más información sobre el cambio a HTTPS: Cómo convertir tu WordPress a HTTPS – La guía definitiva.
Conclusiones
En este post se ha repasado el proceso general que seguimos para rediseñar eCuaderno y optimizarlo, a nivel interno.
Como se puede observar en la imagen siguiente, solamente con la instalación de la nueva plantilla, ya se mejoró sensiblemente el rendimiento (si lo comparamos con los resultados de GTMetrix mostrados al principio de este artículo).
Pero, lo más importante, para el usuario -como decía el autor de eCuaderno hace 10 años- es conveniente aligerar los sitios, descomplicarlos y facilitar a los usuarios ocasionales la lectura y exploración del blog. Hoy, es preciso además, proporcionar una experiencia óptima en dispositivos móviles.
Hemos preparado eCuaderno para que sea rápido, seguro y esté optimizado de cara a su uso en dispositivos móviles.
Me gustaría finalizar agradeciendo a José Luis Orihuela su invitación para exponer aquí -aunque haya sido sucintamente- el rediseño de su blog. Y enviar un saludo cordial a sus lectores y seguidores.
Si deseas ampliar información, sobre cómo crear o mejorar tu blog, te invito a visitar Blogpocket o La locura de los weblogs dentro de uno.
