Examensarbete webbsida skapad i Wordpress

Transkript

1 Examensarbete webbsida skapad i Wordpress Thesis website created in Wordpress Per Rosendal ME1316

2 Sammanfattning Restaurang Balder var under en lång tid missnöjd med deras dåvarande hemsida vilket lade till grunden för detta examensarbete. De hade ett stort intresse av att uppdatera layouten på deras hemsida och få en snyggare och mer användarvänlig webbsida för att presentera sin restaurang. En annan stor anledning för Restaurang Balder att uppdatera sin webbsida enligt mig var att göra den mer anpassad för smartphones. Då allt fler surfar i sina smartphones är det i min mening en absolut nödvändighet att ha en webbsida, oavsett bransch, som är smartphonekompatibel. Denna webbsida skapades i publiceringsverktyget Wordpress då detta är ett enkelt sätt att skapa snygga hemsidor med enorma layoutmöjligheter. En annan anledning till valet av Wordpress var att det är ett enkelt verktyg att använda för att underhålla sin webbsida. Då beställaren Reza besitter begränsad kunskap inom detta område ansåg jag att Wordpress var det bästa alternativet. Målet med projektet var att genom en snyggare, mer lättnavigerad och smartphonekompatibel webbsida skapa en större kundkrets till Restaurang Balder. Huruvida detta lyckade eller inte går det inte att skapa en uppfattning om ännu då webbsidan varit publicerad under en så pass kort tid, utan det får framtiden utvisa. Nyckelord: Wordpress, Restaurang Balder, webbsida, hemsida, smartphonekompatibel.

3 Abstract Restaurant Balder was for a long time unhappy with their previous homepage which is also the reason behind this thesis. It was therefore in their best interest to update the layout and create a more user friendly webbsite to present their restaurant. Another reason for Restaurant Balder to update their website in my opinion was to make it more suitable for smartphones. Given the fact that more and more users today use their smartphones to browse the internet, it has become crucial for businesses to have websites compatible with smartphones. The website was created in the publishing platform Wordpress since this is an easy way to create great looking websites. Using Wordpress is also an easy way for the staff of Restaurant Balder to maintain the website since their knowledge within this field is limited. The purpose behind this thesis was to create a better looking website, with more focus on usability and that was compatible with smartphones. Thanks to these factors it was our hope to generate more customers to Restaurant Balder. Whether or not this was a success however is difficult to decide at this moment, since the website has been published for such a short period of time. Time will simply stell. Keywords: Wordpress, Restaurant Balder, website, homepage, smartphone compatible.

4

5 Förord Den här rapporten beskriver mitt examensarbete i medieteknik vid Umeå Universitet under perioden Jag vill tacka alla personer som på ett eller annat sätt bidragit till det här examensarbetet och vill speciellt nämna: Min handledare Ulrik Söderström Min examinator Stefan Berglund Reza Lundberg Mirzaei på Restaurang Balder All övrig personal på Restaurang Balder som ställde upp på fotograferingen Alla testpersoner som ställde upp i användartestet Umeå, juni 2013 Per Rosendal

6 Innehållsförtecking Sammanfattning...i Abstrakt......ii Förord... iii 1. Inledning Bakgrund Syfte och mål Teori Introduktion till Wordpress Så fungerar Wordpress Varför jag valt Wordpress Genomförande Användartest Installation av Wordpress Skapandet av webbsidan Resultat Innehåll Layout Navigation och funktionalitet Skillnad mellan Restaurang Balders gamla hemsida och denna Diskussion Bilaga... 38

7

8 1. Inledning I detta kapitel beskriver jag bakgrunden, syftet och målsättningen med följande examensarbete i medieteknik. 1.1 Bakgrund Bakgrunden till detta projekt är att det är dags för mig att utföra mitt exjobb. Jag bestämde mig i ett tidigt skede att det var en webbsida som jag ville göra. Det är något jag både intresserar mig av och vill bli bättre på. Jag har under denna utbildnings gång gått kurser som behandlar detta område och har i och med detta skaffat mig en tillräcklig grund av kunskap som gör att jag känner mig redo att ta mig an denna uppgift. Efter att ha varit i kontakt med en del företag så fastnade jag för Reza och Restaurang Balder. Denna ligger belägen mitt i centrala Umeå och är en av stadens största och mest populära restauranger. Anledningen till att Reza intresserade mig var främst för att han verkligen ogillade den nuvarande hemsidan de har. Andra företag jag besökt har även de varit väldigt intresserade av att förnya och förbättra deras hemsidor men Reza var verkligen genuint missnöjd med deras dåvarande hemsida. Detta var något som jag fastnade för och som gav mig ännu mer motivation till att genomföra projektet tillsammans med honom och Restaurang Balder. Visst kan man fundera över huruvida en snygg hemsida bidrar till fler kunder men jag kan bara tala för mig själv, om jag sätter mig in i rollen som kund, så väljer jag hellre en restaurang med en snygg hemsida än en restaurang vars hemsida ser amatörmässig ut. Detta är något som enligt min mening genomsyrar alla företag. Jag litar helt enkelt mer på ett företag med en proffsig hemsida än ett företag med en mindre proffsig dito. Detta är det som jag tycker är intressant med projektet. Kan kundkretsen växa genom en snyggare hemsida? Vidare är det inte bara layouten och känslan av sidan som är viktig. Om jag återigen sätter mig in i rollen som kund så vill jag snabbt och enkelt hitta menyn, adressuppgifter samt öppettider. Detta är något som jag vill presentera på ett enkelt sätt för kunderna och det är också något jag tror är enormt viktigt för de kunder som bara passerar genom Umeå eller är nya i staden. På detta vis kan man skaffa sig nya kunder tror jag. En annan stor anledning för Restaurang Balder att uppdatera sin webbsida enligt mig är att göra den mer anpassad för smartphones. Då allt fler surfar i sina smartphones så är det i min 1

9 mening en absolut nödvändighet att ha en hemsida, oavsett bransch, som är smartphonekompatibel. 1.2 Syfte och mål Syftet med projektet för min del är naturligtvis att genomföra mitt exjobb på ett så framgångsrikt sätt som möjligt och att uppfylla de krav och önskemål jag fått från beställaren. För Restaurang Balder handlar det om att uppdatera layouten på deras hemsida och få en snygg och användarvänlig webbsida för att presentera sin restaurang vad gäller meny, adress, kontaktuppgifter, öppettider med mera. Som jag nämnde i föregående kapitel så är jag främst intresserad av att skapa en snygg hemsida för Restaurang Balder och göra denna smartphoneanpassad och genom detta förhoppningsvis skapa en ännu större kundkrets för denna restaurang. Det här är dock frågor som blir besvarade först en tid efter att projektet är genomfört. 2. Teori I detta kapitel kommer jag att ge en introduktion till Wordpress där jag först kortfattat presenterar verktyget, hur det fungerar samt till sist motiverar varför jag valt att arbeta i just Wordpress. 2.1 Introduktion till Wordpress Det verktyg jag valt att använda mig av för att skapa Restaurang Balders hemsida är Wordpress. Detta är ett modernt blogg- och publiceringsverktyg som använder databasen MySQL för datalagring och är skrivet i PHP. PHP står för PHP: Hypertest Preprocessor och är helt enkelt ett skriptspråk som körs på webbservrar. Wordpress distribueras under en GNU General public-licens, vilket är en upphovsrättslicens för fri programvara och betyder att det är gratis att både ladda ner och använda. Eftersom programmet bygger på en öppen källkod har detta medfört att många användare idag utvecklar tillägg, teman och applikationer. Då Wordpress är ett enkelt verktyg att använda med enorma möjligheter att designa sin webbsida hur man vill så har detta gjort verktyget oerhört populärt. Innehållet på sidan blir tillgängligt genom en inloggningssida vilket medför att en FTP-klient, som används för att ladda upp sidor till webhotellet, ej behövs. På senare år har Wordpress dessutom utvecklats till att kunna hantera hela sajter likt ett CMSsystem. CMS står för Content Management System och är helt enkelt ett verktyg för att för att 2

10 separera innehåll från presentation. Detta innebär att man kan skapa sidor utan att behöva kunna HTML vilket är ett märkspråk för hypertext och står för Hyper Text Markup Language. 2.2 Så fungerar Wordpress Nedan kommer jag att gå igenom de vanligaste delarna och funktionerna i Wordpress samt hur det går till att utföra dessa. Det första steget, nämligen installationen, tar jag upp specifikt hur jag gjort under kapitlet Genomförande. Adminpanel Adminpanelen nås alltid genom att logga in på där dinhemsideaddress ska bytas ut mot addressen till själva webbsidan. Det är här som administrationsgränssnittet finns, själva hjärnan helt enkelt. I principt allt som ska utföras gällande webbplatsen sköts härifrån. Samtliga funktioner finner man grupperade i den vänstra kolumnen. 3

11 Inlägg Wordpresswebbsidor består främst av två former av innehåll, inlägg och sidor. Skillnaden mellan dessa är att sidor är statiska och lämpar sig för presentation av långvarig information. Inlägg däremot presenteras i ett bloggflöde där det senaste hamnar längst upp på sidan där de publiceras. Wordpress visar som standard dessa på startsidan även om detta är något som naturligtvis går att ändra. Hur det går till kommer jag att gå igenom under kapitlet Genomförande. Att skapa inlägg i Wordpress är väldigt enkelt. Från adminpanelen via den vänstra kolumnen är det bara att klicka sig vidare till Inlägg och Skapa nytt. Därefter är det bara att fylla inlägget med med rubrik och innehåll och sedan välja Publicera eller Spara som utkast. Det finns även möjlighet att tidsbestämma när dessa ska publiceras. Vidare kan man även kategorisera samt sätta etiketter på sina inlägg. Detta är nyckelord som beskriver vad inlägget handlar om. kategorier och etiketter är placerade till höger om redigeringsfönstret där inlägget skrivs och skapas genom Lägg till ny kategori och därefter namnge denna. För att skapa etiketter skrivs dessa ut direkt i rutan Etiketter. 4

12 Sidor Sidor skapas i principt på samma sätt som inläggen och är precis lika enkelt att göra. Via adminpanelen i den vänstra kolumnen är det bara att klicka på Sidor och Skapa ny. Fyll sedan i rubrik och innehåll. Enligt mig är det att föredra att först skapa alla sidor som ska finnas på webbplatsen och endast ange rubrikerna. Sedan när strukturen är klar, fylla sidorna med innehållet. Huruvida man väljer att publicera dessa direkt eller spara som utkast spelar dock ingen roll då de publicerade sidorna naturligtvis går att redigera i efterhand via adminpanelen. 5

13 Länkar Att skapa länkar är något som går att göra på ett väldigt smidigt sätt i Wordpress, vare sig man vill länka till externa webbsidor eller egna. För att göra detta markerar man text i redigeringsverktyget inne i ett inlägg eller en sida. Klicka sedan på symbolen som ser ut som en kedja och en dialogruta dyker upp. En länk till en extern webbsida skapas genom att mata in addressen i fältet URL. Ska man däremot länka till en egen sida är det bara att klicka på Eller länka till befintligt innehåll. I detta fall utvidgas fönstret med en lista där de vanligaste sidorna som förekommer på webbplatsen finns. För att skapa länken, välj ett alternativ och klicka på Uppdatera. 6

14 Bilder Precis som med sidor och inlägg är det enkelt att lägga in bilder i Wordpress. Först gäller det att skapa en sida eller ett inlägg där bilden ska publiceras. Därefter är det bara att klicka på Lägg till media som infinner sig uppe till vänster ovanför textredigeringsfönstret. Då detta är gjort dyker dialogfönstret Infoga media upp. Här finns det tre olika sätt för att ladda upp sina bilder. Antingen genom att klicka på Välj filer, Infoga från URL för att använda en bild som existerar på en annan webbsida eller bara dra och släppa en bild från den egna datorn. Oavsett metod förflyttas du sedan till en flik som kallas Mediabiblioteket. Där syns nu den uppladdade bilden med alternativ i kolumnen till höger. Genom Justering är det möjligt att välja huruvida bilden ska vara vänster- eller högerställ alternativt centrerad. I menyalternativet Storlek finns tre alternativ att välja för att automatiskt anpassa bildens storlek, nämligen Miniatyr, Medium eller Stor. Väljer man däremot alternativet Full storlek visas bilden som namnet antyder i just full storlek. Efter att detta val är gjort är det bara att klicka på Infoga i fönstrets nedre hörn till höger. Video Videor laddas upp på samma sätt som bilder genom Lägg till media. Genom att göra detta kommer videon att visas som en klickbar länk. Det är dock möjligt att visa den direkt på sidan i ett spelarfönster men för att göra detta måste den bäddas in om en gammal version av Wordpress används. I de nyare versionerna görs detta automatiskt när man infogar en länk i antingen ett inlägg eller på en sida förutsatt att Automatisk inbäddning är ikryssad. Detta kontrolleras genom att klicka på Inställningar i den vänstra kolumnen i adminpanelen och därefter klicka på Media. 7

15 Teman Teman är det som bestämmer utseendet på webbsidan och går både att köpa eller också att använda gratisalternativ. Dessa går att finna antingen direkt i Wordpress eller genom att ladda ner från andra sidor. För att söka bland de teman som finns tillgängliga i Wordpress är det bara att via adminpanelen välja Utseende, sedan Teman och därefter Installera teman. Där är det möjligt att antingen bläddra bland teman eller söka efter de specifika egenskaper som önskas. Samtliga teman kan förhandsgranskas för att se hur sidan kommer att se ut efter installation. För att ladda ner temat, klicka på Installera. Därefter är det bara att klicka på Aktivera. 8

16 För att installera ett tema från en annan sida måste temat först laddas hem till datorn i form av en zip-fil och därefter laddas upp till Wordpress. Denna ska dock inte packas upp. Precis som när ett tema som finns tillgängligt i Wordpress installeras så klickar man sig vidare från adminpanelen via Utseende och sedan till Teman. Klicka på Installera teman och därefter på Ladda upp. För att aktivera temat klicka på Aktivera. Insticksmoduler Ett annat sätt att anpassa Wordpress är genom insticksmoduler. Med hjälp av dessa kan Wordpress utföra i princip vad som helst. Insticksmodulerna går att finna både direkt i Wordpress eller via andra webbsidor precis som vad gäller teman. Även själva installationsprocessen påminner om varandra. 9

17 Väljer man att installera ett tema från Wordpress klickar man på Tillägg i adminpanelen och sedan Lägg till ett nytt. Insticksmodulens som valts installeras genom att klicka på Installera nu. Väljer man instället att installera en insticksmodul från en annan webbsida laddar man först ner en zip-fil till datorn för att sedan ladda upp hela filen utan att packa upp den till Wordpress. Denna installeras därefter på samma sida som i det tidigare stycket genom knappen Ladda upp. De installerade insticksmodullerna går att kontrollera genom att klicka på Tillägg och sedan Installerade tillägg. 2.3 Varför jag valt Wordpress Jag funderade till en början fram och tillbaka om jag skulle koda i HTML eller arbeta i Wordpress men valde tillslut det senare. Anledningen till att jag valde Wordpress var främst för att det är ett enkelt sätt för att skapa väldigt snygga sidor. Det finns tusentals olika teman som dessutom går att modifiera för att se ut i principt hur som helst. Jag har dessutom tidigare under utbildningens gång jobbat i Wordpress och tyckte om det väldigt mycket redan då. Eftersom Restaurang Balders personal, som denna webbsida är ämnad för, dessutom inte besitter speciellt stora programmeringskunskaper var även det en stor anledning till att välja Wordpress. På samma sätt som det är enkelt att skapa en webbsida i Wordpress är det dessutom enkelt att underhålla densamma. Ytterligare en anlening till mitt val var att min handledare Ulrik Söderström rekommenderade mig att jobba i Wordpress. 10

18 3. Genomförande I detta kapitel kommer jag att gå igenom ett användartest av den Hi-fi jag skapade för att sedan gå igenom själva skapandet av webbsidan för Restaurang Balder. Från installation av verktyget Wordpress ända fram till färdig hemsida. 3.1 Användartest Introduktion Sidan som testades var en Hi-fi av Restaurang Balder kommande hemsida, gjord i Axure. Kraven och önskemålen från beställaren Reza Lundberg Mirzaei var att den på ett enkelt och lättnavigerat sätt ska kommunicera informationen till potentiella restaurangbesökare. Jag själv agerade testledare samt observatör och använde mig av fem testpersoner i åldrarna 23 till 60 år. Denna webbsida riktar sig både till nuvarande och potentiellt nya kunder. Tanken med sidan är att effektivt kommunicera information vad gäller främst menyer, kontaktuppgifter, adressuppgifter och öppettider. Då beställarna önskade sig att effektivt sprida denna information har jag som webbdesigner och programmerare valt att hålla sidan så enkel som möjligt med en lättöverskådlig meny då informationen på sidan är det mest vesäntliga, även om utseendet naturligtvis ska ge ett seriöst och snyggt intryck. Testpersoner Johan Stenvall 24 år Student Oscar Johansson 23 år ICA Supermarket Arvid Nyström 24 år Student Anna Rosendal 34 år PWC Jan Rosendal 62 år Pensionär 11

19 Testpersonerna som ingick i användartestet har ett åldersspann på nästan 40 år från den yngste, Oscar 23 år, till den äldste, Jan 62 år. Det är också på ett ungefär inom dessa åldrar som jag anser att de flesta av restaurangens kunder som använder internet ligger. Av den anledningen känner jag att jag har testat hela spektrat av personer som kan vara intressanta för denna webbsida. Ingen av dessa testpersoner är några dataproffs utan representerar i min mening den vanliga användaren i de åldersgrupper de representerar. Uppgifter Jag valde att göra en Hi-fi bestående av en startsida med sex menyalternativ nämligen: Meny Evenemang Catering & Fest Uteserveringen Kontakt & Bokning Vår Personal Kategorin Meny innehöll dessutom dessa underrubriker: - Lunchmeny - Vin -och drinkmeny - A lá carte Jag bad mina testpersoner att navigera sig till de saker jag ansåg var viktigast att finna. Som jag nämnde i inledningen så känns information inom dessa områden mest relevant att finna på en hemsida för en restaurang: De olika menyerna Kontaktuppgifter Adressuppgifter Öppettider är naturligtvis en fjärde relevant sak att finna, kanske rent av mest relevant. Av denna anledning så finns dock denna information klar och tydlig direkt på startsidan. Så att använda det som en del av testet kändes därför överflödigt. 12

20 Hi-fi 13

21 14

22 Testpersonerna Testperson 1 Oscar Johansson Testpersonen representerar i detta fall den yngre kategorin av restaurangbesökare. Oscar började med att leta upp kontaktuppgifterna genom att klicka på Kontakt & Bokning vilket direkt gav resultatet han letade efter. Därefter bad jag honom finna lunchmenyn. För att göra detta hoovrade han över kategorin i menyn som heter just Meny vilket gav informationen han letade efter. I den sista uppgiften var det dags att hitta till restaurangen. För att göra detta klickade han först på Hem vilket inte gav informationen han sökte. Efter detta klickade han igen på Kontakt & Bokning och fann då vad han letade efter. Oscars kommentarer: Van att menyn ska finnas till vänster men noterade snabbt dess placering längst upp i mitten av sidan. Bra att kunna nå alla sidor från startsidan enbart genom att hoovra över menyn. 15

23 Testperson 2 Johan Stenvall Johan representerar även han den yngre kategorin av potentiella restaurangbesökare. Honom gav jag i uppgift att finna menyn Á la carte. Till skillnad från den föregående testpersonen valde Johan att direkt klicka på kategorin Meny istället för att hoovra över densamma. Därifrån fann han sedan enkelt menyn han fick i uppgift att uppsöka. Efter detta var det dags att finna kontaktuppgifterna och sedan addressuppgifterna. Detta gick fort genom att direkt klicka på Kontakt & Bokning där informationen ligger. Johans kommentarer: Den mörka färgen gav ett seriöst intryck som en webbsida för en restaurang borde göra. Dessutom var det väldigt lätt att få en överblick av sidan då det var få element som störde i onödan. Märkte först inte att det gick hoovra över menyn för att få fram undermenyer men det gjorde det dessutom smidigt att både hitta information och navigera sig mellan de olika sidorna. Testperson 3 Arvid Nyström Den sista testpersonen som representerar den yngre kategorin var Arvid. Han fick i uppgift att finna vin och drinkmenyn följt av kontaktuppgifter och addressuppgifter precis som de övriga. Till skillnad från Johan upptäckte Arvid direkt att det gick att hoovra över menyn och fann vin och drinkmenyn genom att just hoovra över Meny. Precis som den första testpersonen Oscar återvände Arvid till startsidan för att finna kontaktuppgifterna, dock utan resultat. Därefter valde han kategorin Kontakt & Bokning och fann därmed vad han letade efter. Arvids kommentarer: Väldigt lättnvigerad sida. Enkel att överblicka och inga störande moment, dessutom bra att det går att hoovra över menyn för att få fram undermenyerna Testperson 4 Anna Rosenal Anna med sina 34 år, representerar den lite äldre kategorin restaurangbesökare jämfört med de tre föregående testpersonerna. Hon fick precis som Oscar i uppgift att finna lunchmenyn och därefter kontaktuppgifter och addressuppgifter. Även Anna valde att hoovra över menyalternativet Meny innan hon klickade och valde sedan Lunchmeny. Därefter sökte hon sig direkt till Kontakt & Bokning och fann informationen hon fick i uppdrag att finna. Annas kommentarer: Snygg och stilren layout. Väldigt enkelt att hitta relevant information som man letar efter på en restauranghemsida. Testperson 5 Jan Rosendal Den äldsta personen i användartestet var Jan med sina 62 år. Anledningen till att göra sidan lättnavigerad är just för att den även ska passa den lite äldre åldersgruppen. Jan fick i uppgift att finna vin och drinkmenyn och sedan precis som alla andra testpersoner, kontaktuppgifter samt addressuppgifter. På samma sätt som den andra testpersonen Johan, valde Jan att direkt klicka på Meny utan att notera att undermenyn dyker upp genom att hoovra över denna. 16

24 Drifrån navigerade han sig till Vin och Drinkmeny och fann därmed denna meny. Därefter sökte han sig till Kontakt & Bokning och fann de kvarvarande uppgifterna. Jans kommentarer: Inga problem att finna informationen jag letade efter då det var logiska namn på de olika menyalternativen. Resultat Testpersonerna hade inga som helst problem att ta sig till de olika sidorna och löste uppgifterna enkelt. Detta var också meningen från min sida, sidan ska vara lättnavigerad. De gillade att underrmenyerna går att nå via startsidan genom att hoovra över menyn. Dessutom gav designen och den stilrena layouten ett seriöst intryck vilket en webbsida för en restaurang bör göra. Min tanke har sedan dag ett varit just detta, nämligen att webbsidan på ett effektivt sätt ska få fram den relevanta informationen som beställaren vill framhäva. Då de personer som nu testat sidan sträcker sig mellan åldrarna år känner jag att sidan är väl anpassad för intressentgruppen som jag anser kommer att använda sig av denna webbsida. 3.2 Installation av Wordpress Det absolut första praktiska steget mot en färdig hemsida togs genom att installera verktyget Wordpress. Detta gjordes genom att först ladda ner den senaste versionen, Wordpress 3.5.1, som en Zip-fil. Denna packades sedan upp och filen wp-config-sample.php redigerades i Notepad enligt följande: /** Namnet på databasen du vill använda för WordPress */ define('db_name', 'restaursngbalde'); /** MySQL-databasens användarnamn */ define('db_user', 'restaursngbalde'); /** MySQL-databasens lösenord */ define('db_password', 'Kmj5GmPr'); /** MySQL-server */ define('db_host', 'restaurangbalder.com.mysql'); Följande text lades också till: define('auth_key', '2]}b=W$*FOSTX{rU;2G{/ 9&{>A5~Rit7@N<++@Q Zo a!8 #{ke#wkjc9zq%f$f'); define('secure_auth_key', '%NB.aNd,%H!Cu+k8^M%JIv3$*] [`7s.e_Y}bM&C(YwdK9k, a-]o,irwfru_-i'); define('logged_in_key', ',%3GFxB$ziZPzYe 70GxD-U.HB)*F8&o0)>I8$v9?/;-}^zNSC~tOzahRv2m.eZ('); define('nonce_key', '}~5+t9~#w0,4k0am&yGo fz%j%u4s +CnzH5pxJk vhlymdwo/%7itawa s*x>tr'); define('auth_salt', 'p;+py~b[q,_yp-p?#ee-x4y[o=irw`kg j-@h6c)`_bxj~x3>-qo/8:d$ajbn=/0'); define('secure_auth_salt', 'qarnsk-rcnk54]mot*b+~y1bk^pqzt^5=rbfcv1sb+@9kw^#(-/ku?;naon![m--'); define('logged_in_salt', 'qwf7z}i?m.d3# l]xl{%n,l.! FEV{l +JU{Q8vy3UlLlpStpJ+K$B`P,(ML+7+-'); define('nonce_salt', '/XS{)25H,}w{.!M51OcSKu~IAC2=5Q; ^5r21fC~dSR3wqe[ShyR.Z }x_x,jx0!'); Denna fil sparade jag sedan som wp-config.php. Därefter laddades samtliga filer upp till webbhotellet one.com med hjälp av programmet Filezilla. För att Restaurang Balder skulle ha möjlighet att ha deras gamla hemsida uppe under tiden jag jobbade med deras kommande hemsida, valde jag att ladda upp dessa i en underkatalog. Denna döpte jag helt enkelt till 17

25 wordpress och kom åt denna genom addressen restaurangbalder.com/wordpress. Deras gamla hemsida låg samtidigt uppe på addressen restaurangbalder.com. För att sedan installera Wordpress på one.com besökte jag restaurangbalder.com/wordpress/wp-admin/install.php och fyllde i bloggens namn, lösenord och e-postaddress. Efter detta var Wordpress installerat. Då arbetet med sidan var färdigställt flyttade jag Wordpressfilerna till rotkatalogen på webbhotellet för att således publicera sidan under restaurangbalder.com. 3.3 Skapandet av webbsidan Struktur Med Wordpress installerat var det dags att börja strukturera upp den kommande webbsidan. Detta genom att skapa de olika sidorna som skulle ingå i den färdiga webbsidan. Processen som genomfördes för att skapa sidorna är densamma som jag gick igenom under kapitlet Teori. Nämligen via adminpanelen klickade jag på Sidor och sedan Skapa ny. De sidor som skapades gavs enbart rubriker medan innehållet lades till vid ett senare tillfälle. Sidorna som skapades var följande: Hem Meny - Á la carte - Lunch - Vin & Drinkar - Afterwork & Buféer Aktuellt - Evenemang - Uteserveringen Catering & Fest Personal & Lokal - Vår personal - Vår lokal Kontakt & Bokning Julbord Jultallrik Då denna Wordpresswebbsida var tänkt att användas som en hemsida snarare än en blogg valde jag att ta bort bloggdelen och därefter välja sidan Hem som en statisk startsida. För att åstakomma detta gick jag via adminpanelen till Inställningar och därefter till Läsa och kryssade sedan i En statisk sida under alternativet Startsidan visar. I rullgardinslistan över tillgänglig sidor valde jag sedan Hem som startsida. 18

26 För att ytterligare förstärka intrycket av att detta är en hemsida och ej en blogg valde jag dessutom att ta bort kommentarsfälten på samtliga sidor samt listan över senaste inlägg. Kommentarsdelen på sidorna tog jag bort genom att gå via adminpanelen till Inställningar och sedan Diskussion. För att ta bort listan över senaste inlägg valde jag att inaktivera det block där dessa visas. Detta gjorde jag genom att gå via adminpanelen vidare till Utseende och sedan Widgets. I denna del av Wordpress syns alla de aktiva blocken som används. För att inaktivera blocket Senaste inläggen drog jag detta block från den högra delen utav bildskärmen till fältet Inaktiva widgets. Genom att göra på detta vis raderas ej blocken utan inaktiveras enbart vilket är att föredra om man vid ett senare tillfälle skulle vilja använda sig av dessa. Layout Efter detta var det dags att installera ett tema och även ett såkallat barntema. Ett barntema är helt enkelt ett CSS-dokument som ärver egenskaperna från föräldratemat. Genom att modifiera barntemat ändras samma egenskaper även i föräldratemat på samma sätt som om dessa ändringar skulle gjorts direkt i föräldratemat. Anledningen till detta är att koden som skrivs i barntemat skriver över koden i föräldratemat. Fördelen med att göra ändringarna i barntemat är att dessa förändringar inte går förlorade vid eventuella uppdateringar av det installerade föräldratemat. Det tema jag valde kallas Twenty Eleven och processen för att installera detta var densamma som jag gick igenom under kapitlet Teori. Via adminpanelen valde jag Utseende och sedan Teman och klickade därefter bara på Aktivera under temat Twenty Eleven eftersom detta är ett tema som redan finns installerat i grundutförandet av Wordpress. För att installera barntemat skapade jag ett CSS-dokument i ett program som heter Dreamweaver. I detta dokument angav jag följande uppgifter: /* Theme Name: WpGuru Twenty Eleven Theme URI: Description: Barntema till Twenty Eleven Author: WordPressGuru Author URI: Template: twentyeleven Version: 1.0 url("../twentyeleven/style.css"); Den sista meningen i url("../twentyeleven/style.css");, är vad som får barntemat att ärva föräldratemats egenskaper. Barntemat laddades därefter upp till webbhotellet där de övriga Wordpressfilerna finns i en undermapp till föräldratemats mapp. 19

27 Nästa steg var att skapa en såkallad rullgardinsmeny, även kallad dropdown menu på engelska. För att göra detta gick jag via adminpanelen till Utseende och sedan till Menyer. I fliken Namn för meny angav jag det namn på menyn som jag ville ha, nämligen Specialmeny och därefter klickade jag på Skapa meny. Till vänster om denna flik finns en annan sådan som heter Primär meny. I denna valde jag min nya meny och klickade sedan på Spara. Under denna flik finns ytterligare en flik som heter Sidor där samtliga sidor som är skapade finns och det var i denna som jag angav vilka sidor som skulle ingå i menyn. Då beställaren Reza önskade att sidorna Julbord och Jultallrik enbart ska synas under den period då de är aktuella valde jag att inte inkludera dessa sidor i menyn. På så sätt syns heller inte dessa på hemsidan. De sidor som jag valde dök sedan upp i mitten utav skärmen och det var i denna fas jag gjorde om menyn till en rullgardinsmeny. I Wordpress är denna process väldigt enkel. För att skapa underkategorier drog jag de sidor jag ville använda som underkategorier ett steg till höger och lade dessa under de huvudkategorier jag ville använda mig av. 20

28 Efter att ha gjort detta var nästa steg att ladda upp Restaurang Balders logotyp i sidhuvudet. Men först ville jag ta bort delen ovanför sidhuvudet som finns i Twenty Eleven. För att åstakomma det gick jag via adminpanelen till Utseende och vidare till Sidhuvud. På den sida som dök upp kryssade jag ur rutan Visa text i sidhuvudet tillsammans med din bild. För att sedan ladda upp logotypen navigerade jag mig fram via adminpanelen till Utseende och sedan till Sidhuvud. I rutan Välj bild klickade jag på Välj fil, valde logotypen jag ville ladda upp och klickade därefter på Ladda upp. På den efterföljande sidan finns möjlighet att beskära bilden som valts. I mitt fall var detta överflödigt då logotypen redan hade de proportioner som efterfrågas. Jag var dock inte helt nöjd med utseendet efter att ha laddad upp logotypen på grund av en grå kant längst upp där logotypen placerats. För att ta reda på hur denna kant skulle tas bort använde jag mig av ett program som vid namn Firebug. Vad detta program i korthet gör är att visa den bakomliggande HTML -och CSS-koden för varje visuellt element. Genom detta program fick jag fram att den gråa kanten kallas för Border-top. Firebug berättade även på vilken rad i CSS-dokumentet koden låg vilket gjorde det väldigt enkelt att leta upp denna. 21

29 Efter att ha gjort det kopierade jag koden och klistrade in den i mitt barntema där jag ändrade Border-top från 2px till 0px enligt följande: #branding { border-top: 0px solid #BBBBBB; padding-bottom: 10px; position: relative; z-index: 9999; } Sist av allt valde jag att ta bort sökrutan i sidhuvudet genom att ange följande kod i barntemat: #branding #searchform { display: none; } Bakgrunden är ljusgrå i Twenty Elevens standardutförande vilket jag inte riktigt var nöjd med utan ville ha en mörkare, nästan svart bakgrund. För att ändra på detta angav jag följande i barntemat: body.custom-background { background-color: #383838; } Bakgrunden där själva innehållet på sidan återfinns är vit i standardutförandet vilket jag valde att ändra till svart. För att göra detta gick jag från adminpanelen via Utseende till Inställningar för tema. Till höger om Färgschema klickade jag i Mörk och sedan Spara ändringar. I detta skede började webbsidan se ut som jag ville, dock var jag inte riktigt nöjd med att rubriken Hem syntes på startsidan. I temat Twenty Eleven syns nämligen namnet på samtliga sidor som en rubrik längst upp på varje sida. Dessa rubriker passade i mitt tycke bra på de övriga sidorna därför ville jag bara ta bort rubriken på startsidan. Detta gjorde jag genom att i mitt barntema ange följande kod: 22

30 .page-id-4.entry-title { display: none; } För att ta reda på sidans id gick jag via adminpanelen till Sidor och sedan Alla sidor. Därefter hoovrade jag över sidan Hem och fick där fram; längst ner till vänster i webbläsaren. Siffran 4 är sidans id. Det tema jag valde är Responsive. Detta innebär att layouten på temat ändras i mobilen och på andra mindre skärmar. Något jag upptäckte var dock att menyn inte alls blev snygg på en mindre skärm och kände att jag var tvungen att göra något åt detta. Efter att jag på olika sätt försökte rätta till detta genom att göra anpassade menyer till mindre skärmar lyckade jag inte riktigt få till det som jag ville. Istället valde jag att stänga av denna funktion för att få temat att se likadant ut på en mindre skärm som det gör på en dataskärm. Detta gav enligt mig ett mycket snyggare resultat. Denna process utförde jag genom att kopiera filen header.php som återfinns i föräldratemats mapp till mitt barntema. Därefter öppnade jag den kopierade filen och tog bort följande kod: <meta name="viewport" content="width=device-width" /> Innehåll Med layouten färdig var det dags att börja fylla sidan med innehåll. Jag började med de menykategorierna som har underkategorier, nämligen Meny, Aktuellt och Personal & Lokal. I dessa lade jag in länkarna till de sidor som ligger som underkategorier. Detta momentets arbetsgång skedde precis som beskrivet i kapitlet Teori. Först gjorde jag en punktlista med namet på de olika sidorna. Därefter markerde jag dessa en efter en och klickade sedan på symbolen för länkar som ser ut som en kedja. I dialogrutan som sedan dök upp klickade jag på Eller länka till befintligt innehåll och angav de sidor jag ville länka till. Efter detta gick jag vidare till sidan Kontakt & Bokning där jag förutom addressuppgifter, även lade in ett kontaktformulär i form av en insticksmodul vid namn Contact Form 7. Denna laddade jag ner som en Zip-fil från och laddade sedan upp hela Zip-filen genom att i tur och ordning via adminpanelen klicka på Tillägg, Lägg till nytt, Ladda upp, Välj fil, Installera nu och sedan Aktivera. Därefter lade jag in insticksmodulen på den sida jag ville ha den på genom att lägga in följande direkt i textrutan: [contact-form-7 id="138" title="kontaktformulär 1"] 23

31 Dock var jag inte nöjd med det faktum att ramarna runt de olika meddelandena, som dyker upp efter att ha fyllt i uppgifter i formuläret, var gröna. För att ändra färgen på dessa hade letade jag upp CSS-dokumentet i mappen för insticksmodulen och ändrade färgkoden enligt följande: #div.wpcf7 { margin: 0; padding: 0; } #div.wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; } #div.wpcf7-mail-sent-ok { border: 2px solid #353535; } #div.wpcf7-mail-sent-ng { border: 2px solid #353535; } #div.wpcf7-spam-blocked { border: 2px solid #353535; } #div.wpcf7-validation-errors { border: 2px solid #353535; } #span.wpcf7-form-control-wrap { position: relative; } #span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; background: #fff; border: 1px solid #353535; font-size: 10pt; width: 280px; padding: 2px; } #span.wpcf7-not-valid-tip-no-ajax { color: #353535; font-size: 10pt; display: block; } Resterande sidor fyllde jag sedan med text och bilder. Text anges i textrutan på de sidor som önskas och fungerar i princip på samma sätt som att skriva text i ett textredigeringsprogram som Microsoft Word. Wordpress använder nämligen något som kallas WYSIWYG vilket betyder att man slipper se all HTML-kod i bakgrunden även om detta också är möjligt genom att klicka på Text i textredigeraren. De bilder som återfinns på sidan lades in precis på samma sätt som beskrivet i kapitlet Teori. Via adminpanelen navigerade jag mig till Sidor och sedan Alla sidor och klickade på de olika sidorna där bilderna skulle återfinnas. Ovanför textredigeraren klickade jag sedan på Lägg till 24

32 media och i dialogfönstret Infoga media valde jag Välj filer. Efter att ha valt de aktuella bilderna förflyttades jag till Mediabilblioteket. Vissa bilder ändrade jag storlek på genom Storlek och sedan de olika alternativen Miniatyr, Medium, Stor eller Full storlek. Efter att ha gjort dessa val klickade jag på Infoga. Det sista jag gjorde var att snygga till permalänkarna på sidan. Detta genom att gå via adminpanelen till Inställningar och sedan till Permalänkar. Som standard i Wordpress ser länkarna ut enligt följande: Detta ändrade jag genom att kryssa i Inläggsnamn vilket ger följande utseende: Därefter klickade jag på Spara ändringar. 25

33 4. Resultat I detta kapitel kommer jag att gå igenom det färdiga resultatet av webbsidan i både text och bild. Allt från innehållet på webbsidan till layout, navigation och skillnaden mellan denna och Restaurang Balders tidigare hemsida. 4.1 Innehåll Den färdiga hemsidan består av följande sidor: Hem Meny - Lunch - À la carte - Vin & Drinkar - Afterwork & Bufféer Aktuellt - Evenemang - Uteserveringen Catering & Fest Personal & Lokal - Vår personal - Vår lokal Kontakt & Bokning Julbord Jultallrik De sidor som är markerade med en punkt är de som syns direkt i menyn medan de sidor som är markerade med bindesträck representerar undermenyerna. Sidorna Julbord och Jultallrik syns som jag nämnde i föregående kapitel inte alls då dessa inte är inkluderade i menyn. Nedan följer en resumé över vad dessa sidor innehåller: 26

34 Hem Startsida Detta är den första sidan som Restaurang Balders eventuella kunder ser. Här finner kunden en bild över entrén och en text uppdelad i två sycken som presenterar restaurangen. Utöver denna information valde jag även att lägga in öppettiderna direkt på startsidan då det enligt min mening är den mest relevanta informationen som en hemsida för en restaurang presenterar. 27

35 Meny Denna sida länkar till de olika menyerna som Restaurang Balder erhåller. - Lunch Här presenteras lunchmenyn. Denna sida innehåller enbart en informativ text om lunchmenyn som Restaurang Balder erhåller. - Vin & Drinkar 28