Eksamensprojekt – Analysering

Forretning:
Projektstyring
Scope Statement

Før projektet

- Gruppekontrakt
- Scope Statement

Under projektet

- Opgavenedbrydning (værdi, kompleksitet og backlog)

- Tidsestimering (3-punktsmetoden)
- Trello board
- Formulativ evaluering med henblik på daglige standups

Efter projektet

- Summativ evaluering med henblik på generelle refleksioner (fejl) og evaluering af projektet /

forløbet

Udviklingsmetode
Jeg vil gerne dykke ind i de udviklingsmetoder, som vi har gjort brug af til udarbejdelsen af det
afleverede produkt.

Vi har primært haft en plandreven tilgang, som kendetegnes ved, at man ved hvad opgaven er, og
hvilken krav der er for at nå i mål med det afleverede produkt. Mere specifikt har vi gjort brug af
vandfaldsmetoden, som er lineær i sin tankegang, dvs., at opgaven og kravene ikke ændres efter
udviklingen, er gået i gang, og man bevæger sig ikke tilbage til tegnebrættet.

Vandfaldsmetoden kendetegnes ved, at der er nogle tydelige faser, som hver især skal afsluttes før
den næste kan påbegyndes. Selvom faserne er adskilte, så er der en sammenhæng, da de indsigter
eller viden, der fremkommer i f.eks. strategy fasen tages med videre til scope fasen osv.

I vandfaldsmetoden er der meget vægt på dokumentation, som kan tage mange former, vi har bl.a.
udarbejdet en procesrapport, hvor vi har redegjort for hvad vi har gennemgået i hver fase, samt
redegjort for de tilvalg vi har taget ift., det afleverede produkt. Man vil også kunne involvere
stakeholders til at give deres besyv med om man er på rette vej efter hver fase er blevet afsluttet,
men dette har vi ikke gjort eller haft mulighed for.

I en plandreven tilgang og i dette tilfælde vandfaldsmetoden har man som nævnt altid et
udgangspunkt, før udviklingsarbejdet kan påbegyndes og det har vi også haft i form af den stillede
problemformulering.

Til sidst, så har vi også haft kendskab til varigheden af forløbet, som man også ser ved de plandrevne
tilgange. Vi har derfor haft mulighed for at kunne estimere de forskellige aktiviteter ud fra den viden,
at vi har haft en cut-off date, altså hvornår vi skulle aflevere det færdige produkt.
Typisk vil man i vandfaldsmetoden først involvere brugerne efter udviklingen er færdiggjort, og vil
først her få værdifulde indsigter om man er nået i mål med produktet, og om det lever op til
brugernes forventninger.

Vi har dog også haft en agil tilgang til projektet, som er evolutionær i sin tankegang, dvs., at den er
åben over for at kravene kan ændres undervejs, og er dermed mere fleksibel og parat til at omstille
sig overfor de oprindelige krav. Vi har haft langt mere brugerdeltagelse involveret end man typisk vil
se i en vandfaldsmetode, hvor vi allerede gjorde brug af tests i både structure og skeleton fasen før, vi
bevægede os videre til surface fasen. Vi har været åbne overfor de indsigter, som er kommet af tests,
og har derefter adapterede os efter de indsigter. Kravene har selvfølgelig ikke ændret sig massivt,
men vi har stadig været åbne og lavet ændringer deraf (ændringer af billeder samt fjernet underside
‘Om os’.)

Vi har taget nogle elementer fra den agile metode Scrum, hvor vi har gjort brug af de ‘daily stand ups’,
hvor vi har holdt daglige møder, og gennemgået hvad der er sket i løbet af dagen, hvor langt er vi og
hvad mangler der. Vi har derudover også gjort brug af et backlog, som stammer fra Scrums
productbacklog. Vores backlog er dog en simplificeret version af et productbacklog, idet
kravspecifikationer har været få i vores version af det.

Kendetegn ved agile tilgang:

Der er faser, men arbejdet kan finde sted simultant og der er også en sammenhæng i faserne, men er
ikke bundet af hinanden. Der er en lille vægt på dokumentation, men man kan få godkendelser fra
stakeholders og ellers er der stor fokus på brugerdeltagelse og tests. Udgangspunktet er nødvendigvis
ikke defineret, da den tankegang er, at verden er evolutionær. Varighed ved man nødvendigvis ikke,
men man kan løbende estimere kravene eller opgaven undervejs, da tankegangen er evolutionær, og
den skal kunne imødekomme nye krav.

Kendetegn ved scrum:

Scrum har tre roller, en produktejer, scrum-master og et team.

Tre ceremonier, sprintplanlægningsmøde, daily stand up og et sprint review møde og retrospective.

Tre værktøjer; produktbacklog, sprintbacklog og burn down graf.

Kanban metodikken er en visuel metode til at holde styr på de arbejdsopgaver, som ligger for hånden.
Det er en produktiv måde at se hvilke opgaver, som venter på at blive påbegyndt, er igangværende,
mangler testning eller mangler at blive gennemset (in review) eller er afsluttet. (New, To Do, In
Progress, In review og Done)

Man kan holde kanban metode forholdsvis simpel, som vi har gjort i vores tilfælde, da vores tilgang til
projektet har været alle mand på dækket, men man kan i princippet give én person én opgave osv.,
hvis f.eks. Arne har ansvaret for programmering og Britta har ansvaret for designet. Derudover kan
man indføre due dates og andre specifikationer til de visuelle arbejdscards.

Vi har brugt trello board til at visualisere vores arbejdsopgaver, som lå for dagen.

https://blivprojektleder.dk/kanban/

Opgavenedbrydning
Backloggen er de delopgaver eller kravspecifikationer, som vi har fundet frem til, som er nødvendige
for det endelige produkt.

Vi har derudover vurderet hvor stor en værdi den enkelte opgave har for, at vi når mål med
produktet. Vores værdier rangerer fra 1-5, hvor 1 er den laveste værdi og 5 er den højeste værdi. Så
f.eks. kunne være, at vi vurderede at programmere hjemmesiden til at have en høj værdi - altså en
score på 5, da det jo principielt er nødvendigt for at udvikle en hjemmeside.

Derudover har vi også givet hver opgave en vurdering på hvor kompleks opgaven er, hvor de rangerer
i t-shirt størrelser, hvor S er en ikke særlig kompleks opgave og hvor L er en kompleks opgave.

Både værdien og kompleksiteten er foranderlig, det kommer an på hvilket team man skal arbejde
med og hvad opgaven er.

Vi har derudover også anvendt tidsestimering til at vurdere hvor meget tid, vi har til den enkelte
opgave. Vi havde samlet 480 timer for 3 personer, hvor vi vurderede at 310 timer ville være nok for at
udvikle produktet. Vores faktiske tid endte på 324 timer, så vi havde vurderet 14 timer forkert.

Vi havde f.eks. vurderet at styletilen skulle tage langt mindre tid, men vi endte faktiske med at bruge
15 timer, selvom at vi havde vurderet at det ville tage 3 timer.

Tidsestimering (3-punktsmetoden) tager udgangspunkt i 3 udgangspunkter, hvor vi har det

pessimistiske antagelse af hvor lang tid en opgave tager, den optimistiske antagelse af hvor lang tid en
opgave tager og en realistisk vurdering af hvor lang tid en opgave tager.

P+R / 2 =

https://www.fool.com/the-ascent/small-business/project-management/articles/three-point-
estimating/

Trello board
Vores Trello board indeholdt et card for refererater, vejledning og andet, hvor vi primært
havde problemformuleringen, gruppekontrakten og herefter mødereferater, som vi brugte
hver dag.

Et card, som indeholder alle vores ‘To Dos’ som er alle de opgaver, som vi ikke var startet på.
Et card, som indeholdt alle vores ‘In Progress’, som var alle de opgaver, som var
igangværende.
Et card, som indeholdt ‘Review’, som var de opgaver, som vi havde arbejdet på, men enten
ikke var færdige eller som vi skulle samle op på i afslutningsfasen, da vi skulle samle
rapporten f.eks.
Et card, som indeholdt alle ‘Done’ - de opgaver, som var færdige og ikke som nødvendigvis
skulle kigges på igen.

Digitalt indhold:
Målgruppen:
Målgruppen stilles i problemformuleringen, og er:
Målgruppen er mænd i alderen 28 år og op, og som har interesse i at deltage i et socialt
fællesskab eller at være sportslig aktive med andre mænd, som er bosat i Lind eller omegn
(Herning).

Responsmål:
Lind Old Boys primære mål er at tydeliggøre foreningens alsidige karakter på deres
hjemmeside, således det sociale liv kommer i fokus.
Lind Old Boys sekundære mål er at de nuværende foreningsmedlemmer forbliver aktive og
engageret i foreningen. Ligeledes, at tiltrække nye medlemmer, så livet i foreningen kan
bestå.
Lind Old Boys tertiære mål er at få deres foreningsmedlemmer til at danne relationelle
forhold gennem sociale og sportslige aktiviteter, derunder onsdagsbar.

Derudover ønsker Lind Old Boys at samle og gøre de sociale arrangementer lettere
tilgængelige for medlemmer på deres hjemmeside. (Rold, 2021, s. 23-24)

Design:
Formål:
Vi har ud fra den stillede problemformulering samt de udarbejdede responsmål fundet frem
til at formålet med Lind Old Boys sportsforeningshjemmeside er, at styrke og tydeliggøre
deres alsidige karakter i form af det sociale liv, som de har i klubben. Derudover er deres
sekundære mål, at tilegne sig nye medlemskaber, således livet i foreningen består.

Genre:
Genren for denne hjemmeside er en sportsforeningshjemmeside med fokus på sport og
fællesskab.

Stil:
Stilen på den redesignede hjemmeside for Lind Old Boys er en simpel og funktionel
hjemmeside i forhold til det sociale web

Derudover er vi formået at holde et konsistent design i det – de forskellige sider ikke afviger
fra hinanden, hvilket er med til at styrke troværdigheden, give en god brugeroplevelse for
brugeren, da der ikke er noget der som sådan forandrer sig per underside.

Komposition:
Horisontale linjer:
Der er blevet gjort brug af horisontale linjer igennem den redesignede Lind Old Boys
hjemmeside, f.eks. kan det ses i vores inddeling af navigationsbaren, på forsiden ift. Det
billedgalleri, som fremvises og den tekst der står skreven underneden. De horisontale linjer
inddeler her forsiden i sektioner, som gør det nemmere for brugeren at skanne hvad der er.
Det kan også ses på vores Fællesskabsunderside samt Sportssiden og kontaktsiden. Så at sige,
at vi har horisontale linjer som en gennemgang på alle siderne.

Horisontale linjer skaber ro og balance for brugeren, og det er nemmere at skanne sig frem til
hvad der skal ses.
Vertikale linjer:
Vertikale linjer kan f.eks. ses på vores Fællesskabsside ift. De nyheds-/arrangementsoversigt,
som fremvises, som fremstår som kolonner samt vores sportscards.
Vertikale linjer skal kunne skabe en følelse af bevægelse og styrke.
Diagonale linjer:
Diagonale linjer er med til at skabe dynamik og bevægelse i et design. Vi kan bl.a. snakke om
at de billeder, som vi har fremvist på vores billedgalleri, har en overvejende tendens til at
have diagonale linjer f.eks. volleyball billedet, pool bordet og øllene. De skulle gerne opveje
for et forholdsvis statisk udtryk på forsiden samt de diagonale linjer peger mod
navigationsbaren, således brugeren kan undersøge mere om forholdene for
sportsforeningen.

Z-Pattern:
Vi har visuelt et meget tydeligt z-pattern på den redesignede Lind Old Boys hjemmeside, det
ses bl.a. på forsiden, fællesskabssiden og sportssiden. Vi har en forholdsvis let hjemmeside
ift. At den ikke er teksttung, der er ikke meget indhold, som brugeren kan blive fortabt i. Når
brugeren skanner de tre nævnte undersider, vil brugerens øjne falde på den gule CTA, som
fremvises nede i højre hjørne ad skærmen. (Interfacedesign – Rold S. 129).
F-Pattern:
Derudover er der mere teksttunge elementer på de to undersider, som privatlivspolitikken og
vedtægterne udgør - her er der forholdsvis meget information, som brugeren skal læse, og
det forekommer ved et F-pattern, hvor brugeren skanner siden øverst til venstre – vandret til
højre, og vil derefter lade blikket falde ned langs venstre side indtil at brugeren skulle finde
noget interessant. (Interfacedesign – Rold S. 129).

Symmetri:
Symmetri skaber generelt ro og er smukt, men for meget symmetri kan også blive kedeligt for
brugeren. Vi har et forholdsvis symmetrisk design med lige vægt (omend det måske ikke er
helt lykkedes på den udarbejdede hjemmeside).
Asymmetri:

Asymmetri skaber dynamik og kan hjælpe brugeren med at finde fokuspunkter. Vores gule
CTA-knap skaber asymmetri, da den placeres nede i højre hjørne.
Derudover havde vi også et ønske om at vores logo skulle falde ud over navigationsbaren,
men som nævnt i de generelle refleksioner måtte dette opgives.

Gestalt:
I forhold til brugen af gestalt i den redesignede hjemme for LOB, så har vi f.eks loven om
nærhed, som er elementer der vil fra brugerens side blive opfattet som relateret til hinanden.
Loven om nærhed kan ses på alle undersiderne.

Vi har loven om lighed, som er elementer der umiddelbart ligner hinanden, og i forbindelse
med loven om nærhed. Det kan vi bl.a. se på ‘Fællesskabsundersiden’ ift. Arrangementer og
nyhedsopdateringer og ‘Sportsundersiden’ ift. de informationsbokse, som fremstår. De bliver
bl.a. opfattet ‘ens’ ved brugen af formen, størrelsesforholdene, farverne, fonten osv.
Vi har loven om kontinuitet, som er elementer, der er placeret så de følger en linje (både
bøjede og lige linjer), og disse vil blive opfattet som sammenhørende. Det kan f.eks. ses på
‘Fællesskabsundersiden’ ift. Arrangementer og nyhedsopdateringer og ‘Sportsundersiden’ ift.
de informationsbokse, som fremstår.
Disse linjer opstår både horisontalt (på desktop) og vertikalt (på mobil enhed).

Vi har loven om lukkethed, som er elementer, der er indrammet af kasser eller streger, vil
blive opfattet som samhørende elementer. Det kan igen bl.a. ses på ‘Fællesskabsundersiden’
ift. Arrangementer og nyhedsopdateringer og ‘Sportsundersiden’ ift. de informationsbokse,
som fremstår.

Derudover kan vi sige, at den CTA-knappen ‘Tilmeld dig’, også er omfattet af loven om
lukkethed, når den åbnes ud af brugeren. Her er elementerne placeret indenfor en kasse.
Loven om prägnans er ligeledes til stede på alle siderne, da det omhandler at kunne adskille
de forskellige genstande fra dets baggrund, og som sker igennem hele den redesignede
hjemmeside.

Kontrast:
Størrelseskontrast
Vi har valgt, at billedgalleriet på forsiden skal tage den største placering i forhold til de andre
elementer. Billederne skal invitere brugerne ind og fremvise, at Lind Old Boys er mere end en
sportsforening, og derfor har billedgalleriet den største kontrast på forsiden. På
fællesskabssiden er informationerne omkring hvem foreningen er og hvad den tilbyder.
 Omvendt på vores mockup ville det være ‘arrangementer & opdateringer’, som vil være den
største kontrast. (Birkvig, 2004)

Placeringskontrast
Vi har som nævnt placeret billedgalleriet på forsiden, som noget af det første brugeren skal se ift. Den
alsidige karakter foreningen har, men dernæst har vi den gule CTA knap, som udover den stærke
farvekontrast er det næste vi gerne vil have at brugeren ser. Dette opnås også bl.a. ved Z-pattern.
(Birkvig, 2004)

Hirakisk placering af de elementer, man ønsker, at brugeren ser først.

Styrkekontrast
Vi gør brug af de komplementære farver, som er den største farvekontrast, der kan opnås.
Dette får vi ved brugen af den mørke blå og den varme gule, som er de farver, som primært
bruges i redesignet.
Derudover er styrkekontrast også bold font eller normal font. Vi har f.eks. en bold font i vores
overskrifter, og i nogle af brødtekstelementerne. Ligeledes til at illustrere på hvilken side
brugeren er på ift. Navigationsmenuen.
Whitespace

Er de områder, som ikke er fyldt med tekst eller grafiske elementer. Det kan også være
mellemrum ml. Ord, sætninger og sektioner. Whitespace bruges til at skabe balance i
designet, f.eks. at forbedre læsbarheden, organisere indholdet og for brugeren er det en
hjælpende hånd til at navigere rundt i designet.

Farver:
Vores udgangspunkt ift. at vælge nogle farver til den redesignede hjemmeside vs. de
akromatiske farver, som Lind Old Boys benytter sig af på deres eksisterende hjemmeside
kommer fra indsigterne fra de kvalitative interviews, hvor vores respondenterne besvarede at
de ønskede farver, som ville kunne fange deres opmærksom.
Vi valgte at gøre brug af nogle komplementære farver, som er farver der står direkte overfor
hinanden i farvecirklen, og dette er der giver den højeste farvekontrast. Vi har valgt den
mørke blå og den varmere gule i vores redesign af LOBs hjemmeside. Vi har ladet den mørke
blå være den dominerende i interfacet ved brugen af den i navigationsdesignet, de blå CTA’er
på ‘fællesskabssiden’ og på forsiden på mobil enhed og som de blå bokse på ‘sportssiden.’ Og
så den varme gule til CTA’en for at skabe særligt fokus på den knap. (Rold, S. 183-185) Brugen
af de to komplementære farver, er også de farver, som er den stærkeste farvekontrast der
kan opstå, når man bruger to farver overfor hinanden. (Rold, S. 177)
Den varme gule som vi gør brug går også igen på de valgte billeder i billedgalleriet i form af
øllene, volleyballen og kuglerne på poolbordet.

Vi gør også brug af akromatiske farver, som er de neutrale farver såsom sort, hvid og grå. Vi
har valgt en knækket hvid, som baggrundsfarve, en mørkegrå til fonten, således læsbarheden
ikke fremkommer for hård over for brugeren. (Rold, S. 170) Vi har også valgt at bevare Lind
Old Boys logo, som ligeledes er de akromatiske farver sort og hvid.
https://ianstormtaylor.com/design-tip-never-use-black/

I forhold til farveblindhed, og at målgruppen kun er mænd, har vi også valgt de to

komplementære farver med det udgangspunkt, at disse to farver kan både de rødblinde og
grønblinde personer se. Der er over 200.000 mænd i Danmark, som er farveblind.
https://ojenforeningen.dk/brochurer/farver-farveblindhed

Typografi:
Vi valgte at gå med fonten Oswald, som vi mener lægger sig tæt op ad Lind Old Boys
nuværende logo, men uden at fonten på hjemmesiden bliver ulæselig.
Oswald er en fonttype, som er en sans-serif type, dvs., at den er uden fødder. Man bruger
primært en sans-serif fonttype til at hjemmesider, som indeholder forholdsvis lidt tekst. En
sans-serif har den samme stregtykkelse på hvert bogstav, og det forstærker dens udtryk. Man
vælger typisk en sans-serif fordi, at den skal kunne læses hurtigt. (Rold, S. 162).
Man vil primært bruge en serif fonttype til lange brødtekster, da fødderne på bogstavet
hjælper brugeren til at skanne indholdet. (Rold, s. 161 – 162).

Vi havde ønsket at gøre brug af majuskler (all caps) til vores informationsbokse på
‘sportssiden’, som fremvist i vores mockups, men da vi programmerede det – var det ikke
læsbart længere.
Skanbarhed: I det brugere typisk læser non-lineært på hjemmesider – dvs., at de skanner
indholdet og vil også kunne finde på at springe rundt imellem indholdet, derfor vil man med
fordel kunne gøre brug af at præsentere ens indhold ved at fremhæve nøgleord eller sætte
indholdet i punktformer. Det vil hjælpe brugeren med at forhåbentligt kunne finde det
vigtigste information, som de leder efter, men er også et vigtigt element fra afsenderens side,
at illustrere det vigtigste for brugeren. Vi gør bl.a. brug af det ved vores overskrifter på alle
siderne, på ‘fællesskabssiden.’ (Rold, s. 166)
Skriftstørrelse: Typisk vil man anbefale, at en brødtekst er på 14-16 px., og det gør vi også
brug af på vores redesignede hjemmeside for LOB.

• H1: har vi brugt 32px og( Sportscard Fodbold o lign.)

• H2: 24 px brugt som undertitel på fællesskab, vedtægter og privatlivspolitik, i
sporten er H2 defineret med specifik font size på 32 px.
• H3: 18,72 px privatlivs politik undertitler og i vedtægter. Er også brugt i tekster i
overlays.
• H4: 16 px
• P: 16px
Knibbing / kerning: Afstanden mellem bogstaverne, og er nødvendigt først at arbejde med,
når man kommer op i de større fontstørrelser fra 20p. Vi har ikke arbejdet med knibbing,
men vi skulle nok have gjort det, da det visuelle udtryk på hjemmesiden vil have set bedre
ud ift. Vores overskrifter på elementer. F.eks. sportscards.

Skydning: Linjeafstand
Programmering:
Vi har lavet 6 sider, hvor indedx.html er vores forside, som indeholder et billedgalleri og en
salgsbesked for Lind Old Boys. Derudover har vi vores navigationsmenu og footer, som
selvfølgelig går igen på de resterende 5 sider.

Forsiden - Index.html:
I Index.html har vi primært gjort brug af et external style sheet, som er lagt oppe i head,
vores extneral style sheet indeholder alt den style, som ses på forsiden med nogle små
undtagelser. Vi har ligeledes også gjort brug importeret styles, det ses ved vores valg af font,
som er downloadet fra google, og vores hamburger menu, som er hentet fra W3 schools.
Slutteligt er der også gjort brug af inline style ved vores billedgalleri i forhold til width/bredde
og height/højde, men som i princippet kunne have været lavet i vores external style sheet.

I index.html har vi også gjort brug af javascript, som er udenfor pensum, men som har været
nødvendigt for at komme i mål med det indhold vi ønskede LOBs hjemmeside skulle bestå af.
Vi har gjort brug af JavaScript i vores billedgalleri, w3-left w3-hover-text-khaki og "w3-right
w3-hover-text-khaki", som operer ved at hvis man klikker på den venstre pil fremvist på
forsiden, så vil billedet gå én tilbage og fremvises det billede nederst i rækkefølgen. Og hvis
man klikker på pilen til højre, så vil den fremvise det næste billede i rækkefølgen.
https://www.w3schools.com/w3css/w3css_slideshow.asp
I index.html har vi gjort brug af:
<img>, som er et inline box element, som ikke automatisk opfører sig som en boks, men vi
har angivet nogle classes for at få vores billedgalleri til at blive fremvist, som vi ønskede.
I vores tilfælde har vi lavet en class til billedgalleriet "w3-content w3-display-container", som
er blevet stylet i selve HTML dokumentet, og det angiver størrelsesforholdene på hvor
billederne skal placeres på skærmen. Denne class er en div, som er en block box, og herefter
har vi angivet classes til selve billederne, som ligeledes er blevet stylet i external style sheet,
men også inline.
<move-front> er en class vi har lavet, således vi kunne placere indholdet under billedgalleriet,
vi valgte at lave en class til at omringe hele indholdet, da vi ikke ønskede at ændre
placeringen af <h1> eller <tekst>, da disse to classes bliver brugt andre steder i dokumentet.
På vores mockups har vi to CTA’er <frontbuttons> fremvist under billedgalleriet og
salgsbeskeden, som skulle tage brugeren direkte til de to undersider ‘Fællesskabet’ og
‘Sporten’. Disse skulle også være fremvist på desktop, men vi endte med at skjule dem, når
skærmstørrelsen ender på minimum 900 px.

Navigationsmenuen:

Vores navigationsmenu er skabt til at være responsiv, således den ændrer form, når skærmstørrelsen
er max 700 px. Navigationsmenuen er skabt ved hjælp af JavaScript, således at den kan udvide sig og
lukke sig, når brugeren klikker på hamburgerikonet.
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Vi har valgt at bruge og placere Lind Old Boys oprindelige logo i venstre side af skærmen.

Vi har valgt at have fællesskabet, sport og kontakt til at ligge på navigationsmenu, og disse sektioner
fremvises, når skærmstørrelsen er xx, og når skærmstørrelsen er xxx, så er de expandable.

Tilmeldingsformularen:

Vi har valgt at have en pop-up tilmeldingsformular, som er sticky på siden. Det vil sige, at den følger
brugeren, når han scroller på siden. Her er der gjort brug af

ID

https://www.w3schools.com/howto/howto_js_popup_form.asp

https://www.w3schools.com/php/php_forms.asp

https://www.w3schools.com/tags/att_value.asp

Footeren:

Vores footer, er forholdsvis simpel opbygget i den forstand, at vi har gjort brug af vi selvfølgelig har
vores footer tag, som indikerer til SEO, at dette tag vil indeholde oplysninger om foreningen etc.,
såsom adresse osv. I vores tilfælde har vi brugt footeren til at lede brugeren hen til at Lind Old Boys
privatlivspolitik og deres vedtægter, og dette vil ske ved at hvis brugeren klikker på én af de to, så vil
brugeren blive led direkte over på den side. Derudover giver foreningen også mulighed for brugere til
at gå hen på andre foreningshjemmesider – dette sker ved brug af et external link, således at
brugeren ikke bevæger sig væk fra selve Lind Old Boys hjemmeside, men åbner en ny fane med det
link de har klikket på - target=”_blank” er en attribute.
https://www.w3schools.com/html/html_links.asp

Fællesskabet.html:
På fællesskabssiden har vi primært gjort brug af external style sheet, som er lagt oppe i head. Der er
nogle få undtagelser hvor der er gjort brug af phrase tags til at style indholdet, men hvor man kunne
havde lavet det til en class. Det er f.eks., at det indhold, som findes i vores overlays/modalerne er
bygget op med nogle <strong> tags samt få andre steder på dokumentet.

På fællesskabssiden har vi valgt at lave et arrangement og opdateringer/nyhedsoversigt, som skal

indeholde Lind Old Boys arrangementer samt deres nyheder eller opdateringer. For at lave den
oversigt, som skulle indeholde arrangementer og nyheder, gjorde vi brug af et responsivt billedgalleri
fra W3 schools, som vi så tweakede til vores fordel.
https://www.w3schools.com/howto/howto_css_image_gallery.asp

Billederne fungerer som vores teasers på indholdet, her har vi først en class <responsive>, som er den
der ændrer størrelsesforholdene på vores indhold, når skærmstørrelsen er max 700 eller 500 px.
Derudover har vi også en class <gallery>, som indeholder vores billeder og deres størrelsesforhold.
Derudover gør vi så også brug modaler/overlays, som skal indeholde det indhold, som arrangementer
eller nyhederne. Modaler bliver fremvist ovenpå skærmen, så det fungerer som en pop-up.

Vi har buttons, som fungerer som vores title/header, og når brugeren klikker på denne, så vil han blive
ledt til en modalen/overlayen af information.

Disse modaler gør brug af javascript. ID'erne myModal1, ModalG2, ModalBo3 og Modalgri4 er
connected til javascripten i bunden, f.eks. åbner den og lukker den eller hvis brugeren klikker udenfor
modalen, så skal den også kunne lukke. https://www.w3schools.com/howto/howto_css_modals.asp

JavaScript til modalerne/overlays:

myModal1 referer til indholdet længere oppe, og opretter derved forbindelse til javascripten. Dette
samme gør myBtn.

Denne del er blevet lavet ved hjælp af ChatGPT https://chat.openai.com/share/63f58228-65ec-49f4-

ae86-2dc4a4893baf da der har været generelle problemer med at lave adskillige modaler, og
lukningsfunktionen har ikke virket.

ChatGPT https://chat.openai.com/share/1295fc3e-cd63-4c44-9162-f89d08c03913 er blevet brugt i

starten af opbygningen af modalerne, da der var usikkerhed omkring lukningsfunktionen, og om man
kun kunne benytte modalerne én gang.

sport.html:
På sport.html siden har vi ligeledes også primært gjort brug af external style sheet med nogle få
undtagelser, hvor vi også har noget internal style oppe i head, som vi har gjort brug af for at få vores
fontfarve på vores sportscards til at være en bestemt farve og størrelse.

Vores sportscards er bygget op med brug af classes <row>, som er de størrelsesforhold, som er opsat
til at få boksene til at tilpasse, når de rammer forskellige skærmstørrelser. Derudover har vi classes til
vores cards, som er designet med baggrundsfarve, størrelsesforhold osv.

kontakt.html:
På kontakt.html siden har vi også gjort brug af external style sheet, men med meget internal style
oppe i head, da vi der er blevet brugt nogle af de samme class navne som på sport.html siden

Privat.html & vedtægter.html:

På disse to sider har vi også primært gjort brug af external style, men vi har været nødsaget til at
placere en class oppe i head, som internal style, da der var noget placering af noget indhold, som ikke
responderede, som vi ønskede.