website maken

1 / 45
suivant
Slide 1: Diapositive
IntersectoraalMiddelbare schoolvmbo gLeerjaar 2

Cette leçon contient 45 diapositives, avec quiz interactifs, diapositives de texte et 2 vidéos.

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

Éléments de cette leçon

Slide 1 - Diapositive

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



Er gaat geen dag voorbij dat jij niet meerdere websites gebruikt!

Slide 2 - Diapositive

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

Welke websites gebruik jij dagelijks?

Slide 3 - Question ouverte

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

Je staat bij het bezoeken van een website vast niet altijd stil bij hoe veel werk het maken én onderhouden van een website kan zijn!

Slide 4 - Diapositive

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

Route
Les 4 
Visuele content
Les 1
Voorbereiding
Les 2
Concept
Les 5 
Publiceren
> > >
> > >
> > >
> > > > > > > > > > > > > > > > > > > > > > > > > > 
> > >
> > >
> > > >
> > > >
> > >
In deze les leer je meer over hoe de eerste website is ontstaan, over de algemene doelen van websites en wat de rol van de bezoekers zijn. Daarnaast kies je een onderwerp waar jouw website over gaat.
In het tweede gedeelte ga je jouw website uit tekenen aan de hand van wireframes. Vervolgens zet je jouw wireframes om naar een digitaal concept. Dit doe je via het programma van Google Sites.
In les 4 leer je hoe visuele content jouw website kan versterken. Je leert om een juiste balans te vinden tussen teksten en beeldmateriaal. Via drie platformen kan je afbeeldingen, iconen en gifs toevoegen aan jouw website!
In de laatste les leer je meer over online publicaties. Wat betekent het als je jouw website online zet? Wat voor effect heeft dit op jou en eventueel anderen. Tot slot maak je jouw website af en laat je deze beoordelen aan de hand van de rubriek.
Les 3 
Inhoudelijke content
In les 3 leer je om kritisch na te denken over de betrouwbaarheid en bruikbaarheid van informatie die op het internet staat. Je gaat jouw website meer 'body' geven door opzoek te gaan naar bruikbare bronnen.

Slide 5 - Diapositive

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

Uitleg 
Ontstaan website

Hiernaast zie je de Brit Tim Berners-Lee. Destijds werkte Bernes-Lee voor een Europees onderzoeksinstituut. Heel veel onderzoekers en wetenschappers werkte daar, maar zij konden niet snel te weten komen wat de anderen deden en hadden ontdekt. 

Berners-Lee wilde dit oplossen en ervoor zorgen dat informatie makkelijker te vinden was. Hij noemde dit het wereldwijde web oftewel World Wide Web

Dit is ook de reden dat onze website beginnen met WWW.

Tim Bernes Lee in 1989

Slide 6 - Diapositive

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

Wat voor doelen van websites kunnen jullie bedenken?

Slide 7 - Question ouverte

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

Doel van een website

Over het algemeen hebben websites vijf doelen:

  1. De uitstraling van een merk vergroten
  2. Meer producten of diensten verkopen 
  3. In contact komen met (potentiële) klanten
  4. Kandidaten voor vacatures vinden
  5. Bezoekers informeren

Bekijk het filmpje hiernaast voor een verdere uitleg van deze vijf doelen.

Slide 8 - Diapositive

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

Vind het juiste doel bij deze websites
nu.nl
google.com
bol.com
trivago.nl
youtube.com
facebook.nl
linkedin.com
nieuws leveren
openbare zoekmachine
online webwinkel
hotelkamers aanbieden
mogelijkheid tot streamen
sociaal netwerk creëren
zakelijk netwerk creëren

Slide 9 - Question de remorquage

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

Voorbeelden van vier verschillende websites. Geef van elke website aan wat het doel is. Bespreek dit vervolgens klassikaal.
3. NOS

Slide 10 - Diapositive

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

klanten winnen
Informatief
mensen voor 
vacatures vinden
uitstraling vergroten

Slide 11 - Question de remorquage

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

Een website op het internet is bereikbaar via een domeinnaam

bedrijven die webruimte aanbieden noemen we een webhost of hosting provider

Slide 12 - Diapositive

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

Extensies
Een domein extensie is het achterste gedeelte van een domeinnaam, de letters achter de “punt”. Vaak staan deze letters voor de afkorting van een land. 

Slide 13 - Diapositive

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

Slide 14 - Vidéo

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

Welke domeinnaam extensies ken jij al?

Slide 15 - Carte mentale

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

extensies

Slide 16 - Diapositive

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

De naam is belangrijk
Zoekmachines
Herkenbaarheid
Juiste spelling
Professioneel

Een goede domeinnaam is makkelijk te
onthouden en sluit goed aan bij het onderwerp van de website

Slide 17 - Diapositive

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

Waarom is een goede domeinnaam belangrijk?

Slide 18 - Question ouverte

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

Zelf een domeinnaam kiezen
Bij de meeste hostingbedrijven kun je op de website controleren
of een domeinnaam nog beschikbaar is


Slide 19 - Diapositive

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

Slide 20 - Diapositive

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

Wat kost jouw domeinnaam?
Bedenk een domeinnaam.
Zoek uit wat je domeinnaam kost per jaar.
Wat krijg je daar dan voor (domeinnaam en hosting)?
Maak een vergelijk bij 3 hosting aanbieders
Inleveren via Teams of email
Opdracht:
timer
45:00

Slide 21 - Diapositive

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

Slide 22 - Vidéo

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

  • Heeft een doel
  • Ziet er professioneel uit
  • Is geschikt voor alle apparaten
  • Bevat goede kwaliteit foto’s
  • Is gebruiksvriendelijk
  • Bevat duidelijke en heldere taal
  • Wordt regelmatig geüpdatet met nieuwe content
  • Bevat weinig bewegende elementen
  • Heeft een snelle laadtijd
  • Is geoptimaliseerd voor SEO
  • Is beveiligd
  • Zet aan tot actie

Slide 23 - Diapositive

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

Afbeeldingen gebruiken
Rechten vrije afbeeldingen van hoge kwaliteit gebruiken:
pixabay
Freeimages

Slide 24 - Diapositive

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

Moet je per se kunnen programeren
om je eigen website te maken?
A
Nee
B
Ja
C
Ik weet het niet
D
Licht aan je computer

Slide 25 - Quiz

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

web design
Wat is een website?

=

Verzameling van gerelateerde webpagina's.


Hoe maak je een website?

=

Programmeren of gebruik te maken van no-code platformen.

Slide 26 - Diapositive

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

websitebuilders
  • Een website maak je met een software programma, een website builder. 

  • Online websitebuilders zijn programma’s die op het internet staan. Veel webhost bedrijven en hosting providers bieden deze programma’s aan.  

  • De offline website builders zijn software pakketten die je op je eigen computer hebt staan. Vaak zijn offline web builders HTML of PHP editors. HTML en PHP zijn programmeertalen of programmeercodes. 

Slide 27 - Diapositive

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

website builder online
Voordelen:
  • je hoeft geen programmeertaal (HTML) te kennen
  • je hoeft geen software te downloaden
  • direct aan de slag
  • website snel online

nadelen:
  • online, dus internet nodig
  • standaard templates, beperkt aan te passen
  • bij gratis builders vaak veel reclame aan website gekoppeld
  • domeinnaam vaak een subdomeinnaam (bijv. www.jouwdomeinnaam.websitebuilder.nl)

Slide 28 - Diapositive

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

Aan de slag
Opdracht:

In dit gedeelte ga je brainstormen over het onderwerp en het doel van jouw website. Hiervoor moet je eerst een aantal stappen doorlopen die op de volgende slides staan.

Voorbeelden onderwerpen

Slide 29 - Diapositive

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

Vraag :

Schrijf korte steekwoorden op wat je op deze website
wilt laten zien.

Slide 30 - Carte mentale

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

Vraag 4: 
Wat is het doel van jouw website?
Mijn doel is....
De uitstraling van een merk vergroten
Meer producten of diensten verkopen
In contact komen met (potentiële) klanten
Kandidaten voor vacatures vinden
Bezoekers informeren

Slide 31 - Question de remorquage

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

Uitleg
Wat wilt de bezoeker? 

Als je weet wat je onderwerp is dan kan je gaan nadenken over wie er op jouw website komt. Dit verschilt nogal per website. 

Daarnaast is het belangrijk om goed na te denken over de relatie die je met de bezoekers hebt. Zijn dit vrienden, familieleden of ken je ze nog niet?

Er zit een verschil in de bezoekers wanneer je een website maakt voor jouw voetbalteam of wanneer je online kleding gaat verkopen.

Bekijk de video hiernaast voor meer informatie.
Video: Bezoekers website

Slide 32 - Diapositive

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

Aan de slag
Opdracht: 

Probeer de bezoekers van je website zo precies mogelijk te omschrijven. 


Voorbeelden doelgroepen
Denkvraag:

Wie gaan uiteindelijk je website bezoeken? 
Eigenschappen:
  • Leeftijd 
  • School of opleiding of werk?
  • Woonplaats 
  • Interesses
  • Gezondheidsfactoren 
  • Sportief of artistiek of muzikaal?

Slide 33 - Diapositive

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

Vraag 1:

Gebruik de vorige slide. Wie zijn jouw bezoekers? Omschrijf deze groep.

Slide 34 - Question ouverte

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

Vraag 2:

Wat wilt de bezoeker op jouw website vinden? Waarom komt deze persoon naar jouw website?

Slide 35 - Question ouverte

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

Afsluiting
WWW > Tim Bernes Lee
Vraag om mee te nemen...

Moet je een website continu blijven updaten?
Verschillende doelen van websites:

  1. De uitstraling van een merk vergroten
  2. Meer producten of diensten verkopen 
  3. In contact komen met (potentiële) klanten
  4. Kandidaten voor vacatures vinden
  5. Bezoekers informeren
Bezoekers websites

Slide 36 - Diapositive

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

Webdesign

Slide 37 - Diapositive

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

Ontwerpen

Slide 38 - Diapositive

Laat de leerlingen nadenken over deze vraag en proberen tot een antwoord te komen a.d.h.v dit plaatje.

Functioneel ontwerp is een ontwerp met jouw ideeën en afspraken met jouw opdrachtgever over de te ontwerpen website. Belangrijk is wel dat je alles vraag aan je opdrachtgever. Van lettertype tot kleur gebruik
Storytelling
  • Voor wie maak je de Website?

  • Wat is jouw verhaal?

  • Hoe betrek je je doelgroep?

  • Waar kun je  kleuren, plaatjes,  video inzetten?

Slide 39 - Diapositive

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

opdracht: Wat hoort waar?
Logo
Subpagina's
Een afbeelding
Stukje tekst 
Titel

Slide 40 - Question de remorquage

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

Uitleg 
Wireframes

Nadat je het onderwerp en doel hebt bepaald, kan je beginnen met het tekenen van wireframes.

Wireframe = een term die website ontwikkelaars gebruiken voor een plan van aanpak als ze een website gaan maken. 

Per online pagina maken ze één wireframe. Dit is één vak of rechthoek per pagina waarin wordt besloten waar de tekstvakken, afbeeldingen, video's en actieknoppen komen te staan.


Een voorbeeld van een wireframe.

Slide 41 - Diapositive

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

Wireframe
Wireframes om websites
uit te tekenen
Vraag om mee te nemen...

Waarom leren mensen programmeren als er ook no-code platformen zijn om websites te maken?
1. Is het onderwerp en doel direct duidelijk als je aankomt op de website?

2. Klikken bezoekers op een logische manier naar de volgende pagina? 

3. Kunnen ze op elke pagina actie ondernemen, informatie opvragen, een product kopen of een afspraak maken?
Drie vragen voor een goede wireframe:

Slide 42 - Diapositive

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




  • Wat is belangrijk?
    Staat dat duidelijk in beeld?


  • Ontwerp alleen voor wat je nodig hebt
Wireframe

Slide 43 - Diapositive

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

Pak een A4 blaadje en ontwerp voor jouw onderwerp de homepagina. Gebruik eventueel de slide op de vorige pagina als voorbeeld.

Slide 44 - Diapositive

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

Logo
Een logo is een soort beeldmerk. De meeste sites hebben een logo. Bij een goed logo denk je direct aan dat merk of bedrijf. Vaak is een logo vrij strak en eenvoudig. Het geeft de identiteit van het bedrijf weer. 

Slide 45 - Diapositive

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