O1. Website

Je schrijft je in via Github Classroom (login met je github account).

• 4hin1 HAR 24/25
• 4hin2 GEE 24/25
• 4vin1 HAR 24/25
• 4vin2 HAR 24/25

Je bent vrij om zelf een onderwerp voor je website te bedenken. Je docent moet het onderwerp goedkeuren. Je kunt denken aan een hobby, sport, jouw favoriete lifestyle enzovoort. Misschien is het wel mogelijk om de website te gebruiken voor een schrijfopdracht voor een ander vak.

• Je maakt deze opdracht in je eentje.
• Je krijgt van de docent startcode voor deze opdracht. Deze staat klaar in een repo op GitHub.
• Je maakt code in Gitpod.
• Elke week (liefst vaker) sla je je tussentijdse werk op in de repo op GitHub. Zo zorg je ervoor dat de laatste werkende versie van je opdracht steeds op GitHub staat.
• Deze opdracht maak je alsof het een echt project is. De stappen uit README.md in de starterscode zijn de basis van je planning. De voortgang hou je wekelijks bij in README.md. Als het niet volgens je plan gaat, dan stuur je bij. In de les kun je hulp vragen, maar uiteindelijk moet jij zorgen dat je op tijd klaar bent en een goed project oplevert.

Het cijfer dat je voor je PO krijgt wordt vanuit verschillende invalshoeken bepaald:

• minimale eisen
• uiterlijk
• techniek
• inzet en planning

Minimale eisen

Voordat je een cijfer krijgt voor je PO, wordt gekeken of je werk voldoet aan de minimale eisen. Werk dat niet voldoet aan de minimale eisen krijgt het cijfer 1,0. De minimale eisen zijn:

• De inhoud van je webshop is moreel verantwoord: het is niet beledigend, visueel gewelddadig of op andere manieren onfatsoenlijk.
• Natuurlijk mag je overleggen met klasgenoten en mag je op internet kijken hoe je bepaalde dingen kunt maken. Let wel op dat je geen plagiaat pleegt. Je mag maximaal 5 regels code overnemen van andere leerlingen of internet en je schrijft in het commentaar erbij waar je het voorbeeld vandaan hebt. Dat geldt ook voor code die je zelf vertaalt naar het Nederlands. Overtypen van code uit een Youtube-video of een tutorial van internet volgen en dat resultaat inleveren is niet toegestaan.
• Je gebruikt de startcode die je krijgt.
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.
• Een download in zip-formaat van je opdracht mag maximaal 50 MB groot zijn.

Vormgeving en inhoud Enkele punten waarop gelet kan worden bij de beoordeling van vormgeving en inhoud zijn

• De website bestaat uit minimaal 4 pagina’s.
• Uit de home-page (index.html) blijkt duidelijk wat er op je website te vinden is.
• De vormgeving ziet er aantrekkelijk uit en nodigt uit om verder te kijken op je website.
• De inhoud is compleet en informatief, de teksten heb je niet klakkeloos gekopieerd van een andere website.
• De website is goed te bekijken op gangbare browsers en computers met verschillende schermresoluties. Het is een pre als je website er op een telefoon ook goed uitziet.
• De uitlijning van de verschillende onderdelen op je website is netjes.
• Je respecteert auteursrecht, daar waar je voorbeelden of plaatjes van anderen gebruikt geef je tenminste in commentaar de bron aan.
• …

Techniek Enkele punten waarop gelet kan worden bij de beoordeling van techniek zijn

• Je laat zien dat je de in de les aangereikte technieken begrijpt en op een nette manier kan toepassen, hierbij hoort zeker het gebruik van floats om een nette layout te maken.
• Je laat zien dat je in staat bent om zelf nieuwe dingen kunt toevoegen die voortbouwen op wat je al geleerd hebt.
• Alle code (HTML / CSS / JavaScript / …) is goed leesbaar en overzichtelijk. Je springt netjes in waar dat verwacht wordt. Je gebruikt duidelijk commentaar in HTML en CSS. CSS-klassen en ID’s hebben duidelijke en begrijpelijke namen. Er is geen ongebruikte code aanwezig. Je maakt gebruik van een nette mappen structuur, met logische bestandsnamen. Ongebruikte of oude bestanden zijn verwijderd. CSS bevindt zich niet in de HTML-pagina, maar in een los CSS-bestand. Je gebruikt één CSS-bestand voor je hele website. Met commentaar geef je aan welke delen eventueel paginaspecifiek zijn. Je linkt niet naar afbeeldingen op andere websites, alle afbeeldingen die je gebruikt heb je lokaal opgeslagen. Je afbeeldingen hebben een passende resolutie, zodat ze niet blokkerig zijn (te lage resolutie) of langzaam laden (te hoge resolutie).
• …

Inzet en planning

• Je toont inzet tijdens de lessen
• De planning is vooraf gemaakt, gevolgd en als nodig bijgesteld.
• Het werk is verdeeld over de weken waarin aan de opdracht kon worden gewerkt, dit blijkt onder andere uit de commits in Github.

• De deadline voor inleveren vind je in de lesplanner.
• Je kunt vragen stellen tot de laatste les voor de deadline.
• Je zorgt dat alle bestanden in die nodig zijn om je spel te spelen in GitHub staan, dit zijn ten minste: index.html, 3 .html bestanden voor de subpagina’s en style.css. Als je plaatjes gebruikt, dan staan die er ook bij.
• Uit de versie historie in GitHub blijkt wanneer je wat gedaan hebt.
• De laatste versie van je PO die op het moment van de deadline in GitHub staat, wordt gebruikt voor de beoordeling.

1. Je hebt het onderwerp van je website gekozen en door je docent laten goedkeuren.
2. Je hebt een account aangemaakt op www.github.com .
3. Je hebt de voorbeeldwebsite van de docent gekopieerd naar je eigen github account.
4. Je hebt het onderwerp in de kop op van je homepage gezet.

Aan het einde van stap 1 heb je de voorbeeldwebsite van je docent waarin je zelf de kop hebt aangepast.

1. Je hebt bepaald wat je op de hoofdpagina en de subpagina’s (minimaal 3) wilt laten zien.
2. Je past het menu in index.html aan, zodat het de keuzes biedt voor jouw subpagina’s
3. Je maakt een html-bestand voor alle pagina’s. De titel en het menu staan erop, maar de inhoud nog niet.
4. Je hebt een werkend menu waarmee je naar de verschillende pagina’s kunt gaan, de layout kun je later nog aanpassen en mooi maken.

Aan het einde van stap 2 heb je een werkend menu met minimaal drie lege subpagina’s.

Let op: In deze stap ga je nog geen plaatjes zoeken en teksten maken, dat komt in de volgende stap.

1. Je hebt de layout van je hoofdpagina bepaald. Leg de layout vast in een wireframe. Een wireframe is een tekening waarin elke box op je pagina als een rechthoek getekend is.
2. Je hebt in html voor alle onderdelen uit de layout een tag opgenomen en aan de tags heb je classes toegevoegd.
3. Je hebt met css ervoor gezorgd dat alle onderdelen op de juiste plaats op de pagina worden weergegeven.
4. Je hebt opmaak zoals kleuren, lettertypen en kaders in css toegevoegd aan de onderdelen in je layout.

Je kunt een wireframe bijvoorbeeld als volgt maken

• op https://draw.io
• in Powerpoint
• op papier en dan fotograferen (het is dan wel lastig om het netjes te doen)

Aan het einde van stap 3 heb je een hoofdpagina met een goede indeling en opmaak. De tekst en de plaatjes zijn nog niet ingevuld, daarvoor gebruik je tijdelijk een willekeurige tekst of plaatjes zoals in de voorbeeldsite.

1. Je hebt in html de tekst op je hoofdpagina gezet.
2. Je hebt plaatjes bij je teksten gezocht, omgezet naar de juiste resolutie en op je website gezet. Alle plaatjes moet je opslaan, je linkt niet naar plaatjes op andere websites, die kunnen immers verwijderd worden.

Aan het einde van stap 4 heb je een hoofdpagina met teksten en plaatjes.

1. Je hebt een layout en opmaak voor al je subpagina’s gemaakt. Het is handig om voor al je sub-pagina’s dezelfde lay-out en opmaak te gebruiken.

Aan het einde van stap 5 heb je minimaal drie subpagina’s met een goede indeling en opmaak. De tekst en de plaatjes zijn nog niet ingevuld, daarvoor gebruik je tijdelijk een willekeurige tekst of plaatjes zoals in de voorbeeldsite.

1. Je hebt de tekst en plaatjes voor al je subpagina’s gemaakt.

Aan het einde van stap 6 heb je minimaal drie subpagina’s met teksten en plaatjes.

1. Je hebt alle elementen op je site kleuren gegeven die je mooi vindt en die duidelijk leesbaar zijn.
2. Je hebt fonts gekozen die je mooi vindt en die duidelijk leesbaar zijn.

Aan het einde van stap 8 zijn alle kleine kleuren en fonts op je website goed ingesteld.

1. Je hebt slordigheden in de lay-out, kleuren en inhoud gerepareerd.
2. Je hebt gezorgd dat je HTML en CSS goed leesbaar zijn (geen herhaling, namen van classes die aangeven wat erin zit in plaats van hoe het eruit ziet, uit logische onderdelen opgebouwd, inclusief commentaar, …)
3. Je hebt gecontroleerd of de lay-out werkt op een groter venster, een kleiner venster, een ander apparaat en andere browser.

Aan het einde van stap 8 zijn alle kleine foutjes uit je website verdwenen.

1. Je hebt een aantal extra dingen toegevoegd die je website nog mooier maken. Denk bijvoorbeeld aan animaties met CSS, een responsive design (=website heeft een andere indeling op apparaten met een kleiner scherm), een fotogalerij, visuele effecten als je met je muis ergens overheen beweegt, vernieuwingen in het ontwerp van een gebruikte voorbeeldwebsite etc.

Aan het einde van stap 9 heb je een perfecte website met één of enkele opvallende functies die je zelf hebt toegevoegd.

Kies de uitbreidingen die je leuk vindt en maak je website nog mooier

1. …