Project: Ontwerp een webpagina over een verborgen parel in Gent

Leerdoelen:

Flexbox gebruiken om een responsieve webpagina te maken.
Een ontwerp aanpassen op basis van de verzamelde content (tekst, afbeeldingen, video, kleuren).
Google Fonts en kleurthema’s integreren om het ontwerp te personaliseren.
Onderzoek doen naar een minder bekende plek in Gent en de bevindingen online presenteren.
Een korte video-impressie maken van de plek en deze integreren in de webpagina.

Projectbeschrijving:

Als leidraad voor dit project vind je hier een case study van de Boekentoren, een iconisch gebouw in Gent. Deze case study geeft een voorbeeld van hoe je onderzoek kunt doen naar een plek en die informatie kunt verwerken in een webpagina.

In dit project ga je een webpagina maken over een verborgen of minder bekende plaats in Gent. Je maakt een wandeling door de stad, kiest een interessante plek, neemt foto’s en doet onderzoek naar de geschiedenis en betekenis van deze plek. Het onderzoek kan ook op voorhand gebeuren, zodat je goed voorbereid op pad gaat. Vervolgens maak je een volledig gepersonaliseerde webpagina die gebruik maakt van Flexbox en een korte video-impressie integreert.

Je mag de structuur van de webpagina aanpassen, Google Fonts gebruiken en het kleurenschema van de pagina veranderen zodat alles mooi aansluit bij het onderwerp dat je gekozen hebt.

Stappenplan:

Stadswandeling en verborgen plekken in Gent

In Gent zijn er veel verborgen plekken die toeristen vaak niet kennen, maar die zeker de moeite waard zijn om te ontdekken. Tijdens deze opdracht maak je een wandeling door de stad, kies je een minder bekend monument, gebouw, straat of interessante plek en verzamel je content voor je webpagina. Hieronder vind je enkele "hidden gems" in Gent die je kunt overwegen om in je project te gebruiken.

Neem foto’s van deze plek vanuit verschillende hoeken. Let op de omgeving, architectuur of unieke kenmerken.
Zoek informatie op over de plek. Denk aan historische feiten, verhalen, of interessante anekdotes. Gebruik deze informatie om de tekst voor je webpagina te schrijven.
Maak een korte video-impressie van de plek. Zorg ervoor dat de video de sfeer en kenmerken van de plek goed vastlegt (30-60 seconden).

Geeraard de Duivelsteen

Het Geeraard de Duivelsteen is een middeleeuws kasteel dat stamt uit de 13e eeuw. Ooit diende het als klooster, gevangenis en seminarie. Ondanks de indrukwekkende geschiedenis is het vaak minder bekend dan het beroemde Gravensteen, maar het is zeker een bezoek waard.

Begijnhofdries (Holy Corner)

Het Begijnhofdries, ook wel bekend als de "Holy Corner," is een rustige, verborgen plek in Gent. Dit oude begijnhof biedt een ontsnapping aan de drukte van de stad en is een van de meest historische en serene plekken in Gent.

Le Bal Infernal Used Book Café

Le Bal Infernal is een uniek café in Gent waar je omringd bent door tweedehands boeken. Het biedt een ontspannen sfeer voor een pauze tijdens het verkennen van de stad, en is een perfecte plek voor boekenliefhebbers.

Kleinste gevangenis van Gent

Onder de Onthoofdingsbrug ligt de kleinste gevangenis van Gent, een ruimte die vroeger slechts twee mensen kon huisvesten. Het is een verborgen plek die alleen zichtbaar is vanaf het water.

Saint Bavo’s Abbey

De ruïnes van de Sint-Baafsabdij bevinden zich in het Coyendanspark en bieden een fascinerende blik op de religieuze geschiedenis van Gent. Het park rond de abdij is een rustige plek, perfect om te genieten van een stukje verborgen geschiedenis in de stad.

Deze verborgen juweeltjes bieden een geweldige kans om unieke en minder bekende plekken in Gent te verkennen en te presenteren op je webpagina. Neem foto's, doe onderzoek en laat de schoonheid en geschiedenis van deze plekken tot leven komen in je project.

Structuur van je webpagina:

Begin met de basis Flexbox lay-out die je eerder hebt geleerd.
Zorg ervoor dat je header, navigatie, en kolommen goed werken op verschillende schermformaten.
Voeg de verzamelde foto’s, teksten en je video toe aan je webpagina.

Hier vind je de basis Flexbox oefening

Ontwerp aanpassen aan de content:

Kies een passend Google Font voor je webpagina dat aansluit bij de sfeer van de plek die je hebt gekozen.
Pas het kleurenschema van de webpagina aan op basis van de kleuren die je tegenkomt bij de plek die je hebt gefotografeerd. Dit kan gaan om de kleuren van het gebouw, de omgeving of zelfs de sfeer die de plek uitstraalt.
Zorg ervoor dat het kleurcontrast goed is en dat de webpagina leesbaar blijft op verschillende apparaten.

Technische vereisten:

Gebruik Flexbox om de lay-out te maken, waarbij de foto’s, teksten en video op een gestructureerde manier worden weergegeven.
Zorg dat de pagina responsive is en goed werkt op mobiele apparaten.
Integreer Google Fonts in je CSS en pas deze toe op de kopteksten en paragrafen.
Integreer je video correct op de webpagina, zodat deze goed afspeelt op alle apparaten.

Filmopdracht: Korte video-impressie van de plek:

Maak een video van 30-60 seconden die de sfeer en unieke kenmerken van de plek weergeeft.
Gebruik Adobe Premiere voor het bewerken van de video, knip de beste shots en voeg muziek en titels toe.
Gebruik After Effects om eventuele eenvoudige animaties of motion graphics toe te voegen aan de video.
De video moet minimaal drie verschillende scènes bevatten en verschillende camerahoeken laten zien.
Let op cameravoering, compositie en geluid om de sfeer van de plek zo goed mogelijk vast te leggen.

Publicatie en presentatie:

Publiceer de webpagina op GitHub Pages of een andere host en deel de link met de leerkracht.
Bereid een korte presentatie voor waarin je vertelt waarom je de gekozen plek hebt gekozen, welke ontwerpbeslissingen je hebt gemaakt en hoe de content je lay-out heeft beïnvloed. Vertel ook hoe je de video hebt samengesteld en wat je hiermee wilde uitbeelden.

Tips voor het ontwerp:

Google Fonts: Ga naar Google Fonts en zoek een lettertype dat past bij de sfeer van je plek.
Kleuren: Gebruik een tool zoals Coolors om een kleurenschema te genereren dat past bij de kleuren van de plek die je hebt gefotografeerd.
Layout: Houd je lay-out eenvoudig en overzichtelijk. Flexbox helpt je om de foto’s, teksten en video mooi uit te lijnen.
Concept of moodboard: Overweeg om een concept of moodboard te maken voordat je begint met het bouwen van de definitieve webpagina. Dit helpt je om je ideeën visueel te plannen en zorgt ervoor dat je ontwerp aansluit bij de sfeer van de gekozen plek. Gebruik afbeeldingen, kleuren, en fonts die je gaat toepassen in je ontwerp om een samenhangend geheel te creëren.

Oplevering:

Lever je webpagina in als een link naar de gepubliceerde versie, samen met een korte beschrijving van de plek die je hebt gekozen en je ontwerpkeuzes. Zorg ervoor dat je GitHub-repository of bestanden up-to-date zijn.