4 havo

Hier vind je de lesplanner, geplande toetsen en inlevermomenten voor 4 havo.

Lesplanner

Het is vandaag .

Toetsen en inlevermomenten

Advies voor inleveren van Praktische Opdrachten: Lever een bijna af concept in vóór de laatste les voor de deadline, als er dan iets misgaat dan kun je nog een vraag stellen in de laatste les!

5 havo

Hier vind je de lesplanner, geplande toetsen en inlevermomenten voor 5 havo.

Lesplanner

Het is vandaag .

Toetsen en inlevermomenten

Advies voor inleveren van Praktische Opdrachten: Lever een bijna af concept in vóór de laatste les voor de deadline, als er dan iets misgaat dan kun je nog een vraag stellen in de laatste les!

4 vwo

Hier vind je de lesplanner, geplande toetsen en inlevermomenten voor 4 vwo.

Lesplanner

Het is vandaag .

Toetsen en inlevermomenten

Advies voor inleveren van Praktische Opdrachten: Lever een bijna af concept in vóór de laatste les voor de deadline, als er dan iets misgaat dan kun je nog een vraag stellen in de laatste les!

5 vwo

Hier vind je de lesplanner, geplande toetsen en inlevermomenten voor 5 vwo.

Lesplanner

Het is vandaag .

Toetsen en inlevermomenten

Advies voor inleveren van Praktische Opdrachten: Lever een bijna af concept in vóór de laatste les voor de deadline, als er dan iets misgaat dan kun je nog een vraag stellen in de laatste les!

6 vwo

Hier vind je de lesplanner, geplande toetsen en inlevermomenten voor 6 vwo.

Lesplanner

Toetsen en inlevermomenten

Advies voor inleveren van Praktische Opdrachten: Lever een bijna af concept in vóór de laatste les voor de deadline, als er dan iets misgaat dan kun je nog een vraag stellen in de laatste les!

4hv inhaalprogramma

Hier vind je een planning voor leerlingen die tijdens het vierde jaar willen overstappen naar informatica.

Overstappen naar informatica

We vinden het hartstikke leuk dat je voor informatica kiest. Als je tijdens de eerste helft van de vierde klas spijt hebt van je vakkenpakketkeuze en toch graag informatica wilt, dan kan dat heel vaak geregeld worden. Je moet er wel rekening mee houden dat je alle gemiste stof moet inhalen, dat vraagt behoorlijk wat zelfstandigheid.

Om je overstap succesvol te laten zijn helpen we je op de volgende manier:

• Tijdens het emc kunnen we je vragen beantwoorden en moeilijke stukjes nog eens uitleggen.
• Al het lesmateriaal vind je online. Voor T2 (informatica actief) heb je een code nodig die je van de docent krijgt. Voor de website heb je voorbeeldcode nodig die je van de docent krijgt.
• Bijna alle uitleg is op video te bekijken.

Om je overstap succesvol te laten zijn stellen we de volgende regels. Deze gelden tot het moment dat je je achterstand hebt ingehaald:

• Bij een dubbel rooster krijgen je informaticalessen voorrang.
• Je komt ten minste één emc-uur per week voor informatica.
• In de lessen doe je mee met de nieuwe stof, inhalen doe je thuis en tijdens emc.
• Reken op ongeveer 4 klokuur inhaalwerk per gemiste lesweek, een deel daarvan kun je in een vakantie doen.

Planning als je overstapt voor de herfstvakantie

Zorg dat je vóór de herfstvakantie in Magister bent ingedeeld bij een informatica lesgroep.

Geschatte hoeveelheid inhaalwerk: 30 klokuren

• Herfstvakantie: T1 Webdesign inhalen (20 uur)
• Tussen herfstvakantie en TW1: deel T2 Informatie inhalen (5 uur)
• Tussen TW1 en kerstvakantie: deel O1 Webdesign inhalen (5 uur)

Toetsen en inlevermomenten

• Alle toetsen en inlevermomenten zijn gelijk aan die van de andere 4h en 4v leerlingen.

Planning als je overstapt voor de kerstvakantie

Zorg dat je vóór de kerstvakantie in Magister bent ingedeeld bij een informatica lesgroep.

Geschatte hoeveelheid inhaalwerk: 60 klokuren

• Kerstvakantie: T1 Webdesign inhalen (20 uur)
• Lesweken tussen kerstvakantie en voorjaarsvakantie: T2 Informatie inhalen (15 uur)
• Lesweken tussen kerstvakantie en voorjaarsvakantie plus de voorjaarsvakantie: O1 Webdesign inhalen (10 uur in de weken voor de voorjaarsvakantie, 15 uur tijdens de voorjaarsvakantie)

Toetsen en inlevermomenten

• TW1: de lesstof moet geleerd worden, omdat die nodig is voor de rest van de vierde klas. De toets zelf wordt pas afgenomen op het eerstvolgende moment dat die gegeven wordt.De leerling regelt dit in de vijfde klas via de informaticadocent. Indien de toets samen valt met een andere toets, dan krijgt de informaticatoets voorrang en regelt de leerling via de coördinator een inhaalmoment voor de andere toets.
  Je maakt deze toets dus pas in TW1 van de vijfde klas.
• TW2: reguliere moment
• PO website: 1 week voor start van toetsweek 2 (na de voorjaarvakantie).

T1. Web Design met HTML en CSS

Je leert hoe je informatie op een website zet met de programmeertalen HTML en CSS.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Khan Academy

Oefeningen

Khanacademy, module Intro to HTML/CSS

1. Intro to html
2. Intro to css
3. More html tags
4. Css text properties
5. Web development tools (geen toetsstof)
6. CSS layout
7. More css selectors
8. Other ways to embed css (geen toetsstof)
9. Further learning (geen toetsstof)

Naslagmateriaal

• Lespresentatie havo
• Lespresentatie vwo

Uitleg (havo)

Uitleg (vwo)

Leerdoelen voor de toets

HTML

1. Je kunt uitleggen wat een URL is en waarvoor een webbrowser deze gebruikt en je kent de volgende vier onderdelen van een URL: protocol, server, map, bestand
2. Je kent het principe van tags zoals die in HTML gebruikt worden.
3. Je kent de basisstructuur van een HTML-pagina.
4. Je weet wat de begrippen parent, child en sibling betekenen en kunt de betekenis van deze begrippen toelichten. Je kunt deze begrippen toepassen op HTML.
5. Je kent de volgende tags: <html>, <head>, <body>, <p>, <ol>, <ul>, <li>, <h1> t/m <h6>, <br/>, <img> met src en alt, <a> met href, <div>, <table>, <tr>, <th>, <td>. Je kunt uitleggen wat deze tags doen en hoe je kunt ze gebruiken.
6. Je kunt eenvoudige stukken HTML interpreteren, dat wil zeggen dat je kunt uitleggen hoe een webbrowser omgaat met een eenvoudig stuk HTML.
7. Je kunt wijzigingen aanbrengen in een eenvoudig stuk HTML, de syntax van de HTML tags die daarvoor nodig zijn wordt daarbij gegeven in de vraag.

CSS

1. Je kunt uitleggen wat er binnen de informatica met Separation of Concern wordt bedoeld en hoe dat op HTML en CSS van toepassing is.
2. Je kunt uitleggen wat selectors, properties en values in CSS zijn en je kunt ermee werken. Dat wil zeggen dat je eenvoudige stukken CSS met selectors, properties en values kunt maken en de werking ervan kunt uitleggen.
3. Je kunt CSS selectors maken die bestaan uit een tag, class of id of een combinatie daarvan.
4. Je kunt de voorrangsregels tussen tags, classes en id’s toepassen en je kunt daarbij aangeven welke selectors meer of minder specifiek zijn.
5. Je kent van de volgende properties de betekenis en kunt deze toepassen in CSS: font-size, width, height, color, background-color.
6. Je kunt werken met kleuren en doorzichtigheid in CSS, door gebruik te maken van kleurnamen en rgba().
7. Je kunt de werking van boxen in CSS toelichten. Je kunt daarbij uitleggen wat de content, padding, border en margin van een box zijn.
8. Je kunt eenvoudige stukken CSS interpreteren, dat wil zeggen dat je kunt uitleggen hoe een webbrowser omgaat met een eenvoudig stuk CSS en hoe het eruit ziet in een webbrowser.
9. Je kunt wijzigingen aanbrengen in een eenvoudig stuk CSS, de properties die daarvoor nodig zijn worden beschreven in de vraag.

Oefentoets

Een oefentoets voor deze module staat in Woots .

Verdieping

1. CSS Battle ( https://cssbattle.dev/) .

T2. Digitale informatie

Je leert hoe een computer allerlei soorten informatie opslaat.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Informatica Actief

Oefeningen

Informatica Actief, module informatie digitaal

1. Digitale afbeeldingen, pixels met kleur (alleen theorie 1 t/m 7)
2. Bits en Bytes (alleen theorie 1 t/m 5)
3. Talstelsels: decimale en binaire getallen (alleen theorie 1 t/m 9)
4. Rekenen met binaire getallen (overslaan)
5. Digitale tekst (alleen theorie 1 t/m 9)
6. Verschillende soorten afbeeldingen (alleen theorie 1 t/m 12)
7. Bewegend beeld en geluid (alleen theorie 1 t/m 7)
8. Digitale informatie in bestanden (alleen theorie 1 t/m 5)
9. Diagnostische toets (overslaan)

Beeldbewerking

1. Beeldbewerking oefeningen (powerpoint presentatie) met photopea.com

Uitleg (havo)

Uitleg (vwo)

Naslagmateriaal

• Lespresentatie informatie (havo)
• Collegesheets informatie (vwo) (heel dik)

Leerdoelen voor de toets

Informatie digitaal

1. Je kunt binaire getallen omzetten naar decimale getallen en andersom.
2. Je kunt binaire getallen omzetten naar hexadecimale getallen en andersom.
3. Je kunt decimale getallen omzetten naar hexadecimale getallen en andersom.
4. Je kunt uitrekenen uit hoeveel bits of bytes een kilobyte, megabyte, gigabyte of terabyte bestaat.
5. Je kunt uitleggen waarin de klassieke maten van kilo-, mega-, gigabyte etc. afwijken van de SI-maten.
6. Je weet wat het verschil is tussen ASCII en Unicode en kunt uitleggen hoe ze tekst digitaliseren.
7. Je kunt uitleggen hoe het RGB-kleurenmodel en het CMYK-kleurmodel werken, je kunt de verschillen tussen beide kleurmodellen benoemen en je kunt de modellen gebruiken om kleuren te maken en kleuren te veranderen.
8. Je kent de betekenis van het begrip resolutie
9. Je kunt uitleggen hoe plaatjes worden opgeslagen door een computer
10. Je kent verschillende bestandsformaten voor plaatjes, zoals bmp, gif, jpg en png en de eigenschappen waarin ze van elkaar verschillen
11. Je kunt aangeven welk bestandsformaat voor plaatjes het best geschikt is voor een beschreven situatie
12. Je kunt uitleggen hoe muziek wordt opgeslagen door een computer
13. Je kunt uitleggen hoe video wordt opgeslagen door een computer
14. Je kunt uitleggen wat een extensie is en waar deze voor dient
15. Je kunt uitleggen wat compressie is aan de hand van voorbeelden (tekst, geluid, plaatjes en video) en je kent het verschil tussen lossless en niet-lossless compressie.
16. Alleen vwo: Je kunt op basis van een beschrijving van een compressie algoritme een klein voorbeeld comprimeren en decomprimeren.

Beeldbewerking (deze leerdoelen gelden NIET voor schooljaar 23/24)

1. Je kunt het aantal pixels van een plaatje aanpassen
2. Je kunt een plaatje bijsnijden (Engels: crop)
3. Je kunt een plaatje in diverse bestand-formaten omzetten (bijvoorbeeld .jpg, .png, .gif)
4. Je kunt basisinstellingen van de kleuren in een plaatje aanpassen (bijvoorbeeld contrast)
5. Je kunt de achtergrond van een plaatje transparant maken, een vast kleur maken, vervangen door een ander plaatje.
6. Je begrijpt wat je kunt doen met lagen en je kunt dat uitleggen aan de hand van een gegeven situatie.

Oefentoets

Een oefentoets voor deze module staat in Woots .

T3. Programmeren met Javascript

Je leert hoe je eenvoudige programma’s kunt maken met de programmeertaal Javascript en de p5js library.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Khan Academy

Oefeningen

Khanacademy, module Intro to JS

1. Intro to programming
2. Drawing basics
3. Coloring
4. Variables
5. Animation basics
6. Interactive programs
7. Becoming a community coder (overslaan)
8. Bonus: Resizing with variables
9. Text and strings
10. Functions (lang)
11. Logic and if Statements (lang)
12. Debugging programs (kort)
13. Looping (lang)
14. Writing clean code (kort)
15. Arrays (lang)
16. Objects (overslaan)
17. Object-Oriented Design (overslaan)
18. Becoming a better programmer (overslaan)

Verdiepingsopdrachten

1. My Pong Game voor als je oefeningen 1 t/m 11 af hebt
2. My Galaxy voor als je oefeningen 1 t/m 15 af hebt

Uitleg

Naslagmateriaal

• Lespresentatie programmeren (havo)
• Collegesheets programmeren (vwo) (heel dik)

Leerdoelen voor de toets

Programmeertalen

1. Je kunt uitleggen wat machinetaal is.
2. Je kunt uitleggen wat een compiler is.
3. Je kunt uitleggen wat een library is.
4. Je kunt drie hogere programmeertalen opnoemen.
5. Je kunt uitleggen wat er binnen de informatica bedoeld wordt met het begrip grammatica.
6. Je kunt uitleggen wat een variabele is.
7. Je kunt uitleggen wat declareren en definiëren van een variabele is.
8. Je kunt uitleggen wat een datatype is
9. Je kent de datatypen boolean, number en string en begrijpt welke waarden erin opgeslagen worden
10. Je kunt uitleggen wat controlestructuren zijn en je kent de volgende voorbeelden: if-statement, for-loop, while-loop.
11. Je kunt uitleggen waar abstractie voor dient.
12. Je kunt uitleggen wat een functie is.
13. Je kunt uitleggen wat declareren, definiëren en aanroepen van een functie is.
14. Je kunt uitleggen wat een parameter van een functie is.
15. Je kunt uitleggen wat het resultaat van een functie is.
16. Je kunt uitleggen wat het verschil is tussen globale en lokale variabelen.
17. Je kunt de leesbaarheid van code verbeteren door gebruik te maken van commentaar, lay-out en structuur.

Javascript

1. je kunt commentaarregels gebruiken.
2. je kunt aangeven welke waarden bepaalde variabelen hebben aan het einde van een stukje computercode.
3. je kunt op basis van een stukje code zelf de bijbehorende schermuitvoer tekenen.
4. je kunt met behulp van naslagmateriaal zelf computercode schrijven om een vraag te beantwoorden.
5. je weet hoe je in een tekening animatie aanbrengt.
6. je begrijpt wat variabelen zijn en hoe je deze kunt gebruiken.
7. je begrijpt wat een logische expressie is en hoe je deze kunt gebruiken.
8. je begrijpt hoe de logische operatoren “en”, “of” en “niet” werken en je kunt deze gebruiken.
9. je begrijpt hoe de vergelijkingsoperatoren “groter dan”, “kleiner dan”, “groter-gelijk dan”, “kleiner-gelijk dan”, “gelijk aan” en “ongelijk aan” werken en je kunt deze gebruiken.
10. je weet wat de datatypen boolean, number en string zijn en kunt deze gebruiken.
11. je begrijpt hoe een if-statement werkt en hoe je deze kunt gebruiken.
12. je begrijpt hoe een while-loop en een for-loop werken en hoe je deze kunt gebruiken.
13. je kunt een while-loop omzetten naar een for-loop en andersom.
14. je begrijpt hoe een for-loop in een for-loop werkt en hoe je dit kunt gebruiken.
15. je begrijpt wat arrays zijn en hoe je deze kunt gebruiken.
16. je kunt een array doorlopen met een for-loop.
17. Alleen vwo: je kunt een twee-dimensionale array doorlopen met een for-loop in een for-loop
18. je begrijpt hoe een functie werkt en hoe je deze kunt gebruiken.
19. je begrijpt wat parameters van een functie zijn en hoe je deze gebruikt.
20. je begrijpt wat het resultaat van een functie is en hoe je dit gebruikt.
21. je begrijpt wat er op het syntaxblad Javascript staat en dit kunt toelichten en gebruiken.

Oefentoets

Een oefentoets voor deze module staat in Woots .

T4. Algoritmen in Javascript

Je leert hoe je problemen kunt oplossen met algoritmen, je gebruikt daarbij stroomdiagrammen en de programmeertaal Javascript.

Hulpmiddelen

We gebruiken in deze module enkele online hulpmiddelen voor het tekenen van schema’s en het maken van oefeningen.

Oefeningen

Eenvoudige algoritmen

1. Stroomdiagrammen lespresentatie, met codevoorbeelden in replit (wordt misschien herzien)
2. Programmeeropdrachten in Github (tevens beschikbaar in Woots )

Uitleg

Leerdoelen voor de toets

Eenvoudige algoritmen

1. je kunt uitleggen wat een algoritme is
2. je kunt uitleggen wat een flowchart is en waarvoor je deze gebruikt
3. je kunt flowcharts lezen, dat betekent dat je de output van een flowchart kunt bepalen als de input en de flowchart gegeven worden
4. je kunt een flowchart maken van een eenvoudig algoritme waarvan je een korte beschrijving en een voorbeeld van de input en de output krijgt. Een eenvoudig algoritme is een algoritme waarbij een rij wordt doorlopen, zoals bijvoorbeeld: zoek het grootste getal in een rij, bereken het gemiddelde van alle getallen in een rij, tel het aantal keer dat een bepaalde letter voorkomt in een tekst.
5. je kunt een flowcharts omzetten naar JavaScript code en JavaScript code kunnen omzetten naar een flowchart.

Oefentoets

Een oefentoets voor deze module staat in Woots .

T5. Databases met SQL

Je leert hoe je heel veel informatie kunt bekijken en bewaren in databases met de programmeertaal SQL.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Khan Academy

Oefeningen

Khanacademy, module Intro to SQL

1. SQL basics
2. More advanced SQL queries
3. Relational queries in SQL (lang)
4. Modifying databases with SQL
5. Further learning in SQL (overslaan)

Ruimtedatabase (alleen vwo)

1. Opgaven met antwoorden in Woots
2. Uitlegvideo’s met antwoorden

Uitleg

Naslagmateriaal

• Lespresentatie (vwo)
• Lespresentatie (havo)
• Syntaxblad SQL (krijg je ook bij de toets)

Leerdoelen voor de toets

Databases theorie

1. Je kunt uitleggen wat een relationele database is.
2. alleen vwo: Je kunt gegevens analyseren en structureren en relaties vastleggen in een multipliciteitsdiagram.
3. alleen vwo: Je kunt gegevens analyseren en structureren en vastleggen in een strokendiagram.
4. Je kunt een database voorzien van een voorbeeldpopulatie (dit betekent dat je gegevens in velden kunt invullen).
5. Je kunt het verschil tussen en 1:n, n:1 en n:m relatie uitleggen en je kunt in een gegeven voorbeeld aangeven van welke relatie sprake is.
6. Je kunt uitleggen wat redundantie is.
7. Je kunt uitleggen wat normaliseren is.
8. Je kunt een gegeven, niet volledig genormaliseerde database omzetten naar een database in de 3e normaalvorm (dit betekent dat je de redundante informatie kunt verwijderen door de database te splitsen in meerdere aan elkaar gerelateerde tabellen).
9. Je kunt voor een gegeven situatie een voorstel te doen voor een genormaliseerde database structuur.
10. Je kunt aangegeven welke (combinaties van) velden uniek zijn / als sleutel kunnen dienen.
11. Je weet waarvoor de primaire sleutel dient.
12. Je weet wat een verwijzende sleutel is.
13. Je weet hoe verwijzingen tussen verschillende tabellen met behulp van sleutels werken.
14. Je weet hoe in een database wordt aangegeven dat een veld geen waarde bevat.

Databases programmeren in khan:

1. Je kunt met CREATE TABLE een gegevensmodel omzetten in een database.
2. Je kunt met INSERT rijen aan een tabel toevoegen.
3. alleen vwo: Je kunt met DELETE rijen verwijderen uit een tabel.
4. Je kunt met SELECT gegevens uit een relationele database opvragen.
5. Je kunt de opgevraagde gegevens uit een relationele database oplopend en aflopend sorteren.
6. Je kunt voorwaarden stellen aan de op te vragen gegevens uit de database (WHERE) en gebruikmaken van operatoren (=, <, >, >=, <=, <>).
7. Je kunt gebruikmaken van LIKE bij het stellen van voorwaarden in de query.
8. alleen vwo: Je kunt gebruik maken van een subquery in combinatie met de voorwaarde IN.
9. Je kunt gebruikmaken van samengestelde voorwaarden (AND, OR) bij het stellen van voorwaarden in de query.
10. Je kunt gebruikmaken van omgedraaide voorwaarden (NOT) bij het stellen van voorwaarden in de query.
11. Je kunt gebruikmaken van NULL bij het stellen van voorwaarden in de query.
12. Je kunt gebruikmaken van aggregatiefuncties (COUNT, SUM, MAX, MIN, AVG) bij het opstellen van query.
13. Je kunt gebruikmaken van GROUP BY bij het groeperen van de resultaten van een query.
14. Je kunt voorwaarden stellen aan op te vragen gegroepeerde gegevens met HAVING
15. alleen havo: Je kunt bij een query over 2 of 3 tabellen de JOIN toepassen
16. alleen vwo: Je kunt bij een query over 2 of meer tabellen de JOIN toepassen
17. Je kunt een query maken met JOIN van een 1-op-n relatie
18. Je kunt een query maken met JOIN van een n-op-m relatie
19. alleen vwo: Je kent het verschil tussen cross join (JOIN zonder ON), inner join (JOIN ON), left outer join (LEFT JOIN ON) en kunt beslissen welke van deze drie je nodig hebt in een query.

Oefentoets

Een oefentoets voor deze module staat in Woots .

T6. Robotica met Arduino

Je leert hoe je met behulp van toestandsgrammen kunt programmeren. Je gebruikt daarbij het Arduino platform.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Arduino IDE

Oefeningen

Arduino-lessen.nl, les 1 t/m 5

1. Knipperende LED
2. Knipperend LED op breadboard
3. Fadende LED op breadboard met PWM
4. Knippersnelheid regelen met potmeter
5. LED schakelen met drukknop
6. Afstand meten met ultrasoon sensor (geen toetsstof)

Zonder arduino-lessen.nl

7. Grove I2C LCD met tekst en symbolen, zie uitlegvideo op deze pagina met libary “Grove-LCD RGB Backlight” (geen toetsstof)
8. Passive speaker voor muziek, zie uitleg op https://docs.arduino.cc/built-in-examples/digital/toneMultiple (geen toetsstof)

Meer lessen Arduino-lessen (geen toetsstof)

Presentaties

1. Lespresentatie toestandsdiagrammen
2. Lespresentatie Arduino basics

Uitleg

Naslagwerken

1. Microcontroller reader (alleen de paragrafen 1.1, 2.1 t/m 2.9, 3.2, 4.1 t/m 4.3, 5.1 t/m 5.6 en 6.4)

Leerdoelen voor de toets

Arduino

1. Je kunt uitleggen wat een microcontroller is.
2. Je weet wat de setup() en loop() functies in een Arduino sketch zijn.
3. Je weet hoe je digitale en analoge poorten aanstuurt of uitleest
4. Je weet hoe je delay() gebruikt en wat de voor- en nadelen van deze functie zijn.
5. Je begrijpt wat de functie millis() doet.
6. Je kunt de functie millis() gebruiken als vervanging van delay().
7. Je weet hoe je een PWM signaal kunt creëren
8. Je kunt uitleggen wat een PWM signaal is en kunt daarbij de term duty cycle correct gebruiken en uitleggen
9. Je weet hoe een breadboard werkt
10. Je weet hoe je een variabele weerstand aansluit op een analoge poort van Arduino
11. Je weet hoe je een LED aansluit op een digitale poort van Arduino
12. Je weet hoe je een knop aansluit op een digitale input poort van Arduino
13. Je weet wat het verschil is tussen een sensor en een actuator.
14. Je kunt een aansluitschema maken van een systeem dat beschreven is in een stuk tekst. Het aansluitschema bevat een Arduino, actuatoren en sensoren.
15. Je kent de volgende datatypen: string, int, float
16. Je kunt Arduino code aanpassen om tot een gevraagde oplossing te komen.
17. Je kunt korte programma’s maken die een knipperende LED, gedimde LED, knop en potmeter gebruiken.
18. Je hebt voorkennis van programmeren op het niveau van de vierde klas.

Toestandsdiagrammen

1. Je kunt aan de hand van een gegeven toetstandsdiagram aangeven hoe een systeem zich gedraagt.
2. Je kunt een toestandsdiagram maken van een systeem dat beschreven is in een stuk tekst.
3. Je kunt een toestandsdiagram omzetten in Pseudocode.
4. Je kunt pseudocode omzetten in Arduino-code.

Naslagmateriaal

Syntaxblad

Oefentoets

Een oefentoets voor deze module staat in Woots .

T7. Netwerken met IP

Je leert hoe het internet van binnen werkt.

Hulpmiddelen

We gebruiken in deze module de volgende tools:

1. Informatica Actief
2. Filius

Oefeningen

Informatica Actief, keuzemodule netwerken, versie netwerken nieuwe stijl

1. Informatica Actief, keuzemodule netwerken (1.1, sla 1.2 over)
   In plaats van Filius te installeren, gebruik je Filius in Gitpod
2. Informatica Actief, keuzemodule netwerken (2.1 t/m 2.17)
3. Informatica Actief, keuzemodule netwerken (3.1 t/m 3.8)
4. Informatica Actief, keuzemodule netwerken (4.1 t/m 4.3)
5. Informatica Actief, keuzemodule netwerken (5.1 t/m 5.5)

Uitleg

Naslagmateriaal

1. Netwerken lespresentatie (Powerpoint presentatie)
2. How the internet works (video’s)
3. Theorie netwerkprotocollen (alleen hoofdtstuk 5, dit is best pittig, aanvulling op uitleg in de les).

Leerdoelen voor de toets

Netwerken

1. Je kunt met behulp van een berekening kunt aantonen wat de hoofdreden is om het IP versie 4 protocol te vervangen door IPv6
2. Je kunt het verschil uitleggen tussen een LAN en een WAN.
3. Je kent de belangrijkste verschillen tussen communicatie over koperen verbindingen, glasvezelverbindingen en draadloze verbindingen
4. Je weet wat bij computernetwerken de termen lag / latency / latentie en bandbreedte betekenen en hoe ze de snelheid van een netwerkverbinding beïnvloeden.
5. Je kunt uitleggen waarvoor het het OSI-model is ontwikkeld
6. Je begrijpt het OSI-model / IP-stack. Je kunt de applicatielaag, transportlaag, netwerklaag, datalinklaag en fysische laag uitleggen.
7. Je kunt twee voordelen benoemen van het werken met een lagenmodel zoals het OSI-model of de IP-stack.
8. Je weet wat een MAC-adres is, bij welke laag het hoort en waarvoor het wordt gebruikt.
9. Je weet wat ARP is en waarvoor het dient.
10. Je weet wat het MAC broadcast adres is en waarvoor het dient.
11. Je weet wat een IP-adres is, bij welke laag het hoort en waarvoor het wordt gebruikt.
12. Je kunt met behulp van routeringstabellen het gedrag van een router bij een inkomend bericht beschrijven.
13. Je weet wat het IP broadcast adres is en waarvoor het dient.
14. Je weet wat een subnetmasker is en waarvoor dit dient.
15. Je kunt met behulp van het subnetmasker uitrekenen hoeveel apparaten er in een netwerk verbonden kunnen zijn.
16. Je weet wat het nadeel is van een subnetwerk met heel veel apparaten.
17. Je kunt de twee belangrijkste verschillen tussen TCP en UDP benoemen
18. Je weet wat TCP-poorten zijn en waarvoor deze dienen
19. Je kunt beschrijven hoe een pakketje van een apparaat in het ene subnet naar een apparaat in het andere subnet reist.
20. Je kent de functie van de volgende netwerkapparaten: router, modem, switch, wireless access point, repeater, firewall
21. Je kunt beredeneren tot op welk niveau van het OSI-model een netwerkapparaat werkzaam is.
22. Je kunt bij schematische weergave van een netwerk de verschillende netwerkapparaten herkennen en benoemen en IP-adressen en subnetmaskers bepalen of toewijzen.
23. Je weet wat de functie van een firewall is.
24. Je begrijpt wat een DNS is en waarvoor deze dient
25. Je kunt uitleggen wat de functie van een DHCP server is.

Oefentoets

Je kunt een deel van je kennis en vaardigheden testen met de volgende oefenopgaven:

• Oefenopgave IP-adressen en subnetten
• Antwoorden oefenopgave IP-adressen en subnetten

T8. Objectgeoriënteerd Programmeren

Je leert objectgeoriënteerd programmeren. Dat is een manier van programmeren waarbij data en logica gebundeld zijn in objecten. We leren dit voor zowel JavaScript als C++.

Theorie

• Theorie objectgeoriënteerd programmeren
• Lespresentatie

Opdrachten

• Verwerkingsopdrachten

Naslagmateriaal (ook beschikbaar bij toets)

• Naslagmateriaal objectgeoriënteerd programmeren
• Naslagmateriaal JavaScript en p5js
• Naslagmateriaal C++ en Arduino

Leerdoelen

• Je weet wat het verschil is tussen een klasse en object.
• Je weet wat attributen en methodes van objecten zijn.
• Je weet wat inkapseling is.
• Je kunt uitleggen wat het verschil is tussen private en public attributen en methodes en dit principe toepassen.
• Je kunt op basis van een beschrijving in combinatie met stukje code beslissen welke attributen je private en welke je public zou maken.
• Je weet wat getter- en setter-methodes zijn.
• Je kunt een beargumenteerde keuze maken om voor een attribuut wel / niet gebruik te maken van getter en / of setter.
• Je kunt zelf code voor getter- en settermethodes maken.
• Je kunt uitleggen wat ‘overerving’ betekent en dit principe toepassen.
• Je begrijpt de termen superklasse en subklasse.
• Je begrijpt wat een abstracte klasse is.
• Je kunt in JavaScript objectgeoriënteerde code lezen en schrijven (eerdere kennis wordt verondersteld).
• Je kunt in C++ (Arduino-code) objectgeoriënteerde code lezen.
• Je kunt zelfstandig objectdiagrammen en (ontwerp)klassendiagrammen maken.
• Je kunt een ontwerpklassendiagram maken met behulp van een beschrijving van systeem.
• Je kunt een (ontwerp)klassendiagram omzetten naar JavaScript en andersom. Je bent hierbij in staat om relaties tussen klassen om te zetten naar code.
• Je kunt C++ (Arduino-code) omzetten naar (ontwerp)klassendiagram.
• Je kent drie voordelen en drie nadelen van objectgeoriënteerd programmeren.

Oefentoets

• Oefentoets
• Antwoordwoorden oefentoets

T9. Security

Over de beveiliging van computers en data.

Theorie

• Informatica Actief - Security en Privacy , theorie 1 t/m 3
• Reader security , hoofdstuk 2 t/m 6
• Handout lespresentaties
• Overig materiaal op deze pagina

Naslagmateriaal toets

• Klik om te downloaden

Uitlegvideo’s

Onderstaande video’s horen niet bij de verplichte stof, maar kunnen wel helpen de stof te begrijpen of extra informatie geven als je meer wilt weten.

• AES-encryptie: de details
• Diffie Hellman m.b.v. verf
• Uitleg en mogelijkheden van public key cryptography
• Extra uitleg asymmetrische encryptie
• De wiskundige kant van RSA-encryptie

Leerdoelen

Behorende bij reader Security met toegevoegd [paginanummer]:

H2:

• Je kunt uitleggen wat authenticatie is. [44]
• Je kunt uitleggen wat two factor authentication (2FA) is. [44]
• Je kunt uitleggen hoe een botnet wordt opgezet en wat er mee wordt gedaan. [45]
• Je kunt de sterkte van wachtwoorden kunnen bepalen of vergelijken. [46]
• Je kun aan de hand van een wachtwoordformaat uitrekenen hoeveel mogelijkheden maximaal moeten worden gecontroleerd in een brute force attack, zowel met als zonder gebruik van een dictionary. [46 + overig materiaal]
• Je kunt uitleggen wat phishing is. [52]

H3:

• Je kunt uitleggen wat social engineering is [55]
• Je kunt drie methoden om te hacken beschrijven. [59]
• Je kent in de context van security de principes confidentiality, integrity, availability, kunt deze uitleggen en toepassen op een casus. [61]
• Je kunt werken met de analogie van Alice, Bob en Eve (of Chris). [63]

H4:

• Je begrijpt hoe de versleuteling met behulp van (Caesar)substitutie werkt en je kunt er een boodschap mee versleutelen en ontcijferen [65]
• Je begrijpt hoe de versleuteling met behulp van transpositie werkt en je kunt met behulp van een gegeven transpositiemethode een boodschap versleutelen en ontcijferen [66]
• Je begrijpt hoe de versleuteling met behulp van Vigenèresubstitutie werkt en je kunt er met een uitgeprinte hulptabel een boodschap mee versleutelen en ontcijferen. [72]

H5

• Je kunt uitleggen wat versleuteling met m.b.v. een one time pad (of: eenmalig blokcijfer) inhoudt en waarom deze manier van versleutelen, onder de juiste voorwaarden, niet te kraken is. Je kent deze voorwaarden. [76]
• Je weet wat de (binaire) XOR-operatie is, op welke wijze deze een rol kan vervullen bij versleuteling en kunt deze operatie toepassen [78]
• Je kunt in grote lijnen uitleggen via welke vier stappen AES-encryptie werkt. [80 + overig materiaal]

H6

• Je kunt het verschil tussen HTTP en HTTPS uitleggen. [86]
• Je kunt uitleggen wat het verschil is tussen symmetrische en asymmetrische cryptografie en herkennen of een vorm van encryptie symmetrisch of asymmetrisch is. [89]
• Je weet hoe sleuteluitwisseling m.b.v. Diffie-Hellman plaatsvindt en kunt dit voordoen met gegeven getallen p en g. [92]
• Je kunt uitleggen welke stappen in de communicatie tussen browser en webserver plaatsvindt om een versleutelde verbinding tot stand te brengen. [93]
• Je kunt aan de hand van de inhoud van een website beredeneren of het onverantwoord is om deze met behulp van HTTP te benaderen. [93]
• Je begrijpt hoe de versleuteling met behulp van RSA werkt en je kunt er met gegeven eenvoudige sleutels m.b.v. je grafische rekenmachine een boodschap mee versleutelen en ontcijferen. [94 + overig materiaal]
• Je kunt met een gegeven getal p en q m.b.v. je grafische rekenmachine zelf een publiek en privé sleutelpaar genereren. [overig materiaal]
• Je kunt uitleggen welke twee functies encryptie met een public en private sleutelpaar heeft. [94 + overig materiaal]
• Je kunt uitleggen wat een ‘man-in-the-middle-attack’ is. [96]
• Je kan uitleggen welke de functies van een webcertificaat heeft en welke informatie het daarvoor bevat. [97]
• Je weet welke stappen een browser uitvoert om een webcertificaat te controleren. [97]
• Je weet wat een stamcertificaat / rootcertificate is. [98]
• Je kunt de rol van certificaat-autoriteiten beschrijven. [100]

Behorend bij Informatica Actief of overig materiaal:

• Je kunt uitleggen wat een cookie is en welke functie een cookie heeft.
• Je kent de kenmerken van verschillende soorten malware (virussen, wormen, Trojaans paard, ransomware). Je weet onder andere hoe ze zich verspreiden, en wat hun typische doel of effect is.
• Je kunt uitleggen wat een dictionary attack is.
• Je kent de algemene kenmerken van een hash(functie).
• Je kunt een paar voorbeelden geven van populaire hash-algoritmen
• Je kent in de context van hashing de begrippen salting en collision
• Je kunt verschillende toepassingen van hashing uitleggen, zoals wachtwoordverificatie, het controleren van de authenticiteit van data of het identificeren van bestanden.

Oefenopgaven

• Oefenopgaven
• Uitwerkingen

Extra: OOP voor 6vin2

Inloggen met Google

❗️ Voordat je start

Ga naar Replit met de volgende link:

https://replit.com/@Krisvan1/ObjectOrientedProgramming

Fork de repository. Maak eventueel een account aan als je die nog niet hebt.

Elke opdracht kan je zelf testen door op de “Run” knop te drukken.

TIP: Je kan ook checken of je opdracht echt klopt door de Unit tests te runnen. Deze vind je of recht naast je console of links onder bij Tools.

TIP: Onderaan deze pagina staat een cheat-sheet voor de syntax van JavaScript.

📦️ Classes

🗺️ UML Diagrams

Je hebt keuze! Kies uit een makkelijke of moeilijke opdracht.

Pak papier of je iPad erbij om een UML diagram te tekenen.

Oplossingen

🌳 Overerving (Inheritence)

Maak de opdrachten van de volgende replit:

https://replit.com/@Krisvan1/Inheritence#index.js

Fork de repository. Maak eventueel een account aan als je die nog niet hebt.

Elke opdracht kan je zelf testen door op de “Run” knop te drukken.

🕵️ 🥏 Inkapseling

Maak de opdrachten van de volgende replit: https://replit.com/@Krisvan1/PrivateGetSet#index.js

TIP: Gebruik de instructies om de code te testen

TIP: Gebruik het cheat sheet als je niet meer weet hoe je alles moet typen

Klaar? Ga verder met Opdracht 3 van de reguliere opdrachten:

https://informatica.emmauscollege.nl/theorie/objectoriented_verwerkingsopdrachten/#opdracht-3

🚑️ Oefenopdracht

Je gaat oefenen met alles wat je tot nu toe geleerd hebt.

Kijk je UML diagram na

Natuurlijk, laten we dat aanpakken.

🗒️ JavaScript Cheat Sheet

Creating an Object

Een object is een verzameling van sleutel-waarde paren. In dit voorbeeld bevat het object player drie sleutels: name, score en level.

var player = {
    name: 'John',
    score: 100,
    level: 2
};

Creating an Array of Objects

Arrays zijn geordende lijsten van items. Hier hebben we een array van objecten.

var players = [
    {
        name: 'John',
        score: 100,
        level: 2
    },
    {
        name: 'Jane',
        score: 150,
        level: 3
    }
];

Accessing Object Properties

Je kunt de waarde van een objecteigenschap opvragen door de naam van het object gevolgd door een punt en daarna de eigenschapsnaam.

console.log(player.name); // John

Looping Through an Array of Objects

Een for loop herhaalt een reeks instructies een bepaald aantal keer. In dit geval loopt de loop door elk object in de players array en drukt de naam en score van elke speler af.

Uitleg loop:

• i = 0: Initialiseert de tellervariabele i op 0.
• i < players.length: De loop blijft draaien zolang i kleiner is dan het aantal items in de players array.
• i++: Verhoogt de waarde van i met 1 na elke loop.

for(var i = 0; i < players.length; i++) {
    console.log(players[i].name + ' has a score of ' + players[i].score);
}

Creating a Class

Een klasse definieert de eigenschappen (variabelen) en gedragingen (methoden) die zijn objecten (instanties) zullen hebben.

class Player {
    name;
    score;
    level;
  
    constructor(name, score, level) {
        this.name = name;
        this.score = score;
        this.level = level;
    }

    increaseScore(amount) {
        this.score += amount;
    }

    increaseLevel() {
        this.level++;
    }
    
    printDetails() {
        console.log(this.name + ' has a score of ' + this.score + ' and is on level ' + this.level);
    }
}

Creating an Instance of a Class

var player1 = new Player('John', 100, 2);

Accessing Class Properties

console.log(player1.name); // John

Inheritance in JavaScript

Inheritance stelt je in staat om een nieuwe klasse te maken die is gebaseerd op een bestaande klasse. De nieuwe klasse erft eigenschappen en gedrag van de ouderklasse.

class Goalkeeper extends Player {
    savedGoals;
  
    constructor(name, score, level, savedGoals) {
        super(name, score, level);
        this.savedGoals = savedGoals;
    }

    printGoalkeeperStatistics() {
        console.log('Saved Goals: ' + this.savedGoals);
    }
}

Prive variabelen & Getters en Setters

Private variabelen (zoals #saldo) zijn alleen toegankelijk binnen de klasse waarin ze zijn gedefinieerd. Getters en Setters zijn speciale methoden die respectievelijk worden gebruikt om waarden van deze private variabelen op te vragen of in te stellen.

class BankRekening {
    #saldo; // Prive variabele
  
   constructor() {
        this.#saldo = 0;
   }

    getSaldo() {
        console.log("Saldo opvragen");
        return this.#saldo;
    }

    setSaldo(bedrag) {
        if (bedrag >= 0) {
            this.#saldo = bedrag;
        } else {
            console.log("Ongeldig saldo");
        }
    }
}

const rekening = new BankRekening();
console.log(rekening.getSaldo()); // Saldo opvragen + het huidige saldo
rekening.setSaldo(-1000); // Ongeldig saldo

Door het gebruik van getters en setters kunnen we ervoor zorgen dat de regels voor toegang tot of wijziging van data worden nageleefd.

Powerpoints

• Download hier de lespresentaties

Antwoorden oefeningen

• opdracht 1
• overerving
• private, set en get
• ziekenhuissysteem

O1. Website

Je gaat je eigen website maken!

Opdrachtbeschrijving

De opdracht in het kort is: Maak je eigen informatieve website over een zelfgekozen onderwerp. Je gebruikt de startcode met HTML en CSS.

Hulpmiddelen

We gebruiken in deze opdracht de volgende tools:

1. GitHub om je code op te slaan.
2. Replit (havo) of Gitpod (vwo) om je code te bewerken en een voorbeeld van je website te bekijken.

Startcode

Als je van je docent je een kopie van de startcode hebt ontvangen, dan kun je aan de slag met de stappen uit het README.md bestand.

Stappenplan

Werk de planning af van boven naar beneden.

Uitlegvideo’s

O2. Game

Je gaat je eigen game programmeren!

Opdrachtbeschrijving

De opdracht in het kort is: Maak in groepjes van twee je eigen spel in JavaScript. Je gebruikt de startcode en maakt gebruik van de p5js-library.

Hulpmiddelen

We gebruiken in deze opdracht de volgende tools:

1. GitHub (vanaf 24/25)
2. Replit (havo t/m 23/24)
3. Gitpod (vwo t/m 23/24)

Startcode

Je krijgt van de docent een kopie van onderstaande startcode.

Stappenplan

Werk de planning af van boven naar beneden. Vul de planning aan en stel bij terwijl je aan de opdracht werkt.

Uitlegvideo’s

O3. Webshop

Je gaat je eigen webshop maken!

Opdrachtbeschrijving

De opdracht in het kort is: Maak in groepjes van twee of drie je eigen webshop. Je gebruikt de startcode en breidt de database uit met jouw producten. De api en het website deel pas je aan waar dat nodig is.

Hulpmiddelen

We gebruiken in deze opdracht de volgende tools:

1. GitHub
2. Replit (havo)
3. Gitpod (vwo)

Startcode

Stappenplan

Werk de planning af van boven naar beneden. Vul de planning aan en stel bij terwijl je aan de opdracht werkt.

Uitlegvideo’s (havo)

Uitlegvideo’s (vwo)

O4. Robot

Je gaat je robot programmeren!

Opdrachtbeschrijving

De opdracht in het kort is: programmeer een apparaat naar keuze met behulp van een toestandsdiagram.

Hulpmiddelen

We gebruiken in deze opdracht de volgende tools:

1. GitHub om je werk op te slaan.
2. Arduino IDE om je code voor de arduino te bewerken en in je apparaat te laden.

Er is geen automatische koppeling tussen Arduino IDE en GitHub. Dat betekent dat je je bestanden via de webinterface van GitHub moet downloaden en uploaden.

Startcode

Als je van je docent je een kopie van de startcode hebt ontvangen, dan kun je aan de slag met de stappen uit het README.md bestand.

Stappenplan

Werk de planning af van boven naar beneden.

Uitlegvideo’s

Er zijn op dit moment (nog) geen uitlegvideo’s bij deze opdracht.

O5. Marble Mania Knikkerbaan

Je maakt een interactieve module voor een grotere knikkerbaan.

Opdrachtbeschrijving

In het vakgebied van informatica wordt heel veel projectmatig gewerkt. Een van de manieren om dit te doen is Agile. Bij deze opdracht ga je in groepen van 4 (één leerling meer of minder mag ook) projectmatig werken aan een interactieve knikkerbaan die verbonden is met een zelfgemaakte webserver. Hierbij ga je de kennis en vaardigheden die bij het vak informatica hebt opgedaan toepassen en integreren. Je levert een eindproduct op maar je wordt ook beoordeeld op de wijze waarop dit project gemanaged wordt.

Khan Academy

Khan Academy is internationale online lesmethode met cursussen voor diverse onderwerpen. Wij gebruiken enkele cursussen uit de sectie Computer Programming.

De eerste keer inloggen op Khan Academy

1. Start je browser (Chrome werkt het best) en ga naar https://www.khanacademy.org/

Als je inlogt op khanacademy, dan onthoudt de website wat je al bekeken en gemaakt hebt. Inloggen kan als volgt:

2. Klik op “login”
3. kies de knop “continue with google”
4. type je school-email van google en bijbehorende wachtwoord in

De eerste keer dat je inlogt krijg je een aantal vragen

4. “What grade are you in?” -> kies “Grade 12 / Year 12”
5. “What courses can we help you learn?” -> scroll omlaag en kies “Computer Programming”

Je kunt nu naar je cursus gaan:

6. Klik linksboven op courses.
7. Kies computer programming.
8. Kies de juiste cursus.
9. Bekijk de video’s en maak de opdrachten.

De volgende keer inloggen op Khan Academy

1. Start je browser (Chrome werkt het best) en ga naar https://www.khanacademy.org/
2. Klik op “login”
3. kies de knop “continue with google”
4. type je school-email van google en bijbehorende wachtwoord in
5. Klik linksboven op courses.
6. Kies computer programming.
7. Kies de juiste cursus.
8. Bekijk de video’s en maak de opdrachten.

Je kunt ook de links gebruiken op diverse plaatsen op de informatica-website. Die brengen je gelijk naar de goede plek.

Veelgestelde vragen

Ik kan de cursus niet vinden

Kijk of je op de Engelstalige site zit. Als je zoekt via google, dan kom je vaak op de Nederlandstalige site, daar staat niet de cursus die wij gebruiken. De Engelstalige site vind je op https://khanacademy.org/

De juiste cursus vind je door linksboven op de knop “courses” te klikken. Vervolgen kies je “Computer Programming”. Nu kom je op een pagina waar alle cursussen staan die we gebruiken.

Ik krijg steeds de Nederlandse in plaats van de Engelse site

De Engelstalige site vind je op https://khanacademy.org/ . Als je daar steeds teruggezet wordt op de Nederlandse site, dan moet je in je profiel aangeven dat je voorkeur hebt voor de Engelse taal. Dit doe je als volgt: klik rechtsboven op je inlognaam, klik in het menu dat verschijnt op setting, verander Primary Language in “English”

Informatica Actief

Informatica Actief is de lesmethode voor informatica die wij gebruiken. Wij gebruiken enkele modules uit de methode.

De eerste keer inloggen op Informatica Actief

1. Start je browser (Chrome werkt het best) en ga naar https://www.informatica-actief.nl/

De volgende stappen zijn een grove beschrijving, die we later nog uitwerken:

2. Klik op “login”.
3. Klik op aanmelden via Entree. Je kunt je magister inloggegevens gebruiken om in te loggen.
4. Als er gevraagd wordt om een mailadres, gebruik dan je schoolmail. Je krijgt een bevestingsmail met een link waar je op moet klikken. Log opnieuw in op de pagina waar de link je naartoe brengt.
5. Klik linksboven op het IA icoontje, je komt dan terug op de home page van de site. Voer rechts de voucher code in, inclusief de streepjes. Deze code krijg je van je docent. Je moet die voucher code elk jaar vernieuwen, anders wordt de site afgesloten.
6. Kies de module die we gebruiken. Letop: we doen niet alle onderdelen van een module, kijk in de lesstof welke onderdelen bij de stof horen.

De volgende keer inloggen op Informatica Actief

1. Start je browser (Chrome werkt het best) en ga naar https://www.informatica-actief.nl/
2. Klik op “login”.
3. Klik op aanmelden via Entree. Je kunt je magister inloggegevens gebruiken om in te loggen.
4. Kies de module die we gebruiken.

Je kunt ook de links gebruiken op diverse plaatsen op de informatica-website. Die brengen je gelijk naar de goede plek.

Q&A

Mijn voucher code werkt niet

Let op het verschil tussen 0 (cijfer nul) en O (hoofdletter oo) en let op het verschil tussen l (kleine letter l) en 1 (cijfer één).

GitHub met Codespaces

GitHub is een website waar je code kunt opslaan en delen. Codespaces is een codeeromgeving binnen GitHub waar je code kunt wijzigen en uitvoeren.

Wat zijn GitHub en Codespaces?

GitHub is een website waar je code kunt opslaan en delen.

• GitHub bewaart alle oude versies van je code.
• Code op GitHub kun je gemakkelijk delen met anderen.
• Met GitHub kun je in groepen aan dezelfde code werken.
• Bestanden in GitHub worden bewaard in repositories. Een repository (ook wel afgekort tot repo) is een soort hoofdmap. Voor elk project maak je een aparte repository.
• GitHub werkt op basis van Git. Git is open source software.
• Er zijn veel programmeeromgevingen die via Git kunnen samenwerken met GitHub.

Codespaces is een codeeromgeving binnen GitHub waar je code kunt wijzigen en uitvoeren.

• In Codespaces werkt je met de editor VSCode om je code te wijzigen.
• Wijzigingen in bestanden in je Codespace kun je bewaren in GitHub.
• Je kunt code uitvoeren in je Codespace, bijvoorbeeld door commando’s te typen in de terminal.
• Codespaces biedt een Virtual Machine (computer in de cloud) waar je op kunt werken via elke browser. Als je de browser sluit dan wordt de Virtuele Machine op pause gezet.

Starten met een opdracht

Maak een account in GitHub

1. Ga naar https://www.github.com/ (gebruikt Chrome of Firefox, in 21/22 werkt dit niet in Safari)
2. Klik op sign-up
3. Gebruik je email adres van school ( 1xxxxx@emmauscollege.nl )
4. Zorg dat je het wachtwoord dat je kiest terug kunt vinden
5. Kies als username je voornaam met een letter van je achternaam, als die al bezet is voeg je een nummer toe. Bijvoorbeeld jamesb007
6. Bevestig je account door te klikken op de link in de mail die je ontvangt van GitHub

Maak een Codespace met startcode voor je opdracht

1. De docent heeft een repository met startcode voor deze opdracht op GitHub gezet. Deze repository is read-only voor leerlingen. De docent vertelt hoe je een kopie van deze repository kunt maken waarin je zelf aanpassingen kunt doen. Sommige docenten delen een link naar GitHub Classroom waarmee jij je kunt inschrijven en automatisch je eigen kopie van de repository krijgt. Andere docenten laten je zelf een kopie maken door de repository met startcode te forken. Gebruik je eigen kopie van de repository voor de volgende stappen.
2. Klik op de knop “Code”, een pop-up-box verschijnt, kies in de pop-up-box de tab “Codespaces”, klik op de knop “Create Codespace” om een nieuwe Codespace te maken. De volgende keer kun je de Codespace kiezen die je nu gemaakt hebt.
3. Alle bestanden uit de GitHub repository worden gekopieerd naar jouw Codespace. Dit kan enkele minuten duren.
4. Als je de browser sluit dan wordt je Codespace op pauze gezet. Als je Codespace een maand achter elkaar op pauze staat, dan wordt hij verwijderd.

In je eentje werken aan je opdracht

Bewaar nieuwe versies van je code steeds in Github. Dan heb heb je een backup als er iets misgaat in Codespaces.

De laatste versie van je code uit je Codespace bewaren op GitHub doe je zo:

1. In de iconenbalk links op je scherm is een icoon voor “source control”. Dit is het derde icoon van boven, als je er even met je muis op staat dan verschijnt de tekst “source control”. Klik op het icoon. Je ziet onder “changes” een lijst met bestanden waarin je wijzigingen hebt gemaakt. Daarboven zie je een knop “Commit & Sync”. Boven de knop zie je een invoerveld met de tekst “Message”.
2. Type een korte beschrijving van je wijziging in het “Message” invulveld. Dit heet een commit message. Klik daarna op “Commit & Sync”.
3. Je code wordt nu bewaard in GitHub. Als alles gelukt is dan zie je de beschrijving van je wijziging terug in GitHub. Controleer dat in GitHub.

Het werkt het best als je aanpassingen doet in kleine stapjes.

• Type steeds een paar regels code en test dan of het doet wat je verwacht had.
• Maak per lesuur één of enkele commits en bewaar dit in GitHub. Een commit is een versie met een aantal kleine wijzigingen die samen iets nieuws toevoegen. Het is niet handig om elke minuut een commit te maken, maar minimaal één commit per les zou wel moeten.

Met zijn tweeën of drieën werken aan je opdracht

Elk teamlid heeft zijn eigen kopie van de code in zijn eigen Codespace. In GitHub staat de gezamenlijke code.

Als je in teams werkt, dan is het opslaan van je code ingewikkelder. Je moet immers zorgen dat jouw wijzigingen en die van je maatje worden samengevoegd. GitHub helpt daarbij.

De laatste versie van je code uit je Codespace bewaren op GitHub doe je zo:

1. Wijzig en test : Type steeds een paar regels code en test dan of het doet wat je verwacht had.
2. Stage : Zet de gewijzigde bestanden klaar voor de commit. Een commit is en nieuwe versie.
3. Commit : Type een korte beschrijving waaronder je de nieuwe versie terug kan vinden.
4. Pull : Haal de wijzigingen van teamgenoten uit Github binnen in jouw Codespace.
5. Push : Duw je commit in Codespace naar je repository op GitHub.

Stap 2, 3, 4, en 5 worden direct achter elkaar gedaan als je klikt op de knop “Commit & Sync”. Als je in teams werkt, dan kan het zijn dat je maatje iets in GitHub bewaart, terwijl jij in jouw Codespace aan het werk bent. De wijzigingen van jouw maatje komen niet automatisch in jouw Codespace, zodat jij ongestoord verder kunt coderen. Als jij na je maatje wijzigingen in GitHub bewaart, dan probeert GitHub de wijzigingen van jou en je maatje automatisch samen te voegen. Als jullie dezelfde regels in hetzelfde bestand gewijzigd hebben, dan lukt het samenvoegen niet automatisch. CodeSpace geeft dan aan dat er een merge-conflict is. Jij moet dan zelf aangeven welke wijzigingen GitHub moet kiezen. Daarna klik je op “Continue” om te zorgen dat alle stappen uit “Commit & Sync” worden afgemaakt.

Deze video legt uit hoe je merge-conflicten in Codespaces oplost . Als je goede afspraken maakt over wie wat doet, dan heb je weinig merge-conflicten.

Als je langer dan een dag niet aan je code gewerkt hebt, dan is het handig om de laatste wijzigingen van jullie gezamenlijke code in GitHub binnen te halen. Dat heet “Pull”. Onze Codespace is zo ingesteld, dat je op het pijltje naast “Commit & Sync” kunt drukken om te pullen. Pullen kan alleen als je na je laatste commit geen wijzigingen meer hebt gedaan.

Met zijn vieren of meer werken aan je opdracht

In grotere teams worden er heel veel veranderingen tegelijk doorgevoerd. De gezamenlijke code wijzigt daardoor heel vaak. Dat is onhandig.

Het werkt in grote teams handiger als je het werk verdeelt in branches. Vraag hierover uitleg aan je docent, als jullie daaraan toe zijn.

Veelgestelde vragen

GitHub 404 fout

Ik heb via email een link ontvangen om toegang te krijgen tot een repo, maar als ik op de link druk dan krijg ik een 404 fout. Wat moet ik doen?

Login op GitHub en druk daarna nogmaals op de link.

Merge conflict

Ik heb een merge conflict, hoe los ik dat op?

Kijk deze video, daarin wordt uitgelegd hoe je een merge conflict in Codespaces oplost.
https://www.youtube.com/watch?v=HosPml1qkrg

Als je er met de video niet uitkomt en er is niemand in de buurt die je kan helpen, dan kun je het volgende doen.

• Maak een nieuwe Codespace. In de nieuwe Codespace wordt de laatste versie van de code van GitHub ingelezen.
• Knip en plak de wijzigingen van je oude Codespace naar je nieuwe Codespace.
• Test of je code het doet, haal de fouten eruit.
• Bewaar je wijzigingen in GitHub door in je nieuwe Codespace op Commit en Sync te klikken.

Scherm delen

Ik wil mijn scherm delen met iemand anders, hoe doe ik dat?

In de iconenbalk links op je scherm zie een soort gebogen pijl. Dit is de extension “live-share”. Hiermee kun je je scherm delen met andere GitHub gebruikers.

Deze functie is bedoeld om samen snel een klein probleem op te lossen. Gebruik hem niet meer dan een paar minuten per les. Echte programmeurs verdelen het werk, maken elk hun eigen stuk code in hun eigen Codespace en delen het dan via GitHub. Dat moet jij ook leren.

Werken met bestanden in Codespaces

Ik wil een nieuw bestand maken, de naam van een bestand veranderen, een bestand uploaden, bestanden downloaden of andere dingen met bestanden of mappen doen. Hoe doe ik dat?

• Met bestanden werken doe je het gemakkelijkst in Codespaces.
  In de kolom met iconen links op je scherm zie je bovenaan een icoontje met twee velletjes papier. Klik daarop. Je ziet nu een lijst met al je bestanden en mappen. Mappen kun je uitklappen. Als je dubbelklikt op een bestand, dan wordt het geopend. Als je met je rechtermuisknop op een bestand of map klikt, dan verschijnt er een drop-down menu waarin je meer met het bestand of de map kunt doen.
• Een nieuw bestand of map aanmaken:
  Als je muis op de lijst met bestanden staat, dan zie je vlak boven de lijst twee icoontjes met een +. Als je op de linker klikt, dan maak je een nieuw bestand. Als je op de rechter klikt, dan maak je een nieuwe map.
• De naam van een bestand of map veranderen:
  Klik met de rechtmuisknop op een bestand of map. Er verschijnt een drop-down menu. Kies “Rename…” in het pull-down menu. Pas de naam aan en druk op Enter.
• Een bestand verplaatsen:
  Sleep het bestand van de ene naar de andere map.
• Een bestand uploaden:
  Sleep een bestand van je bureaublad naar het lijstje bestanden in Codespaces.
  Een andere manier om een bestand te oploaden:
  Ga op een map staan, klik op de rechtermuisknop, een pull-down menu verschijnt, kies “Upload…” in het pull-down menu.
• Meerdere bestanden selecteren:
  Klik op het bovenste bestand. Beweeg je muis naar een bestand verder naar onderen. Houdt SHIFT ingedrukt terwijl je op het onderste bestand klikt.

De Github website gebruiken

Waarvoor heb ik de GitHub website nodig, code aanpassen en uitvoeren doe ik toch in Codespaces?

Dat klopt, je gebruikt de GitHub website vaak alleen om in te loggen en je Codespace te starten. Code aanpassen en uitvoeren doe je in je Codespace. Toch zijn er een aantal handige functies op de GitHub website.

• Repo’s zoeken:
  Links in het scherm staan de repo’s die je recent en vaak gebruikt hebt. Door op een repo te klikken wordt deze geladen. De link van de repo staat bovenin je browser.
• Bekijken wat er in een repo zit:
  Je kunt snel zien wat er in een repo zit door op de bestanden of mappen in de repo te klikken.
• Bekijken wat er gewijzigd is:
  Je kunt alle wijzigingen in een repo terugzien. Een lijst met de laatste wijzigingen krijg je door te klikken op het aantal commits, onder de groene knop met “Code”. Van elke commit kun je zien wat er is gewijzigd, klik daarvoor op het nummer van de commit aan het einde van de regel.
• Alle bestanden uit een repo downloaden:
  Je kunt alle bestanden in een repo downloaden in een zip-bestand. klik op de groene knop “Code” en kies in het menu dat verschijnt voor “Download ZIP”.

GitHub (tot eind 2023)

Vanaf begin 2024 wordt GitHub met Replit (havo) of GitPod (vwo) vervangen door GitHub met Codespaces (have en vwo)
GitHub is een website waar je code kunt opslaan.

Wat is GitHub?

GitHub is een website waar je code kunt opslaan

• Heel veel goede programmeurs gebruiken GitHub
• Heel veel programmeeromgevingen kunnen samenwerken met GitHub
• GitHub bewaart alle oude versies van je code
• Code op GitHub kun je gemakkelijk delen met anderen
• GitHub biedt heel veel speciale mogelijkheden om in groepen aan dezelfde code te werken

GitHub kun je zien als een soort cloudopslag voor je code. Github slaat code op in repositories. Een repository (kortweg: repo) bevat de code voor één project of opdracht. De kern van een repository zijn de bestanden.

Een account aanmaken

1. Ga naar https://www.github.com/ (gebruikt Chrome of Firefox, in 21/22 werkt dit niet in Safari)
2. Klik op sign-up
3. Gebruik je email adres van school ( 1xxxxx@emmauscollege.nl )
4. Zorg dat je het wachtwoord dat je kiest terug kunt vinden
5. Kies als username je voornaam met een letter van je achternaam, als die al bezet is voeg je een nummer toe. Bijvoorbeeld jamesb007
6. Bevestig je account door te klikken op de link in de mail die je ontvangt van GitHub

Hoe werkt code wijzigen in Github?

Er zijn veel manieren om code die je in GitHub bewaard te wijzigen. Bijna altijd maak je eerst een kopie van GitHub in je eigen ontwikkelomgeving (je computer of een online ontwikkelomgeving zoals Gitpod of Replit). Dit heet clonen (spreek uit als “kloonen”). Vervolgens wijzig en test je code die in je clone zit. Als een wijziging goed is, dan zet je die terug op GitHub. Dit wijzigen gaat in de volgende stappen:

1. Pull : Haal alle updates van GitHub binnen in je lokale repository.
2. Codeer : Maak / verander je programmeercode en test of het werkt.
3. Save : Sla je veranderingen op.
4. Probeer : Test uit of het werkt.
5. Stage : Zet de gewijzigde bestanden klaar voor de commit.
6. Message : Typ een korte maar begrijpelijke commitboodschap.
7. Commit : Maak een nieuw punt in je tijdlijn.
8. Pull : Kijk of er intussen geen nieuwe wijzigingen in GitHub zijn gemaakt door een team-genoot.
9. Push : Duw je commit van je ’lokale’ repository naar je (cloud) repository op GitHub.

Hoe werkt versiebeheer in GitHub?

Je kunt je git het gemakkelijkst voorstellen als een tijdlijn. De punten op de tijdlijn zijn alle versies die jij vanaf het begin hebt ‘opgeslagen’:

Hoe werkt dit? Tijdens het programmeren werk je vaak zo:

• Maak / verander je programmeercode.
• Sla je veranderingen op.
• Test uit of het werkt.

Het maakt eigenlijk niet uit of je hierbij gebruik maakt van GitPod, Repl.it, Arduino of een andere programmeeromgeving.

Met het gebruik van git komt daar nog een stap bij: de commit. Een commit doen betekent dat je een nieuw punt aan je tijdlijn toevoegt. Dit doe je als volgt:

• Zet de bestanden klaar voor de commit
• Typ een korte maar begrijpelijke commitboodschap
• Commit

Hoe werkt samenwerken in GitHub?

GitHub functioneert als de centrale cloudopslag waar iedereen mee synchroniseert. Het is belangrijk om te beseffen dat je code in je programmeeromgeving en GitHub wel aan elkaar verbonden, maar niet automatisch gesynchroniseerd zijn. Je zult dit handmatig moeten doen. Maak je gebruik van GitHub, dan voer je na je commit een synchronisatie uit:

• Duw je commit van je ’lokale’ repository naar je repository op GitHub.

Wanneer je samenwerkt met anderen, wil je als je later verdergaat eerst eventuele aanpassingen van je teamgenoten binnenhalen. Als zij die netjes hebben geduwd naar de repository op GitHub, kun jij die eenvoudig binnenhalen. Bij samenwerken in een team wordt stap 1 dus:

• Haal eventuele nieuwe commits van je GitHub repository binnen.

Gitpod en Replit gebruiken

Gitpod en Replit (of andere online ontwikkelomgevingen) hebben een koppeling met GitHub. Dat betekent dat je vanuit Gitpod en Replit wijzigingen in GitHub kunt opslaan. Zie de handleiding van Gitpod en de handleiding van Replit op deze deze website voor meer informatie.

De Github dev omgeving gebruiken

In de Github dev-omgeving kun je meerdere bestanden tegelijk wijzigen, verplaatsen of toevoegen. Het lijkt erg op Gitpod, maar in tegenstelling tot Gitpod kan de Github dev-omgeving je code niet uitvoeren.

Je komt in de Github dev-omgeving door de punt (".") op je toetsenbord in te drukken op het moment dat je een repo ziet in GitHub.

Links in het scherm zie je al je bestanden. Enkele mogelijkheden zijn:

• Downloaden van een bestand: Klik met de rechtermuisknop op een bestand en kies “download” in het menu dat verschijnt.
• Toevoegen van nieuwe bestanden kan door bestanden van je bureaublad naar de dev-omgeving te slepen.
• Bestanden kopieren, een andere naam geven, verplaatsen of verwijderen.
• Een map maken, een andere naam geven, verplaatsen of verwijderen (letop: Github kan niet goed overweg met mappen waar geen bestanden in staan)

Als je klaar bent met wijzigen, dan commit je de wijzigingen en push je ze naar GitHub. Druk daarvoor links op het versiebeheer icoon (drie rondjes met 2 lijntjes ertussen) en gebruik het menu onder de drie puntjes dat verschijnt op de plek waar je bestanden stonden.
LETOP: Als je vergeet te committen en pushen dan worden je wijzigingen niet opgeslagen!!!

De Github website gebruiken

De Github website werkt niet handig voor het aanbrengen van wijzigingen in je code, maar er zijn een aantal functies die je hier wel handig kunt doen.

Repo’s zoeken

Links in het scherm staan de repo’s die je recent en vaak gebruikt hebt. Door op een repo te klikken wordt deze geladen. De link van de repo staat bovenin je browser, deze heb je bijvoorbeeld nodig als je de repo in Gitpod of replit wilt gebruiken.

Bekijken wat er in een repo zit

Je kunt snel zien wat er in een repo zit door op de bestanden of mappen in de repo te klikken.

Bekijken wat er gewijzigd is

Je kunt alle wijzigingen in een repo terugzien. Een lijst met de laatste wijzigingen krijg je door te klikken op het aantal commits, onder de groene knop met “Code”. Van elke commit kun je zien wat er is gewijzigd, klik daarvoor op het nummer van de commit aan het einde van de regel.

Alle bestanden uit een repo downloaden

Je kunt alle bestanden in een repo downloaden in een zip-bestand. klik op de groene knop “Code” en kies in het menu dat verschijnt voor “Download ZIP”.

Git gebruiken

Veel programmeurs gebruiken git op hun computer om code op de slaan in repo’s. Git is een programma waarin alle commando’s zitten die nodig zijn om met repo’s te werken. Als je hier dagelijks mee werkt en veel commando’s uit je hoofd kent, dan werkt dit heel snel. Voor leerlingen is dit niet zo een handige methode, wij gebruiken hem daarom niet.

Veelgestelde vragen

GitHub 404 fout

Ik heb via email een link ontvangen om toegang te krijgen tot een repo, maar als ik op de link druk dan krijg ik een 404 fout. Wat moet ik doen?

Login op GitHub en druk daarna nogmaals op de link.

Replit (tot eind 2023)

Vanaf begin 2024 wordt Replit vervangen door GitHub met Codespaces
Replit is een online ontwikkelomgeving waarin je code kunt wijzigen en uitvoeren. We gebruiken dit op de havo.

Wat is Replit?

• Replit is een online editor
  • Replit werkt op elk apparaat met internettoegang en een moderne webbrowser, er is geen installatie van apps of programma’s nodig
  • Je code wordt direct bewaard op de replit servers, inclusief oude versies
  • Syntax checks door middel van kleuren van code voorkomt fouten
  • Ondersteuning van heel veel talen: html/css/javascript, python, sqlite, php enzovoort
• Je kunt code die je gemaakt hebt uitvoeren in Replit
  • Snel zien wat je code doet in een preview-venster
  • Bekijk en test je websites uitgebreid in je browser dankzij de ingebouwde webserver
  • Gebruik de ingebouwde shell access voor gevorderde functies
• Je kunt code die je in Replit gemaakt hebt bewaren op GitHub
  • Heel veel goede programmeurs gebruiken GitHub
  • Bewaar de laatste versie van je code op veilig GitHub (minimaal 1x per week, liefst elke les)
  • De docent kan helpen als je code op GitHub staat
  • Je kunt efficiënt samenwerken in groepjes als je code op GitHub bewaart

De eerste keer Replit starten

1. Replit is gratis, sommige functies zoals het wijzigen van private repo’s is afgeschermd in de gratis versie.
2. Je hoeft voor het gebruik van Replit niets te installeren, alles werkt vanuit de browser Gebruik bij voorkeur Chrome of anders Firefox.
3. Ga naar https://replit.com/
4. Druk op de knop “inloggen met Github” om in te loggen.
5. Geef Replit rechten in Github om wijzigingen aan te brengen in jouw repo’s door op de groene knop te drukken.
6. Ga door vanaf stap 2 onder “De volgende keren Replit starten”

De volgende keren Replit starten

1. Ga naar https://replit.com/ en druk op de knop “inloggen met Github” om in te loggen.
2. Klik op de blauwe knop “+Create” en klik in de popup die verschijnt op “Import from Github”.
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/ .
4. Kies de juiste taal (“HTML/CSS/Javascript” voor de website en game, “Bash” voor de webshop)
5. Klik op de knop “Import from Github”. Replit haalt nu de laatste versie van je code uit GitHub
6. Wijzig je code.
7. Test of je code werkt, je kunt op de groene RUN knop drukken om een nieuw voorbeeld te zien.
8. Klik op het “Git” icoontje links in het scherm. Type rechts in het scherm een korte beschrijving van de wijziging, druk op de knop “Commit”, druk op de knop “Push”, druk op toestaan gebruik van je github gegevens.
9. Check in op https://github.com/ dat je codewijzigingen zijn opgeslagen
10. Als je nog verder wilt werken, gaan dan terug naar stap 4.

Veelgestelde vragen

Mijn code springt niet goed in, hoe los ik dat op?

Klik op het icoontje met de drie streepjes rechtsboven het bestand dat je aan het bewerken bent. Replit auto-format het bestand dat je aan het bewerken bent.

Mijn voorbeeld laat alleen het bovenste stukje zien, hoe los ik dat op?

Klik op het icoontje met het vierkantje en het pijltje erdoor, rechtsboven het voorbeeldvenster. Het voorbeeld wordt nu in apart venster geopend. Druk op reload als je het wilt verversen.

Bewaren op Replit lukt niet, er is een foutmelding met access

Vraag docent om hulp

Bewaren op Replit lukt niet, er is een foutmelding met conflict

Vraag docent om hulp

Hoe update ik het voorbeeldvenster?

Druk op reload in je voorbeeldvenster

Hoe kan ik terug naar de laatste versie op GitHub?

1. Ga naar https://repl.io/ en log in met je Github account.
2. Klik op de blauwe knop “+Create” klik in de pop-up die verschijnt op de knop “import from Github”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/

Gitpod (tot eind 2023)

Vanaf begin 2024 wordt GitPod vervangen door GitHub met Codespaces
Gitpod is een online ontwikkelomgeving waarin je code kunt wijzigen en uitvoeren (en veel meer). We gebruiken dit op het vwo.

Wat is Gitpod?

• Gitpod is een online editor (en veel meer)
  • De Gitpod editor is gebaseerd op VS Code. VS Code is een heel populaire editor onder professionele programmeurs.
  • Gitpod werkt op elk apparaat met internettoegang en een moderne webbrowser, er is geen installatie van apps of programma’s nodig
  • Je code wordt direct bewaard op de Gitpod servers, inclusief oude versiesLETOP: In de gratis versie van Gitpod wordt je code van Gitpod verwijderd als je twee weken niets doet.
  • Syntax checks door middel van kleuren van code voorkomt fouten
  • Ondersteuning van heel veel talen: html/css/javascript, python, sqlite, php enzovoort
• Je kunt code die je gemaakt hebt uitvoeren in Gitpod
  • Snel zien wat je code doet in een preview-venster
  • Bekijk en test je websites uitgebreid in je browser door webserver te starten
  • Gebruik de ingebouwde shell access voor gevorderde functies
• Je kunt code die je in Gitpod gemaakt hebt bewaren op GitHub
  • Heel veel goede programmeurs gebruiken GitHub
  • Bewaar de laatste versie van je code op veilig GitHub (minimaal 1x per week, liefst elke les)
  • De docent kan helpen als je code op GitHub staat
  • Je kunt efficiënt samenwerken in groepjes als je code op GitHub bewaart

De eerste keer Gitpod starten

1. Gitpod is gratis, tot maximaal 50 uur per maand.
2. Je hoeft voor het gebruik van Gitpod niets te installeren, alles werkt vanuit de browser Gebruik Chrome of anders Firefox, in 21/22 zijn er problemen met een wit-scherm geconstateerd bij gebruik in Safari.
3. Ga naar https://gitpod.io/
4. Gebruik je Github-account om in te loggen
5. Geef Gitpod rechten in Github om wijzigingen aan te brengen in jouw repo’s (deze stap is verder uitgewerkt onder Q&A “Bewaren op Github lukt niet, er is een foutmelding met access”)

Code maken in Gitpod

1. Ga naar https://gitpod.io/ en log in met je Github account.
2. Klik op de groene knop “New workspace”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/
4. Wijzig je code
5. Test je code
6. Commit je wijzigingen
7. Synchroniseer je code in Gitpod met Github
8. Check in Github dat je codewijzigingen zijn opgeslagen

Veelgestelde vragen

Bewaren op Github lukt niet, er is een foutmelding met access

Zet de permissies van Gitpod goed, zodat hij op jouw account in Github wijzigingen kan maken

1. klik op het icoontje van een poppetje linksonderin, een menu verschijnt
2. klik op “Gitpod: Open Acces Control”, een nieuw scherm verschijnt nadat je “Open” hebt geklikt in de popup
3. klik op de drie puntjes op de regel “Gitpod” en kies “Edit Permissons” in het menu dat verschijnt
4. Zet alle vinkjes aan in de popup die verschijnt en klik op “update permissions”
5. geef toestemming in github als github daarom vraagt (groene knop).

Bewaren op Github lukt niet, er is een foutmelding met conflict

Er zijn conflicten tussen jouw wijzigingen in Gitpod en de wijzigingen die gelijktijdig, meestal door een teamgenoot, gemaakt zijn in een repo. Je moet handmatig kiezen welke wijzigingen je wilt bewaren.

1. Commit je wijzigingen
2. Pull alle wijzigingen uit Github naar Gitpod
3. Kies in de editor welke van de wijzigingen met een conflict je wilt bewaren
4. Test je programma
5. Commit
6. Push je wijzigingen naar Github

Hoe open ik een voorbeeldvenster met mijn website?

1. Klik rechtsonder op “Ports: xxxx”, linksboven verschijnt een menu
2. Klik linksboven op de regel met de poort
3. Klik op het wereldbolletje achteraan op de regel met de poort, een popup verschijnt
4. Klik op “Open” in de popup.

Hoe update ik het voorbeeldvenster?

Druk op reload in je voorbeeldvenster

Hoe kan ik terug naar de laatste versie op GitHub?

1. Ga naar https://gitpod.io/ en log in met je Github account.
2. Klik op de groene knop “New workspace”
3. Knip en plak de link naar de repo op github waar je je code hebt staan. Deze kun je vinden in Github. De link lijkt op https://github.com/emmaus-4h/website-piet/

Mijn code springt niet goed in, hoe los ik dat op?

Klik op [option]+[shift]+f. Gitpod auto-format het bestand dat je aan het bewerken bent.

Ik kan mijn workspace in gitpod nergens meer vinden 

Als je een workspace twee weken niet gebruikt, dan wordt hij door gitpod verwijderd. Je kunt dan een nieuwe workspace maken van de laatste versie van je code die je in github hebt gecommit.

Hoe kan ik zien hoeveel gitpod gebruik ik deze maand nog over heb? 

1. Klik linkonder op het icoontje van een poppetje (je account)
2. Kies “Gitpod: Upgrade subscription”, een nieuw scherm verschijnt nadat je in de popup die verschijnt op “Open” hebt geklikt
3. Je ziet midden boven het aantal gebruikte en resterende uren.
4. Beweeg met je muis over de tijd, er verschijnt een kleine popup die aangeeft van welke tot welke datum de huidige maand loopt

Mijn 50 uur gratis gitpod gebruik zijn op 

Bijna alle leerlingen hebben genoeg aan 50 uur per maand. Als dit bij jouw een keer niet zo is, dan kun je dit als volgt oplossen.

1. Bewaar al je werk op Github vlak voordat je tijd op is.
2. Maak met een ander e-email adres een nieuwe Github account aan.
3. Vraag de docent je Github account toe te voegen aan de repo waarin je werkt.
4. Login bij Gitpod met je nieuwe Github-account en maak een nieuwe workspace aan met de repo waarin je werkte.

Je hebt nu weer 50 uur.

Waar vind ik documentatie over Gitpod?

https://www.gitpod.io/docs/

Arduino IDE

Arduino IDE is een programma waarin je code kunt schrijven en downloaden in je Arduino.

Wat is de Arduino IDE?

De Arduino IDE is een programma waarmee je je Arduino kunt programmeren. De Arduino IDE is beschikbaar voor computers met Windows, Linux en MacOS. Het programma is niet beschikbaar voor iPads en Chromebooks. Functies van de Arduino IDE:

• code-editor
• compileren
• gecompileerde code uploaden naar een Arduino microcontroller (via een USB-kabel)

Installeren van het programma

Op de schoolcomputers is de Arduino-IDE al geïnstalleerd. Als je Arduino thuis wilt gebruiken, dan moet je het zelf installeren. Dat gaat als volgt.

1. De Arduino IDE is gratis. Je hoeft geen account aan te maken.
2. Download de Arduino IDE van https://www.arduino.cc/en/software
3. Installeer het programma zoals je gewend bent om andere programma’s te installeren op je computer.

Je eerste Arduino schets

1. Start de Arduino IDE
2. Sluit de Arduino met een USB-kabel aan op de laptop
3. Stel de juiste Arduino in. Klik in het menu op “Hulpmiddelen”->“Board”->de_Arduino_die_je_hebt. De rode Arduino’s op school zijn “Aduino Nano”.
4. Stel de USB-poort in waarop je de Arduino hebt aangesloten. Klik in het menu op “Hulpmiddelen”->“Poort”->kies_de_juiste_poort. Meestal is de juiste poort iets met “arduino” of “mega” en iets zonder “bluetooth”.
5. Maak een schets. Een programma voor je Arduino microcontroller wordt vaak een schets (Engels: sketch) genoemd. Je kunt beginnen met een voorbeeld-schets. Klik in het menu op “Bestand”->“Voorbeelden”->“Basics”->“Blink”
6. Compileer de schets (vertaal je code naar machinetaal die de Arduino gebruikt). Klik in het menu op “Schets”->“Verifeer/Compileer”.
7. Upload (verstuur naar je Arduino via de USB-kabel). Klik in het menu op “Schets”->“Upload”.
8. Je ziet nu een klein ledje op je Arduino die knippert.
9. Verander de code, bijvoorbeeld delay(1000) aanpassen in delay(200). Herhaal stap 7. Je zult zien dat de Arduino stap 6 (compileren) vanzelf opnieuw doet, omdat je de code hebt aangepast. Het ledje knippert nu sneller. Nu je stap 9 gedaan hebt, weet je zeker dat het jouw programma is dat in de Arduino zit. De Arduino onthoudt namelijk het laatste programma, ook als de stroom eraf is geweest, dus het kan zijn dat het knipperend-led programma er al door een vorige leerling in is gezet.

Extra libraries installeren

De ingewikkeldere sensoren en actuatoren die je kunt aansluiten op je Arduino, zoals displays, hebben libraries nodig om ze te kunnen programmeren. Er zijn twee manieren om libraries te installeren

1. libraries die meegeleverd zijn met Arduino IDE
   Het installeren van libraries die meegeleverd zijn met de Arduino IDE kan via het menu “Schets” -> “Bibliotheek gebruiken” -> “Bibliotheken beheren”.
   Het vinden van de juiste bibliotheek kan wel eens lastig zijn, vraag het de docent als je twijfelt.
   
   
   
2. libraries uit een zip-bestand
   Het installeren van libraries waarvan je een .zip bestand hebt kan via het menu “Schets” -> “Bibliotheken gebruiken” -> “Voeg .ZIP bibliotheek toe”.
   De .zip bestanden vind je vaak terug bij startcode die je van je docent krijgt of op de site van leveranciers van Arduino-hardware.

Goede biblitheken bevatten voorbeeld-code die na installatie van de bibliotheek in de Arduino IDE terug te vinden is in het menu onder “Bestand” -> “Voorbeelden”

Meer informatie

1. Meer informatie over de Arduino-taal vind je op
   https://www.arduino.cc/ klik op “documentation” -> “reference”
2. Meer informatie over de pinnen van je Arduino vind je op
   https://www.arduino.cc/ klik op “hardware” -> kies jouw Arduino -> kies het tabblad “FAQ”

Veelgestelde vragen

Hij doet het niet

1. Kijk of de USB-kabel goed in de Arduino zit (je voelt een kleine klik)
2. Kijk of je de juiste Arduino hebt aangeven in de IDE (Arduino Nano)
3. Kijk of je de juiste USB-poort het aangegeven in de IDE
4. Kijk of er foutmeldingen zijn bij uploaden en lees die aandachtig

Bij het uploaden krijg ik de melding “avrdude: ser_open(): can’t open device”…

Je hebt waarschijnlijk vergeten de juiste USB-poort te kiezen. Kies de juiste USB-poort in het menu onder “Hulpmiddelen”->“Poort”

Ik krijg één of meerdere foutmelding(en) tijdens het compileren

Je hebt fout gemaakt in de code. Bekijk de bovenste foutmelding. Kijk of je de melding begrijpt. Er staat bij op welke regel de fout gevonden is. Probeer de fout in je code op te lossen. Compileer de code daarna opnieuw.

Ik krijg een foutmelding met “undefined” tijdens het compileren

Je hebt waarschijnlijk een variabele gebruikt zonder deze te declareren of een typefout gemaakt in de naam van de variabele.

Compileren en uploaden gaat goed, maar mijn programma doet niet wat ik wil

Laat je programma berichten op de Seriële monitor zetten, zodat kunt meekijken wat er gebeurt en de fout kunt vinden. De seriële monitor van Arduino is een soort console, die je misschien kent van eerdere opdrachten.

1. Zet in de setup() functie de opdracht Serial.begin(115200);
2. Zet aan het begin van loop() functie de opdracht Serial.println("Start");
3. Voeg op meer nuttige plaatsen berichten toe, zodat je weet welke code wel en niet wordt uitgevoerd.
4. Je kunt ook de inhoud van variabelen of de uitkomst van functies afdrukken, bijvoorbeeld met Serial.println("Milliseconde na opstarten" + millis());
5. Open voordat je programma upload de seriele monitor door in de Arduino-IDE te klikken op het menu “Hulpmiddelen” -> “Seriële monitor”, let op dat de snelheid staat ingesteld op 115200.

Ik heb een kleine rode arduino en op de video van arduino-lessen.nl zie ik een grote blauwe arduino

Op school gebruiken wij een Arduino Nano van het merk Suideeeno . Deze heeft dezelfde mogelijkheden als de grote blauwe of groene Arduino Uno . Bij de Nano sluit je draadjes aan via het breadboard, terwijl je de draadjes bij de Uno direct in de Arduino prikt. De pinnen op beide Arduino’s werken hetzelfde, je kunt aan de namen die erbij staan zien welke je moet hebben.

Mijn display heeft andere stekkers dan het display op de video van arduino-lessen.nl

Op school gebruiken we een display van het merk Seeeduino . Dit display kun je met een grove kabeltje aansluiten op de rode Arduino Nano. Het grove kabeltje is het kabeltje met vier draadjes in de kleuren geel-wit-rood-zwart draadjes en twee witte plastic stekkers aan de uiteinden.

Hoe sla ik een sketch op?

1. Kies in het menu “Bestand” -> “Opslaan als”, kies een map en geef je schets een naam. Een schets wordt altijd opgeslagen in een map met dezelfde naam als de schets.

Filius

Filius is een programma waarmee je netwerken kunt namaken en simuleren.

Wat is Filius?

Filius is een programma waarmee je netwerken kunt bouwen en simuleren.

Installeren van het programma

Filius is gratis en je hoeft geen account aan te maken. Je kunt Filius op diverse manieren starten.

1. Open Filius in GitHub en volg de stappen uit de Readme.md. Dit werkt op (bijna) elk apparaat met een moderne webbrowser. Je browser opent GitPod en op de servers van GitPod wordt een Linux-omgeving met Filius geopend. Je kunt in GitPod inloggen met je (gratis) GitHub account.
2. Installeer Filius op je eigen apparaat. Filius is beschikbaar voor Windows, MacOS en Linux.
3. Backup voor als optie 1) (GitPod) meer dan een paar minuten duurt om te starten:
   Filius in Replit login bij replit met je GitHub account, druk op de groene Run knop in replit om Filius te starten, maximize de tab waarin Filius verschijnt.

Veelgestelde vragen

Filius verdwijnt van het scherm en ik krijg de melding “noVNC”.

Als je in de workspace in gitpod een half uur niets aanpast dan wordt de workspace afgesloten. Klikken in Filius telt niet als een aanpassing. Er is geen echte oplossing, maar wel een work-around. Om te voorkomen dat de workspace wordt afgesloten terwijl je in Filius werkt kun je elk half uur een kleine wijziging maken in je workspace, bijvoorbeeld door een puntje aan het einde van je README.md toe te voegen.

Meer informatie

1. Meer informatie over Filius kun je vinden op de website van de maker: https://www.lernsoftware-filius.de
2. De help over het gebruik van Filius zit in het programma: druk op het vraagteken.