Præsentationsportfolio for Thomas Riis > Blog > content > Portfolio projekt take 2

Portfolio projekt take 2

Her er et link til projekt planen ( dette her forløb findes under task 11 -25)

Grundlæggende var jeg ikke tilfreds med den version af portfolioen jeg havde lavet
derfor har jeg tænkt mig at lave den om —  der følgende grund til dette:
På den gamle portfolio (den på WordPresses server) skrev jeg på engelsk som jeg først synes var en god idé. Jeg er vant til at skrive og dokumentere på engelsk. Men jeg synes det virker hæmmende, da alt undervisning er på dansk.

Løsning:
Det er min målsætning, at jeg vil skrive på dansk også oversætte til engelsk (Oversættelses plugin). Det bliver dog et projekt jeg først vil lave i løbet af studiet. Jeg vil ikke installere et plugin så tæt på en aflevering.

Installering af WordPress:
Vurderede med mig selv om jeg vil lave min egne hjemmeside i dreamweaver og oprette den i Joomla! men valgte at installere wordpress sammen med de andre i klassen.
Jeg fulgte min underviser, Meretes instrukser så det tog mig ikke langt tid, inden jeg havde WordPress installationen kørende på skolens server.

Dog havde jeg skrevet forkert brugernavn (fandt jeg ud af). Jeg rettede i „wp-config.php” og uploade den på ny. Da sitet var op at køre hjalp jeg andre studerende, som havde brug for hjælp.
Installerede herefter en nyt tema — processen var lidt mere besværlig end på WordPresses server. Man skulle indtaste ftp oplysninger og applikation skulle lige downloade temaet.

Oprettelse af header:
Det tema jeg havde valgt var lækkert. Men måtte desværre sande at man ikke udenvidere kunne indsætte en „custom header”. Så jeg besluttede at finde ud af hvor — headeren blev loaded ind. Om det foregik i CSS’en eller i html’en.
Ved hjælp af FireBug kunne jeg nemt udlukke CSS’en. Meget foreståeligt var det et img tag som var ansvarlig i header.php filen. Hvor ellers?
Kunne nemt aflæse størrelsen på den nuværende header.
Startede PhotoShop og oprettede et nyt dokument i størrelsen 770X168px.

Boble ideen:
Jeg havde den idé at jeg ville udfordre mig selv ved at kopiere nogle dråber over fra den oprindelige header


men synes ikke at få det til at fungere rigtigt — søgte efter en „tutorial” om emnet dog uden held. Men fandt så en hjemmeside hvor man kunne downloade og installere specielle „bubble bruches” jeg installerede disse „bruches” i PhotoShop. Det gav mig hurtigt resultatet jeg ville have. Jeg er meget tilfreds med den måde at tilføje bobler/dråber på. Fandt senere ud af at man kan deformere boblerne lidt, hvis de ligger i deres eget lag. Så det er meget nemt at lave „naturligt” lignende skum eller dråber på den måde.
Oprettede et sort lag og tilføjede yderligere et lag og tegnede så en stor boble. Og placerede den over mod højre, tæt på det gyldnesnit — så der kom noget dynamik over headeren. Tilføjede to små bobler så man ikke er i tvivl om at den store from er en boble.
Jeg havde en ide om at jeg ville lave headeren cowboy inspireret, så jeg lagde et detalje billede af en lade ind under det sorte lag. Og ændrede alpha’en på „fyldet” så men svagt kunne se brædderne fra laden bagved.

Også brugte jeg fonten „bleeding cowboys” — den får en til at tænke på en cowboy saloone eller en ’wanted dead or alive’ plakat.


Brugte herefter en olie „bruch” for at få en lidt gammel effekt. Det så meget fedt ud men jeg synes ikke at cowboy stilen  og boblen ville fungere sammen. Boblen så mere morderne ud. Så jeg ændrede fonten til „Capture it” der er en moderne display font. Derefter fjernede jeg „barn” og olie laget.

Valgte at skrive „portfolio” i en rød farve der ligger godt op ad den sorte farve samt der matcher til den røde farve der allerede er anvendt i wordpress templaten. Skrev så Thomas O. Riis med sort. Lagde noget blur omkring denne tekst for at fremhæve mit navn. Men uden at fremhæve det særlig meget — det skal ikke være det første man ser.

Gemte en kopi af headeren (optimeret til web). Uploadede den til WordPress. Kopierede fil-stien. Og ændrede src attributten i img tag’et. Uploadede „header.php” igen.

Nogle dage efter, arbejdede vi med en glas kuppel inde fra Kogens Nytorv. Tænkte at jeg ville ligge den ind i headeren. Lavede forsøget. Friskrappede den og flyttede den over. Og ændrede „alpha’en” det gav lige den rette effekt i PhotoShop men da jeg uploadede resultatet kunne jeg se at det ikke virkede det blev alt for rodet. Så jeg fortrød ændringerne i PhotoShop og oprettede en ny kopi til web, igen. I stil med den gamle. Her er resultatet:

Forside billedet:
Oprettelse af forside billede (selvportrat) ville give billedet en polarid/billed udseende så jeg hentede billedet ind. Udgangspunktet:161

Lagde nogle justeringsslag ind så jeg kunne styre dels kontrast og farvestyrke samt „Curves”. Ændrede så kanvas størrelsen først i dialogen. Men anvendte „cropværktøjet” det er hurtigere til at ændre størrelsen på kanvas.
Lavede herefter en hvid vektor firkant som jeg lagde skygge på så men får effekten af et polaridfoto.

Resultat:

thomas_paa_tarasse

Videre forløb:
For at kunne oprette portfolien nemt (struktur og tekst) har jeg valgt at oprette et storyboard i Powerpoint — en arbejdsgang jeg er, vandt til fra min tid som ’e-learning’ udvikler.

Det var nemt at oprette strukturen i powerpoint og jeg kunne nemt ændre den, det er noget sværrer at gøre i en website.

Herefter kunne jeg nemt oprette siderne i WordPress. Dog skulle jeg lige finde ud af hvordan alle de mange projekt undersider skulle tilføjes.
Forsøgte først at oprette dem som „pages” men desværre blev undersider også vist i navigationen så det duede ikke. Så jeg fandt på at oprette disse undersider som indlæg i stedet. Senere har min vejleder Merete fundet ud af at man kan gemme siderne som kladder så bliver de ikke vist i navigationen — smart.

Gav dem en tidlig dato så de ligger nederst på siden. Kunne ikke finde nogen måde at skjule dem. Det vil jeg prøve at finde ud af hvis jeg når det inden afleveringen.

Fandt ud af at man kan lave en side som forside linket kan pege på. Også ikke lave nogen side som indlæg vises på. Der var stadig et problem med designet. På hver side vises hvornår pågældende side er oprettet. Det giver kun mening i en blog (min mening). Derfor ændrede jeg lidt i css’en.

Ville skjule dato- og månedsgrafikken. Mærkerede grafikken og ved hjælp af „FireBug” kunne jeg finde udaf hvilken css fil og linier jeg skulle ændre. Valgte at skjule emnet da det er en ikke destruktiv måde at fore tage ændringen på.

Man skjuler et emne i CSS med display:none; Uploaded og så resultatet. Der var stadig et problem der var tilføjet noget padding som skulle væk. Fandt linien i CSS’en og udkommenterede den. Uploadede site.css med de nye rettelser. Nu var restultatet, som jeg vil have det.

Der var stadig noget som skulle rettes — lange overskrifter blev lagt over flere linie — det så ret dumt ud på forsiden så jeg laved bredden på „h1” elementet større så længere overskrifter kunne være på en linie — forsiden havde den længste titel så den målte jeg efter.

Jeg havde en del billeder af gamle projekter som jeg nemt kunne uploade og anvende til „før Studie” (senere omdøbt til CV) projektbeskrivelserne. Så det blev hurtigt klaret. Jeg havde skrevet teksten så det skulle nærmest bare være ’copy/paste’ men så nemt skulle det alligevel ikke være. Der kom desværre formatering med fra Power Point. Løsning, jeg kopierede over til Nodepad++ og så videre over til wordpress (på den måde fik jeg fjernet alt formatering — kender problematikken fra en tidligere oplevelse). Længe efter har jeg fundet ud af at der findes en knap til denne omkonvertering „paste as simple text”. Lavede løbende links, under hele processen, rundt mellem siderne. Og kopierede et tilbage link til alle undersiderne.

Nu er der bare tilbage at teste at navigationen virker som den skal og se om jeg har lavet stave fejl. Og om der stadig er engelsk tekster der skal rettes til dansk.

tilbage

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *