Programmeren op De Ring van Putten

Beoordeling website

Je website is een voldoende als:

Je website is een goed als:

Pagina, stijl en navigatie toevoegen

Voeg een extra pagina toe aan je website, en maak een link van de hoofdpagina naar de tweede pagina. Voeg ook stijl toe aan je website met CSS, zodat het er een beetje mooi uit ziet. Je kan stijlregels vinden in het blaadje over CSS. Kijk de filmpjes hieronder om te kijken hoe je dat doet.

Voorbeeldweergave van website in VSCode

Tweede pagina en link toevoegen

Stijl toevoegen

Rand en nog meer stijl toevoegen

Een navigatiebalk maken

Website in VSCode inleveren

VSCode installeren en website overzetten

Hieronder staan vier filmpjes waarin een aantal dingen worden voorgedaan. Soms zien dingen er op jouw laptop net iets anders uit dan in het filmpje.

Visual Studio Code werkt niet op alle laptops, bijvoorbeeld op Chromebooks. Dan moet je op een computer van school werken (bijvoorbeeld in de les het computerlokaal of de Mediatheek). OneDrive werkt vooral op computers van de RentCompany. Als je een andere computer hebt kan je de map van de website ergens anders opslaan.

Filmpje VSCode installeren

Hiermee installeer je het programma Visual Studio Code op je computer. Met dit programma gaan we verder de website maken. Het programma helpt je een klein beetje met de HTML tags, en je kan makkelijk meerdere pagina's en plaatjes toevoegen

Map maken in OneDrive

Maak een map voor je website in OneDrive. Bij jou ziet OneDrive er iets anders uit dan in het filmpje. Het staat bovenaan, in plaats van onderaan. Let vooral op het blauwe wolkje

Map openen in VSCode

Open de map die je net hebt gemaakt in VSCode. Dit moet je elke keer doen als je je website gaat aanpassen.

Broncode overzetten vanaf JSBin

Zet de broncode van de landwebsite die je eerder hebt ingeleverd over naar VSCode. Je moet hiervoor het bestand index.html maken. Dit is altijd de voorpagina van een website. Maak het bestand aan in de map van je website. Zoek nu de website die je eerder hebt ingeleverd op in je verzonden mail en plak het in index.html.

Eerste website afmaken

Maak een kleine website over een land in JSBin. Je pagina moet in ieder geval hebben: alinea's, koppen van verschillende grootte, vetgedrukte tekst, schuingedrukte tekst, een lijst en een plaatje.

(als je al gestart was in VSCode mag daar ook in verdergaan; bij opdracht 3 staat een filmpje over hoe je het dan kan inleveren)

Je kan hier het blaadje over HTML terugvinden. Deze blaadjes liggen ook in het klaslokaal. Verderop staan ook filmpjes.

Je kan de website die je al eerder gemaakt hebt als het goed is terugvinden in je verzonden mail.

Lever je website in door in JSBin te klikken op File -> Save Snapshot. Kopieëer daarna de link uit je adresbalk, en mail de link naar de docent. Hieronder staat ook een filmpje. Vraag om hulp als het niet lukt.

Hieronder staan filmpjes die alles voordoen (zonder geluid):

Koppen maken

Alinea's maken

Vet- en schuingedrukte tekst

Lijst maken

Plaatje toevoegen

JSBin inleveren

Introductie HTML en CSS

Vind hier de twee blaadjes met informatie over HTML en CSS terug.

We gebruiken in de eerste lessen JSBin.com om een website te maken. Later gaan we Visual Studio Code (VSCode) gebruiken. Je mag VSCode alvast installeren.

Opdracht 1: Lesjes FreeCodeCamp

  • Ga naar FreeCodeCamp en klik rechtsboven op "Sign in".
  • Vul je emailadres van school in, en klik op de knop "Continue with Email".
  • Open in een andere tab je email van school. Je hebt een email gekregen met een code.
  • Vul de code in op de website waar je net je email op hebt ingevoerd.
  • Scroll naar onder en klik op "No Thanks"
  • Klik op de bovenste knop "Responsive Web Design Design Certification"
  • Klik op de eerste opdracht van "Learn HTML by Building a Cat Photo App"
  • Maak opdracht 1 t/m 12. Hieronder zijn ze vertaald naar het Nederlands:
  • Opdracht 1

    HTML elementen hebben openingstags zoals <h1> en sluittags zoals </h1>.

    De tekst voor een element moet tussen de openingstag en sluittag staan.

    Vind het h1 element en verander de tekst naar:

    CatPhotoApp

    Opdracht 2

    De elementen h1 tot en met h6 worden gebruikt om aan te geven hoe belangrijk de inhoud eronder is: een kop. Hoe lager het nummer, hoe belangrijker de inhoud eronder. Dus h2 elementen zijn minder belangrijk dan h1 elementen.

    Onder het h1 element, voeg een h2 element toe met deze tekst

    Cat Photos

    Opdracht 3

    Het p element wordt gebruikt om een alinea met tekst op een website te zetten. Maak een p element en geef het de volgende tekst:

    See more cat photos in our gallery

    Opdracht 4

    Je kan commentaar in je code zetten zonder dat de bezoekers van je website dat zien. Je kan het ook gebruiken om een deel van je pagina even uit te zetten.

    In HTML begint een stukje commentaar met <!--, daarna komen één of meerdere regels aan commentaar, en daarna --> om het af te sluiten. Bijvoorbeeld <!-- TE DOEN: Haal h1 weg --> bevat het commentaar TE DOEN: Haal h1 weg

    Voeg een stukje commentaar toe boven het p element met de tekst

    TODO: Add link to cat photos

    Opdracht 5

    HTML heeft elementen om aan te geven waarvoor een stuk van de pagina bedoeld is. Bijvoorbeeld als kop, als inhoud of als afsluiting van de pagina. Dit helpt zoekmachines het belangrijkste van je pagina te vinden. Je kan ook een mooie rand om je website heen zetten op deze manier.

    Zorg ervoor dat de koppen, commentaar en alinea hieronder in een main element staan. Dat doe je door <main> boven het h1 element te zetten en een </main> achter het p element te zetten.

    Opdracht 6

    In HTML kunnen elementen binnen elkaar staan. Bijvoorbeeld het h1 element binnen het main zoals hieronder. Het is handig om spaties toe te voegen, zodat je direct kan zien welke elementen binnen elkaar zitten. Hoe meer spaties aan het begin, hoe 'dieper' het element zit.

    Hieronder zie je dat het h1, h2 en commentaar element twee spaties meer hebben dan het main element. Zorg ervoor dat er ook twee spaties voor het p element komen te staan.

    Opdracht 7

    Je kan plaatjes toevoegen aan je website door het img element te gebruiken. Het img element heeft geen sluittag, alleen een openingstag.

    Voeg hieronder een img element toe. Op dit moment zie je nog geen plaatje, omdat de computer nog niet weet welk plaatje er getoond moet worden. Dat komt in de volgende opdracht.

    Opdracht 8

    In HTML heb je ook speciale 'attributen'. Deze staan in de openingstag van een element. Het src attribuut van een img element vertelt aan de computer waar het plaatje gevonden kan worden. Een voorbeeld van een img element met een src attribuut is: <img src="https://www.example.com/the-image.jpg">.

    Voeg in het bestaande img element een src attribuut toe met deze URL:

    https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg

    Opdracht 9

    Het is belangrijk dat alle img elementen een alt attribuut hebben. Met dat attribuut kunnen blinden en slechtzienden laten voorlezen wat er in een plaatje staat. Bijvoorbeeld: <img src="kat.jpg" alt="Een kat"> heeft een alt attribuut met de tekst Een kat

    Voeg aan het img element een alt attribuut toe met deze tekst:

    A cute orange cat lying on its back

    Opdracht 10

    Je kan een link naar een andere pagina maken met het a element. Bijvoorbeeld <a href="https://freecodecamp.org"></a> maakt een link naar freecodecamp.org

    Voeg een nieuwe link toe na de alinea, die linkt naar https://freecatphotoapp.com. Je kan de link nog niet zien, dat komt in de volgende opdracht.

    Opdracht 11

    De tekst van de link waarop je kan klikken komt tussen de openingstag en sluittag van het a element. Bijvoorbeeld: <a href="https://www.freecodecamp.org">klik hier</a> is een link naar deze website met de tekst klik hier.

    Zorg ervoor dat de tekst link to cat pictures als tekst van de link gebruikt wordt.

    Opdracht 12

    Elk stukje tekst kan een link worden. Bijvoorbeeld de tekst binnen een p element.

    Zorg ervoor dat in het p element dat je al hebt, de tekst cat photos een link wordt. Dat kan je doen door voor de tekst een a element openingstag te zetten (<a>), en een sluit-tag achter de tekst te zetten (</a>).

    Schrijf daarna een href attribuut in de openingstag, en geef het de waarde https://freecatphotoapp.com. Kijk ook naar het voorbeeld dat in de Engelse tekst staat.

Opdracht 2: Een eigen website over een land

Maak met HTML een website over een land met JSBin. Je mag zelf kiezen welk land. Gebruik in de eerste les: alinea's, titels van verschillende grootte, vetgedrukte tekst, schuingedrukte tekst, een lijst en een plaatje.

Ben je klaar met de eerste opzet van je website in HTML? Maak je website dan iets mooier met CSS. Lees het blaadje hierover door, en probeer het uit in JSBin in de CSS tab.




Periode 2: Micro:bit

Opdracht lijn volgen

Open in Google Chrome de website van micro:bit MakeCode. Via deze website kan je programma's voor de micro:bit maken.

In de les ben je bezig geweest met een opdrachten rond de lijn-volg sensor. Je kan het hieronder teruglezen:

Opdrachten ultrasoon-sensor en radio

In de les ben je bezig geweest met drie opdrachten rond de ultrasoon-sensor en de radio. Je kan ze hieronder teruglezen

Introductie micro:bit

Opdracht 1

Open in Google Chrome de website van micro:bit MakeCode. Via deze website kan je programma's voor de micro:bit maken.

Opdracht 2

Zet via het tandwiel in de rechterbovenhoek de taal op het Nederlands. Vertaal de site niet met Google Translate (dan werkt de site niet goed meer).

Opdracht 3

Maak via de knop op de voorpagina een nieuw project, en noem het "knipperend hart". Maak nu een programma, dat voor 2 seconden een hart tekent op de lichtjes aan de voorkant van de microbit, en daarna voor 1 seconde het scherm leeg maakt.

Je hebt daarvoor de blokken "de hele tijd" (deze staat er al), "toon lichtjes" en "pauzeer (ms)" uit de basis-blokken nodig.

Druk op de play-knop onder de virtueel micro:bit, en kijk of het werkt

Opdracht 4

Sluit nu een echte micro:bit met de kabel aan op de USB-poort van je computer. Klik op de puntjes naast de "Downloaden"-knop, en klik op "Verbind het apparaat". Klik nu door de stappen heen. Als de "verbinding maken" knop grijs is, klik dan eerst op "BBC micro:bit".

Nu de micro:bit verbonden is, klik op "Downloaden". Kijk of de micro:bit gaat knipperen aan de achterkant. Als het goed is zie je nu een hart knipperen op de echte micro:bit.

Werkt het niet, en download je in plaats daarvan een bestand? Dan moet je je micro:bit nog een keer aansluiten zoals hierboven staat.

Opdracht 5

Pas je programma nu zo aan dat het hart knippert als een echt hart. Dus twee slagen kort na elkaar, en dan wat langer een pauze.

Opdracht 6

Maak de opdrachten die bij "beginnerscursussen" staan op de voorpagina, dus "Name Tag", "Smiley Buttons", "Dice", "Love Meter" en "Micro Chat". Kies voor programmeren met "blokken".

Extra opdrachten

Kijk op de voorpagina bij "Tutorials for the new micro:bit".

Periode 1: Scratch

Eindopdracht Scratch

Opdracht 1

Werk verder aan het het doolhofspel / de eindopdracht die in de les is uitgelegd.

Zo vind je project terug: ga naar Scratch, log in met je account, en klik rechtsboven op het mapje om daar je project te vinden.

Extra opdrachten

Maak een quiz in Scratch, bewerk een plaatje (bijvoorbeeld voor in Scratch) met Photopea of (in het Engels, uitdagend) Draw beautiful fractals with Scratch

Beverwedstrijd, elkaars project nakijken

Opdracht 1

Maak een aantal opdrachten van de Beverwedstrijd. Maak de eerste twee 'makkelijke' opdrachten, en kijk daarna of je nog twee makkelijke, uitdagende of moeilijke opdrachten wil maken.

Opdracht 2

Kijk elkaars volgvissenspel na. Open een willekeurig project via deze pagina. Vul daarna dit formulier in. Kijk op deze manier een aantal projecten na.Dit kon alleen tijdens de les.

Opdracht 3

Werk verder aan het het doolhofspel / de eindopdracht die in de les is uitgelegd.

Zo vind je project terug: ga naar Scratch, log in met je account, en klik rechtsboven op het mapje om daar je project te vinden.

Extra opdracht over videobewerken

Installeer kdenlive, dat is een gratis videobewerkingsprogramma. Download ook dit voorbeeldvideobestand. Probeer in de les het programma kort uit.

Extra opdrachten

Maak een quiz in Scratch, of (in het Engels, uitdagend) Draw beautiful fractals with Scratch

Scratch inleveren en Minigame

Opdracht 1

Lever je spel in dat je vorige week in de les hebt gemaakt. Dat kan je doen door de docent een email te sturen met je Scratch-project als bijlage.

Lees hier hoe je dat doet

Vind eerst je project terug. Ga naar Scratch, log in met je account, en klik rechtsboven op het mapje om je project terug te vinden.

Download daarna je project in Scratch, via Bestand -> "Opslaan op je computer". Je project staat nu in de downloads-map van je computer, bijvoorbeeld: Volgvissen.sb3

Ga naar je email toe. Dat kan via login.microsoft.com, met het puntjesmenu naar Outlook.

Maak een nieuwe email. Vul de naam van de docent in, in het "Aan"-veld. Vul als onderwerp in: "Inleveren Scratch". Schrijf ook een korte tekst in de email over wat je inlevert.

Voeg nu het Scratch-project als bijlage toe aan de mail. Dat kan via het paperclipje -> "Op deze computer zoeken". Daarna kan je het project terugvinden in je downloads. Kijk goed naar de tijd bij het bestand, om te zien of het de goede versie is.

Opdracht 2

Begin aan de opdracht over het maken van een Doolhof-minigame

Introductie Scratch

Opdracht 1

Open het voorbeeldproject in Scratch en klik op "Bekijk van binnen".

Opdracht 2

Stel de taal in op het Nederlands als deze nog op het Engels staat. Dat kan via "Settings" -> "Language" -> "Nederlands"

Opdracht 3

Maak een Scratch-account, zodat je werk automatisch wordt opgeslagen. Je kan een Scratch-account maken via de knop rechtsboven: "Word Scratcher".

Kies als gebruikersnaam de drie letters en zes cijfers van je emailadres (abc123456). Gebruik je emailadres van school. Je krijgt een mailtje van Scratch om je adres te bevestigen. Klik op de link in de mail.

Opdracht 4

Ga terug naar het voorbeeldproject, klik op "Bekijk van binnen" en klik op de "Remix" knop zodat je wijzigingen opgeslagen worden in je account.

Opdracht 5

Zorg ervoor dat de kleine vis de hele tijd op dezelfde plek als je muisaanwijzer staat. Je hebt daarvoor deze blokken nodig, zet ze op de juiste manier neer en druk op de groene vlag:

Opdracht 6

Zorg ervoor dat de haai de kleine vis achterna gaat. Je hebt daarvoor deze blokken nodig:

Opdracht 7

Laat de haai de vis vangen. De haai gedraagt zich een beetje raar. Je kan de computer vertellen dat de haai iets rustiger moet doen als die de vis raakt. Dat kan met de blokken die hieronder staan. Het raak ik blok kan in het vakje van de als<…>dan.

Opdracht 8

Laat de haai happen. Dat kan door elke seconde het uiterlijk te veranderen. Voeg deze blokken toe in de juiste volgorde:

Opdracht 9

Je mag het project zelf aanvullen om er je eigen spel van te maken. Je kan de haai bijvoorbeeld iets laten zeggen als de vis geraakt wordt, of een geluid laten afspelen. Misschien kan de vis powerups oppakken, of wordt er een score bijgehouden (met de blokken bij 'variabelen').

Extra opdrachten

Ben je helemaal klaar met de opdrachten hierboven? Kijk dan alvast naar het maken van een minigame met Scratch

Fractals tekenen met Scratch? Draw beautiful fractals with Scratch

Office 365

Opdrachten

Opdracht 1

Ga in Office 365 via het puntjesmenu naar OneDrive, en klik links op "Mijn bestanden". Maak voor elk schoolvak dat je hebt een nieuw mapje aan.

Opdracht 2

Maak in OneDrive een nieuw Word-document aan in de map van Programmeren die je net hebt gemaakt. Je kan de naam en map aanpassen via het document-menu linksboven:

Opdracht 3

Deel het document met degene die naast je zit zodat je er samen in kan werken. Dat kan via het samenwerk-menu rechtsboven. Degene met wie je deelt krijgt een email, en in OneDrive staat het bij "Gedeeld":

Opdracht 4

Maak samen met degene die naast je zit een lijstje van 10 sneltoetsen. Leg voor elke sneltoets uit wat de toets doet. Je hebt in de les gehoord wat sneltoetsen zijn. Je mag op internet zoeken (maar alleen kopiëren met bronvermelding). Een voorbeeld van een sneltoets is CTRL + F, om iets te zoeken.

Opdracht 5

Verander in het samenwerk-menu nu de modus van "Bewerken" naar "Controleren". Pas nu wat aan in het document, en kijk wat er gebeurt op beide schermen. Klik ook op de tekst die je hebt aangepast.

Opdracht 6

Selecteer een stukje van de tekst, klik er met de rechtermuisknop op, en kies voor "Nieuwe opmerking". Waar kan dit handig voor zijn?

Opdracht 7

Is het document over sneltoetsen af en netjes? Sla het document op op je computer via "Bestand" -> "Opslaan als" -> "Kopie downloaden". Lever het in via dit formulier.

Opdracht 8

Ga terug naar de startpagina van Office 365, en bekijk de programma's Outlook, Excel, OneNote, Planner en Whiteboard kort. Het kan handig zijn om deze programma's voor school te gebruiken.

Extra opdrachten

Installeren en introductie