Qual conteúdo para seu app

Os exemplos abaixo se apoiam em sete apps, divididos em três famílias. Encontre o que se parece com seu projeto, e depois adapte.

River Daily para um jornal local, Piu Piu para um festival, Portland para um guia de viagem.

• Blog: crie artigos livremente, ilustrados com imagens e vídeos.
• Galeria: exiba suas imagens em várias apresentações.
• Vídeo: compartilhe seu conteúdo filmado.
• Áudio: publique seus podcasts.
• Mapa: crie conteúdo ligado a locais específicos.
• Formulário: faça perguntas aos seus usuários, colete e analise as respostas.
• Eventos: comunique sobre eventos, apresentados por data.
• Publicidade interna e externa: gere receita a partir do seu conteúdo.

Freyja Spa para um salão de beleza, Ivar Madsen para uma agência de design de interiores.

• Blog: apresente seus serviços e tratamentos, ou monte um portfólio.
• Contato: reúna seus dados de contato em uma única página.
• Sobre: apresente-se em uma página dedicada.
• Formulário: transforme-o em um pedido de agendamento.
• Cartão de fidelidade e club card: monte um programa de fidelidade e aumente o engajamento.

Paraigua para uma escola, Dali Corp para um app interno de empresa.

• Blog: distribua seu conteúdo ao seu público.
• Autenticação: deixe seus usuários criarem um perfil.
• Usuários: publique a lista dos seus usuários e os perfis deles.
• Grupos de usuários: segmente seu público e sirva conteúdo específico a cada grupo.
• Chat: abra um espaço de conversa no app.
• Eventos: comunique sobre seus eventos.
• Formulário: faça perguntas aos seus usuários e analise as respostas.

O gesto é o mesmo para todas as seções descritas neste guia. Vá em My App › Structure, clique em Add, e depois escolha o tipo que quiser.

Você pode acrescentar até 120 seções a um app, e o mesmo conteúdo pode aparecer em várias seções ao mesmo tempo. É isso que torna a organização tão flexível: uma seção não é uma gaveta lacrada, é uma vista sobre seu conteúdo.

A seção Blog permite criar conteúdo diretamente do back office, na forma de artigos enriquecidos com fotos e vídeos.

Para um criador de conteúdo, é a seção central. Mas seja qual for seu projeto, você vai usá-la pelo menos uma vez: é a seção mais versátil de todas, e você verá abaixo que ela se dobra facilmente a outros usos.

Criar artigos. Um artigo é construído em parágrafos de texto, aos quais você acrescenta fotos, vídeos, citações ou código de incorporação.

O editor abre em Content › Add › An article. Os artigos que você já publicou estão em Content › Content list › All articles.

Uma vez criado o conteúdo, você define:

• a seção ou as seções às quais o artigo pertence
• o autor
• a miniatura
• um resumo, que vai aparecer na lista de artigos
• se os comentários ficam ativados ou não

A aba SEO permite também preencher os metadados e personalizar a URL.

Conteúdo dinâmico. É sua primeira finalidade. No app de notícias River Daily, várias seções Blog cobrem as diferentes editorias do jornal, algumas com categorias para refinar ainda mais a navegação.

No detalhe do artigo, a data de publicação é exibida, os comentários estão ativados, assim como o compartilhamento e os favoritos.

Uma apresentação de catálogo. No Freyja Spa, as seções Blog apresentam os tratamentos do salão. As três seções usadas são reunidas dentro de uma seção de menu.

O desvio interessante está aqui: o campo de resumo, pensado para uma linha de apoio, é usado para exibir a duração de cada tratamento na lista. A informação mais decisiva fica então legível num relance, sem abrir a página.

O detalhe repete a duração, o preço, a descrição do tratamento e um link para o formulário de agendamento. Os comentários estão ativados e funcionam como uma coleção de avaliações de clientes.

Conteúdo estático. O app Portland é um guia de viagem, e suas seções Blog servem dicas aos visitantes.

Aqui não há autor nem data de publicação: essa informação não acrescentaria nada a um conteúdo que não envelhece.

Nove layouts estão disponíveis para a lista. Eles se distinguem por três critérios: o volume de artigos que você publica, a força dos seus visuais, e se você quer ou não destacar um artigo.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

Sem item em destaque, todos os artigos no mesmo nível:

• Enriched Classic, o padrão universal. Ritmo moderado, metadados essenciais visíveis. Escolha-o quando nada empurrar você para um layout mais especializado.
• Condensed, para volume editorial alto a ser percorrido rápido. O visual vem em segundo lugar.
• Visual Card, cartões de largura total em uma única coluna: imagem grande em cima, título e linha de apoio abaixo. Para quando é a imagem que faz clicar.
• Checkerboard, para conteúdo estático, com títulos lidos em "Z".
• Grid Visual, uma grade de artigos iguais. Exige um visual em todos os itens.

Com um artigo em destaque:

• Une Condensed, um artigo principal seguido de muitos itens compactos. O feed absorve o volume.
• Une Grid Visual, um artigo em destaque e depois uma grade. Exige um visual em todos os itens também.
• Une Story, várias "capas" em um carrossel deslizante, estilo rede social, com um feed compacto abaixo. Para publicação muito regular com visuais fortes. Disponível apenas em artigos.

O caso especial:

• Immersive, um artigo por tela, imagem dominante e navegação por deslize vertical. Soberbo com visuais fortes, mas não aguenta volume alto.

A regra que se sobrepõe a todas as outras: se seus artigos não tiverem visuais, ou tiverem visuais de baixa qualidade, descarte Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story e Immersive. Restam Condensed se o volume for alto, e Enriched Classic no restante dos casos.

Para o detalhe do artigo, a visualização padrão coloca a imagem de capa no topo, e depois o título, a data e o autor, a barra de ações (compartilhar, favoritar, comentar) e o corpo do texto. Quando um artigo não tem capa, o título vem primeiro em vez de deixar um topo vazio.

Uma observação que vale para todas as seções: embora às vezes associemos um layout a um tipo de uso, nenhum é reservado a uma área específica. Tudo depende das suas necessidades e do design geral do seu app.

A seção Galeria exibe uma galeria de imagens. O funcionamento é mínimo: você acrescenta suas fotos, escolhe o layout, e pronto.

Acrescente suas fotos com o botão Add a photo, ou arrastando e soltando do seu computador. O envio múltiplo é possível, o que acelera bastante o trabalho.

Essa tela fica em Content › Content list › All photos, e a adição direta está em Content › Add › A photo.

Uma vez suas imagens no back office, você pode dar a elas um título e uma descrição, que vão aparecer na visualização de detalhe.

A vida de uma escola. O app Paraigua serve informação a alunos e pais, e busca criar uma comunidade em torno da escola. Sua seção Galeria publica regularmente fotos da vida escolar. O layout escolhido deixa visíveis o título e a descrição de cada foto, para colocá-las em contexto.

Um festival de música. O app Piu Piu é renovado a cada ano para a nova edição. A galeria funciona como arquivo: ela reúne fotos dos anos anteriores, o que mantém viva a memória dos frequentadores e passa o espírito do festival aos recém-chegados.

Três layouts, respondendo a três intenções diferentes.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

• Visual Card, o padrão. Uma coluna, cartões de largura total, e sobretudo um título e uma legenda por foto. É o único dos três que permite colocar suas imagens em contexto.
• Square, uma grade de quadrados em duas colunas, sem títulos. Para um arquivo visual bem condensado, quando a coerência do conjunto importa mais que cada foto isolada.
• Ratio, um mosaico de duas colunas que respeita as proporções nativas de cada imagem. Para um portfólio com formatos variados.

Em outras palavras: se suas fotos precisam de explicação, escolha Visual Card. Se elas falam por si e são muitas, Square ou Ratio conforme sejam uniformes ou não.

A seção Vídeo serve vídeos no seu app, estejam eles já hospedados em um site externo ou não.

Acrescente seus vídeos enviando-os do seu computador, ou informando o código de incorporação deles se já estiverem em outro lugar. Como no blog, você escolhe em seguida as seções de exibição, o autor, a data de publicação, o resumo e se os comentários ficam ativados.

O editor abre em Content › Add › A video.

Você pode enfim estruturar a página acrescentando, se precisar, parágrafos de texto, fotos e citações.

Um jornal local. O River Daily não tem canal de televisão, mas transmite programas regulares no YouTube, entre eles um diário. Eles são reunidos na seção Video News do app.

Um app interno de empresa. Na Dali Corp, a seção Vídeo serve cursos online criados por funcionários para funcionários. O esquema faz dois trabalhos ao mesmo tempo: reúne o pessoal em torno de um projeto comum, e oferece formação gratuita a eles.

Três layouts para a lista.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

• Enriched, o padrão. Lista compacta, miniatura pequena em 16:9, metadados em primeiro plano (título, data, autor, descrição). É a escolha certa para volume alto a ser percorrido.
• Une Condensed, um vídeo em destaque exibido grande com sua linha de apoio, e depois um feed compacto abaixo. É o "jornal em vídeo", com a capa do dia. Aguenta volume moderado a alto.
• Visual Card, cartões grandes de largura total com o quadro 16:9 e o botão de play centralizado. Escolha-o quando é a miniatura que faz clicar.

Para o detalhe, o player de vídeo ocupa o topo, seguido do título, da data, das ações, da descrição e, se você informar um, do endereço.

A seção Podcasts serve áudio no seu app.

Acrescente seu áudio enviando-o do seu computador. Como no blog, você escolhe as seções ou categorias de exibição, o autor, a data, o resumo e os comentários. Você pode também acrescentar links externos para comprar a faixa.

O editor abre em Content › Add › A sound.

A página é estruturada em seguida com parágrafos de texto, fotos, vídeos, código de incorporação e citações.

Um app de notícias. O River Daily transmite também uma rádio ao vivo. A seção Podcasts deixa certos programas disponíveis permanentemente. As datas são exibidas na lista, para ajudar os ouvintes a encontrar o programa que procuram. A página de detalhe fica enxuta, sem informação extra.

Uma escola. A Paraigua precisava entregar suas aulas a distância. Elas são apresentadas como lista, categorizadas por matéria.

A ideia que vale guardar está na página de detalhe: uma transcrição da aula é publicada ali em parágrafos e imagens. O aluno acompanha o texto e as ilustrações enquanto ouve a versão em áudio, o que torna a aula utilizável em situações bem diferentes.

Dois layouts, e o critério que os separa é o tamanho da miniatura. Os dois embutem o player na célula, com o botão de play e a duração: não é então a reprodução que os distingue.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

• Classic Play, o padrão. Miniatura menor, texto e metadados dominantes. É o layout das listas longas de episódios, e o do formato de rádio.
• Enriched, miniatura maior, que valoriza a arte de capa. Escolha-o quando a capa faz parte da identidade do seu conteúdo, em volume moderado.

Para o detalhe, a arte de capa funciona como uma capa imersiva, com o player de áudio, o título, as ações e o corpo do texto.

As seções acima publicam conteúdo gravado, disponível quando seu ouvinte decidir. O ao vivo faz o contrário: ele transmite em tempo real, e é o encontro marcado que faz o evento.

Três blocos de construção, a combinar conforme o que você transmite.

• O áudio ao vivo é o bloco de base: a seção existe sem nada acrescentado. Você informa o endereço do seu stream, e o app o transmite. Os codificadores IceCast são suportados nativamente, o que cobre a imensa maioria das montagens de rádio.
• O vídeo ao vivo faz o mesmo para uma transmissão com imagem. É uma extensão, e sua página mostra o preço que se aplica ao seu app.
• O Live+ é uma camada sobre o áudio ao vivo, trazida também por uma extensão. Ele exibe os metadados do seu stream ao lado do player: a faixa que está tocando, o apresentador, o programa. Sem ele, seu ouvinte vê um botão de play e mais nada; com ele, vê o que está ouvindo.

Duas propriedades merecem ser conhecidas antes de decidir.

O som não para quando seu ouvinte navega. O player acompanha o usuário de tela em tela e continua com a tela apagada. Na prática, as pessoas podem ouvir sua rádio enquanto leem seus artigos, o que muda completamente o uso de um app de rádio.

Você pode abrir várias seções ao vivo. Uma rádio com dois canais, um festival com dois palcos, uma paróquia com duas celebrações: cada stream tem sua própria seção.

Uma última diferença em relação às seções acima: o ao vivo tem uma única apresentação. Não há layout a escolher.

Uma rádio local. A rádio do River Daily, mencionada no capítulo anterior, mora em uma seção ao vivo. Os podcasts mantêm os programas sob demanda, a seção ao vivo carrega a emissora. O Live+ exibe a faixa que está tocando e seu artista, o que dá a um ouvinte que chega no meio do programa algo por onde se situar.

Um festival. O Piu Piu transmite seu palco ao vivo durante os quatro dias. O público que não pôde ir acompanha a noite, e os frequentadores reencontram o clima de casa. O ao vivo funciona ao lado da seção Eventos, que continua sendo a seção principal do app: a programação anuncia, o ao vivo transmite.

Dois detalhes dessa tela merecem ser apontados. O modo Sleep interrompe a reprodução depois de um prazo escolhido, o que conta em uma emissora que se ouve à noite. E o player assume as cores e a tipografia do app: é a mesma tela do River Daily, e no entanto não parece o mesmo produto.

A seção Mapa cria pontos geolocalizados exibidos em um mapa. Seus usuários localizam os lugares e traçam a rota até eles.

Para criar um ponto, informe o endereço ou as coordenadas dele na página de edição.

A página de edição abre em Content › Add › A location.

Você completa em seguida a descrição com texto, fotos, vídeos, citações ou código de incorporação. O painel à direita permite escolher as seções de exibição e acrescentar botões de ação:

• um botão de ligar
• um botão de e-mail

Por fim, você pode acrescentar um link externo, e personalizar a forma e a cor do ícone que representa o ponto.

Um campus escolar. A Paraigua se espalha por vários prédios. Os recém-chegados, alunos e pais, precisavam identificá-los num relance e traçar a rota até eles.

Quatro locais foram criados, apresentados primeiro como lista. A visualização de mapa mostra todos os pontos e as distâncias. Clicar em um ponto dá um resumo e o acesso ao detalhe, onde o botão de rota é o elemento principal, completado por uma descrição e uma imagem.

Uma empresa com vários endereços. A Dali Corp tem escritórios em várias cidades americanas, e se preocupa com sua cultura de empresa. Uma seção Mapa apresenta os três escritórios.

O detalhe é mais completo que na Paraigua: fotos descrevem o escritório e seu clima, e o botão de rota fica abaixo das fotos. O mapa não está ali só para orientar, está ali para fazer os outros endereços existirem para quem nunca vai.

Um guia de viagem. No app Portland, o mapa é o coração do produto. Várias seções Mapa apresentam os lugares da cidade, organizados por tipo.

O detalhe inclui uma descrição completa, fotos quando necessário, o botão de rota em destaque, e um link externo para o site de cada estabelecimento quando ele tem um.

Três layouts, e o critério real é o espaço que você dá ao próprio mapa.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

• Enriched, o padrão. Lista compacta, miniatura pequena, título e endereço, vários lugares por tela. O mapa fica escondido atrás de um botão. É o layout de diretório, para quando o usuário já sabe o que procura.
• Visual, miniatura grande e dominante, poucos lugares por tela. O mapa continua escondido atrás de um botão. Para uma galeria de lugares em que é a imagem que atrai.
• Split Enriched, o mapa interativo ocupa o alto da tela e a lista aparece abaixo. Escolha-o quando a relação espacial entre os lugares carrega sentido, ou seja, quando o mapa é o assunto.

Você decide também se exibe ou não uma lista resumida sobre o mapa. Vá em My App › Structure, abra a seção Mapa, e depois a visualização de lista de pontos: a configuração fica na área de conteúdo, em "Map view".

Para o detalhe de um local, você tem a foto, o nome, o endereço, o botão de rota, uma galeria e o mapa posicionado.

A seção Formulário coleta informações dos seus usuários, por campos de vários tipos.

Seus formulários são listados em Content › Content list › All forms. Abrir um mostra o painel de edição do formulário à direita, cuja aba de campos traz a paleta abaixo.

Dezesseis tipos de campo estão disponíveis:

• linha de texto simples
• parágrafo de texto
• múltipla escolha
• nome
• data
• e-mail
• link externo
• envio de arquivo
• números
• caixas de seleção
• lista suspensa
• endereço
• horário
• telefone
• preço
• quebra de seção

Clique no tipo que quiser e ele aparece na área de edição, onde você personaliza o conteúdo dele.

Lembre-se de enriquecer o formulário com fotos, vídeos, texto, citações ou código de incorporação também: um formulário nu recebe menos respostas que um formulário que explica o que procura.

Um app de serviços. No Ivar Madsen, designer de interiores, o formulário trata os pedidos de agendamento e de orçamento.

A página tem três objetivos: apresentar a oferta, conhecer o futuro cliente, permitir um primeiro contato. Uma imagem e um texto explicativo dão o contexto, e depois o formulário vai direto ao ponto:

• um campo de nome e um campo de e-mail para identificar o cliente
• dois campos de parágrafo para expressar suas necessidades e seu projeto
• um campo de data para indicar sua disponibilidade

Um app de empresa. Na Dali Corp, o RH faz pesquisas regulares para medir o bem-estar dos funcionários e recolher a opinião deles.

O formulário é deliberadamente bem curto, para maximizar a taxa de resposta. Um texto de introdução, e depois cinco campos:

• um campo de nome e um campo de equipe para identificar o funcionário
• dois campos de múltipla escolha para responder às perguntas da direção
• um campo de parágrafo para falar livremente

Vá em Content › Content list. Passe o mouse sobre a seção Formulário em questão e clique no link que mostra o conteúdo dela. Ali você encontra a lista das respostas recebidas.

Clicar em uma linha mostra as respostas de um usuário, que você pode exportar em .csv por Export data. O mesmo botão, na visualização de lista, exporta todas as respostas.

É essa exportação que torna a seção realmente útil: sem ela você lê as respostas uma a uma; com ela, você as analisa como um todo.

A seção de envio de conteúdo permite que seus usuários enviem conteúdo a você a partir do app, como texto, fotos ou vídeos. Tudo chega ao seu back office.

O que você recebe chega em Content › Content list › All sent in content.

Não há nada a configurar, a não ser que você queira restringir os tipos de conteúdo aceitos. Nesse caso, acrescente a extensão API Access e edite o JSON da seção. É uma operação simples e existe ajuda passo a passo no seu back office.

Uma caixa de sugestões interna. Na Dali Corp, a direção abriu um espaço onde os funcionários podem deixar suas observações e recomendações a qualquer momento. O conteúdo recebido não é publicado: ele é analisado para melhorar as condições de trabalho.

As lembranças de um festival. O Piu Piu aposta na sua comunidade e quer mostrar o clima real do festival. A seção Your Memories reúne fotos e vídeos dos participantes. O envio de texto foi desativado.

As dicas dos leitores. O River Daily quer ser o primeiro nas notícias locais. Uma seção aberta permite que os leitores passem suas informações, que os jornalistas retrabalham antes de publicar.

Esses três casos mostram três regimes diferentes: conteúdo que nunca será publicado, conteúdo publicado quase como está, e conteúdo que serve de matéria-prima para um trabalho editorial. Decida qual é o seu antes de abrir a seção, porque isso muda o que você anuncia aos seus usuários.

Vá em Content › Content list, passe o mouse sobre sua seção de envio e clique no link que mostra o conteúdo dela.

Você trata a publicação em massa, pelas caixas de seleção à direita de cada linha, ou caso a caso abrindo um item. Você pode então editar e depois publicar em um clique o que seus usuários enviaram.

A seção Eventos apresenta seu conteúdo como eventos com data.

Para criar um evento, escolha primeiro sua data e sua duração. A opção "o dia inteiro" poupa você de informar um intervalo de horário. Você pode em seguida associar um endereço a ele.

O editor abre em Content › Add › An event.

A página é construída em parágrafos, com texto, fotos, vídeos, citações e código de incorporação.

O painel à direita permite escolher as seções ou categorias de exibição, acrescentar botões de ação (ligar, e-mail), um link externo e um botão de compra de ingressos.

Um app interno de empresa. A Dali Corp usa duas seções Eventos. A primeira comunica sobre os eventos internos: oficinas, happy hours, portas abertas. A segunda compartilha o roadmap da empresa, para que todo mundo conheça os prazos e os projetos em curso.

Esse segundo uso é o mais transferível: a seção de eventos não é reservada aos eventos aos quais se comparece, ela serve também para tornar visível um calendário.

No detalhe, o endereço e o botão de rota aparecem quando são pertinentes.

Um festival. No Piu Piu, Eventos é a seção principal do app: é a programação do festival.

O detalhe é completo: endereço, data, botão de compra de ingressos, descrição, link para o site dos artistas, botão de ligar, botão de e-mail, botão de rota, além dos favoritos e do compartilhamento.

Dois layouts, correspondendo a duas posturas opostas.

O layout é alterado em My App › Structure: abra o menu da seção em questão, e depois Edit the design.

• Classic, o padrão. Os eventos são agrupados sob faixas de dia, com uma miniatura pequena, o horário, o título e o local, vários por tela. É o calendário que se percorre por data, quando o "quando" e o "onde" importam mais que a imagem.
• Classic Bullet, cada evento em uma miniatura grande e dominante com uma etiqueta de data, um ou dois por tela. É a vitrine, quando é o cartaz do evento que dá vontade de ir.

A escolha se resume então a uma pergunta: seus usuários vêm consultar uma programação, ou vêm para se deixar tentar?

Para o detalhe de um evento, você tem a imagem de capa, o título, o endereço, as datas, a descrição, a rota e o mapa do local.

Um CMS (sistema de gestão de conteúdo) permite criar e formatar seu conteúdo a partir de um back office para publicá-lo. Na GoodBarber, ele é o coração da plataforma.

Além da criação, ele dá a você:

• A gestão do status do conteúdo. Published, In stock ou Draft, para conduzir o que você publica.
• A publicação programada. Você define com antecedência o dia e a hora da entrada no ar, o que conta sobretudo em apps de notícias ou de blog.
• A categorização. Um número ilimitado de categorias para organizar o conteúdo de uma seção, ou seja, um nível de navegação a mais sem sobrecarregar seu menu.
• A ordenação. Por data de escrita, em ordem alfabética ou por número de comentários.
• A gestão centralizada. Um painel reúne todo o conteúdo criado no CMS, com filtros para encontrar e tratar itens em massa.
• A personalização avançada dos metadados. Ela serve tanto para incentivar a leitura quanto ao seu SEO, e você mantém o controle sobre como isso é exibido.
• O destaque de conteúdos. Exibição preferencial para o conteúdo da sua escolha, a partir da página de edição dele.
• A personalização avançada do design. O design de cada item pode ser definido independentemente das configurações gerais do app.

Se você já produz conteúdo em outro lugar, não precisa publicá-lo de novo. Mais de 30 conectores desenvolvidos pela GoodBarber o trazem para dentro do seu app, formatando-o para respeitar os padrões de exibição e o design do app.

Um sistema de cache garante os tempos de carregamento e a estabilidade, sem sobrecarregar seus servidores. Suas imagens são redimensionadas, comprimidas e mantidas em cache pela GoodBarber.

A vantagem decisiva é a sincronização: o conteúdo produzido na sua fonte externa continua atualizado no app, com uma exibição adaptada a celular, tablet, notebook e computador. Você nunca mais precisa publicar duas vezes.

Cada conector alimenta um tipo de conteúdo específico, e o conteúdo trazido passa a se comportar como se tivesse sido criado no CMS.

Artigos: WordPress, Squarespace, Wix, Medium, Substack, X, RSS

Fotos: Flickr

Vídeos: YouTube, Vimeo, RSS

Áudio e podcasts: Ausha, Spreaker, Simplecast, Spotify for Podcasters, feed de podcast, RSS

Eventos: iCal e vCalendar, RSS

Mapas: KML, RSS

Conectores personalizados. Se sua fonte não estiver coberta, você produz um feed no formato esperado pelo tipo de conteúdo de destino, e declara o endereço dele. O trabalho sob medida se limita a produzir o feed: a exibição, os layouts, a busca e os metadados continuam sendo da plataforma. Uma documentação detalhada descreve o formato esperado.

Nada obriga você a escolher entre os dois: você pode misturar conteúdo interno, criado no CMS, e conteúdo externo trazido pelos conectores, em um único e mesmo app.