Innan du börjar på jobba med hemsidan

Innan du börjar på jobba med hemsidan

Här finns information om hur du bör strukturera din webbplats samt vidare information om verktygets uppbyggnad, olika funktioner och tips och tricks.

Innehåll

Innan du börjar på jobba med hemsidan ... 1

Strukturera din webbplats ... 3

Meny nivåer ... 4

Webbverktygets uppbyggnad ... 5

Globala menyn ... 5

Navigering ... 5

Visa/dölja navigeringen ... 5

Block och Media ... 6

Block ... 6

Redigera block ... 6

Flytta, kopiera och ta bort ett block i kataloger ... 7

Media ... 8

Gadget – versionshantering ... 9

Tips och tricks ... 10

Tips om hur du skapar ett starkt och bra lösenord. ... 10

Dra och släpp ... 10

Klipp ut och flytta sidor ... 10

Kopiera sidor ... 10

Förhandsgranska för olika Mediakanaler ... 11

Inställningar för en specifik sida ... 11

Namn (Ändra namn på en skapad sida) ... 11

Namn i URL (www adress) ... 11

Enkel adress (Genvägar) ... 11

Visa i navigering ... 11

Hur sparar jag mina sidor jag jobbar med? ... 12

En liten ordlista för konstiga benämningar i manualen ... 13

Vanliga användbara kortkommandon ... 14

Strukturera din webbplats

Webbplatsens struktur utgörs av sidor. Dessa sidornas namn bildar webbplatsens struktur och utgör till stor del webbplatsens meny/navigering. Menyerna byggs upp dynamiskt av de sidor som finns på webbplatsen. Hamnar en sida på fel ställe kan man flytta runt och stuva om dessa som man vill.

Här nedan följer några exempel rader om webbplatsen är uppbyggd och hur man kan tänka när man skall skapa nya sidor eller puffar.

 Webbplatsen har en startsida som visar tydligt var besökaren har hamnat och hur hon kommer vidare.

 Startsidan innehåller tydliga länkar som får besökaren att förstå vart de leder även om hon inte klickar på dem.

 Startsidan (och även andra sidor) innehåller puffar, som med några ord leder besökaren vidare till den information hen söker. I en puff kan det till exempel stå Bli medlem idag (som rubrik) samt texten ”Alla är välkommna som medlemmar i vår förening. Umgås och delta i aktiviteter.

Orden Alla är välkommna som medlemmar i vår förening. Umgås och delta i aktiviteter”

är naturligtvis länkade till ett formulär till medlemsanmälan.

 Omfattande webbplatser har en länkstig(brödsmulor) högst upp på varje sida som talar om var i webbhierarkin besökaren befinner sig och hur hon kom dit. När besökaren befinner sig på sidan Om oss kan länkstigen se ut så här: Riksförbundet / Västerbottens län / Om oss, där både Riksförbundet, Västerbottens län och Om oss är länkar till respektive sida.

 Texten på alla sidor är bör vara försedda med intresseväckande rubriker (Rubrik 2) som innehåller nyckelord ur texten och gör det tydligt vad texten handlar om.

 En sida har gärna en ingress som sammanfattar det viktigaste i texten.

 Längre texter har mellanrubriker (Rubrik 3) som leder besökaren vidare i texten.

 Löptexten är indelad i korta stycken.

 Löptexten är bör vara anpassad efter besökaren och syftet.

 Webbplatsen kan innehålla länkar. Dessa länkar skall vara tydliga länkar som leder besökaren vidare i strukturen snarare än att upprepa samma information på flera ställen.

Meny nivåer

För att göra det enkelt för besökaren att hitta och navigera på er webbplats är det lämpligt att begränsa menystrukturen till maximalt tre nivåer/undersidor.

Nivåerna/sidorna räknas på följande sätt att man har en huvudnivå, vilket alltid är föreningens\länets startsida(förstasida). Sedan kan man göra sidor under denna förstasida, dessa sidor blir då s.k.

undersidor.

Exempel: Nivå

Nivå 1 Huvudnivå (startsida Västerbottens Län) ⁽¹⁾ 1

Nivå 2 Undersida (Om oss) ⁽²⁾ 2

Nivå 2 Undersida (Verksamhetsberättelser och protokoll) 2

Nivå 2 Undersida (Historik) 2

Nivå 3 Undersida (Föreningens tillkomst) 3

Nivå 2 Undersida (Aktuellt) ⁽³⁾ 2

Nivå 2 Undersida (Nyheter) ⁽³⁾ 2

Nivå 2 Undersida (Kalender) ⁽³⁾ 2

Gör man en fjärde nivå så kommer den inte att visas i navigeringen på den publicerade sidan, men dock så kommer den att finnas på webbsidan och vara sökbar och kunna visas om man söker efter något som har relevans till sidan. Men sidan kommer tyvärr inte att vara nåbar via navigering på traditionellt sätt enligt bilden nedan.

Webbverktygets uppbyggnad Globala menyn

Klicka på den lilla svarta fliken med pilen i mitten längst upp på sidan för att fälla ut topprullgardinen

(3). Knapparna till höger är länk till EpiServer, Redaktörshandboken online, dina inställningar samt sök.

Bland knapparna till vänster ligger CMS och Redigera. Dessa klickar du på för att komma tillbaka till redigerarläget om du har varit inne under Mina inställningar. I denna meny hittar man även ”Logga ut”

Navigering

Navigeringen i verktyget påminner väldigt mycket om ”utforskaren” i Windows 7 / 10 där de använder små pilar, vårat webbverktyg använder + och – tecken.

Ett + indikerar att det finns en undernivå här. Om man klickar på det + tecknet kommer den

underliggande strukturen fram och pluset blir ett – tecken för att visa att den är expanderad. För att fälla ihop den så klickar man på - tecknet igen så fälls menyn ihop och det blir återigen ett + tecken

”Diagnos hjärta - inte expanderad” ”Diagnos hjärta - expanderad”

Visa/dölja navigeringen

När du klickar på ikonen för att visa eller dölja navigeringen ⁽⁵⁾ så fälls navigeringsfönstret ut till vänster. Klickar du någon annanstans på sidan så fälls den ihop igen.

Pin (Nåla fast)

Du kan nåla fast fönstret genom att klicka i den lilla nålen längst upp i högra hörnet så att den blir blå.

Sidträd

I sidträdet ser du alla webbplatsens sidor. Om du jämför med webbplatsen, så ser du att strukturen motsvarar menystrukturen på webbplatsen. Allt ligger i samma ordning och nivåer.

För att navigera sig i navigeringsfönstret så klickar du på plustecknen för att fälla ut strukturen och på minus tecknet för att fälla in den igen. Väldigt likt ”utforskaren” i Windows”

Block och Media

Block är delar av innehåll som sparas på en enda plats men som kan återanvändas och delas mellan webbplatser. Ett typiskt block är våra vänsterpuffar(Löpsedlar) som finns på startsidan.

Se avsnitt: Fel! Hittar inte referenskälla. i manualen.

Media är en plats där vi laddar upp alla våra bilder och dokument. Dessa kan återanvändas på flera sidor och de finns i denna struktur.

Klicka på mappikonen ⁽⁷⁾ längst upp i högra hörnet för att öppna verktygsfält. Här finns två flikar.

En för Block och en för Media.

Block

Skapa en struktur med kataloger som sedan blocken skapas i.

Block som ligger i dessa kataloger kommer du åt från vilken sida som helst och kan användas på flera sidor och behöver bara redigeras på ett ställe.

En katalog som skapas här skapas med automatik även upp under Media. Klicka på alternativmenyn ⁽⁸⁾ till höger om katalogen där du vill ha den nya katalogen, välj Ny katalog och namnge den.

För denna Sida. När du skapar ett block som bara ska användas på en sida, ställ dig på den sidan och skapa blocket under katalogen För denna Sida.

Då undviks att det blir mycket innehåll och därmed rörigt i blockbiblioteket. Slängs sedan sidan så slängs samtidigt blocket och då undviks också att en massa oanvänt innehåll ligger och skräpar.

Redigera block

För att redigera ett block, klicka på alternativ ⁽¹⁾ längst till höger om ditt block som visas när du för musen över och välj redigera, alternativt

dubbelklicka.

Flytta, kopiera och ta bort ett block i kataloger

När du flyttar, kopierar och tar bort en fil du laddat upp använder du samma kommandon på snabbmenyn som för sidor.

Eftersom block och filer delar samma kataloger påverkas allt innehåll i en sida om du tar bort katalogen eller en puff, bild eller fil från trädstrukturen. Ett meddelande om ev befintliga referenser till innehållet visas så att du kan ta bort dessa länkar innan du tar bort ett block.

Observera att blocket inte längre publiceras på webbplatsen när det har flyttats till papperskorgen.

Media

Med media avses i EpiServer filer, t.ex. en bild, ett dokument (exempelvis en PDF-fil eller ett Word- dokument), eller kanske en videosnutt från Youtube eller något du filmat med din mobiltelefon.

Mediafiler hanteras från mediebiblioteket på fliken Media i resursfönstret. Här kan du skapa

kataloger och ladda upp dina mediafiler. Du kan sedan använda filerna genom att dra dem till en sida eller ett block.

En katalog som skapas här skapas med automatik även upp under Block. Klicka på alternativmenyn ⁽⁸⁾ till höger om katalogen där du vill ha den nya katalogen, välj Ny katalog och namnge den med det namn du vill att den ska ha.

För denna Sida. När du laddar upp en fil som bara ska användas på en sida, ställ dig på den sidan och ladda upp filen under katalogen ”För denna Sida”. Då undviks att det blir mycket innehåll och därmed rörigt i mediaarkivet. Slängs sedan sidan så slängs samtidigt tillhörande media och då undviks också att en massa oanvända bilder och filer ligger och skräpar.

För att ladda upp en bild eller ett dokument, klicka på katalogen där filen ska ligga så den blir markerad. Klicka på ikonen under ⁽⁹⁾ och bläddra genom att klicka på plustecknet i dialogrutan som öppnas.

Du kan också dra och släppa filer här från din dator. Flera filer kan dras in samtidigt.

Tips!

Tänk på att döpa bilder eller dokument till vad de innehåller. Det är dels bra för sökmotorer, men även för dig och andra redaktörer när bilderna eller dokumenten ligger i mediaarkivet så man snabbt ser vad det är för bild eller från namnet på ett dokument kan härleda till vad det innehåller. Undvik å,ä,ö i filernas namn.

Gadget – versionshantering

En gadget är olika små insticksprogram som går att använda som sköter olika saker på webbplatsen.

En väldigt bra Gadget att ha är Versioner.

Så här lägger du till en gadgeten för Versionshantering. Detta lilla ”program” är bra för att återställa en äldre version av en sida eller för att se och jämföra med ett tidigare arbete för din sida. Man ser även vilken användare som varit inne och redigerat och publicerat en sida.

 Klicka på Lägg till gadgetar genom att klicka på det lilla kugghjulet (1)

 I fönstret ”Gadgetar” visas en lista med alla gadgetar. Klicka på Innehåll (2)

 Sedan markera du Versioner (3)

 Klicka på Stäng

 Versioner (4) hittar du sedan längst ner i trädstrukturen under

”Versioner”.

Tips och tricks

Tips om hur du skapar ett starkt och bra lösenord.

Starka lösenord behöver vara:

 Inte nedskrivna

 Tillräckligt långa och unika så att ingen annan kan gissa dem

 Det finns många sätt att skapa ett säkert lösenord på. Fundera ut ett system som du lätt kommer ihåg när du skapar Dina lösenord.

Exempel:

Ett tips är att tänka lösenordsfras eller lösenordsmening istället för bara lösenord som ett ord.

Använd till exempel korta ord med mellanslag eller något annat tecken som avdelare i en mening som du har valt.

Du kan också förbättra kvalitén på din lösenordsfras enligt följande. Börja med den mening som du har valt. Ta bort mellanrummen mellan orden och gör första bokstaven på varje ord till stor bokstav.

Använd ett tecken som avdelare mellan dina ord, till exempel #, !,= eller ^.

Lägg till eller byt ut bokstäver mot siffror och specialtecken, exempelvis enligt en

”översättningstabell” som du själv har tänkt ut.

Dra och släpp

Med denna funktionalitet så kan du enkelt flytta sidor till ett annat ställe i din struktur på

webbplatsen (Precis som när du flyttar något på din dator). Eller du kanske bara vill ändra ordningen på hur de skall ligga på sidan. Välj placering av en sida genom att dra och släppa den i sidträdet till det stället du vill flytta sidan/mappen i strukturen.

OBS!

Tänk på att inte göra detta om sidorna är sorterade i alfabetisk ordning eller om t.ex. senast publicerade sidan läggs överst. Då kommer sidorna att konverteras till att ligga enligt sorteringsordning istället.

Klipp ut och flytta sidor

En sida kan via alternativmenynklippas ut (eller kortkommando CTRL+X) och klistras in någon annanstans. – Så länge sidtypen har tillåtelse att placeras där, ett hänglås visar att det inte går att se eller redigera där.

Kopiera sidor

Om en ny sida ska skapas och som har mycket gemensamt innehåll med en befintlig sida kan den sidan kopieras. Välj Kopiera i alternativmenyn(eller kortkommando CTRL+C), markera sidan som den nya sidan ska ligga under och välj i alternativmenyn Klistra in.

Förhandsgranska för olika Mediakanaler

I EPiServer kan du förhandsgranska innehållet du redigerar i olika * mediekanaler, t.ex. en smartphone eller Ipad. Klicka på och sedan på mobiltelefonen längst ut till höger när menyn vecklat ut sig och välj sedan vad du vill förhandsgranska sidan på för media. Iphone, Ipad eller Android telefon.

Du kan förhandsgranska innehållet på följande sätt:

Förhandsgranska

Växla till förhandsvisning som visar hur besökarna skulle se innehållet. Klicka igen för att komma tillbaka till redigeraläget.

Visningsinställningar

Klicka på öga-symbolen för att förhandsgranska innehållet med följande visningsinställningar:

* Mediekanaler

Välj att visa innehållet som det visas med förinställningarna i EPiServer CMS-exempelwebbplatsen:

Automatisk, Mobil och Webb. Välj därefter den konfigurerade upplösningen, t.ex. en stor skärm eller en smartphone.

Inställningar för en specifik sida

Om man scrollar med mushjulet uppåt på en sida, så visas den sidans speciella inställningar.

Här kan man göra några saker. Men det som är av intresse är ”Namn” samt ”Enkel adress”

Namn (Ändra namn på en skapad sida)

Här kan du ändra sidans namn ifall det skulle blivit fel namn när du skapade sidan.

Namn i URL (www adress)

Detta kan behöva ändras om t ex en sida har kopierats eller byter namn, så att url:en alltid stämmer överens med vad sidan heter. T.ex. www.hjart-lung.se/föreningsnamn/om-oss vill ni kanske ska vara www.hjart-lung.se/föreningsnamn/om-oss-i-foreningen.

Enkel adress (Genvägar)

Denna adress är er direktlänk till era sidor. Ex stor det ”dalarna” där så betyder detta att er direktlänk till sidan är www.hjart-lung.se/dalarna det kan även vara en direkt adress till en vanlig sida. Ex:

www.hjart-lung.se/foreningsstod

Visa i navigering

Kryssa ur om du vill gömma en sida i navigeringen (göra den osynlig på webbplatsen).

Hur sparar jag mina sidor jag jobbar med?

Det finns ingen ”Spara” knapp i detta system. När du är inne och redigerar en sida så sparas ändringar automatiskt åt dig så fort du gör en ny ändring. Du ser att sidan är sparad men inte publicerad

när det dyker upp en blå pil vid alternativknappen Publicera uppe i högra hörnet. För att ändringarna ska synas publikt måste sidan publiceras.

Obs!

Om du ska redigera en sida som visar den här blå pilen och det står ’Publicera?’ på knappen, så har någon gjort ändringar på sidan som inte är publicerade. Då är det nödvändigt att stämma av med den som gjort ändringarna på sidan om du kan gå in och redigera och publicera sidan.

För att se vem som arbetar på sidan kan du dels se i sidträdet där en liten personikon syns. Håll musen stilla över ikonen så visas i en tooltip vem som redigerar.

Om du har gjort ändringar på sidan som du inte vill publicera, återgå alltid till publicerat läge genom att klicka på Publicera och sedan välja Återställ till publicerat.

En liten ordlista för konstiga benämningar i manualen

Detta betyder att du kan redigera text och bild direkt på sidan i redigera läget utan att behöva gå in på Alla egenskaper sidan

Brödsmulor eller länkstigar

Ofta används Brödsmulor/länkstigar som navigation på webbplatser och fungerar som ett ett hjälpmedel för att snabbt navigera sig tillbaks på en webbplats där du har klickat dig igenom en struktur som kanske sträcker sig över flera sidor. Se bild ovan.

Gadgetar

En gadget är ett litet program som kan göras tillgängligt för enkel åtkomst i verktygsfältet och navigeringsfönstret i EPiServer. Det kan vara t.ex. gadgets för formulärvisning, statistik för besökargrupper, versionshantering och produktkatalogen mm.

Vad är en Gadget? En gadget är ett så kallad ”Sidelement” eller enklare sagt små program som man kan lägga till på webbplatsen för att uderlätta arbetet. En väldigt bra sådan gadget är Versioner.

Dashboard

Dashboard Dashboard är ett personligt område där du samlar och visar viktig webbplatsinformation.

En dashboard är även ett tilläggsområde där du kan anpassa gadgetar för att visa viktig information och erbjuda snabb åtkomst till vanliga uppgifter och ofta använda funktioner. Det kan t.ex. handla om att visa sidor som nyligen ändrats eller övervakning av ett webbformulär.

Pin

Det betyder att du kan nåla fast ett fösnter på arbetsytan så att det inte rör eller flyttar på sig Tooltip

Tooltip är ett vanligt grafiskt användargränssnitt. Det utgörs av en liten ruta, oftast ljusgul, med en förklarande text som visas när besökaren håller pekaren över ett objekt, till exempel en hyperlänk eller en bild.

scrollar / scrolla

Betyder att man bläddrar upp eller ner på sidan via musens lilla hjul eller via att man klickar med musen på upp och ner pilarna i sin webbläsare eller program.

Mediefil

Media Med media avses i EPiServer filer, t.ex. en bild, ett dokument (exempelvis en PDF-fil eller ett Word-dokument), en video. Media hanteras från mediebiblioteket på fliken Media i resursfönstret.

Här kan du skapa kataloger och ladda upp mediefiler. Du kan sedan använda mediefilerna genom att dra dem till en EPiServer sida eller ett block.

Cachelagring

Innebär att datorn sparar en kopia av senast använda webbsidan för att "snabba" upp sidvisningen.

Man kan hålla nere CTRL tangenten samtidigt som man trycker på F5 så tömmer man cashminnet på datorn.

Vanliga användbara kortkommandon

Ctrl + X Klippa ut

Ctrl + V Klistra in

Ctrl + C Kopiera

Ctrl + Z Ångra en åtgärd

Del Ta bort något

Ctrl + A Markera allt

Ctrl + rulla med mushjulet Zoomar in och ut