M4S - CV WEBSITE

Mavo 4s

1 / 47

Slide 1: Slide

InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 47 slides, with interactive quizzes and text slides.

Lesson duration is: 90 min

Items in this lesson

Mavo 4s

Slide 1 - Slide

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 3 - Slide

This item has no instructions

Wat is de basisstructuur van een HTML-document?

<body>

<head>

<!DOCTYPE html>

<html>

Slide 4 - Quiz

This item has no instructions

Hoe maak je een hyperlink in HTML?

<href='url'>link</href>

Slide 5 - Quiz

This item has no instructions

Welke tag gebruik je voor een paragraaf?

<para>

<p>

<text>

Slide 6 - Quiz

This item has no instructions

Welke taal wordt gebruikt voor interactiviteit?

CSS

HTML

SQL

JavaScript

Slide 7 - Quiz

This item has no instructions

Wat is een kenmerk van responsief ontwerp?

Aanpassen aan verschillende schermformaten

Vaste layout voor desktop

Gebruik van alleen afbeeldingen

Geen media queries gebruiken

Slide 8 - Quiz

This item has no instructions

Wat is de functie van CSS?

Structureren van de webpagina

Styling van HTML-elementen

Toevoegen van interactiviteit

Programmeren van webapplicaties

Slide 9 - Quiz

This item has no instructions

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 werkervaring
Mijn skills
Opleiding
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, main content. Een header en footer mag erbij maar is niet verplicht.

Slide 10 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Website C.V. Opdracht

Week

Opdracht

Weging

Websiteplanning en wireframing

15 punten

HTML-structuur opzetten

15 punten

Styling met CSS en UX-principes

25 punten

Content toevoegen en verbeteren

15 punten

Contactformulier en oplevering

25 punten

marge

Slide 12 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Ik weet waarom het handig is een wireframe te gebruiken

Deels

Nee

Slide 14 - Poll

This item has no instructions

Waarom een wireframe?

Slide 15 - Open question

This item has no instructions

Mirco.com

Je kan het op papier maken
Je kan het ook in een programma maken

Miro

Figma

Canva

Balsamiq

Kies eentje wat het prettigst werkt.

Slide 16 - Slide

This item has no instructions

Inleveren

Eind deze week, week opdracht 1 inleveren via teams

Slide 17 - Slide

Startklaar zitten.

Afsluiten

Samenvatting: klassikaal

Agenda: Inleveren week 1 + vooruit kijken naar opdracht week 2

Slide 18 - Slide

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Slide 19 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 20 - Slide

This item has no instructions

Wat is een webbrowser?

Een type computerhardware

Een sociaal netwerk

Software om webpagina's te bekijken

Een videospeler

Slide 21 - Quiz

This item has no instructions

Wat is een veelgebruikte programmeertaal voor websites?

CSS

HTML

Python

Java

Slide 22 - Quiz

This item has no instructions

Website C.V. Opdracht

Week

Opdracht

Weging

Websiteplanning en wireframing

15 punten

HTML-structuur opzetten

15 punten

Styling met CSS en UX-principes

25 punten

Content toevoegen en verbeteren

15 punten

Contactformulier en oplevering

25 punten

marge

Slide 23 - Slide

This item has no instructions

Lesdoel

Lesdoel: De leerlingen kunnen hun CV-website bouwen volgens hun eigen ontwerp en een functionele HTML-structuur opzetten.

Slide 24 - Slide

This item has no instructions

HTML & CSS

HTML: Daar delen wij de website mee in door HTML code te schrijven

CSS: Daar maken wij de website mooi mee door CSS code toe te voegen aan HTML

Slide 25 - Slide

This item has no instructions

HTML zonder CSS

Dit is alleen HTML code

Dit is HTML met CSS

Slide 26 - Slide

This item has no instructions

HTML - TAGS

HTML BESTAAT UIT TAGS

<HTML> = OPENING TAG

</HTML> = SLUITING TAG

<HEAD> = OPENING TAG

</HEAD> = SLUITING TAG

ENZ.

Slide 27 - Slide

This item has no instructions

HTML basis structuur

HTML bestaat voornamelijk uit HTML tags en begint altijd met een basisstructuur

een html tag is bijvoorbeeld

er bestaan heel veel html tags

html basisstructuur

Slide 28 - Slide

This item has no instructions

andere informatie en bestanden die html nodig heeft

Slide 29 - Slide

This item has no instructions

HTML

Slide 30 - Slide

This item has no instructions

HTML

Zoek het volgende uit

ik wil een foto toevoegen op mijn website hoe doe ik dat?
ik wil een koptekst toevoegen in mijn html hoe doe ik dat?
ik wil een navigatie toevoegen in mijn thml hoe doe ik dat?
ik wil een footer toevoegen in mijn html hoe doe ik dat?

gebruik hiervoor de volgende link: w3schools

Slide 31 - Slide

This item has no instructions

zet jouw antwoorden hier

Slide 32 - Open question

This item has no instructions

HTML element

HTML element

Een HTML tag kan

attributen noemen.

dit zijn eigenschappen

die de HTML tag kan

beinvloeden

Slide 33 - Slide

This item has no instructions

Ik vond deze opdracht

Heel makkelijk

Makkeljk

Wel te doen

Moeilijk

Heel moeilijk

Slide 34 - Poll

This item has no instructions

zet jouw code uit het bestand home.html

Slide 35 - Open question

This item has no instructions

Afsluiting

Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw eerste versie cv website.

Slide 36 - Slide

This item has no instructions

STARTKLAAR!

Tellie in zakkie

Slide 37 - Slide

Startklaar zitten.

Voorkennis activeren

Slide 38 - Slide

This item has no instructions

Welke argumenten kan de alert functie accepteren?

Een object met eigenschappen.

Een getal en een string.

Een enkele tekststring.

Een array van strings.

Slide 39 - Quiz

This item has no instructions

Hoe wordt de alert functie aangeroepen?

Met display('je bericht');

Met showAlert('je bericht');

Met alert('je bericht');

Met message('je bericht');

Slide 40 - Quiz

This item has no instructions

Wat doet de alert functie in JavaScript?

Verandert de achtergrondkleur van de pagina.

Voegt een afbeelding toe aan de pagina.

Verzendt data naar de server.

Toont een bericht aan de gebruiker.

Slide 41 - Quiz

This item has no instructions

Lesdoel

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 42 - Slide

This item has no instructions

Lingo Opdracht

Week

Opdracht

Weging

Analyse van bestaande code

15 punten

Spelerbeheer toevoegen

15 punten

Meerdere rondes toevoegen

15 punten

Scorebord implementeren

15 punten

Timer voor beurten

15 punten

Eindscherm en winnaar

15 punten

Slide 43 - Slide

This item has no instructions

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 44 - Slide

This item has no instructions

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 45 - Slide

This item has no instructions

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 46 - Slide

This item has no instructions

Afsluiting

Klasikaal behandelen

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

Slide 47 - Slide

This item has no instructions

M4S - CV WEBSITE

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Quiz

Slide 5 - Quiz

Slide 6 - Quiz

Slide 7 - Quiz

Slide 8 - Quiz

Slide 9 - Quiz

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Poll

Slide 15 - Open question

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Slide

Slide 20 - Slide

Slide 21 - Quiz

Slide 22 - Quiz

Slide 23 - Slide

Slide 24 - Slide

Slide 25 - Slide

Slide 26 - Slide

Slide 27 - Slide

Slide 28 - Slide

Slide 29 - Slide

Slide 30 - Slide

Slide 31 - Slide

Slide 32 - Open question

Slide 33 - Slide

Slide 34 - Poll

Slide 35 - Open question

Slide 36 - Slide

Slide 37 - Slide

Slide 38 - Slide

Slide 39 - Quiz

Slide 40 - Quiz

Slide 41 - Quiz

Slide 42 - Slide

Slide 43 - Slide

Slide 44 - Slide

Slide 45 - Slide

Slide 46 - Slide

Slide 47 - Slide

More lessons like this

M4S - CV WEBSITE

H5 P3 inhaal + website

WEEK 3 - INFORMATIE TECHNOLOGIE

H5 P2 Lingo - REVERSE ENGINEERING

WEEK 5 - INFORMATIE TECHNOLOGIE

WEEK 4 - INFORMATIE TECHNOLOGIE

WEEK 5 - INFORMATICA

WEEK 2 - INFORMATICA