Innholdsapp

Hvilket innhold til appen din

«Innholdsapp» er et vidt begrep. Mellom seksjonene og funksjonene som er tilgjengelige i back office kan du dekke nesten ethvert prosjekt, uansett felt.

Denne veiledningen går gjennom de ni innholdsseksjonene, med, for hver av dem, hva den tillater, hvordan du bruker den, og hvilken layout du bør velge når det finnes et valg. Den avsluttes med CMS-et og koblingene, som avgjør et grunnleggende spørsmål: å lage innholdet ditt i GoodBarber, eller å hente inn innholdet du allerede produserer andre steder.

Kapittel 1De sju demoappene

Eksemplene nedenfor hviler på sju apper, fordelt på tre familier. Finn den som ligner på prosjektet ditt, og tilpass deretter.

Apper for innholdsskapere

River Daily for en lokalavis, Piu Piu for en festival, Portland for en reiseguide.

  • Blogg: lag artikler fritt, illustrert med bilder og videoer.
  • Galleri: vis bildene dine i flere presentasjoner.
  • Video: del det filmede innholdet ditt.
  • Lyd: publiser podkastene dine.
  • Kart: lag innhold knyttet til bestemte steder.
  • Skjema: still brukerne dine spørsmål, samle inn og analyser svarene.
  • Arrangementer: kommuniser om arrangementer, presentert etter dato.
  • Interne og eksterne annonser: skap inntekter fra innholdet ditt.
Tre oppstartsskjermer fra innholdsapper: en lokal dagsavis, en musikkfestival med datoene sine, og en byguide. Under hver telefon minner et ikon om emnet.
Tre innholdsapper, og tre måter å kunngjøre temaet på allerede på den første skjermen.

Tjenestevirksomheter

Freyja Spa for en skjønnhetssalong, Ivar Madsen for et interiørbyrå.

  • Blogg: presenter tjenestene og behandlingene dine, eller bygg en portefølje.
  • Kontakt: samle kontaktopplysningene dine på én enkelt side.
  • Om: presenter deg selv på en egen side.
  • Skjema: gjør det om til en timebestilling.
  • Lojalitetskort og Club Card: bygg et lojalitetsprogram og øk engasjementet.
To oppstartsskjermer fra tjenesteapper: et spa og en interiørdekoratør. Under hver telefon minner et ikon om bransjen.
To tjenestebedrifter, der katalogen lister behandlinger og prosjekter i stedet for produkter.

Utdanning og organisasjoner

Paraigua for en skole, Dali Corp for en intern bedriftsapp.

  • Blogg: distribuer innholdet ditt til publikummet ditt.
  • Autentisering: la brukerne dine opprette en profil.
  • Brukere: publiser listen over brukerne dine og profilene deres.
  • Brukergrupper: segmenter publikummet ditt og server innhold som er spesifikt for hver gruppe.
  • Chat: åpne et diskusjonsrom i appen.
  • Arrangementer: kommuniser om arrangementene dine.
  • Skjema: still brukerne dine spørsmål og analyser svarene.
To oppstartsskjermer: en skole og en bedrift, den ene på bildet av bygningen sin, den andre på produktet sitt. Under hver telefon minner et ikon om feltet.
En skole og en bedrift: de samme seksjonene, i tjeneste for kurs og interne nyheter.

Kapittel 2Å legge til en seksjon

Grepet er det samme for hver seksjon som er beskrevet i denne veiledningen. Gå til My App Structure, klikk på Add, og velg så typen du vil ha.

Du kan legge til opptil 120 seksjoner i en app, og det samme innholdet kan dukke opp i flere seksjoner samtidig. Det er dette som gjør organiseringen så fleksibel: en seksjon er ikke en forseglet skuff, den er en visning inn i innholdet ditt.

Panelet for å legge til en seksjon, åpent på katalogen over tilgjengelige typer: blogg, galleri, video, sosiale nettverk, informasjonsside, kontakt, kart, kalender, podkaster, strøm og skjema, med en lenke for å vise flere. Nederst telleren over seksjoner som allerede er brukt. Til venstre viser forhåndsvisningen av appen menyen vokse.
Seksten seksjoner brukt av hundre og tjue: katalogen er lengre enn det de fleste apper noen gang trenger.

Kapittel 3Bloggen

Hva den er til for

Blogg-seksjonen lar deg lage innhold direkte fra back office, i form av artikler beriket med bilder og videoer.

For en innholdsskaper er det den sentrale seksjonen. Men uansett hva prosjektet ditt er, kommer du til å bruke den minst én gang: det er den mest allsidige seksjonen av alle, og du vil se nedenfor at den lett bøyer seg til annen bruk.

Å lage artikler. En artikkel bygges opp av tekstavsnitt, som du legger bilder, videoer, sitater eller innbyggingskode til.

Editoren åpnes fra Content Add An article. Artikler du allerede har publisert ligger i Content Content list All articles.

Når innholdet er laget, setter du:

  • seksjonen eller seksjonene artikkelen hører til
  • forfatteren
  • miniatyrbildet
  • et sammendrag, som vil dukke opp i artikkellisten
  • om kommentarer er slått på eller ikke

SEO-fanen lar deg også fylle ut metadataene og tilpasse adressen.

Å redigere en artikkel i back office. Til venstre tittelen og bildet. Til høyre redigeringspanelet åpent på den første fanen sin: listen over kategoriene artikkelen dukker opp i, med underkategoriene sine, hver mulig å krysse av; forfatteren; publiseringsdatoen og klokkeslettet; en boks for å feste den til toppen av listen; og miniatyrbildet som brukes i lister.
En artikkel kan ligge i flere kategorier samtidig: slik mater én enkelt blogg flere seksjoner.

Tre måter å bruke den på

Dynamisk innhold. Det er hovedformålet. I nyhetsappen River Daily dekker flere Blogg-seksjoner de ulike avdelingene i avisen, noen med kategorier for å finpusse navigasjonen ytterligere.

I artikkeldetaljene vises publiseringsdatoen, kommentarer er slått på, i tillegg til deling og favorittmerking.

En katalogpresentasjon. Hos Freyja Spa presenterer Blogg-seksjonene behandlingene til salongen. De tre seksjonene som brukes er samlet inne i en menyseksjon.

Den interessante omveien ligger her: sammendragsfeltet, som er ment for en ingress, brukes til å vise varigheten på hver behandling i listen. Den mest avgjørende opplysningen er dermed lesbar i ett blikk, uten å åpne siden.

Detaljene gjentar varigheten, prisen, beskrivelsen av behandlingen og en lenke til bookingskjemaet. Kommentarer er slått på og fungerer som en samling kundeomtaler.

Statisk innhold. Portland-appen er en reiseguide, og Blogg-seksjonene serverer tips til besøkende.

Her finnes verken forfatter eller publiseringsdato: de opplysningene ville ikke tilført noe til innhold som ikke går ut på dato.

To seksjoner i en nyhetsapp: til venstre en liste der den første artikkelen vises stor og de neste i rader; til høyre en seksjon toppet av en rad med underkategorier som filtrerer den samme listen.
Den samme bloggen to ganger: som enkel liste, og deretter kronet av raden som filtrerer underkategoriene.
Detaljene i en artikkel: bildet øverst, tittelen, publiseringsdatoen, og deretter teksten i blokkjusterte avsnitt. Nederst på skjermen kommentarer, deling og bokmerking.
Nederst i artikkelen tre grep for leseren: kommentere, dele og ta vare på til senere.
Startskjermen i en spa-app: tre behandlingskategorier, hver et bilde i full bredde med navnet satt inn i.
Den samme seksjonen som meny for et spa: tre kategorier, tre bilder og ikke en artikkel i sikte.
Listen over massasjer: hver behandling tar en rad med bildet, navnet og varigheten sin.
Hver behandling er en artikkel, og varigheten tar publiseringsdatoens plass.
Detaljene i en behandling: bilde, navn, varighet, pris, deretter en beskrivelse i kursiv og en bookinglenke.
Og helt nederst lenken som gjør en lesning om til en bestilling.
To skjermer fra en byguide: til venstre listen over artikler, hver med sitt kvadratiske miniatyrbilde og sin tittel, under toppfeltet til seksjonen og over fanelinjen; til høyre artikkelen åpnet, med bildet, tittelen og teksten sin.
En byguide bygget på den samme seksjonen: artiklene går ikke ut, så ingenting her bærer en dato.

Hvilken layout du bør velge

Ni layouter er tilgjengelige for listen. De skilles fra hverandre på tre kriterier: hvor mange artikler du publiserer, hvor sterke bildene dine er, og om du vil framheve én artikkel eller ikke.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

Uten noe framhevet element, alle artikler på samme nivå:

  • Enriched Classic, det universelle standardvalget. Moderat rytme, viktige metadata synlige. Ta den når ingenting skyver deg mot en mer spesialisert layout.
  • Condensed, for høyt redaksjonelt volum som skal skummes raskt. Bildet kommer i andre rekke.
  • Visual Card, kort i full bredde i én enkelt kolonne: stort bilde øverst, tittel og ingress under. For når det er bildet som får folk til å klikke.
  • Checkerboard, for statisk innhold, med titler som leses i et «Z»-mønster.
  • Grid Visual, et rutenett av likestilte artikler. Krever et bilde på hvert element.

Med én artikkel framhevet:

  • Une Condensed, én flaggskipsartikkel fulgt av mange kompakte elementer. Strømmen tar unna volumet.
  • Une Grid Visual, én framhevet artikkel og deretter et rutenett. Krever et bilde på hvert element også.
  • Une Story, flere «forsider» i en karusell du drar gjennom, i stil med sosiale nettverk, med en kompakt strøm under. For svært jevnlig publisering med sterke bilder. Bare tilgjengelig på artikler.

Særtilfellet:

  • Immersive, én artikkel per skjerm, dominerende bilde og loddrett dranavigasjon. Praktfull med sterke bilder, men den holder ikke til høyt volum.

Regelen som overstyrer alle de andre: hvis artiklene dine ikke har bilder, eller har bilder av dårlig kvalitet, utelukk Visual Card, Checkerboard, Une Grid Visual, Grid Visual, Une Story og Immersive. Da står du igjen med Condensed hvis volumet er høyt, og Enriched Classic ellers.

For artikkeldetaljene setter standardvisningen omslagsbildet i toppen, deretter tittelen, datoen og forfatteren, handlingslinjen (dele, favorittmerke, kommentere) og brødteksten. Når en artikkel ikke har noe omslag, kommer tittelen først i stedet for at toppen står tom.

En merknad som gjelder alle seksjoner: selv om vi av og til forbinder en layout med en type bruk, er ingen av dem forbeholdt et bestemt felt. Alt avhenger av behovene dine og av det samlede designet i appen din.

Ni modeller av blogglayouter, med navnene sine. På den øverste raden: Enriched Classic, Condensed, Visual Card, Checkerboard, Grid Visual. På den nederste raden: Une Condensed, Une Grid Visual, Une Story, Immersive. Hver av dem viser hvordan bildet, tittelen og sammendraget er lagt ut i listen, og om den første artikkelen skiller seg fra de andre.
Ni layouter for én enkelt seksjon, og de tre som heter Une løfter den første artikkelen ut av mengden.

Kapittel 4Galleriet

Hva den er til for

Galleri-seksjonen viser et galleri med bilder. Måten den virker på er minimal: du legger til bildene dine, du velger layouten, og det er det.

Legg til bildene dine med knappen Add a photo, eller ved å dra og slippe fra datamaskinen din. Det går an å laste opp flere om gangen, noe som setter betydelig fart på arbeidet.

Den skjermen ligger i Content Content list All photos, og det å legge til direkte ligger i Content Add A photo.

Når bildene dine først er i back office, kan du gi dem en tittel og en beskrivelse, som vil dukke opp i detaljvisningen.

Panelet for å legge til en seksjon, med en pil som peker på gallerflisen blant de tilgjengelige typene. Til venstre forhåndsvisningen av festivalappen med programmet og fanelinjen sin.
Et galleri legges til som hvilken som helst annen seksjon, fra det samme panelet som bloggen og videoen.
Innholdslisten filtrert på et galleri, i rutenettvisning. Hvert bilde utgjør et kort der to ledetekster venter på en tittel og en bildetekst, med en pil som peker på hvor de skal. Under hvert kort publiseringsstatusen, en søppelbøtte og en avkrysningsboks; øverst søket, filtrene og legg til-knappen.
Hvert bilde kan bære en tittel og en bildetekst, og begge oppfordringene blir stående til du skriver dem.

To måter å bruke den på

Livet på en skole. Paraigua-appen serverer informasjon til elever og foreldre, og har som mål å bygge en community rundt skolen. Galleri-seksjonen publiserer jevnlig bilder fra livet på skolen. Layouten som er valgt lar tittelen og beskrivelsen til hvert bilde bli stående synlig, for å sette dem i kontekst.

En musikkfestival. Piu Piu-appen friskes opp hvert år til den nye utgaven. Galleriet fungerer som et arkiv: det samler bilder fra tidligere år, noe som holder minnet levende for stamgjestene og fører festivalens ånd videre til nykommerne.

Et galleri i en skoleapp: bildene følger etter hverandre i full bredde, hvert med datoen og tittelen sin under.
Med titler og datoer leses galleriet som en nyhetsstrøm: bildene sier hva som skjedde, og når.
Et festivalgalleri som en mosaikk: bildene sitter to og to uten titler, og svarer hverandre gjennom fargene sine.
Uten dem blir det en stemningstavle, der bildene svarer hverandre gjennom fargene sine.

Hvilken layout du bør velge

Tre layouter, som svarer på tre ulike hensikter.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

  • Visual Card, standardvalget. Én kolonne, kort i full bredde, og framfor alt en tittel og en bildetekst per bilde. Det er den eneste av de tre som lar deg sette bildene dine i kontekst.
  • Square, et rutenett med to kolonner av kvadrater, uten titler. For et svært komprimert visuelt arkiv, når helheten teller mer enn hvert bilde for seg.
  • Ratio, en mosaikk med to kolonner som respekterer de opprinnelige proporsjonene til hvert bilde. For en portefølje med blandede formater.

Med andre ord: hvis bildene dine trenger forklaring, ta Visual Card. Hvis de taler for seg selv og det er mange av dem, Square eller Ratio alt etter om de er ensartede eller ikke.

Tre modeller av gallerilayouter, med navnene sine: Visual Card, der hvert bilde tar et kort med tittelen og bildeteksten sin; Square, et rutenett med kvadratiske miniatyrbilder; Ratio, et rutenett som beholder de opprinnelige proporsjonene til hvert bilde.
Tre layouter: bare den første gir plass til en tittel og en bildetekst, de to andre er rutenett.

Kapittel 5Videoer

Hva den er til for

Video-seksjonen serverer videoer i appen din, enten de allerede ligger på et eksternt nettsted eller ikke.

Legg til videoene dine ved å laste dem opp fra datamaskinen din, eller ved å legge inn innbyggingskoden deres hvis de allerede bor et annet sted. Som ved bloggen velger du deretter visningsseksjonene, forfatteren, publiseringsdatoen, sammendraget og om kommentarer er på.

Editoren åpnes fra Content Add A video.

Til slutt kan du gi siden struktur ved å legge til tekstavsnitt, bilder og sitater om nødvendig.

Det samme panelet for å legge til en seksjon, med pilen som denne gangen peker på videoflisen. Til venstre viser forhåndsvisningen av bedriftsappen en artikkel.
Videoseksjonen heter Web TV, og ligger mellom galleriet og de sosiale nettverkene.
Å lage en video i back office: i midten et slippområde som oppgir maksimal størrelse og tilbyr enten å laste opp en fil eller å lime inn en innbyggingskode, med listen over godtatte formater. Til høyre kategorien, forfatteren, datoen, festingen til toppen av listen, et sammendrag og bryteren for kommentarer.
Enten din egen fil, opptil 500 MB, eller en innebyggingskode: seksjonen tar begge uten å skifte form.

To måter å bruke den på

En lokalavis. River Daily har ingen tv-kanal, men sender jevnlige programmer på YouTube, blant annet ett daglig. De er samlet i Video News-seksjonen i appen.

En intern bedriftsapp. Hos Dali Corp serverer Video-seksjonen nettkurs laget av ansatte for ansatte. Opplegget gjør to jobber på én gang: det samler de ansatte rundt et felles prosjekt, og det gir dem gratis opplæring.

En videoliste i en nyhetsapp: hver rad bærer miniatyrbildet sitt, merket med en avspillingsknapp, og ved siden av tittelen eller datoen sin.
Rader med lite miniatyrbilde, der en video uten tittel faller tilbake på datoen sin.
En videoliste i en bedriftsapp: miniatyrbildene tar hele bredden, med varigheten satt inn i et hjørne, og publiseringsdatoen og tittelen under.
I full bredde, med spilletiden felt inn i et hjørne: leseren vet hva det koster før hen trykker på play.

Hvilken layout du bør velge

Tre layouter for listen.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

  • Enriched, standardvalget. Kompakt liste, lite miniatyrbilde i 16:9, metadata i forgrunnen (tittel, dato, forfatter, beskrivelse). Det er det riktige valget for høyt volum som skal skummes.
  • Une Condensed, én framhevet video vist stort med ingressen sin, og deretter en kompakt strøm under. Dette er «videoavisen», med dagens forside. Holder til moderat og høyt volum.
  • Visual Card, store kort i full bredde med 16:9-rammen og avspillingsknappen midtstilt. Ta den når det er miniatyrbildet som får folk til å klikke.

For detaljene tar videospilleren toppen, fulgt av tittelen, datoen, handlingene, beskrivelsen og, hvis du legger inn en, adressen.

Tre modeller av videolayouter, med navnene sine: Enriched, en liste der miniatyrbildet sitter til venstre for tittelen; Une Condensed, som setter den første videoen for seg, stor, over de neste; Visual Card, der hver video tar sitt eget kort.
Tre layouter, og spilletiden vises bare på to av dem.

Kapittel 6Podkaster

Hva den er til for

Podkast-seksjonen serverer lyd i appen din.

Legg til lyden din ved å laste den opp fra datamaskinen din. Som ved bloggen velger du visningsseksjonene eller kategoriene, forfatteren, datoen, sammendraget og kommentarene. Du kan også legge til eksterne lenker for å kjøpe sporet.

Editoren åpnes fra Content Add A sound.

Siden gis så struktur med tekstavsnitt, bilder, videoer, innbyggingskode og sitater.

Panelet for å legge til en seksjon, med pilen som peker på podkastflisen. Til venstre forhåndsvisningen av skoleappen, der menyen vises som et rutenett av ikoner.
To ruter bærer lyd, og denne er seksjonen som huser lydfilene dine.
Å lage en episode i back office: i midten et tittelfelt og et slippområde for lydfilen. Til høyre kategorien plukket fra treet av kurs, forfatteren, datoen, festingen, to felter for lenker til appbutikkene, og bryteren for kommentarer.
Episoden arkiveres under en time, og to felt peker mot plattformene der podkasten også er publisert.

To måter å bruke den på

En nyhetsapp. River Daily sender også en radiokanal direkte. Podkast-seksjonen gjør enkelte programmer permanent tilgjengelige. Datoer vises i listen, for å hjelpe lytterne å finne programmet de er ute etter. Detaljsiden holder seg naken, uten ekstra opplysninger.

En skole. Paraigua trengte å levere leksjonene sine på avstand. De presenteres som en liste, kategorisert etter fag.

Idéen det er verdt å ta med seg ligger i detaljsiden: en avskrift av leksjonen publiseres der som avsnitt og bilder. Eleven følger teksten og illustrasjonene mens de hører på lydversjonen, noe som gjør leksjonen brukbar i svært ulike situasjoner.

To skjermer fra en nyhetsapp: til venstre listen over episoder, hver med tittelen, datoen og miniatyrbildet sitt; til høyre spilleren åpnet, med omslaget, datoen, tittelen, framdriftslinjen lagt over en bølgeform og de tre avspillingsknappene.
Spilleren blir værende i appen: ingen fane å forlate, og bølgeformen løper bak framdriftslinjen.
En liste over episoder i en skoleapp, under en rad med underkategorier som skiller fagene. Hver rad bærer miniatyrbildet og tittelen sin.
Den samme seksjonen for en skole, der raden med underkategorier skiller fagene fra hverandre.
Detaljene i en episode: omslag, dato, tittel, spiller, og deretter den skrevne leksjonen som følger lyden, i avsnitt med titler brutt opp av et bilde.
Under spilleren den skrevne timen: episoden lyttes til eller leses, aldri bare det ene.

Hvilken layout du bør velge

To layouter, og kriteriet som skiller dem er størrelsen på miniatyrbildet. Begge bygger spilleren inn i cellen, med avspillingsknappen og varigheten: det er altså ikke avspillingen som skiller dem.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

  • Classic Play, standardvalget. Mindre miniatyrbilde, tekst og metadata dominerer. Det er layouten for lange episodelister, og den for radiomønsteret.
  • Enriched, større miniatyrbilde, som løfter fram omslaget. Velg den når omslagsbildet er en del av identiteten til innholdet ditt, på moderat volum.

For detaljene fungerer omslaget som et oppslukende dekke, med lydspilleren, tittelen, handlingene og brødteksten.

To modeller av podkastlayouter, med navnene sine: Classic Play, der hver episode stiller opp miniatyrbildet, teksten og avspillingskontrollen sin; Enriched, som gir mer plass til miniatyrbildet og sammendraget.
To layouter, og begge holder avspillingsknappen og spilletiden inne i selve listen.

Kapittel 7Direktesending

Hva den er til for

Seksjonene ovenfor publiserer innspilt innhold, tilgjengelig når lytteren din bestemmer det. Direktesending gjør det motsatte: den sender i sanntid, og det er avtalen som gjør begivenheten.

Tre byggeklosser, som settes sammen etter hva du sender.

  • Direktelyd er grunnklossen: seksjonen finnes uten at noe legges til. Du legger inn adressen til strømmen din, og appen sender den. IceCast-kodere støttes innebygd, noe som dekker det store flertallet av radiooppsett.
  • Direktevideo gjør det samme for en bildesending. Det er et tillegg, og oppføringen viser prisen som gjelder for appen din.
  • Live+ er et lag oppå direktelyden, også det levert av et tillegg. Det viser metadataene til strømmen din ved siden av spilleren: sporet som spilles, programlederen, programmet. Uten det ser lytteren din en avspillingsknapp og ingenting annet; med det ser de hva de hører på.

To egenskaper er verdt å kjenne før du bestemmer deg.

Lyden stopper ikke når lytteren din navigerer. Spilleren følger brukeren fra skjerm til skjerm og fortsetter med skjermen av. I praksis kan folk høre på kanalen din mens de leser artiklene dine, noe som fullstendig endrer måten en radioapp brukes på.

Du kan åpne flere direkteseksjoner. En radiokanal med to kanaler, en festival med to scener, en menighet med to gudstjenester: hver strøm har sin egen seksjon.

En siste forskjell fra seksjonene ovenfor: direktesending har bare én presentasjon. Det er ingen layout å velge.

To måter å bruke den på

En lokalradio. Radioen til River Daily, som er nevnt i forrige kapittel, bor i en direkteseksjon. Podkastene beholder programmene på forespørsel, og direkteseksjonen bærer kanalen. Live+ viser sporet som spilles og artisten, noe som gir en lytter som kommer inn midt i programmet noe å orientere seg etter.

En festival. Piu Piu sender scenen sin direkte gjennom de fire dagene. Publikummet som ikke kunne komme følger kvelden, og stamgjestene finner igjen stemningen hjemmefra. Direktesending virker side om side med arrangementsseksjonen, som fortsatt er hovedseksjonen i appen: programmet kunngjør, direktesendingen sender.

To detaljer på den skjermen er verdt å peke på. Sleep mode stopper avspillingen etter en valgt ventetid, noe som teller på en kanal folk hører på om kvelden. Og spilleren plukker opp fargene og typografien til appen: det er den samme skjermen som hos River Daily, og likevel ser den ikke ut som det samme produktet.

Direktespilleren til River Daily: sirkelformet omslag, avspillingsknapp, forløpt tid, og deretter navnet på artisten og tittelen på sporet som vises av Live+. Nederst minner en vedvarende minispiller om hva som spilles.
Uten Live+ ville lytteren bare sett avspillingsknappen.
Den samme direkteskjermen hos Piu Piu, i de mørke og oransje fargene til festivalen, med en Sleep mode-knapp øverst til høyre og den vedvarende minispilleren nederst.
Samme skjerm som ovenfor, to identiteter: spilleren følger designet til appen.

Kapittel 8Kart

Hva den er til for

Kartseksjonen lager geolokaliserte punkter vist på et kart. Brukerne dine finner stedene og får veibeskrivelse dit.

For å lage et punkt legger du inn adressen eller koordinatene på redigeringssiden.

Redigeringssiden åpnes fra Content Add A location.

Du fyller så ut beskrivelsen med tekst, bilder, videoer, sitater eller innbyggingskode. Panelet til høyre lar deg velge visningsseksjonene og legge til handlingsknapper:

  • en ringeknapp
  • en e-postknapp

Til slutt kan du legge til en ekstern lenke, og tilpasse formen og fargen på ikonet som står for punktet.

Panelet for å legge til en seksjon, med pilen som peker på kartflisen. Til venstre forhåndsvisningen av byguiden, med søket og flisene sine.
Kartet er en innholdsseksjon som de andre, ikke en modul lagt oppå en side.
Å lage et sted i back office: navnet, adressen, koordinatene, og til høyre kartet som plasserer dem. Nedenfor en tekstbehandler for å beskrive det. I panelet til høyre kategoriene det dukker opp i, et telefonnummer og en e-post som blir handlingsknapper, en nettadresse, og deretter valget av formen og fargen på markøren.
Også markøren velges her: fem former og en farge, slik at to kategorier aldri ligner hverandre.

Tre måter å bruke den på

Et skolecampus. Paraigua er spredt over flere bygninger. Nykommere, både elever og foreldre, trengte å kjenne dem igjen i ett blikk og få veibeskrivelse.

Fire steder ble opprettet, presentert først som en liste. Kartvisningen viser alle punktene og avstandene. Å klikke på et punkt gir et sammendrag og tilgang til detaljene, der veibeskrivelsesknappen er hovedsaken, utfylt av en beskrivelse og et bilde.

En bedrift med flere kontorer. Dali Corp har kontorer i flere amerikanske byer, og er opptatt av bedriftskulturen sin. En kartseksjon presenterer de tre kontorene.

Detaljene er fyldigere enn hos Paraigua: bilder beskriver kontoret og stemningen der, og veibeskrivelsesknappen sitter under bildene. Kartet er ikke bare der for å orientere folk, det er der for å la de andre stedene finnes for dem som aldri drar dit.

En reiseguide. I Portland-appen er kartet hjertet i produktet. Flere kartseksjoner presenterer stedene i byen, sortert etter type.

Detaljene omfatter en fullstendig beskrivelse, bilder der det trengs, veibeskrivelsesknappen framhevet, og en ekstern lenke til nettstedet til hvert sted når det har et.

Tre skjermer fra en skoleapp: listen over steder, hvert med bildet, navnet og adressen sin; kartet, der markørene sprer seg og en av dem åpner etiketten sin; detaljene i et sted, med bildet, adressen, en veibeskrivelsesknapp, listen over tjenestene sine og et kart nederst.
Liste, kart, detalj: tre visninger av de samme stedene, og en rund knapp for å bytte mellom dem.
Detaljene i et kontor i en bedriftsapp: åpningsbildet, navnet, adressen, en innledende linje, deretter fire bilder av lokalene, veibeskrivelsesknappen og kartet.
Et kontor presentert som en artikkel, med ruteknappen og kartet spart til helt til slutt.
To skjermer fra en byguide: til venstre listen over steder, under en rad med underkategorier, med en rund knapp som bytter til kartet; til høyre kartet i fullskjerm, markørene sine, og knappen som går tilbake til listen.
Underkategoriene filtrerer listen og kartet samtidig: markørene følger den åpne fanen.
Detaljene i et turistmål: bilde, navn, adresse, veibeskrivelsesknapp, deretter en beskrivelse som veksler mellom avsnitt, en punktliste og bilder, en knapp til nettstedet, og kartet nederst.
Et sted kan romme like mye som en artikkel: avsnitt, en liste, bilder og sin egen utgående lenke.

Hvilken layout du bør velge

Tre layouter, og det virkelige kriteriet er hvor mye plass du gir selve kartet.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

  • Enriched, standardvalget. Kompakt liste, lite miniatyrbilde, tittel og adresse, flere steder per skjerm. Kartet er skjult bak en knapp. Det er kataloglayouten, for når brukeren allerede vet hva de leter etter.
  • Visual, stort dominerende miniatyrbilde, få steder per skjerm. Kartet blir liggende skjult bak en knapp. For et galleri av steder der det er bildet som frister.
  • Split Enriched, det interaktive kartet tar toppen av skjermen og listen dukker opp nedenfor. Velg den når det romlige forholdet mellom stedene bærer mening, altså når kartet er emnet.

Du bestemmer også om du vil vise en sammendragsliste over kartet eller ikke. Gå til My App Structure, åpne kartseksjonen, og deretter listevisningen av punkter: innstillingen ligger i innholdsområdet, under «Map view».

For detaljene i et sted får du bildet, navnet, adressen, veibeskrivelsesknappen, et galleri og kartet som plasserer det.

Tre modeller av kartlayouter, med navnene sine: Enriched, en liste der hvert sted bærer markøren og adressen sin; Visual, som gir hvert sted et stort miniatyrbilde; Split Enriched, som setter kartet øverst og listen nedenfor.
Tre layouter, og bare den siste viser kartet og listen på den samme skjermen.
Designinnstillingene til en kartseksjon. Ringet inn styrer to brytere om listen vises og om den åpner før kartet. Nedenfor bakgrunnsfargen, kantlinjen, gjennomsiktigheten, hva hver rad viser, og typografien til tittelen. Til venstre bruker forhåndsvisningen innstillingene direkte.
To brytere avgjør om listen finnes i det hele tatt, og om den kommer før kartet.

Kapittel 9Skjemaet

Hva den er til for

Skjemaseksjonen samler inn opplysninger fra brukerne dine, gjennom felter av ulike typer.

Skjemaene dine er listet i Content Content list All forms. Å åpne ett viser skjemaredigeringspanelet til høyre, der feltfanen bærer paletten nedenfor.

Seksten felttyper er tilgjengelige:

  • én enkelt tekstlinje
  • tekstavsnitt
  • flervalg
  • navn
  • dato
  • e-post
  • ekstern lenke
  • filopplasting
  • tall
  • avkrysningsbokser
  • nedtrekksliste
  • adresse
  • klokkeslett
  • telefon
  • pris
  • seksjonsskille

Klikk på typen du vil ha, så dukker den opp i redigeringsområdet, der du tilpasser innholdet i den.

Husk å berike skjemaet med bilder, videoer, tekst, sitater eller innbyggingskode også: et nakent skjema får færre svar enn et skjema som forklarer hva det er ute etter.

Panelet for å legge til en seksjon, med pilen som peker på skjemaflisen, i en katalog som har blitt lengre. Til venstre forhåndsvisningen av appen til dekoratøren, med menyen åpen.
Lenger ned i den samme katalogen, forbi seksjonene som publiserer, kommer de som samler inn.
Å redigere et skjema: til venstre tittelen og en illustrasjon; til høyre paletten av tilgjengelige felter, én enkelt tekstlinje, et tall, et avsnitt, avkrysningsbokser, et enkeltvalg, en nedtrekksliste, et navn, en adresse, en dato, et klokkeslett, en e-post, en telefon, et nettsted, en pris, en fil og et seksjonsskille.
Seksten felttyper, blant dem en adresse og en fil: skjemaet bygges med klikk, aldri med kode.

To måter å bruke den på

En tjenesteapp. Hos Ivar Madsen, interiørarkitekt, håndterer skjemaet forespørsler om timeavtaler og tilbud.

Siden har tre mål: å presentere tilbudet, å bli kjent med den framtidige kunden, å tillate en første kontakt. Et bilde og en forklarende tekst setter rammen, og deretter går skjemaet rett på sak:

  • et navnefelt og et e-postfelt for å identifisere kunden
  • to avsnittsfelter for å uttrykke behovene og prosjektet sitt
  • et datofelt for å oppgi når de er tilgjengelige

En bedriftsapp. Hos Dali Corp kjører HR jevnlig undersøkelser for å måle trivselen til de ansatte og hente inn meningene deres.

Skjemaet er bevisst svært kort, for å få svarprosenten så høy som mulig. En innledende tekst, og deretter fem felter:

  • et navnefelt og et teamfelt for å identifisere den ansatte
  • to flervalgsfelter for å svare på spørsmålene fra ledelsen
  • et avsnittsfelt for å si det man vil
Et kontaktskjema rullet fra topp til bunn: tittelen, et bilde, fire blokker som forklarer hva det vil bli spurt om, og deretter feltene som skal fylles ut, navn, e-post, eiendomsadresse med underfeltene sine, prosjektbeskrivelse, foretrukket stil og tilgjengelighet med en datovelger. En sendeknapp avslutter siden.
Fire blokker forklarer hva som vil bli spurt om før noe spørres om: skjemaet begynner med å berolige.
En intern spørreundersøkelse i en bedriftsapp: etter innledningen et navnefelt, en nedtrekksliste for team, to spørsmål med enkeltvalg og et fritt felt, og deretter sendeknappen.
Den samme seksjonen som intern undersøkelse, der spørsmålene er lukkede og det siste ikke er det.

Å bruke svarene til noe

Gå til Content Content list. Hold musen over skjemaseksjonen det gjelder og klikk på lenken som viser innholdet i den. Der finner du listen over svarene som er kommet inn.

Å klikke på en rad viser svarene til én bruker, som du kan eksportere som en .csv gjennom Export data. Den samme knappen, fra listevisningen, eksporterer alle svarene.

Den eksporten er det som gjør seksjonen virkelig nyttig: uten den leser du svar ett for ett; med den analyserer du dem som en helhet.

Svarene på et skjema i back office, som en tabell: datoen, skjemafeltene som kolonner, og den vedlagte filen. En søppelbøtte avslutter hver rad. Ringet inn av pilen, øverst til høyre, dataeksporten og veien tilbake til å redigere skjemaet.
Svarene lander i en tabell du kan eksportere: ingenting blir låst inne i appen.

Kapittel 10Innsendinger

Hva den er til for

Innsendingsseksjonen lar brukerne dine sende deg innhold fra appen, som tekst, bilder eller videoer. Alt kommer inn i back office.

Det du mottar havner i Content Content list All sent in content.

Det er ingenting å sette opp, med mindre du vil begrense hvilke typer innhold som godtas. I så fall legger du til tillegget API Access og redigerer JSON-en til seksjonen. Det er en enkel operasjon, og hjelp trinn for trinn finnes i back office.

Panelet for å legge til en seksjon, med pilen som peker på flisen for innsendt innhold. Til venstre forhåndsvisningen av appen til dekoratøren, med menyen åpen.
Innsendingsseksjonen er den som lar leserne dine skrive i appen i stedet for bare å lese den.

Tre måter å bruke den på

En intern forslagskasse. Hos Dali Corp åpnet ledelsen et rom der de ansatte kan legge igjen bemerkningene og anbefalingene sine når som helst. Innholdet som kommer inn publiseres ikke: det analyseres for å forbedre arbeidsforholdene.

Minnene fra en festival. Piu Piu satser på community-en sin og vil vise den virkelige stemningen på festivalen. Your Memories-seksjonen samler bilder og videoer fra deltakerne. Å sende tekst ble slått av.

Tips fra leserne. River Daily vil være først ute med lokale nyheter. En åpen seksjon lar leserne sende inn opplysningene sine, som journalistene bearbeider før de publiserer.

De tre tilfellene viser tre ulike ordninger: innhold som aldri kommer til å bli publisert, innhold som publiseres nesten slik det er, og innhold som tjener som råmateriale for redaksjonelt arbeid. Avgjør hvilken som er din før du åpner seksjonen, for det endrer hva du kunngjør til brukerne dine.

To skjermer fra en bedriftsapp: til venstre menyen, der en oppføring inviterer de ansatte til å bidra; til høyre innsendingsskjermen, som tilbyr tre grep, et bilde, en video eller en tekst, hvert med sin instruks.
Tre grep tilbudt en ansatt: et bilde, en video eller en tekst, og ikke noe mer å lære.
Den samme mekanismen i en festivalapp: menyen inviterer publikum til å legge ut minnene sine, og innsendingsskjermen beholder to grep, bilde og video, hvert på sin egen fargede bakgrunn.
Den samme skjermen for en festival, kuttet ned til to grep og kledd i appens egne farger.
I en nyhetsapp: menyen bærer to bidragsoppføringer, og innsendingsskjermen inviterer leserne til å melde fra om nyheter fra byen sin ved å sende et bilde, en video eller en tekst.
I en redaksjon blir det en tipslinje, og teksten sier hvem som leser det som kommer inn.

Å håndtere det du mottar

Gå til Content Content list, hold musen over innsendingsseksjonen din og klikk på lenken som viser innholdet i den.

Du håndterer publiseringen i bulk, gjennom avkrysningsboksene til høyre for hver rad, eller sak for sak ved å åpne et element. Du kan altså redigere og deretter publisere med ett klikk det brukerne dine har sendt deg.

Innsendt innhold i back office: hver rad bærer bildet som er sendt inn, en merknad om hvilken app det kom fra, e-postadressen til forfatteren, datoen og en statusbrikke som merker det som innsendt, i påvente av godkjenning. En søppelbøtte avslutter hver rad.
Alt kommer inn som innsendt: ingenting når appen før back office godkjenner det.

Kapittel 11Arrangementer

Hva den er til for

Arrangementsseksjonen presenterer innholdet ditt som daterte arrangementer.

For å lage et arrangement velger du først datoen og varigheten. Valget «all day» sparer deg for å legge inn et tidsrom. Du kan deretter knytte en adresse til det.

Editoren åpnes fra Content Add An event.

Siden bygges opp av avsnitt, med tekst, bilder, videoer, sitater og innbyggingskode.

Panelet til høyre lar deg velge visningsseksjonene eller kategoriene, legge til handlingsknapper (ringe, e-post), en ekstern lenke og en knapp for å kjøpe billett.

Panelet for å legge til en seksjon, med pilen som peker på kalenderflisen. Til venstre forhåndsvisningen av festivalappen, med programmet og fanelinjen sin.
Kalenderseksjonen daterer innholdet sitt i stedet for å publisere det: et arrangement har en start og en slutt.
Å redigere et arrangement i back office: tittelen, start- og sluttdatoen, en boks for hele dagen, deretter stedet med koordinatene sine og kartet som finner det. Til høyre kategorien, en telefon og en e-post som handlingsknapper, en nettadresse, en billettlenke og miniatyrbildet til listen.
Billettlenken har sitt eget felt, atskilt fra nettstedet: arrangementet er laget for å selges.

To måter å bruke den på

En intern bedriftsapp. Dali Corp bruker to arrangementsseksjoner. Den første kommuniserer om interne arrangementer: verksteder, afterwork, åpne dager. Den andre deler veikartet til selskapet, slik at alle kjenner fristene og prosjektene som er i gang.

Den andre bruksmåten er den mest overførbare: arrangementsseksjonen er ikke forbeholdt arrangementer du deltar på, den tjener også til å gjøre en kalender synlig.

I detaljene dukker adressen og veibeskrivelsesknappen opp når de er relevante.

En festival. Hos Piu Piu er arrangementer hovedseksjonen i appen: det er programmet for festivalen.

Detaljene er fullstendige: adresse, dato, knapp for å kjøpe billett, beskrivelse, lenke til nettstedet til artistene, ringeknapp, e-postknapp, veibeskrivelsesknapp, i tillegg til favorittmerking og deling.

To skjermer fra en bedriftsapp: til venstre listen over arrangementer, hvert med datobrikken, bildet og klokkeslettet eller stedet sitt; til høyre detaljene i et arrangement, med bildet, stedet, datoen, en veibeskrivelsesknapp og kartet.
Datomerket gjør sorteringen: leseren tar inn måneden før hen leser tittelen.
Detaljene i en konsert i festivalappen: bildet, navnet på bandet, stedet, datoen, en billettknapp, presentasjonen, og deretter fire knapper, nettsted, telefon, veibeskrivelse og e-post, og kartet nederst.
Billettkjøpet ligger over presentasjonen, og de fire måtene å komme seg dit på under den.

Hvilken layout du bør velge

To layouter, som svarer til to motsatte holdninger.

Layouten endres i My App Structure: åpne menyen til seksjonen det gjelder, og deretter Edit the design.

  • Classic, standardvalget. Arrangementene grupperes under dagbannere, med et lite miniatyrbilde, klokkeslettet, tittelen og stedet, flere per skjerm. Det er kalenderen du blar i etter dato, når «når» og «hvor» betyr mer enn bildet.
  • Classic Bullet, hvert arrangement i et stort dominerende miniatyrbilde med en datobrikke, ett eller to per skjerm. Det er utstillingsvinduet, når det er plakaten til arrangementet som gjør at folk får lyst til å komme.

Valget koker altså ned til ett spørsmål: kommer brukerne dine for å slå opp i et program, eller for å bli fristet?

For detaljene i et arrangement får du omslagsbildet, tittelen, adressen, datoene, beskrivelsen, veibeskrivelsen og kartet over stedet.

To modeller av kalenderlayouter, med navnene sine: Classic, en liste over arrangementer gruppert etter dag, hvert med miniatyrbildet og stedet sitt; Classic Bullet, som stiller datoene opp som brikker på siden og gir hvert arrangement et stort bilde.
To layouter, og den andre gjør datoen om til et merke langs kanten.

Kapittel 12CMS-et og koblingene

Hva CMS-et gir

Et CMS (content management system) lar deg lage og formatere innholdet ditt fra et back office for å publisere det. Hos GoodBarber er det hjertet i plattformen.

Utover det å lage innhold gir det deg:

  • Styring av innholdsstatus. Published, In stock eller Draft, for å styre det du publiserer.
  • Planlagt publisering. Du setter dagen og klokkeslettet for lansering på forhånd, noe som betyr særlig mye for nyhets- eller bloggapper.
  • Kategorisering. Et ubegrenset antall kategorier for å sortere innholdet i en seksjon, altså et ekstra navigasjonsnivå uten å overbelaste menyen din.
  • Sortering. Etter skrivedato, alfabetisk eller etter antall kommentarer.
  • Sentralisert styring. Et dashbord samler alt innholdet som er laget i CMS-et, med filtre for å finne og håndtere elementer i bulk.
  • Avansert tilpasning av metadataene. Det tjener både til å oppmuntre til lesing og til SEO-en din, og du beholder kontrollen over hvordan de vises.
  • Framheving av innhold. Prioritert visning for innholdet du velger, fra redigeringssiden.
  • Avansert tilpasning av designet. Designet til hvert element kan settes uavhengig av de generelle innstillingene i appen.

Hva koblingene gir

Hvis du allerede lager innhold andre steder, trenger du ikke å publisere det på nytt. Mer enn 30 koblinger utviklet av GoodBarber henter det inn i appen din, og formaterer det slik at det følger visningsstandardene og designet til appen.

Et bufringssystem garanterer lastetider og stabilitet, uten å overbelaste tjenerne dine. Bildene dine skaleres, komprimeres og bufres av GoodBarber.

Den avgjørende fordelen er synkroniseringen: innhold som lages på den eksterne kilden din holder seg oppdatert i appen, med en visning tilpasset mobil, nettbrett, bærbar og stasjonær maskin. Du trenger aldri mer å publisere to ganger.

Listen over koblinger

Hver kobling mater en bestemt innholdstype, og innholdet som hentes inn oppfører seg deretter som om det var laget i CMS-et.

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

Bilder: Flickr

Videoer: YouTube, Vimeo, RSS

Lyd og podkaster: Ausha, Spreaker, Simplecast, Spotify for Podcasters, podkaststrøm, RSS

Arrangementer: iCal og vCalendar, RSS

Kart: KML, RSS

Egendefinerte koblinger. Hvis kilden din ikke er dekket, lager du en strøm i formatet den innholdstypen du sikter mot forventer, og du oppgir adressen til den. Det skreddersydde arbeidet er begrenset til å lage strømmen: visningen, layoutene, søket og metadataene forblir plattformens. Detaljert dokumentasjon beskriver formatet som forventes.

Ingenting tvinger deg til å velge mellom de to: du kan blande internt innhold, laget i CMS-et, og eksternt innhold hentet inn av koblingene, i én og samme app.