Resumen del CMS de HubSpot

Esta sección está diseñada para ayudarte a entender los aspectos clave del Sistema de Gestión de Contenido (CMS) de HubSpot y construir grandes sitios web en él. Para sacar el máximo provecho de esto, se espera una comprensión a nivel profesional de los fundamentos del desarrollo web, incluyendo HTML, JavaScript y CSS.

Si eres nuevo en el CMS de HubSpot, te sugerimos que empieces con el tutorial de inicio rápido y vuelvas a él cuando lo necesites.

Cómo funciona el CMS de HubSpot

El CMS de HubSpot es un CMS SaaS (software como servicio) diseñado para ayudar a las empresas a hacer crecer su presencia en la web con un énfasis especial en habilitar a los profesionales de marketing. Está diseñado para ser utilizado en sitios web de negocios donde los creadores de contenido no técnico necesitan ser capaces de construir, medir e iterar sobre el contenido de forma independiente mientras se trabaja dentro de los límites de diseño, estilo y funcionalidad que tú como desarrollador puedes establecer. El contenido, la recopilación de leads y los análisis también se integran con el CRM de HubSpot, lo que facilita a los profesionales del marketing la creación de experiencias personalizadas para los visitantes y la integración de esas experiencias con el resto del negocio.

El trabajo principal de los desarrolladores del CMS de HubSpot es trabajar como facilitadores de contenido más que como creadores del mismo. Los sitios web de negocios son mejores cuando el contenido es actual y está optimizado. Los desarrolladores deben eliminar toda la fricción posible, al tiempo que establecen las barreras de protección necesarias. El CMS de HubSpot fue diseñado para equilibrar las necesidades de los desarrolladores con las de los creadores de contenido a través de su sistema de módulos, columnas flexibles y áreas de arrastrar y soltar. Eso significa menos trabajo molesto de actualización de copias para ti como desarrollador y usuarios creadores de contenido más felices.

Las plantillas y los módulos están en la intersección entre los desarrolladores y los profesionales de marketing

Los conceptos clave y las primitivas del sistema reflejan esta filosofía: un sitio CMS de HubSpot bien elaborado debe desarrollarse en estrecha colaboración con sus creadores de contenido para entender sus necesidades, y luego requerirá menos apoyo y mantenimiento continuo de un desarrollador. A medida que construyes en el CMS de HubSpot, previsualiza continuamente cómo se ve y se siente la experiencia de construcción de páginas para los creadores de contenido. De este modo, se garantiza que puedan trabajar de forma independiente con el sitio en la medida de lo posible.

Animación que muestra al usuario creando una página de arrastrar y soltar

Dado que HubSpot se encarga de alojar y mantener el CMS, eso significa que no tienes que preocuparte por la gestión de los plugins, las actualizaciones, el alojamiento, el escalado o la seguridad. La compensación es que el sistema pone algunas restricciones más en lo que se puede hacer que los CMS autoalojados. Por ejemplo, no puedes alterar o ampliar los fundamentos del sistema de forma manual o a través de plugins, manipular el renderizado de bajo nivel o acceder y alterar el contenido de la base de datos directamente.

El contenido creado por los desarrolladores (por ejemplo, temas, plantillas, módulos, JavaScript y CSS) se crea en un sistema de archivos para desarrolladores, mientras que el contenido de las páginas (páginas, publicaciones de blog) se diseña y construye en un potente editor basado en bloques, "lo que ves es lo que obtienes" (WYSIWYG), y los archivos multimedia (imágenes creadas por los creadores de contenido, PDF, etc.) se almacenan en un gestor de archivos basado en la aplicación web.

Cuando se renderiza una página, HubSpot dirige la solicitud a uno de los muchos servidores basados en el dominio, renderiza la página en nuestros servidores y la almacena en caché en una red de distribución de contenido (CDN) si es posible.

Páginas de sitio web, páginas de destino, blog y correo electrónico

El CMS de HubSpot permite a los profesionales de marketing crear varios tipos de contenido. La interfaz de usuario (UI) para los creadores de contenido es ligeramente diferente según el tipo de contenido. Esto tiene implicaciones que los desarrolladores deben conocer. 

Las plantillas y los módulos están asociados a uno o varios de los tipos de contenido mencionados a continuación. Los desarrolladores pueden restringir su uso a tipos de contenido específicos.

Páginas web y páginas de destino

El sitio web y las páginas de destino se construyen de forma independiente. Las páginas se basan en plantillas, y los cambios se pueden hacer tanto localmente en esa página como en la plantilla. 

La funcionalidad ofrecida a los creadores de contenido es muy similar para las páginas web y las páginas de destino. La distinción entre ellas es que las páginas web están hechas para presentar información que forma parte de tu sitio web y están diseñadas para ser encontradas orgánicamente, mientras que una página de destino está generalmente asociada a una oferta o campaña de marketing específica (por ejemplo, vinculada a un correo electrónico de marketing enviado a una lista específica de contactos). 

En la interfaz de usuario para los profesionales del marketing, la analítica y la organización de estos tipos de páginas también se organizan por separado, ya que las páginas de destino suelen tener objetivos de conversión específicos.

Blogs

Los blogs en HubSpot CMS, por otro lado, tienen dos vistas cada uno, una para la página de listado y otra para la página de post individual, entonces cada post del blog se rellena en cada una de ellas. Un portal (el término utilizado para una instancia individual de HubSpot) puede tener más de un blog, pero la plantilla utilizada para un post individual no puede ser especificada por post. Las plantillas utilizadas para la página del listado de blogs y la página de publicaciones del blog, así como la herramienta para crear nuevos blogs, se definen en la interfaz de usuario de HubSpot en Configuración > Sitio web > Blog.

Correos electrónicos

La herramienta de correo electrónico personalizada (o "clásica") de HubSpot está construida sobre la misma plataforma que el CMS, por lo que las plantillas y los módulos también pueden incluirse en los correos electrónicos utilizados con esa herramienta. Los correos electrónicos creados con la herramienta de correo electrónico de arrastrar y soltar no pueden utilizar plantillas personalizadas.

Sistema de archivos para desarrolladores

Los materiales principales -plantillas, temas y módulos, así como los archivos JavaScript, CSS e imágenes que los admiten- se crean en un sistema de archivos para desarrolladores que se asigna a una base de datos entre bastidores. Puedes ver este sistema de archivos en el panel izquierdo del Administrador de diseño o en las carpetas sincronizadas localmente mediante las herramientas de desarrollo local. Dentro del sistema de archivos, los materiales pueden referirse entre sí con rutas absolutas o relativas.

Una cosa a tener en cuenta es que entre bastidores, estos archivos no se almacenan de esa manera exacta en el disco dentro de HubSpot; se mapean a las entradas en una base de datos. Por ello, el acceso al sistema de archivos para desarrolladores se realiza a través de las herramientas de la CLI de HubSpot en lugar de acceder directamente por SSH o FTP, y algunas características del sistema de archivos que puedes esperar, como los permisos y los enlaces simbólicos, no se ofrecen en el sistema de archivos para desarrolladores.

Esto difiere del enfoque de los CMS tradicionales, pero significa que las referencias rotas entre archivos o los errores de sintaxis se detectan en el momento de la publicación y no en el tiempo de ejecución, lo que le proporciona un aislamiento adicional contra los fallos accidentales cuando el tráfico en vivo llega a un sitio web.

El CMS descubrirá las plantillas en el sistema de archivos y las presentará a los creadores de contenido cuando estén haciendo nuevas páginas, así que la estructura del sistema de archivos depende de ti. No es necesario que los módulos vivan en una carpeta /modules/ o que JavaScript viva en una carpeta /js/. Sin embargo, te sugerimos que organices tus materiales como lo hemos hecho en el código de ejemplo para el CMS. El diseño de tus materiales te resultará familiar si has trabajado con otras herramientas de desarrollo estándar del sector.

Temas, plantillas, módulos y campos

Los temas, las plantillas, los módulos y los campos son los objetos con los que más trabajarás en el CMS de HubSpot como desarrollador. El uso de estos diferentes objetos te permite dar a los creadores de contenido la libertad de trabajar e iterar en los sitios web de forma independiente mientras se mantienen dentro de los límites de estilo y diseño que tú estableces.

Los temas y módulos contienen campos, que son configuraciones de tipos de datos específicos. (Por ejemplo, números, cadenas, texto enriquecido, imágenes, etc.) Los desarrolladores pueden controlar cómo se utilizan en la representación de estos objetos, así como la forma en que deben organizarse y aparecer en el editor WYSIWYG. Los creadores de contenido pueden establecer valores para los campos en el editor WYSIWYG, que se aplican al tema o módulo en el momento de la renderización.

Temas

Si has trabajado con otros CMS, los fundamentos de los temas te resultarán familiares. Los temas son los objetos de nivel superior que definen el aspecto de un sitio web y crean una experiencia de edición de contenidos fácil de usar. Estos materiales pueden incluir plantillas, módulos, archivos CSS, archivos JavaScript, imágenes y más.

Los temas permiten a los desarrolladores crear un conjunto de campos que los creadores de contenido utilizan para obtener un control estilístico global sobre un sitio web sin tener que editar el CSS. Puedes especificar en CSS dónde se aplican estos controles, organizar los controles para que hereden de otros y gestionar cómo se presentan y organizan para los profesionales de marketing en el Editor de temas. Los creadores de contenido utilizan el Editor de temas para modificar los campos del tema, previsualizar esos cambios con las plantillas existentes dentro de un tema y publicar sus cambios.

Estos campos temáticos pueden establecerse globalmente en un sitio o anularse a nivel de página.

Editor de temas

Plantillas

Las plantillas definen el marcador base y el estilo de un conjunto de páginas que utilizan una plantilla. Pueden contener HubL arbitrario, HTML y enlaces a archivos JavaScript y CSS, y pueden ser restringidas para su uso con tipos de contenido específicos. Tienes total flexibilidad en el marcador y el estilo que puedes incluir en una plantilla, pero te recomendamos que te adhieras a algunas mejores prácticas y utilizar algunas características clave del CMS para asegurar que los profesionales de marketing puedan editar las páginas fácilmente.

Ten en cuenta que cuando desarrollas plantillas, estás creando la experiencia de edición de quien deberá generar páginas a partir de ellas. Esta persona puede ser tu compañero de trabajo, o un cliente, o incluso tú. En cualquier caso, asegúrate de que la experiencia de edición sea fácil e intuitiva.

Esto incluye:

  • Construir plantillas como parte de un tema y utilizar CSS a nivel de tema, incluyendo campos de tema, para hacer la mayor parte del estilo dentro de una plantilla. Esto facilitará a los creadores de contenidos la realización de cambios de estilo globales y locales de forma coherente sin necesidad de entrar en la edición de CSS.
  • El uso de módulos (más en la próxima sección sobre esto) para la mayoría de los componentes de tu página, lo que permite que sean reordenados y reutilizados a través de un sitio web.
  • Usar áreas de arrastrar y soltar siempre que sea posible para el contenido de la página principal, especialmente en las páginas internas. Las áreas de arrastrar y soltar te permiten establecer un diseño predeterminado para los módulos que componen una página, pero ofrecen a los profesionales de marketing flexibilidad para editar el diseño y el estilo de forma independiente.
  • Usar parciales globales para contener contenido compartido como encabezados y pies de página que se desea que tengan un aspecto coherente en todo el sitio web.

Las plantillas pueden construirse con HTML + HubL o con una interfaz de arrastrar y soltar en el Administrador de diseño. Si estás comenzando un nuevo proyecto, te sugerimos que utilices plantillas codificadas ya que te dan más opciones de workflow como desarrollador y soporte para las áreas de arrastrar y soltar.

VS Code con HTML y plantilla HubL abierta

Módulos

Los módulos son componentes reutilizables que puedes colocar en plantillas y páginas en el CMS de HubSpot. Incluyen controles para los profesionales de marketing y contienen marcas HubL/HTML, CSS y JavaScript que, en conjunto, construyen componentes reutilizables y editables de un sitio web.

Los controles de un módulo se definen en campos, por lo que construir un gran módulo significa considerar tanto la apariencia resultante en una página, como la experiencia de edición para los editores de contenido.

El CMS de HubSpot incluye módulos comunes predeterminados como encabezados, texto enriquecido, imágenes, botones y CTA que utilizarás como componentes fundamentales, pero también es probable que quieras construir elementos que puedan tener diseños más interesantes que se adapten a tu tema y plantillas. Algunos ejemplos comunes de módulos que puedes querer construir son acordeones, deslizadores y tabuladores.

Formulario del módulo en el editor

Puedes pensar en un módulo como un objeto y en los módulos de las páginas como instancias de ese objeto, lo que significa que las actualizaciones de HubL, CSS o JavaScript de un módulo se aplican a todas las instancias de ese módulo dentro de las páginas o plantillas de un determinado portal. Los módulos también son portátiles a través de los portales, tanto si se utiliza la herramienta de copia integrada en Administrador de diseño, como si se venden en el Mercado o se comparte el código directamente con las herramientas de desarrollo locales. Esto significa que puedes implementar una solución de diseño una vez y usarla en todas las páginas y portales, y cuando necesites actualizarla, esos cambios pueden aplicarse en todas las páginas sin tener que editar varias páginas o varias plantillas.

Los módulos también pueden incluirse en los temas, lo que permite utilizar los campos de los temas para manipular el aspecto de los módulos y garantizar que se muestren de forma destacada en el editor de páginas, de modo que los creadores de contenidos puedan acceder fácilmente a los módulos que quedarán bien con los diseños que hayas creado.

Para más información, consulta el resumen del sistema de módulos.

Campos

Los campos son los controles que los creadores de contenido utilizan para ajustar los parámetros pasados a sus temas y módulos. Los campos se escriben, incluyendo tipos simples como booleano, texto, URL, elección y archivo, pero también tienen campos más complejos como fuente con estilo, así como campos específicos de HubSpot como enlaces a otras piezas de contenido o formularios en el sistema HubSpot.

Los campos también pueden ser colocados dentro de repetidores que pasarán una matriz al módulo; un ejemplo de esto podría ser un carrusel de imágenes en el que quieres un conjunto de imágenes con el texto asociado `alt` asociado. En lugar de crear varios campos de imagen y de texto, puedes crear uno de cada uno y ponerlos en un grupo repetido.

Los campos de un módulo se especifican dentro del Administrador de diseño o con esta sintaxis en un archivo fields.json.  Los campos de un tema deben especificarse en el archivo fields.json en la raíz del tema.

Al igual que con los otros objetos en el CMS de HubSpot, presta atención a la experiencia de edición que estás creando cuando construyes campos en un módulo o un tema, incluyendo cómo podrías querer usar grupos de campos para hacer una jerarquía clara.

El lenguaje HubL

El CMS de HubSpot utiliza el Lenguaje del marcador de HubSpot o HubL (pronunciado "Hubble"). HubL es la extensión de HubSpot de Jinjava, un motor de plantillas basado en Jinja. HubL utiliza una buena cantidad de marcadores que son exclusivos de HubSpot y no son compatibles con todas las características de Jinja. Se ejecuta completamente en el lado del servidor cuando se renderiza una página.

HubL tiene las características que esperarías de un lenguaje de plantillas simple como variables, bucles for y sentencias if, pero también admite macros de renderizado más complejas, obtención de datos y mapeo con etiquetas, funciones y filtros

Dicho esto, HubL no es un lenguaje de programación. Los sistemas de CMS como WordPress presentan un límite un tanto ambiguo entre la lógica de plantilla y la lógica de backend. Esta ambigüedad da lugar a una amplia gama de enfoques con respecto a la creación de plantillas. Asimismo, esta flexibilidad tiene sus propias ventajas y desventajas, pero no es nuestro objetivo analizarlas. En términos generales, HubSpot CMS es más prescriptivo. Si alcanzas los límites de las posibilidades que ofrecen HubL y el sistema de CMS, HubSpot te ofrece API para crear más soluciones personalizadas. Las cuentas de CMS Hub Enterprise pueden aprovechar las funciones sin servidor que permiten una programación más sofisticada del lado del servidor. 

A medida que continúas construyendo en el CMS de HubSpot, puedes consultar la referencia del lenguaje HubL para obtener más detalles sobre las características específicas del lenguaje.


¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.