GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende) Den måtte gerne blive mere moderne i udseende, mere salgsskabende, nemmere at navigere rundt i og at forstå hvad firmaet sælger. Firmaets aktivitet er nemlig lidt abstrakt, og det kunne være svært at gennemskue hvad firmaet havde at tilbyde på den daværende hjemmeside, som var derudover ret teksttung.

TEKNISKE KRAV 1. JOOMLA Den daværende hjemmeside var lavet med Joomla, en CMS (=Content Management System) som ledelsen var fortrolig ved og selv kunne finde ud af rette i, så det skulle den nye hjemmeside også være. Dog skulle Joomlas version opdateres. Joomla, som mange andre CMS, har en front-end del (selve hjemmesiden som den ser ud online) og back-end del (en online brugervenlig interface hvor man logger på for at ændre hjemmesiden) For at kunne arbejde på den nye hjemmeside og se den live, uden at den var offentliggjort oprettede jeg en under-domæne til vores domæne, hvorpå den nye version af Joomla blev installeret. Det vil sige at ved at skrive www.futurecombusiness.com kunne man se den gamle hjemmeside, og ved at skrive www.futurecombusiness.com/nyhjemmeside kunne man se den nye hjemmeside mens den blev bygget op. 2. OPTIMERING Der blev dengang (2010-2011) ikke taget stilling til at den nye hjemmeside skulle være optimeret til smart devices, så dette krav så jeg lidt bort fra. Jeg var dog opmærksom på, at hjemmesiden fungerede fint i alle de mest benyttede internet browsers. 3. GOOGLE ANALYTICS Vores google analytics konto skulle følge med den nye hjemmeside. Dette blev gjort ved at indsætte et stykke kode i <head> tagget på hjemmesidens template. Most used web browser in country or dependency as of March 2014, according to Statcounter 3

4 WIREFRAMES For at danne mig et overblik over hvad de forskellige sider skal kunne og hvor de skal pege hen, laver jeg skitser/wireframes, der beskriver groft hvordan siderne skal være opbygget, og hvilke funktioner de får. Dette giver et godt udgangspunkt til diskution med ledelsen, der så kan give deres input og fortælle om deres ønsker.

JOOMLA TEMPLATE Som det første installerer jeg det template, som en tidligere elev og ledelsen havde udvalgt da projektet blev sat i gang. Med dette template følger der en online kundesupport i 1 år meget godt når man støder på tekniske problemer med template. Joomla hjemmesider er bygget i moduler, som er fordelt på siden. Man tilpasser en template ved at få fat i indholdet af disse moduler, og ændre deres udseende. I dette template er billedegalleri f.eks. placeret i modulen der hedder banner1, menuen ligger i gk_nav Ved template valg skal man være opmærksom på om template et er indbygget med de funktionaliteter, man har brug for ellers er man nød til at installere ekstra plug-ins/ extensions, der ikke nødvendigvis er kompatible med det template eller den joomla version man har installeret. Template som det ser ud når man køber det og installere det 5

6 OPBYGNING AF SIDERNE Vi har nu en tom skal som ser nogenlunde ud, som man ønsker det. Næste skridt er derfor at fylde siden med inhold, og at tilpasse udseendet. Joomla fungerer med moduler, som er placeret i module positioner som beskrevet på side 5. Derfor handler det nu om at oprette artikler, menus, og andre elementer som man ønsker at have på sin hjemmeside, og placerer dem i en module, som så placeres i en module position. SECTION OG CATEGORY Indholdet af en Joomla hjemmeside er delt op i Sections og Categories. Man skal derfor som det første oprette relevante Sections (f.eks. Blog hvor alle blog indlæg bliver opbevaret, Uddannelse hvor alle de artikler der har med Uddannelse bliver opbevaret), og relevante Categories (f.eks. News under sektionen Blog ) Denne opdeling hjælper f.eks. når man vælger at et menupunkt skal henvise til en side hvorpå alle artikler omkring en Section skal vises f.eks. Blog ARTIKLER Import af artiklerne fra eksisterende hjemmeside Redigering af artikler Opbevaring Dettes gøres ved hjælp af en extension. Extensions er Joomlas måde at udvide funktionaliteter af en joomla side. Man kan downloade dem fra Joomlas hjemmeside, nogle er gratis, andre ikke. Derefter er der en menu i back-end der gør det muligt at installere disse extensions og gør dem aktive, med kun få klik. Artiklerne placeres under den rigtige Section og Category. Teksten rettes enten som ren tekst i Joomla editor, eller ved at switche til html editor dette giver mulighed for at style teksten yderligere med hjælp af css. Alle artikler er samlet under menupunktet i back-end der hedder Content. At de er oprettet betyder ikke at de vises i front-end.

MENU Man kan oprette mere end en menu, f.eks. en til toppen (hovednavigation menu) og en til venstre side (intern navigation inden for et menupunkt) Menupunkterne i Joomla kan være af forskellige arter og vises på forskellige måde: de kan henvise til en artikel, til en ekstern side, til en liste af artikler, til en side hvorpå der vises en ekstern side... Men det er ikke nok at oprette en menu, det betyder ikke at den vises i front-end på det rigtige sted. MODULER Til sidst skal man oprette sine moduler, og placere dem på siden. Display af menu Display af billedgalleri Man kan oprette en menu module, i den kan man putte den menu som vi har oprettet, og til sidst kan man placere modulen på siden i module position menu (se side 5). Billedgalleriet på forsiden skal oprettes som en module af type billedgalleri galleriet er oprettet under back-end menupunktet Components, og navngivet. Modulen henter så det rigtige galleri, skulle der være oprettet flere end et. Modulet placeres i module position banner1 Artikler behøver ikke puttes i et modul, da det er menupunktet i sig selv der ved, at når man klikker på det, så skal der vises en bestem artikel og dette gøres automatisk i mainbody positionen. Joomla 1.0 front-end interface 7

8 TILPASNING AF TEMPLATE Der er 2 måder at tilpasse et template på. 1. Man kan bruge de forudinstillinger som template et er født med, og ændre dem i back-end dvs. i den interface der kommer frem, når man logger på i backend delen af sitet. Det er f.eks. der hvor ledelsen i firmaet logger på, når de skal ændre i en sides tekst, eller oprette en artikel. Tilpasningen her er begrænset til de muligheder som templatet tilbyder. F.eks. kan et template være født med et rødt tema, og et gråt tema den én gør alle menu elementer og billedgalleri baggrund rød, den anden gør dem grå. Men man kan for det meste ikke vælge i back-end at menu elementerne skal være blå og billedgalleri baggrund sort. Det kræver at man går dybere ind i templates kode. eksempel på hvordan tilpasning af en modul ser ud på back-end

2. Man kan rette i templatets stylesheets Man kan også få fat i selve stylesheets ene, og rette direkt i dem. Dette kan være lidt af et detektiv arbejde, da sådan et template kan have vedhæftet mange stylesheets. Derfor kan man bruge ens webbrowser udvikler værktøj som f.eks. Firefox Firebug eller Chrome DevTools til at finde frem til navnet på det element og det stylesheet som man skal rette i til at tilpasse templatet. Man kan også skrive sine egne id/class ind i template et, og så oprette dem og beskrive dem i stylesheet et. Man kan enten rette stylesheets ene online i back-end, eller downloade dem ved hjælp af et FTP program og rette i f.eks. Adobe Dreamweaver det synes jeg giver mere frihed til at søge efter bestemte elementer, copy/paste, intuitiv kodning...end hvis man gør det online. Det er vigtig at tage en kopi af stylesheets ene før man retter i dem, så man altid kan komme tilbage til det oprindelige template hvis noget går galt. Efter man har rettet stylesheet et, skal man bare uploade det igen sammen med de tilknyttede grafiske elementer og reloade sin hjemmeside. Denne metode giver et større frihed til at tilpasse alle de ønskede elementer. eksempel på Firebug Firefox værktøj til udviklere 9