Indholdsapp

Hvilket indhold til din app

»Indholdsapp« er et bredt udtryk. Mellem de sektioner og de funktioner, der er til rådighed i dit back office, kan du dække næsten ethvert projekt, uanset dit felt.

Denne guide går de ni indholdssektioner igennem, med for hver af dem, hvad den tillader, hvordan du bruger den, og hvilket layout du skal vælge, når der er et. Den slutter på CMS'et og forbindelserne, som afgør et grundlæggende spørgsmål: at skabe dit indhold i GoodBarber eller at hente det indhold ind, du allerede producerer andre steder.

Kapitel 1De syv demoapps

Eksemplerne nedenfor hviler på syv apps, delt i tre familier. Find den, der ligner dit projekt, og tilpas derefter.

Apps til indholdsskabere

River Daily til en lokalavis, Piu Piu til en festival, Portland til en rejseguide.

  • Blog: opret artikler frit, illustreret med billeder og videoer.
  • Gallery: vis dine billeder i flere præsentationer.
  • Video: del dit filmede indhold.
  • Sound: udgiv dine podcasts.
  • Map: opret indhold knyttet til bestemte steder.
  • Form: stil dine brugere spørgsmål, indsaml og analysér svarene.
  • Events: kommunikér om begivenheder, præsenteret efter dato.
  • Interne og eksterne annoncer: skab indtægter af dit indhold.
Tre startskærme fra indholdsapps: en lokalavis, en musikfestival med sine datoer og en byguide. Under hver telefon minder et ikon om emnet.
Tre indholdsapps, og tre måder at bekendtgøre emnet på allerede på den første skærm.

Servicevirksomheder

Freyja Spa til en skønhedssalon, Ivar Madsen til et indretningsbureau.

  • Blog: præsentér dine ydelser og behandlinger, eller byg en portfolio.
  • Contact: saml dine kontaktoplysninger på én enkelt side.
  • About: præsentér dig selv på en dedikeret side.
  • Form: lav den om til en anmodning om en aftale.
  • Loyalitetskort og Club Card: byg et loyalitetsprogram og øg engagementet.
To startskærme fra serviceapps: en spa og en indretningsarkitekt. Under hver telefon minder et ikon om faget.
To servicevirksomheder, hvis katalog lister behandlinger og projekter i stedet for produkter.

Uddannelse og organisationer

Paraigua til en skole, Dali Corp til en intern virksomhedsapp.

  • Blog: distribuér dit indhold til dit publikum.
  • Authentication: lad dine brugere oprette en profil.
  • Users: udgiv listen over dine brugere og deres profiler.
  • User groups: segmentér dit publikum, og servér indhold der er særligt for hver gruppe.
  • Chat: åbn et diskussionsrum i appen.
  • Events: kommunikér om dine begivenheder.
  • Form: stil dine brugere spørgsmål, og analysér svarene.
To startskærme: en skole og en virksomhed, den ene på fotoet af sin bygning, den anden på sit produkt. Under hver telefon minder et ikon om feltet.
En skole og en virksomhed: de samme sektioner, i tjeneste hos kurser og interne nyheder.

Kapitel 2At tilføje en sektion

Grebet er det samme for hver sektion, der beskrives i denne guide. Gå til My App Structure, klik på Add, og vælg derefter den type, du vil have.

Du kan tilføje op til 120 sektioner til en app, og det samme indhold kan optræde i flere sektioner på én gang. Det er dét, der gør organiseringen så fleksibel: en sektion er ikke en lukket skuffe, den er en visning ind på dit indhold.

Panelet til at tilføje en sektion, åbent på kataloget over tilgængelige typer: blog, galleri, video, sociale netværk, informationsside, kontakt, kort, kalender, podcasts, feed og formular, med et link til at vise flere. Nederst tælleren over allerede brugte sektioner. Til venstre viser forhåndsvisningen af appen menuen vokse.
Seksten sektioner brugt ud af hundrede og tyve: kataloget er længere end det, de fleste apps nogensinde får brug for.

Kapitel 3Bloggen

Hvad den bruges til

Blog-sektionen lader dig oprette indhold direkte fra back office, i form af artikler beriget med fotos og videoer.

For en indholdsskaber er det den centrale sektion. Men uanset dit projekt kommer du til at bruge den mindst én gang: det er den mest alsidige sektion af dem alle, og du vil se nedenfor, at den let bøjer sig til andre formål.

At oprette artikler. En artikel bygges op af tekstafsnit, som du føjer fotos, videoer, citater eller indlejringskode til.

Editoren åbner fra Content Add An article. De artikler, du allerede har udgivet, ligger i Content Content list All articles.

Når indholdet først er oprettet, fastlægger du:

  • den eller de sektioner, artiklen hører til
  • forfatteren
  • miniaturen
  • et resumé, som vil optræde i artikellisten
  • om kommentarer er slået til eller ej

SEO-fanebladet lader dig desuden udfylde metadataene og tilpasse URL'en.

Redigering af en artikel i back office. Til venstre dens titel og dens billede. Til højre redigeringspanelet åbent på sit første faneblad: listen over de kategorier, artiklen optræder i, med deres underkategorier, hver med et flueben; forfatteren; dato og klokkeslæt for udgivelsen; en boks til at fastgøre den øverst i listen; og den miniature, der bruges i lister.
En artikel kan ligge i flere kategorier på én gang: sådan fodrer én enkelt blog flere sektioner.

Tre måder at bruge den på

Dynamisk indhold. Det er dens første formål. I nyhedsappen River Daily dækker flere Blog-sektioner avisens forskellige redaktioner, nogle med kategorier til at forfine navigationen yderligere.

I artiklens detaljevisning vises udgivelsesdatoen, kommentarer er slået til, sammen med deling og favoritmarkering.

En præsentation af et katalog. Hos Freyja Spa præsenterer Blog-sektionerne salonens behandlinger. De tre anvendte sektioner er samlet inde i en menusektion.

Den interessante omvej ligger her: resuméfeltet, som er tænkt til en manchet, bruges til at vise hver behandlings varighed i listen. Den mest afgørende oplysning er derfor læsbar med ét blik, uden at siden åbnes.

Detaljevisningen gentager varigheden, prisen, beskrivelsen af behandlingen og et link til bookingformularen. Kommentarer er slået til og fungerer som en samling kundeanmeldelser.

Statisk indhold. Appen Portland er en rejseguide, og dens Blog-sektioner serverer tips til besøgende.

Her er der hverken forfatter eller udgivelsesdato: de oplysninger ville ikke føje noget til indhold, der ikke bliver forældet.

To sektioner i en nyhedsapp: til venstre en liste, hvor den første artikel vises stort og de næste i rækker; til højre en sektion toppet med en bjælke med underkategorier, som filtrerer den samme liste.
Den samme blog to gange: som simpel liste, og derefter kronet af rækken, der filtrerer underkategorierne.
Detaljerne for en artikel: billedet øverst, titlen, udgivelsesdatoen, og derefter teksten i lige afsnit. Nederst på skærmen kommentarer, deling og bogmærkning.
Nederst i artiklen tre greb til læseren: kommentere, dele og gemme til senere.
Startskærmen i en spa-app: tre behandlingskategorier, hver et billede i fuld bredde med sit navn lagt ind i.
Den samme sektion som kort for et spa: tre kategorier, tre billeder og ikke en artikel i sigte.
Listen over massager: hver behandling fylder en række med sit foto, sit navn og sin varighed.
Hver behandling er en artikel, og dens varighed tager publiceringsdatoens plads.
Detaljerne for en behandling: foto, navn, varighed, pris, og derefter en beskrivelse i kursiv og et bookinglink.
Og allernederst linket, der gør en læsning til en bestilling.
To skærme fra en byguide: til venstre listen over artikler, hver med sin kvadratiske miniature og sin titel, under sektionens header og over tab bar'en; til højre artiklen åben, dens billede, dens titel og dens tekst.
En byguide bygget på den samme sektion: artiklerne udløber ikke, så intet her bærer en dato.

Hvilket layout du skal vælge

Ni layouts er til rådighed til listen. De skelnes på tre kriterier: mængden af artikler du udgiver, styrken af dine visuelle elementer, og om du vil fremhæve en artikel eller ej.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

Uden et fremhævet element, hvor hver artikel har samme rang:

  • Enriched Classic, den universelle standard. Moderat rytme, vigtige metadata synlige. Tag det, når intet skubber dig mod et mere specialiseret layout.
  • Condensed, til stor redaktionel mængde, der skal skimmes hurtigt. Det visuelle kommer i anden række.
  • Visual Card, kort i fuld bredde i én enkelt kolonne: stort billede øverst, titel og manchet nedenunder. Til når det er billedet, der får folk til at klikke.
  • Checkerboard, til statisk indhold, med titler der læses i et »Z«-mønster.
  • Grid Visual, et gitter af ligestillede artikler. Kræver et visuelt element på hvert element.

Med én artikel fremhævet:

  • Une Condensed, én flagskibsartikel efterfulgt af mange kompakte elementer. Strømmen optager mængden.
  • Une Grid Visual, én fremhævet artikel og derefter et gitter. Kræver også et visuelt element på hvert element.
  • Une Story, flere »forsider« i en karrusel man stryger igennem, i stil med sociale netværk, med en kompakt strøm nedenunder. Til meget regelmæssig udgivelse med stærke visuelle elementer. Findes kun på artikler.

Særtilfældet:

  • Immersive, én artikel pr. skærm, dominerende billede og lodret navigation med stryg. Fremragende med stærke visuelle elementer, men det holder ikke til stor mængde.

Den regel, der går forud for alle de andre: har dine artikler ingen visuelle elementer, eller elementer af dårlig kvalitet, så udeluk Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story og Immersive. Tilbage står Condensed, hvis mængden er stor, ellers Enriched Classic.

Til artiklens detaljevisning lægger standardvisningen coverbilledet i heroen, og derefter titlen, datoen og forfatteren, handlingsbjælken (del, favorit, kommentér) og brødteksten. Har en artikel intet cover, kommer titlen først frem for at efterlade en tom hero.

En bemærkning, der gælder for hver sektion: selv om vi undertiden forbinder et layout med en type brug, er ingen af dem forbeholdt et bestemt felt. Det hele afhænger af dine behov og af din apps samlede design.

Ni mockups af bloglayouts, med deres navne. På den øverste række: Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. På den nederste række: Une Condensed, Une Grid Visual, Une Story, Immersive. Hver af dem viser, hvordan billedet, titlen og resuméet er stillet op i listen, og om den første artikel står for sig i forhold til de øvrige.
Ni layouts til én enkelt sektion, og de tre, der hedder Une, løfter den første artikel ud af mængden.

Kapitel 4Galleriet

Hvad det bruges til

Gallery-sektionen viser et galleri af billeder. Måden det virker på er minimal: du tilføjer dine fotos, du vælger layoutet, og så er det dét.

Tilføj dine fotos med knappen Add a photo eller ved at trække og slippe fra din computer. Upload af flere ad gangen er muligt, hvilket får arbejdet til at gå betydeligt hurtigere.

Den skærm findes i Content Content list All photos, og direkte tilføjelse i Content Add A photo.

Når dine billeder først er i back office, kan du give dem en titel og en beskrivelse, som vil optræde i detaljevisningen.

Panelet til at tilføje en sektion, med en pil der peger på galleriflisen blandt de tilgængelige typer. Til venstre forhåndsvisningen af festivalappen med sit program og sin tab bar.
Et galleri tilføjes som enhver anden sektion, fra det samme panel som bloggen og videoen.
Indholdslisten filtreret på et galleri, i gittervisning. Hvert foto danner et kort, hvor to opfordringer venter på en titel og en billedtekst, med en pil der peger på, hvor de skal stå. Under hvert kort udgivelsesstatussen, en skraldespand og et afkrydsningsfelt; øverst søgningen, filtrene og tilføj-knappen.
Hvert billede kan bære en titel og en billedtekst, og begge opfordringer bliver stående, indtil du skriver dem.

To måder at bruge det på

Livet på en skole. Appen Paraigua serverer oplysninger til elever og forældre og sigter mod at bygge et fællesskab omkring skolen. Dens Gallery-sektion udgiver regelmæssigt fotos fra livet på skolen. Det valgte layout lader titlen og beskrivelsen af hvert billede være synlige, så de kan sættes i sammenhæng.

En musikfestival. Appen Piu Piu opdateres hvert år til den nye udgave. Galleriet fungerer som et arkiv: det samler fotos fra tidligere år, hvilket holder mindet i live for stamgæsterne og fører festivalens ånd videre til de nye.

Et galleri i en skoleapp: fotoerne følger efter hinanden i fuld bredde, hver med sin dato og sin titel nedenunder.
Med titler og datoer læses galleriet som en nyhedsstrøm: billederne siger, hvad der skete, og hvornår.
Et festivalgalleri som en mosaik: fotoerne sidder to og to uden titler og svarer hinanden gennem deres farver.
Uden dem bliver det en stemningstavle, hvor billederne svarer hinanden gennem deres farver.

Hvilket layout du skal vælge

Tre layouts, som svarer på tre forskellige hensigter.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

  • Visual Card, standarden. Én kolonne, kort i fuld bredde, og frem for alt en titel og en billedtekst pr. foto. Det er det eneste af de tre, der lader dig sætte dine billeder i sammenhæng.
  • Square, et gitter med to kolonner af kvadrater, uden titler. Til et meget kompakt visuelt arkiv, når helhedens sammenhæng betyder mere end hvert foto taget for sig.
  • Ratio, en mosaik med to kolonner, som respekterer hvert billedes oprindelige proportioner. Til en portfolio med blandede formater.

Med andre ord: har dine fotos brug for en forklaring, så tag Visual Card. Taler de for sig selv, og er der mange af dem, så Square eller Ratio, alt efter om de er ensartede eller ej.

Tre mockups af gallerilayouts, med deres navne: Visual Card, hvor hvert foto fylder et kort med sin titel og sin billedtekst; Square, et gitter af kvadratiske miniaturer; Ratio, et gitter der beholder hvert fotos oprindelige proportioner.
Tre layouts: kun det første giver plads til en titel og en billedtekst, de to andre er gitre.

Kapitel 5Videoer

Hvad den bruges til

Video-sektionen serverer videoer i din app, uanset om de allerede er hostet på et eksternt site eller ej.

Tilføj dine videoer ved at uploade dem fra din computer eller ved at indtaste deres indlejringskode, hvis de allerede bor et andet sted. Som ved bloggen vælger du derefter visningssektionerne, forfatteren, udgivelsesdatoen, resuméet og om kommentarer er slået til.

Editoren åbner fra Content Add A video.

Du kan endelig give siden struktur ved om nødvendigt at tilføje tekstafsnit, fotos og citater.

Det samme panel til at tilføje en sektion, hvor pilen denne gang peger på videoflisen. Til venstre viser forhåndsvisningen af virksomhedsappen en artikel.
Videosektionen hedder Web TV og ligger mellem galleriet og de sociale netværk.
Oprettelse af en video i back office: i midten et område til at slippe filer, som angiver den maksimale størrelse og tilbyder enten at uploade en fil eller at indsætte en indlejringskode, med listen over accepterede formater. Til højre kategorien, forfatteren, datoen, fastgørelsen øverst i listen, et resumé og kontakten til kommentarer.
Enten din egen fil, op til 500 MB, eller en indlejringskode: sektionen tager begge uden at skifte form.

To måder at bruge den på

En lokalavis. River Daily har ingen tv-kanal, men sender faste programmer på YouTube, heriblandt et dagligt. De er samlet i appens Video News-sektion.

En intern virksomhedsapp. Hos Dali Corp serverer Video-sektionen onlinekurser lavet af medarbejdere til medarbejdere. Ordningen gør to ting på én gang: den samler personalet om et fælles projekt, og den giver dem gratis uddannelse.

En videoliste i en nyhedsapp: hver række bærer sin miniature, markeret med en afspilningsknap, og ved siden af den sin titel eller sin dato.
Rækker med lille miniature, hvor en video uden titel falder tilbage på sin dato.
En videoliste i en virksomhedsapp: miniaturerne fylder hele bredden, deres varighed lagt ind i et hjørne, med udgivelsesdatoen og titlen nedenunder.
I fuld bredde, med spilletiden lagt ind i et hjørne: læseren ved, hvad det koster, før der trykkes på play.

Hvilket layout du skal vælge

Tre layouts til listen.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

  • Enriched, standarden. Kompakt liste, lille miniature i 16:9, metadata i forgrunden (titel, dato, forfatter, beskrivelse). Det er det rigtige valg til stor mængde, der skal skimmes.
  • Une Condensed, én fremhævet video vist stort med sin manchet, og derefter en kompakt strøm nedenunder. Det er »videoavisen«, med dagens forside. Holder til moderat til stor mængde.
  • Visual Card, store kort i fuld bredde med rammen i 16:9 og afspilningsknappen i midten. Tag det, når det er miniaturen, der får folk til at klikke.

Til detaljevisningen fylder videoafspilleren heroen, efterfulgt af titlen, datoen, handlingerne, beskrivelsen og, hvis du indtaster en, adressen.

Tre mockups af videolayouts, med deres navne: Enriched, en liste hvor miniaturen sidder til venstre for titlen; Une Condensed, som sætter den første video for sig, stort, over de næste; Visual Card, hvor hver video fylder sit eget kort.
Tre layouts, og spilletiden vises kun på to af dem.

Kapitel 6Podcasts

Hvad den bruges til

Podcasts-sektionen serverer lyd i din app.

Tilføj din lyd ved at uploade den fra din computer. Som ved bloggen vælger du visningssektionerne eller kategorierne, forfatteren, datoen, resuméet og kommentarer. Du kan også tilføje eksterne links til at købe nummeret.

Editoren åbner fra Content Add A sound.

Siden får derefter struktur med tekstafsnit, fotos, videoer, indlejringskode og citater.

Panelet til at tilføje en sektion, med pilen der peger på podcastflisen. Til venstre forhåndsvisningen af skoleappen, hvis menu vises som et gitter af ikoner.
To felter bærer lyd, og dette er sektionen, der huser dine egne lydfiler.
Oprettelse af en episode i back office: i midten et titelfelt og et område til at slippe lydfilen. Til højre kategorien valgt fra træet over kurser, forfatteren, datoen, fastgørelsen, to felter til links til butikkerne og kontakten til kommentarer.
Episoden arkiveres under en time, og to felter peger mod de platforme, hvor podcasten også er udgivet.

To måder at bruge den på

En nyhedsapp. River Daily sender også en radiostation live. Podcasts-sektionen gør bestemte programmer varigt tilgængelige. Datoer vises i listen for at hjælpe lytterne med at finde det program, de er ude efter. Detaljesiden bliver bar, uden yderligere oplysninger.

En skole. Paraigua havde brug for at levere sine lektioner på afstand. De præsenteres som en liste, inddelt i kategorier efter fag.

Den idé, der er værd at holde fast i, ligger på detaljesiden: en udskrift af lektionen udgives dér som afsnit og billeder. Eleven følger teksten og illustrationerne, mens lydudgaven spiller, hvilket gør lektionen brugbar i meget forskellige situationer.

To skærme fra en nyhedsapp: til venstre listen over episoder, hver med sin titel, sin dato og sin miniature; til højre afspilleren åben, med coveret, datoen, titlen, fremdriftslinjen lagt over en lydkurve og de tre afspilningsknapper.
Afspilleren bliver i appen: ingen fane at forlade, og bølgeformen løber bag statuslinjen.
En liste over episoder i en skoleapp, under en bjælke med underkategorier, der adskiller fagene. Hver række bærer sin miniature og sin titel.
Den samme sektion til en skole, hvor rækken med underkategorier adskiller fagene.
Detaljerne for en episode: cover, dato, titel, afspiller, og derefter den skrevne lektion, der følger lyden, i afsnit med titler brudt op af et foto.
Under afspilleren den skrevne lektion: episoden lyttes til eller læses, aldrig kun det ene.

Hvilket layout du skal vælge

To layouts, og det kriterium, der adskiller dem, er miniaturens størrelse. Begge indlejrer afspilleren i cellen, med afspilningsknappen og varigheden: det er altså ikke afspilningen, der skiller dem ad.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

  • Classic Play, standarden. Mindre miniature, tekst og metadata dominerende. Det er layoutet til lange episodelister og det til radiomønstret.
  • Enriched, større miniature, som sætter coverbilledet frem. Vælg det, når coverbilledet er en del af dit indholds identitet, ved moderat mængde.

Til detaljevisningen fungerer coverbilledet som et omsluttende cover, med lydafspilleren, titlen, handlingerne og brødteksten.

To mockups af podcastlayouts, med deres navne: Classic Play, hvor hver episode stiller sin miniature, sin tekst og sin afspilningsknap op; Enriched, som giver mere plads til miniaturen og resuméet.
To layouts, og begge holder afspilningsknappen og spilletiden inde i selve listen.

Kapitel 7Live

Hvad den bruges til

Sektionerne ovenfor udgiver optaget indhold, som er tilgængeligt, når din lytter beslutter det. Live gør det modsatte: den sender i realtid, og det er aftalen, der gør begivenheden.

Tre byggeklodser, som kombineres efter det, du sender.

  • Live audio er grundklodsen: sektionen findes, uden at der tilføjes noget. Du indtaster adressen på din stream, og appen sender den. IceCast-encodere understøttes indbygget, hvilket dækker det store flertal af radioopsætninger.
  • Live video gør det samme for en billedudsendelse. Det er en udvidelse, og dens side viser den pris, der gælder for din app.
  • Live+ er et lag oven på live audio, som også kommer med en udvidelse. Det viser din streams metadata ved siden af afspilleren: nummeret der spiller, værten, programmet. Uden det ser din lytter en afspilningsknap og intet andet; med det ser vedkommende, hvad der lyttes til.

To egenskaber er værd at kende, før du beslutter dig.

Lyden stopper ikke, når din lytter navigerer. Afspilleren følger brugeren fra skærm til skærm og bliver ved med at spille med skærmen slukket. I praksis kan folk lytte til din station, mens de læser dine artikler, hvilket helt ændrer måden, en radioapp bruges på.

Du kan åbne flere live-sektioner. En radiostation med to kanaler, en festival med to scener, et sogn med to gudstjenester: hver stream har sin egen sektion.

En sidste forskel fra sektionerne ovenfor: live har kun én præsentation. Der er ikke noget layout at vælge.

To måder at bruge den på

En lokalradio. River Dailys radio, nævnt i forrige kapitel, bor i en Live-sektion. Podcastene beholder programmerne on demand, live-sektionen bærer stationen. Live+ viser nummeret der spiller og dets kunstner, hvilket giver en lytter, der kommer til midt i et program, noget at placere sig efter.

En festival. Piu Piu sender fra sin scene live gennem alle fire dage. Det publikum, der ikke kunne komme, følger aftenen, og stamgæsterne finder stemningen igen hjemmefra. Live arbejder side om side med Events-sektionen, som bliver ved med at være appens hovedsektion: programmet annoncerer, live sender.

To detaljer på den skærm er værd at pege på. Sleep mode stopper afspilningen efter en valgt forsinkelse, hvilket tæller på en station, folk lytter til om aftenen. Og afspilleren overtager appens farver og typografi: det er den samme skærm som hos River Daily, og alligevel ligner det ikke det samme produkt.

River Dailys liveafspiller: cirkulært coverbillede, afspilningsknap, forløbet tid, og derefter navnet på den optrædende og titlen på nummeret vist af Live+. Nederst minder en vedvarende miniafspiller om, hvad der spiller.
Uden Live+ ville lytteren kun se afspilningsknappen.
Den samme liveskærm hos Piu Piu, i festivalens mørke og orange farver, med en Sleep mode-knap øverst til højre og den vedvarende miniafspiller nederst.
Samme skærm som ovenfor, to identiteter: afspilleren følger appens design.

Kapitel 8Kort

Hvad den bruges til

Map-sektionen opretter geolokaliserede punkter vist på et kort. Dine brugere får øje på stederne og får rutevejledning til dem.

For at oprette et punkt indtaster du dets adresse eller dets koordinater på redigeringssiden.

Redigeringssiden åbner fra Content Add A location.

Derefter fylder du beskrivelsen ud med tekst, fotos, videoer, citater eller indlejringskode. Højrepanelet lader dig vælge visningssektionerne og tilføje handlingsknapper:

  • en opkaldsknap
  • en mailknap

Endelig kan du tilføje et eksternt link og tilpasse formen og farven på det ikon, der repræsenterer punktet.

Panelet til at tilføje en sektion, med pilen der peger på kortflisen. Til venstre forhåndsvisningen af byguiden, med sin søgning og sine fliser.
Kortet er en indholdssektion som de andre, ikke et modul lagt oven på en side.
Oprettelse af et sted i back office: dets navn, dets adresse, dets koordinater, og til højre kortet der placerer dem. Nedenunder en teksteditor til at beskrive det. I højrepanelet de kategorier, det optræder i, et telefonnummer og en mail der bliver til handlingsknapper, en webadresse, og derefter valget af markørens form og farve.
Også markøren vælges her: fem former og en farve, så to kategorier aldrig ligner hinanden.

Tre måder at bruge den på

En skoles campus. Paraigua er spredt over flere bygninger. Nyankomne, både elever og forældre, havde brug for at kunne genkende dem med ét blik og få rutevejledning.

Fire steder blev oprettet, præsenteret først som en liste. Map-visningen viser alle punkterne og afstandene. Klikker man på et punkt, får man et resumé og adgang til detaljerne, hvor rutevejledningsknappen er det vigtigste, suppleret af en beskrivelse og et billede.

En virksomhed med flere adresser. Dali Corp har kontorer i flere amerikanske byer og går op i sin virksomhedskultur. En Map-sektion præsenterer de tre kontorer.

Detaljerne er fyldigere end hos Paraigua: fotos beskriver kontoret og dets stemning, og rutevejledningsknappen sidder under fotoerne. Kortet er ikke kun der for at orientere folk, det er der for at få de andre adresser til at eksistere for dem, der aldrig kommer.

En rejseguide. I appen Portland er kortet produktets hjerte. Flere Map-sektioner præsenterer byens steder, sorteret efter type.

Detaljerne rummer en fuld beskrivelse, fotos hvor der er brug for det, rutevejledningsknappen fremhævet, og et eksternt link til hvert steds website, når det har et.

Tre skærme fra en skoleapp: listen over steder, hver med sit foto, sit navn og sin adresse; kortet, hvor markørerne breder sig, og en af dem åbner sin etiket; detaljerne for et sted, med sit foto, sin adresse, en rutevejledningsknap, listen over sine ydelser og et kort nederst.
Liste, kort, detalje: tre visninger af de samme steder, og en rund knap til at skifte imellem dem.
Detaljerne for et kontor i en virksomhedsapp: det indledende foto, navnet, adressen, en indledende linje, og derefter fire fotos af lokalerne, rutevejledningsknappen og kortet.
Et kontor præsenteret som en artikel, med ruteknappen og kortet gemt til allersidst.
To skærme fra en byguide: til venstre listen over steder, under en bjælke med underkategorier, med en rund knap der skifter til kortet; til højre kortet i fuld skærm, dets markører og den knap der fører tilbage til listen.
Underkategorierne filtrerer listen og kortet på én gang: markørerne følger den åbne fane.
Detaljerne for et turistmål: foto, navn, adresse, rutevejledningsknap, og derefter en beskrivelse der skifter mellem afsnit, en punktopstillet liste og fotos, en knap til websitet, og kortet nederst.
Et sted kan rumme lige så meget som en artikel: afsnit, en liste, billeder og sit eget udgående link.

Hvilket layout du skal vælge

Tre layouts, og det virkelige kriterium er, hvor meget plads du giver selve kortet.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

  • Enriched, standarden. Kompakt liste, lille miniature, titel og adresse, flere steder pr. skærm. Kortet er skjult bag en knap. Det er katalogets layout, til når brugeren allerede ved, hvad vedkommende leder efter.
  • Visual, stor dominerende miniature, få steder pr. skærm. Kortet bliver skjult bag en knap. Til et galleri af steder, hvor det er billedet, der tiltaler.
  • Split Enriched, det interaktive kort fylder toppen af skærmen, og listen vises nedenunder. Vælg det, når det rumlige forhold mellem stederne bærer mening, altså når kortet er emnet.

Du bestemmer også, om der skal vises en oversigtsliste hen over kortet eller ej. Gå til My App Structure, åbn Map-sektionen, og derefter visningen med punktlisten: indstillingen findes i indholdsområdet, under »Map view«.

Til et steds detaljevisning får du fotoet, navnet, adressen, rutevejledningsknappen, et galleri og det placerede kort.

Tre mockups af kortlayouts, med deres navne: Enriched, en liste hvor hvert sted bærer sin markør og sin adresse; Visual, som giver hvert sted en stor miniature; Split Enriched, som lægger kortet øverst og listen nedenunder.
Tre layouts, og kun det sidste viser kortet og listen på den samme skærm.
Designindstillingerne for en kortsektion. Markeret med en cirkel styrer to kontakter, om listen vises, og om den åbner før kortet. Nedenunder baggrundsfarven, kanten, gennemsigtigheden, hvad hver række viser, og titlens typografi. Til venstre anvender forhåndsvisningen indstillingerne med det samme.
To kontakter afgør, om listen overhovedet findes, og om den kommer før kortet.

Kapitel 9Formularen

Hvad den bruges til

Form-sektionen indsamler oplysninger fra dine brugere gennem felter af forskellige typer.

Dine formularer er listet i Content Content list All forms. Åbner du en, vises panelet til at redigere formularen til højre, og dets faneblad med felter bærer paletten nedenunder.

Seksten felttyper er til rådighed:

  • enkelt linje tekst
  • afsnit med tekst
  • flere valg
  • navn
  • dato
  • mail
  • eksternt link
  • upload af fil
  • tal
  • afkrydsningsfelter
  • rullemenu
  • adresse
  • klokkeslæt
  • telefon
  • pris
  • sektionsskift

Klik på den type, du vil have, og den vises i redigeringsområdet, hvor du tilpasser dens indhold.

Husk også at berige formularen med fotos, videoer, tekst, citater eller indlejringskode: en bar formular får færre svar end en formular, der forklarer, hvad den er ude efter.

Panelet til at tilføje en sektion, med pilen der peger på formularflisen, i et katalog der er blevet længere. Til venstre forhåndsvisningen af indretningsarkitektens app, med menuen åben.
Længere nede i det samme katalog, forbi sektionerne der udgiver, kommer dem der samler ind.
Redigering af en formular: til venstre dens titel og en illustration; til højre paletten af tilgængelige felter, en enkelt linje tekst, et tal, et afsnit, afkrydsningsfelter, et enkelt valg, en rullemenu, et navn, en adresse, en dato, et klokkeslæt, en mail, en telefon, et website, en pris, en fil og et sektionsskift.
Seksten felttyper, heriblandt en adresse og en fil: formularen bygges med klik, aldrig med kode.

To måder at bruge den på

En serviceapp. Hos Ivar Madsen, indretningsarkitekt, håndterer formularen anmodninger om aftaler og tilbud.

Siden har tre mål: at præsentere tilbuddet, at lære den kommende kunde at kende, at give mulighed for en første kontakt. Et billede og en forklarende tekst sætter rammen, og derefter går formularen lige til sagen:

  • et navnefelt og et mailfelt til at identificere kunden
  • to afsnitsfelter til at udtrykke behov og projekt
  • et datofelt til at angive ledige tidspunkter

En virksomhedsapp. Hos Dali Corp kører HR regelmæssigt undersøgelser for at måle medarbejdernes trivsel og indsamle deres holdninger.

Formularen er bevidst meget kort for at få svarprocenten så højt op som muligt. En indledende tekst og derefter fem felter:

  • et navnefelt og et teamfelt til at identificere medarbejderen
  • to felter med flere valg til at svare på ledelsens spørgsmål
  • et afsnitsfelt til at tale frit
En kontaktformular scrollet fra top til bund: titlen, et foto, fire blokke der forklarer, hvad der bliver spurgt om, og derefter felterne der skal udfyldes, navn, mail, ejendommens adresse med sine underfelter, beskrivelse af projektet, foretrukken stil og ledige tidspunkter med en datovælger. En sendeknap afslutter siden.
Fire blokke forklarer, hvad der vil blive spurgt om, før der spørges om noget: formularen begynder med at berolige.
En intern undersøgelse i en virksomhedsapp: efter indledningen et navnefelt, en rullemenu med team, to spørgsmål med enkelt valg og et frit felt, og derefter sendeknappen.
Den samme sektion som intern undersøgelse, hvor spørgsmålene er lukkede og det sidste ikke er det.

At bruge svarene til noget

Gå til Content Content list. Hold musen over den pågældende Form-sektion, og klik på det link, der viser dens indhold. Dér finder du listen over modtagne svar.

Klikker du på en række, vises én brugers svar, som du kan eksportere som en .csv gennem Export data. Den samme knap eksporterer alle svarene fra listevisningen.

Den eksport er dét, der gør sektionen virkelig nyttig: uden den læser du svar ét for ét; med den analyserer du dem som helhed.

En formulars svar i back office, som en tabel: datoen, formularens felter som kolonner, og den vedhæftede fil. En skraldespand afslutter hver række. Markeret med en cirkel af pilen, øverst til højre, eksporten af data og vejen tilbage til at redigere formularen.
Svarene lander i en tabel, du kan eksportere: intet bliver låst inde i appen.

Kapitel 10Indsendt indhold

Hvad den bruges til

Submission-sektionen lader dine brugere sende dig indhold fra appen, som tekst, fotos eller videoer. Det hele lander i dit back office.

Det, du modtager, lander i Content Content list All sent in content.

Der er intet at sætte op, medmindre du vil begrænse de typer indhold, der tages imod. I det tilfælde skal du tilføje udvidelsen API Access og redigere sektionens JSON. Det er en enkel handling, og der findes hjælp trin for trin i dit back office.

Panelet til at tilføje en sektion, med pilen der peger på flisen til indsendt indhold. Til venstre forhåndsvisningen af indretningsarkitektens app, med menuen åben.
Indsendelsessektionen er den, der lader dine læsere skrive i appen i stedet for kun at læse den.

Tre måder at bruge den på

En intern idékasse. Hos Dali Corp åbnede ledelsen et rum, hvor medarbejderne når som helst kan efterlade deres bemærkninger og anbefalinger. Det modtagne indhold udgives ikke: det analyseres for at forbedre arbejdsforholdene.

En festivals minder. Piu Piu satser på sit fællesskab og vil vise festivalens virkelige stemning. Sektionen Your Memories samler deltagernes fotos og videoer. Afsendelse af tekst blev slået fra.

Læsernes tip. River Daily vil være først med de lokale nyheder. En åben sektion lader læserne sende deres oplysninger videre, som journalisterne bearbejder, før de udgives.

De tre tilfælde viser tre forskellige ordninger: indhold der aldrig bliver udgivet, indhold der udgives næsten som det er, og indhold der tjener som råmateriale til redaktionelt arbejde. Afgør, hvad dit er, før du åbner sektionen, for det ændrer, hvad du annoncerer over for dine brugere.

To skærme fra en virksomhedsapp: til venstre menuen, hvor et punkt inviterer medarbejderne til at bidrage; til højre skærmen til at slå op, som tilbyder tre greb, et billede, en video eller en tekst, hver med sin vejledning.
Tre greb tilbudt en medarbejder: et billede, en video eller en tekst, og ikke mere at lære.
Den samme mekanisme i en festivalapp: menuen inviterer gæsterne til at slå deres minder op, og skærmen til at slå op beholder to greb, billede og video, hver på sin egen farvede baggrund.
Den samme skærm til en festival, skåret ned til to greb og klædt i appens egne farver.
I en nyhedsapp: menuen bærer to punkter til bidrag, og skærmen til at slå op inviterer læserne til at fortælle om deres bys nyheder ved at sende et billede, en video eller en tekst.
På en redaktion bliver det en tiplinje, og teksten siger, hvem der læser det, der kommer ind.

At håndtere det, du modtager

Gå til Content Content list, hold musen over din Submission-sektion, og klik på det link, der viser dens indhold.

Du håndterer udgivelsen i samlet flok gennem afkrydsningsfelterne til højre for hver række eller sag for sag ved at åbne et element. Du kan altså redigere og derefter udgive med ét klik det, dine brugere har sendt dig.

Indsendt indhold i back office: hver række bærer det indsendte billede, en note om hvilken app det kom fra, forfatterens mailadresse, datoen og en statuschip der markerer det som indsendt og afventende godkendelse. En skraldespand afslutter hver række.
Alt kommer ind som indsendt: intet når appen, før back office godkender det.

Kapitel 11Begivenheder

Hvad den bruges til

Events-sektionen præsenterer dit indhold som daterede begivenheder.

For at oprette en begivenhed vælger du først dens dato og dens varighed. Muligheden »hele dagen« sparer dig for at indtaste et tidsrum. Derefter kan du knytte en adresse til den.

Editoren åbner fra Content Add An event.

Siden bygges op af afsnit, med tekst, fotos, videoer, citater og indlejringskode.

Højrepanelet lader dig vælge visningssektionerne eller kategorierne, tilføje handlingsknapper (ring op, mail), et eksternt link og en knap til at købe billetter.

Panelet til at tilføje en sektion, med pilen der peger på kalenderflisen. Til venstre forhåndsvisningen af festivalappen, med programmet og sin tab bar.
Kalendersektionen daterer sit indhold i stedet for at udgive det: en begivenhed har en begyndelse og en slutning.
Redigering af en begivenhed i back office: dens titel, dens start- og slutdato, en boks til hele dagen, og derefter stedet med sine koordinater og kortet der finder det. Til højre kategorien, en telefon og en mail som handlingsknapper, en webadresse, et link til billetsalg og listens miniature.
Billetlinket har sit eget felt, adskilt fra hjemmesiden: begivenheden er lavet til at blive solgt.

To måder at bruge den på

En intern virksomhedsapp. Dali Corp bruger to Events-sektioner. Den første kommunikerer om interne begivenheder: workshops, fredagsbarer, åbent hus. Den anden deler virksomhedens roadmap, så alle kender fristerne og de igangværende projekter.

Den anden anvendelse er den, der lettest lader sig overføre: sektionen med begivenheder er ikke forbeholdt arrangementer, man deltager i, den tjener også til at gøre en kalender synlig.

I detaljevisningen vises adressen og rutevejledningsknappen, når de er relevante.

En festival. Hos Piu Piu er Events appens hovedsektion: det er festivalprogrammet.

Detaljerne er komplette: adresse, dato, knap til at købe billetter, beskrivelse, link til kunstnernes website, opkaldsknap, mailknap, rutevejledningsknap, sammen med favoritmarkering og deling.

To skærme fra en virksomhedsapp: til venstre listen over begivenheder, hver med sin datochip, sit billede og sit klokkeslæt eller sit sted; til højre detaljerne for en begivenhed, med sit foto, sit sted, sin dato, en rutevejledningsknap og kortet.
Datomærket står for sorteringen: læseren opfanger måneden, før titlen læses.
Detaljerne for en koncert i festivalappen: fotoet, bandets navn, stedet, datoen, en billetknap, præsentationen, og derefter fire knapper, website, telefon, rutevejledning og mail, og kortet nederst.
Billetkøbet ligger over præsentationen, og de fire måder at nå frem på under den.

Hvilket layout du skal vælge

To layouts, som svarer til to modsatte holdninger.

Layoutet ændres i My App Structure : åbn menuen for den pågældende sektion, og derefter Edit the design.

  • Classic, standarden. Begivenhederne er grupperet under dagsbannere, med en lille miniature, klokkeslættet, titlen og stedet, flere pr. skærm. Det er den kalender, man gennemser efter dato, når »hvornår« og »hvor« betyder mere end billedet.
  • Classic Bullet, hver begivenhed i en stor dominerende miniature med en datopille, en eller to pr. skærm. Det er udstillingsvinduet, når det er begivenhedens plakat, der får folk til at få lyst til at komme.

Valget koger altså ned til ét spørgsmål: kommer dine brugere for at slå op i et program eller for at blive fristet?

Til en begivenheds detaljevisning får du coverbilledet, titlen, adressen, datoerne, beskrivelsen, rutevejledningen og kortet over stedet.

To mockups af kalenderlayouts, med deres navne: Classic, en liste over begivenheder grupperet efter dag, hver med sin miniature og sit sted; Classic Bullet, som stiller datoerne op som chips i siden og giver hver begivenhed et stort billede.
To layouts, og det andet gør datoen til et mærke langs kanten.

Kapitel 12CMS'et og forbindelserne

Hvad CMS'et giver

Et CMS (content management system) lader dig oprette og formatere dit indhold fra et back office med henblik på at udgive det. Hos GoodBarber er det platformens hjerte.

Ud over oprettelsen giver det dig:

  • Styring af indholdets status. Published, In stock eller Draft, så du kan styre det, du udgiver.
  • Planlagt udgivelse. Du fastsætter dag og klokkeslæt for offentliggørelsen på forhånd, hvilket især betyder noget for nyheds- eller blogapps.
  • Inddeling i kategorier. Et ubegrænset antal kategorier til at sortere en sektions indhold, altså et ekstra navigationsniveau uden at overbelaste din menu.
  • Sortering. Efter skrivedato, alfabetisk eller efter antal kommentarer.
  • Central styring. Et dashboard samler alt det indhold, der er oprettet i CMS'et, med filtre til at finde og håndtere elementer i samlet flok.
  • Avanceret tilpasning af metadataene. Den tjener både til at opmuntre til læsning og til din SEO, og du beholder kontrollen med, hvordan det vises.
  • Fremhævning af indhold. Foretrukken visning af det indhold, du vælger, fra dets redigeringsside.
  • Avanceret tilpasning af designet. Hvert elements design kan sættes uafhængigt af appens generelle indstillinger.

Hvad forbindelserne giver

Producerer du allerede indhold andre steder, behøver du ikke at udgive det igen. Mere end 30 forbindelser udviklet af GoodBarber henter det ind i din app og formaterer det, så det respekterer appens visningsstandarder og design.

Et cachesystem sikrer indlæsningstider og stabilitet uden at overbelaste dine servere. Dine billeder skaleres, komprimeres og caches af GoodBarber.

Den afgørende fordel er synkroniseringen: indhold, der produceres på din eksterne kilde, bliver ved med at være opdateret i appen, med en visning tilpasset mobil, tablet, bærbar og stationær computer. Du skal aldrig udgive to gange igen.

Listen over forbindelser

Hver forbindelse fodrer en bestemt indholdstype, og det indhentede indhold opfører sig derefter, som om det var oprettet i CMS'et.

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

Fotos: Flickr

Videoer: YouTube, Vimeo, RSS

Lyd og podcasts: Ausha, Spreaker, Simplecast, Spotify for Podcasters, podcast-feed, RSS

Begivenheder: iCal og vCalendar, RSS

Kort: KML, RSS

Egne forbindelser. Er din kilde ikke dækket, producerer du et feed i det format, den valgte indholdstype forventer, og du oplyser dets adresse. Det skræddersyede arbejde begrænser sig til at producere feedet: visningen, layoutene, søgningen og metadataene forbliver platformens. Detaljeret dokumentation beskriver det forventede format.

Intet tvinger dig til at vælge mellem de to: du kan blande internt indhold, oprettet i CMS'et, og eksternt indhold hentet ind af forbindelserne, i én og samme app.