CMS sem cabeça para um livro impresso de pizza

Como usamos nosso fluxo de trabalho de desenvolvimento da web para criar um livro

Na Buro.Int, a interatividade está sempre no nosso cerne. Isso não significa que permanecemos com a mídia digital o tempo todo. Em um de nossos projetos mais recentes, trabalhamos em um livro de pizza impresso em papel. Sim, estou falando de tinta de verdade!

Tivemos a ambição de criar uma solução flexível que permita escalar facilmente qualquer meio final imaginável: de e-books a aplicativos ou sites. Para conseguir isso, usamos um Sistema de Gerenciamento de Conteúdo Sem Cabeça (CMS) do sanity.io.

O que é Headless?

Um CMS clássico, p. O WordPress fornece duas coisas: primeiro, uma interface gráfica do usuário (GUI) fácil de usar para criar conteúdo. E segundo, uma solução integrada que gera o conteúdo como páginas da web.

Um CMS sem cabeça, no entanto, é desconectado da segunda parte. Em vez disso, apenas distribui os dados puros por meio de uma API (Application Programming Interface). Ele não se importa com o tipo de saída final. Os front-ends podem ser: sites, aplicativos, assistentes de voz, livros eletrônicos, jogos etc. A grande idéia é que, quando o conteúdo é puro, os modos de apresentação podem evoluir independentemente do conteúdo.

O processo

Definindo a estrutura

Com apenas alguns arquivos JSON, conseguimos gerar uma interface de usuário totalmente personalizada. Pode ser adaptado a vários tipos de conteúdo e suas relações entre si. Sem pensar na apresentação final, criamos uma rede inteira de informações sobre as quais poderíamos decidir mais tarde com que intensidade queremos usá-la.

Para dar um exemplo: KitchenStories, um aplicativo para muitas receitas deliciosas, não apenas lista todos os ingredientes no topo, mas também no nível da etapa de preparação. Isso também pode ser alcançado com nossa estrutura facilmente. Mas isso não é tudo, é possível oferecer suporte a um conjunto de vários idiomas (localização) com apenas mais algumas linhas no JSON.

Tudo isso não foi nada que decidimos em nosso livro de culinária. Mas talvez façamos no futuro? Nunca se sabe. Nós estamos preparados.

Gerenciando o conteúdo

Lidar com o conteúdo do cliente e manter uma visão geral também ficou muito mais fácil. Sem a necessidade de um provedor de hospedagem, temos uma interface simples no sanity.io para colaborar com nosso cliente. Todos podem inserir, revisar ou fazer upload de conteúdo com facilidade. Não há necessidade de documentos do Word.

Captura de tela do sanity.studio

Isso tornou o processo também mais eficaz e à prova de falhas, porque geralmente a maneira como as coisas são feitas é o envio de muitos e-mails e documentos: o escritor termina seu trabalho, uma pessoa lê e ajusta, o editor faz os ajustes finais, etc. cetera. Agora tudo isso é feito no Sanity. Chega de e-mails e mal-entendidos.

Buscando os dados

Após a conclusão da criação do conteúdo, nós a exportamos como XML, um formato que se integra bem ao Adobe InDesign - a ferramenta de design de nossa escolha para projetos de impressão. No XML, o conteúdo é envolvido na abertura e no fechamento , que definem o significado dos dados no meio. Infelizmente, o Sanity não permite exportar XML imediatamente, mas conseguimos escrever um pequeno programa para isso.

O que exportamos foi um arquivo XML bastante complexo, com muitos dados. Mas o InDesign suporta outro tipo de arquivo chamado XSLT, que permite ajustar a complexidade às nossas necessidades. Permite definir a estrutura desejada e preenchê-la com o conteúdo do seu arquivo XML original. Além disso, se / else-conditions, iteration-loops e muitas outras lógicas são possíveis. XSLT é basicamente apenas um XML adicional, mas com esteróides.

Gerando o livro

Após a importação, tivemos que vincular tags com estilos de texto definidos por meio de uma janela de diálogo e já poderíamos executar um teste rápido para verificar se todos os dados estão vinculados corretamente.

Gravação de tela: https://youtu.be/0vjLb58xJKE

Para evitar muito arrastar e soltar manualmente, usamos o Smart Text Reflow do InDesign. Isso nos gerou o número de páginas necessárias para caber todo o conteúdo - completamente automatizado.

O resultado

Conclusões

Era impressionante como é fácil automatizar tarefas tediosas e também melhorar a colaboração do cliente.

Trabalhar como designer no Sanity.io significava uma certa curva de aprendizado. Mas os caras da Bengler que desenvolveram o Sanity foram muito úteis no canal Slack. Além disso, o JSON não é uma ciência do foguete - depois que você se acostuma, é realmente muito fácil.

Espiada

Abaixo, uma prévia do livro final antes de seu lançamento, em setembro.

Se você gostou deste artigo, deixe-nos alguns aplausos, deixe-nos saber o que você pensa e visite nossos amigos em Lofthus .

Se você deseja fazer parte de nossa equipe em Oslo, Berlim, Porto ou Coimbra. Não seja tímido, inscreva-se!