Redaktörsutbildning, EPiServer CMS 6 Kenneth Karlsson 2012-11-29.

En presentation över ämnet: "Redaktörsutbildning, EPiServer CMS 6 Kenneth Karlsson 2012-11-29."— Presentationens avskrift:

1 Redaktörsutbildning, EPiServer CMS 6 Kenneth Karlsson 2012-11-29

2 Vad ska vi göra?  Presentation  Introduktion till EPiServer, grundläggande begrepp  Arbetssätt i EPiServer  Online Center  Redaktörsgränssnittet – Översikt – Skapa, spara och publicera innehåll – Formatera innehåll – Arbete med länkar och bilder  Filhantering  Skapa struktur på webbplatsen  Övriga sidtyper/funktioner – Formulär – Nyhetslistning – Personlistning – ”Puffar”/kampanjytor – Startsidan  Kursdeltagarnas frågor

3 Hålltider  09:00Start  10:15Paus  12:00 – 13:00Lunch  14:30Paus  Ca 16:00Avslutar vi dagen

4 Vem är du?  Namn, roll  Tidigare erfarenheter av webb/EPiServer  Förväntningar på kursen?

5 EPiServer Publicera på webben

6 Vad är EPiServer?  Webbpubliceringsverktyg för alla typer av webbplatser – Publika webbplatser, intranät, extranät  Ingen specialistkunskap krävs – arbetet jämförbart med ordbehandling – Decentraliserat ansvar för webbplatsen  Redigering sker via webbläsare  Fokus på innehåll – Innehåll matas in via formulär helt fria från grafisk form – Innehållet sparas i en databas skiljt från den grafiska formen – Redaktörerna kan fokusera på innehåll och struktur istället för hur det ska se ut

7 Grundläggande begrepp  Visaläge – Den vy i vilken besökarna ser webbplatsen  Redigeraläge – Den vy som redaktörerna arbetar i för att bygga upp webbplatsens struktur och fylla den med innehåll  Adminläge – Den vy som administratörer och utvecklare arbetar i för att göra inställningar på webbplatsen, sätta rättigheter och anpassa de sidtyper redaktörerna kan arbeta med

8 Länkar  Webbplats http://stockholm.svenskfotboll.se/ http://stockholm.svenskfotboll.se/  OnlineCenter http://stockholm.svenskfotboll.se/svffui/ http://stockholm.svenskfotboll.se/svffui/  Redigeraläge http://stockholm.svenskfotboll.se/svffui/cms/edit http://stockholm.svenskfotboll.se/svffui/cms/edit

9 Logga in i redigeraläge  Internet Explorer 7 eller senare (tillåt popup)  Firefox 3.5  PC eller Mac

10 Online Center  Översikt om vad som händer  Välj system  Välj flik  Gadget

11 Redaktörsgränssnittet  Informationsstrukturen – Struktur densamma för besökaren som för den som redigerar  Verktygspaletten – Vissa funktioner nås genom högerklick i strukturen  Förhandsgranskning av sidan  Flikindelat gränssnitt

12 Övning 1. Skapa en ny sida och döp den till. Använd mallen Vanlig sida. 2. Ge sidan namn, sidrubrik och titel (låt dem vara olika för att se skillnaden) 3. Skriv lite information om dig själv. 4. Markera några av orden med fet eller kursiv stil. 5. Räkna upp din arbetsuppgifter i en punktlista med en underrubrik som överskrift. 6. Förhandsgranska och publicera. 7. Gå till Visaläge och titta på sidan.

13 Fliken Information  Innehåller de egenskaper (fält) som används allra mest  Några gemensamma fält i alla mallar – Namn (obligatoriskt) – Börja publicera – Sluta publicera – Sidans rubrik – Sidans titel

14 Editorn  Formatering av text  Knapparna ovanför editorn  Kopiera in text (oformaterat!)  Lägga in bilder  Skapa länkar

15 Skriv för webben  Anpassa dina texter. Tänk på målgruppen.  Använd begripligt språk  Skriv tydliga rubriker – Utgå från vad texten är, inte hur du vill att den ska se ut!  Dela in texten i stycken – "En tanke - ett stycke"  Använd punktlistor vid uppräkningar – Det skapar en iögonfallande detalj

16 Övning 1. Redigera sidan du gjorde i övning 1. 2. Öppna www.netrelations.se och kopiera lite text och klistra in på din sida. 3. Formatera den inklistrade texten med lämpligt format. 4. Spara och publicera sidan. 5. Gå till Visaläge och titta på sidan. 6. Gå tillbaka och redigera sidan, lägg till lite text i editorn och ange att sidan skall publiceras 5 min från nu. 7. Förhandsgranska och publicera. 8. Om du hinner: öppna ett Word-dokument på din dator och kopiera lite text och klistra in på din sida. 9. Formatera den inklistrade texten med lämpligt format.

17 Infoga bilder  Tänk igenom dina bildval  Rättigheter till bilden  Alternativa texter  Regler för alttexter: – Informationsbärande bilder ska ha en beskrivande alt-text. Om det står en text på bilden ska alt-texten vara densamma. – Dekorativa bilder ska inte ha någon alt-text – Länkade bilder måste alltid ha en alt-text! Förslagsvis den text du skulle använda som länktext om bilden inte fanns.

18 Övning 1. Skapa en sida som skall vara undersida till sidan du gjorde i första övningen. Använd mallen Vanlig sida. 2. Döp sidan till Mina bilder. 3. Klistra in ett textblock på sidan och formatera texten snyggt. 4. Infoga en bild på valfritt ställe i texten och skriv lämplig alternativtext (eller bildtext) till bilden 5. Spara och publicera. 6. Gå till Visaläge och titta på sidan. 7. Om du hinner: Ladda upp en ny bild till EPiServer från din dator och infoga på sidan.

19 Övning Vänster- eller högerjustering av bild: 1. Redigera sidan du nyss gjorde 2. Högerklicka på bilden och välj bildegenskaper. 3. Välj någon av alternativen under CSS-klass, left eller right 4. Nu justeras bilden till vänster eller höger och texten som låg under bilden hamnar bredvid (”flyter” runt bilden)

20 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

21 Övning 1. Skapa en sida som skall vara undersida till sidan du gjorde i första övningen. Använd mallen Vanlig sida. 2. Döp sidan till Mina länkar. 3. Klistra in ett textblock på sidan och formatera texten snyggt. 4. Skapa länkar från olika ställen i texten:  Extern länk som leder bort från webbplatsen  Intern länk till någon annan sida på webbplatsen  Mejllänk  Länk till ett dokument 5. Spara och publicera sidan. 6. Gå till Visaläge och kontrollera att länkarna fungerar som du tänkt dig.

22 Ändra strukturen  Flytta sida – Dra och släpp – Klipp ut och klistra in via verktygspaletten – Höger musknapp  Ta bort sida – Dra och släpp till papperskorgen – Krysset i verktygsfältet – Höger musknapp – Papperskorgen är en egen trädstruktur

23 Övning 1. Skapa en temporär sida med ett lämpligt (unikt) namn. Använd mallen Vanlig webbsida. 2. Flytta sidan till ett annat ställe i strukturen. 3. Kopiera den flyttade sidan till din del av strukturen. 4. Radera kopian. 5. Flytta den borttagna sidan från papperskorgen tillbaka till den plats där du först skapade den.

24 Fliken Avancerad information  Synlighet i menyer  Sortering av sidor  Enkel adress vs Webbadress  Sammanfattning (syns i Google)  Exkludera sidan i sökning (intern sökmotor)  Exkludera sidan i sökväg (”bread crumbs”)

25 Övning 1. Gör så att din huvudsida inte är synlig i menyn. 2. Ge din sida ett kortnamn (enkel adress). 3. Gå till Visaläget och testa att kortnamnet fungerar.

26 Formulär  Kan användas för anmälningar, enkäter, undersökningar, adressändring etc.  Endast fantasin sätter gränser…

27 Övning 1. Skapa en sida som skall vara undersida till sidan du gjorde i första övningen. Använd mallen Vanlig sida. 2. Döp sidan till. 3. Skriv en kort text om vad besökaren förväntas göra i formuläret och formatera texten snyggt. 4. Infoga ett forumlär på din sida (fliken Formulär). 5. Gå till visaläget och prova att posta ett par resultat i formuläret. 6. Gå tillbaka till redigeraläget och exportera resultatet till Excel.

28 Övriga funktioner 1. Nyhetslistning 2. Personlistning 3. ”Puffar”/kampanjytor 4. Startsidan

29 Tips för redaktörer

30  En URL ska aldrig innehålla å, ä, ö eller andra ”konstiga” tecken. Namn som kan bli en del av en länk är: – Namn på mappar och kataloger – Filnamn (word, pdf, osv) – Namn på bilder  Potentiella följder: – Dokumentet går inte att öppna – Filen måste döpas om = samtliga länkar till dokumentet bryts – Upparbetade länkar i t.ex. Google bryts

31 Tips för redaktörer  Skriv enkla texter – ett ämne per sida  Använd fet stil för att poängtera nyckelord - men överanvänd inte!  Kursiv stil är svårläst på skärm  Använd olika rubriknivåer  Dela in text i stycken  Använd punktlistor  Undvik att göra text som bild  Markera citat  Använd nyckelord i sidtitlar och i rubriker

32 Använd inte!  Förkortningar  Understruken text som inte är länkad  Olika färg på texten. Detta kan lätt tolkas som länkad text  VERSALER I LÖPANDE TEXT ELLER LISTOR

33 Hjälp för redaktörer  Frågetecknet i EPiServer  Redaktörshandboken: www.episerver.sewww.episerver.se  Anpassad manual eller användarstöd för er kan beställas

34 Frågor?