website maken

• Intersectoraal
• Middelbare school
• vmbo g
• Leerjaar 2

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

Welke websites gebruik jij dagelijks?

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!

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.

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

Wat voor doelen van websites kunnen jullie bedenken?

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.

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

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

1. Werken bij Defensie 

2. Tesla

3. NOS

4. Young Capital

klanten winnen

Informatief

mensen voor 

vacatures vinden

uitstraling vergroten

Een website op het internet is bereikbaar via een domeinnaam

bedrijven die webruimte aanbieden noemen we een webhost of hosting provider

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. 

Welke domeinnaam extensies ken jij al?

extensies

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

Waarom is een goede domeinnaam belangrijk?

Zelf een domeinnaam kiezen

Bij de meeste hostingbedrijven kun je op de website controleren

of een domeinnaam nog beschikbaar is

www.sidn.nl

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:

• 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

Afbeeldingen gebruiken

Rechten vrije afbeeldingen van hoge kwaliteit gebruiken:

Pexels

pixabay

Freeimages

Moet je per se kunnen programeren
om je eigen website te maken?

1. Nee
2. Ja
3. Ik weet het niet
4. Licht aan je computer

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.

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. 

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)

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

Vraag :

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

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

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

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?

Vraag 1:

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

Vraag 2:

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

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

Webdesign

Ontwerpen

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?
  

opdracht: Wat hoort waar?

Logo

Subpagina's

Een afbeelding

Stukje tekst 

Titel

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.

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:

• Wat is belangrijk?
  Staat dat duidelijk in beeld?

• Gebruik herkenbare patronen

• Ontwerp alleen voor wat je nodig hebt

Wireframe

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

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.