El COS (Content Optimization System) ha sido el mayor descubrimiento, en términos de programación, que hemos tenido en la agencia. Nos ha permitido realizar acciones y tareas en un tiempo récord. Nos ha facilitado tanto la vida que ya no seríamos capaces de vivir sin él. ¡Te contamos por qué a ti también te va a enamorar!
Algo que nos ha sorprendido es la rapidez con la que podemos desarrollar un sitio web utilizando técnicas de Growth Driven Design, hemos sido capaces de diseñarla, desarrollarla y lanzarla. Por eso, nuestra primera experiencia con el COS de HubSpot a la hora de crear nuestro propio sitio web ha sido más que satisfactoria. Con una previa formación online de apenas 3 horas, teniendo en cuenta que desarrollamos webs, nuestro equipo de programadores se ha podido adaptar sin problemas al administrador de diseño de HubSpot.
Como toda nueva tecnología, nuestro equipo se encontró con ahora Hub... ¿Spot? Una plataforma que ofrece tantas funcionalidades, que permite crear plantillas web con un cierto drag & drop y que te ayuda a procesar la información que recoges de tu web. Seguramente sea muy difícil de usar, te preguntarás... ¿Cómo se podrá maquetar la estructura de nuestro equipo de diseño?, ¿COS, otro lenguaje a aprender? La respuesta a todas estas preguntas (y alguna más) está en la certificación de diseño que ofrece Hubspot. Esta certificación permitió a nuestro equipo ver cómo funciona la plataforma para diseñar plantillas y cuáles son y cómo se usan los módulos para crear dichas plantilla.
Ahora bien, si la certificación permite tener una buena base para empezar, el consejo que nos da nuestro equipo de desarrolladores es.... práctica, práctica y más práctica. Cuantas más plantillas desarrolláis, más fácil será hacer las nuevas.
En primer lugar, nos ha resultado interesante el sistema de drag & drop, ya que juntamente con la previsualización, hace que rápidamente puedas ver en todo momento cómo va quedando nuestra nueva web. Por otro lado, el hecho de poder poner nombres (etiquetas) en el administrador, a los contenedores y módulos permite tener la web ordenada y estructurada.
Además, el administrador te permite agregar archivos javascript y css propios que permiten dar un plus al diseño web, adaptándolo a la filosofía de nuestra marca. Hubspot te permite implementar prácticamente cualquier diseño web, siempre y cuando se base en la filosofía de "columnas y filas" del framework de Bootstrap. Además como se pueden incorporar diferentes archivos CSS puedes adaptar el look & feel de tu web tanto como se quiera, ya sea de toda la página, o parte ella. Por ejemplo, se puede tener un archivo CSS para las partes generales de la web (header, footer y titulares), otro específico para una página web (por ejemplo la home) e incluso otro archivo más para un módulo específico.
Para maquetar nuestra web no tuvimos ningún problema, ya que HubSpot permite el uso del framework bootstrap (la versión 2), el cual es la base de maquetación de muchos de nuestros proyectos web. Sin embargo, donde tuvimos algunas complicaciones fue a la hora de implementar el menú "hamburguesa" que se muestra en dispositivos móviles. Si bien por defecto los menús de Hubspot no soportan este tipo de menú responsivo, hay un gran artículo que permite disponer de él en un par de minutos. En nuestro caso usamos un menú “hamburguesa” propio de nuestro archivo javascript, al cual tuvimos que modificar un par de selectores para que funcionara correctamente.
Otra de las cosas que nos ha sorprendido y que facilitó la implementación de nuestra web fue el uso de los módulos o plantilla de lenguaje HubL. Si se tiene nociones de programación (como es nuestro caso) podemos llegar a crear incluso módulos personalizados para generar una mejor experiencia al usuario. En este sentido, la creación de formularios es muy rápida y potente.
Mediante el administrador de formularios podemos crear de manera muy sencilla todos los formularios para nuestra web. Crear un formulario fue tan fácil como arrastrar el tipo de campo que queremos hasta la posición del formulario, prácticamente de la misma forma que para crear las plantillas.
Otra funcionalidad muy interesante que nos ofrece Hubspot es la creación de módulos personalizados, es decir, nos permite crear bloques que realicen una funcionalidad concreta en nuestra web aparte de los que la plataforma ofrece por defecto (mostrar imágenes, posts, textos, etc.).
La creación de módulos personalizados es muy sencilla y se parece bastante a la forma de crear formularios. La pantalla que nos permite crearlos está dividida en 2 partes: en la primera escogemos qué tipo de campo necesitamos (una imagen, un texto, ...) y en la segunda parte se implementa la maquetación HTML que queremos que tenga nuestra módulo. Hay que tener en cuenta que en esta maquetación se tiene que hacer referencia a los campos creados, ya que si no, no se nos mostrará la información.
Finalmente, una vez creado el módulo solamente hay que incorporarlo en nuestra plantilla y cuando se use esta plantilla para crear una página web, hará falta rellenar los campos con la información necesaria.
Por ejemplo, nosotros creamos un pequeño módulo de texto destacado para nuestra home. En la primera imágen se observa la pantalla de creación del módulo con los campos necesarios y su implementación en HTML. En la segunda, estamos rellenando la información que queremos mostrar; en la tercera vemos el módulo ya acabo en nuestra web.
Fig. 1. Pantalla de creación de módulo
Fig. 2. Información que queremos rellenar.
Fig. 3. Módulo acabado visualizado en nuestra web.
Donde más se observa el potencial de la plataforma HubSpot es a la hora de crear páginas en nuestra web. Simplemente hay que seguir tres sencillos pasos: Crear una página nueva, escoger la plantilla y poner el nombre. Tan fácil como eso. Del mismo modo, modificar el contenido de cada página también es muy sencillo, basta con ponerse encima del bloque (Se nos mostrará un icono con un lápiz), pulsamos sobre él y se mostrará un menú contextual para modificar los textos.
Por último, teníamos que adaptar nuestra propia vista que difería de la que se muestra por defecto. Pensábamos que sería difícil ya que para esto hay que modificar el código de la plantilla, sin embargo, fue más sencillo de lo esperado. Simplemente copiamos nuestro código HTML e incluimos las etiquetas HubL necesarias.
Si bien a primera vista parece complicado usar la plataforma para crear las plantillas de nuestra web, en el momento que le cogimos la práctica, rápidamente generamos las plantillas necesarias sin ningún tipo de problema. Además, llenar de contenido nuestra web a partir de la plantilla creada es muy fácil, cómodo e intuitivo. Sin olvidarnos del uso de los módulos de lenguaje Hubl que nos dieron un plus al diseño de nuestra web y son fáciles de crear.
Sin lugar a dudas, el COS de HubSpot se presenta como una gran herramienta de confección de páginas web gracias a la gran flexibilidad y facilidad de aprendizaje y uso. Por eso, desde Ipanema, animamos a todos que se suban al carro y luzcan un sitio web como el nuestro.