Grundutbildning Episerver. Vad ska vi göra? Inledning, presentation Genomgång av konceptet för nya nacka.se Grunder i Episervers gränssnitt Praktiskt.

En presentation över ämnet: "Grundutbildning Episerver. Vad ska vi göra? Inledning, presentation Genomgång av konceptet för nya nacka.se Grunder i Episervers gränssnitt Praktiskt."— Presentationens avskrift:

1 Grundutbildning Episerver

2 Vad ska vi göra? Inledning, presentation Genomgång av konceptet för nya nacka.se Grunder i Episervers gränssnitt Praktiskt arbete i Episerver – Skapa, formatera, uppdatera och publicera innehåll – Klippa/klistra – Infoga länkar – Struktur och riktlinjer för filer, bilder och block – Infoga bilder på olika sätt – Arbeta med block – Filhantering – Publicera nyheter Avslutning

3 Koncept

4 Hitta Läsa och göraMina val

5 Att navigera mot målet NavigeringMål

6 Navigeringssidor Används av besökaren för att ta sig vidare mot ett mål. Besökaren skannar sidan snabbt och försöker hitta något som indikerar rätt väg mot målet. Målsidor Används av besökaren för att utföra en uppgift. Besökaren är mottaglig för att anstränga sig lite mer för att slutföra uppgiften.

7 Navigeringssidor Exempel Startsida Kategorisida Nyhetslista A-Ö Evenemangslista Målsidor Exempel Vanlig sida Tjänstsida Frågor och svar Nyhetssida Evenemangssida

8 NavigeringMål Kategorisida Tjänstsida Frågor & svar-sida Vanlig innehållssida

9 Sidtyper – konceptet bakom Startsida Kategorisida Vanlig sida Tjänstesida Frågor och svar Nyheter A-Ö

10 Startsida Erbjuder besökaren tydliga vägar mot målet Låter besökaren anpassa sin upplevelse Används samtidigt för att kommunicera med besökaren, nyhetsflöde, evenemang, blockytor mm

11 Kategorisida Tjänstefokuserad Leder besökaren vidare genom tydliga ingångar Används för ”flikar” eller andra navigeringssidor Stora möjligheter att variera utseende beroende på innehåll Kan bestå av huvudingångar, diverse block och nyheter om området

12 Vanlig sida Vanligaste sidtypen Vanlig informationssida med högermeny Rubrik, ingress, text, bilder, länkar, punktlistor, tabeller, osv osv… Blockytor ovanför, (i) och under brödtext samt under högermenyn Använd med fördel block för att visuellt lyfta viktig information såsom kontaktuppgifter

13 Tjänstesida Syftar till att renodlat presentera en tjänst steg för steg Varje steg i beskrivningen av tjänsten skapas som ett eget block (”Stegblock”) – Automatisk numrering av stegen Visuellt stöd för att skapa tydliga checklistor / instruktioner Knapp skapas i de steg där besökaren ska agera! – Knappen skapas som ett eget block (”Call-to-action-block”) – CTA-blocket placeras i Stegblocket

14 Frågor och svar Samlingssida för frågor och svar som skapas för en kategori av frågor Varje enskild fråga och dess svar skapas som en egen undersida Frågor kan ”bedömas” i ett röstningssystem som styr sorteringen [Ingen övning]

15 Nyhetslista Agerar ”behållare” för underliggande nyheter Automatisk indelning i års- och månadsstruktur Nyheter kan taggas för filtrering Nyhetslistor kan visas i nyhetslistningsblock på t.ex. en kategorisida Användarna kan välja att följa olika nyhetsflöden via – nacka.se – e-post – RSS (väljs vid tryck på knappen "Följ nyheterna"

16 A-Ö Alfabetisk listning av utvalda sidor Kan skapas för hela nacka.se eller för en delmängd av webbplatsen A-Ö-registret skapas automatiskt – Bokstäver med innehåll under sig ”tänds” Möjligt att inkludera/exkludera sidor från olika grenar i strukturen

17 Exempel på andra sidtyper/funktioner Enhetssida Evenemang Kontakta oss Underwebb, startsida Bildspel Dokumentlistning Länklistning Sociala widgets (Twiiter, Instagram, Facebook) YouTube-film

18 Redaktörsstöd www.nacka.se/redaktorsguide Redaktionella riktlinjer Samlad lista över funktionalitet Exempel på olika funktioner i bruk ”Så här gör du” Mer info för dig som redaktör: www.nacka.se/redaktor Gå in och följ diskussionen så missar du ingenting!

19 Redaktörsgränssnittet - översikt Meny för att logga in upp till höger En redaktör ser sidan precis som en besökare ser den även i redaktörsgränssnittet Menyer och paneler visas bara när de behövs – Kan ”nålas fast” Olika ytor: globala menyn, trädstrukturen, innehållsområdet, resursfönstret

20 Redaktörsgränssnittet – olika ytor Funktioner i den globala menyn Funktioner i verktygsfältet Informationsstrukturen till vänster Innehållsområdet i mitten ”Resursfönstret” till höger

21 Globala menyn Länk till episerver.com Gå till Visaläget Onlinehjälp Personliga inställningar Sök i redigeraläget Dashboard: ett område för gadgets Åtkomst till funktioner i CMS:et [Produkter]: tredjepartsprodukter i installationen Åtkomst till Episerver Add-on Store

22 Verktygsfältet Lägg till sida/block Visningsalternativ Förhandsgranska ”Breadcrumbs” Auto-save! Publiceringsalternativ

23 Redigering På sidan-redigering – Redigering direkt i fälten – Editor-knappar direkt ovanför fältet – Notera knappen för att klistra in oformaterat… Ledtexter vid redigeringsytorna På sidan-redigering vs ”formulärredigering”

24 Hantering av olika innehåll Allt innehåll hanteras lika! – en sida – ett block – en fil/media – en bild – en länk ETT sätt och du vet hur du ska jobba med allt! Drag and drop

25 Episerver i praktiken – nu ska vi öva! Arbeta med olika sidtyper, block och funktioner i Episerver – Skapa, formatera, uppdatera och publicera innehåll – Klippa/klistra – Infoga länkar – Struktur och riktlinjer för filer, bilder och block – Infoga bilder på olika sätt – Arbeta med block – Filhantering – Publicera nyheter

26 Vanlig sida Vanligaste sidtypen Vanlig informationssida med högermeny Rubrik, ingress, text, bilder, länkar, punktlistor, tabeller, osv osv… Blockytor ovanför, (i) och under brödtext samt under högermenyn Använd med fördel block för att visuellt lyfta viktig information såsom kontaktuppgifter

27 Övning 1.Skapa en ny sida under sidan Utbildning 2.Basera sidan på sidtypen Vanlig sida och ge sidan 3.Redigera och formatera sidans ”basinnehåll” direkt på sidan (ingress, brödtext) 4.Använd knapparna vid brödtextfältet och formatera ditt innehåll på olika sätt (fet/kursiv stil, punktlistor, underrubriker) 5.Publicera sidan

28 Om editorn Formatering av text (obs H2, sen H3) Knapparna ovanför editorn Kopiera in text (oformaterat!) Lägga in bilder Skapa länkar Infoga tabeller osv

29 Övning 1. Redigera sidan du nyss skapade 2. Klistra in en textmassa på sidan (OFORMATERAT!) 3. Formatera textmassan snyggt 4. Peka ut en Artikelbild 5. Publicera sidan

30 Övning 1. Gå till sidans formulärläge (Alla egenskaper) 2. Ge sidan en annan rubrik och titel 3. Fyll i A-Ö-länkord och synonymer 4. Publicera sidan

31 Övning 1. Redigera sidan du nyss skapade 2. Gå till sidans formulärläge (Alla egenskaper) 3. Ge sidan en Puffrubrik, Puffbild och Pufftext 4. Publicera sidan Puffinformation visas när du väljer att ”puffa” för sidan från en annan sida i strukturen (t.ex. från Kategorisidan)

32 Infoga länkar Gör länktexter beskrivande och självständiga Undvik "här", "klicka här", "läs mer" eller "länk till”. – Rätt: Läs hela rapporten om förbundets nya föreningsprojekt – Fel: Klicka här för att läsa hela rapporten om förbundets nya föreningsprojekt

33 Övning – Infoga länkar 1.Skapa en undersida till sidan du gjorde i första övningen. Använd Vanlig sida. 2.Döp sidan till Mina länkar. 3.Skriv eller klistra in lite text på sidan. 4.Infoga länkar i texten: Extern länk till annan webbplats Intern länk E-postlänk 5.Publicera sidan, gå till Visaläge och kontrollera att länkarna fungerar.

34 Struktur och riktlinjer för filer, bilder och block

35 Fil/mediahantering 1.För denna webbplats – Den ”globala mappstruktur” många använder idag 2.För följande sida/block – Tillgängligt för en specifik sida eller ett specifikt block – Användbart då filer/blocks används för ett specifikt syfte – Rättigheter ärvs från sidan

36 Mediahantering Allt hanteras lika = bra för redaktör och bra för utvecklare – Sidor, filer, bilder, block osv. Block och mediefiler följer samma mappstruktur – Enklare hitta, igenkänning – Enklare behörigheter

37 Övning – Ladda upp bilder/filer 1.Skapa en undersida till sidan du gjorde i första övningen. Använd Vanlig sida. 2.Ladda upp en ny bild till Episerver från din dator 3.Infoga bilden som Ingressbild och notera dess placering (till skillnad från Artikelbild) 4.Ladda upp ett dokument till Episerver från din dator 5.Länka till dokumentet från sidan 6.Publicera sidan

38 Block Rubrik, text, bild och länkar i olika kombinationer Sidor från informationsstrukturen (t.ex. Personsida, Enhetssida) Hur block disponeras och vilka som är tillåtna beror på sidtypen de placeras på Kan återanvändas genom strukturen Dra och släpp in på sidan Struktureras i ”mappar”

39 Exempel på blocktyper på nacka.se BlocktypBeskrivning Vanligt blockAnvänds för att skapa ett klickbart block med rubrik och bild för att "puffa" för något SidlistningAnvänds för att skapa en listning av interna sidor som visas med sin rubrik och ingress LänklistningAnvänds för att skapa lista av externa och interna länkar BildspelAnvänds för att skapa ett bildspel Twitter, Instagram, Facebook Används för att infoga en widget från sociala medier KontaktlistningAnvänds för att skapa listning av personer YoutubeAnvänds för att bädda in en film från Youtube

40 Övning 1.Skapa en undersida till sidan du gjorde i första övningen. Använd Vanlig sida. 2.Döp sidan till Mina block a.Fyll i A-Ö-länkord 3.Infoga (minst) två befintliga block på sidan (Redaktörsguide – Vanligt block) 4.Prova att byta plats på blocken 5.Publicera sidan

41 Övning 1.Skapa en undersida till sidan du gjorde i första övningen. Använd Vanlig sida. 2.Döp den till Mina listningsblock 3.Skapa nya block och placera på sidan baserade på: a.Vanligt block b.Sidlistning c.Länklistning d.Kontaktlistning 4.”Labba” med dina block!

42 Nyhetslista Agerar ”behållare” för underliggande nyheter Automatisk indelning i års- och månadsstruktur Nyheter kan taggas för filtrering Nyhetslistor kan visas i nyhetslistningsblock på t.ex. en kategorisida Användarna kan välja att följa olika nyhetsflöden via – nacka.se – e-post – RSS (väljs vid tryck på knappen "Följ nyheterna"

43 Övning Markera sidan Utbildning -> Nyhetslista Skapa en ny sida – notera att det automatiskt blir en nyhetssida Skriv din nyhet Gå till nyhetens formulärläge (Alla egenskaper) och tagga nyheten Publicera sidan Sidan flyttas automatiskt in i rätt år/månad i understrukturen

44 Frågor?