Dokumentation - Göteborgs hamn 2.0

Startsidans delar

SEO/Metadata

Metadata för sökmotorer. ex. Keywords, Description

Header

Inställning för logotyp, navigationslänkar.

Hero

Inställning för Hero.

Infobanner

Här kan en banner läggas till i toppen av sidan för viktig information

Inställningar för webbsidan (SiteSettings)

Referenslänkar till kataloger för Sök och kartor etc. Hanteras vid uppsättning.

Innehåll

En yta för block. Här kan olika block läggas in och sorteras enligt redaktörens tycke. Här kan även en ikon som sedan visas i sidomenyn läggas till.

Footer

Inställningar för footer

Standardsidans delar

SEO/Metadata

Metadata för sökmotorer. ex. Keywords, Description

Hero

Innehåll för Hero-blocket på toppen av sidan. Bakgrundsbild, video, text och knapp. Bakgrundsbild är obligatorisk då den används som fallback i mobiläge samt om ingen video är inlagd. Endast Youtube video kan användas i första versionen och YouTube video id används för att visa filmen. Obs! Om ingen Hero används så ska checkboxen UseSmallTopbar under innehållsfliken kryssas i.

Innehåll

En yta för block. Här kan olika block läggas in och sorteras enligt redaktörens tycke. Här kan även en ikon läggas till som sedan visas i sidomenyn.

Sökord (SearchWords)

Här sätts sökord till sidan som sedan används av sökmotorn på webbsidan.

Inställningar för en standardsida i Optimizely CMS 12.

Kryssningssida

Kryssnigssidan visar kryssningar

Container för block (grupperingsblock)

Grupperingsblocket används för att gruppera olika block. Används ex. för att få 4 block på rad eller kasnke sex stycken i ett rutnät. De block som kan läggas till är: Teaser/Puff, länkblock, Block för fakta och grafik, Textblock, bildblock, kampanjblock, Teaser/puff för Ankomster och avgångar och Väderblock.

Gruppering av block (Linjärt grupperingsblock)

Det linjera grupperingsblocket används för att gruppera olika block enligt en linjär layout. De block som kan läggas till är: Kontaktblock och Nedladdningsblocket. används bland annat under kontakta oss sidan.

Teaser/puff

Teaser/puff kan användas både som länk till andra sidor, interna/externa, och som informationsyta. Den består av bakgrundbild,en overlay, text, ikon och knapp. Overlayens färg, opacitet, multiplyeffect etc kan justeras. Om ingen bakgrundsbild finns tillgänglig så blir bakgrunden solid med samma färg som på overlay.

Istället för rubrik kan man nu använda en logotyp. Använd gärna svg-fil för detta.

En teaser/puff läggs till via Grupperingsblocket. Läggs 1 teaser till så blir den automatiskt stor(100%). Lägger man till två block så blir det 2 block i bredd(50% av bredden) osv. Teasern blir då mindre ju fler block man lägger på rad (max 5 stycken)

Länkblock

Länkblocket är en liten variant på den vanliga Teasern/puffen. Den ska användas i grupp med andra Länkblock ca 4 stycken. Den läggs till via grupperingsblocket.

Textblock

Textblocket är ett fritextblock. Här kan text läggas in och behandlas i editorn. Som standard så har text-blocket en grå bakgrund. Text-blocket kan ställas in på olika sätt.

• Ingen bakgrund - bakgrundsfärgen tas bort
• Fullbredd - backgrundsfärgen fyller ut 100% i bredd
• Två kolumner - texten delas in i två kolumner

Textblocket kan användas bredvid andra block via Grupperingsblocket

Expanderbart block

Det expanderbara blocket påminner om text-blocket men är uppdelat i två delar, det primära och det utfällda. Likt text-blocket så kan det här blocket visas i fullbredd.

Bildblock

Bildblocket visar en bild. Möjlighet finns också att visa en bildtext. Bildblocket kan användas bredvid andra block via Grupperingsblocket.

Bild och textblock

Ett block som kombinerar Bildblocket och textblocket genom att visa de sida vid sida. Bilden kan visas antingen vänster om texten eller höger om texten. I mobil så placerar sig bilden istället över och under texten.

Informationsbanner

Ett block som används för att visa viktig eller kritisk information. Här kan färg och storlek ändras för att belysa informationens vikt.

Block för fakta med grafik

Ett block som visar fakta och statistik. Den kan visa information på fyra olika sätt.

• Standard - Stor rubrik och kort förklarande brödtext. Standard-varianten fyller ut 100% bredd och används därför enbart på egen rad.
• Standard medium - Rubrik och kort förklarande brödtext. Medium-varianten är mindre vilket gör att den kan läggas sida vid sida med ett annat block.
• Pie chart - visar ett procent värde, ett tårtdiagram och en kortare förklarande brödtext. Här visas ingen Rubrik.
• Wave chart - visar ett procent värde, ett vågdiagram och en kortare förklarande brödtext. Här visas ingen Rubrik.

Det här blocket kan användas bredvid andra block via Grupperingsblocket

Kontaktblock

Ett block som visar information om en kontakt. En kontaktblock läggs till via det linjära grupperingsblocket.

Värdegrundsblock

Det här blocket visar Göteborgs hamns värdegrunds arbete. Det går att lägga till en länkning men i övrigt så är dess innehåll statiskt.

kampanjblock

Det här blocket kan användas för kampanjer. Det finns en mängd inställningar för dess utseende.

Nedladdningsblock

Ett block som visar en nedladdningsbar fil. Det här blocket kan användas bredvid andra block via linjära grupperingsblocket.

Block för ankomster och avgångar

Blocket för ankomster och avgångar hämtar data från ett externt api utvecklat av Kazoku och listar upp i tabellformat.

Teaser/puff för ankomster och avgångar

Det här blocket visar nästa ankommade och nästa avgående fartyg. Det går att ändra bakgrundsbilden.

Väderblock

Det här blocket visar väderdata från SMHI. Datan visas utfrån koordinater(lat/lng).

Rubrik/Paragraf

Editorn har en dropdown-meny med olika teckenstilar. Från Paragraf till olika rubrikstilar (h2 till h6). Obs! Innan ett rubrik skapas så måste ett enterslag innan och ett efter texten göras. Annars vet inte editorn vilken text den ska använda

Citat

Ett citat skapas genom att trycka på citat symbolen i editorn. Obs! Innan ett ett citat skapas så måste ett enterslag innan och ett efter texten göras. Annars vet inte editorn vilken text den ska använda

Standard karta

En standardkarta är en karta som byggs upp i MaxBox studio, men som hämtar allt innehåll från Optimizely CMS. Nedan följer en guide steg för steg vad som krävs för att starta igång en standardkarta

Steg 1 - MapBox Studio - Skapa dataset.

I MapBox Studio under sektionen Datasets behöver redaktören skapa upp ett Dataset. Ett dataset är i grunden GeoJSON-data som talar om var olika GeoJSON Features är på kartan via koordinater samt vilken typ av Feature det är, ex. Point, linje eller polygon . När redaktören skapar ett nytt dataset eller duplicerar ett befintligt så behöver namngivningen av datasetet vara korrekt.

Namnet måste börja med “ghab-”. ex. datasetet för Railport terminaler heter ghab-railportterminaler.

Ett bra tänk är:

• Ett dataset = ett kartlager
• En feature = en kartnod ( ex. en kartmarkör eller en yta)

Under datasets så listas alla datasets.

Inne i dataset-editorn ska redaktören placera ut features/noder på kartan. På en utplacerad feature/kartnod måste redaktören lägga till ett unikt ID. Med sin feature markerad så finns nu möjligheten att skapa en property i listen till vänster. Under Field så måste det stå nodeId. Obs! var noga med namngivningen. Sedan så anges det unika id-värdet under Value. Detta måste göras på samtliga features i datasetet.

När Redaktören är nöjd med sitt dataset så måste det sparas och publiceras. Då kommer ett Tileset skapas och när det är färdigt så kan det nya lagret läggas till i din kartstyle.

Klicka för att öppna bilden i ny flik. Inne i dataset-editorn. Notera nodeId till vänster.

Steg 2 - MapBox Studio - Skapa style

I MapBox Studio under sektionen Styles behöver redaktören sedan bygga upp en kartstyle, vilket sätter kartans utseende. Det görs genom att antingen kopiera en befintlig eller att den skapas från grunden. För att skapa en kopia kan man välja duplicate i menyn för en kartstil i listan. Inne i verktyget för en style ska sedan redaktören lägga till kartlager.

För att skapa ett nytt lager för sitt dataset så trycker man på plus-knappen till vänster under Layers. Man väljer sedan custom layer -> Source. I menyn för Source så väljer man det Tileset/Dataset man har skapat upp tidigare. Nu kan redaktören välja att styla sitt lager och dess noder. Läs om hur MapBox Studio fungerar via deras webbplats. Tryck sedan på publish för att publicera kartlagret. Obs! En publicering kan ta flera timmar vid en uppdatering innan ändringarna syns på sajten.

Steg 3 - Optimizely CMS - Skapa Block för MapBox karta

Nästa steg är att lägga till kartan i Optimizely CMS för att senare kunna lägga till den på en sida. I resursfönstret till höger i Optimizely finns det två mappar, Kartor_sv och Kartor_en, en för varje språk. De innehåller kartblock. Ett kartblock måste skapas för varje språk. Tryck på “+”- knappen i mappen för att lägga till ett nytt block. Välj sedan “Block för MapBox karta”

För att skapa ett kartblock så ska några parametrar anges:

Klicka för att öppna bilden i ny flik. Skapa ett nytt block för kartor i Optimizely CMS.

Steg 4 - Optimizely CMS - Lägga till kartlager

Nu när blocket för MapBox kartan är skapad så ska redaktören lägga till alla kartlager så att kopplingen mellan MapBox-datan och CMS-datan blir korrekt. I Optimizely så behöver redaktören öppna det kartblock som ska ha lager. I ytan för kartlager måste här skapas ett nytt kartlager. Klicka på välj innehåll -> Skapa ett nytt block.

Klicka för att öppna bilden i ny flik. Skapa ett nytt kartlager block i Optimizely CMS.

Steg 5 - Optimizely CMS - Lägga till kartnoder

I steg 1 så skapades features/kartnoder i MapBox Studio. För att koppla dessa noder till Optimizely CMS datan så måste vi i Optimzely CMS lägga till kartnoder på våra lager. I ytan för Kartnoder måste här skapas en nytt block för kartnod. Klicka på välj innehåll -> Skapa ett nytt block.

Klicka för att öppna bilden i ny flik. Skapa ett nytt block för kartnod i Optimizely CMS.

Linjekarta

Linjekartan läser in data lite annorlunda än standardkartan. Grundinställningarna för kartan ligger i Optimizely CMS men resten av datan hämtas från MapBox. Kartan administreras på två ställen. Hamnar placeras ut via MapBox Studio och hamnarnas rutthantering sker i linjekartans admingränssnitt. Den här guiden förutsätter att linjekartans map style ghab-style-linermap redan ska vara skapad i MapBox Studio.

Steg 1 - Optimizely CMS - Skapa Block för MapBox karta

Linjekartan måste skapas upp i Optimizely CMS för att senare kunna lägga till den på en sida. I resursfönstret till höger i Optimizely finns det två mappar, Kartor_sv och Kartor_en, en för varje språk. De innehåller kartblock. Ett kartblock måste skapas för varje språk. Tryck på “+”- knappen i mappen för att lägga till ett nytt block. Välj sedan “Block för MapBox karta”

För att skapa ett kartblock så ska några parametrar anges:

Klicka för att öppna bilden i ny flik. Skapa ett nyttblock för karta i Optimizely. Karttypen är satt till Linjekarta.

Steg 2 - Skapa/uppdatera Dataset i MapBox Studio

I MapBox Studio under Datasets så bör det finnas ett Dataset som heter ghab-linermap, öppna den. Om det inte finns så skapa upp ett nytt dataset med namnet ghab-linermap. Viktigt att namngivningen är korrekt. Väl inne i Datasättet så ska redaktören markera ut hamnar med hjälp av Point-verktyget

När en hamn är utmarkerad samt att den är markerad så måste ett antal properties läggas till.

Tryck på spara och sedan publicera.

Klicka för att öppna bilden i ny flik. Lägga till hamn i dataset-editorn. Notera värdena till vänster nodeId, name_en och name_sv.

Steg 2 - Lägg till rutter i Linjekartans admin-gränssnitt

Rutter läggs till via linjekartans admin. För att komma åt adminverktyget så måste redaktören logga in i Optimizely CMS. Välj sedan sidan Linjekartans admin i sidträdet. Klicka sedan på Options -> view on website

Här visas alla hamnarna/platser som tidigare placerades ut i linjekartans dataset(se steg1). De listas i bokstavsordning och det finns möjlighet att söka upp en specifik hamn.

En ny rutt läggs till genom att expandera den hamn som ska rutten. I den gröna rutan anges sedan Agent, Rederi, Frekvens, Terminal och om det är Container eller Roro. Klicka sedan på Lägg till rutt för att lägga till den i listan. Obs! rutten är inte uppladdad till Mapbox ännu Om en rutt är uppladdad så får den en grön symbol till vänster. En rutt kan också ändras genom att trycka på Pennan, spara sedan genom att trycka på diskett-symbolen,

När alla ändringar är gjorda så Tryck på Spara & skicka till MapBox upp i högra hörnet. Nu laddas all information upp till MapBox

Klicka för att öppna bilden i ny flik. Lägg till rutter via Linjekartans admin.

Steg 4 - Publicera kartan i MapBox Studio

För att publicera ändringarna så att de syns på kartan så behöver vi logga in på MapBox Studio och under Datasets öppna upp ghab-linerpage. I dataset-editorn, Tryck på Publish för att uppdatera kartan. Det kan nu dröja ett antal timmar innan de nya ändringarna har kommit på plats.

Klicka för att öppna bilden i ny flik. Publicera linjekartans dataset