Præsentationsportfolio for Thomas Riis > Blog > Studie Projekt

Zendframework og unittests

Installér aldrig en server i „Program files” hvad enten det er default-indstillingen eller ej

Her den senere tid har jeg sat mig ind i Zendframework, igen (har tidligere brugt Zendframework).

Brugte tid på at prøve Zends Quickstart guide. Lige i begyndelsen var det success.

Men så sprang kæden af og den halve time var hurtigt gået. De havde valgt at anvende sqlite og så valgt at lave et meget langt script som skulle oprette indholdet i databasen (hvad skal jeg med sqlite??). Og det var ret voldsomt med et stort script for at oprette to tabeller og komme fyld i — især når scriptet ikke virkede.

Jeg valgte at anvende MySQL i stedet. Men resultatet blev desværre alligevel at gæstebogen ikke blev fundet.

Det var en sløj omgang. Jeg kunne også se på kommentarerne på siden at jeg ikke var den eneste med problemer. Jeg har muligvis overset noget undervejs eller der var fejl i min konfiguration.

Men jeg synes nu alligevel jeg lærte en del og Zendframework er nice og deres reference guide er fantastisk.

En anden dag søgte jeg på google efter bøger omkring Zendframework og var heldig jeg fandt denne gode online bog:

Survive The Deep End

Den bog har virkelig været god læsning og givet mig godt overblik. Dog fik jeg problemer da jeg skulle i gang med unittests. For der var desværre ikke nogen beskrivelse af hvordan jeg skulle konfigurere testmiljøet. Blot at man skulle benytte phpunit. Så jeg gik ind på phpunit.de der læste jeg at man skulle installere phpunit gennem pear. Desværre har jeg ikke brugt pear meget længe. Så jeg havde det ikke installeret. Så det måtte jeg lige gøre. Desværre var det meget bøvlet og jeg fik en masse forskellige fejl. Bl.a. kunne pear ikke pakke tarballs ud. På et tidspunkt bemærkede jeg at pear havde oprettet en program mappe (nok fordi at windows har „program files” mappen som har mellemrum — så derfor blev det fortolket til „program”) . Så gik det op for mig at jeg nok måtte installere ZendServer på en anden måde en default måden. Således at den ikke længere blev installeret i C:/Program files/Zend/ men istedet C:/Zend.

Jeg afinstallerede ZendServer og installerede på ny i roden af C. Herefter rettede jeg window environment variable. Og startede go-pear.bat igen. Men php CLI kom med en masse fejl — fordi den forsøgte at afvikle koden via min xampp server. Så jeg måtte lige rette rækkefølgen i PHPRC så ZendServer/bin blev fundet først. Så stoppede at bøvl og pear blev installeret uden crash af php cli. Herefter opdaterede jeg pear og kunne herefter installere phpunit. Btw jeg valgte option „local” og ikke „system” under installationen af pear.

Hvad kan vi så lære af det: Installer aldrig en server i „Program files” hvad enten det er default-indstillingen eller ej.

 

 

Enighed om mockup

Studiegruppen Maria, Rasmus, Tommy og mig selv. Sad med hver vores fantastiske mockup og skulle blive enige om hvilken løsning vi ville vælge. Det var ret svært så vi aftalte at vi ville arbejde videre med hver vores mockup. Men så blev vi mere og mere enige om at Rasmus” mockup faktisk kunne blive ret godt hvis vi anvendte fixed position til menuen.

Samtidig har vi en rigtig god idé omkring vores markup (det skriver jeg ikke her før sitet er oppe). Når sitet er oppe skal jeg nok linke til det. Men tro mig det bliver et lækkert site med database og Ajax funktionalitet.

Diverse analyser

Nu rykker vi frem ad. Vi havde lidt problemer med at finde et klasseværelse at arbejde i så vi endte med at sidde nede ved 400 lokalerne. Det var ikke det bedste sted men vi fik lavet en god målgruppeanalyse, SWOT analyse og TOWS matrice. Og vi fik tænkt meget over hvad vores produkt helt nøjagtig er. Vi holder stadig projektplanen — lækkert.

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.

Alternativt webdesign

Har i et stykke tid gået og barslet med en idé – brugeren skal kunne vælge mellem flere forskellige webdesign. Jeg synes at brugeren gerne må få en oplevelse af en „personlig” side som hun/han selv kan ændre designet af. Jeg synes rent personligt at det er fantastisk at man ved at skifte ”stylesheet ” og dermed ændre designet radikalt.

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.

Grunde til at flytte til eget domæne

Inden jeg valgte at flytte WordPress installationen til mit eget domæne. Havde jeg følgende overvejelser.

  • Det er lidt farligt at installere plug-ins uden at kunne tage backup. Vil have egen kontrol over databasen således at jeg selv kan tage backup og reetablere igen hurtigt samme dag.
  • Siden skal være mere personlig.
  • Jeg vil gerne kunne bruge „modrewrite”.
  • På sigt skal mit site alligevel væk fra skolens domæne – da jeg kun har adgang så længe jeg er under uddannelse.
  • Vil kunne lave subdomæner til alle projekt sites.

we_are_moving

Procesevaluering projekt 4

Jeg havde allerede ret omfattende erfaring med at lave hjemmesider. Så for mig har udfordringen mere været at for styr på den tavse viden jeg har.

Altså den viden der bare er lagret igennem årene som jeg tror andre har (uden de har den). Viden som jeg har fået af erfaring men som jeg har svært ved at begrunde. F.eks. var det svært at forklare at jeg i nogen tilfælde (navigations lister) anvender „class-selectorer” frem for „id-selectorer” selvom elementet kun optræder en enkelt gang på siden.

Min forklaring er at i tilfælde hvor man gerne vil styre formateringen af et element der skal have en tilstand eller evt. flere. Anvendes class attributten i stedet for id. Da et id ikke bør skifte. Det er mere logisk at en class attribut ændres frem for id attributten.

Kom også i tanke om uskrevne regler så som at man bør lave mapper til CSS, javascript o.lign. hvis man har mere end en fil af pågældende type.

Arbejdet i gruppen:
Jeg synes at vi endnu engang har fungeret rigtig godt som gruppe.

Det sværeste var at finde ud af hvordan vi skulle samarbejde om at lave en hjemmeside. Skulle vi alle kode hver vores website eller skulle vi kode et enkelt website i fællesskab?

Samtidig havde vi den udfordring at der var stor forskel på hvad vi havde af viden omkring hjemmesider.

Vi valgte at kode websiten i fællesskab – en skrev koden. Men der blev kun skrevet kode som vi alle i gruppen var enige om.

Alle i gruppen skulle forstå hvad der foregik i koden. Der var nogle af mine kode forslag som blev forkastet fordi den blev for kompliceret.

At alle i gruppen skulle forstå hvad der foregik var en god proces, som sikrede at koden blev nemmere at forstå. Samtidig fik det også mig til tænke koden mere igennem.

Projekt 4 — Jazz website

Jeg havde igen problemer med at lave sitet og havde mange ideer.

Havde en idé om vi skulle lave et website med halvgennemsigtige områder til indholdet. De andre fra gruppen kunne godt lide ideen.

Vi havde alle ideer om at jazz websites typisk består af pangfarver på en mørk baggrund. Så farverne var vi ret enige om.

For at vise min opfattelse af „jazz” til gruppen lavede jeg en kollage med en saxofon med den farvepalette som jeg forestillede mig skulle laves til sitet.

Workflow:

  1. Gik ind på flickr.com for at finde en saxofon som jeg kunne frilægningen søgte efter billeder under „creative commons” licensen.
  2. Jeg besluttede mig for at anvende ’quick mask mode’ til frilægningen.
  3. Tegnede saxofonen op
  4. Skiftede til ’normal mode’ igen.
  5. Gemte masken som „path” for at sikre at jeg kunne få masken frem igen.
  6. For at vælge baggrunden i stedet for saxofonen – foretog jeg „select inverse” kommandoen.
  7. Herefter slettede jeg baggrunden fra saxofonen.
  8. Desværre bemærkede jeg at jeg ikke havde fået alt baggrund væk og havde også slettet noget af saxofonen.
  9. Tænkte at jeg ville fortryde nogen de iterationer jeg havde lavet. Det kunne jeg ikke bruge til noget for så forsvandt min klippemaske.
  10. Forsøgte at trække maske „path-et” over i et andet dokument.
  11. Fortrød trinene i oprindelige dokument.
  12. Og trak „path-et” over.
  13. Desværre var det ikke til nogen hjælp – da de to dokumenter havde forskellige størrelses forhold (sådan opfattede jeg det)
  14. Så jeg kunne ikke benytte den løsning. Så jeg valgte at begynde forfra.
  15. Da frilægningen endelig lykkedes lagde jeg et justeringslag over saxofonen (levels) og fremhævede den varme glød i saxofonen.
  16. For at lave farvepaletten lavede jeg en rektangel med rektangel værktøjet.
  17. Dobbelt klikkede på farve ikonet i laget satte lab farve delen L til 41
  18. Nu kunne jeg så gå igen med at vælge min farvepalette.

Her er det endelige resultat (klik på billedet for at se en større udgave)

Logoet:
For at lave en pæn hjemmeside burde vi have et godt logo. Vi gik alle hjem og lavede forslag til et logo.

Jeg havde mange ideer som jeg gennemførte.
Her er et udpluk af logoer jeg lavede.



Men de holdt bare ikke – de lagde ikke op til „jazz”.

Lavede nogle håndskitser fik nogen ideer med at få et instrument til at indgå i logoet bl.a. havde jeg nogen ideer med at lade piano tangenter indgå.



Men det logo der fungerede bedst var en kombination mellem „Giant Steps” og en tegning af en trompet. Den virkede rigtig under arbejdet i illustrator fik jeg den idé at jeg ville lade „Steps” være ventilerne i trompeten.

Udfordringer under i projektet:
Naturligvis var der udfordringer undervejs bl.a havde vi et problem med at centrerer navigationen.

Det viste sig at vi manglede at definere en fast størrelse på div-elementet. Og sjovt nok virkede den forkortede version, margin: 0 auto; ikke.

Vi fik en MUL studerende fra 2. semester til at kigge på problemet. Han foreslog at vi benyttede margin-left: auto; plus margin-right: auto; også virkede det.

Så nu ved jeg at hvis man ikke kan få centreringen til at virke kan man forsøge på den måde.

Samtidig er det nødvendigt at elementer der skal centreres har den præcise størrelse som de elementer den omslutter (ikke noget nyt for mig)

Procesevaluering projekt 3

Min læring af projektet
Jeg synes det har været en rigtig god læringsproces. Jeg har lært om Afsender, Modtager og Budskab. Jeg har samtidig fået rigtig god forståelse af hvad design og visuel identitet er. Og er nu i stand til at kunne lave en visuel identitet for en virksomhed eller kampagne. Jeg har også lært at visuel identitet ikke udelukkende er et logo.

Vi har også arbejdet med moodboards og Lisbeth Thorlaciuses kommunikationsmodel. Jeg synes jeg har fået meget bedre forståelse hvordan den skal bruges til at analysere websites med. Jeg vil forsætte med at arbejde med den og få mere øvelse i at benytte den.

Jeg har også fået en masse gode værktøjer til projektplanlægning, som jeg virkelig kan bruge til noget. Jan Krag Jacobsens bog: „25 spørgsmål. — en moderne retorik til planlægning af kommunikation”. De første 10 spørgsmål, som man bør spørge sig selv i et hvert kommunikationsprojekt, sikre at man ikke kommer galt afsted. En god mode at spotte uregelmæssigheder i projekter.

Arbejdet med gruppen
Jeg synes at der har været et godt samarbejde i gruppen. Samtidig har der været plads til alles ideer. Vi har alle fået forkastet ideer som ikke duede — ideer som vi alle har lært af. Vores gruppe arbejde blev sat på en prøve. Da vi skulle have rapporten og vores pjece ud på papir. Det var med at finde ud af hvordan printprocessen virkede og ikke mindst hvordan printdriveren virkede. Men vi kom igennem — og næste gang har vi styr på hvordan det skal gøres. Men selv om vi var pressede trak vi alle i samme retning.

Jeg er af den opfattelse at vi har skrevet en god rapport med nogle gode eksempler på en visuel identitet for Dansk Idræts Forbund (DIF). Naturligvis har vi lavet nogle fodfejl nogle steder i rapporten. Så der er plads til forbedringer. Men det har været en lærerig rejse.

Projekt 3 Visuel ID

Forslag til logo
Min idé var en sol, da solen for mig står for livsglæde og sundhed.

Rasmus havde fået en ide om et slogan ”sport – på den kloge måde”. Men synes det virker for langt til et logo, så mit forslag blev ”Klog-Sport”, forestillede mig samtidig solen bagved.

Font til logoet
Gik ind på hjemmesiden dafonts.com for at finde en font jeg ville benytte. Mit valg blev ”xenogears” og ”harabara” for at prøve lidt forskellige muligheder.

Afgrændsning
Jeg ville lave et logo som kunne vises ved alle events, plakater osv. Det skulle også kunne vises sammen med DIF’s logo. Så jeg ville benytte mindst en af farverne fra deres logo. Undervejs i forløbet fik jeg ideen at lave „Klog-sport” om til ”Sund-Sport”.

    Workflow:
  • Tegnede en ellipse
  • Skrev logoteksten ”klog-sport” over
  • Tegnede en solstråle med penne-værktøjet
  • Og lavede en rotation på 30 grader med centrum i ellipsen
  • Gentog rotationen ind til jeg havde solstråle hele vejen rund
  • Jeg bemærkede at strålerne lignede ben
  • Prøvede at lave flere forskellige forslag og prøvede forskellige farve kombinationer bl.a. samme røde farve som i Dif’s logo.
  • For at sikre mig at logoet kunne vises sammen med Dif’s logo hentede jeg det ind i Illustrator

Her er de to logo forslag:

Klog-Sport (pdf — 31.7 mb)

Sund-Sport (pdf — 31.7 mb)

Efter at have vurderet alle logoerne i gruppen. Valgte vi følgende logo til den visuelle identitet. Jeg har stået for rentegningen herunder (klik på billedet for at se det i større udgave).


Frise idé
For at kunne differentiere de forskellige segmenter i målgruppen, fik jeg den idé at vi kunne lave en frise. Frisen kunne skifte farve alt efter segment og med logoet for sund-sport inde i. Vi blev så i gruppen enige om hvilke farver der skulle repræsentere hvad. Her er friserne som de endte med at se ud (klik på billedet for at se det i større udgave).

    Workflow i illustrator:
  • Tegnede en lang rektangel som skulle kunne bruges til at skære i
  • Hentede logoet over (fra logo.ai over til frise.ai)
  • Forstørrede det op til en stor størrelse som kunne danne et godt mønster i firkanten
  • Brugte „pathfinder” panellet/divide til at skære mønstret
  • Klikkede på rektanglet og ændrede farverene så de blev røde baggrunden i en mørkere nuance end logo figuren

Plakat Udvalg
For at prøve alle ideer af mht. mediet plakat — lavede vi alle nogle udkast. Jeg var så heldig at de andre i gruppen, valgte mit udkast eller idé. Der var mange gode ideer i gruppen så jeg er meget beæret. Herunder ses plakaten som er lavet i Illustrator og Photoshop.

Grundlæggende for plakat designet
Øverst i venstre hjørne findes logoet som tydeligt identificerer kampagnen. Lilla for alternativ idræt, grøn for ernæring, gul til præsentationsfremmendestoffer og rød til euforiserendestoffer. Disse farver går igen på de to streger under logoet og på frisen i bunden af plakaten. Frisen er som nævnt en del af den visuelle identitet på plakater og website.

Kampagnesitet
For at samle de forskellige undersegmenter af målgruppen. Har vi valgt at oprette et website. Da jeg har prøvet at lave mange websites før foreslog jeg gruppen at lave en. Selve ideen med et segment pr. farve er gruppens idé. Websitet er egentlig kun en prototype og udelukkende udviklet til at vise hvordan den visuelle identitet skal implementeres i et website. Den er testet til firefox og ikke andet. Så jeg garanterer ikke for om den virker i IE.

Det mest komplicerede er navigationsdelen — alle knapper er baseret på CSS regler. Således at man senere ville kunne give knapperne en variable bredde alt efter tekst indholdet i knapperne. På den måde vil det være ret ukompliceret at tilføje emner til menuen. Nedenfor er et skærmdump af siden. (Klik på billedet for at få en større udgave af billedet)

Selve websitet findes her (udelukkende testet og udviklet til Firefox).