O1. Website

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

• hier intekenen voor 4H
• hier intekenen voor 4V

GitHub is een online platform waar je code kunt opslaan, delen en samen aan projecten kunt werken. Een soort “Google Drive voor programmeercode”. Via GitHub Classroom krijg je van je docent een link naar een opdracht. Die opent een eigen map (repository) waarin je kunt werken. Met GitHub Codespaces kun je die map rechtstreeks in je browser openen zonder iets te installeren, je kunt er meteen programmeren, uitvoeren en testen.

Belangrijk: Bij het inloggen moet je een username aanmaken, zorg dat minimaal je voornaam hier herkenbaar in voor komt.

Let op: Je werk wordt niet automatisch opgeslagen op GitHub. Je moet committen en syncen om je werk op te slaan en naar GitHub te uploaden. Doe dit regelmatig, vooral voordat je Codespaces afsluit, zodat je niets kwijtraakt.

In deze fase maak je het plan voor je eigen website. Je mag zelf kiezen over welk onderwerp je werkt, iets wat jij interessant vindt, maar het onderwerp moet wel eerst goedgekeurd worden door de docent. Denk dus goed na over wat je wilt doen en zorg dat het haalbaar is. Je werkt aan een informatieve website. Denk dus zeker na of alles wat je wilt maken wel kan. Je kan geen spel/interactieve dingen in je website krijgen. Denk aan wat je vorige periode hebt geleerd en hoe je dit nu kan toepassen.

Je dient de ontwerpfase twee keer in als PDF door het bestand toe te voegen aan je GitHub-mapje “Ontwerpfase”: de eerste versie op de vrijdag na de herfstvakantie, en de tweede bij het einde van het PO, zijn deze te laat ingeleverd krijg je cijfer aftrek. Verwijder de eerste versie niet wanneer je de tweede uploadt, ook hier volgt cijfer aftrek. Hoe beter je tweede ontwerp overeenkomt met je uiteindelijke website én hoe meer gelijkend je eerste ontwerp is met de tweede versie, hoe hoger je score zal zijn. Maak dus vanaf het begin een realistisch en goed doordacht plan.

Werk aan het document in een editor naar keuze. Enkele voorbeelden zijn Google Docs, Pages of Microsoft Word. Let op: als je de IMac’s op school afsluit worden alle lokale bestanden verwijderd. Werk dus bijvoorbeeld via Google Drive, of mail je bestand op het einde van de les naar jezelf op Magister.

Het document bevat vier onderdelen. Eerst beschrijf je je onderwerp en wat je erover wilt vertellen. Schrijf dit in duidelijke zinnen of korte opsommingen. Vermeld ook hoe je die informatie wilt verdelen over de verschillende pagina’s van je website.

Daarna maak je een sitemap. Dat is een schema dat toont hoe de verschillende pagina’s van je website met elkaar verbonden zijn. Het geeft een overzicht van de structuur van je site en helpt je nadenken over de navigatie. Online vind je veel voorbeelden. Een handige app om hieraan te werken is draw.io . Als je klaar bent kan je je diagram opslaan als een .png bestand en die invoegen in je ontwerpfase.

Vervolgens voeg je een kleurenstaal toe. Gebruik hiervoor de [Figma Color Palette Generator]( https://www.figma.com/color-palette-generator/ om een kleurenpalet te maken dat past bij jouw onderwerp. Noteer bij elke kleur de juiste HEX-waarde en bewaar die goed, zodat je dezelfde kleuren later in de echte website kunt gebruiken.

Tot slot maak je één of meerdere wireframes online of op papier. Dat zijn schetsen van hoe je webpagina’s eruit zullen zien. Je geeft aan waar tekst, afbeeldingen, knoppen en menu’s komen. Begin met één goed uitgewerkte wireframe, bijvoorbeeld van je homepage. Online vind je veel voorbeelden. Als je tijd hebt, maak er dan meerdere, zodat ook andere pagina’s al een duidelijk ontwerp hebben. Maak deze ontwerpen erg algemeen, zodat verschillende pagina’s dezelfde lay-out/wireframe kunnen krijgen.

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

• Minimale eisen (pass/fail)
• Ontwerpfase
• Code structuur
• Visueel resultaat
• 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.
• Je gebruikt de startcode die je krijgt.
• Je maakt minimaal 1 hoofdpagina en 3 subpagina’s (meer mag).
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.
• Je mag AI gebruiken om vragen te stellen en uitleg te krijgen, maar je mag geen code overnemen. Je moet alles zelf kunnen uitleggen en binnen een korte tijd kunnen aanpassen, anders krijg je een 1.

Ontwerpfase Enkele punten waarop gelet kan worden bij de beoordeling van de ontwerpfase zijn

• Inhoud is logisch verdeeld over verschillende pagina’s
• Er is een sitemap aanwezig waar duidelijk wordt hoe pagina’s naar elkaar linken
• Er is een passend en mooi kleurenstaal toegevoegd
• Er zijn 1-3 wireframes uitgewerkt over hoe de lay-out van verschillende pagina’s eruit moet zien

Code structuur Enkele punten waarop gelet kan worden bij de beoordeling van de code structuur zijn

• De homepage is te vinden op index.html
• De bestandenstructuur is logisch en duidelijk. Elk bestand heeft een logische naam.
• Indentatie en commentaar toegevoegd waar nodig
• CSS-klassen en ID’s hebben duidelijke en begrijpelijke namen
• Er zijn geen ongebruikte code of ongebruikte bestanden aanwezig
• 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).
• CSS bevindt zich niet in de HTML-pagina, maar in een los CSS-bestand. Je gebruikt één CSS-bestand voor je hele website.

Visueel Resultaat Enkele punten waarop gelet kan worden bij de beoordeling van visueel resultaat zijn

• 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.
• Je hebt 1-3 verschillende pagina lay-outs over je website. Hoe meer verschillende (goede/correcte/logische) layouts hoe beter je score.
• Je navigatie op je site werkt naar behoren en volgt je sitemap uit de ontwerpfase
• Je gebruikt moeilijkere elementen op een correcte en logische manier op je webpagina zoals: een tabel, span, div, padding, border, maging, float en clear

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 website correct te laten werken 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. Verder staan in het mapje ontwerpfase zowel ontwerpfase versie 1 als versie 2.
• Uit de versiegeschiedenis 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. Inhoud per pagina verdeeld
3. Sitemap toegevoegd (structuur/navigatie duidelijk)
4. Kleurenstaal met HEX-codes toegevoegd
5. 1-3 wireframes gemaakt en toegevoegd
6. Ontwerpfase_v1.pdf ingeleverd op Github in mapje Ontwerpfase

1. Je hebt een account aangemaakt op www.github.com .
2. Je hebt de code van de voorbeeldwebsite en kunt deze aanpassen.
3. Je kan je wijzigen aan de site commiten en synchen, zodat je werk niet verloren gaat.
4. Je begrijpt dat we nu met verschillende HTML bestanden werken, elk voor een eigen pagina. Je kan zelf nieuwe bestanden toevoegen en deze aan de hoofdpagina linken.
5. Je ziet style.css en ziet dat hierin alle CSS gaat voor alle pagina’s.

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.

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. Duidelijke alt-teksten en bestandsnamen voor elke afbeelding.

1. Je hebt met CSS ervoor gezorgd dat alle onderdelen op de juiste plaats op de pagina worden weergegeven, zoals je vast hebt gelegd in de ontwerpfase.
2. Je hebt opmaak zoals kleuren, lettertypen en kaders in css toegevoegd aan de onderdelen in je layout.

1. Je hebt in html de tekst op je subpagina’s 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. Duidelijke alt-teksten en bestandsnamen voor elke afbeelding.
3. Je hebt ervoor gezorgd dat je subpagina’s goed bereikbaar zijn, en vanuit de subpagina de hoofdpagina terug bereikbaar is.

1. Je hebt met CSS ervoor gezorgd dat alle onderdelen op de juiste plaats op de pagina worden weergegeven, zoals je vast hebt gelegd in de ontwerpfase.
2. Je hebt opmaak zoals kleuren, lettertypen en kaders in css toegevoegd aan de onderdelen in je layout.
3. Je probeert een andere lay-out te creëeren voor subpagina’s (1-3 verschillende lay-outs op je website).

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.
4. Namen van bestanden/klassen zijn duidelijk en consequent
5. Geen ongebruikte bestanden of code
6. Indentatie en commentaar waar nodig
7. Ontwerpfase_v2.pdf ingeleverd op Github in mapje Ontwerpfase

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.
2. Eigen voorstellen worden overwogen. Aan het einde van stap 9 heb je een perfecte website met één of enkele opvallende functies die je zelf hebt toegevoegd.