# Criteria

Je hebt de opdracht gekregen om een website te bouwen. Dit is een website over een onderwerp binnen het thema burgerschap. Je kunt hierbij denken aan:&#x20;

* Een website voor een fictief goed doel&#x20;
* Een website over duurzaamheid &#x20;
* Een website over nepnieuws&#x20;
* Een website over AI en de voor- en nadelen ervan&#x20;
* Een website over school: voor een bepaalde groep bijvoorbeeld&#x20;
* Voor een bestaand bedrijfje van familie of vrienden (na toestemming van docent)&#x20;

NB. Dingen als webshops, forums en andere interactieve website-onderdelen vallen buiten deze opdracht. Daarvoor hebben we namelijk nog te veel extra technieken nodig, zoals Javascript, databases, etc. Het is niet realistisch om dat voor je eerste website meteen te doen. We focussen dus op een representatieve website met algemene informatie over het bedrijf, zonder webshop, chatfuncties, etc., etc.&#x20;

Uitzondering: als je al ervaring hebt met websites en eventueel javascript e.d. mag je dit toevoegen. Overleg even met EV als je dat wilt.&#x20;

### Functioneel Ontwerp

Je hebt de opdracht gekregen om een website te bouwen. Dit idee denk je eerst uit in een Functioneel Ontwerp. Deze gebruik je bij het bouwen van je website.&#x20;

In je functioneel ontwerp komen de volgende onderwerpen aan bod:

* Doelen en doelgroep
* Eisen en wensen
* Structuur
* Basiselementen
* Schermontwerp

Zie de volledige [opdrachtomschrijving](https://informatica.sgdb.nl/images/klas4/websites/2526/Website%20-%20Functioneel%20ontwerp.pdf) van het functioneel ontwerp op de website voor verdere uitleg per onderwerp.

#### Aanvullende eisen

* Je site heeft een navigatiemenu met daarin minstens 4 items (dus je site bestaat uit minstens 4 pagina’s/onderdelen). Meer is ook toegestaan.&#x20;
* Verzin een passende naam voor je bedrijf en ontwerp een eigen logo. Dat mag in een tekenprogramma, maar daar zijn eenvoudige tools voor. [Deze tool is een aanrader](https://www.shopify.com/tools/logo-maker). Je hebt wel een mailadres nodig om het resultaat te downloaden. Geen zin om je mailadres weg te geven (spam/nieuwsbrieven)? Pro informatica tip: [https://temp-mail.org](https://temp-mail.org/) (wegwerp mail adres ideal voor dit soort dingen)&#x20;
* Verdere randvoorwaarden volgen straks bij de concrete websiteopdracht. Die aanvullende voorwaarden zijn technisch van aard en niet relevant voor je Functioneel ontwerp.&#x20;

**Deadline: vrijdag 23 januari 23:59**

### Je website bouwen

Begin met je eisenlijst uit je functioneel ontwerp. Probeer deze in ieder geval te implementeren. Daarna ga je naar je wensenlijst en implementeer je daarvan wat redelijkerwijs te doen is. Twijfel je, vraag het dan even aan de docent.

#### Aanvullende eisen

* Je site heeft een navigatiemenu met daarin minstens 3 items (dus je site bestaat uit minstens 3 pagina’s/onderdelen). Meer is ook toegestaan.&#x20;
* Om te laten zien dat je een aantal basis html zaken beheerst, bevat je site *in ieder geval de volgende dingen* (gebruik css om ze mooi te stylen natuurlijk):&#x20;
  * Een nette paginaindeling met gebruik van \<div> blokken, zie ook het hoofdstuk "Website layout" hierna.
  * Een lijst (ordered of unordered)&#x20;
  * Een tabel (bijvoorbeeld met een prijslijst, of openingstijden)&#x20;
  * Koppen (minstens hoofdkoppen \<h1> en subkoppen \<h2>) en paragrafen (\<p>)&#x20;
* Scheid inhoud van opmaak: gebruik html voor de inhoud en indeling, gebruik css voor de opmaak en stijl. Gebruik als het kan maar 1 css file bij de verschillende html files die je maakt. Zo staat alle opmaak op 1 plek en is het makkelijk te wijzigen.&#x20;
* Gebruik van geavanceerde technieken zoals JavaScript, jQuery, php, etc. is niet nodig. Maar als je graag wat extra’s wilt doen hiermee dan wordt dat gewaardeerd. Toepassen van dingen op je site uit een [cursus jQuery](https://www.w3schools.com/jquery/) is bijvoorbeeld een leuke extra als je je wilt verdiepen. Nogmaals dit is niet verplicht en niet nodig, maar een logische uitbreiding ter verdieping.&#x20;

**Deadline: vrijdag 13 februari 23:59**

Lever je website in via de opdracht in Magister. Download hiervoor je volledige site als .zip bestand uit Replit. Als je in VS Code, Notepad++ of een andere editor hebt gewerkt, maak dan een .zip bestand van je hele website map (vergeet niet de plaatjes e.d.!).

<div align="left"><figure><img src="https://3207859809-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FI2sZDquH16qRl517k7GD%2Fuploads%2FxE5LQadqAX48dNB9seSL%2FScreenshot%202024-12-11%20at%2015.15.34.png?alt=media&#x26;token=638982b8-6040-4571-bed4-369e2f64200f" alt="" width="375"><figcaption><p>Download als .zip bestand in Replit</p></figcaption></figure></div>

Voor het zippen van een map op je computer, zie het uitlegfilmpje van WT van het Stoplichten PO: <https://www.youtube.com/watch?v=xy-NptZyhWU>

&#x20;

<br>

<br>
