‹Revenir à la recherche

H5 - CV WEBSITE

Havo 5
1 / 47
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 47 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

Havo 5

Slide 1 - Diapositive

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 4 - Quiz

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'instructions

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

Slide 6 - Quiz

Cet élément n'a pas d'instructions

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

Slide 7 - Quiz

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 14 - Sondage

Cet élément n'a pas d'instructions

Waarom een wireframe?

Slide 15 - Question ouverte

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'instructions

Inleveren
Eind deze week, week opdracht 1 inleveren via teams

Slide 17 - Diapositive

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

Slide 18 - Diapositive

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 19 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Wat is een webbrowser?
A
Een type computerhardware
B
Een sociaal netwerk
C
Software om webpagina's te bekijken
D
Een videospeler

Slide 21 - Quiz

Cet élément n'a pas d'instructions

Wat is een veelgebruikte codeertaal voor websites?
A
CSS
B
HTML
C
Python
D
Java

Slide 22 - Quiz

Cet élément n'a pas d'instructions

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 23 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 24 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

HTML zonder CSS
 
Dit is alleen HTML code
Dit is HTML met CSS

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

HTML - TAGS
HTML BESTAAT UIT TAGS

<HTML>  = OPENING TAG
</HTML> = SLUITING TAG

<HEAD> = OPENING TAG
</HEAD> = SLUITING TAG 

ENZ.
ENZ. 
ENZ.

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

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

een html tag is bijvoorbeeld 
<html> </html>
<head> </head>

er bestaan heel veel html tags


html basisstructuur

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

andere informatie en bestanden die html nodig heeft 

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

HTML

Slide 30 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

zet jouw antwoorden hier

Slide 32 - Question ouverte

Cet élément n'a pas d'instructions

HTML element
HTML element


Een HTML tag kan 
attributen noemen.
dit zijn eigenschappen 
die de HTML tag kan 
beinvloeden

Slide 33 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 34 - Sondage

Cet élément n'a pas d'instructions

zet jouw code uit het bestand home.html

Slide 35 - Question ouverte

Cet élément n'a pas d'instructions

Afsluiting
Klasikaal

In jouw agenda zetten:

Zondag 23.59 uiterst jouw eerste versie cv website.

Slide 36 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 37 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 38 - Diapositive

Cet élément n'a pas d'instructions

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 39 - Quiz

Cet élément n'a pas d'instructions

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 40 - Quiz

Cet élément n'a pas d'instructions

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 41 - Quiz

Cet élément n'a pas d'instructions

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

Cet élément n'a pas d'instructions

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 43 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Afsluiting
Klasikaal behandelen

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

Slide 47 - Diapositive

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

M4S - CV WEBSITE

- Leçon avec 47 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

M4S - CV WEBSITE

- Leçon avec 47 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATIE TECHNOLOGIE

- Leçon avec 30 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P2 Lingo - REVERSE ENGINEERING

- Leçon avec 41 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATIE TECHNOLOGIE

- Leçon avec 34 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 4 - INFORMATIE TECHNOLOGIE

- Leçon avec 39 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATICA

- Leçon avec 29 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 2 - INFORMATICA

- Leçon avec 32 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4