Portfolio Andreas Stjerneklar Kristensen. Multimedia Designer Eksamen 1. Semester

Transkript

1 Portfolio Andreas Stjerneklar Kristensen Multimedia Designer Eksamen 1. Semester Indledning Design Skitser ASK logoet Teknologivalg No database Javascript Eksempel Udviklingsmuligheder Mere relation mellem menuer CMS Integration Konklusion

2 Indledning Formålet med dette site er at være et udstillingsvindue for mit arbejde, en informationskilde omkring mine evner og erfaringer, og gennerelt et business card for mig. Konceptuelt har jeg prøvet at undgå den traditionelle hjem-om mig-galleri-kontakt struktur man tit ender med i portfolioer og i stedet gå efter en flad struktur baseret på indholdet. Design Før jeg gik igang med at lave designs evaluerede jeg hvad sitet skulle bestå af. jeg endte op med tre ting: Profil (en beskrivelse af mig selv) Portfolio (fremvisning af arbejde) Erfaringer (beskrivelser af arbejde). Dette resulterede i de tre områder i hovedvinduet på mit site. Listen af erfaringer blev til hovednavigationen, profil vinduet blev til indholdsområdet og portfolioet blev til en scrollbar liste af billeder af projekter. Skitser Sitets design er baseret på en række skitser jeg tegnede i hånden. Nedenfor ses to eksempler på skitser der hver har tilføjet til det endelige udseende. Venstre: skitse af indholdsområdets layout. Højre: tidligere udkast, grundlag for header.

3 ASK logoet ASK logoet der er udarbejdet til dette site er resultatet af først en masse eksperimentation på papir med at få kombineret initialerne i mit navn på en fed måde. Skitser af ASK logoet, nederst til højre den første realisation fra Illustrator. Jeg endte med at bruge formen på S et til at forbinde A et og K et, og igennem vidre eksperimentation i Illustrator kom jeg på at lave forbindelsen mellem S et og K et igennem ryggen på K et i stedet for toppen. Da jeg sad i Illustrator brugte jeg guides til at sørge for at logoets spidser og linier passer sammen. Primært blev K ets ene ben blev klippet af i højde med bunden af A ets bar, og top og bund af alle andre ekstremiteter blev synkroniseret vertikalt. Logoets linier.

4 Teknologivalg No database Min erfaring med at administrere store sites har ledt til at jeg stræber efter effektive måder at undgå problemerne ved at sidde med et site der tvinger en til at lave en masse manuelt arbejde. Jeg har hovedsageligt arbejdet med Umbraco før denne opgave i et stykke tid, og det at skulle lave en side uden node baseret indhold, masterpages og så vidre virker som et skridt tilbage og unødvendigt ineffektivitet.. En masse forskellige html sider er smertefuldt ineffektivt. Selv hvis du linker dem alle til samme css fil og putter scripting i en samlet script fil har du stadig problemet med at sørge for at ændringer i een html fil følges i alle andre hvis du ikke vil have ting til at være inkonsistente. Ekstra arbejde og størrere chance for problemer. Af disse grunde og for udfordringens skyld besluttede jeg mig for at simulere navigation med javascript og jquery i stedet for at have seperate sider. Javascript Eksempel Navigation i hovedmenuen sker ved at der klikkes på en div af klassen ErfaringsBox. Nedenstående stykke Jquery opnår dette. $('.ErfaringBox').click(function() { }); navfunk($(this).children("span").text()); //find værdi af objektets child spans text En streng tekst fra det klikkede element findes, titlen på elementet. Denne titel sendes til navfunk funktionen, der styrer alt navigation. Logoet kalder funktionen med en statisk defineret streng, og billederne i rotatoren kalder med alt teksten i billedet. For at se alt det sjove der sker der så tag et kig på kildekoden, den er dokumenteret linie for linie hvor det giver mening.

5 Udviklingsmuligheder Mere relation mellem menuer Navigation i hovedmenuen simuleres ved klik på et billede der har en relateret erfaring, eller når der klikkes på logoet, men navigation i image rotatoren simuleres ikke. Klik i hovedmenuen på en erfaring med relateret portfolio billede viser ikke dette billede i rotatoren. Jeg har prøvet at få det til at virke men løb ind i problemer med den plugin jeg bruger. Disse problemer ligger i hvordan pluginen identificerer indhold, og jeg har ikke kunne få et funktionelt resultat. CMS Integration Efter eksamen har jeg planer om at konvertere sitet til umbraco CMS for at udnytte wysiwyg, node data osv. Dette vil fjerne problemerne jeg har med tilføjelse af indhold, da jeg er nød til at sidde og skrive direkte i html en. Det vil også simplificere scripting ved brug af data objekter i stedet for brugen af indviklede jquery selectors. Konklusion Jeg føler at projektet har været en success, idet at det endelige projekt i min egen mening er det beste stykke design jeg har lavet. Jeg er blevet påmindet om hvor godt det er at have fuldstændig styr over sitet fra bunden af, i stedet for at bruge templates og frameworks til styre designet. På den tekniske side har jeg fuldført min ide om at scripte mig fra flere html sider ved i stedet at kaste data rundt på en enkelt side, noget jeg gerne har ville prøve i et stykke tid.