Rapport for hovedprosjekt/huin105

Innledning

Dette skulle egentlig vært et gruppeprosjekt, men visse omstendigheter gjorde at jeg valgte (og fikk lov) å arbeide alene, noe som kan være både befriende og skremmende. Mitt utgangspunkt for dette arbeidet var å lage en webside for en av Bergens kunstnerer, nemlig keramiker Erik Lytskjold. Ikke bare han, men mange skapende kunstnerer opplever det ofte som konfliktfylt å ”selge seg selv”, og jeg ser her et behov og en mulighet å fremme dem og deres arbeid. I dag forventes det nesten at enhver som kreerer og selger noe har en egen webside, og min ”kunde” har utallige ganger i forbindelse med utstillinger og lignende fått spørsmål om han har en side. Idéen om å lage et nettsted for ham kom veldig selvfølgelig, men utfordringen ble å lage noe som han kunne stå for, hvilket bringer oss til noe av mine intensjoner med oppgaven.

Hva skal formidles?

Det var her veldig viktig for meg å ikke inngå flere kompromisser enn nødvendig med hans kunstnerlige integritet, og jeg prøvde derfor å gjøre siden så minimalistisk som mulig, men likevel basert på hans karakter. Så hva gjør man da kunden helst skyr det meste av moderne tekniske innretninger, sykler heller enn å kjøre bil og for å poengtere det ikke er noe særlig interessert i data i det hele tatt? Veldig enkelt egentlig, for det som kjennetegner hans arbeid og personlighet er akkurat kontraster, og hva kan illustrere det bedre enn å sette opp hans meget komplekse og uttrykksfulle keramikk mot en glatt, stilren webside?

Fargevalg er gjort ut fra bilder av den kunsten som er presentert på siden. Her har jeg hatt veldig god hjelp av Color Impact, et fantastisk nyttig verktøy for å velge og matche farger. Selve bakgrunnen som går igjen er et utsnitt av et av hans fat, meget forstørret og bearbeidet i Photoshop. Herfra blir det naturlig å komme inn på hva jeg har gjort bak kulissene, og noen av de valgene jeg har tatt.

Bildebehandling

Siden det tross alt er kunst som skal vises, er det viktig for meg at kvaliteten på bildene er tilfredsstillende. Jeg har brukt mye tid på å redigere bildene, og prøvd å lagre dem i filstørrelser som er akseptbable, i enten GIF-, PNG- eller JPEG-format avhengig av type bilde. Pensumboken til Elizabeth Castro, HTML for the World Wide , har vært til uvurderlig hjelp under hele arbeidet og her var det spesielt kapitel 5 og 6 jeg fikk bruk for. Det kan hende at det er litt arrogant å ikke ta altfor mye hensyn til svakere maskiner og gamle nettlesere, men sånn som jeg så på dette prosjektet var at vi ikke var tjent med bilder med dårlig oppløsning. Når det er sagt aner jeg at det sikkert skulle være mulig å komprimere bildene enda mer uten at det går altfor mye på bekostning av utseendet. Det får være til et annet kurs tenker jeg.

Side for side

Den første siden som møte besøkeren viser en enkel navigasjonsmeny, ”header”, på toppen, en ”footer” i bunn med copyright og ansvarlig for siden, og der imellom selve innholdet. Til venstre har jeg plassert et bilde med et fat og kunstnerens navn. Fordi jeg brukte en font som mest sannsynlig ikke mange har, valgte jeg å tekste i Photoshop og lagre alt som et PNG-bilde. Der er også en mulighet å legge ved fonten i .eot-format i selve HTMLen, men som Elizabeth Castro konstaterer ”…there is still no cross-platform, cross-browser format for embedded fonts”.[1] Til høyre står det nå et lite sitat av Gunnar Danbolt, fra en utstillingskatalog der han skrev om de medvirkende deriblant Lytskjold. Denne plassen kan lett fylles med alternativ tekst, for eksempel nyheter om utstillinger et.c..

Første lenke i menyen går til ”Works of Art”, som rett og slett er et bildegalleri satt opp med CSS, uten hjelp av javascript, PHP eller CGI. Det må Stu Nicholls ha takk for. Ganske nylig surfet jeg forbi hans nettside The CSS Playground og her fant jeg mye nyttig. Han påpeker at det fungerer best med opp til 12 bilder av medium størrelse (400px ganger 250px), men det har jeg glatt sett bort fra og håper at snart alle bruker bredbånd. Hva man også kan gjøre er selvfølgelig å lage flere mindre galleri, etter tema eksempelvis. Denne metoden er avhengig av en liten hack for at Internet Explorer 5.5 skal kunne tolke stilen ordentlig, og i det hele tatt skjønner jeg nå at man misjonerer for å få til et enhetlig syn på det her med nettlesere.

Lenke nummer to sender oss til ”The Artist” som helt enkelt er en tabell med kunstnerens CV, verken mer eller mindre. Det som er likt er selve hovedoppsettet som for øvrig er likt for alle sidene; med bakgrunn, header (meny) og footer. Det som varierer er at den menyknappen som er aktiv nå heter ”Home”, hvis man av noen grunn skulle ha lyst å gå til førstesiden igjen, noe som for øvrig gjerne ikke var en helt lur idé, da det lett kan bli forvirrende. Et klikk for mye på knappen sender deg jo feil!

På nåværende tidspunkt er tydelig at jeg ikke har vært helt konsekvent. Jeg har valgt å skrive på engelsk på siden. Faktisk ikke så mye for at den skulle være tilgjengelig, for det hadde jo kunnet ordnes ved å tilby engelsk som alternativ, men det var heller et estetisk hensyn, da jeg mente det så bedre ut med engelsk på menyknappene. Det er noe visst med stor forbokstav på substantiv! Hva jeg ikke har gjort er å oversette CVn til engelsk, og det burde jeg vel ha gjort hvis jeg skulle holde stilen. Mest sannsynlig vil en senere revidering inneholde begge språkalternativen, pluss eventuelt tysk.

Neste lenke har jeg kalt ”His Workshop” og her var det tenkt at det skulle vises en del bilder av kunstneren i arbeid. Nå er ikke han så lett å fange på bilde, og var heller kanskje ikke helt tent på idéen, men jeg hadde en del likevel og bestemte meg for å prøve ut en animert GIF i stedet for. Resultatet ble ganske bra, men egentlig altfor stor for å laste ned - 3.74 Mb tar veldig lang tid å vente på! Den første bilden i animeringen ser man dog ganske snart, så de som ikke vil vente, eller i det hele tatt ikke skjønner at det er noe å vente på, klikker seg mest trolig bare videre. En usabilitytest ville sikkert gitt svaret på det, og mange andre spørsmål, men jeg tror ikke tiden rekker til nå for denne oppgaven.

På alle sider pleier det å finnes en kontaktside, og det gjør det også her med navnet ”Get in Touch”. I tabellformat har jeg lagt ut kontaktinformasjonen, samt på slutten lagt inn et CSS-basert ”rolloverbilde” som er lenke til kunstnerens mailadresse.

Siste lenken heter ”Inspiration” og her hadde jeg store planer. Alle mennesker trenger og søker inspirasjoner i mer eller mindre grad, kanskje spesielt de med skapende yrker, og på denne siste siden ville jeg gjøre noe som var litt utover det vanlige på et slikt nettsted. For å få et lite innblikk i hvor og hvordan nettopp denne kunstneren henter sin inspirasjon ville legge til først og fremst musikk, men også bilder av ham i ”inspirerende” situasjoner. Nå fikk jeg litt problemer med å komme meg ut på fjorden med digitalkameraet for å ta bilde når han padler kajakk, men Photoshop tilbyr gratis en hel masse bilder og bildet på siste side kunne vært ham. Enda større problemer byr musikken på, for det er ikke lov å legge ut sånt på nett uten tillatelse. For skal det være musikk på siden må den være ”hans”, så foreløpig er siden ganske stille. Jeg har imidlertid et lite håp om å kunne utnytte meg av noen kontakter jeg har, og ser ikke vekk fra at en av våre norske komponister faktisk kunne være interessert i å delta i et lite utvekslingsarbeid.

CSS

I begynnelsen av dette arbeidet hadde jeg planer om å lære meg JavaScript, og allerede under det første klasseprosjektet fikk jeg til nok Flash for å se hvilke muligheter som ligger deri. Der finnes dog en del begrensninger ved å nytte seg av disse, for det er ikke alltid brukeren ser det sånn som jeg ønsker, da han kanskje mangler Plug-ins for Flash eller nettleseren er innstilt for å blokkere JavaScript. Dessuten syntes jeg det var en spennende utfordring å få til alt med CSS. Jeg har forstått nok til å få til sidene sånn noenlunde som jeg vil ha dem, men samtidlig innsett se at selve stilarket til mitt prosjekt sannsynligvis kunne vært kortet ned betraktelig. Med en skikkelig planlegging tror jeg at jeg kunne begrenset antallet ider og klasser, samt å ha samlet mange av formatteringene på et sted. Sånn som det ble nå taklet jeg et problem av gangen og fikk sydd sammen det etter hvert. Resultatet ble en nokså uryddig CSS, men tiden og manglende erfaring jobber litt mot meg nå.

Ellers var en av utfordringene å få til ”frames” med hjelp av CSS. Det skulle da egentlig ikke gå siden Internet Explorer ikke støtter position.fixed, men enda en gang med hjelp av Stu Nicholls fant jeg en vei rundt. Jeg har testet siden hjemme både på IE og Firefox og det ser ut som det fungerer: menyen blir værende igjen på toppen når man scroller nedover. Så sett fra en eksperimenterende og nysgjerrig students synsvinkel er det muligens i nærheten av ”lovlig”, men skal siden ha en sund og livskraftig fremtid, der kompatibilitet og lettilgjengelig vedlikehold er essensielt, må det litt ”medisin” til.

I Designing with web standards beskriver Jeffrey Zeldman denne medisinen[2] som hvordan riktig bruk av teknologier som CSS, XHTML, ECMAScript (d.v.s. standardisert JavaScript) kan gi oss mer nøyaktig kontroll over layout samtidlig som brukeren kan styre utseendet av siden etter behov. Vi vil også kunne utvikle sofistikerte sider som fungerer i alle nettlesere og plattformer, etter gjeldende standarder og retningslinjer. Ved å beherske disse teknikkene vil webdesign også bli langt mer kostnadseffektiv, da oppdatering kan gjøres på timer i stedet for dager og uker. Så konklusjonen må bli at hvis jeg mestrer dette, og litt til som Zeldman redegjør for i sin bok, vil oppjusteringen av denne prosjektsiden gå lekende lett.

Litteraturliste

Castro, Elizabeth, HTML for the World Wide Web. Peachpit Press, California, 2003
Zeldman, Jeffrey, Designing with Web Standards. New Riders, California, 2003
http://www.webreference.com/programming/css_gallery/index.html (besøkt 18.05.2005, kl. 19.30)
http://www.stunicholls.myby.co.uk/ (besøkt 16.05.2005, kl. 12.00)

---

[1] Castro, Elizabeth, HTML for the World Wide Web. Peachpit Press, California, 2003, s. 159

[2] Zeldman, Jeffrey, Designing with Web Standards. New Riders, California, 2003, s. 42-43