Vi har fået lavet en et design brief så nu er vi igang med at idé udvikle.

Jeg har et par ideer som måske kan bruges så i morgen vil jeg gå mere i dybten med Illustrator og få lagt nogle forslag op. Så mon ikke vi kan få et mockup klar til mandag.

Jeg glæder mig til at se hvad de andre kommer med. Håber der kommer en idé på bordet som virkelig sprænger rammerne.

Vi havde et møde med vores vejleder her under hovedopgaven. Han synes godt om vores idé og problemformulering. Dog vil han gerne have at vi finder nogle rigtig gode USP’ere.

Vi fik fundet nogle USP’ere (unique selling points). Så vi kan forsøge at skille os lidt udfra mænden. Beklager men det er oplysninger jeg vil holde tæt med.

Her i eftermiddag — har jeg fået registret vores nye domæner.

I morgen kaster vi os over WBS’en (work breakdown structure).

Jeg er imponeret over dette framework. Jeg synes at Microsoft har gjort et godt arbejde. I tiden fremover vil jeg kode noget mere C#. Inden jeg kastede mig over Asp.net MVC. Havde jeg gennemgået en del tutorials så jeg havde ret godt styr på C# syntaksen igen — men det er ikke den store forskel på de forskellige sprog. Dog er der en masse klasser i  .net frameworket som jeg naturligvis ikke kender — det kræver jo man koder C# til hverdag. Der koder jeg jo PHP.

Havde lidt bøvl med MSSQL kunne ikke finde ud af hvordan ASP.Net linkede til databasen for det var noget Microsoft havde klaret for en. Det er jeg ikke vant til i PHP så det bryder jeg mig ikke om — føler jeg mister kontrol ; ) Men det er jo kun et spørgsmål om tilvending.

Han mener at min svaghed er at jeg mange gange er for hurtig på aftrækkeren og derfor kan vælge en løsning der er mere besværlig end hvis jeg havde tænkt lidt mere over det. Men han var slet ikke i tvivl om at min tekniske kunnen og stædighed ville komme til en løsning. Men jeg kunne nå der meget nemmere. Jeg er faktisk enig i hvad han siger og vil følge dette råd. Lækkert at have noget at arbejde med.

Men du kan se resultat af mine anstrengelser — håber du kan lide mit design.

Projekter før studiet

E-learning
• CFI Canon Forms Inteligence
• Canon iR1600/2000
• Datacentre e-Tool
• BeeTool
• Colour BeeTool
• Canon Colour Segmentation Tool
• Canon meap(Canon java API)
• PC Tool flash version 1(test værktøj)
• PC Tool flash version 2(test værktøj)
• Canon LFP-2002
• Professionel Colour Market
• Canon LFP-2003
• Canon LFP-2004
• Canon Tsunami Market (før naturkatastrofen)
• Canon Tsunami Selling
• Canon Ippon e-tool

Software udvikling
Agnitio Software Suite vedligeholdelse og nyudvikling af moduler samt debugging/struktureret test og dokumentation (stor kompliceret kode base). Nedenfor ses Agnitios illustration der viser at software pakken indeholder applikationer til at oprette præsentationer, planlægge og analysere salgsmøder.

Kompetencer

Ved studie start
• E-learning applikationsudvikling — erfaring fra mange projekter
• Flash/Flex/Certificeret flash MX Developer
• Struktureret test (v-modellen)
• Softwareudvikling (Php/ MySQL / Flash Actionscript 2)
• CVS
• Fireworks
• HTML og CSS (via kode editor)
• PHP og MySql
• VBA
• C#
• ASP.NET (C#)
• ActionScript 2 og 3 OOP
• JavaScript
• Joomla!

Nye kompetencer
• Photoshop
• Illustrator
• Indesign
• WordPress
• Forståelse af en visuel identitet
• Logo design
• Web design
• Analyse af websites
• Projektplanlægning

Se mit cv (engelsk, pdf format (239 kb))

Farvepaletten
Jeg vil gerne holde farvepaletten i samme farver som landskabet – derfor tager jeg en farveprøve. Jeg har konstateret at den grønne der ca. er midtimellem den mørkeste og lyseste farve er #406B12.

Nu kan jeg så oprette min paletten oprette et Photoshop dokument. Tegner et kvadrat og sætter dets farve til #406B12 duplikerer kvadratet. Konstaterer hvad lyshed #406B12 har via LAB farve valgene er det kun L der er interessant. Som baggrund ville jeg have en blå, valgte ”L” 39 og kunne nu finde en blå i samme lysstyrke altså #006699. På den måde får jeg et site med harmoni i farverne. Artikler omkring LAB farver og farvekontraster som jeg har min viden fra:

• Johannes Ittens bog, Farvekunstens Elementer
• Tips farvetilstande
• Photoshop CS4 / Adobe
• Visble.dk (Dansk reklamegude)
• Digitalmagasinet
• Artmachine.dk, vejleder — Morten Bøll
• idamarie.dk Kompendium i farvelære
  / ved Ida-Marie Müller (Olsen)

Den lysegrønne er en farveprøve fra landskabet af den lyseste grønne – nemlig #78C823 som således skal virke som kontrast farve til de andre. Klik på billedet for at se det i fuld størrelse.
Manglende vedhæftet fil

Til bordere og baggrundsfarver i områder indenfor ”body” anvendes #406B12. Som baggrund for hele sitet laver jeg et en gradient med #006699 som den mørke farve og #FFFFFF (hvid) som den lyseste.

Oprettelse af gradienter
Slicer / gemmer gradienten til en jpg som jeg kan benytte som baggrund som kan gentages horisontalt via CSS’en. Som ”footer ” laver jeg en gradient med farverne #406B12 til #78C823. Laver en slice som ligeledes kan gentages horisontalt i „footer” området.

Logo
For at lave en visuel identitet på sitet anvender jeg et logo som jeg har lavet for længe siden „tr” desværre kan jeg ikke huske hvordan processen var da jeg lavede det logo. Det er min idé at dette logo skal beholde sin horisontale placering selvom hovedområdet af sitet bliver større eller mindre. Samtidig er hovedområdet af sitet centreret, og er styret at størrelsen på browser vinduet, som således flytter sig i forhold til logoet.

Målet for projektet er:
Give brugeren muligheden for at kunne ”customize” sitet ved at vælge mellem flere forud definerede design. Dog vil jeg begrænse mig til kun at lave et ekstra layout i denne opdatering og fokusere mest på at få selve koden til at virke. Det alternative design vil kun ændre header billede og farver. Men det er min mening at forberede løsningen til at man kan lave ”helt” andre webdesign.

Teknologier:

• Javascript (cookies, onload event og DOM manipulation)
• (x)html (form — dropdown menu)
• CSS (ekstra ”stylesheet ”som tilføjer ændringer af designet)

Flowcharts for applikationen:
Flowchart over onload eventen

Flowchart over onchange eventen

Workflow
Jeg fik hurtigt implementeret løsningen.

Skrev hurtigt de to funktioner.

For at give brugeren mulighed for at vælge mellem designs oprettede jeg en dropdown menu (select) og gav den en id så det var muligt at finde den via javascript.

Samtidig satte jeg onchange til setStyleCookie(). På den måde vil setStyleCookie() blive kaldt hver gang brugeren vælger en værdi.

Umiddelbart gik det nemt og smerte frit. Men desværre virkede løsningen ikke som forventet. Nogle dage efter fandt jeg ud af applikationen ikke kunne håndtere hvis brugeren ikke havde været på siden før. Det viste sig at jeg havde lavet min if struktur lidt for hård. Derfor løste jeg op for den så jeg bare checkede på Cookie(’mode’). Det tog noget tid at få det til at virke efter hensigten.

Men nu er løsningen klar så den kan nemt udvides og fin justeres.

Der opstod dog et problem – ikke alt i ”sitebaren” var genereret af ”widgets”. Disse elementer måtte jeg fjerne fra ”sitebar.php”.

Nyt problem
Nu har jeg en masse sider hvor jeg gerne vil have forskellige ”sitebarer” på. Men jeg havde ikke særlig mange ”widgets”. Så jeg måtte ud og finde ”widgets” som kunne forbedre mit site visuelt og funktionelt. Jeg fandt en del gode ”widgets” som jeg installerede dog også nogen jeg afinstallerede igen. Bl.a installerede jeg et ”widget” der kunne indsætte et RSS link på ens side. Jeg ville installere et RSS link så brugere kan abonnere på ændringer på min side – men grundlæggende synes jeg bare det er en pæn detalje med et RSS logo. Desværre var der fejl i så jeg fik 404 fejl i min rapport over SEO.

Egen løsning – RSS link
Men jeg overvejede at det nok var rimeligt simpelt at lave en løsning selv via html text plug-in’et. Det er bare at oprette et link med en id. Også oprette en regel med noget god padding og et baggrundsbilled. Selve logoet havde jeg fra den tidligere ”widget”. Lavede samme løsning til mine Flikr og Facebook links kunne nu også afinstallere et andet ”widget” (find-me-on). Jeg synes dette er en meget bedre løsning især fordi jeg helt har kontrol med hvad der er oprettet.

Et andet lækkert widget
Information om hvem der er online på sitet – synes jeg ikke er så væsentligt men det tilføjer dynamik på siden – på den måde at brugeren får indtryk af at siden er levende og bliver opdateret. Men samtidig giver det her plug-in mange muligheder i backend’en bl.a. kan man følge med i hvem der er online nu. Og hvem der har været online i de sidste 30 dage. Man kan tydeligt se ip-adresse, siden de kigger på og hvilken side de kommer fra eller om de har tastet adressen direkte. Desuden kan man se dem som prikker på et verdenskort. Søgemaskiner bliver også registret. Fantastisk plug-in.

Problem med ”Who is online” plug-in’et
Desværre var dette plug-in ikke oversat til dansk. Så jeg måtte sætte mig ind i hvordan man oversætter sprog filerne til WordPress. Det viser sig at de anvender GNU oversættelses ”frameworket” – GNU gettext. Altså et Linuxbaseret værktøj. Du kan læse mere om oversættelse af WordPress her. Der findes en mere behagelig udgave til windows Poedit. Poedit kan åbne et oversættelses katalog altså en *.pot fil. Når man åbner en sådan fil i Poedit. Listes original sproget i en kolonne og oversættelses sproget i en anden. I bunden findes to tekst bokse øverst vises en gentagelse af den celle man har valgt i de to kolonner. Man kan så oversætte i den nederste tekst boks. Når man så gemmer – gemmer man en *.po fil hvor den danske oversættelses kode da_DK er den sidste del af navnet. Bagved gemmes også en *.mo fil som er den endelige oversættelses fil. Efter jeg havde oversat kunne jeg oploade disse to filer til ”language” mappen i plug-in mappen.

Næste trin er at oprette sitemap og robots.txt.

Selvom meta tags ikke har den store effekt på moderne søgemaskiner opretter jeg dem alligevel for den effekt de alligevel har.

For nemt at oprette meta anvender jeg metamaten.dk (tip fra vejleder Jesper) som hurtig opretter metatags som så kan kopieres ind i header.php. Jeg har også et par sites ”jazzsiten” og ”VI” som ikke skal indexeres af robotter derfor oprettes en meta i disse.

Sitemap
Et sitemap er et xml dokument der beskriver siderne i et site og som er udformet så søgemaskiner kan læse og forstå det. Her søgte jeg efter et plugin på WordPress.org under extensions. Fandt plug-in’et „XML-Sitemap Generator for WordPress”. Ganske god applikation til formålet.

Under min søgning efter sitemap plug-in fandt jeg et andet plug-in til SEO som endnu bedre kan håndtere titlerne på siderne. Samtidig kan det monitorere 404 fejl – altså sider som ikke længere findes. Desuden lister plug-in’et en masse whitepapirs om SEO. Det hedder ”SEO Ultimate”. Det var hurtigt installeret.

Google webmaster tools / GWT
Nu kunne jeg gå ind på GWT og aktivere min side. Altså ved at tilføje en speciel meta id i header.php, som var genereret af GWT. Ganske simpelt og hurtigt.

Herefter kunne jeg uploade Sitemap’et til GWT – det blev indlæst uden fejl.

Nu var turen kommet til robots.txt som bare er et regelsæt for hvad hvilke søgemaskiner må indexere.

Jeg åbnede for alle søgemaskiner og begrænsede specifikke mapper f.eks. wp-admin o.lign.

I de her dage går jeg og holder meget øje med hvad der sker og sender mit Sitemap igen når jeg laver ændringer på mit site. Jeg søger hele tiden at eliminere 404 fejl og stramme op hvor jeg kan.

Tilmeldte sitet til Bing (MSN Search). Funktionalitet en helt identisk med den på GWT – den eneste forskel er at der skal stå en ekstra regel i robots.txt altså en sti til hvor sitemappet kan hentes fra. GWT brokker sig over linien – men jeg har skrevet den som sidste regel i robots.txt for at være sikker – men vil checke op det i de kommende dage.

Yderligere optimering
Allerede efter kort tid fik sitet jævnlige besøg af søgerobotter — desværre kunne jeg se i min 404 log (liste over sider som ikke bliver fundet) at der var nogle links som ikke virkede efter hensigten. Fejlen skyldes at jeg anvender relative links og ikke havde tænkt over at konteksten skifter alt efter om man kommer ind via tags eller kategorier. Løsningen er desværre at benytte fulde stier. Så jeg har ændret links.

Men det nytter ikke noget bare at ændre disse referencer / links for google vil jo stadig have de forkerte links i deres system. Derfor er det nødvendigt også at oprette en 303 omdirigering. Altså en regel som fast sender brugeren videre til det rigtige sted. For at kunne foretage omdirigeringer  installerede jeg et plug-in som kan håndtere omdirigeringer. På denne måde får f.eks. google besked på at referencen er ændret fremover. Her den 7. januar 2010 kom der en enkelt 404 på min log. Og der vil nok komme flere men tror nok jeg har fanget de fleste.

GWT
Jeg logger tit på og ser hvordan min side bliver placeret i søge resultater hos google. Det er ret fantastisk, at se det virker at søgemaskine optimere. Mit site ligger nu som første resultat  i visse søgninger (i skrivende stund — kan jo ændre sig). Du kan læse nærmere om hvorfor det er godt at være højt placeret i søgninger her.