DSV Stockholms universitet och KTH Webbeditering Riktlinjer och instruktion Annika Nurcahyo 090625
Innehåll Stilmallar... 3 Rubriker... 3 Brödtext... 3 Stilmall för viktig information... 3 Text i högerspalt... 3 Stilmall för särskild länk... 4 Instruktion för editering... 5 Infoga text... 7 Att göra länkar... 7 Infoga bilder... 8 Språkråd... 10 Information om den grafiska profilen och riktlinjerna... 11 2
Stilmallar Webbplatsens editeringsfunktion är uppbyggd med stilmallar (CSS). Textens typsnitt, färg, form och vikt är redan förutbestämt och ska inte ändras. Anledningen är att om den grafiska profilen ändras, så ändrar man endast källkoden för stilmallarna, och alla ändringar följer med på hela webbplatsen. Dessutom undviker man att det råkar blir fel. Rubriker Heading 1. Varje sida har alltid en huvudrubrik Heading 2. Underrubrik, nivå 2. Heading 3. Underrubrik, nivå 3. Använd de olika rubriknivåerna på rätt sätt. o Ge varje sida en rubrik, H1. Huvudrubriken, den orange (H1), ska finnas på alla sidor och heta samma sak som sidan heter i menyn. o Lägg gärna till underrubriker (H2) Det är inget tvång att använda sig av rubrikerna H2-H3. Det är tillåtet att hoppa över nivå 2 och gå direkt på nivå 3 om det passar i sammanhanget. Brödtext Paragraph. Används till brödtext. Ingress Lead (ingress). Tillval om man vill framhäva inledande stycke i en längre text. Stilmall för viktig information Box. Stilmallen box skapar en ruta med tonad bakgrund för texten som på så sätt lyfts fram extra. Används sparsamt. Text i högerspalt Olive heading, Sky heading, water heading, Fire heading. Dessa rubriker används i högerspalt. De består av ett färgat fält som kan användas högst upp för att markera ett textstycke eller textblock som det kallas i högerspalt. Paragraph. Skapar text i ett block utan bakgrund (vit). Olive block, Sky block, water block, fire block, gradient (tonat) block. Finns också med grafik i form av leaves samt flames. Stilmallen skapar färgade bakgrunder för texten. 3
Att tänka på: Man kan lägga flera block i olika färger i högerspalt. En sida får dock inte innehålla fler än tre komplementfärger (olive, sky, water, fire). Eftersom huvudrubriken mitt på sidan alltid är orange (eld/fire) innebär det i praktiken max ytterligare två färger. Rubriker som hör till ett block ska vara i samma färg som blocket såvida man inte använder vit eller tonad bakgrund. Stilmall för särskild länk Small right arrow. Används vid länkar i listor, i notiser, i slutet av texter osv. Stilmallen gör att länktexten hamnar längst till höger och markeras med en liten orange pil. Kan användas både i mitten- och högerspalt. 4
Instruktion för editering Öppna webbläsaren Mozilla Firefox (detta har att göra med att kommandot för inloggning inte fungerar i Internet Explorer). Gå till den sida som ska editeras. Logga in genom kommandot crtl+q. Inloggning och lösen är samma som DSV-kontot. Sidan som öppnas ser ut såhär: Här återfinns stilmallarna (css). Editering fungerar i princip på samma sätt som i ett vanligt ordbehandlingsprogram. Skriv eller redigera befintlig text. (Glöm inte spara: när du är klar! ) Observera att alla ändringar går igenom direkt när du sparat. 5
Här är rubriken markerad med Olive heading. Väljer man enter efter denna rubrik blir texten på nästa rad automatiskt paragraph, dvs svart text mot vit bakgrund. Om man vill skapa ett färgat eller tonat block går det bra att markera första raden och sedan fortsätta skriva för att stilmallen för block ska följa med hela texten. Vid nytt stycke, listningar o.s.v. måste man dock använda shift+enter för radbryt, annars börjar man automatiskt på ett nytt textblock med en vit kant emellan. 6
Infoga text 1. Hämta text från Word? Klistra aldrig in direkt från Word. Då följer formateringar med, som kan ställa till det om man i efterhand vill editera samma text. Inte ens om man väljer klistra in från Word i editeringen, fungerar det alltid. Det säkraste sättet är att helt enkelt klistra in texten med hjälp av symbolen för infoga som text : i editorn, eller gå via ett vanligt textdokument (anteckningar/notepad) och sedan redigera rubriker, punklistor o.s.v. i efterhand. 2. Om du råkade klistra in från Word och spara och sidan ser konstig ut Välj källa i menyn. Man kan då gå in i koden och rensa bort allt skräp som följt med, eller börja om: Öppna en ny sida som ser korrekt ut, kopiera koden rakt av och ersätt den felaktiga sidan med rätt kod och du har en fungerande sida som du kan editera om Att göra länkar På DSV:s webbplats kan man länka till andra webbsidor-/platser, till e-postadresser, till dokument (pdf:er, formulär etc), till information som hämtas från Daisy. Var länkarna placeras är lite beroende på vilken form av information det handlar om. Var sparsam med länkar insprängda i brödtext (lämpar sig oftast bäst om det är filer som ska laddas ner, formulär etc.). Är det information av typen läs mer, så kan dessa ofta placeras i slutet av ett stycke/webbsida. Relaterad information, ofta extern, kan också placeras i högerspalt. Man infogar en länk genom att markera ordet/frasen som ska länkas och sedan klickar på symbolen för länkning. Klistra in länkadress eller ladda upp dokument (se nedan). På nästa flik väljer du om länken hur länken ska öppnas. Default är att länken öppnas i samma fönster. http://-länkar En webbsida eller webbplats kan betraktas som intern eller extern. Internt = alla sidor inom su.se, undantaget personliga webbsidor (people.dsv.su.se), sidor som hämtas från Daisy, labbsidor, bloggar osv. Externt = alla andra webbplatser För länkning på den lokala webbplatsen skrivs inte hela adressen in. Skriv: /utbildning/program för sidan www.dsv.su.se/utbildning/program. Externa webbplatser ska öppnas i nytt fönster och det ska vara tydligt vart länken leder. Helst ska en text om att webbplatsen öppnas i nytt fönster läggas till inom parentes. Exempel: Läs mer om projektet på KTH:s webbplats (länk öppnas i nytt fönster)>>, men man kan i vissa fall också i en rubrik före en lista ange att det är extern information. 7
Stilmallen: Small right arrow används vanligen i slutet av ett stycke, i listor, notiser som hänvisar till längre text. Daisy Om information länkas från Daisy, ska den öppnas i ett pop-up-fönster. För att infoga personlig information som hämtas från Daisy, bläddra till namnet i personallistan, högerklicka och välj kopiera länkadress och infoga. E-postadresser För att det ska vara tydligt för mottagaren vad som händer när man klickar på en länk rekommenderas att mejladressen skrivs ut och länkas. Dokument För att lägga in ett dokument som ska länkas för nedladdning kan man via fliken ladda upp i länkfönstret lägga in rätt fil (kom ihåg att döpa filen till ett passande namn, dock utan å, ä och ö för funktionalitetens skull). Protokoll övrigt väljs då automatiskt och filen skickas till servern. Dokument ska alltid öppnas i separat fönster, men man behöver inte ange detta i länken. Infoga bilder Att tänka på innan publicering: Bilder och bildspråk. Enligt Stockholms universitets riktlinjer ska bilder som används vara av hög kvalitet. Bilderna ska gärna visa och lyfta fram människor i riktiga situationer och människor som kommunicerar med varandra eller betraktaren. Var sparsam med bilder. En bild för att illustrera en text, såvida det inte är flera personer som presenteras med porträttbilder. Äger vi rätt att publicera bilden? Om fotografens namn ska anges, glöm inte det. Är personerna som är med på bilden okej med att den publiceras? Spara först bilden i lämplig storlek. Observera att du kan förminska en bild när den är uppladdad, dock inte förstora eller beskära. För bilder i mittenspalten (huvudsida) ska bilderna ha följande format: Bild som täcker hela sidbredden (564 pixlar). Bilden placeras högst upp på sidan. Bild som täcker halva sidbredden (282 pixlar). Bilden höger- /vänsterjusteras och texten omsluter. Bild som täcker en tredjedel av sidbredden (188 pixlar). Bilden höger- /vänsterjusteras och texten omsluter. För bilder i högerspalt är ett format om max 185 pixlar lagom. Porträttbilder kan vara smalare, 120-150 pixlar går bra. Stapla inte bilder med olika bredd på samma sida i en spalt. För att få bilder i högerspalt att lägga centrerade, använd funktionen center text : 8
Välj Save for webb för att få en bild med upplösning, dpi, lämpad för webbpublicering (finns i Photoshop, och säkert finns liknande kommando i andra bildbehandlingsprogram). Ge bilden ett namn utan å ä och ö é osv. Bilder laddas upp genom att man klickar på infoga-bild -symbolen. Fönstret Bildegenskaper öppnas när man laddar upp en bild. Plocka upp rätt bild och skicka till servern som då hamnar i mappen images med alla andra bilder. Därefter kan du justera bilden så att den lägger sig där den ska vara. Om text ska omsluta bilden, är 4-8px marginal lagom. Obs! I högerspalt används symbolen center text för att få bilden centrerad. Klicka på bilden och därefter på symbolen. Det går att förminska bilden i efterhand. Det kan vara lämpligt när text ska omsluta och inte hamnar riktigt rätt i förhållande till bilden. Justera pixelvärden i fälten bredd/höjd (observera att du inte kan beskära en bild och att förhållandet i höjd- och sidled därför måste vara låst för att proportionerna ska behållas). Beskriv eventuellt bilden genom att infoga en Alternativ text. Viktigt framförallt om det inte framgår av filens namn vad bilden föreställer. 9
Språkråd Undvik helst förkortningar i löptext. Till exempel är ett bra exempel. Skriv hellre ut framför en uppräkning. När förkortningar används, skrivs punkter ut. Engelska? Vi följer de språk- och stavningsregler som gäller för brittisk engelska. Stockholms universitet skrivs just så på svenska. På engelska med versalt U: Stockholm University. Använd aldrig förkortningen SU i extern kommunikation då detta inte är en etablerad förkortning. Kungliga Tekniska högskolan skrivs just så. På engelska: Royal Institute of Technology. Förkortningen KTH är vedertagen och kan användas i löptext. I engelsk text är det lämpligt att först skriva KTH, följt av Royal Institute of Technology för att etablera förkortningen i början av en text. DSV ska inte betraktas som en etablerad förkortning och användas i texter utan närmare förklaring, men på webben kan DSV användas i löptext, då förkortningen finns i huvudet tillsammans med Institutionen för data- och systemvetenskap. Ändelse på förkortning? Korrekt svenska är DSV:s.(På engelska: DSV s ). Exempel på akademiska titelförkortningar på svenska: o Fil.kand. o Fil.mag. o Fil.dr o Fil.lic. Exempel på akademiska förkortningar på engelska o BA, BSc o MA, MSc o PhD Notera att man på brittisk engelska inte skriver ut punkter i titelförkortningar! Om du är osäker på hur någonting ska skrivas på engelska, kontrollera gärna med Högskoleverkets ordbok: http://www.hsv.se/sv-eng-ordbok. 10
Information om den grafiska profilen och riktlinjerna Webbplatsen följer Stockholms universitets riktlinjer för webbplatser. Grafik, typsnitt och färger följer Stockholms universitets visuella identitet. Även om man som webbredaktör egentligen inte behöver fundera så mycket över grafik, typsnitt och färger, eftersom allt finns förvalt i stilmallarna, kan det vara bra att känna till vad som gäller. Typsnitt Verdana används till: navigation, rubriker, ingresser, bildtextrubriker, brödtext på webbplatsens startsida, brödtext i webbplatsens högerspalt. Georgia används till brödtext i artiklar, bildtexter, artikelinformation, vissa rubriker. Färger Förutom huvudfärgen mörkblå finns fyra komplementfärger eld, oliv, himmel och vatten. Eld används i huvudrubriker på sidor. Övriga komplementfärger kan användas som färgade fält och block. Grafiska element I Stockholms universitets grafiska profilering ingår grafiska element, mönster som kan användas i dekorationssyfte. De grafiska mönstren är hämtade från det Stockholms universitets märke (en fackla med en olivkvist och kronor). Framförallt används olivkvisten och eldsflammorna (då kronorna kan förväxlas med andra märken). På webben består mönstret alltid av en tonad nyans av den ursprungliga färgen (aldrig andra färger på färgad bakgrund, som används i tryck). Mer information om policy för finns här: http://www.su.se/pub/jsp/polopoly.jsp?d=608&a=41047 En fullständig manual för webben finns här: http://www.su.designmanual.se/web (inloggning med mitt universitets -konto). Fråga gärna informatören om du undrar någonting som rör publicering eller vad som gäller för den visuella identiteten! 11