Resumen sobre CMS Hub

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 estás empezando a usar CMS Hub, te sugerimos que empieces con el tutorial de inicio rápido y vuelvas a él cuando lo necesites.

CMS Hub está diseñado para ayudar a las empresas a aumentar su presencia en la web con énfasis en permitir a los especialistas en marketing crear y administrar contenido. El contenido del sitio web, la recopilación de leads y los análisis se integran con el CRM de HubSpot, lo que facilita 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 de CMS Hub es trabajar como facilitadores de contenido, más que como creadores de este. De esta forma, CMS Hub fue diseñado para equilibrar las necesidades de los desarrolladores con las de los creadores de contenido a través de su sistema de temas y módulos y de las áreas de arrastrar y soltar.

Un sitio de CMS Hub bien elaborado debe desarrollarse en estrecha colaboración con los 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.

HubSpot se encarga de alojar y mantener el CMS, lo que significa que no tienes que preocuparte por la gestión de los plugins, las actualizaciones, el alojamiento, la expansión 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.

CMS Hub permite la creación de varios tipos de contenido. La interfaz de usuario de los creadores de contenido es ligeramente diferente según el tipo de contenido, lo que tiene implicaciones que tú, como desarrollador, debes tener en cuenta. 

El sitio web y las páginas de destino se construyen de forma independiente, pero todas las páginas se basan en plantillas. Para los creadores de contenido, el proceso de creación de una página de destino o una página de sitio web es casi idéntico. 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.

Los blogs de HubSpot tienen dos vistas: una para la página de catálogo y otra para la página de la publicación individual. Entonces, cada publicación del blog se rellena en cada una de ellas. Puedes establecer un blog para compartir la misma plantilla en publicaciones de blog y páginas de catálogo, o tener plantillas separadas para la página de catálogo y para publicaciones de blog. Las publicaciones de blog deben compartir la misma plantilla. Más información sobre el marcado de plantillas de blog y sobrecómo crear y administrar blogs en HubSpot.

Los correos electrónicos se pueden crear de varias maneras en HubSpot:

• Correo electrónico clásico: la herramienta de correo electrónico clásico se basa en la plataforma CMS, por lo que puedes crear plantillas y módulos de correo electrónico de manera similar al sitio web y las páginas de destino. También puedes crear plantillas de correo electrónico codificadas para tener el control total del marcado.
• Correos electrónicos de arrastrar y soltar: los correos electrónicos creados con el editor de arrastrar y soltar no pueden usar plantillas personalizadas, pero los creadores de contenido podrán elaborar el diseño y el contenido de los correos electrónicos usando la interfaz de arrastrar y soltar de HubSpot.

Además de crear contenido para la página a través de los editores en la aplicación o la codificación en plantillas, también puedes usar fuentes de datos estructuradas para rellenar el contenido de la página dinámica con HubL. Puedes usar las siguientes fuentes de datos para rellenar páginas:

• HubDB: almacena datos en celdas de tablas de HubDB.
• Registros del CRM: almacena datos en registros del CRM, como contactos, empresas u objetos personalizados

La creación de páginas dinámicas con contenido estructurado significa que puedes crear, editar y eliminar páginas del sitio web y contenido de las páginas actualizando las fuentes de datos directamente. Al igual que un blog de HubSpot, un conjunto de páginas dinámicas incluirá una sola página de catálogo para mostrar las instancias de la fuente de datos, y luego una página aparte para cada instancia individual. Con HubL, puedes configurar completamente los datos que muestran las páginas.

Por ejemplo, puedes crear una tabla de HubDB que almacene una fila de información por cada miembro de un equipo de ventas. Usando esa tabla de HubDB, HubSpot puede generar una página de contenido para mostrar detalles clave de cada fila de la tabla (como un nombre e imagen para cada representante de ventas), junto con una página aparte por representante de ventas para mostrar más información (como su biografía y número de teléfono). Si un representante de ventas luego es promovido a un equipo diferente, puedes eliminar su fila de la tabla de HubDB y HubSpot eliminará automáticamente su página de detalles y lo eliminará de la página de contenido. 

Los materiales principales, que son las plantillas, los temas y módulos, así como el JavaScript, los archivos CSS y las imágenes que los apoyan, se crean en un sistema de archivos para desarrolladores. 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.

Entre bastidores, estos archivos se asignan a 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 te proporciona un aislamiento adicional contra los fallos accidentales cuando el tráfico en directo 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, se recomienda que organices tus materiales de manera similar al código de ejemplo de plantilla para el CMS. 

Los temas, las plantillas, los módulos y los campos son los objetos con los que más trabajarás en CMS Hub 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, como números, cadenas, texto enriquecido e imágenes. Puedes 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.

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 sencilla. Estos materiales pueden incluir plantillas, módulos, archivos CSS, archivos JavaScript, imágenes y más.

Al usar temas, puedes 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 de tema, previsualizar esos cambios con respecto a 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.

Las plantillas definen el marcador base y el estilo de un conjunto de páginas que utilizan una plantilla. Pueden contener HubL, HTML y enlaces a archivos de JavaScript y CSS, y pueden ser restringidas para usarse 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. Algunas de las mejores prácticas incluyen:

• 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 para la mayoría de los componentes de tu página, lo que permite que sean reordenados y reutilizados a en un sitio web. Más información sobre los módulos a continuación.
• 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. Sin embargo, se recomienda codificar plantillas, ya que estas proporcionan más control y funcionalidad que las plantillas de arrastrar y soltar, como admitir áreas de arrastrar y soltar.

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.

CMS Hub incluye módulos predeterminados comunes, como encabezados, texto enriquecido, imágenes, botones y CTA que usarás como componentes fundamentales. También es probable que desees crear elementos que tengan diseños más interesantes que se ajusten a tu tema y tus plantillas. Algunos ejemplos comunes de módulos que puedes querer construir son acordeones, deslizadores y tabuladores.

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 transportables en los portales, tanto si se utiliza la herramienta de copia integrada en el administrador de diseño, como si se venden en el mercado o se comparte el código directamente con las herramientas de desarrollo local. 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.

Más información en la guía de resumen de los módulos.

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.

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. 

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 usar 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.