Hace ya unos meses que actualicé por completo mi web personal con la idea de “venderme” mejor en informática y desarrollo de proyectos software. La anterior databa del 2013 (tampoco era muy vieja), pero a día de hoy podemos decir que el acceso a internet es móvil y un diseño responsive era necesario 100%.

Lo primero que me gustaría decir en este post de apertura es que soy desarrollador, no diseñador, por lo que en el 90% de mis proyectos hago uso de plantillas (ya sean html, ficheros PSD de Photoshop o simples jpg), y como no podía ser de otro modo, esta web también está basada en una plantilla (esta concretamente). Pero como acabo de decir, igual que mi rol es de desarrollo y no de diseño, los diseñadores que crean estas plantillas no tienen porque ser buenos programadores (y normalmente no lo son). Esta entrada va dedicada a todos los que piensan que si usas una plantilla ya tienes todo el trabajo hecho.

Como escribí al principio de la entrada, la nueva versión de la web la finalicé hace unos meses (para ser exactos en abril, aprovechando que me di de alta como autónomo para ejercer de freelance), por lo que no recuerdo exactamente el tiempo que me llevó coger la plantilla y transformarla en la versión actual que estás visitando, pero calculo que alrededor de 4-5 días (podríamos estimar 40 horas de trabajo). A priori puede parecer bastante tiempo para esta web que en si es muy sencilla. Pero vamos por puntos:

Podemos decir que normalmente nuestra web puede permanecer al menos 2 años sin cambios importantes en el “core” de la misma, ¿realmente es demasiado emplear 40 horas en optimizar algo que va a estar accesible durante tanto tiempo? ¿Qué ventajas le proporciono a ese futuro cliente o usuario el haber gastado 40 horas de mi tiempo? Pues la respuesta precisamente es “SU TIEMPO”. Un usuario que entra en nuestra web (sobretodo si es la primera vez) y no le carga en menos de 2-3 segundos implica que, en un porcentaje altísimo, ese usuario nos abandone. Durante el último año y medio me he especializado en optimizar mis webs para que su acceso y navegación sea lo más rápido posible, y parece que en este caso concreto he llegado a la cima. Para los que no conozcan, Google nos ofrece la herramienta PageSpeed Insights para puntuar nuestra web respecto a Performance y Accesibilidad, y que gracias a ella os voy a mostrar una comparativa de las puntuaciones de mi web VS plantilla:

Puntuación de la página de inicio de la plantilla

Puntuación de la página de inicio de dev.carlosmontero.es

Puntuación de la página de "About" de la plantilla

Puntuación de la página de "About" de dev.carlosmontero.es

Puntuación de la página de "Resume" de la plantilla

Puntuación de la página de "Resume" de dev.carlosmontero.es

Otra página similar que nos ayuda a puntuar el rendimiento de nuestra web es GTmetrix, en donde, por simplificar respecto a Google PageSpeed, solo mostraré la comparativa de la página de resumen:

Puntuación de GTmetrix de la plantilla

Puntuación de GTmetrix de dev.carlosmontero.es

Creo que las imágenes hablan por sí solas y se aprecia una “pequeña” diferencia en las notas obtenidas entre desplegar directamente una plantilla o programar la web. Podéis probar con vuestra web si la tenéis, fijo que os lleváis una sorpresa.

Muchas veces la manera en la que resuelven las urls las plantillas no es la más ventajosa para nosotros o nuestro caso concreto. Por ejemplo, en esta plantilla se hace uso del carácter “#”. Usar el anchor tag era muy común hace años para poder guardar el estado de la página mientras haciamos interacciones AJAX. En la actualidad, una aproximación mejor es aprovechar el API de HTML5 para cambiar la url sin recargar la página. Con esta aproximación obtenemos urls más “bonitas” y seguramente Google nos tenga mejor considerados a nivel SEO.

Plantilla	webapp
http://themes.pixelwars.org/empathy-html/#/about	http://dev.carlosmontero.es/sobre-mi
http://themes.pixelwars.org/empathy-html/#/portfolio/portfolio-item-01.html	http://dev.carlosmontero.es/portfolio/ryalive

La plantilla no tiene lo que queremos. Este caso es el más común y por el que me han llegado varios clientes estos últimos meses. Cuando una empresa te instala un WordPress/Prestashop/Joomla y una plantilla, todo parece muy bonito, sobretodo porque suele ser rápido y barato. Pero a medida que tu proyecto crece y necesitas nuevas funcionalidades llega el “es que la plantilla no lo permite”. Todos los proyectos que realizo se basan en librerías propias y desarrollos a medida, por lo que no tengo excusas para decirte que algo no se puede hacer.

Para finalizar y a modo de metáfora, creo que un buen carpintero (o artesano), por mucho que le guste el diseño de un mueble de IKEA, no lo compra y lo expone en su taller. Últimamente veo mucho artesano de IKEA en el mundo web y creo que como buen desarrollador mi “tarjeta de visita” no podía ser otra que la programación y optimización de esta plantilla.