App di contenuti

Quali contenuti per la tua app

«App di contenuti» è un termine ampio. Tra le sezioni e le funzionalità disponibili nel tuo back office, puoi coprire quasi qualsiasi progetto, qualunque sia il tuo settore.

Questa guida percorre le nove sezioni di contenuto, con, per ciascuna, quello che permette, come usarla, e quale layout scegliere quando c'è una scelta. Finisce con il CMS e i connettori, che risolvono una domanda di fondo: creare i tuoi contenuti in GoodBarber, oppure portare i contenuti che già produci altrove.

Capitolo 1Le sette app di dimostrazione

Gli esempi che seguono si appoggiano su sette applicazioni, divise in tre famiglie. Cerca quella che assomiglia al tuo progetto, e poi adatta.

App per creatori di contenuti

River Daily per un giornale locale, Piu Piu per un festival, Portland per una guida di viaggio.

  • Blog: crea articoli liberamente, illustrati con immagini e video.
  • Gallery: mostra le tue immagini in più presentazioni.
  • Video: condividi i tuoi contenuti filmati.
  • Sound: pubblica i tuoi podcast.
  • Map: crea contenuti legati a luoghi precisi.
  • Form: fai domande ai tuoi utenti, raccogli e analizza le risposte.
  • Events: comunica sui tuoi eventi, presentati per data.
  • Pubblicità interna ed esterna: genera ricavi con i tuoi contenuti.
Tre schermate di avvio di app di contenuti: un quotidiano locale, un festival musicale con le sue date, e una guida di città. Sotto ogni telefono, un'icona ricorda il tema.

Attività di servizi

Freyja Spa per un salone di bellezza, Ivar Madsen per uno studio di interior design.

  • Blog: presenta i tuoi servizi e i tuoi trattamenti, oppure costruisci un portfolio.
  • Contact: raccogli i tuoi recapiti in una sola pagina.
  • About: presentati in una pagina dedicata.
  • Form: trasformalo in una richiesta di appuntamento.
  • Carta fedeltà e club card: costruisci un programma fedeltà e aumenta il coinvolgimento.
Due schermate di avvio di app di servizi: una spa e un decoratore d'interni. Sotto ogni telefono, un'icona ricorda il mestiere.

Istruzione e organizzazioni

Paraigua per una scuola, Dali Corp per un'app interna di azienda.

  • Blog: distribuisci i tuoi contenuti al tuo pubblico.
  • Authentication: permetti ai tuoi utenti di creare un profilo.
  • Users: pubblica la lista dei tuoi utenti e i loro profili.
  • User groups: segmenta il tuo pubblico e servi contenuti specifici a ogni gruppo.
  • Chat: apri uno spazio di conversazione nell'app.
  • Events: comunica sui tuoi eventi.
  • Form: fai domande ai tuoi utenti e analizza le risposte.
Due schermate di avvio: una scuola e un'azienda, una sulla foto del suo edificio, l'altra sul suo prodotto. Sotto ogni telefono, un'icona ricorda il settore.

Capitolo 2Aggiungere una sezione

Il gesto è lo stesso per tutte le sezioni descritte in questa guida. Vai in My App Structure, clicca su Add, e scegli poi il tipo che vuoi.

Puoi aggiungere fino a 120 sezioni a un'app, e uno stesso contenuto può comparire in più sezioni insieme. È questo a rendere l'organizzazione così flessibile: una sezione non è un cassetto chiuso, è una vista sui tuoi contenuti.

Il pannello di aggiunta di una sezione, aperto sul catalogo dei tipi disponibili: blog, galleria, video, social network, pagina informativa, contatto, mappa, calendario, podcast, feed e modulo, con un link per vederne di più. In fondo, il contatore delle sezioni già usate. A sinistra, l'anteprima dell'app mostra il menu che si allunga.

Capitolo 3Il blog

A che cosa serve

La sezione Blog ti permette di creare contenuti direttamente dal back office, sotto forma di articoli arricchiti con foto e video.

Per un creatore di contenuti è la sezione centrale. Ma qualunque sia il tuo progetto, la userai almeno una volta: è la sezione più versatile di tutte, e vedrai più avanti che si piega facilmente ad altri usi.

Creare articoli. Un articolo si costruisce in paragrafi di testo, a cui aggiungi foto, video, citazioni o codice embed.

L'editor si apre da Content Add An article. Gli articoli che hai già pubblicato stanno in Content Content list All articles.

Una volta creato il contenuto, imposti:

  • la sezione o le sezioni a cui appartiene l'articolo
  • l'autore
  • la miniatura
  • un sommario, che comparirà nella lista degli articoli
  • se i commenti sono attivi o no

La scheda SEO ti permette inoltre di compilare i metadati e di personalizzare l'URL.

La modifica di un articolo nel back office. A sinistra, il suo titolo e la sua immagine. A destra, il pannello di modifica aperto sulla prima scheda: la lista delle categorie in cui compare l'articolo, con le loro sottocategorie, ciascuna spuntabile; l'autore; la data e l'ora di pubblicazione; una casella per fissarlo in cima alla lista; e la miniatura usata nelle liste.

Tre modi di usarlo

Contenuti dinamici. È la sua prima finalità. Nell'app di notizie River Daily, più sezioni Blog coprono le diverse redazioni del giornale, alcune con categorie per affinare ulteriormente la navigazione.

Nel dettaglio dell'articolo compare la data di pubblicazione, i commenti sono attivi, insieme alla condivisione e ai preferiti.

Una presentazione da catalogo. Da Freyja Spa, le sezioni Blog presentano i trattamenti del salone. Le tre sezioni usate sono raccolte dentro una sezione di menu.

La deviazione interessante è qui: il campo del sommario, pensato per un occhiello, viene usato per mostrare la durata di ogni trattamento nella lista. L'informazione più decisiva è quindi leggibile con un colpo d'occhio, senza aprire la scheda.

Il dettaglio ripete la durata, il prezzo, la descrizione del trattamento e un link al modulo di prenotazione. I commenti sono attivi e fanno da raccolta di recensioni dei clienti.

Contenuti statici. L'app Portland è una guida di viaggio, e le sue sezioni Blog servono consigli ai visitatori.

Qui non ci sono né autore né data di pubblicazione: quell'informazione non aggiungerebbe niente a un contenuto che non scade.

Due sezioni di un'app di notizie: a sinistra, una lista in cui il primo articolo si mostra in grande e i successivi in righe; a destra, una sezione sormontata da una barra di sottocategorie che filtra quella stessa lista.
Il dettaglio di un articolo: l'immagine in alto, il titolo, la data di pubblicazione, e poi il testo in paragrafi giustificati. In fondo alla schermata, i commenti, la condivisione e il segnalibro.
La pagina iniziale di un'app di spa: tre categorie di trattamenti, ciascuna un'immagine a tutta larghezza con il suo nome incastonato.
La lista dei massaggi: ogni trattamento occupa una riga con la sua foto, il suo nome e la sua durata.
Il dettaglio di un trattamento: foto, nome, durata, prezzo, e poi una descrizione in corsivo e un link di prenotazione.
Due schermate di una guida di città: a sinistra, la lista degli articoli, ciascuno con la sua miniatura quadrata e il suo titolo, sotto l'intestazione della sezione e sopra la barra delle schede; a destra, l'articolo aperto, la sua immagine, il suo titolo e il suo testo.

Quale layout scegliere

Per la lista sono disponibili nove layout. Si distinguono in base a tre criteri: il volume di articoli che pubblichi, la forza dei tuoi visual, e se vuoi o no mettere in evidenza un articolo.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

Senza elemento in evidenza, tutti gli articoli allo stesso livello:

  • Enriched Classic, il valore predefinito universale. Ritmo moderato, metadati chiave visibili. Prendilo quando niente ti spinge verso un layout più specializzato.
  • Condensed, per un volume editoriale alto da scorrere in fretta. Il visual passa in secondo piano.
  • Visual Card, schede a tutta larghezza su una sola colonna: immagine grande sopra, titolo e occhiello sotto. Per quando è l'immagine a far cliccare.
  • Checkerboard, per contenuti statici, con i titoli che si leggono a «Z».
  • Grid Visual, una griglia di articoli uguali. Richiede un visual su tutti gli elementi.

Con un articolo in evidenza:

  • Une Condensed, un articolo di punta seguito da molti elementi compatti. Il feed assorbe il volume.
  • Une Grid Visual, un articolo in evidenza e poi una griglia. Anche questo richiede un visual su tutti gli elementi.
  • Une Story, più «prime pagine» in un carosello che si scorre con il dito, in stile social network, con un feed compatto sotto. Per una pubblicazione molto regolare con visual forti. Disponibile solo sugli articoli.

Il caso particolare:

  • Immersive, un articolo per schermata, immagine dominante e navigazione con scorrimento verticale. Splendido con visual forti, ma non regge un volume alto.

La regola che si impone a tutte le altre: se i tuoi articoli non hanno visual, o li hanno di scarsa qualità, escludi Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story e Immersive. Restano Condensed se il volume è alto, Enriched Classic negli altri casi.

Per il dettaglio dell'articolo, la vista predefinita mette l'immagine di copertina nell'hero, poi il titolo, la data e l'autore, la barra delle azioni (condividere, preferiti, commentare) e il corpo del testo. Quando un articolo non ha copertina, il titolo viene per primo invece di lasciare un hero vuoto.

Un'osservazione che vale per tutte le sezioni: anche se a volte associamo un layout a un tipo di uso, nessuno è riservato a un settore preciso. Tutto dipende dalle tue esigenze e dal design generale della tua app.

Nove mockup di layout di blog, con i loro nomi. Nella fila in alto: Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. Nella fila in basso: Une Condensed, Une Grid Visual, Une Story, Immersive. Ognuno mostra come si dispongono l'immagine, il titolo e il sommario nella lista, e se il primo articolo si distingue dagli altri.

Capitolo 4La galleria

A che cosa serve

La sezione Gallery mostra una galleria di immagini. Il funzionamento è minimo: aggiungi le tue foto, scegli il layout, ed è tutto.

Aggiungi le tue foto con il pulsante Add a photo, oppure trascinandole dal tuo computer. Si possono caricare più foto insieme, il che accelera parecchio il lavoro.

Quella schermata sta in Content Content list All photos, e l'aggiunta diretta sta in Content Add A photo.

Una volta che le tue immagini sono nel back office, puoi dare loro un titolo e una descrizione, che compariranno nella vista di dettaglio.

Il pannello di aggiunta di una sezione, con una freccia che indica la scheda della galleria tra i tipi disponibili. A sinistra, l'anteprima dell'app del festival con il suo programma e la sua barra delle schede.
La lista dei contenuti filtrata su una galleria, in vista a griglia. Ogni foto forma una scheda in cui due indicazioni aspettano un titolo e una didascalia, con una freccia che indica dove vanno. Sotto ogni scheda, lo stato di pubblicazione, un cestino e una casella; in alto, la ricerca, i filtri e il pulsante di aggiunta.

Due modi di usarla

La vita di una scuola. L'app Paraigua serve informazioni ad alunni e genitori, e punta a costruire una community intorno alla scuola. La sua sezione Gallery pubblica con regolarità foto della vita scolastica. Il layout scelto lascia visibili il titolo e la descrizione di ogni scatto, per contestualizzarli.

Un festival musicale. L'app Piu Piu si rinnova ogni anno per la nuova edizione. La galleria fa da archivio: raccoglie le foto degli anni precedenti, il che tiene viva la memoria per gli abituali e trasmette lo spirito del festival ai nuovi arrivati.

Una galleria in un'app scolastica: le foto si susseguono a tutta larghezza, ciascuna con la sua data e il suo titolo sotto.
La galleria di un festival a mosaico: le foto si dispongono a due a due senza titoli, rispondendosi tra loro con i colori.

Quale layout scegliere

Tre layout, che rispondono a tre intenzioni diverse.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

  • Visual Card, il valore predefinito. Una colonna, schede a tutta larghezza, e soprattutto un titolo e una didascalia per foto. È l'unico dei tre che ti permette di contestualizzare le tue immagini.
  • Square, una griglia di quadrati a due colonne, senza titoli. Per un archivio visivo molto condensato, quando la coerenza dell'insieme conta più di ogni foto presa da sola.
  • Ratio, un mosaico a due colonne che rispetta le proporzioni originali di ogni immagine. Per un portfolio con formati misti.

In altre parole: se le tue foto hanno bisogno di spiegazione, prendi Visual Card. Se parlano da sole e sono tante, Square o Ratio a seconda che siano uniformi o no.

Tre mockup di layout di galleria, con i loro nomi: Visual Card, dove ogni foto occupa una scheda con il suo titolo e la sua didascalia; Square, una griglia di miniature quadrate; Ratio, una griglia che conserva le proporzioni originali di ogni foto.

Capitolo 5I video

A che cosa serve

La sezione Video serve video nella tua app, che siano già ospitati su un sito esterno o no.

Aggiungi i tuoi video caricandoli dal tuo computer, oppure inserendo il loro codice embed se vivono già altrove. Come per il blog, scegli poi le sezioni di visualizzazione, l'autore, la data di pubblicazione, il sommario e se i commenti sono attivi.

L'editor si apre da Content Add A video.

Infine puoi strutturare la pagina aggiungendo, se serve, paragrafi di testo, foto e citazioni.

Lo stesso pannello di aggiunta di una sezione, con la freccia che indica questa volta la scheda del video. A sinistra, l'anteprima dell'app aziendale mostra un articolo.
La creazione di un video nel back office: al centro, una zona di rilascio che indica la dimensione massima e propone di caricare un file o di incollare un codice embed, con la lista dei formati accettati. A destra, la categoria, l'autore, la data, il fissaggio in cima alla lista, un sommario e l'interruttore dei commenti.

Due modi di usarla

Un giornale locale. River Daily non ha un canale televisivo, ma trasmette programmi regolari su YouTube, tra cui uno quotidiano. Si raccolgono nella sezione Video News dell'app.

Un'app interna di azienda. Da Dali Corp, la sezione Video serve corsi online creati da dipendenti per dipendenti. Il meccanismo fa due lavori insieme: riunisce il personale intorno a un progetto comune, e gli dà formazione gratuita.

Una lista di video in un'app di notizie: ogni riga porta la sua miniatura, contrassegnata da un pulsante di riproduzione, e accanto il suo titolo o la sua data.
Una lista di video in un'app aziendale: le miniature occupano tutta la larghezza, con la loro durata incastonata in un angolo, e la data di pubblicazione e il titolo sotto.

Quale layout scegliere

Tre layout per la lista.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

  • Enriched, il valore predefinito. Lista compatta, miniatura piccola in 16:9, metadati in primo piano (titolo, data, autore, descrizione). È la scelta giusta per un volume alto da scorrere.
  • Une Condensed, un video in evidenza mostrato in grande con il suo occhiello, e poi un feed compatto sotto. È il «giornale video», con la prima pagina del giorno. Regge un volume da moderato ad alto.
  • Visual Card, grandi schede a tutta larghezza con l'inquadratura 16:9 e il pulsante di riproduzione centrato. Prendilo quando è la miniatura a far cliccare.

Per il dettaglio, il lettore video occupa l'hero, seguito dal titolo, dalla data, dalle azioni, dalla descrizione e, se lo inserisci, dall'indirizzo.

Tre mockup di layout di video, con i loro nomi: Enriched, una lista in cui la miniatura sta a sinistra del titolo; Une Condensed, che distingue il primo video, in grande, sopra i successivi; Visual Card, dove ogni video occupa la propria scheda.

Capitolo 6I podcast

A che cosa serve

La sezione Podcasts serve audio nella tua app.

Aggiungi il tuo audio caricandolo dal tuo computer. Come per il blog, scegli le sezioni o le categorie di visualizzazione, l'autore, la data, il sommario e i commenti. Puoi anche aggiungere link esterni per acquistare il brano.

L'editor si apre da Content Add A sound.

La pagina si struttura poi con paragrafi di testo, foto, video, codice embed e citazioni.

Il pannello di aggiunta di una sezione, con la freccia che indica la scheda del podcast. A sinistra, l'anteprima dell'app scolastica, il cui menu si mostra come una griglia di icone.
La creazione di un episodio nel back office: al centro, un campo per il titolo e una zona di rilascio per il file audio. A destra, la categoria scelta nell'albero delle materie, l'autore, la data, il fissaggio, due campi di link agli store, e l'interruttore dei commenti.

Due modi di usarla

Un'app di notizie. River Daily trasmette anche una radio in diretta. La sezione Podcasts rende disponibili in modo permanente certi programmi. Le date compaiono nella lista, per aiutare gli ascoltatori a trovare il programma che cercano. La pagina di dettaglio resta spoglia, senza informazioni aggiuntive.

Una scuola. Paraigua aveva bisogno di erogare le sue lezioni a distanza. Sono presentate in forma di lista, classificate per materia.

L'idea da tenere sta nella pagina di dettaglio: lì viene pubblicata una trascrizione della lezione in paragrafi e immagini. L'alunno segue il testo e le illustrazioni mentre ascolta la versione audio, il che rende la lezione utilizzabile in situazioni molto diverse.

Due schermate di un'app di notizie: a sinistra, la lista degli episodi, ciascuno con il suo titolo, la sua data e la sua miniatura; a destra, il lettore aperto, con la copertina, la data, il titolo, la barra di avanzamento sovrapposta a un'onda sonora e i tre pulsanti di riproduzione.
Una lista di episodi in un'app scolastica, sotto una barra di sottocategorie che separa le materie. Ogni riga porta la sua miniatura e il suo titolo.
Il dettaglio di un episodio: copertina, data, titolo, lettore, e poi la lezione scritta che accompagna l'audio, in paragrafi con titolo intervallati da una foto.

Quale layout scegliere

Due layout, e il criterio che li separa è la dimensione della miniatura. Entrambi integrano il lettore nella cella, con il pulsante di riproduzione e la durata: non è quindi la riproduzione a distinguerli.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

  • Classic Play, il valore predefinito. Miniatura più piccola, testo e metadati dominanti. È il layout delle liste lunghe di episodi, e quello del modello radiofonico.
  • Enriched, miniatura più grande, che mette in primo piano la copertina. Sceglilo quando la copertina fa parte dell'identità dei tuoi contenuti, su un volume moderato.

Per il dettaglio, la copertina fa da immagine immersiva, con il lettore audio, il titolo, le azioni e il corpo del testo.

Due mockup di layout di podcast, con i loro nomi: Classic Play, dove ogni episodio allinea la sua miniatura, il suo testo e il suo comando di riproduzione; Enriched, che dà più spazio alla miniatura e al sommario.

Capitolo 7La diretta

A che cosa serve

Le sezioni qui sopra pubblicano contenuti registrati, disponibili quando decide il tuo ascoltatore. La diretta fa il contrario: trasmette in tempo reale, ed è l'appuntamento a creare l'evento.

Tre mattoni, da combinare a seconda di quello che trasmetti.

  • La diretta audio è il mattone di base: la sezione esiste senza aggiungere niente. Inserisci l'indirizzo del tuo stream, e l'app lo trasmette. I codificatori IceCast sono supportati in modo nativo, il che copre la stragrande maggioranza degli impianti radiofonici.
  • La diretta video fa lo stesso per una trasmissione con immagini. È un'estensione, e la sua scheda mostra il prezzo che si applica alla tua app.
  • Live+ è uno strato sopra la diretta audio, portato anch'esso da un'estensione. Mostra i metadati del tuo stream accanto al lettore: il brano in onda, il conduttore, il programma. Senza, il tuo ascoltatore vede un pulsante di riproduzione e nient'altro; con, vede che cosa sta ascoltando.

Due proprietà vale la pena conoscerle prima di decidere.

Il suono non si ferma quando il tuo ascoltatore naviga. Il lettore segue l'utente di schermata in schermata e prosegue a schermo spento. In pratica, la gente può ascoltare la tua emittente mentre legge i tuoi articoli, il che cambia completamente il modo di usare un'app di radio.

Puoi aprire più sezioni di diretta. Una radio con due canali, un festival con due palchi, una parrocchia con due funzioni: ogni stream ha la sua sezione.

Un'ultima differenza con le sezioni qui sopra: la diretta ha una sola presentazione. Non c'è nessun layout da scegliere.

Due modi di usarla

Una radio locale. La radio di River Daily, citata nel capitolo precedente, vive in una sezione Live. I podcast conservano i programmi su richiesta, la sezione di diretta porta l'emittente. Live+ mostra il brano in onda e il suo artista, il che dà a un ascoltatore che arriva a metà programma un appiglio per orientarsi.

Un festival. Piu Piu trasmette il suo palco in diretta per tutti e quattro i giorni. Il pubblico che non è potuto venire segue la serata, e gli abituali ritrovano l'atmosfera da casa. La diretta funziona accanto alla sezione Events, che resta la sezione principale dell'app: il programma annuncia, la diretta trasmette.

Due dettagli di quella schermata meritano di essere segnalati. La modalità Sleep ferma la riproduzione dopo un tempo scelto, cosa che conta su un'emittente che si ascolta la sera. E il lettore adotta i colori e la tipografia dell'app: è la stessa schermata di River Daily, e tuttavia non sembra lo stesso prodotto.

Il lettore in diretta di River Daily: copertina circolare, pulsante di riproduzione, tempo trascorso, e poi il nome dell'interprete e il titolo del brano mostrati da Live+. In fondo, un mini lettore permanente ricorda che cosa sta suonando.
Senza Live+, l'ascoltatore vedrebbe solo il pulsante di riproduzione.
La stessa schermata di diretta da Piu Piu, con i colori scuro e arancione del festival, un pulsante di modalità Sleep in alto a destra e il mini lettore permanente in fondo.
La stessa schermata di sopra, due identità: il lettore segue il design dell'app.

Capitolo 8La mappa

A che cosa serve

La sezione Map crea punti geolocalizzati mostrati su una mappa. I tuoi utenti individuano i luoghi e ottengono le indicazioni per raggiungerli.

Per creare un punto, inserisci il suo indirizzo o le sue coordinate nella pagina di modifica.

La pagina di modifica si apre da Content Add A location.

Completi poi la descrizione con testo, foto, video, citazioni o codice embed. Il pannello di destra ti permette di scegliere le sezioni di visualizzazione e di aggiungere pulsanti d'azione:

  • un pulsante di chiamata
  • un pulsante di email

Infine puoi aggiungere un link esterno, e personalizzare la forma e il colore dell'icona che rappresenta il punto.

Il pannello di aggiunta di una sezione, con la freccia che indica la scheda della mappa. A sinistra, l'anteprima della guida di città, con la sua ricerca e le sue schede.
La creazione di un luogo nel back office: il suo nome, il suo indirizzo, le sue coordinate, e a destra la mappa che le colloca. Sotto, un editor di testo per descriverlo. Nel pannello di destra, le categorie in cui compare, un numero di telefono e un'email che diventano pulsanti d'azione, un indirizzo web, e poi la scelta della forma e del colore del suo segnaposto.

Tre modi di usarla

Un campus scolastico. Paraigua è distribuita su più edifici. I nuovi arrivati, tanto gli alunni quanto i genitori, avevano bisogno di individuarli con un colpo d'occhio e di ottenere le indicazioni stradali.

Sono stati creati quattro luoghi, presentati prima come lista. La vista Map mostra tutti i punti e le distanze. Cliccando su un punto si ottiene un riepilogo e l'accesso al dettaglio, dove il pulsante per le indicazioni stradali è l'elemento principale, completato da una descrizione e da un'immagine.

Un'azienda con più sedi. Dali Corp ha uffici in diverse città americane, e tiene alla sua cultura aziendale. Una sezione Map presenta i tre uffici.

Il dettaglio è più ricco che da Paraigua: delle foto descrivono l'ufficio e la sua atmosfera, e il pulsante per le indicazioni stradali sta sotto le foto. La mappa non è lì solo per orientare, è lì per far esistere le altre sedi agli occhi di chi non ci va mai.

Una guida di viaggio. Nell'app Portland, la mappa è il cuore del prodotto. Più sezioni Map presentano i luoghi della città, ordinati per tipo.

Il dettaglio comprende una descrizione completa, foto quando servono, il pulsante per le indicazioni stradali messo in risalto, e un link esterno al sito di ogni esercizio quando ce l'ha.

Tre schermate di un'app scolastica: la lista dei luoghi, ciascuno con la sua foto, il suo nome e il suo indirizzo; la mappa, dove i segnaposto si distribuiscono e uno di essi apre la sua etichetta; il dettaglio di un luogo, con la sua foto, il suo indirizzo, un pulsante per le indicazioni stradali, la lista dei suoi servizi e una mappa in fondo.
Il dettaglio di un ufficio in un'app aziendale: la foto di apertura, il nome, l'indirizzo, una riga introduttiva, e poi quattro foto dei locali, il pulsante per le indicazioni stradali e la mappa.
Due schermate di una guida di città: a sinistra la lista dei luoghi, sotto una barra di sottocategorie, con un pulsante rotondo che passa alla mappa; a destra la mappa a schermo intero, i suoi segnaposto, e il pulsante che torna alla lista.
Il dettaglio di un sito turistico: foto, nome, indirizzo, pulsante per le indicazioni stradali, e poi una descrizione che alterna paragrafi, un elenco puntato e foto, un pulsante verso il sito, e la mappa in fondo.

Quale layout scegliere

Tre layout, e il criterio vero è quanto spazio dai alla mappa stessa.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

  • Enriched, il valore predefinito. Lista compatta, miniatura piccola, titolo e indirizzo, più luoghi per schermata. La mappa è nascosta dietro un pulsante. È il layout da elenco, per quando l'utente sa già che cosa cerca.
  • Visual, miniatura grande e dominante, pochi luoghi per schermata. La mappa resta nascosta dietro un pulsante. Per una galleria di luoghi in cui è l'immagine ad attrarre.
  • Split Enriched, la mappa interattiva occupa la parte alta dello schermo e la lista compare sotto. Sceglilo quando la relazione spaziale tra i luoghi porta un significato, cioè quando la mappa è il tema.

Decidi anche se mostrare o no una lista riassuntiva sopra la mappa. Vai in My App Structure, apri la sezione Map, poi la vista di lista dei punti: l'impostazione sta nella zona dei contenuti, sotto «Map view».

Per il dettaglio di un luogo, hai la foto, il nome, l'indirizzo, il pulsante per le indicazioni stradali, una galleria e la mappa che lo colloca.

Tre mockup di layout di mappa, con i loro nomi: Enriched, una lista in cui ogni luogo porta il suo segnaposto e il suo indirizzo; Visual, che dà a ogni luogo una miniatura grande; Split Enriched, che mette la mappa sopra e la lista sotto.
Le impostazioni di design di una sezione mappa. Cerchiati, due interruttori controllano se la lista si mostra e se si apre prima della mappa. Sotto, il colore di sfondo, il bordo, l'opacità, quello che mostra ogni riga, e la tipografia del titolo. A sinistra, l'anteprima applica le impostazioni in diretta.

Capitolo 9Il modulo

A che cosa serve

La sezione Form raccoglie informazioni dai tuoi utenti, tramite campi di vario tipo.

I tuoi moduli sono elencati in Content Content list All forms. Aprendone uno compare a destra il pannello di modifica del modulo, la cui scheda dei campi porta sotto la tavolozza.

Sono disponibili sedici tipi di campo:

  • riga di testo
  • paragrafo di testo
  • scelta multipla
  • nome
  • data
  • email
  • link esterno
  • caricamento di file
  • numeri
  • caselle
  • menu a tendina
  • indirizzo
  • ora
  • telefono
  • prezzo
  • interruzione di sezione

Clicca sul tipo che vuoi e compare nella zona di modifica, dove ne personalizzi il contenuto.

Ricordati di arricchire il modulo anche con foto, video, testo, citazioni o codice embed: un modulo spoglio riceve meno risposte di un modulo che spiega che cosa cerca.

Lo stesso pannello di aggiunta di una sezione, con la freccia che indica questa volta la scheda del modulo, in un catalogo che si è allungato. A sinistra, l'anteprima dell'app del decoratore, con il menu aperto.
La modifica di un modulo: a sinistra il suo titolo e un'illustrazione; a destra, la tavolozza dei campi disponibili, una riga di testo, un numero, un paragrafo, delle caselle, una scelta unica, un menu a tendina, un nome, un indirizzo, una data, un'ora, un'email, un telefono, un sito, un prezzo, un file e un'interruzione di sezione.

Due modi di usarlo

Un'app di servizi. Da Ivar Madsen, interior designer, il modulo gestisce le richieste di appuntamento e di preventivo.

La pagina ha tre obiettivi: presentare l'offerta, conoscere il futuro cliente, permettere un primo contatto. Un'immagine e un testo esplicativo danno il contesto, e poi il modulo va al sodo:

  • un campo per il nome e un campo per l'email per identificare il cliente
  • due campi di paragrafo per esprimere le sue esigenze e il suo progetto
  • un campo per la data per indicare la sua disponibilità

Un'app aziendale. Da Dali Corp, le risorse umane lanciano con regolarità dei sondaggi per misurare il benessere dei dipendenti e raccogliere le loro opinioni.

Il modulo è volutamente molto corto, per massimizzare il tasso di risposta. Un testo introduttivo, e poi cinque campi:

  • un campo per il nome e un campo per la squadra per identificare il dipendente
  • due campi a scelta multipla per rispondere alle domande della direzione
  • un campo di paragrafo per parlare liberamente
Un modulo di contatto percorso dall'alto in basso: il titolo, una foto, quattro blocchi che spiegano che cosa verrà chiesto, e poi i campi da compilare, nome, email, indirizzo dell'immobile con i suoi sottocampi, descrizione del progetto, stile preferito e disponibilità con un selettore di data. Un pulsante di invio chiude la pagina.
Un sondaggio interno in un'app aziendale: dopo l'introduzione, un campo per il nome, un menu a tendina per la squadra, due domande a scelta unica e un campo libero, e poi il pulsante di invio.

Sfruttare le risposte

Vai in Content Content list. Passa il mouse sulla sezione Form interessata e clicca sul link che ne mostra il contenuto. Lì troverai la lista delle risposte ricevute.

Cliccando su una riga si mostrano le risposte di un singolo utente, che puoi esportare in .csv tramite Export data. Lo stesso pulsante, dalla vista di lista, esporta tutte le risposte.

È quell'esportazione a rendere la sezione davvero utile: senza, leggi le risposte una a una; con, le analizzi nel loro insieme.

Le risposte di un modulo nel back office, sotto forma di tabella: la data, i campi del modulo come colonne, e il file allegato. Un cestino chiude ogni riga. Cerchiati dalla freccia, in alto a destra, l'esportazione dei dati e il ritorno alla modifica del modulo.

Capitolo 10Gli invii di contenuti

A che cosa serve

La sezione Submission permette ai tuoi utenti di inviarti contenuti dall'app, sotto forma di testo, foto o video. Tutto arriva nel tuo back office.

Quello che ricevi arriva in Content Content list All sent in content.

Non c'è niente da configurare, salvo che tu voglia limitare i tipi di contenuto accettati. In quel caso, aggiungi l'estensione API Access e modifica il JSON della sezione. È un'operazione semplice e nel tuo back office c'è un aiuto passo passo.

Il pannello di aggiunta di una sezione, con la freccia che indica la scheda dell'invio di contenuti. A sinistra, l'anteprima dell'app del decoratore, con il menu aperto.

Tre modi di usarla

Una cassetta dei suggerimenti interna. Da Dali Corp, la direzione ha aperto uno spazio in cui i dipendenti possono lasciare le loro osservazioni e i loro consigli in qualsiasi momento. I contenuti ricevuti non vengono pubblicati: vengono analizzati per migliorare le condizioni di lavoro.

I ricordi di un festival. Piu Piu punta sulla sua community e vuole mostrare l'atmosfera reale del festival. La sezione Your Memories raccoglie le foto e i video dei partecipanti. L'invio di testo è stato disattivato.

Le segnalazioni dei lettori. River Daily vuole essere il primo sull'attualità locale. Una sezione aperta permette ai lettori di trasmettere le loro informazioni, che i giornalisti rielaborano prima di pubblicarle.

Quei tre casi mostrano tre regimi diversi: contenuti che non verranno mai pubblicati, contenuti pubblicati quasi così come sono, e contenuti che servono da materia prima per un lavoro editoriale. Decidi qual è il tuo prima di aprire la sezione, perché cambia quello che annunci ai tuoi utenti.

Due schermate di un'app aziendale: a sinistra il menu, dove una voce invita i dipendenti a contribuire; a destra la schermata di pubblicazione, che propone tre gesti, un'immagine, un video o un testo, ciascuno con la sua istruzione.
Lo stesso meccanismo in un'app di festival: il menu invita i partecipanti a pubblicare i loro ricordi, e la schermata di pubblicazione conserva due gesti, immagine e video, ciascuno sul proprio sfondo colorato.
In un'app di notizie: il menu porta due voci di contributo, e la schermata di pubblicazione invita i lettori a segnalare l'attualità della loro città inviando un'immagine, un video o un testo.

Gestire quello che ricevi

Vai in Content Content list, passa il mouse sulla tua sezione Submission e clicca sul link che ne mostra il contenuto.

Gestisci la pubblicazione in blocco, tramite le caselle a destra di ogni riga, oppure caso per caso aprendo un elemento. Puoi quindi modificare e poi pubblicare con un clic quello che i tuoi utenti ti hanno inviato.

I contenuti inviati nel back office: ogni riga porta l'immagine ricevuta, un'indicazione dell'app da cui viene, l'indirizzo email dell'autore, la data e una pillola di stato che la segna come inviata, in attesa di approvazione. Un cestino chiude ogni riga.

Capitolo 11Gli eventi

A che cosa serve

La sezione Events presenta i tuoi contenuti sotto forma di eventi con una data.

Per creare un evento, scegli prima la sua data e la sua durata. L'opzione «tutto il giorno» ti risparmia di inserire una fascia oraria. Puoi poi associargli un indirizzo.

L'editor si apre da Content Add An event.

La pagina si costruisce in paragrafi, con testo, foto, video, citazioni e codice embed.

Il pannello di destra ti permette di scegliere le sezioni o le categorie di visualizzazione, di aggiungere pulsanti d'azione (chiamata, email), un link esterno e un pulsante per l'acquisto dei biglietti.

Il pannello di aggiunta di una sezione, con la freccia che indica la scheda del calendario. A sinistra, l'anteprima dell'app del festival, con il programma e la sua barra delle schede.
La modifica di un evento nel back office: il suo titolo, le sue date di inizio e di fine, una casella per tutto il giorno, e poi il luogo con le sue coordinate e la mappa che lo colloca. A destra, la categoria, un telefono e un'email come pulsanti d'azione, un indirizzo web, un link alla biglietteria e la miniatura della lista.

Due modi di usarla

Un'app interna di azienda. Dali Corp usa due sezioni Events. La prima comunica sugli eventi interni: workshop, aperitivi dopo il lavoro, giornate porte aperte. La seconda condivide la roadmap dell'azienda, perché tutti conoscano le scadenze e i progetti in corso.

Quel secondo uso è il più trasferibile: la sezione degli eventi non è riservata agli eventi a cui si partecipa, serve anche a rendere visibile un calendario.

Nel dettaglio, l'indirizzo e il pulsante per le indicazioni stradali compaiono quando sono pertinenti.

Un festival. Da Piu Piu, Events è la sezione principale dell'app: è il programma del festival.

Il dettaglio è completo: indirizzo, data, pulsante per l'acquisto dei biglietti, descrizione, link al sito degli artisti, pulsante di chiamata, pulsante di email, pulsante per le indicazioni stradali, oltre ai preferiti e alla condivisione.

Due schermate di un'app aziendale: a sinistra la lista degli eventi, ciascuno con la sua pillola di data, la sua immagine e il suo orario o il suo luogo; a destra il dettaglio di un evento, con la sua foto, il suo luogo, la sua data, un pulsante per le indicazioni stradali e la mappa.
Il dettaglio di un concerto nell'app del festival: la foto, il nome del gruppo, il luogo, la data, un pulsante per la biglietteria, la presentazione, e poi quattro pulsanti, sito, telefono, indicazioni stradali ed email, e la mappa in fondo.

Quale layout scegliere

Due layout, che corrispondono a due posture opposte.

Il layout si cambia in My App Structure: apri il menu della sezione interessata, poi Edit the design.

  • Classic, il valore predefinito. Gli eventi sono raggruppati sotto fasce di giorno, con una miniatura piccola, l'ora, il titolo e il luogo, diversi per schermata. È il calendario che si scorre per data, quando il «quando» e il «dove» contano più dell'immagine.
  • Classic Bullet, ogni evento in una miniatura grande e dominante con una pillola di data, uno o due per schermata. È la vetrina, quando è la locandina dell'evento a far venire voglia di andarci.

La scelta si riduce quindi a una domanda: i tuoi utenti vengono a consultare un programma, o a lasciarsi tentare?

Per il dettaglio di un evento, hai l'immagine di copertina, il titolo, l'indirizzo, le date, la descrizione, le indicazioni stradali e la mappa del luogo.

Due mockup di layout di calendario, con i loro nomi: Classic, una lista di eventi raggruppati per giorno, ciascuno con la sua miniatura e il suo luogo; Classic Bullet, che allinea le date come pillole sul lato e dà a ogni evento un'immagine grande.

Capitolo 12Il CMS e i connettori

Quello che porta il CMS

Un CMS (sistema di gestione dei contenuti) ti permette di creare e formattare i tuoi contenuti da un back office per pubblicarli. In GoodBarber è il cuore della piattaforma.

Oltre alla creazione, ti dà:

  • La gestione dello stato dei contenuti. Published, In stock o Draft, per governare quello che pubblichi.
  • La pubblicazione programmata. Fissi in anticipo il giorno e l'ora della messa online, cosa che conta soprattutto per le app di notizie o di blog.
  • La categorizzazione. Un numero illimitato di categorie per ordinare i contenuti di una sezione, e quindi un livello di navigazione in più senza sovraccaricare il tuo menu.
  • L'ordinamento. Per data di scrittura, in ordine alfabetico o per numero di commenti.
  • La gestione centralizzata. Un cruscotto raccoglie tutti i contenuti creati nel CMS, con filtri per trovare e trattare elementi in blocco.
  • La personalizzazione avanzata dei metadati. Serve tanto a invogliare alla lettura quanto al tuo SEO, e conservi il controllo su come vengono mostrati.
  • La messa in evidenza dei contenuti. Visualizzazione preferenziale per il contenuto che scegli, dalla sua pagina di modifica.
  • La personalizzazione avanzata del design. Il design di ogni elemento si può impostare indipendentemente dalle impostazioni generali dell'applicazione.

Quello che portano i connettori

Se produci già contenuti altrove, non devi pubblicarli di nuovo. Più di 30 connettori sviluppati da GoodBarber li portano nella tua app, formattandoli in modo da rispettare gli standard di visualizzazione e il design dell'app.

Un sistema di cache garantisce i tempi di caricamento e la stabilità, senza sovraccaricare i tuoi server. Le tue immagini vengono ridimensionate, compresse e messe in cache da GoodBarber.

Il vantaggio decisivo è la sincronizzazione: i contenuti prodotti sulla tua fonte esterna restano aggiornati nell'app, con una visualizzazione adattata a mobile, tablet, portatile e computer fisso. Non dovrai più pubblicare due volte.

La lista dei connettori

Ogni connettore alimenta un tipo di contenuto preciso, e i contenuti portati si comportano poi come se fossero stati creati nel CMS.

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

Foto: Flickr

Video: YouTube, Vimeo, RSS

Audio e podcast: Ausha, Spreaker, Simplecast, Spotify for Podcasters, feed podcast, RSS

Eventi: iCal e vCalendar, RSS

Mappe: KML, RSS

Connettori personalizzati. Se la tua fonte non è coperta, produci un feed nel formato che si aspetta il tipo di contenuto di destinazione, e ne dichiari l'indirizzo. Il lavoro su misura si limita a produrre il feed: la visualizzazione, i layout, la ricerca e i metadati restano della piattaforma. Una documentazione dettagliata descrive il formato atteso.

Niente ti obbliga a scegliere tra i due: puoi mescolare contenuti interni, creati nel CMS, e contenuti esterni portati dai connettori, in una sola e stessa applicazione.