Produktdokumentasjon gruppe 16 Grüner FK

Transkript

1 Produktdokumentasjon gruppe 16 Grüner FK Sammendrag Dette skrivet er vår produktdokumentasjon for hovedprosjekt våren 2009 ved høgskolen i Oslo. Sent høsten 2008 ble vi kontaktet av Grüner FK s b-lag gjennom Joar Myhre med ønske om vi kunne lage ny webløsning for deres fotballklubb. Klubbens situasjon da var kun en felles nettside for hele klubben, Grüner Allidrettslag, noe Grüner s b-lag synes var synd med tanke på at de driver laget selvstendig og uavhengig av Grüner Allidrettslag og gjerne skulle hatt mulighet for å dele informasjon, nyheter, bilder, kampoppsett etc. mellom lagets spillere og tilhengere på en separat webside. Ingen av medlemmene på vår gruppe(vi har samarbeidet som gruppe ved flere anledninger) har spesielt mye erfaring fra programmering eller webdesign, og var heller i tvil om vi skulle satse på å ta dette som hovedprosjekt. Vi hadde i utgangspunktet tankene rundt et mer teknisk prosjekt, da det er mer innenfor vårt interessefelt. Vi diskuterte rundt de forskjellige valgene vi hadde, og kom etter hvert fram til at vi ønsket å hjelpe Grüner FK med webside, da vi både så fordelen for oss ved at vi kunne lære programmering grundig fra bunn av, vi sto alle likt med tanke på erfaring innenfor feltet, og det er godt å kunne hjelpe en lokal klubb fra breddeidretten med en oppgave de ikke har mulighet eller tid til å gjennomføre på egenhånd. Vi har nå laget en webløsning fra grunn av ved hjelp av HTML, PHP, og Flash for å lage en dynamisk og attraktiv side som fremstår ryddig, pen og brukervennlig for både klubben og gjester/tilhengere. Gjennom dialog med klubbens it-ansvarlig, som under hovedprosjektet har opprettet et domene og en foreløpig webside, ble vi enige om hvilke kriterier de hadde forhåpninger om, og hvilke som var gjennomførbare både med tanke på tid og kunnskap. Med små justeringer vil også denne webløsningen kunne brukes av klubbens A-lag, samt andre smålag innenfor kretsen. Til slutt har vi endt opp med følgende bruksområder for de som skal bruke webløsningen: Besøkende: lese nyheter, se bilder fra kamper/treninger, samt oppdatere seg på kampoppsett, tabeller, statistikk, treninger etc. Klubbens medlemmer: lese nyheter, se bilder fra kamper/treninger, sjekke treningstider, kampoppsett, statistikker etc. Admin: Oppdatere/ legge inn nyheter, laste opp bilder, legge til/fjerne/redigere spillerprofiler, endre statistikk, samt endre nedtellingsklokke for neste kamp. Vi har alle på gruppen startet fra bunn av med å tilegne oss riktig og god kunnskap om de forskjellige programmeringsspråkene, hvor vi har vært innom forskjellige andre språk enn de vi har valgt å bruke som f.eks java, men har valgt å utelate av forskjellige årsaker. Vi ønsket å lage en webløsning som var enkel å drifte, med minst mulig overflødig materiale, men samtidig brukervennlig og pen å se på. Flash ble valgt fordi det lett skaper god dynamikk og bevegelse i en ellers statisk side. Dette i tillegg til å behandle enkelte bilder i photoshop gir et penere og mer levende innhold på siden. Forord Dette dokumentet gir en grundig beskrivelse av webløsningens oppbygning med bilder fra forskjellige koder og databasetabeller. Det tas forbehold om at leseren har grunnleggende kunnskaper innenfor bl.a. HTML, MySQl for og fullt ut forstå innholdet i teksten.

2 Innholdsfortegnelse 1. Sammendrag 1 2. Forord Innholdsfortegnelse 2 4.innledning Litt om Grüner FK Dagens situasjon Mål og rammebetingelser Produktet Beskrivelse av produktet Utviklingsmiljø Datastruktur og oppbygning Databasestruktur Startsiden Bildefremviser Nedtellingsklokke i flash Banner/logo i flash Produktets oppbygning Design og layout Implementering av Flash Vedlegg.11

3 Innledning Litt om Grüner FK Grüner FK holder til på Dælenenga Idrettsplass på Grünerløkka i Oslo. Klubben har ca 400 medlemmer totalt, hvor ca 35 medlemmer spiller på A- og B-laget, henholdsvis 3. og 7.divisjon. Grüner FK er en del av Grüner Allianseidrettslag, hvor også håndball og ishockey er blant de representerte idrettene. Klubben satser bredt, slik at barna på Grünerløkka får en trygg og allsidig oppvekst. Det er med andre ord ikke lagt til rette for en særegen elitesatsning innenfor klubben. Dagens situasjon Klubben er representert på nett, innunder en samleside for hele Grüner Idrettslag. Denne er generelt myntet på informasjon rettet mot publikum, og ikke et verktøy for laget i seg selv. Vi finner ingen spillerprofiler eller statistikker, oppdaterte nyheter eller grafiske fremstillinger. Ønsket om å ha en dedikert side til de to fotballagene, hvor spillerinformasjon, multimedia og en mer utfyllende profil, som er aktuelt og etterlengtet. Foreløpig blir siden vi utvikler, laget for Grüner FK s b-lag som et testprosjekt. Hvis arbeidsgiver godkjenner websiden for bruk av deres b-lag, vil de deretter ta standpunkt til om de ønsker å ta i bruk løsningen for resten av klubben. Mål og rammebetingeleser: Med denne oppgaven ønsket vi å fremstille en medieportal som Grüner FK kunne benytte seg av for og enklere kunne håndtere sin egen informasjon som skal distribueres ut til utøvere og medlemmer for øvrig. Ønsket er å kunne gjøre dette så enkelt som mulig, slik at websiden vil bli stående som et nyttig hjelpemiddel og dermed et hyppig brukt verktøy for klubben. Ut ifra dialog med it-ansvarlig i klubben er følgende brukeroppsett implementert i webløsningen: Admin skal ha følgende muligheter uten å måtte logge inn på websiden: - Redigere spillerprofiler - Redigere/legge til nyheter - Redigere nedtellingsklokke for kamp(flash) - Redigere/legge til bilder Admin skal ha følgende muligheter etter å ha logget inn på websiden: Legge til/fjerne spillere fra oppføring i statistikken Legge til/endre detaljer i statistikken, som for eksempel mål, målgivende, røde/gule kort etc. Brukere og klubbens øvrige medlemmer skal ha følgende muligheter på websiden: Lese nyheter Oppdatere seg på treningstider/kampoppsett Finne statistikk fra lagets spilte kamper Se bilder fra kamper og eventuelt treninger Finne tabell fra lagets divisjon, samt oversikt over resultater fra spilte kamper Finne kontaktinformasjon fra lagledelsen Finne informasjon om klubben Finne linker til sponsorer/samarbeidspartnere og andre relevante sider

4 Produktet Beskrivelse av Produktet Produktet består av 3 hoveddeler: Web-løsningen fra brukers ståsted Dette er selve websiden og dens innhold tatt i bruk fra en vanlig bruker Web-løsning fra admins ståsted Dette er den delen av websiden administrator skal redigere. Både ved innlogging og HTML-koding skal administrator kunne endre/legge til/fjerne nyheter, spillerprofiler og spillerstatistikk. Eksterne løsninger for admin Denne delen består av de eksterne delene som implementeres på websiden og må redigeres i egne programmer. Dette er bildefremviser som delvis må åpnes i photoshop, nedtellingsklokke i flash som må åpnes og redigeres i macromedia flash. Utiviklingsmiljø Database MySQL Utviklingsspråk HTML CSS PHP Flash Datastruktur og oppbygging Bildet under viser standard arkitektur for en webapplikasjon. Figur 1: Arkitektur

5 Databasestruktur All data fra statistikk blir lagret i en MySQL database. Administrator er den eneste personen som har tilgang til å redigere spillerstatistikk og spillerprofiler. For å få tilgang til disse valgene må admin logge seg på websiden via Logg inn -linken. Figur 2: Navigasjonsmodell for statistikk Figur 2 viser flyten i statistikksystemet som kun administrator har tilgang til. Det første admin gjør er å logge seg inn via websiden, deretter kommer automatisk siden for redigering av statistikk opp. Her finner man rullegardinmenyer for hvert valg man kan endre på; spiller, mål, målgivende, gule kort og røde kort. Når admin har gjort sine endringer bekrefter han valgene med å trykke på Go, knappen som er plassert til høyre under rullegardinmenyen.

6 Startsiden Figur 3: Startsiden/index Figur 3 viser det første bilde brukeren ser når han/hun besøker siden. Her kan man lese de nyeste nyhetene som blir vist i hovedvinduet, samt litt eldre nyheter som linkes til fra venstre kolonne. På startsiden ser vi tre kolonner i tillegg til banner og hovedmeny, og footer nederst på siden. Via hovedmenyen som befinner seg under banner/logo kan brukeren navigere seg til de viktigste sidene. Annen navigering ligger under venstre kolonne med linker til andre faste sider. I høyre kolonne finner vi øverst nedtellingsklokken som teller ned til neste kamp. Under dette er sponsorer plassert med bilde/link til deres hjemmesider. Både venstre og høyre kolonne, samt hovedmenyen er statiske og forblir uendret uansett hvor man navigerer på siden. Bildefremviser Bildefremviseren er konstruert i flash vha Simpleviewer som man finner gratis på nettet. Denne flash-løsningen er enkel i bruk og det er enkelt for administrator å lage nye bildeserier vha bruksanvisningen vi har laget. Bildefremviseren har et tiltalende ytre og er intuitiv i bruk. Alle thumbnails kan trykkes på for å åpne det aktuelle bilde, eller man kan bla seg gjennom albumet vha piltastene som befinner seg på hver side av bildet. Under er et bilde fra bildefremviseren i bruk.

7 Figur 4: Bildefremviser Etter at man har opprettet ny mappe hvor man kopierer inn ønskede bilder og thumbnails(se bruksanvisning) linker man bildefiler og tekst til bildefremviseren gjennom tekstfilen som vist under. Figur 5: XML-fil som linker til bilder og tekst Nedtellingsklokke i flash Figur 6: Nedtellingsklokke

8 Nedtellingsklokken har ingen annen funksjon enn å fortelle brukeren når neste kamp spilles. Denne flash-baserte videoen tror vi er med på å skape mer engasjement og entusiasme rundt laget og deres kamper, da alle som er innom websiden vil bli påminnet om når neste kamp spilles. I tillegg gjør denne flash-videoen websiden mer levende. Klokken er laget i Macromedia flash mx ved bruk av actions script. Under er utdrag fra scriptet Figur 7: actions script fra Macromedia flash mx Banner/logo I flash Fremfor å ha en ordinær logo/banner valgte vi å gå for en flash-basert video som spilles av hver gang noen besøker websiden. Denne vises kun på hovedsiden og i tillegg til å være både stilig og iøynefallende er den med på å indikere til brukeren at han/hun befinner seg på hovedsiden. Under er et screenshot av banneren og et bilde fra Macromedia Flash MX. Figur 8: Hovedbanner/logo i flash

9 Figur 9: Hovedbanner/logo i Macromedia Flash Produktets oppbygning Design og layout Websiden vi har utviklet har en målgruppe på ca år. Derfor har vi underveis lagt vekt på at design og brukervennlighet hovedsakelig rettes mot denne aldersgruppen. Eldre personer og svaksynte har ikke vært vår hovedsatsing, men samtidig har vi valgt å lage en design og layout som burde kunne benyttes av et bredt spekter. Farger: Det var et mål for oss å lage en webside som gjenspeilet fotballklubben på best mulig måte. Dette inkluderte også å få et fargevalg som var mest mulig likt deres farge på fotballfrakter og logo. Etter mye fram og tilbake landet vi på å ha lilla(klubbfargen) som hovedfarge på siden. Banner, logo og faste overskrifter er statiske og danner grunnlaget for hver enkelt side brukeren besøker. I tillegg valgte vi svart bakgrunn med grå eller hvit farge på skriften. Dette gjør siden godt leselig samtidig som fargevalget gir et mer dynamisk og flottere utseende enn om vi hadde gått for svart tekst på hvit bakgrunn. Når vi skulle velge farge på linkene ville vi ha en farge som lagde litt mer kontrast og brøyt opp slik at siden ikke ble for ensfarget og kjedelig. Vi valgte tilslutt en lys grønn farge som vi absolutt syns fungerer veldig bra. Den er lett leselig mot svart bakgrunn og passer bra opp mot lillafargen i banner, logo osv. Utforming av selve siden var det første vi startet på. Hvilken type design ønsket vi, kun hovedmeny, en kolonne, to kolonner etc. Ettersom vi hadde noen ideer om hva siden skulle inneholde gikk vi for en side med hovedmeny oppe, samt to kolonner og hovedside i midten. På denne måten kunne vi lage en enkel navigering i tillegg til å ha linker, sponsorer og nedtellingsklokke statisk på alle sider, noe vi anså som viktig å få til. Å lage en webside som skal være brukervennlig, hvor man enkelt kan

10 finne informasjon og samtidig være designmessig tiltalende uten at man lager for mye dilldall var en utfordring. Det er mye man kan implementere på en side, men det er i dag veldig mange webdesignere som velger å fylle hver enkelt side med mest mulig dynamiske og bevegelige ikoner og menyer slik at siden blir overfylt og rotete. Vi ville prøve å unngå dette samtidig som websiden ikke skulle bli kjedelig og anonym. Ved å bruke photoshop til å fikle litt med sponsor-logoer og lage en fading fra banner til hovedside lagde vi et godt grunnlag for at websiden ikke ble for monoton kjedelig. I tillegg valgte vi å bruke flash for å lage banner(hovedlogo) på hovedsiden som skulle etterlikne et stempel for å skape bevegelse på siden. Når vi også ønsket å lage en klokke som telte ned til f.eks neste kamp eller trening fikk vi ennå en detalj som lagde litt bevegelse på websiden. Klokken sammen med flash-banner og fargevalg lagde den dynamikken og spenningen vi var ute etter. Selve designet på siden ble til etter hvert som vi utviklet siden. Design på banner, de statiske overskriftene og de forskjellige menyene har vært tema for diskusjon flere ganger. Designet vi endte opp med er noe alle på gruppen er meget fornøyd med. Vi ønsket å holde siden fri for nedtrekksmenyer og andre forstyrrende og direkte stygge detaljer mange bruker på websider i dag. Det enkle er ofte det beste, bare det er godt gjennomført. Ved å ha hovedmenyen oppe og annen navigering, samt eldre nyheter på venstre side beholder vi en design som er kjent for veldig mange og krever ikke lang tilvenning. Implementering av Flash på siden Flashbaserte videoer er med på å skape bedre dynamikk og bevegelse i en ellers statisk webside. Men vi ville ikke overdrive dette med å stappe siden full av forskjellige java- eller flashbaserte videoer. Vi gikk for en enkel, men stilig flashbasert logo/banner hvor logoen skal forestille et stempel som stempler siden med grüners logo. Det er kun på hovedsiden denne flash-videoen spilles av. Alle andre sider har kun et jpg-bilde av samme logo som banner. Dette for å se til at ikke websiden blir anstrengende å bruke i lengden. Nedtellingsklokken i flash er noe vi valgte å implementere en stund ut i prosjektet. Dette så vi på som en måte å skape forventninger og engasjement rundt kampene til Grüner B. I tillegg er klokken så tydelig representert på siden at alle besøkende vil se den og da være klar over Grüners neste kamp. At klokken gir websiden mer liv og bevegelse er et stort pluss og ser litt profesjonelt ut fra en fotballsupporters synspunkt.

11 Vedlegg Et utvalg av koder fra websiden Koden som blir flettet inn under blir ikke seendes helt riktig ut da den kun er klippet ut og limt inn i dette dokumentet. All kode ligger for øvrig på prosjektets hjemmeside. Her har vi hentet ut html fra to sider. index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>grüner B</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <object type="application/x-shockwave-flash" data="images/flash/gruner_b4.swf" width="720" height="160"> <param name="movie" value="images/flash/gruner_b4.swf" /> <param name="loop" value="false" /> <img src="images/flash/gruner_b4.swf" width="720" height="160" alt="logo" /> </object> <div id="menu"> <ul> <li><a href="index.html" accesskey="1" title="">hovedside</a></li> <li><a href="nyhetsarkiv.html" accesskey="2" title="">nyheter</a></li> <li><a href="klubben.html" accesskey="3" title="">klubben</a></li> <li><a href="laget.html" accesskey="4" title="">laget</a></li> <li><a href="oversikt.html" accesskey="5" title="">video/bilder</a></li> <li><a href="#" accesskey="5" title="">logg inn</a></li> </ul> <div id="content"> <!--Venstre kolonne--> <div id="colone"> <h2>navigering</h2> <ul> <li><a href="treninger.html">treninger</a></li> <li><a href="kamp.html">kamper</a></li> <li><a href="statistikk.html">statistikk</a></li> <li><a href="tabell.html">tabell</a></li> <li><a href="forum.html">forum</a></li> <li><a href="kontakt.html">kontakt</a></li> <li><a href="linker.html">linker</a></li>

12 </ul> <h2>eldre nyheter</h2> <ul> <li><a href="opprykk.html">opprykk!</a></li> <li><a href="treningskamp.html">grüner B - Abildsø 2: 1-1</a></li> <li><a href="grasrot.html">grasrotandel</a></li> <li><a href="trenerteam.html">nytt trenerteam</a></li> <li><a href="e-post.html">nye e-postadresser</a></li> </ul> <!--Midterste kolonne--> <div id="coltwo"> <h2>velkommen til Grüner Fk's b-lag!</h2> <table border="2"> <tr> <td height="235" width="485" align="left" valign="top"> <img src="images/108.jpg" style="float:top" alt="kampbilde" width="490px" height="235px" /> <h3>knepent tap mot Dynamo Mjøsa etter tidvis meget bra spill av Grüner B</h3><br></br> <a href="movies/flash-bilder/simpleviewer/index.html" target="_blank">se bildene her!</a> </td> </tr> </table> <table border="2"> <tr> <td height="60" width="242,5" align="left" valign="top"> <img src="images/ru_gr.jpg" style="float:top" alt="grünerrustad" width="242,5px" height="100px" /> <h3>rustad 2 - Grüner B: 3-3</h3> <p>kampen endte uavgjort etter meget jevnt spill</p> </td> <td align="left" valign="top"> <img src="images/gr_fa.jpg" style="float:top" alt="grünerfrelsesarmeen" width="242,5px" height="100px" /> <h3>grüner B - Frelsesarmeen: 2-2</h3> <p>i en svært rotete kamp kom Grüner tilbake og sikra 2-2 like før slutt.</p> </td> </tr> <tr> <td align="left" valign="top"> <img src="images/gr_ab.jpg" style="float:top" alt="abildsø" width="242,5px" height="100px" /> <h3>grüner B - Abildsø 2: 5-2</h3> <p>årets første seriekamp gikk av stabelen på Dælenenga mot Abildsø 2. Grüner vant til slutt 5-2 etter bl.a. 4 mål av Ali</p> </td> <td align="left" valign="top">

13 <img src="images/arnesen.jpg" style="float:top" alt="arnesen" width="242,5px" height="100px" /> <h3>grüner B's knallharde midtstopper Ketil Arnesen er avbildet på VG-nett.</h3><br></br> <a href=" target="_blank">les mer her!</a> </td> </tr> </table> <!--Høyre kolonne--> <div id="colthree"> <h2>neste kamp</h2> <h3>grüner B - Vålerenga 29. mai</h3> <strong>kampen begynner om:</strong> <object type="application/x-shockwave-flash" data="images/flash/timer_new.swf" width="170" height="70"> <param name="movie" value="images/flash/timer_new.swf" /> <img src="images/clock.jpg" width="170" height="70" alt="klokke" /> </object> <h2>sponsorer</h2> <a href=" target="_blank"><img src="images/torshov2.jpg" border="0" style="float:top" width="160px" height="100px" alt="torshov sport"/></a><br></br> <div align="center"><a href=" target="_blank"><img src="images/jm.jpg" border="0" width="82px" height="150px" alt="jm byggholt"/></a><br></br> <div align="center"><a href=" target="_blank"><img src="images/pub1.jpg" border="0" style="float:top" width="120px" height="200px" alt="o'reillys"/></a><br></br> <div style="clear: both;"> <!--Footer--> <div id="footer"> <p>copyright 2009 <strong>tysse, Ur & Myhre</strong></p> <p> <a href=" src=" alt="valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href=" <img style="border:0;width:88px;height:31px" src=" alt="valid CSS!" /> </a> </p> </body> </html> kontakt.html

14 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>grüner B</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <img src="images/gruner_bgjeng.jpg" alt="grünerb" /> <div id="menu"> <ul> <li><a href="index.html" accesskey="1" title="">hovedside</a></li> <li><a href="nyhetsarkiv.html" accesskey="2" title="">nyheter</a></li> <li><a href="klubben.html" accesskey="3" title="">klubben</a></li> <li><a href="laget.html" accesskey="4" title="">laget</a></li> <li><a href="oversikt.html" accesskey="5" title="">video/bilder</a></li> <li><a href="#" accesskey="5" title="">logg inn</a></li> </ul> <div id="content"> <div id="colone"> <h2>navigering</h2> <ul> <li><a href="treninger.html">treninger</a></li> <li><a href="kamp.html">kamper</a></li> <li><a href="statistikk.html">statistikk</a></li> <li><a href="tabell.html">tabell</a></li> <li><a href="forum.html">forum</a></li> <li><a href="kontakt.html">kontakt</a></li> <li><a href="linker.html">linker</a></li> </ul> <h2>eldre nyheter</h2> <ul> <li><a href="opprykk.html">opprykk!</a></li> <li><a href="treningskamp.html">grüner B - Abildsø 2: 1-1</a></li> <li><a href="grasrot.html">grasrotandel</a></li> <li><a href="trenerteam.html">nytt trenerteam</a></li> <li><a href="e-post.html">nye e-postadresser</a></li> </ul> <div id="coltwo"> <h2>kontaktliste trenerteam 2009</h2> <ul> <li>martin Rømuld <a href="mailto:martin@grunerb.no">martin@grunerb.no</a></li>

15 <li>martin Holm Tang <a href="mailto:tangen@grunerb.no">tangen@grunerb.no</a></li> <li>espen Iversen <a href="mailto:espen@grunerb.no">espen@grunerb.no</a></li> <li>anders Hasås Borg <a href="mailto:anders@grunerb.no">anders@grunerb.no</a></li> </ul> <img src="images/mail.jpg" align="right" alt="mail" /> <div id="colthree"> <h2>neste kamp</h2> <h3>grüner B - Vålerenga 29. mai</h3> <strong>kampen begynner om:</strong> <object type="application/x-shockwave-flash" data="images/flash/timer_new.swf" width="170" height="70"> <param name="movie" value="images/flash/timer_new.swf" /> <img src="images/clock.jpg" width="170" height="70" alt="klokke" /> </object> <h2>sponsorer</h2> <a href=" target="_blank"><img src="images/torshov2.jpg" border="0" style="float:top" width="160px" height="100px" alt="torshov sport"/></a><br></br> <div align="center"><a href=" target="_blank"><img src="images/jm.jpg" border="0" width="82px" height="150px" alt="jm byggholt"/></a><br></br> <div align="center"><a href=" target="_blank"><img src="images/pub1.jpg" border="0" style="float:top" width="120px" height="200px" alt="o'reillys"/></a><br></br> <div style="clear: both;"> <div id="footer"> <p>copyright 2009 <strong>tysse, Ur & Myhre</strong></p> <p> <a href=" src=" alt="valid XHTML 1.0 Transitional" height="31" width="88" /></a> </a> </p> </body> </html> <a href=" <img style="border:0;width:88px;height:31px" src=" alt="valid CSS!" />