Visão geral do HubSpot CMS

Esta seção foi projetada para ajudá-lo a compreender os principais aspectos do Sistema de gerenciamento de conteúdo (CMS) e a criar sites excelentes grandes com base nele. Para tirar o máximo proveito disso, é esperado um entendimento de nível profissional dos conceitos básicos sobre desenvolvimento web, incluindo HTML, JavaScript e CSS.

Se você é novo no HubSpot CMS, sugerimos começar com o tutorial de início rápido e consultá-lo quando necessário.

O HubSpot CMS foi projetado para ajudar as empresas a aumentar sua presença na Web, com ênfase na criação e no gerenciamento de conteúdo pelos profissionais de marketing. O conteúdo, a coleta de leads e a análise do site também estão integrados ao HubSpot CRM, facilitando a criação de experiências personalizadas para os visitantes, integrando-as ao resto do negócio.

O principal trabalho dos desenvolvedores do HubSpot CMS é trabalhar como facilitadores de conteúdo, em vez de criadores de conteúdo. Dessa forma, o HubSpot CMS foi projetado para equilibrar as necessidades dos desenvolvedores com as necessidades dos criadores de conteúdo por meio de seu sistema de tema e módulo e áreas de arrastar e soltar.

Um site devidamente criado no HubSpot CMS deve ser desenvolvido em estreita colaboração com os criadores de conteúdo para compreender suas necessidades. Assim, exigirá menos suporte e manutenção contínua por parte de um desenvolvedor. À medida que cria no HubSpot CMS, visualize continuamente a aparência da experiência de construção de páginas para os criadores de conteúdo. Isso garante que eles possam trabalhar de forma independente com o site, tanto quanto possível.

A HubSpot se encarrega da hospedagem e da manutenção do CMS, ou seja, você não precisa se preocupar com o gerenciamento de plugins, atualizações, hospedagem, escalonamento ou segurança. A desvantagem aqui é que o sistema impõe mais algumas restrições no que você pode fazer do que CMSs auto-hospedados. Por exemplo, você não pode alterar ou estender os fundamentos do sistema manualmente ou por meio de plugins, manipular renderizações de baixo nível ou acessar e alterar diretamente o conteúdo na base de dados.

O conteúdo criado pelo desenvolvedor (por exemplo, temas, modelos, módulos, JavaScript e CSS) é desenvolvido em um sistema de arquivos de desenvolvedor, enquanto o conteúdo da página (páginas, posts de blog) é disposto e criado em um bloco poderoso baseado em um editor WYSIWYG (o que você vê é o que você recebe) e os arquivos de mídia (imagens criadas pelo criador do conteúdo, PDFs etc.) são armazenados em um gerenciador de arquivos baseado em um aplicativo web.

Quando uma página é renderizada, o HubSpot encaminha o pedido para um dos muitos servidores baseados no domínio, renderiza a página em nossos servidores e a armazena em cache em uma rede de entrega de conteúdo (CDN), se possível.

O HubSpot CMS permite a criação de vários tipos de conteúdo. A interface do usuário para criadores de conteúdo é ligeiramente diferente dependendo do tipo de conteúdo, com implicações que, você, como desenvolvedor, precisa saber. 

O site e as landing pages são criados de forma independente, mas todas as páginas são baseadas em modelos. Para os criadores de conteúdo, o processo de criação de uma landing page ou uma página do site é quase idêntico. A diferença entre elas é que as páginas do site são feitas para apresentar informações que fazem parte do seu site e são projetadas para serem encontradas de forma orgânica, enquanto que uma landing page geralmente está associada a uma oferta ou campanha de marketing específica (por exemplo, um link em um e-mail de marketing enviado para uma lista específica de contatos). 

Na IU para profissionais de marketing, a análise e a organização desses tipos de páginas também são independentes, já que, muitas vezes, as landing pages têm objetivos de conversão específicos.

Os blogs da HubSpot têm duas visualizações: uma para a página de listagem e outra para a página de posts individuais, e ambas são preenchidas com cada post de blog. Você pode definir um blog para compartilhar o mesmo modelo para posts de blog e páginas de listagem ou ter modelos separados. Os posts de blog devem compartilhar o mesmo modelo. Saiba mais sobre a marcação do modelo de blog e como criar e gerenciar blogs no HubSpot.

Os e-mails podem ser criados de algumas maneiras no HubSpot:

• E-mail clássico: a ferramenta de e-mail clássico é criada na plataforma CMS, para que você possa criar modelos e módulos de e-mail de maneira semelhante ao site e às landing pages. Você também pode criar modelos de e-mail codificados para ter controle total da marcação.
• E-mails de arrastar e soltar: e-mails criados com o editor de arrastar e soltar não podem usar modelos personalizados, mas os criadores de conteúdo poderão criar layout e conteúdo de e-mail usando a interface de arrastar e soltar do HubSpot.

Além de criar o conteúdo da página por meio de editores no aplicativo ou codificação em modelos, você também pode usar fontes de dados estruturadas para preencher o conteúdo dinâmico da página com o HubL. Você pode usar as seguintes fontes de dados para preencher as páginas:

• HubDB: armazene dados em células de tabelas HubDB.
• Registros do CRM: armazene dados em registros do CRM, como contatos, empresas ou objetos personalizados.

Criar páginas dinâmicas usando conteúdo estruturado significa que você pode criar, editar e remover páginas do site e conteúdo da página atualizando diretamente as fontes de dados. Semelhante a um blog da HubSpot, um conjunto de páginas dinâmicas incluirá uma única página de listagem para exibir as instâncias da sua fonte de dados e, em seguida, uma página separada para cada instância individual. Com o HubL, você pode configurar totalmente os dados exibidos nas páginas.

Por exemplo, você pode criar uma tabela HubDB que armazena uma linha de informações para cada membro de uma equipe de vendas. Usando essa tabela do HubDB, o HubSpot pode gerar uma página de listagem para exibir os principais detalhes de cada linha da tabela (como um nome e uma imagem para cada representante de vendas), juntamente com uma página separada por representante de vendas para exibir mais informações (como sua biografia e número de telefone). Se um representante de vendas for promovido posteriormente para uma equipe diferente, você poderá excluir sua linha da tabela HubDB e o HubSpot excluirá automaticamente sua página de detalhes, removendo-o da página de listagem. 

Os ativos principais (modelos, temas e módulos, bem como os arquivos de JavaScript, CSS e imagens que os suportam) são criados em um sistema de arquivos do desenvolvedor. Você pode ver este sistema de arquivos no painel esquerdo do Gerenciador de design ou em pastas sincronizadas localmente usando as ferramentas de desenvolvimento local. Dentro do sistema de arquivos, os ativos podem se referir uns aos outros com caminhos absolutos ou relativos.

Em segundo plano, esses arquivos são mapeados para entradas em um banco de dados. É por isso que o acesso ao sistema de arquivos do desenvolvedor se dá por meio das ferramentas de CLI da HubSpot em vez do acesso direto SSH ou FTP, e alguns recursos do sistema de arquivos que você pode esperar, como permissões e links simbólicos, não são oferecidos no sistema de arquivos do desenvolvedor.

Isso difere da abordagem dos CMSs tradicionais, mas significa que as referências quebradas entre erros de arquivo ou sintaxe são capturadas no momento da publicação e não no momento da execução, proporcionando um isolamento extra contra falhas acidentais quando o tráfego dinâmico atinge um site.

O CMS detectará os modelos no sistema de arquivo e os apresentará aos criadores de conteúdo ao criarem novas páginas, então a estrutura do sistema de arquivos fica a seu critério. Não é necessário que os módulos residam em uma pasta /modules/ ou o JavaScript em uma pasta /js/. No entanto, é recomendável organizar seus ativos de maneira semelhante ao código de exemplo do boilerplate para o CMS. 

Temas, modelos, módulos e campos são os objetos com os quais você mais trabalhará no HubSpot CMS como um desenvolvedor. A utilização eficaz destes diferentes objetos oferece aos criadores de conteúdos a liberdade de trabalhar e iterar nos sites de forma independente, mantendo-se dentro das contenções de estilo e layout definidas.

Os temas e módulos contêm campos, que são configurações de tipos de dados específicos, como números, strings, rich text e imagens. Você pode controlar como os objetos são usados ao renderizá-los, bem como como eles devem ser organizados e aparecer no editor WYSIWYG. Os criadores de conteúdo podem definir valores para os campos no editor WYSIWYG, que são aplicados ao tema ou módulo no momento da renderização.

Os temas são objetos de alto nível que definem a aparência de um site e criam uma experiência de edição de conteúdo simples. Esses ativos podem incluir modelos, módulos, arquivos CSS, arquivos JavaScript, imagens e muito mais.

Com os temas, você pode criar um conjunto de campos que os criadores de conteúdo usam para ganhar controle sobre o estilo global de um site sem ter que editar o CSS. Você pode especificar no CSS onde esses controles são aplicados, organizar controles que são herdados de outros controles e gerenciar como são apresentados e organizados para os profissionais de marketing no Editor de tema. Os criadores de conteúdo usam o Editor de tema para modificar os campos do tema, visualizar essas alterações em relação aos modelos existentes dentro de um tema e publicar suas alterações.

Esses campos de tema podem ser definidos globalmente em um site ou substituídos em nível de página.

Os modelos definem a marcação e o estilo de base de um conjunto de páginas que os utilizam. Eles podem conter HubL, HTML e links para arquivos JavaScript e CSS e podem ser limitados para uso com tipos específicos de conteúdo. Você tem total flexibilidade na marcação e estilo que pode incluir em um modelo, mas é encorajado a aderir a algumas práticas recomendadas e usar algumas características-chave do CMS para garantir que os profissionais de marketing possam editar as páginas com facilidade. Algumas das práticas recomendadas incluem:

• Criar modelos como parte de um tema e usar CSS em nível de tema, incluindo campos de tema, para aplicar a maioria do estilo dentro de um modelo. Isso facilitará aos criadores de conteúdo fazer alterações de estilo globais e locais de forma consistente, sem a necessidade de editar o CSS.
• Usar módulos para a maioria dos componentes da página, o que permite reorganizá-los e reutilizá-los em um site. Saiba mais sobre os módulos abaixo.
• Usar áreas de arrastar e soltar sempre que possível para o conteúdo da página principal, especialmente em páginas internas. As áreas de arrastar e soltar permitem definir um layout padrão para os módulos que compõem uma página e oferecem aos profissionais de marketing flexibilidade para editar o layout e o estilo de forma independente.
• Usar partials globais para conter o conteúdo compartilhado, como cabeçalhos e rodapés, que você quer manter consistente em um site.

Os modelos podem ser criados com HTML + HubL ou com uma interface de arrastar e soltar no Gerenciador de design. No entanto, é recomendável codificar modelos, pois eles fornecem mais controle e funcionalidade do que os modelos de arrastar e soltar, como o suporte a áreas de arrastar e soltar.

Os módulos são componentes reutilizáveis que você pode colocar em modelos e páginas no HubSpot CMS. Eles incluem controles para profissionais de marketing e contêm marcação HubL/HTML, CSS e JavaScript que, juntos, criam os componentes reutilizáveis e editáveis de um site.

Os controles de um módulo são definidos nos campos, então construir um módulo grande significa considerar tanto a aparência resultante em uma página quanto a experiência de edição para editores de conteúdo.

O HubSpot CMS inclui módulos padrão comuns, como cabeçalhos, rich text, imagens, botões e CTAs, que você usará como componentes fundamentais. Provavelmente, você também pode querer criar elementos que possam ter layouts mais interessantes e se encaixem no seu tema e modelos. Alguns exemplos comuns de módulos que você pode criar incluem painéis sanfonados, controles deslizantes e grupos de abas.

Você pode considerar um módulo como um objeto, e módulos em páginas como instâncias desse objeto, o que significa que as atualizações no HubL, no CSS ou no JavaScript de um módulo são aplicadas em todas as instâncias desse módulo dentro de páginas ou modelos em um determinado portal. Os módulos também podem ser transferidos entre os portais: ao usar a ferramenta de cópia integrada no Gerenciador de design, vender no Marketplace ou compartilhar o código diretamente com as ferramentas de desenvolvimento locais. Isso significa que você pode implementar uma solução de design uma vez e usá-la em várias páginas e portais, e quando precisar atualizá-la, as alterações poderão ser aplicadas nas páginas sem a necessidade de editar várias páginas ou vários modelos.

Os módulos também podem ser incluídos em temas, o que permite utilizar campos de tema para manipular a aparência dos módulos e garantir que eles sejam exibidos de forma proeminente no editor de páginas para que os criadores de conteúdo possam ter acesso fácil a módulos que combinam com o design que você criou.

Saiba mais no guia de visão geral dos módulos.

Os campos são os controles que os criadores de conteúdo utilizam para ajustar os parâmetros que são passados para seus temas e módulos. Os campos são digitados, incluindo tipos simples, como booleano, texto, URL, escolha e arquivo, mas também incluem campos mais complexos, como fonte com estilo, bem como campos específicos do HubSpot, como links para outros conteúdos ou formulários no sistema HubSpot.

Os campos também podem ser colocados dentro de repetidores que irão passar uma matriz para o módulo — um exemplo disso pode ser um carrossel de imagens em que você quer que um conjunto de imagens seja passado com o texto alternativo associado. Em vez de criar vários campos de imagem e texto, você pode criar um de cada e colocá-los em um grupo de repetição.

Os campos de um módulo são especificados no Gerenciador de design ou por esta sintaxe em um arquivo fields.json.  Os campos de um tema devem ser especificados no arquivo fields.json na raiz do tema.

O HubSpot CMS usa a HubSpot Markup Language ou HubL (pronuncia-se "Hubble"). O HubL é a extensão da HubSpot do Jinjava, um mecanismo de modelagem baseado em Jinja. O HubL usa uma quantidade razoável de marcação que é exclusiva da HubSpot e não suporta todos os recursos do Jinja. É executado completamente no lado do servidor quando uma página é renderizada.

O HubL tem os recursos que você esperaria de uma linguagem de modelos simples, como variáveis, loops For e instruções If, mas também suporta macros de renderização mais complexa, busca de dados e mapeamento com tags, funções e filtros. 

Se você alcançar os limites do que é possível com o HubL, a HubSpot oferece APIs para criar soluções mais personalizadas. As contas do CMS Hub Enterprise podem utilizar as funções sem servidor, permitindo uma programação mais sofisticada do lado do servidor. 

Conforme você desenvolve no HubSpot CMS, pode consultar a Referência da linguagem HubL para obter mais detalhes sobre recursos específicos da linguagem.