Præsentationsportfolio for Thomas Riis > Blog > selvrefleksion

Vi ændrede lige kurs

Da vi forlod skolen torsdag var vi alle enige om vi havde den helt rigtige idé. Men efter lidt tid fandt vi ud af at vi ville ende med at skulle lave en forum løsning, som vi sagtens kunne lave men vi synes bare ikke det ville give opgaven det fokus vi ville have. Så vi troede ganske enkelt ikke på vores idé mere (Nu vil jeg ikke skive hvad vores idé var for det kan jo være – den kan tages frem en anden gang).

Nu er planen at vi vil lave et website for et webbureau der skal være konkurrence dygtigt og skal kunne differentiere (skille sig ud) sig fra andre webbureauer. På denne måde vil vi kunne lave en løsning hvor vi virkelig skal tænke kreativt.

Samtidig skal vi tænke i at lave en kommunikationsstrategi og diverse marketings-analyser. Problemformulering en skrevet og nu kan vi så gå i gang med projektplanlægningen på mandag. Dog skal vi lige have lidt feedback fra vores vejleder.

Men går stærkt ud fra vi holder fast i vores idé nu – så i mit hoved burde vi være færdig med en PBS (product breakdown structure) og WBS (work breakdown strukture) projektplan i Microsoft Project, interessentanalyse og risikovurdering på tirsdag.

Hyggede lidt med jQuery

Fredag eftermiddag kodede jeg lidt jQuery. Ville lave en cool måde at lave en navigation med rullende indhold.

  1. Lavede hurtigt noget markup der kunne bruges til at lave tre “content areas” der kunne skubbes rund i en div “container” som jeg gav en fast størrelse og satte overflow til hidden.
  2. Oprettede også en “sidebar” div hvor jeg kunne have links i.
  3. Så tænkte jeg at jeg ville starte ud med at lave løsningen som ren html udgave og så linke til indhold vha “#content-area”.
  4. Dette virkede faktisk bedre end jeg havde troet – når man klikkede på et link rullede indholdet ned til det rigtig område. Og det tidligere synlige del forsvandt. He he det gjorde linksne så også.
  5. Løste link issuet ved at anvende position: fixed.
  6. Det er så den løsning brugeren vil se hvis javascript er slået fra.
  7. Nu kunne jeg så kode løsningen i jQuery.
  8. Det var ret simpelt at lave animationen – da jeg først fandt ud af forskellen på at avende jquery metoden offset() og position().
  9. Jeg begyndte med at anvende offset() men det virkede ikke efter hensigten. Men fik hurtigt ændret til at benytte position() som giver div elementernes position realativt i forhold til den element de ligger i.
  10. Så løsning var i hus.

Tjek min løsning ud (bemærk ren prototype ikke noget fancy grafik) :
htmlversion

javascriptversion

Du kan jo snuppe kode – men jeg vil være glad hvis du spørg pænt ; )

Fik godkendt mit praktikfoløb

Fik holdt en lille præsentation omkring virksomheden og praktik projektet. Tue min vejleder synes godt om min løsning af projektet og ville gerne godkende praktikken så jeg fik en glad smilely – lækkert. Vi fik hyggesnakket lidt og jeg fik et virkelig godt råd. Når jeg programmere skal jeg huske at finde frem til 3 forskellige løsninger af den pågældende opgave (bare hurtigt) og så vælge den løsning der umiddelbart virker bedst.

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.

Teletobbieland Designet

Jeg har den ide at designet skal være en modsætning til det mere dunkle design som er på sitet – på nuværende tidspunkt. Dog uden at jeg ønsker at ændre på typografi og elementer, da jeg synes de fungere rigtig godt. For længe siden faldt jeg over et tegnet landskab, som så lækkert ud. Jeg synes at det vil virke frisk at anvende dette naive og glade stykke grafik.

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:

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.

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.

Forskellige “sitebars”

Under en søgning efter et Sitemap plugin fandt jeg et plug-in som kunne generere forskellige ”sitebars” til forskellige sider og indlæg. Det havde jeg så tænkt mig at benytte senere. Fik hurtigt og smerte frit installeret plug-in’et. Dog virkede det ikke umiddelbart – manglede noget kode i min sitebar.php fandt jeg ud af. Rettede funktionskaldet: dynamic_sidebar() til generated_dynamic_sidebar(). Og så virkede det – nu var det bare at oprette en sitebar og tilføje den til de sider hvor den skulle vises. For at håndtere dette findes en dropdown menu under sider / indlæg i administrator modulet. Og nu kunne jeg så gå ind og finde sitebaren under ”widgets” og så tilføje de ”widgets” jeg vil have på den ”sitebar”.

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.

Søgemaskine optimering

Grundlæggende er første led i en optimering klaret, titlerne står allerede på den optimale måde.

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.
gwt
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.

Justering af “title”

Beskrivelse
Justering af title tag i HTML’en. Grundlæggende skrives titlen med navnet på portalen først og herefter navnet på siden. Jeg synes ikke at det information der skal fanges af søgemaskinen først skal være navnet på portfolien det bør være navnet på selve siden. Da navnet på siden eller indlægget bedst beskriver indholdet af siden. Derfor vil jeg ændre på rækkefølgen af disse nøgleord.

Foretog følgende rettelser
Ændrede på rækkefølgen og tilføjede en fast tekst til forsiden. Her er koden som jeg lavede i header.php

<title><?php if(is_front_page()){echo "Portfolio for Thomas Riis, Multimediedesigner Studerende @ Knord"; } ?><?php wp_title(); ?></title>

Jeg har dog efter denne rettelse tilføjet et plug-in som kan håndtere titlerne endnu bedre. Så løsningen er ikke så relevant for mig mere men det virkede.

Justering af kommentarer

Beskrivelse af Issue
Kommentarer og indlægsinformation glider ind i selve brødteksten på alle indlægssider.

Workflow

  • Loadede en indlægsside i Firefox.
  • Fandt elementet med Firebug.
  • For at bryde floatningen fortog jeg følgende tilføjelser i css’en:
    • .postmetadata { padding-top: 1em; clear:both; width:100%}
    • .comments {clear:both; width: 100% }

Rettelse af Breadcrumb

Beskrivelse af issue
Issuet går ud på at når brugeren går ind under indlæg – vises kategorien som de er listet under som “parent”. Jeg vil hellere have at man kan se siden man kommer fra.

Idé
Jeg vil fortage en nem løsning af issuet i Javascript og anvende “document.referrer”.

Løsning / workflow

  • Fandt ud af at der fandtes et javascript til sitet som jeg kunne skrive koden i.
  • Gik ind i header.php for at  indstille “BreadcrumbNavXT”, til at skjule kategorien når et ’single’ indlæg er loaded.
  • Samtidig tilføjer jeg et ekstra span element med id’en “postnavn”.
  • Herefter manipulerede jeg document.referrer vedhjælp af split(’/’);
  • Og så finder jeg næst sidste emne i result arrayen fra split() altså navnet på tidligere side er nu fundet.
  • Dette navn sættes ind som et link som får referrer som href og samme navn som titel.
  • For at få fat i “postname” id’en benyttede jeg den velkendte Jquery eller Mootools funktion$(’postname’); som svarer til getElementById()

Portfolio i to kolonner

Workflow

  • Søgte efter løsninger på Google og wordpress.org
  • Fandt frem til at jeg kunne lave en “custom function” som kunne iterere igennem indlæg- eller sidedata. Ville så splitte input ved hvert “p” element. Her kunne jeg anvende PHP funktionen explode() der returnerer en array med alle de forskellige linier.
  • Så skulle array’en bare fordeles mellem “content_left” og “content_right”. Her dividerede jeg længden af array’en med 2 og afrundede. Brugte følgende if-sætninger for at udvælge data til kolonne 1 og 2. if ($i <= round($len/2)) og if ($i >= round($len/2)). Det tog lidt tid at nå til denne præcise if-sætning prøvede uden round i begyndelsen men det virkede ikke ordentligt – fordelingen blev ikke god. For at returnere dataene til websitet benyttede jeg følgende wordpress funktion: wpautop()
  • Fandt denne funktion anvendt under en søgning på Google: Se anvendelsen her iøvrigt anvendes en funktion der minder om min. Den inspirerede mig til at lave lidt ændringer.
  • Nu var det så bare at finde ud af hvordan jeg kunne samle dataene til at sende over til funktionen.
  • Prøvede at tilskrive returværdien af the_content() til en variabel jeg sendte videre til funktionen. Men problemet er bare at sidedata alligevel genereres før funktionen startes så jeg endte op med den tidligere visning plus visning i to koloner i bunden. Søgte på google her var medicinen.

<?php ob_start();  ?>
<?php the_content();  ?>
<?php $con = ob_get_clean(); ?>

Kunne nu ryde op, teste yderligere og flytte løsningen over til WordPress installationen på mit eget domæne og lave ændringerne for “single.php” altså indlæg vist alene.