DAT106 WEBPUBLISERING Prosjektoppgave prosjektbeskrivelse UTGANGSPUNKT Jeg er musiker, og spilte trommer i et rockabillyband i Tromsø før jeg flytta til Arendal sist sommer. Mens jeg var med i bandet, lagde og drifta jeg en enkel website for bandet, hvor man kunne finne litt informasjon og finne noen telefonnumre for kontakt og booking. Den gang het bandet Bengt & the Clients da vokalisten i bandet er advokat Etter flyttinga sørover, ble det så som så med driftinga. Men da DAT106 skulle komme etter nyttår, fikk jeg ideen til å bygge opp en ny website og samtidig være en slags distant webmaster for siten. I mellomtiden har bandet skifta navn til Rockabillies og er Tromsøs og Nord-Norges eneste rendyrkede rockabilly-orkester. FREMGANGSMÅTE Jeg har vært i løpende kontakt med bandet og etter hvert fått ideer til oppbygging og linking. Ut fra dette har jeg fått designet siten slik som tiden (les: innleveringsfristen) tillater det med implementering av passende designelementer og tips og triks som vi har lært i faget. Resultatet er blitt en relativt enkel, informativ, og ikke minst lettdriftet website, med hovedvekt på å fortelle om bandet, nevne måter å komme i kontakt med bandet mht booking, og tilgang til å få høre noen egenproduserte lydsnutter (mp3). Alt i alt med tanke på enkel navigering for en eventuell arrangør som vil kontakte bandet. FILSTRUKTUR http://home.hia.no/~jonnyn04 http://www.rockabillies.no index.htm Style sheets medlemmer.htm video.htm galleri.htm kontakt.htm meldinger.htm linker.htm Jeg har altså lagt til seks linker fra index-siden. Menyvalgene er plassert på samme sted på alle sidene for å få et ryddig design og god oversikt. Alle sidene nås dermed uansett hvor man befinner seg i strukturen. Figuren viser det kanskje dårlig, men bak hver av htm-filene ligger det også tre style sheets. Side 1 av 5
------------------------------------------------------------------------------------------------------SKISSER Følgende viser hver av htm-filene slik de er i en web-browser. Jeg har lagt til noen utfyllende kommentarer der det er nødvendig. Her er psd-fila (råfila) med designen av bakgrunnen på sidene. Jeg har valgt å dele designen inn i flere elementer (flere layers), slik at de er enkel å editere og flytte rundt på. Som layer-vinduet viser, har jeg lagt til noen effekter på fire av lagene to effekter på tekst og to på bakgrunnsobjekter. Særskilt nevner jeg laget med oppdatert ; her kunne jeg naturligvis ha laget en div-tag i htmlkodinga med plasseringen av denne teksten på ønsket sted, men i og med jeg har en effekt på teksten, har jeg beholdt denne som et implementert design-element i bakgrunnen. I html-kodinga har jeg valgt å bruke en iframe som ligger omtrent midt i det gule store feltet i bakgrunnsdesignen. Jeg synes det er lettere på denne måten å endre innholdet på sidene, men på den annen side blir det jo flere filer å forholde seg til. Side 2 av 5
Om denne og de følgende sidene vil jeg spesielt nevne at jeg i style sheet et har kodet slik at når muspekeren løper over de forskjellige valgene i menyen, utheves fonten (fra normal til bold) og fonten skifter farge fra sort til samme farge som bakgrunnen i iframe en. De følgende sidene er like, naturligvis med unntak av innholdet i iframe en, så jeg bare viser de andre sidene i mindre størrelse. Her har jeg kodet slik at det kommer opp en scroll-bar i og med at innholdet går utover grensene for iframe en. På samme måte som med menyvalgene, blir fonten endret fra normal til bold når pekeren løper over lista med lydsnuttene. Eneste forskjell er at fontfargen beholdes (sort). Side 3 av 5
Det er her lagt til et alt-attributt i image-taggen, slik at det kommer opp en passende ledetekst når pekeren holdes over prøvebildene (thumbnails). I tillegg har jeg valgt å hente opp de opp-zoomede bildene i et nytt, tomt vindu. Også her blir fonten i epostadressene endret når pekeren kommer over, ved at fonten endres fra normal til bold. Fargen beholdes. Jeg har oppretta en slags gjestebok for bandet, og når brukerne klikker på linken, dukker det opp et vindu hvor man kan legge inn sine dypeste og innerste tanker og ideer. Og mens innskrivningsvinduet er aktivt, spilles det en bakgrunnslyd som har sterke sjanger-relasjoner. Det er helt naturlig å kunne linke til andre websider med samme type innhold som denne. Musikksjangeren er rockabilly, og det finnes noen steder på nettet å lese om det For øvrig er linkene satt med samme font- og farge-attributter som nevnt ovenfor. Side 4 av 5
------------------------------------------------------------------------------------------------------ANNET Jeg har i kreasjonsprosessen gjort følgende: brukt NOTEPAD som teksteditor brukt Photoshop til redigering av bilder passet på at websiten er kodet for Internet Explorer, Mozilla Firefox og Opera konstruert et eget ikon (16x16 piksler) som legges til linken i favoritter konstruert et egen ikon (32x32 piksler) som kan brukes til mappebilde opprettet en epostadresse med stor vedleggskapasitet for bandet endret designen på websidene minst 10 ganger tenkt design, ofte til langt på natt, for deretter stå opp og prøve ut ideer blitt fortvilet over ukontrollerte hendelser ved endringer i style sheet et brukt mye tid på å få tilbake den forrige designen etter endringer i style sheet et bitt negler og revet meg i håret opptil flere ganger måttet derfor ha bestilt manikyr- og frisørtimer oftere enn vanlig vært flink gutt og møtt opp på lab og forelesning så ofte som mulig ---------Arendal, 21. april 2005, Jonny Nordhus. Side 5 av 5