Een website in opdracht van de Buurtcampus Amsterdam Oost
Deze website is bedoeld voor gebruikers die een een stekje willen aanmelden bij PlantSwap Amsterdam Oost.
User story: "Als buurtbewoner wil ik een stekje kunnen toevoegen met behulp van een formulier".
Progressive Enhancement: Een ontwerpstrategie dat ontwerpers de mogelijkheid geeft om robuste code te schrijven. Deze strategie gaat uit van 3 design lagen:
Content Layer: De structuur van de pagina in HTML en in deze opdracht in NodeJS. Bedoeld om de core functionality van de website functioneel te maken. Op deze website bijvoorbeeld het formulier waarmee je een stekje kan aanmelden. Zonder CSS en Javascript werkt het formulier alsnog.
Presentation Layer: Een laag dat bedoeld is om styling toe te passen waardoor de gebruiker een prettige beleving heeft. Bijvoorbeeld de kleuren en vormen van afbeeldingen, text en knoppen.
User Experience Layer: Een laag dat bedoeld is om kleine animaties en of functies toe te voegen dat de website levendiger/speelser maakt. Bijvoorbeeld de wisselende afbeeldingen op de homepage en het in- en outsliden van de "succes-message".
Conclusie: Progressive Enhancement is bedoeld om de maker een sterke website te laten maken, die elke gebruiker, op elk apparaat en instelling kan gebruiken.
- Installeer de nieuwst versie van Node.js.
- Clone deze repository.
- Open het project in een code-editor en open de terminal.
- Voer npm install uit.
- Met npm start voor je het start script uit. Check of de port beschikbaar is. Dit project draait op 8000.
Op de homepagina kan je vinden wat het concept is van PlantSwap. Je kunt een stekje aanmelden via een formulier dat vervolgens aan de stekjeslijst wordt toegevoegd. In de stekjeslijst kun je een stekje aanklikken waarmee je naar een pagina wordt gestuurd met specifieke info over het stekje. Verder is er op de homepagina nog meer informatie over PlantSwap te vinden.
This work is licensed under GNU GPLv3.