Zakarias Mortensen
Lång kod på en bärbar dator

Bild från Markus Spiske på Unsplash.com

Denna OER syftar till att introducera en väg för privatpersoner och företag att producera tekniskt avancerade hemsidor utan att behöva de avancerade förkunskaperna i kodning som annars hade behövts. Lösningen kommer i form av ett insticksprogram som är skapat till publiceringsverktyget WordPress och heter Slider Revolution. Med detta kraftfulla insticksprogram så främjar man enligt mig de två främsta designförmågor som Löwgren och Stolterman (2004, s. 61-65) beskriver som en konstruktiv intentionell intelligens där konstruktiv syftar till att vara innovativ och kreativ samt intentionell, vilket syftar till en designer som medvetet vill åstadkomma en förändring i världen. Detta genom att Slider Revolution inte bara gör det enklare att vara kreativ och innovativ, utan även innehar verktyg för att verkligen förändra hur användaren använder sig av hemsidan vilket i detta fall blir att åstadkomma förändring.

Vad kan då vara ett konkret användningsområde när ett sådant insticksprogram hade kunnat nyttjas? Ett exempel är när Gibon Uddevalla förnyade en webbshop där målet var att fånga målgruppens uppmärksamhet genom att lyfta fram produkterna på förstasidan. Tanken var att målgruppen som vi fastslog vara mellan 18-30 skulle bli inspirerade av ekologiska och hållbara produkter. Istället för att använda animationer, flerlagers-parallax eller Scroll Magic så fick jag redigera en bild med röda skyltar med ”extra priser” som fungerade som en Hero Header på sidan, vilket enligt mig inte var optimalt i detta fall.

Bakgrunden till denna OER är att jag under min praktik identifierat många situationer där kunden har efterfrågat en avancerad hemsida men som bibehåller vad Löwgren och Stolterman (2004, s. 142) kallar genomskinlighet, vilket man liknar vid en svart låda som kan skifta tills den blir helt genomskinlig, ju mer man ser av artefakten och dess innandöme, desto mer kan man också nyttja den.

Problematiken i detta har ofta varit att kunden efterfrågar något som vanligtvis behöver göras via traditionell hårdkodning vilket genomskinlighets-mässigt kan skapa stora problem för kunden när denna vill utveckla eller utöka sin webbplats. Ett av de tydligaste problemen som ofta uppstått under min praktik är att kunder inte förstår vad koden gör eller hur den nyttjas men samtidigt vill ha något som går utöver ett standardtema med en bloggfunktion. Detta i sin tur leder till att vi på Gibon Uddevalla lägger en massa tid på att göra en kundspecifik lösning som kunden senare inte kan nyttja då artefaktens genomskinlighet i princip är svart.

Med Slider Revolution är min förhoppning att Gibon Uddevalla i förlängningen kommer kunna skapa lösningar med högre genomskinlighet men som trots det når upp till målen i designprocessen samtidigt som den främjar skaparens designförmåga.

Strukturen i dokumentet kommer att utgå från fyra huvudkategorier:

  1. Att komma igång och installera insticksprogrammet
  2. Överblick över funktionerna i programmet
  3. Tutorial över att skapa en hero-header med animationer
  4. Övningsuppgift

1. Att komma igång och installera insticksprogrammet

Tanken är att vi i denna OER ska skapa en ”Hero Header” vilket vanligen beskrivs som en bild eller film med navigationsknappar som täcker hela eller delar av sidans startyta för besökaren av en webbplats. Till att börja med så behöver vi besöka Slider Revolutions hemsida (Themepunch, u.å) där det i skrivande stund är gratis att hämta en testversion av insticksprogrammet. Skulle det vara så att det kostar pengar när du testar detta kan det vara värt att köpa Slider Revolution under reor så som mellandagsrean eller liknande då skaparna ofta har stora rabatter under typiska rabattperioder. Du behöver sedan antingen ha en offline utvecklarmiljö eller ett konto på skolans webbkurs-server så du kan installera WordPress där.

När vi har vår utvecklingsmiljö redo och insticksprogrammet nedladdat är det dags att gå in i vår WordPress instrumentpanel och sedan hovra över ”Tillägg” (1) och sedan klicka på ”Lägg till nytt” (2). När vi har gjort detta så kan vi klicka på knappen högst upp där det står ”Ladda upp tillägg (3)” och sedan välja Slider Revolution -filen som vi tidigare laddat ner. Det går även att följa illustrationen nedan.

2. Överblick över funktionerna i programmet

Nästa steg är att vi börjar kolla igenom programmet genom att klicka på ”Slider Revolution” som bör ha dykt upp i vår instrumentpanel i WordPress. Viktigt att tänka på här är att Slider Revolution likt Photoshop bygger på ett lagerbaserat system. Detta gör programmet enklare att använda om man har erfarenhet kring lagerbaserade program sedan tidigare.

För en introduktion till Slider Revolution har tillverkaren Themepunch (2019) skapat en kort Tutorial om hur man kan navigera inom gränssnittet samt vilka verktyg man kan använda sig av.

Det viktiga att ta med sig från detta anser jag vara fyra saker:

  • Hur man skapar en modul
  • Få en grundläggande uppfattning om gränssnittet
  • Lära sig skillnaden mellan Modulinställningarna och Slide/Layer inställningarna
  • Lära sig om Slider Revolutions ”hjälpfunktion”

Jag tänker nedan försöka guida er genom detta med lite egna synpunkter.

Hur man skapar en Modul

Precis som Themepunch (2019) visar i sin tutorial så klickar man på antingen ”New Blank Module” eller ”New Module from Template” för att skapa ett projekt alternativt starta ett projekt från en mall. Trycker man på New Blank Module så kommer en vägvisare upp som består av tre steg.

i första steget får man välja om man vill att det nya projektet skall vara en Slider, Scen eller Carousel. Skillnaden på dessa är att en Slider precis som namnet hintar om syftar till flera bilder som snurras runt där varje bild syns för sig medan Scen är en ensam bild och Carousel är flera bilder som syns samtidigt och snurrar.

I steg två får man välja dimensionerna på projektet. Valmöjligheterna är Auto, Full-Width och Full-Screen. Auto justeras utifrån den omringande containerns bredd medan Full-Width alltid utnyttjar skärmens fulla bredd och Full-Screen utnyttjar både skärmens bredd och höjd.

I steg tre så får man till sist välja mellan de responsiva inställningarna för projektet. Dessa består av Classic, Linear Resizing som är att responsiviteten kommer att utgå från storleken på skärmen och därigenom ändra projektets innehåll. Intelligent Inheriting skapar fyra brytpunkter där responsiviteten beräknas genom att jämföra med den största brytpunkten. Manual Custom Sizes är samma sak som Intelligent Inheriting men du får själv förändra storlekarna på alla lager vid varje brytpunkt istället för att det görs automatiskt. Jag använder mig oftast av Intelligent Inheriting då detta gör att jag nästan inte behöver justera eller ändra storlekarna på något i mobilvyn.

Få en grundläggande uppfattning om gränssnittet

När vi väl har skapat vårt projekt så är det lätt att till en början bli överväldigad av alla element som presenteras. Det är här viktigt att man innan man börjar producera något har en grundläggande koll på vilka verktyg man har och hur man kan nyttja dem. I illustrationen nedan har jag markerat fem extra viktiga områden i gränssnittet att hålla koll på som jag tänker fördjupa mig i.

  1. Den första knappen är kort och gott en bakåtknapp om man vill gå tillbaka till startsidan för insticksprogrammet.
  2. Denna knapp behandlar alla Sliders och Globala lager man har i sitt projekt. Vad betyder då sliders? En Slider kan beskrivas som en sida när man valt alternativet ”Slider” i vägvisaren när vi skapade vårt projekt. Så om vi exempelvis har 5 bilder i en roterande slider så är alltså varje Slide i denna en egen del som man kan redigera för sig. Med Globala lager så menas lager som man vill ska förekomma genom hela modulen, jag använder mig exempelvis ofta av detta alternativ när jag använder en logga uppe i hörnet av projektet. Detta gör att loggan inte behöver placeras ut på samma plats manuellt i alla Slides utan det räcker att man lägger den i Globala lager.
  3. Add Layer är kort och gott där man lägger till något i sitt projekt. Oavsett om vi lägger till en bild eller videoklipp så kommer detta bli ett lager nere i vår tidslinje. Bland alternativen finns även Group där du kan gruppera dina lager när dina projekt börjar bli lite mer komplexa.
  4. Bland dessa knappar kan du välja om du ska markera en eller flera lager åt gången, ångra ett val du gjort tidigare (funkar att även trycka på Ctrl/CMD Z), kolla responsiviteten och hur dina Slides ser ut på andra enheter, aktivera hjälpknappen som jag kommer ta upp senare samt välja bland förinställda typsnitt och rubriker som gör att du kan komma igång snabbt med att designa.
  5. Dessa fyra ikoner är några av de viktigaste att lära sig då det i huvudsak är här man navigerar mellan de olika inställningarna för projektet. Den första ikonen åt vänster är generella projekt-inställningar. Här kan du ställa in saker som projektets namn och lägga till egen CSS och Javascript. Den andra knappen innehar inställningar till navigationsmöjligheterna för Slidern, här kan vi exempelvis ställa in pilar på varderas sida av Slidern så besökarna själva kan välja om de vill gå vidare till nästa bild. Den tredje knappen är den nuvarande Slidens inställningar här kan vi exempelvis ställa in bakgrundsbilden på vår Slide eller ställa in en så kallad Spinner som agerar som en laddningsindikator som snurrar fram tills dess att sidan har laddats färdigt. Den sista knappen är den som är den viktigaste och är lager inställningar. Här kan vi ändra på inställningar som har med de lager vi har skapat att göra. Det är här vi exempelvis ställer in animationer för våra lager samt ändrar texten i dem.

Lära sig skillnaden mellan Modulinställningarna och Slide/Layer inställningarna

En av de viktigaste sakerna att tänka på när man börjar använda sig av Slider Revolution är inställningarna för de olika lägena och vad de betyder. Modulinställningarna hanterar inställningar som har med modulen eller också själva projektet att göra. Här finner du generella inställningar för ditt projekt snarare än specifika inställningar för exempelvis lager. I lagerinställningarna finner du alla specifika inställningar som har med lagret du arbetar med att göra. Exempelvis om du gör en rubrik så är det i lagerinställningarna du ändrar storlek och vart rubriken skall vara medan du i modulinställningar kan ställa in hur hög och bred din hero-header skall vara.

Lära sig om Slider Revolutions ”hjälpfunktion”

Något vi kan dra mycket nytta av när vi upptäcker och analyserar funktioner och verktyg i Slider Revolution går att finna i hjälpfunktionen som finns i område 4 i illustrationen ovan och ser ut som ett frågetecken med en rund ring. Vid aktivering så fungerar hjälpen genom att vi kan hålla muspekaren över funktionerna vi är osäkra på för att trigga en ruta med information om den givna funktionen att dyka upp.

3. Tutorial över att skapa en hero-header med animationer

Nu är det dags för oss att skapa vår första egna Slide. Tanken är att vi ska skapa en hero-header som fångar besökarnas uppmärksamhet. Darrel Wilson (2019) har skapat en matig men mycket bra tutorial om Slider Revolution där han i stora drag går igenom det vi ska göra.

Fram till omkring 25 minuter in i videon så skapar Darrel Wilson en enkel slide som vi kommer att hämta inspiration från. Jag rekommenderar samtidigt att ni kollar igenom hela trots att den är av de längre slaget då mycket av den lite mer avancerade informationen till en början kan vara svår att ta in. I detta exempel kan vi utgå från att vi vill skapa en header åt ett hotell som ligger nära stranden som de vill att vi ska lyfta fram.

För att göra denna hero-header har jag delat in processen i fyra delar:

  • Initierande konfiguration och inställningar
  • Välja typsnitt och grafisk material
  • Skapa animationer
  • Lägga Sliden på en riktig sida i WordPress

Initierande konfiguration och inställningar

Till att börja med går vi in och trycker på knappen ”New Blank Module” för att sedan följa guiden som dyker upp. Här väljer vi i första steget Scene då vi enbart vill ha en bild på sidan och inte en snurra med flera bilder. I nästa steg vill vi ha fullskärm då vi vill fånga besökarens uppmärksamhet. I sista steget väljer vi ”Intelligent Inheriting” då vi vill att vår slide skall vara responsiv utan att vi behöver ändra så mycket storleksmässigt då den anpassar storleken automatiskt.

Välja typsnitt och grafisk material

Nu kan vi ställa in den bakgrundsbild som vi vill ha i vår header och detta gör vi genom att gå in på Slide Options och sen trycka på Background. Här kan vi antingen välja en bakgrundsbild som vi själva väljer att lägga upp eller ta en av Slider Revolutions egna bilder. I detta fall hittade jag en passande bild som Slider Revolution hade i sitt bibliotek och valde därför den genom att klicka på Object Library. Nu är det viktigt att vi ser till att bilden vi lagt till är rätt inställd så den täcker hela ytan av vår header, detta kan vi göra genom att skrolla ner och kolla så att inställningen Cover är ikryssad under Image Settings.

nästa steg blir att lägga till två rubriker i form av en H1 och en H2, detta gör vi genom att hovra över Add Layer som vi tidigare gått igenom och sedan trycka på Text följt av Quick Style Headline. När vi valt detta dyker en meny upp på högersidan av skärmen där vi kan välja bland förinställda typsnitt och storlekar. Här väljer jag typsnittet Poppins. Nu kan vi kryssa ner de förinställda typsnitten och klicka på Size & Pos under Layer Options.

Vidare kan vi ställa in textens position genom att klicka på de vertikala och horisontella inställningarna under Aligment. För att få texten att hamna i mitten så klickar vi mitten i båda rutorna. Vi dubbelklickar även på själva texten för att ändra den. Nu kan vi börja med underrubriken och för att skapa den gör vi på samma vis som med den första rubriken men förslagsvis med ett annat typsnitt och mindre text.

Nu bör vi få något i linje med detta. För att få upp en förhandsvisning över hur det kommer se ut så klickar ni på Preview nere i högra hörnet.

Skapa animationer

Vidare är det dags att animera våra rubriker.

För att göra detta behöver vi först och främst välja de lager vi vill animera vilket är nummer 1 i illustrationen ovan. Vi behöver därefter klicka på Animation under Layer Options. Nu är det dags att börja animera. Detta gör vi genom att klicka på In som är nummer 3 i illustrationen ovan. Här kan vi välja bland ett trettiotal animationer som passar för just din header. Jag valde här Pop Up Smooth under Pop Ups. Vi kan även göra egna animationer genom att skrolla ner under Advanced men i detta stadie är det bäst att använda sig av de förinställda animationerna som Slider Revolution erbjuder. När vi har valt animation så går vi vidare och markerar den andra rubriken bland våra lager och gör samma sak som vi gjorde med vår första rubrik när vi väljer animationer.

Lägga Sliden på en riktig sida i WordPress

Nu har vi skapat vårt första projekt i Slider Revolution och det är dags att antingen exportera ut koden eller lägga upp det på en riktig hemsida. För att göra detta i WordPress så går vi tillbaka till startsidan genom att först spara på Save knappen nere i höger hörn och sedan trycka på Back knappen uppe i vänster hörn. Nu kan vi gå in på Sidor i WordPress och sedan trycka på ”lägg till block”, välj därefter Slider Revolution och den Slide vi just gjorde. Tryck på knappen förhandsgranska uppe i höger hörn av WordPress, ser vi nu vår Slide så har allt lyckats och vi har den live på vår hemsida. Önskar vi att exportera koden ut ur WordPress för ett externt projekt så kan vi också göra det genom att klicka på HTML under moduler.

4. Övningsuppgift

Testa att göra en egen Slide genom att följa instruktionerna ovan. Ditt projekt skall innehålla en bakgrundsbild som täcker hela höjden och brädden av skärmen samtidigt som du adderar två rubriker med olika typsnitt och storlekar med animationer.

Vill du utmana dig själv extra mycket kan du även testa att försöka göra egna animationer istället för att använda de förinställda samtidigt som du testar alla tre sorter av modultyper, alltså Slider, Scene och Carousel. Reflektera över möjligheterna men också begränsningarna med var och en av modultyperna för att lättare kunna välja den typ som passar ditt projekt bäst.

Källförteckning:

Darrel Wilson (2019). How To Use The Revolution Slider Plugin 6.0 – FULL TUTORIAL 2020 [Video online] Tillgänglig: https://youtu.be/icuP-D7d2ro [2019-12-26]

Löwgren, J & Stolterman, E. (2004). Design av informationsteknik : materialet utan egenskaper. 2. uppl. Lund: Studentlitteratur

Themepunch (u.å). The world’s most powerful WordPress Builder. [Elektronisk] Tillgänglig: https://revolution.themepunch.com/. [2019-12-10]

Themepunch (2019). Slider Revolution 6.0 Visual Editor Basics. [Video online] Tillgänglig: https://youtu.be/Jq01_xNM9sM. [2019-12-22]