‹Terug naar zoeken

H5 P3 inhaal + website

HAVO 5s
1 / 46
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

In deze les zitten 46 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

HAVO 5s

Slide 1 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Wat is de basisstructuur van een HTML-document?
A
<body>
B
<head>
C
<!DOCTYPE html>
D
<html>

Slide 4 - Quizvraag

Deze slide heeft geen instructies

Hoe maak je een hyperlink in HTML?
A
<link url='url'>link</link>
B
<a href='url'>link</a>
C
<a link='url'>link</a>
D
<href='url'>link</href>

Slide 5 - Quizvraag

Deze slide heeft geen instructies

Welke tag gebruik je voor een paragraaf?
A
<para>
B
<paragraph>
C
<p>
D
<text>

Slide 6 - Quizvraag

Deze slide heeft geen instructies

Welke taal wordt gebruikt voor interactiviteit?
A
CSS
B
HTML
C
SQL
D
JavaScript

Slide 7 - Quizvraag

Deze slide heeft geen instructies

Wat is een kenmerk van responsief ontwerp?
A
Aanpassen aan verschillende schermformaten
B
Vaste layout voor desktop
C
Gebruik van alleen afbeeldingen
D
Geen media queries gebruiken

Slide 8 - Quizvraag

Deze slide heeft geen instructies

Wat is de functie van CSS?
A
Structureren van de webpagina
B
Styling van HTML-elementen
C
Toevoegen van interactiviteit
D
Programmeren van webapplicaties

Slide 9 - Quizvraag

Deze slide heeft geen instructies

Leerdoelen
Aan het einde van deze periode kunnen de leerlingen zelfstandig een persoonlijke CV-website ontwerpen en ontwikkelen die bestaat uit de volgende pagina's: 
  • Home 
  • Wie ben ik
  • Mijn skills
  • Opleiding
  • Werkervaring
  • Hobby's 
  • Neem contact

De website moet voldoen aan de principes van UX-design en heuristieken en opgebouwd zijn met een gestructureerde indeling bestaande uit een navigatiebalk, header, main content en footer.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Lesdoel week 1 : Websiteplanning en Wireframing
De leerling kan een wireframe en projectbeschrijving opleveren die de structuur en doelstellingen van de CV-website verduidelijken.

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Website C.V. Opdracht
Week
Opdracht
Weging
1
Websiteplanning en wireframing
15 punten
2
HTML-structuur opzetten
15 punten
3 
Styling met CSS en UX-principes
25 punten
4
Content toevoegen en verbeteren
15 punten
5
Contactformulier en oplevering
25 punten
6
marge

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Wireframing
Wireframing is het maken van een eenvoudige visuele schets van een website om de structuur en indeling van de pagina’s te bepalen.
  • Duidelijke structuur
  • Efficiënter werken
  • Gebruikerservaring  (UX)
  • Navigatiebal
  • Header
  • Main content
  • Footer

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Ik weet waarom het handig is een wireframe te gebruiken
Ja
Deels
Nee

Slide 14 - Poll

Deze slide heeft geen instructies

Waarom een wireframe?

Slide 15 - Open vraag

Deze slide heeft geen instructies

Mirco.com
  1. Je kan het op papier maken 
  2. Je kan het ook in een programma maken

Miro
Figma
Canva
Balsamiq


Kies eentje wat het prettigst werkt.

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Inleveren
Eind deze week, week opdracht 1 inleveren via teams

Slide 17 - Tekstslide

Startklaar zitten.
Afsluiten
Samenvatting: klassikaal
Agenda: Inleveren week 1 + vooruit kijken naar opdracht week 2

Slide 18 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 19 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Lesdoel
  1. Na deze les kan de leerling de JavaScript-functie setTimeout of setInterval gebruiken om een automatische overschakeling naar de volgende ronde te realiseren als de speler het woord niet op tijd raadt. Hierbij wordt een timer zichtbaar weergegeven op het scherm, die aftelt en rood en groter wordt als er nog maar 5 seconden over zijn. Bij het verlopen van de tijd verschijnt een melding.

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Wat doet de functie setTimeout?
A
Voegt een gebeurtenis toe
B
Stelt een timer in voor een functie
C
Verwijdert een timer
D
Maakt een nieuwe functie aan

Slide 22 - Quizvraag

Deze slide heeft geen instructies

Wat doet de setInterval functie in JavaScript?
A
Voert een functie herhaaldelijk uit
B
Stop de uitvoering van een functie

Slide 23 - Quizvraag

Deze slide heeft geen instructies

Hoeveel milliseconden zijn er in 1 seconde?
A
10 milliseconden
B
10000 milliseconden
C
1000 milliseconden
D
100 milliseconden

Slide 24 - Quizvraag

Deze slide heeft geen instructies

Lingo Opdracht
Week
Opdracht
Weging
1
Analyse van bestaande code
15 punten
2
Spelerbeheer toevoegen
15 punten
3 
Meerdere rondes toevoegen
15 punten
4
Scorebord implementeren
15 punten
5
Timer voor beurten
15 punten
6
Eindscherm en winnaar
15 punten

Slide 25 - Tekstslide

Deze slide heeft geen instructies

Setitmeout functie
  • Wat doet setTimeout
Het voert een functie uit 1x uit na ingestelde tijd
  • Hoe stel je de tijd in?
De basisstructuur is: setTimeout(function, tijdInMilliseconden);

Voorbeeld:
setTimeout(
() => {
    console.log("Dit bericht verschijnt na 3 seconden.");
}, 
3000); 

Slide 26 - Tekstslide

Deze slide heeft geen instructies

Setinterval functie
  • Wat doet setInterval
Het voert een functie uit 1x uit na ingestelde tijd
  • Hoe stel je de tijd in?
De basisstructuur is: setInterval(function, tijdInMilliseconden);

Voorbeeld:
setTimeout(
() => {
    console.log("Dit bericht verschijnt na 3 seconden.");
}, 
3000); 

Slide 27 - Tekstslide

Deze slide heeft geen instructies

Opdracht
1: Bouw een timer in die:

  1. Aftelt van 10 naar 0.
  2. Een melding toont wanneer de tijd om is.
  3. Automatisch naar een nieuwe ronde gaat als de tijd op is.


2: Voor de snelle leerlingen:

  • Elke 2 seconden een randomrekensom uitvoeren.
  • Dit gebeurt gedurende 20 seconden
  • Een melding toont wanneer de tijd om is.
  • Automatisch naar een nieuwe ronde gaat als de tijd op is.
timer
15:00

Slide 28 - Tekstslide

Deze slide heeft geen instructies

Opdracht
Opdracht:
let tijdOver = 10;

function startTimer() {
    const timerInterval = setInterval(() => {
        console.log(`Tijd over: ${tijdOver} seconden`);
        tijdOver--;

        if (tijdOver < 0) {
            clearInterval(timerInterval); // Stop de timer
            console.log("Tijd is om! Naar de volgende ronde.");
        }
    }, 1000); // Aftellen elke seconde
}

startTimer();

Slide 29 - Tekstslide

Deze slide heeft geen instructies

Opdracht
Voor de snelle leerlingen:
function startInterval() {
    const intervalId = setInterval(() => {
        console.log("Dit gebeurt elke 2 seconden.");
    }, 2000);

    // Stop na 10 seconden
    setTimeout(() => {
        clearInterval(intervalId);
        console.log("Interval gestopt.");
    }, 10000);
}

startInterval();

Slide 30 - Tekstslide

Deze slide heeft geen instructies

Ik vond deze opdracht
Heel makkelijk
Makkeljk
Wel te doen
Moeilijk
Heel moeilijk

Slide 31 - Poll

Deze slide heeft geen instructies

zet jouw code hier van de 1e opdracht

Slide 32 - Open vraag

Deze slide heeft geen instructies

Hoe ver ben je gekomen?
Ik heb nog geen een functie geanalyseerd
Ik heb een functie geanalyseerd
Ik heb de helft van de functies geanalyseerd
Ik moet nog een functie analyseren
Ik heb alle functies geanalyseerd

Slide 33 - Poll

Deze slide heeft geen instructies

Bonus opdracht
Verder aan de slag met jouw lingo project 2 spelers

Bonusopdracht:

Laat de timer rood en groter worden wanneer er nog maar 5 seconden over zijn. Of maak een visuele timer zoals een stopwatch.

Slide 34 - Tekstslide

Deze slide heeft geen instructies

Afsluiting
Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw lingo-spel inleveren via teams.

Slide 35 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 36 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 37 - Tekstslide

Deze slide heeft geen instructies

Welke argumenten kan de alert functie accepteren?
A
Een object met eigenschappen.
B
Een getal en een string.
C
Een enkele tekststring.
D
Een array van strings.

Slide 38 - Quizvraag

Deze slide heeft geen instructies

Hoe wordt de alert functie aangeroepen?
A
Met display('je bericht');
B
Met showAlert('je bericht');
C
Met alert('je bericht');
D
Met message('je bericht');

Slide 39 - Quizvraag

Deze slide heeft geen instructies

Wat doet de alert functie in JavaScript?
A
Verandert de achtergrondkleur van de pagina.
B
Voegt een afbeelding toe aan de pagina.
C
Verzendt data naar de server.
D
Toont een bericht aan de gebruiker.

Slide 40 - Quizvraag

Deze slide heeft geen instructies

Lesdoel
  1. Lesdoel: De leerlingen leren een eenvoudig eindscherm te maken in JavaScript waarin via een alert wordt aangegeven welk team heeft gewonnen. Daarnaast leren zij hoe zij een creatief popupvenster kunnen ontwerpen als bonusopdracht.

Slide 41 - Tekstslide

Deze slide heeft geen instructies

Lingo Opdracht
Week
Opdracht
Weging
1
Analyse van bestaande code
15 punten
2
Spelerbeheer toevoegen
15 punten
3 
Meerdere rondes toevoegen
15 punten
4
Scorebord implementeren
15 punten
5
Timer voor beurten
15 punten
6
Eindscherm en winnaar
15 punten

Slide 42 - Tekstslide

Deze slide heeft geen instructies

Alert('......')
Syntax:  window.alert("jouw bericht hier!");
window hoef je niet erbij te zetten

Van de DOM bevindt het zich in de Window niveau

Als de alert wordt aangeroepen dan worden alle
andere instructies gepauzeerd 

ook de setTimeout wordt op pauze gezet
wat was setTimeout ook alweer?

Slide 43 - Tekstslide

Deze slide heeft geen instructies

Voorbeeld
instructie stap 1 wordt uitgevoerd

instructie stap 2 wordt uitgevoerd - dit is de alert

zolang ik de knop ok van de alert niet in druk wordt instructie stap 3 niet uitgevoerd

Slide 44 - Tekstslide

Deze slide heeft geen instructies

Hoe maak ik een mooie popup
Dit doe je in combinatie HTML, CSS en javascript.

Je krijgt van mij een bestand waar dit gebeurt. Zoek uit hoe dit werkt en kijk of jij dit wilt toepassen in jouw lingo.

Niet verplicht maar wel leerzaam!

Slide 45 - Tekstslide

Deze slide heeft geen instructies

Afsluiting
Klasikaal behandelen

Planning: Schrijf in jouw agenda, project lingo 2 spelers inleveren uiterst a.s. zondag via teams!

Slide 46 - Tekstslide

Deze slide heeft geen instructies

Meer lessen zoals deze

H5 P2 Lingo - REVERSE ENGINEERING

- Les met 41 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Les met 47 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

JavaScript quiz 1

- Les met 16 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

P6 WEEK 2 H5S - INFORMATICA

- Les met 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

P1 Week 2

- Les met 50 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 3.1

- Les met 17 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 2.2

- Les met 25 slides
InformaticaMiddelbare schoolhavoLeerjaar 4