Content-app

Welke content voor uw app

"Content-app" is een ruime term. Tussen de secties en de functies die in uw back office beschikbaar zijn, dekt u zowat elk project, in welk vakgebied u ook zit.

Deze gids loopt de negen contentsecties af, met voor elk wat ze toelaat, hoe u ze gebruikt, en welke layout u kiest wanneer er een is. Hij eindigt bij het CMS en de connectoren, die een fundamentele vraag beslechten: uw content in GoodBarber aanmaken, of de content binnenhalen die u al elders maakt.

Hoofdstuk 1De zeven demo-apps

De voorbeelden hieronder steunen op zeven apps, verdeeld over drie families. Zoek de app die op uw project lijkt, en pas daarna aan.

Apps voor contentmakers

River Daily voor een lokale krant, Piu Piu voor een festival, Portland voor een reisgids.

  • Blog: maak vrij artikelen aan, geïllustreerd met beelden en video's.
  • Galerij: toon uw beelden in meerdere presentaties.
  • Video: deel uw gefilmde content.
  • Audio: publiceer uw podcasts.
  • Kaart: maak content die aan specifieke plaatsen hangt.
  • Formulier: stel uw gebruikers vragen, verzamel en analyseer de antwoorden.
  • Evenementen: communiceer over evenementen, per datum voorgesteld.
  • Interne en externe advertenties: haal inkomsten uit uw content.
Drie openingsschermen van content-apps: een lokaal dagblad, een muziekfestival met zijn data, en een stadsgids. Onder elke telefoon herinnert een icoon aan het onderwerp.

Dienstverlenende zaken

Freyja Spa voor een schoonheidssalon, Ivar Madsen voor een bureau voor interieurontwerp.

  • Blog: stel uw diensten en behandelingen voor, of bouw een portfolio.
  • Contact: breng uw contactgegevens op één pagina samen.
  • Over: stel uzelf voor op een eigen pagina.
  • Formulier: maak er een afspraakaanvraag van.
  • Loyaltykaart en club card: bouw een loyaltyprogramma en verhoog de betrokkenheid.
Twee openingsschermen van dienstverlenende apps: een spa en een interieurontwerpster. Onder elke telefoon herinnert een icoon aan het vak.

Onderwijs en organisaties

Paraigua voor een school, Dali Corp voor een interne bedrijfsapp.

  • Blog: verspreid uw content onder uw publiek.
  • Authenticatie: laat uw gebruikers een profiel aanmaken.
  • Gebruikers: publiceer de lijst van uw gebruikers en hun profielen.
  • Gebruikersgroepen: segmenteer uw publiek en serveer content die bij elke groep hoort.
  • Chat: open een gespreksruimte in de app.
  • Evenementen: communiceer over uw evenementen.
  • Formulier: stel uw gebruikers vragen en analyseer de antwoorden.
Twee openingsschermen: een school en een bedrijf, het ene op de foto van zijn gebouw, het andere op zijn product. Onder elke telefoon herinnert een icoon aan het domein.

Hoofdstuk 2Een sectie toevoegen

De handeling is dezelfde voor elke sectie die in deze gids wordt beschreven. Ga naar My App Structure, klik op Add, en kies daarna het type dat u wilt.

U kunt tot 120 secties aan een app toevoegen, en dezelfde content kan in meerdere secties tegelijk verschijnen. Dat maakt de indeling zo flexibel: een sectie is geen afgesloten lade, ze is een blik op uw content.

Het paneel om een sectie toe te voegen, geopend op de catalogus van beschikbare types: blog, galerij, video, sociale netwerken, informatiepagina, contact, kaart, kalender, podcasts, feed en formulier, met een link om er meer te tonen. Onderaan de teller van de al gebruikte secties. Links toont de preview van de app het menu dat aangroeit.

Hoofdstuk 3De blog

Waarvoor ze dient

Met de sectie Blog maakt u content rechtstreeks vanuit het back office, in de vorm van artikelen verrijkt met foto's en video's.

Voor een contentmaker is het de centrale sectie. Maar wat uw project ook is, u gebruikt ze minstens één keer: het is de veelzijdigste sectie van allemaal, en u zult hieronder zien dat ze zich makkelijk naar andere toepassingen plooit.

Artikelen aanmaken. Een artikel bouwt u op in alinea's tekst, waaraan u foto's, video's, citaten of embedcode toevoegt.

De editor opent vanuit Content Add An article. De artikelen die u al hebt gepubliceerd staan in Content Content list All articles.

Zodra de content is aangemaakt, stelt u in:

  • de sectie of secties waartoe het artikel behoort
  • de auteur
  • de miniatuur
  • een samenvatting, die in de artikellijst verschijnt
  • of reacties aanstaan of niet

Op het tabblad SEO vult u ook de metadata in en past u de URL aan.

Een artikel bewerken in het back office. Links de titel en het beeld. Rechts het bewerkpaneel geopend op het eerste tabblad: de lijst van categorieën waarin het artikel verschijnt, met hun subcategorieën, elk aan te vinken; de auteur; de datum en het uur van publicatie; een vakje om het boven aan de lijst vast te zetten; en de miniatuur die in lijsten wordt gebruikt.

Drie manieren om ze te gebruiken

Dynamische content. Dat is haar eerste doel. In de nieuwsapp River Daily dekken meerdere Blog-secties de verschillende redacties van de krant, sommige met categorieën om de navigatie verder te verfijnen.

In het detail van het artikel wordt de publicatiedatum getoond, staan reacties aan, en ook delen en bewaren.

Een catalogus voorstellen. Bij Freyja Spa stellen de Blog-secties de behandelingen van de salon voor. De drie gebruikte secties zijn in een menusectie samengebracht.

De interessante omweg zit hier: het veld voor de samenvatting, bedoeld voor een inleidende regel, wordt gebruikt om de duur van elke behandeling in de lijst te tonen. De meest doorslaggevende informatie is dus in één oogopslag leesbaar, zonder de pagina te openen.

Het detail herhaalt de duur, de prijs, de beschrijving van de behandeling en een link naar het boekingsformulier. Reacties staan aan en werken als een verzameling klantenbeoordelingen.

Statische content. De app Portland is een reisgids, en zijn Blog-secties serveren tips aan bezoekers.

Hier is er geen auteur en geen publicatiedatum: die informatie zou niets toevoegen aan content die niet veroudert.

Twee secties van een nieuwsapp: links een lijst waarin het eerste artikel groot verschijnt en de volgende in rijen; rechts een sectie met bovenaan een balk met subcategorieën die dezelfde lijst filtert.
Het detail van een artikel: het beeld bovenaan, de titel, de publicatiedatum, daarna de tekst in uitgevulde alinea's. Onder aan het scherm reacties, delen en bewaren.
Het startscherm van een spa-app: drie categorieën behandelingen, elk een beeld over de volle breedte met de naam erin.
De lijst met massages: elke behandeling neemt een rij in met haar foto, haar naam en haar duur.
Het detail van een behandeling: foto, naam, duur, prijs, daarna een beschrijving in cursief en een link om te boeken.
Twee schermen van een stadsgids: links de lijst met artikelen, elk met hun vierkante miniatuur en hun titel, onder de header van de sectie en boven de tabbalk; rechts het geopende artikel, met zijn beeld, zijn titel en zijn tekst.

Welke layout u kiest

Er zijn negen layouts beschikbaar voor de lijst. Ze onderscheiden zich op drie criteria: het volume artikelen dat u publiceert, de kracht van uw beelden, en of u al dan niet één artikel wilt uitlichten.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

Zonder uitgelicht item, alle artikelen op gelijke voet:

  • Enriched Classic, de universele standaard. Gematigd ritme, de belangrijkste metadata zichtbaar. Neem hem wanneer niets u naar een gespecialiseerdere layout duwt.
  • Condensed, voor een hoog redactioneel volume dat snel wordt doorlopen. Het beeld komt op de tweede plaats.
  • Visual Card, kaarten over de volle breedte in één kolom: groot beeld bovenaan, titel en inleidende regel eronder. Voor wanneer het beeld doet klikken.
  • Checkerboard, voor statische content, met titels die in een "Z" worden gelezen.
  • Grid Visual, een raster van gelijke artikelen. Vraagt een beeld bij elk item.

Met één uitgelicht artikel:

  • Une Condensed, één hoofdartikel gevolgd door veel compacte items. De feed vangt het volume op.
  • Une Grid Visual, één uitgelicht artikel en daarna een raster. Vraagt ook een beeld bij elk item.
  • Une Story, meerdere "voorpagina's" in een schuivende carrousel, in de stijl van sociale netwerken, met een compacte feed eronder. Voor heel regelmatig publiceren met sterke beelden. Alleen beschikbaar voor artikelen.

Het bijzondere geval:

  • Immersive, één artikel per scherm, overheersend beeld en verticale veegnavigatie. Prachtig met sterke beelden, maar hij houdt geen groot volume aan.

De regel die alle andere overstemt: hebben uw artikelen geen beelden, of beelden van slechte kwaliteit, sluit dan Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story en Immersive uit. Blijven over: Condensed als het volume hoog is, Enriched Classic in de andere gevallen.

Voor het detail van het artikel zet de standaardweergave het coverbeeld bovenaan, daarna de titel, de datum en de auteur, de actiebalk (delen, bewaren, reageren) en de lopende tekst. Heeft een artikel geen cover, dan komt de titel eerst in plaats van een lege kop te laten.

Eén opmerking die voor elke sectie geldt: hoewel we soms een layout met een soort gebruik verbinden, is geen enkele layout aan een bepaald vakgebied voorbehouden. Alles hangt af van uw behoeften en van het algemene design van uw app.

Negen mockups van bloglayouts, met hun namen. Op de bovenste rij: Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. Op de onderste rij: Une Condensed, Une Grid Visual, Une Story, Immersive. Elke mockup toont hoe het beeld, de titel en de samenvatting in de lijst zijn geschikt, en of het eerste artikel zich van de andere onderscheidt.

Hoofdstuk 4De galerij

Waarvoor ze dient

De sectie Galerij toont een galerij met beelden. De werking is minimaal: u voegt uw foto's toe, u kiest de layout, en klaar.

Voeg uw foto's toe met de knop Add a photo, of door ze vanaf uw computer te slepen. Meerdere tegelijk uploaden kan, wat het werk sterk versnelt.

Dat scherm staat in Content Content list All photos, en rechtstreeks toevoegen doet u in Content Add A photo.

Zodra uw beelden in het back office staan, kunt u ze een titel en een beschrijving geven, die in de detailweergave verschijnen.

Het paneel om een sectie toe te voegen, met een pijl naar de tegel van de galerij tussen de beschikbare types. Links de preview van de festivalapp met haar programma en haar tabbalk.
De contentlijst gefilterd op een galerij, in rasterweergave. Elke foto vormt een kaart waarop twee invulvelden op een titel en een bijschrift wachten, met een pijl naar waar ze komen. Onder elke kaart de publicatiestatus, een prullenbak en een selectievakje; bovenaan de zoekfunctie, de filters en de toevoegknop.

Twee manieren om ze te gebruiken

Het leven op een school. De app Paraigua brengt informatie naar leerlingen en ouders, en wil een community rond de school opbouwen. Zijn sectie Galerij publiceert geregeld foto's van het schoolleven. De gekozen layout laat de titel en de beschrijving van elke foto zichtbaar, om ze in context te plaatsen.

Een muziekfestival. De app Piu Piu wordt elk jaar voor de nieuwe editie vernieuwd. De galerij werkt als archief: ze brengt foto's van de vorige jaren samen, wat de herinnering bij vaste bezoekers levend houdt en de geest van het festival aan nieuwkomers doorgeeft.

Een galerij in een schoolapp: de foto's volgen elkaar op over de volle breedte, elk met hun datum en hun titel eronder.
Een festivalgalerij als mozaïek: de foto's staan twee aan twee zonder titels, en antwoorden op elkaar met hun kleuren.

Welke layout u kiest

Drie layouts, die op drie verschillende bedoelingen antwoorden.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

  • Visual Card, de standaard. Eén kolom, kaarten over de volle breedte, en vooral een titel en een bijschrift per foto. Het is de enige van de drie waarmee u uw beelden in context kunt plaatsen.
  • Square, een raster van vierkanten in twee kolommen, zonder titels. Voor een heel compact visueel archief, wanneer de samenhang van het geheel meer telt dan elke foto op zich.
  • Ratio, een mozaïek van twee kolommen die de eigen verhoudingen van elk beeld respecteert. Voor een portfolio met gemengde formaten.

Met andere woorden: hebben uw foto's uitleg nodig, neem dan Visual Card. Spreken ze voor zich en zijn er veel, dan Square of Ratio naargelang ze uniform zijn of niet.

Drie mockups van galerijlayouts, met hun namen: Visual Card, waarbij elke foto een kaart met haar titel en haar bijschrift inneemt; Square, een raster van vierkante miniaturen; Ratio, een raster dat de oorspronkelijke verhoudingen van elke foto behoudt.

Hoofdstuk 5De video's

Waarvoor ze dient

De sectie Video serveert video's in uw app, of ze nu al op een externe site staan of niet.

Voeg uw video's toe door ze vanaf uw computer te uploaden, of door hun embedcode in te voeren als ze al elders staan. Net als bij de blog kiest u daarna de secties waarin ze verschijnen, de auteur, de publicatiedatum, de samenvatting en of reacties aanstaan.

De editor opent vanuit Content Add A video.

Ten slotte kunt u de pagina structureren door, indien nodig, alinea's tekst, foto's en citaten toe te voegen.

Hetzelfde paneel om een sectie toe te voegen, met de pijl deze keer naar de tegel van de video. Links toont de preview van de bedrijfsapp een artikel.
Een video aanmaken in het back office: in het midden een zone om bestanden neer te zetten die de maximale grootte vermeldt en aanbiedt een bestand te uploaden of een embedcode te plakken, met de lijst van aanvaarde formaten. Rechts de categorie, de auteur, de datum, het vastzetten boven aan de lijst, een samenvatting en de schakelaar voor reacties.

Twee manieren om ze te gebruiken

Een lokale krant. River Daily heeft geen televisiezender, maar zendt geregeld programma's uit op YouTube, waaronder een dagelijks programma. Ze worden samengebracht in de sectie Video News van de app.

Een interne bedrijfsapp. Bij Dali Corp serveert de sectie Video online cursussen die medewerkers voor medewerkers hebben gemaakt. De opzet doet twee dingen tegelijk: hij verenigt het personeel rond een gemeenschappelijk project, en hij geeft hun gratis opleiding.

Een videolijst in een nieuwsapp: elke regel draagt zijn miniatuur, gemarkeerd met een afspeelknop, en ernaast zijn titel of zijn datum.
Een videolijst in een bedrijfsapp: de miniaturen nemen de volle breedte in, met hun duur in een hoek, en de publicatiedatum en de titel eronder.

Welke layout u kiest

Drie layouts voor de lijst.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

  • Enriched, de standaard. Compacte lijst, kleine miniatuur in 16:9, metadata op de voorgrond (titel, datum, auteur, beschrijving). Het is de juiste keuze voor een hoog volume dat wordt doorlopen.
  • Une Condensed, één uitgelichte video groot getoond met haar inleidende regel, daarna een compacte feed eronder. Dit is de "videokrant", met de voorpagina van de dag. Houdt een gematigd tot hoog volume aan.
  • Visual Card, grote kaarten over de volle breedte met het 16:9-kader en de afspeelknop in het midden. Neem hem wanneer de miniatuur doet klikken.

Voor het detail neemt de videospeler de bovenkant in, gevolgd door de titel, de datum, de acties, de beschrijving en, als u er een invoert, het adres.

Drie mockups van videolayouts, met hun namen: Enriched, een lijst waarin de miniatuur links van de titel staat; Une Condensed, die de eerste video groot boven de volgende zet; Visual Card, waarbij elke video een eigen kaart inneemt.

Hoofdstuk 6De podcasts

Waarvoor ze dient

De sectie Podcasts serveert audio in uw app.

Voeg uw audio toe door ze vanaf uw computer te uploaden. Net als bij de blog kiest u de secties of categorieën waarin ze verschijnt, de auteur, de datum, de samenvatting en de reacties. U kunt ook externe links toevoegen om het nummer te kopen.

De editor opent vanuit Content Add A sound.

De pagina structureert u daarna met alinea's tekst, foto's, video's, embedcode en citaten.

Het paneel om een sectie toe te voegen, met de pijl naar de tegel van de podcast. Links de preview van de schoolapp, waarvan het menu als een raster van iconen verschijnt.
Een aflevering aanmaken in het back office: in het midden een titelveld en een zone om het audiobestand neer te zetten. Rechts de categorie gekozen uit de boomstructuur van de cursussen, de auteur, de datum, het vastzetten, twee velden voor links naar de appstores, en de schakelaar voor reacties.

Twee manieren om ze te gebruiken

Een nieuwsapp. River Daily zendt ook een radiostation live uit. De sectie Podcasts houdt bepaalde programma's permanent beschikbaar. De data worden in de lijst getoond, om luisteraars te helpen het programma te vinden dat ze zoeken. De detailpagina blijft sober, zonder extra informatie.

Een school. Paraigua moest zijn lessen op afstand geven. Ze worden als lijst voorgesteld, per vak ingedeeld.

Het idee om te onthouden zit in de detailpagina: er wordt een transcriptie van de les gepubliceerd, in alinea's en beelden. De leerling volgt de tekst en de illustraties terwijl hij naar de audioversie luistert, waardoor de les in heel verschillende situaties bruikbaar wordt.

Twee schermen van een nieuwsapp: links de lijst met afleveringen, elk met hun titel, hun datum en hun miniatuur; rechts de geopende speler, met de cover, de datum, de titel, de voortgangsbalk over een golfvorm en de drie afspeelknoppen.
Een lijst met afleveringen in een schoolapp, onder een balk met subcategorieën die de vakken scheidt. Elke regel draagt zijn miniatuur en zijn titel.
Het detail van een aflevering: cover, datum, titel, speler, daarna de geschreven les die de audio volgt, in alinea's met titel, onderbroken door een foto.

Welke layout u kiest

Twee layouts, en het criterium dat ze scheidt is de grootte van de miniatuur. Beide bouwen de speler in de cel in, met de afspeelknop en de duur: het is dus niet het afspelen dat ze onderscheidt.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

  • Classic Play, de standaard. Kleinere miniatuur, tekst en metadata overheersend. Het is de layout voor lange lijsten met afleveringen, en die voor het radiopatroon.
  • Enriched, grotere miniatuur, die de cover naar voren schuift. Kies hem wanneer de cover deel uitmaakt van de identiteit van uw content, bij een gematigd volume.

Voor het detail werkt de cover als een meeslepend openingsbeeld, met de audiospeler, de titel, de acties en de lopende tekst.

Twee mockups van podcastlayouts, met hun namen: Classic Play, waarbij elke aflevering haar miniatuur, haar tekst en haar afspeelknop op een rij zet; Enriched, die meer ruimte aan de miniatuur en de samenvatting geeft.

Hoofdstuk 7De live

Waarvoor ze dient

De secties hierboven publiceren opgenomen content, beschikbaar wanneer uw luisteraar beslist. Live doet het omgekeerde: het zendt in realtime uit, en het is de afspraak die het evenement maakt.

Drie bouwstenen, te combineren naargelang wat u uitzendt.

  • Live audio is de basissteen: de sectie bestaat zonder dat er iets aan wordt toegevoegd. U voert het adres van uw stream in, en de app zendt hem uit. IceCast-encoders worden native ondersteund, wat de overgrote meerderheid van radio-opstellingen dekt.
  • Live video doet hetzelfde voor een uitzending met beeld. Het is een extensie, en de pagina ervan toont de prijs die voor uw app geldt.
  • Live+ is een laag boven op de live audio, ook door een extensie geleverd. Het toont de metadata van uw stream naast de speler: het nummer dat speelt, de presentator, het programma. Zonder Live+ ziet uw luisteraar een afspeelknop en niets meer; mét Live+ ziet hij waarnaar hij luistert.

Twee eigenschappen zijn het waard te kennen voordat u beslist.

Het geluid stopt niet wanneer uw luisteraar navigeert. De speler volgt de gebruiker van scherm naar scherm en loopt door met het scherm uit. In de praktijk kunnen mensen naar uw station luisteren terwijl ze uw artikelen lezen, wat het gebruik van een radioapp volledig verandert.

U kunt meerdere livesecties openen. Een radiostation met twee kanalen, een festival met twee podia, een parochie met twee vieringen: elke stream heeft een eigen sectie.

Een laatste verschil met de secties hierboven: live heeft maar één presentatie. Er valt geen layout te kiezen.

Twee manieren om ze te gebruiken

Een lokale radio. De radio van River Daily, die in het vorige hoofdstuk is genoemd, woont in een livesectie. De podcasts houden de programma's op aanvraag beschikbaar, de livesectie draagt het station. Live+ toont het nummer dat speelt en de artiest, wat een luisteraar die middenin een programma binnenvalt iets geeft om zich te situeren.

Een festival. Piu Piu zendt zijn podium de vier dagen lang live uit. Het publiek dat niet kon komen, volgt de avond, en vaste bezoekers vinden de sfeer van thuis uit terug. Live werkt naast de sectie Evenementen, die de hoofdsectie van de app blijft: het programma kondigt aan, de live zendt uit.

Twee details op dat scherm zijn het aanwijzen waard. De slaapmodus stopt het afspelen na een gekozen tijd, wat telt bij een station waarnaar 's avonds wordt geluisterd. En de speler neemt de kleuren en de typografie van de app over: het is hetzelfde scherm als bij River Daily, en toch lijkt het niet hetzelfde product.

De live speler van River Daily: ronde cover, afspeelknop, verstreken tijd, daarna de naam van de artiest en de titel van het nummer die Live+ toont. Onderaan herinnert een blijvende minispeler aan wat er speelt.
Zonder Live+ zou de luisteraar alleen de afspeelknop zien.
Hetzelfde livescherm bij Piu Piu, in de donkere en oranje kleuren van het festival, met een knop voor de slaapmodus rechtsboven en de blijvende minispeler onderaan.
Hetzelfde scherm als hierboven, twee identiteiten: de speler volgt het design van de app.

Hoofdstuk 8De kaart

Waarvoor ze dient

De sectie Kaart maakt gelokaliseerde punten die op een kaart worden getoond. Uw gebruikers vinden de plaatsen terug en laten zich ernaartoe leiden.

Om een punt aan te maken, voert u het adres of de coördinaten ervan in op de bewerkpagina.

De bewerkpagina opent vanuit Content Add A location.

Daarna vult u de beschrijving aan met tekst, foto's, video's, citaten of embedcode. In het paneel rechts kiest u de secties waarin het punt verschijnt en voegt u actieknoppen toe:

  • een belknop
  • een e-mailknop

Ten slotte kunt u een externe link toevoegen, en de vorm en de kleur aanpassen van het icoon dat het punt voorstelt.

Het paneel om een sectie toe te voegen, met de pijl naar de tegel van de kaart. Links de preview van de stadsgids, met zijn zoekfunctie en zijn tegels.
Een locatie aanmaken in het back office: haar naam, haar adres, haar coördinaten, en rechts de kaart die ze plaatst. Daaronder een teksteditor om ze te beschrijven. In het paneel rechts de categorieën waarin ze verschijnt, een telefoonnummer en een e-mailadres die actieknoppen worden, een webadres, en daarna de keuze van de vorm en de kleur van haar markering.

Drie manieren om ze te gebruiken

Een schoolcampus. Paraigua ligt verspreid over meerdere gebouwen. Nieuwkomers, zowel leerlingen als ouders, moesten die in één oogopslag kunnen herkennen en de weg ernaartoe vinden.

Er zijn vier locaties aangemaakt, eerst als lijst voorgesteld. De kaartweergave toont alle punten en de afstanden. Op een punt klikken geeft een samenvatting en toegang tot het detail, waar de routeknop het belangrijkste element is, aangevuld met een beschrijving en een beeld.

Een bedrijf met meerdere vestigingen. Dali Corp heeft kantoren in meerdere Amerikaanse steden, en hecht aan zijn bedrijfscultuur. Een sectie Kaart stelt de drie kantoren voor.

Het detail is voller dan bij Paraigua: foto's beschrijven het kantoor en zijn sfeer, en de routeknop staat onder de foto's. De kaart is er niet alleen om mensen te oriënteren, ze is er om de andere vestigingen te laten bestaan voor wie er nooit komt.

Een reisgids. In de app Portland is de kaart het hart van het product. Meerdere secties Kaart stellen de plaatsen van de stad voor, per type geordend.

Het detail bevat een volledige beschrijving, foto's waar nodig, de routeknop prominent in beeld, en een externe link naar de website van elke zaak wanneer die er een heeft.

Drie schermen van een schoolapp: de lijst met locaties, elk met hun foto, hun naam en hun adres; de kaart, waarop de markeringen zich spreiden en er een zijn label opent; het detail van een locatie, met haar foto, haar adres, een routeknop, de lijst van haar diensten en een kaart onderaan.
Het detail van een kantoor in een bedrijfsapp: de openingsfoto, de naam, het adres, een inleidende regel, daarna vier foto's van de ruimte, de routeknop en de kaart.
Twee schermen van een stadsgids: links de lijst met locaties, onder een balk met subcategorieën, met een ronde knop die naar de kaart overschakelt; rechts de kaart op het volledige scherm, haar markeringen, en de knop die naar de lijst terugkeert.
Het detail van een toeristische plek: foto, naam, adres, routeknop, daarna een beschrijving die alinea's, een opsomming en foto's afwisselt, een knop naar de website, en de kaart onderaan.

Welke layout u kiest

Drie layouts, en het echte criterium is hoeveel ruimte u aan de kaart zelf geeft.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

  • Enriched, de standaard. Compacte lijst, kleine miniatuur, titel en adres, meerdere plaatsen per scherm. De kaart zit achter een knop verborgen. Het is de gids-layout, voor wanneer de gebruiker al weet wat hij zoekt.
  • Visual, grote overheersende miniatuur, weinig plaatsen per scherm. De kaart blijft achter een knop verborgen. Voor een galerij van plaatsen waar het beeld aantrekt.
  • Split Enriched, de interactieve kaart neemt de bovenkant van het scherm in en de lijst verschijnt eronder. Kies hem wanneer de ruimtelijke verhouding tussen de plaatsen betekenis draagt, dus wanneer de kaart het onderwerp is.

U beslist ook of u al dan niet een samenvattende lijst over de kaart toont. Ga naar My App Structure, open de sectie Kaart, en daarna de lijstweergave van de punten: de instelling staat in de contentzone, onder "Map view".

Voor het detail van een locatie krijgt u de foto, de naam, het adres, de routeknop, een galerij en de kaart met de locatie erop.

Drie mockups van kaartlayouts, met hun namen: Enriched, een lijst waarin elke locatie haar markering en haar adres draagt; Visual, die elke locatie een grote miniatuur geeft; Split Enriched, die de kaart bovenaan zet en de lijst eronder.
De designinstellingen van een kaartsectie. Omcirkeld, twee schakelaars bepalen of de lijst verschijnt en of ze vóór de kaart opent. Daaronder de achtergrondkleur, de rand, de dekking, wat elke regel toont, en de typografie van de titel. Links past de preview de instellingen live toe.

Hoofdstuk 9Het formulier

Waarvoor ze dient

De sectie Formulier verzamelt informatie bij uw gebruikers, via velden van verschillende types.

Uw formulieren staan opgesomd in Content Content list All forms. Er een openen toont rechts het bewerkpaneel van het formulier, waarvan het tabblad met velden het palet hieronder draagt.

Er zijn zestien types velden beschikbaar:

  • één tekstregel
  • alinea tekst
  • meerkeuze
  • naam
  • datum
  • e-mailadres
  • externe link
  • bestand uploaden
  • getallen
  • selectievakjes
  • keuzelijst
  • adres
  • uur
  • telefoonnummer
  • prijs
  • sectiescheiding

Klik op het type dat u wilt en het verschijnt in de bewerkzone, waar u de inhoud ervan aanpast.

Denk eraan het formulier ook te verrijken met foto's, video's, tekst, citaten of embedcode: een kaal formulier krijgt minder antwoorden dan een formulier dat uitlegt waarnaar het op zoek is.

Het paneel om een sectie toe te voegen, met de pijl deze keer naar de tegel van het formulier, in een catalogus die langer is geworden. Links de preview van de app van de interieurontwerpster, menu open.
Een formulier bewerken: links de titel en een illustratie; rechts het palet met beschikbare velden, één tekstregel, een getal, een alinea, selectievakjes, een enkele keuze, een keuzelijst, een naam, een adres, een datum, een uur, een e-mailadres, een telefoonnummer, een website, een prijs en een sectiescheiding.

Twee manieren om ze te gebruiken

Een dienstverlenende app. Bij Ivar Madsen, interieurontwerpster, handelt het formulier de aanvragen voor afspraken en offertes af.

De pagina heeft drie doelen: het aanbod voorstellen, de toekomstige klant leren kennen, een eerste contact mogelijk maken. Een beeld en een verklarende tekst geven de context, en daarna komt het formulier meteen ter zake:

  • een naamveld en een e-mailveld om de klant te identificeren
  • twee alineavelden om zijn behoeften en zijn project uit te drukken
  • een datumveld om zijn beschikbaarheid aan te geven

Een bedrijfsapp. Bij Dali Corp houdt HR geregeld bevragingen om het welzijn van de medewerkers te meten en hun mening te verzamelen.

Het formulier is bewust heel kort, om de responsgraad te maximaliseren. Een inleidende tekst, en daarna vijf velden:

  • een naamveld en een teamveld om de medewerker te identificeren
  • twee meerkeuzevelden om de vragen van de directie te beantwoorden
  • een alineaveld om vrij te spreken
Een contactformulier van boven naar beneden gescrold: de titel, een foto, vier blokken die uitleggen wat er zal worden gevraagd, daarna de in te vullen velden, naam, e-mailadres, adres van het pand met zijn subvelden, beschrijving van het project, voorkeursstijl en beschikbaarheid met een datumkiezer. Een verzendknop sluit de pagina af.
Een interne bevraging in een bedrijfsapp: na de inleiding een naamveld, een keuzelijst met teams, twee vragen met één keuze en een vrij veld, daarna de verzendknop.

De antwoorden benutten

Ga naar Content Content list. Ga met de muis over de betrokken sectie Formulier en klik op de link die de inhoud ervan toont. Daar vindt u de lijst met ontvangen antwoorden.

Op een regel klikken toont de antwoorden van één gebruiker, die u via Export data als .csv kunt exporteren. Dezelfde knop exporteert vanuit de lijstweergave alle antwoorden.

Die export maakt de sectie werkelijk nuttig: zonder export leest u de antwoorden één voor één; met export analyseert u ze als geheel.

De antwoorden op een formulier in het back office, als een tabel: de datum, de velden van het formulier als kolommen, en het bijgevoegde bestand. Een prullenbak sluit elke regel af. Door de pijl omcirkeld, rechtsboven, de export van de gegevens en de weg terug naar het bewerken van het formulier.

Hoofdstuk 10De ingestuurde content

Waarvoor ze dient

Met de sectie voor ingestuurde content sturen uw gebruikers u content vanuit de app, als tekst, foto's of video's. Alles komt in uw back office terecht.

Wat u ontvangt, komt aan in Content Content list All sent in content.

Er valt niets in te stellen, tenzij u de aanvaarde contenttypes wilt beperken. Voeg in dat geval de extensie API Access toe en bewerk de JSON van de sectie. Het is een eenvoudige handeling en er is stapsgewijze hulp beschikbaar in uw back office.

Het paneel om een sectie toe te voegen, met de pijl naar de tegel voor het insturen van content. Links de preview van de app van de interieurontwerpster, menu open.

Drie manieren om ze te gebruiken

Een interne ideeënbus. Bij Dali Corp opende de directie een ruimte waar medewerkers op elk moment hun opmerkingen en aanbevelingen kunnen achterlaten. De ontvangen content wordt niet gepubliceerd: ze wordt geanalyseerd om de werkomstandigheden te verbeteren.

De herinneringen van een festival. Piu Piu zet in op zijn community en wil de echte sfeer van het festival tonen. De sectie Your Memories verzamelt foto's en video's van de deelnemers. Het insturen van tekst is uitgezet.

Tips van lezers. River Daily wil de eerste zijn met lokaal nieuws. Een open sectie laat lezers hun informatie doorgeven, die journalisten herwerken voordat ze publiceren.

Die drie gevallen tonen drie verschillende regimes: content die nooit zal worden gepubliceerd, content die vrijwel ongewijzigd wordt gepubliceerd, en content die als grondstof voor redactioneel werk dient. Beslis welk regime het uwe is voordat u de sectie opent, want het verandert wat u aan uw gebruikers aankondigt.

Twee schermen van een bedrijfsapp: links het menu, waar een item de medewerkers uitnodigt bij te dragen; rechts het scherm om te posten, dat drie handelingen aanbiedt, een beeld, een video of een tekst, elk met hun instructie.
Hetzelfde mechanisme in een festivalapp: het menu nodigt het publiek uit hun herinneringen te posten, en het scherm om te posten houdt twee handelingen over, beeld en video, elk op een eigen gekleurde achtergrond.
In een nieuwsapp: het menu draagt twee items om bij te dragen, en het scherm om te posten nodigt de lezers uit het nieuws van hun stad door te geven met een beeld, een video of een tekst.

Beheren wat u ontvangt

Ga naar Content Content list, ga met de muis over uw sectie voor ingestuurde content en klik op de link die de inhoud ervan toont.

U handelt de publicatie in bulk af, via de selectievakjes rechts van elke regel, of geval per geval door een item te openen. U kunt dus bewerken en daarna in één klik publiceren wat uw gebruikers u hebben gestuurd.

Ingestuurde content in het back office: elke regel draagt het ontvangen beeld, een vermelding van de app waaruit het komt, het e-mailadres van de auteur, de datum en een statuslabel dat ze als ingestuurd markeert, in afwachting van goedkeuring. Een prullenbak sluit elke regel af.

Hoofdstuk 11De evenementen

Waarvoor ze dient

De sectie Evenementen stelt uw content voor als evenementen met een datum.

Om een evenement aan te maken, kiest u eerst de datum en de duur. De optie "de hele dag" bespaart u het invoeren van een tijdsblok. Daarna kunt u er een adres aan koppelen.

De editor opent vanuit Content Add An event.

De pagina bouwt u op in alinea's, met tekst, foto's, video's, citaten en embedcode.

In het paneel rechts kiest u de secties of categorieën waarin het verschijnt, voegt u actieknoppen toe (bellen, e-mail), een externe link en een knop om tickets te kopen.

Het paneel om een sectie toe te voegen, met de pijl naar de tegel van de kalender. Links de preview van de festivalapp, met het programma en zijn tabbalk.
Een evenement bewerken in het back office: de titel, de begin- en einddatum, een vakje voor de hele dag, daarna de plaats met haar coördinaten en de kaart die ze lokaliseert. Rechts de categorie, een telefoonnummer en een e-mailadres als actieknoppen, een webadres, een link naar de ticketverkoop en de miniatuur voor de lijst.

Twee manieren om ze te gebruiken

Een interne bedrijfsapp. Dali Corp gebruikt twee secties Evenementen. De eerste communiceert over interne evenementen: workshops, afterworks, opendeurdagen. De tweede deelt de roadmap van het bedrijf, zodat iedereen de deadlines en de lopende projecten kent.

Die tweede toepassing is het best overdraagbaar: de sectie met evenementen is niet voorbehouden aan evenementen waar men naartoe gaat, ze dient ook om een kalender zichtbaar te maken.

In het detail verschijnen het adres en de routeknop wanneer ze relevant zijn.

Een festival. Bij Piu Piu is Evenementen de hoofdsectie van de app: het is het programma van het festival.

Het detail is volledig: adres, datum, knop om tickets te kopen, beschrijving, link naar de website van de artiesten, belknop, e-mailknop, routeknop, plus bewaren en delen.

Twee schermen van een bedrijfsapp: links de lijst met evenementen, elk met hun datumlabel, hun beeld en hun uur of plaats; rechts het detail van een evenement, met zijn foto, zijn plaats, zijn datum, een routeknop en de kaart.
Het detail van een concert in de festivalapp: de foto, de naam van de band, de plaats, de datum, een knop naar de ticketverkoop, de voorstelling, daarna vier knoppen, website, telefoon, route en e-mail, en de kaart onderaan.

Welke layout u kiest

Twee layouts, die met twee tegengestelde houdingen overeenkomen.

De layout wijzigt u in My App Structure: open het menu van de betrokken sectie, en daarna Edit the design.

  • Classic, de standaard. Evenementen worden onder dagbanners gegroepeerd, met een kleine miniatuur, het uur, de titel en de plaats, meerdere per scherm. Het is de kalender die u per datum doorloopt, wanneer het "wanneer" en het "waar" meer tellen dan het beeld.
  • Classic Bullet, elk evenement in een grote, overheersende miniatuur met een datumlabel, één of twee per scherm. Het is de etalage, wanneer de affiche van het evenement zin doet krijgen om te komen.

De keuze komt dus neer op één vraag: komen uw gebruikers een programma raadplegen, of komen ze om verleid te worden?

Voor het detail van een evenement krijgt u het coverbeeld, de titel, het adres, de data, de beschrijving, de route en de kaart van de plaats.

Twee mockups van kalenderlayouts, met hun namen: Classic, een lijst met evenementen per dag gegroepeerd, elk met hun miniatuur en hun plaats; Classic Bullet, die de data als labels aan de zijkant zet en elk evenement een groot beeld geeft.

Hoofdstuk 12Het CMS en de connectoren

Wat het CMS brengt

Een CMS (contentmanagementsysteem) laat u uw content vanuit een back office aanmaken en opmaken om ze te publiceren. Bij GoodBarber is het het hart van het platform.

Naast het aanmaken geeft het u:

  • Beheer van de status van de content. Published, In stock of Draft, om te sturen wat u publiceert.
  • Geplande publicatie. U legt de dag en het uur van de publicatie vooraf vast, wat vooral telt bij nieuws- of blogapps.
  • Indeling in categorieën. Een onbeperkt aantal categorieën om de content van een sectie te ordenen, dus een extra navigatieniveau zonder uw menu te overladen.
  • Sorteren. Op schrijfdatum, alfabetisch of op aantal reacties.
  • Centraal beheer. Een dashboard brengt alle content samen die in het CMS is aangemaakt, met filters om items te vinden en in bulk te behandelen.
  • Geavanceerde personalisatie van de metadata. Die dient zowel om tot lezen aan te zetten als voor uw SEO, en u houdt de controle over hoe ze wordt getoond.
  • Content uitlichten. Voorkeursweergave voor de content van uw keuze, vanaf haar bewerkpagina.
  • Geavanceerde personalisatie van het design. Het design van elk item kunt u los van de algemene instellingen van de app bepalen.

Wat de connectoren brengen

Maakt u al elders content, dan hoeft u ze niet opnieuw te publiceren. Meer dan 30 connectoren die GoodBarber heeft ontwikkeld, brengen ze in uw app binnen en maken ze op volgens de weergavenormen en het design van de app.

Een cachesysteem waarborgt de laadtijden en de stabiliteit, zonder uw servers te overbelasten. Uw beelden worden door GoodBarber verkleind, gecomprimeerd en in cache gehouden.

Het doorslaggevende voordeel is de synchronisatie: content die op uw externe bron wordt gemaakt, blijft in de app up-to-date, met een weergave die is aangepast aan telefoon, tablet, laptop en computer. U hoeft nooit meer twee keer te publiceren.

De lijst met connectoren

Elke connector voedt een specifiek contenttype, en de binnengehaalde content gedraagt zich daarna alsof ze in het CMS was aangemaakt.

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

Foto's: Flickr

Video's: YouTube, Vimeo, RSS

Audio en podcasts: Ausha, Spreaker, Simplecast, Spotify for Podcasters, podcastfeed, RSS

Evenementen: iCal en vCalendar, RSS

Kaarten: KML, RSS

Eigen connectoren. Is uw bron niet gedekt, dan maakt u een feed in het formaat dat het beoogde contenttype verwacht, en geeft u het adres ervan op. Het maatwerk beperkt zich tot het maken van de feed: de weergave, de layouts, de zoekfunctie en de metadata blijven van het platform. Gedetailleerde documentatie beschrijft het verwachte formaat.

Niets verplicht u tussen beide te kiezen: u kunt interne content, in het CMS gemaakt, en externe content, door de connectoren binnengehaald, in één en dezelfde app mengen.