Den här sidan visar allt man kan göra med en webbsida på Åbo Akademis webb. Samtidigt är sidan en slags minimanual för webbredaktörerna vid ÅA. Sidan uppdateras med nytt material nu som då. (Den här texten är en ingress-text, den är större än vanlig brödtext. Ingressen skapar man genom att skriva sin texten, måla den och sedan välja Ingress från Format-menyn i verktygsraden.)

På den här sidan hittar du följande

1. Brödtexten
2. Mellanrubriker
3. Länkning
4. Inbäddning
   1. YouTube etc
   2. Panopto
   3. Anchor-poddcast
   4. Thinglink
   5. Iframe
5. Inforuta
6. Länk-knapp
7. De olika rutorna i editorn

Brödtexten

Här kan man lägga in bilder, formatera text (fetstil, kursiv, mellanrubriker o.s.v.), lägga in tabeller o.s.v. Här kan man helt enkelt göra allt det som man brukar kunna göra då man skapar en ”vanlig” webbsida.

Då man lagt in en bild på sidan kan man sedan bestämma om bilden skall vara vänster, eller högerjusterad, eller om den skall ligga på en egen rad och vara centrerad. Detta gör man helt enkelt genom att klicka på bilden och sedan välja något av verktygen som ploppar upp.

Man kan naturligtvis också förstora eller förminska bilden genom att klicka på den och sedan dra i ett av hörnen. Det här är en länk (test).

Vill man lägga in en bildtext klickar man på bilden, sedan på verktyget som har en bild av en penna. Därefter öppnas en ruta där man kan skriva in bildtexten.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a malesuada lectus. Curabitur felis turpis, dictum sed placerat at, luctus quis turpis. Duis mollis felis sed imperdiet fringilla. Sed non ex vitae risus tincidunt convallis. In in posuere sapien. In mollis magna id scelerisque ullamcorper. Morbi facilisis est orci, et egestas nibh ultricies et. Cras lacinia enim non libero mattis, aliquet laoreet nisl iaculis. Vestibulum a nunc vitae risus volutpat fringilla a eu felis. Sed dignissim elementum felis porttitor tempor.

Mellanrubriker

Mellanrubrikerna finns i ett antal olika storlekar. Den första mellanrubriken skall alltid vara den största. Har man underrubriker till den använder man sedan allt mindre storlekar.

Underrubrik till mellanrubriken

Integer odio ante, dapibus vitae eleifend scelerisque, iaculis at turpis. Mauris eu ex pretium ex tincidunt venenatis. Etiam elementum rutrum urna nec placerat. Phasellus convallis ipsum orci, eget sodales enim rhoncus mattis. Etiam aliquet consequat leo a vulputate. Aliquam erat volutpat. Praesent semper venenatis risus. Cras efficitur, odio ut tempor laoreet, justo sapien semper tortor, at eleifend lectus libero at libero. Suspendisse nisl justo, elementum ac diam non, scelerisque commodo diam. Donec congue, mauris a tempor pellentesque, dui risus lobortis diam, in commodo augue metus eu ligula. Cras porttitor imperdiet cursus.

Vad är ett citat?

Vill man lyfta upp ett litet stycke text, eller bara göra sidan lite luftigare kan man lägga in ett eller flera citatlyft. Man målar helt enkelt den del av texten man vill göra ett citatlyft av och klickar sedan på verktygsikonen som ser ut som ett amerikanskt citattecken. (“)

Etiam mollis eleifend arcu at suscipit. Aenean ac tortor dolor. Vivamus vestibulum augue quis massa dapibus egestas. Proin a vulputate dolor. Donec erat purus, condimentum ac urna convallis, condimentum feugiat nibh.

De olika rubrikstorlekarna

Rubrik H1

Rubrik H1

Rubrik H2

Rubrik H2 (3,75rem, 60px)

Rubrik H3

Rubrik H3 (3,125rem, 50px)

Rubrik H4

Rubrik H4 (2,5rem, 40px)

Rubrik H5

Rubrik H5 (1,875rem, 30px)

Rubrik H6

Rubrik H6 (1,5625rem, 25px)

Vanlig text.

Vanlig text (1,25rem, 20px).

Maecenas non est enim. Donec consectetur erat justo, ut lobortis nibh condimentum a. Aliquam porttitor urna tincidunt eros finibus, ut commodo est facilisis.

Tabeller är enkla att göra

Bugg?

THEAD-taggen gör att tabellhuvudet har samma färg som första raden.

Aliquam in cursus nunc, ac suscipit neque. Vivamus purus tellus, auctor ut justo eu, facilisis volutpat turpis. Donec metus purus, vulputate sed faucibus vitae, laoreet ac nulla. Donec vel nisi congue ante ultrices cursus. Integer vulputate semper nisi ac malesuada. Nullam et volutpat nisi. Vestibulum dapibus elementum nulla ut dapibus. Nam mi libero, tempor id nunc nec, blandit posuere orci. Etiam id metus eros. Pellentesque pretium congue iaculis. Sed varius ac ante ac varius.

Länkning

Då man länkar inom ÅA-webben är det enkelt att söka fram sidan man vill länka till.

1. Måla texten du vill länka.
2. Klicka på länkningsknappen.
3. Klicka sedan på kugghjulet i det lilla fönstret som öppnades för att komma till länkalternativen.
4. Skriv in det du söker efter i sökfältet, eller rulla igenom hela listan.
5. Då du hittat rätt sida klickar du på knappen ”Lägg till länk”.
6. Du är klar!

Inbäddning av material

Här nedan kan. du läsa hur man skall göra för att bädda in en video eller annan material på ÅA:s externa webb.

YouTube eller Vimeo

Man kan bädda in videon var som helst i texten. Det är bara att kopiera videons inbäddningslänk från YouTube (eller Vimeo eller vilken videoservice man nu använder) och sedan klistra in länktexten på sin egen rad bland den vanliga texten. Så här:

Panopto

För att bädda in en Panopto-video skall du kopiera inbäddningskoden och ändra lite på den. Gör så här:

1. Sök fram din video i Panopto och tryck på delningsknappen.
2. Tryck på ”Embed”-knappen.
3. Tryck på ”Copy Embed Code”-knappen.
4. Öppna webbsidan där du vill ha videon i webb-editorn.
5. Klistra in koden på det ställe på webbsidan där du vill att videon skall vara.
6. Koden börjar med
   <­iframe
   ändra < till [ så att det nu står
   [­iframe
   i början av koden.
7. Koden slutar med
   allow=”autoplay”></iframe>
   ändra det till ] så att det nu står
   allow=”autoplay”]
   i slutet av koden.
8. Spara sidan.
9. Du är klar. OBS: videon syns inte i editorn, men nog i förhandsvisningen och naturligtvis på själva webbsidan.

Här nedan ett exempel på en inbäddad Panopto-video.

Anchor-poddcast

Görs på motsvarande sätt som med iframe, se nedan vid ”Ibäddning av iframe”.

Inbäddning av Thinglink

Gör så här för att bädda in Thinglinkar:

1. Kopiera den URL som finns i Thinglinks iframe-kod. Från koden
   <iframe width=”960″ height=”540″ data-original-width=”4000″ data-original-height=”2250″ src=”https://www.thinglink.com/card/1380541960288206850″ type=”text/html” frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling=”no”></iframe><script async src=”//cdn.thinglink.me/jse/responsive.js”></script>
   skulle du alltså kopiera endast
   https://www.thinglink.com/card/1380541960288206850
2. Där du vill lägga in Thinglink-inbäddningen skriver du sedan
   inom hakparenteser [] texten thinglink src=”XXXXXX”, där XXXXXX anger vart du skall klistra in URLen, alltså så här:
   
   OBS: detta skriver du helt normalt där du editerar text, du behöver alltså inte gå in i HTML-koden.
3. Spara sidan och du är klar!

Inbäddning av iframe

Iframe-kod kan bäddas in på en webbsida på följande sätt:

1. Öppna webbsidan där du vill bädda in något i editorn.
2. Klistra in iframe-koden på det ställe på webbsidan där du vill att inbäddningen skall finnas.
3. Koden börjar med
   <iframe
   ändra < till [ så att det nu står
   [­iframe
   i början av koden.
4. Koden slutar med
   ></iframe>
   ändra det till ] så att det nu står
   ]
   i slutet av koden.
5. Spara sidan.
6. Du är klar.

Iframe-test med Google maps:

Iframe-test med Matomo

Inforuta

Inforutan skapas genom att man först skriver den text man vill ha i rutan, därefter väljer man texten (alltså målar den med kursorn) och sedan väljer man ”Inforuta” från rullgardinsmenyn ”Format” (alltså den rullgardinsmeny som ligger i verktygspaletten bredvid menyn där man väljer olika rubrikstorlekar etc.). Här har vi lite text och sedan kommer en inforuta: nteger odio ante, dapibus vitae eleifend scelerisque, iaculis at turpis. Mauris eu ex pretium ex tincidunt venenatis. Etiam elementum rutrum urna nec placerat. Phasellus convallis ipsum orci, eget sodales enim rhoncus mattis. Etiam aliquet consequat leo a vulputate. Aliquam erat volutpat. Praesent semper venenatis risus. Cras efficitur, odio ut tempor laoreet, justo sapien semper tortor, at eleifend lectus libero at libero. Suspendisse nisl justo, elementum ac diam non, scelerisque commodo diam. Donec congue, mauris a tempor pellentesque, dui risus lobortis diam, in commodo augue metus eu ligula. Cras porttitor imperdiet cursus.

Länk-knapp

De olika rutorna i editorn

Till höger på editeringssidan finns ett antal viktiga rutor.

Språk

Här skapar man språkversioner av sin sida.

Publicera

Här publicerar man sidan och bestämmer när den skall publiceras.

Kategorier

De här kategorierna används för att man skall enkelt kunna plocka fram sidor som hör ihop i listan över alla sidor i editeringsverktyget.

Taggar

Här skall du lägga in ord som du vill att din sida skall gå att hittas med i ÅA:s webbsökning. Sökmaskinen prioriterar taggarna högst i sökningen, så det är viktigt att lägga in här nyckelord ord även om orden skulle förekomma i själva texten på webbsidan.

Sidoattribut

Från rullgardinsmenyn Överordnad väljer du den sida som din nya sida ”ligger under”. Sidorna i ÅA:s nya webb ligger i ett bollhav, men i listan över alla sidor visas sidorna ”rangordnade” under varandra i stil av ett webbträd. OBS! Efter att du valt något från rullgardinsmenyn och sparat sidan får du absolut inte göra ändringar här! Om du skulle byta ”överordnad” skulle du samtidigt söndra alla länkar som pekar till din sida.

Rullgardinsmenyn Mall skall du inte röra (här väljer man vilken sidobotten sidan skall använda, men alla våra ”vanliga” webbsidor bör använda den botten som heter Standardmall, det är endast huvudsidorna som har egna sidbotten).

Utvald bild

Om du inte vill att sidans huvudbild skall visas då man länkar till sidan med ett kort, skall du lägga in en bild här. Denna bild visas då på kortet i stället för sidans huvudbild. Det här är speciellt användbart då man har en sida som inte har någon huvudbild.

Huvudbilden

Första rutan/legoklossen på editorsidan efter själva huvudtextfältet är rutan för sidans huvudbild. Här kan man välja om man vill lägga in en stor bild eller ej. Bildens storlek kan man inte justera, det görs automatiskt, men man kan välja en rubrik för sin sidan genom att skriva rubriken i fältet Title. Skriver man inget visas sidans rubrik. I de allra flesta fallen nöjer man sig säkert med den sidans namn som rubrik.

Här kan man också lägga in en länk, vilket betyder att om man klickar på den stora bilden så förs man dit länken leder. I de absolut flesta fallen vill man inte länka någonstans (det här används egentligen bara på huvudsidorna).

Högerspalten

Innehållet i högerspalten hanterar man med det som finns under fliken Högerspalt. Om man inte vill ha en högerspalt är det bara att lämna fliken Högerspalt tom.

Till högerspalten kan man lägga

• Nyheter från en valbar kategori. Man kan använda sig av existerande kategorier (förutom huvudsidornas kategorier) eller skapa en egen kategori.
• Kalenderevenemang från en valbar kategori. Här gäller samma som för nyheterna.
• Bildlänkar med utbildningsprogram och/eller projekt.
• Kontaktkort
• Länklistor med länkar antingen internt eller externt.

De olika helheterna i högerspalten kan man ordna hur man vill. I editorn tar man helt enkelt tag i den helhet man vill flytta och drar den uppåt eller nedåt i listan över helheter.

Högerspaltens texter kan också visas i brödtextfältet efter själva brödtexten. För detta väljer man helt enkelt ”Visa på mitten av sidan”.

Den gula citatrutan

Vill man ha en likadan gul citatruta som nere på den här sidan behöver man endast fylla i uppgifterna under fliken Citatruta.

Här kan man välja om man vill ha den cirkelformade bilden till vänster eller höger om själva citatet (oftast/alltid är det ju frågan om en bild på ett ansikte och då är det vettigt att välja cirkelns plats så att personens mun är i riktning av själva citattexten).

Om citatet man här skriver in är en del av en längre intrevju/artikel så kan kan här också välja vart texten i citatrutan skall länkas.

Menyelement

Med fliken Menyelement kan man länka till interna eller externa sidor och skapa en liknande meny som den som finns nederst på den här sidan.

Man kan lägga in länkar antingen som s.k. kort, alltså länkar med bild, rubrik och text, eller så som länklistor. Om man lägger in ett kort kan man välja att själv skriva en presentation i rutan Excerpt, eller så kan man lämna den rutan tom och då visas en stycke text från sidan man länkar till (utdraget om en sådan finns om inte visas några rader från början av texten).

Då man länkar till externa webbsidor (alltså sådana som ligger utanför www.abo.fi) kan man också välja en bild som visas på kortet. För att kortets rubrik skall visa en text i stället för webbadressen (i det här fallet alltså Svenska YLE i stället för http://svenska.yle.fi) skriver man in texten i rutan ”Länktext” då man väljer själva länken. Då man skriver in länkrubriken skall man också kryssa för ”Öppna länk i en ny flik” för att länken skall öppnas i en ny flik i stället för att öppnas i samma flik där ÅA-webben är. Det här gör man då man länkar till externa sidor helt enkelt för att göra det enklare för webbanvändaren att hitta tillbaka till ÅA-webben.

Om man vill kan man skapa flera helheter med länkar så att varje helhet har sin egen rubrik. Detta gör man helt enkelt genom att klicka på ”Add menuelement”-knappen nederst i menylelement-modulen.

Dragspelsmeny

Dragspelsmenyerna består av en rubrik med ett +-tecken och ett textavsnitt. Då man klickar på dragspelsmenyns rubrik kommer textavsnittet fram. Då man på nytt klickar på rubriken försvinner textavsnittet.

SEO settings

Nästa ruta neråt innehåller möjligheten till optimering av vad Google och andra sökmotorer visar då de visar sidan i fråga som sökträff.

Fyller man inte i något blir sidans rubrik ”Title” och utdraget, eller om det inte finns lite text från sidans början ”Description”. Kommer man på bättre/kortare/mer beskrivande texter, så är det bara att fylla i här. Systemet visar sedan med färger om texterna är för långa o.s.v.

Gamla versioner av sidan

Lägst ner på editorsidan finns lådan som heter ”Version”. Systemet håller reda på de 25 senaste versionerna av sidan. Genom att klicka på någon av versionerna kommer man till en sida där man kan se skillnaderna i text mellan de olika versionerna. På samma sida kan man sedan också bestämma om man vill ta tillbaka en äldre version av sidan.

Lägst ner på editorsidan finns lådan som heter ”Version”. Systemet håller reda på de 25 senaste versionerna av sidan. Genom att klicka på någon av versionerna kommer man till en sida där man kan se skillnaderna i text mellan de olika versionerna. På samma sida kan man sedan också bestämma om man vill ta tillbaka en äldre version av sidan.

Efter brödtexten kan man lägga in ett sådant här "dragspel"

Här kan man lägga in precis likadan text som i brödtexten. Alltså text med fetstil, kursiv, länkar, bilder o.s.v.

Testar att länka till det andra dragspelet på den här sidan.

Man kan också göra sådana här länk-knappar.

Lispum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu fringilla augue, ut eleifend ipsum.

Länk till ett dragspel på en annan sida.

1. Donec nec ornare est.
2. Vivamus malesuada sodales est at tincidunt.
3. Integer sodales pellentesque pretium.

Cras non viverra arcu, vitae molestie elit. Curabitur mattis, leo at scelerisque pharetra, felis purus gravida erat, non vulputate ex leo malesuada ex.

Mauris imperdiet vestibulum ipsum a consequat. Suspendisse mi justo, cursus sed ligula quis, malesuada semper risus.

Aliquam quis turpis in lacus finibus accumsan. Sed faucibus dignissim congue. Ut eu commodo mi, sed gravida nibh. H₂O och 5 m³. Quisque malesuada pellentesque ultricies. Etiam non sollicitudin tortor.

Vivamus gravida at ante vitae tincidunt. Cras pulvinar molestie arcu id blandit. Etiam id imperdiet dui. Duis non venenatis quam. Ut vel massa vitae ex tincidunt consectetur ac in nisl. Vivamus condimentum bibendum elit. Nullam nec sapien sodales sapien iaculis fermentum. Maecenas massa quam, gravida et mauris eu, maximus euismod odio. Suspendisse nec hendrerit velit. In luctus varius sapien, at tempor metus vulputate et. Pellentesque quam ante, tempus eget dictum a, fermentum sit amet ipsum.

TAbell	med två rader
och två	kolumner