-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Stichting Kunst in C is in 2023 opgericht. Kunst in C wil er voor zorgen dat er meer openbare kunstuitingen komen in de gemeente Castricum. Dat kan een tijdelijk kunstwerk zijn, of een vast kunstwerk. Het is de bedoeling om dit zoveel mogelijk af te stemmen met de bewoners/omwonenden/belanghebbenden. En, tot slot, is het geweldig als de kunstuiting ook aanhaakt bij de duurzame ontwikkelingsdoelstellingen van de VN (SDGs), door daardoor geïnspireerd te zijn, of daar rekening mee te hebben gehouden bij de materiaalkeuze.
Om dat doel te bereiken gaat Kunst in C op zoek naar geschikte locaties, gaat samenwerkingen aan met andere initiatieven en doet aan fondsenwerving. Ook organiseert Kunst in C opdrachten tot het maken van kunstuitingen en schrijft ze rondreisende kunstuitingen aan om in Castricum tijdelijk kunst tentoon te stellen in de openbare ruimte. Het hoofddoel van de website is om alle kunstuitingen inzichtelijk te maken voor bewoners en bezoekers van de gemeente Castricum. Dit geldt voor permanente en tijdelijke kunstwerken. Dit wil stichting Kunst in C, omdat ze bewoners en bezoekers willen informeren en betrekken bij de gemeente Castricum. Ook wil de stichting haar bereik vergroten en de communicatie verbeteren door gebruik te maken van platforms als de website.
De primaire doelgroep bestaat uit lokale bewoners van Castrium en toeristen. De leeftijden zijn uiteenlopend, zo'n 25-65 jaar. Gezinnen kunnen bijvoorbeeld gebruikmaken van de website om te navigeren naar een kunstuiting. Terwijl oudere bewoners/ toeristen mogelijk geïnteresseerd zijn in de geschiedenis en de betekenissen van de kunstuitingen.
Donateurs (personen en organisaties die financieel willen bijdragen aan kunstprojecten) tussen de 35-70 jaar oud. Deze groep bestaat meer uit gevestigde professionals, gepensioneerden en ondernemers die over de interesse en middelen beschikken om kunstprojecten financieel te ondersteunen.
De missie van de website voor Stichting Kunst in C is om een platform te bieden voor elke kunstuiting in en rondom Castricum. Dit wil Stichting Kunst in C om alle kunstuitingen inzichtelijk te maken voor zowel bewoners als bezoekers. De website heeft als doel om de gemeenschap te betrekken en te informeren bij kunstprojecten en kunstuitingen, om zo de artistieke waarde van de gemeente te promoten. De visie van de website voor Stichting Kunst in C is om een digitaal platform te creëren dat fungeert als een virtuele kunstgalerie voor Castricum, Bakkum, Limmen, Akersloot en de Woude. De website moet niet alleen dienen als informatief middel maar ook als inspiratiebron die de culturele identiteit en de waardering voor kunst in de openbare ruimte van de gemeente te versterken/vergroten. Design challenge
Ontwerp en ontwikkel een website, waarop de kunstuitingen in de gemeente Castricum kunnen worden getoond. De bestaande (mede met hulp van inventarisatiewerk van de Stichting Oud-Castricum), de tijdelijke uit het verleden (zoals: fototentoonstelling op het strand en in het duin van Jimmy Nelson en Wheeping Elephant op het strandplateau). Het design moet eenvoudig over te nemen zijn naar bijvoorbeeld Wordpress en graag met koppeling (dat kunnen wij niet overzetten namelijk). Qua design hebben we al wel een eigen beeld, gemaakt door Ruben. In zijn visie wordt het een echte kunstsite, met artistieke frictie passend bij de werken, zoals volkskrant Story.
We willen via de site kunnen communiceren met de betrokkenen, dus er moeten e-mailadressen gekoppeld kunnen worden. Een naam: kunstinc.nl voor de site is al door ons gedeponeerd. Fijn als we fondsenwerving op de site ook handen en voeten kunnen geven. Ook fijn als er een soort implementatieplan bij zit voor bredere communicatie, via de socials, en hoe we dat moeten aanpakken.
Voor Stichting Kunst in C is het de bedoeling dat we een gebruiksvriendelijke website opleveren die kunstuitingen in Castricum op een aantrekkelijke manier toont. De site moet een makkelijke navigatie hebben, responsief zijn op verschillende apparaten, en visueel aantrekkelijk ogen. Een belangrijke vereiste is dat de website eenvoudig over te dragen moet zijn naar platforms zoals WordPress.
Daarnaast moet de website geïntegreerde functionaliteiten voor e-mail, communicatie en fondsenwerving bevatten.Een andere belangrijke eis is dat de website moeiteloos overgedragen kan worden aan toekomstige developers. Dit vraagt om duidelijke documentatie en een gestructureerde codebasis.
Stichting Kunst in C wil alle kunstuitingen in Castricum, dit kunnen zowel permanente als tijdelijke kunstuitingen, inzichtelijk maken voor bewoners en bezoekers. Stichting Kunst in C wil dit doen door middel van een website. Hiermee wil Stichting Kunst in C de gemeenschap informeren en betrekken bij de kunstuitingen.
De huidige uitdaging is het ontwikkelen van een informatieve en interactieve website die kunstwerken toont, en fondsenwerving implementeert. Ook moeten gebruikers in de echte wereld met een QR code bij de kunstwerken doorgelinkt worden naar de website. Dit alles moet op kunnen worden beheerd via WordPress.
We begonnen met het opstellen van een briefing, het verzamelen van inspiratie, en het maken van low fidelity ontwerpen. Na een kennismakingsgesprek met de opdrachtgever, werd de opdracht verder verduidelijkt en gedebriefd. Vervolgens maakten we design iteraties en stelden een stijlgids op om de styling consistent te houden.
In deze weken zijn we begonnen met het bouwen van de website lokaal, aangezien er nog geen hosting beschikbaar was. Nadat we toegang kregen tot WordPress, hebben we Wordpress opgezet, terwijl we verder werkten aan de lokale bestanden.
We hebben onze lokale bestanden naar PHP overgezet en geïntegreerd in WordPress. We hebben het CMS gebruiksvriendelijk gemaakt voor niet-technische gebruikers en begonnen aan onze design rationale. In de laatste week voegden we de laatste features toe en hebben we het eindproduct gestroomlijnd, en bereiden de eindpresentatie voor de klant voor.
Typografie: Het serif-lettertype 'New York' voor de titel straalt elegantie en professionaliteit uit en past goed bij de huisstijl door het subtiele contrast met het speelse logo. Serif-lettertypes roepen vertrouwen en autoriteit op, maken teksten beter leesbaar en zorgen voor een duidelijke visuele hiërarchie. Het heeft ook een tijdloze look die goed samengaat met andere visuele elementen op de pagina.
Zoals we al hadden verteld, gebruiken we de kleuren vanuit het logo. Deze zijn simpel en hebben een goed kleurcontrast, zowel op licht als donkere achtegronden. Het kleurcontrast op de pagina is gekozen om ervoor te zorgen dat alle teksten en elementen goed leesbaar zijn. Voldoende contrast tussen tekst en achtergrond bevordert de leesbaarheid, vooral voor gebruikers met verminderd zicht of kleurenblindheid. Ook is een contrast belangrijk om hiërarchie te kunnen aangeven of door speciale elementen meer uit te lichten dan andere Dit verbetert de toegankelijkheid van de website en volgens de wcag is alles met een contrast hoger dan 4.5 geschikt voor mensen die hier mogelijk last van kunnen hebben. Hier voldoen wij ook aan met een gemiddelde contrast ratio van 10.07 wat aangeeft dat de contrast ratio voldoende moet zijn
Elke afbeelding op de pagina is voorzien van een Alt tekst (alternatieve tekst). Dit beschrijft de inhoud van een afbeelding, voor gebruikers die geen afbeeldingen kunnen zien. Deze tekst wordt opgelezen door screen readers. Door duidelijke Alt teksten toe te voegen, wordt de inhoud van de afbeeldingen toegankelijk gemaakt dit is het dus handig als je precies omschrijft wat je op een afbeelding ziet zodat ook mensen met een visuele beperking zich voor kunnen stellen welke afbeelding er staat/
Interactieve elementen op de pagina zijn voorzien van Aria-labels. Aria-labels zijn attributen die aan elementen worden toegevoegd om hun doel en functie te beschrijven voor gebruikers van screenreaders. Door juiste Aria-labels toe te voegen aan knoppen en andere interactieve onderdelen, wordt de toegankelijkheid van de pagina verbeterd voor gebruikers met screenreaders.
De pagina biedt ook een dark mode. Darkmode is ontworpen om gebruikers een visuele ervaring te bieden die comfortabel is voor langdurig gebruik,Denk daan aan een donkere omgeving zoals in een kamer of wanneer het te licht is als de zon te laag staat. Dan is het fijn om een beter kleurencontrast te zien.
##Responsive Ontwerp: De website is volledig responsive, wat betekent dat deze bruikbaar is op laptops en mobiele apparaten. Het design zorgt ervoor dat de lay-out en functionaliteit van de website zich volledig aanpassen aan verschillende schermen en apparaten waardoor gebruikers een consistente ervaring krijgen, ongeacht het apparaat. Voor mobiele apparaten, waar het gebruik van een horizontale scroll vaak minder praktisch is, is de stijl van de side-scroll aangepast naar een verticale-scroll. Dit bevordert het navigeren en de algehele gebruikerservaring.
- het logo: Het logo staat linksboven en heeft een animatie wanneer er naar beneden wordt gescrold. Dit gebeurt zodat de navigatiebar niet te hoog wordt en daardoor minder pagina kan laten zien.
- het menu: Voor het menu hebben wij gekozen om een klein, minimalistisch maar wel een wat unieke vorm te hebben. De ronde vormen vinden wij passen bij het logo en sluit mooi aan op andere onderdelen. Wanneer er gescrold wordt zal de navigatie 1 lange achtergrond hebben voor duidelijk leesbare navigatie.
- Darkmode lamp: Zoals eerder aangegeven is het inclusief maken van een website voor meerdere gebruikers een belangrijk doel. en daarom is het belangrijk dat je denkt aan omgeving waarin licht en donker een spel kunnen spelen.
- col-left: De header bevat een korte beschrijving met wat tekstuele informatie omtrent de website. Deze tekst is bedoeld als inleidende tekst voor de gebruikers.
- col-right: De kaart bevat alle dorpen waar Stichting Kunst in C zich op richt. De kaart heeft dezelfde omtrek als het logo. Wanneer je op een gemeente klikt, zul je zien wat er daar allemaal te zien is. Hierdoor is de site wat interactiever en triggert het de nieuwsgierigheid van de eindgebruiker.
- De ‘steun ons’ knop is een CTA gericht op het aantrekken van donaties. De knop heeft een opvallende rode kleur en blijft altijd op dezelfde positie van het beeldscherm staan zodat deze altijd prominent aanwezig is. Er is bewust voor gekozen om deze rechts onderin te plaatsen, zodat het aanwezig en opvallend is, maar geen irritatie veroorzaakt.
- Intro tekst: Deze sectie bevat een korte beschrijving en een knop die naar de overzichtspagina leidt. De knop onderaan de beschrijvende tekst trekt de aandacht om als doel de gebruiker op de knop te laten klikken, die de gebruiker naar de volgende pagina leidt.
- GSAP slider: De sectie bevat een horizontale scroll waar maximaal 4 kunstwerken op getoond kunnen worden. Deze scroll is geïntegreerd om de site een beetje anders te maken, aangezien kunst ook een beetje anders is. Hierin zijn de kunstwerken groot weergegeven om het kunstwerk meteen visueel duidelijk te maken voor de gebruiker en de aandacht te trekken.
- SVG Animatie: Een animatie start wanneer de gebruiker op deze sectie belandt, dit is gedaan om de site wat levendiger te maken. Ons idee voor de website is om animatie te gebruiken voor meer duidelijkheid. In deze animatie zie je een route met verschillende punten waar kunst beelden kunnen staan.
- De uitgelichte sectie bevat een hover om de context van de evenementen te tonen. Dit effect is bewust gedaan om de lezer niet te overweldigen met verschillende teksten van een evenement. Deze hover weerlegd de aandacht van de gebruiker op de context binnen het vakje.
- agenda: Op aanvraag van Femke is er ook een agenda bijgekomen, deze hebben we minimalistisch gehouden maar op de knop wel een kleine animatie zodat het duidelijk is dat je daar overheen hovert.
- Header: De header van de pagina bevat een uitgelicht kunstwerk om bezoekers direct een voorproefje te geven van de kunstwerken die op de overzichtspagina te zien zijn. Het uitgelichte kunstwerk in de header trekt direct de aandacht en prikkelt nieuwsgierigheid, wat bezoekers aanmoedigt om verder te verkennen.
- Grid: De kunstwerken worden in een grid weergegeven om het overzicht te bevorderen. De opmaak van de kunstwerken is consistent met de stijl van de kunstwerken op de hoofdpagina, zodat de visuele ervaring consistent blijft.
- Lijst: De kunstwerken kunnen ook in een lijst worden weergegeven. Een lijstweergave biedt meer ruimte voor beschrijvingen en extra context. Dit is ideaal voor gebruikers die meteen al wat meer informatie willen hebben.. Gebruikers hebben de mogelijkheid om te kiezen tussen een grid weergave en een lijstweergave, zodat ze de presentatie kunnen aanpassen aan hun persoonlijke voorkeuren en de manier waarop ze het beste informatie verwerken, dit bevordert de gebruiksvriendelijkheid.
- Tekst: De header van de detailpagina bevat een prominente weergave van de titel van de kunstuiting, wat gebruikers direct helpt om het specifieke kunstwerk te identificeren.
- Icoon: Er wordt rechtsonder in de header een icoon weergegeven dat het dorp van het kunstwerk aanduidt, met een specifiek icoon voor elk dorp waar de kunstwerken worden tentoongesteld. Hierdoor kan de gebruiker in een oogwenk zien in welk dorp het kunstobject tentoongesteld staat.
- Afbeelding: Rechts op de pagina krijgt de afbeelding van het kunstobject heel veel ruimte op de pagina. Hierdoor kan de gebruiker het kunstobject digitaal bewonderen en wordt het meteen duidelijk over welk kunstobject deze pagina gaat.
- tabel met extra info: Omdat er veel te zeggen is over maar geen lange zinnen nodig hebben, hebben we ervoor gekozen om een tabel met info te laten zien die in één opslag weergeven wat er nog meer te vertellen valt over een kunstbeeld.
- Side Scroll: De pagina bevat opnieuw een horizontale scroll functie, vergelijkbaar met de hoofdpagina. De pagina biedt gedetailleerde informatie over elk kunstwerk, inclusief foto's en video's, waardoor bezoekers een uitgebreidere en visuele ervaring krijgen tijdens hun verkenning over het kunstobject.
- afb.: De afbeelding in de footer hebben we op deze manier gemaakt zodat het visuele aspect binnen de website overal wordt doorgetrokken en op deze manier kunnen foto’s die een indruk geven ook een betekenis hebben op de website.
- rechterkant: Een footer is een onderdeel dat binnen de website vaak op design vlak wat wegvalt. Wij hebben ervoor gekozen om deze meer op te laten vallen omdat navigatie voor deze website belangrijk is. Zo zijn de navigatie-items wat groter en goed leesbaar.
- postfooter: Pagina’s die minder belangrijk zijn maar er wel moeten zijn staan hier. Rood zodat het nog wel opvalt maar niet irritant is.
- markers: De marker geeft aan waar dit kunstbeeld is geplaatst. door middel van een animatie geven we aan de de geselecteerde marker actief is en aan de zijkant komt een sidebar met info
- sidebar: In de sidebar is een navigatie te vinden om door alle punten heen te gaan en verdere info te vinden over een specifiek kunstbeeld. Deze bevat ook 2 knoppen die duidelijke kleuren hebben
- routes: De 2 routes geven een fiets of wandelmogelijkheid aan. Op een visuele manier wordt duidelijk gemaakt om wat voor soort route het gaat.
Op basis van meerdere feedbackgesprekken die we met Femke en Vasilis hebben gevoerd kunnen we concluderen dat de gekozen kleuren, plaatsing van elementen en minimalistische stijl goed aansluiten bij de wensen van stichting Kunst in C. d.m.v. deze ontwerpkeuzes zijn wij ervan overtuigd dat de website een waardevolle toevoeging is voor de bewustwording van kunst bij zowel inwoners als bezoekers in en rondom de gemeente Castricum.
De opdrachtgever wil graag een website met een huisstijl die bij stichting Kunst in C past. Hiernaast moet deze beheerbaar zijn met WordPress. De opdrachtgever kiest voor Wordpress omdat dit eenvoudig te gebruiken is door mensen die geen technische kennis hebben. Met dit Content Management Systeem(CMS) kunnen zij eenvoudig pagina's, berichten, afbeeldingen en andere media toevoegen en bewerken. Front-end
Voor de front-end is HTML, CSS en JS gebruikt. De styling van de website wordt verzorgd door vanilla CSS, dit betekent dat we geen gebruik maken van frameworks maar dat alle styling handmatig is geïmplementeerd.
Voor de interactieve functionaliteiten en dynamische elementen op de website is vanilla JavaScript toegepast. Dit stelt ons in staat om op maat gemaakte scripts te schrijven die specifiek zijn afgestemd op de behoeften van de website, zonder afhankelijk te zijn van externe libraries of frameworks.
- Flexibiliteit en controle: Het gebruik van vanilla, HTML, CSS, en JavaScript geeft volledige controle over de code. Dit stelt ontwikkelaars in staat om exact te creëren wat nodig is zonder afhankelijk te zijn van frameworks.
- Performance: Websites gemaakt met vanille, HTML, CSS, en JavaScript zijn vaak sneller en lichter omdat ze geen extra belasting hebben van frameworks.
Voor de back-end hebben wij voor Wordpress gekozen als ons Content Management Systeem (CMS). De redenen waarom wij voor wordpress gekozen hebben zijn als volgt:
Wordpress staat bekend om de gebruiksvriendelijke interface. Dit houdt in dat zowel wij als ontwikkelaars maar ook de klant/opdrachtgever gemakkelijk kunnen werken met dit systeem. Hierdoor is het beheer van de website een stuk gemakkelijker en is minder technische kennis vereist.
Wordpress geeft de mogelijkheid om veel verschillende plugins te gebruiken. Hierdoor is het een stuk makkelijker om aan de specifieke behoeftes van de gebruiker te voldoen. Zo maken wij veel gebruik van de plugin ACF en Yoast SEO. Hiermee kunnen wij snel beheerbare velden creëren die op pagina’s te zien zijn.
Wordpress is gebouwd met PHP, aangezien wij hier kennis van hebben kunnen wij als ontwikkelaars zorgen voor een naadloze integratie.
PHP is een van de meeste gebruikte programmeertalen wat ervoor zorgt dat er veel mensen zijn die hun kennis hebben gedeeld op het internet. Mochten wij als ontwikkelaars ergens niet uit kunnen komen, is de kans vrij groot dat het internet een oplossing biedt voor het probleem.
In het beginstadium van het project hebben wij gekozen om lokaal te gaan coderen. Dit was namelijk omdat de hosting nog niet geregeld was. Dit betekende dat we nog geen WordPress konden opzetten. Lokaal coderen bracht ons wel een aantal handige voordelen die het werkproces verbeterde. In onze lokale omgeving maakte we gebruik van NodeJS, EJS en express.
Een van de voordelen van lokaal te werk gaan is de mogelijkheid om met meerdere mensen tegelijkertijd in dezelfde bestanden te werken zonder elkaar in de weg te lopen. Dit helpt ons met het werkproces. In tegenstelling tot WordPress, waar je moet wachten tot iemand klaar is met een bestand voordat je verder kunt werken. Dit versnelt niet de ontwikkeling maar helpt ook de samenwerking en communicatie binnen het team.
Daarnaast geeft lokaal werken ons de vrijheid om fouten te maken en te experimenteren zonder echte gevolgen. Eventuele fouten kunnen snel worden hersteld voordat de code naar een live omgeving wordt verplaatst.
Door lokaal te coderen konden we een goede basis leggen voor ons project. Deze aanpak zorgde ervoor dat we goed voorbereid waren tegen de tijd dat de hosting gereed was en we de overstap konden maken naar WordPress voor verdere ontwikkeling en publicatie.
Omdat onze opdrachtgever een omgeving wilde hebben waar zij makkelijk de content konden aanpassen, hebben we de templates die we gemaakt hebben in onze lokale omgeving om moeten zetten naar PHP templates. Dit is iets waar wij binnen ons team nauwelijks mee hebben gewerkt en dus tegelijkertijd een mooi leerpunt. Het omzetten vergde wat onderzoek naar hoe de beste oplossing kon gehanteerd worden voor oplossingen die we lokaal hadden bedacht.
Een goed voorbeeld van hoe we een ontwerp moesten omzetten naar PHP is “De kaart” pagina. Hierbij wordt er een Leaflet map ingeladen en moet de klant coördinaten kunnen invullen zodat het ook beheerbaar is voor de opdrachtgever.
Als team hebben wij in het begin een aantal code principes afgesproken, dit hebben wij gedaan zodat we midden in het project geen verwarring krijgen en dat code op elkaar lijkt zo ver dat mogelijk is. Onderstaande principes hebben we voor ons uitgelegd in duidelijke termen:
Bij het schrijven van JavaScript vinden wij het belangrijk om met CamelCase te werken omdat dit een best practice is en wij dit in de opleiding vanaf het begin af aan geleerd hebben. CamelCase wordt veelal gebruikt omdat het makkelijk te onthouden is (speciale karakters kunnen nog weleens vergist worden) en makkelijk leesbaar tegelijkertijd.
Sinds dat er veel meer rekening gehouden wordt met de toegankelijkheid van een website, en de WCAG ook allerlei regeltjes heeft, vinden wij het semantisch schrijven van code punt 1 om de website toegankelijk te maken.
Om CSS en JS uit elkaar te halen en ook duidelijkere en leesbaarder code te schrijven is het in het algemeen goed om een “ - “ te gebruiken wanneer je 2 woorden als 1 CSS class wilt hebben. Een voorbeeld hiervan is (pageheader-main).
De Do not Repeat Yourself methode is een goede methode om de complexiteit van een website zo minimalistisch mogelijk te houden. Denk bijvoorbeeld aan 2 secties die dezelfde CSS kunnen gebruiken. En door een CSS class extra toe te voegen die net dat extra beetje CSS nodig heeft voor een nieuwe sectie zorg je ervoor dat componenten overal hergebruikt kunnen worden die net iets anders zijn zonder 200 extra regels CSS te hebben.
Complex code is voor iemand die het NIET zelf heeft geschreven moeilijk te gebruiken. Daarom zijn comments bij JavaScript of in sommige gevallen bij CSS nuttig om te vertellen wat er gebeurt aan een ander.
Een redelijk nieuw methode van CSS schrijven is het nesten van code zoals we dat kennen van SCSS. dit zorgt voor een duidelijke hiërarchie in de code en is dus fijner leesbaar. Helaas wordt nesting sinds kort ondersteunt en dus zullen browsers die op ouder versie lopen niet of slecht werken. Dit hebben wij later ook ondervonden.
Elkaar controleren is een belangrijk principe om zo dubbele dingen te vermijden of "slechte" code te herschrijven. Bij elk component dat af was en wij gingen samenvoegen, keek er iemand mee of alles goed was. Voorbeelden van gehanteerde code principes
In dit voorbeeld hebben we semantische html elementen en CSS classes met een - geschreven. Hiernaast is ook te zien dat we nesting gebruiken.
<section class="annual-data">
<section class="annual-item">
<div class="annual-text-container">
<h4>Jaaropgave 2023</h4>
<a aria-label="download knop" href="#">Download</a>
</div>
</section>
<section class="annual-item">
<div class="annual-text-container">
<h4>Jaaropgave 2022</h4>
<a aria-label="download knop" href="#">Download</a>
</div>
</section>
<!--- meer secties hieronder —>
</section>Op de website hanteren wij twee verschillende vormen van een pageheader. In dit voorbeeld hebben we ervoor gezorgd dat we geen dubbele code schrijven door de .section-pageheader een extra class mee te geven. Hierdoor kunnen wij 2 varianten van een pageheader maken met minimaal geschreven code.
.section-pageheader {
height: 100dvh;
display: flex;
transition: 0.5s;
}
.section-pageheader.normal {
height: inherit;
}Hier zie je dat we gebruikmaken van CamelCase. JavaScript in CamelCase schrijven zorgt ervoor dat het voor een ontwikkelaar duidelijk leesbaar en overzichtelijk is en dat ze code snel kunnen begrijpen en zien wat de variabele of functie doet.
const scrollHeader = document.querySelector("header");
const nav = document.querySelector("nav");
const menu = document.getElementById("mobile-Menu");
const menuUl = document.querySelector("#mobile-Menu ul");
const hamburger = document.querySelector(".hamburger");
const logo = document.querySelector(".logo svg");
const darkmodeLamp = document.getElementById("lamp-svgrepo-com");
const darkmodeLampLine = document.querySelector("#Group_6 #Path_79");
const inputDMLamp = document.getElementById("darkmode");
const lampMain = document.getElementById("lamp");
const labelLamp = document.querySelector("label.darkmode");Bij het ontwikkelen van de website voor stichting Kunst in C hebben we gekozen voor een combinatie van een front-end met vanilla HTML, CSS, en JavaScript en een back-end met WordPress en PHP. Door in de front-end alleen gebruik te maken van vanilla code (HTML, CSS en JS) i.p.v. frameworks hebben we veel controle over de manier waarop we code implementeren. Hierdoor bevat de website geen overbodige code, waardoor de laadtijd snel blijft. Zo kan wordpress ervoor zorgen dat de website een gebruiksvriendelijke en aanpasbare back-end heeft die makkelijk te gebruiken is, zelfs voor mensen die weinig technische kennis hebben. Als we dan kijken naar de code principes, is het hanteren hiervan een hoge prioriteit. Zo zorgen we ervoor dat wanneer andere developers met de website aan de gang gaan, er probleemloos aan de code kan worden gewerkt. Als wij ons consistent aan de principes houden, creëren we een website die technisch goed in elkaar zit en makkelijk te beheren valt voor de opdrachtgever en toekomstige ontwikkelaars.
Dankzij een gebruiksvriendelijke interface met eenvoudige designpatterns, kunnen gebruikers prettig door de site navigeren. De navigatie staat duidelijk bovenaan, de inhoud in het midden, en de footer onderaan, wat zorgt voor een overzichtelijke indeling. Door een bijpassend visueel ontwerp en technische fundamenten te combineren, hebben wij een website gecreëerd waarbij het ontwerp goed aansluit bij stichting Kunst in C en functioneel goed werkt. Het kleurenschema en de typografie zijn zorgvuldig gekozen om Stichting Kunst in C te weerspiegelen, terwijl het responsive ontwerp ervoor zorgt dat gebruikers een consistente ervaring hebben op alle apparaten.
Door onze focus op toegankelijkheid te leggen d.m.v. alt teksten bij afbeeldingen, Aria-labels voor interactieve elementen en een donkere modus toe te voegen, hebben we de bruikbaarheid van de website vergroot voor een breder publiek. De keuze voor PHP en WordPress biedt flexibiliteit voor toekomstige content aanpassingen, wat cruciaal is voor het onderhouden van een levendig platform voor kunst in Castricum. Hierbij hebben wij rekening gehouden met toekomstige ontwikkelaars, d.m.v. onze eerder genoemde code principes.
De website van Stichting Kunst in C voldoet aan de eisen en wensen van de opdrachtgever en de gebruikers om meerdere redenen:
De website biedt een plek waar bewoners en bezoekers van de gemeente Castricum alle kunstuitingen kunnen ontdekken. Dit kunnen permanente en tijdelijke kunstuitingen zijn. Dit helpt bij het informeren en betrekken van de gemeenschap bij de kunstuitingen, zoals gewenst door Stichting Kunst in C.
De site is ontworpen met een makkelijk te gebruiken user interface d.m.v. een gefixeerde navigatie, consistente lay-out en responsive design.
Het visuele ontwerp, het kleurenschema en de typografie, is zorgvuldig gekozen om de uitstraling van Stichting Kunst in C weer te geven. Dit zorgt voor herkenbaarheid, een professionele uitstraling, het verbetert de gebruiksvriendelijkheid en het zorgt ervoor dat de boodschap die Stichting Kunst in C wilt overbrengen beter naar voren komt.
Door de integratie van WordPress als CMS (Content Management System) is de website eenvoudig te beheren, zelfs door niet-technisch ingestelde beheerders. Dit sluit aan bij de wens van Stichting Kunst in C om de website makkelijk te kunnen onderhouden en toekomstbestendig te maken.
Er is aandacht besteed aan toegankelijkheid, zoals genoeg kleurcontrast, Alt teksten voor afbeeldingen en Aria-labels voor elementen. Hierdoor kunnen gebruikers met verschillende soorten beperkingen de website probleemloos gebruiken.