D&P - Website

• D&p
• Middelbare school
• vmbo b, k
• Leerjaar 3

   WEBSITE BOUWEN

Wat weet je nog van de les van maandag? Schrijf 2 dingen op.

• welke soorten websites er zijn
• welke onderdelen een website heeft
• waar de onderdelen van een website voor zijn
• Websites vergelijken
• Functioneel ontwerp ontwerpen
• Eigen webshop maken
• Webshop maken in opdracht van klant

Leerdoelen

Wat voor websites ken je?

• websites waar je iets kunt kopen
  
• websites waar je informatie kunt vinden over een onderwerp
  
• websites waar je met andere mensen kunt praten over een onderwerp
  
• websites waar je dingen kunt doen, zoals spelletjes spelen of een website bouwen.

Verschillende soorten websites

De onderdelen van een website

• Een website is één of meerdere pagina's met tekst, plaatjes, video of geluid op internet.
• Om naar een website te gaan heb je een webbrowser nodig. Dat is een computerprogramma om webpagina’s mee te bekijken. Bijvoorbeeld Safari, Internet Explorer, Google Chrome of Mozilla Firefox.

De onderdelen van een website

Wat is een webbrowser?

1. Safari, Chrome, Internet Explorer
2. Een balk waar de URL in staat
3. Geen van beide
4. Weet ik niet

• één of meer webpagina’s met tekst, plaatjes en filmpjes
  
• een webadres 
• een plek op een server waarop je de website zet, zodat bezoekers deze online (via internet) kunnen bekijken.

Voor een website zijn drie zaken nodig:

Webadres voorbeeld: www.jd.nl

Een server is een hele grote computer die met internet verbonden is en waarop websites staan. De server staat 24 uur per dag en 7 dagen in de week aan zodat een website altijd bereikbaar is.

Server

Zonder een server kan je website ook niet online komen. bij overbelasting kan de server nooit uitvallen

Een website kun je laten draaien op de server van een hosting provider. Dat is een aanbieder van internetruimte. Deze ruimte kun je huren. Je huurt dan een stukje van de server.

Hosting provider

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Elke website heeft een homepagina. Dit is de pagina waar je op komt als je naar een website gaat. Op de homepagina vind je het navigatiemenu. In het navigatiemenu staan verschillende knoppen. Hiermee kun je naar de andere pagina’s van de website gaan. De manier waarop je door een website heen kunt klikken noem je navigeren. Vaak zijn onderwerpen die bij elkaar horen ondergebracht in een submenu.

Webpagina's

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Welke 3 onderdelen heb je nodig voor een werkende website?

1. 1 pagina, internet, ,computer
2. Meerdere pagina's, server, hosting provider
3. Stroom, computer, internet
4. Weet ik niet

Een bedrijf dat internetruimte aanbied noem je?

1. Internet bedrijf
2. Provider
3. Hosting provider
4. Weet ik niet

Een server staat hoeveel uur per dag aan?

1. 8 uur
2. 4 uur
3. 24 uur
4. Weet ik niet

www.jdsports.nl

www.hema.nl

De header vind je altijd bovenaan een pagina en loopt over de hele breedte. De header bevat vaak het logo en soms ook beeld.

De footer is de afsluitende balk onderaan de pagina. De footer kan verschillende informatie bevatten. Bijvoorbeeld verwijzingen naar social media, links naar voorwaarden, privacyverklaring, contactgegevens of een lijstje met de meest recente berichten.

Header  staat vaak stil en een banner dat kan vaak ook nog bewegen

Header en footer

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Wat betekend het woord Cookies?
Omschrijf het in je eigen woorden

Cookies zijn kleine bestanden die op de computer van de bezoeker worden geplaatst. Daarmee kan het surfgedrag van bezoeker gevolgd worden. Dat is interessant voor adverteerders, want zo kunnen zij hun advertenties gerichter laten zien aan de doelgroep. Volgens de privacywetgeving mag dit niet gebeuren zonder goedkeuring van de websitegebruiker. Dat doet de bezoeker door cookies te accepteren.

Cookies

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Wat is een hyperlink?

1. Link dat je doorstuurt naar een andere pagina
2. Link dat een bijlage opent
3. Koppeling dat je doorstuurt naar een andere pagina
4. weet ik niet

Hyperlink voorbeeld

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Vaak staan er op een webpagina hyperlinks. Een hyperlink is een verbinding naar een andere webpagina of een document, foto of video. Je herkent een hyperlink meestal doordat deze anders is vormgegeven, bijvoorbeeld vet, onderstreept of in een andere kleur. Dat verschil wordt soms nog duidelijker als je er met je muis overheen gaat. Dat noem je hoveren. Zodra je klikt op de hyperlink kom je terecht op de gekoppelde pagina of document dat gelinkt is.

De blauw gemarkeerde woorden op de website zijn hyperlinks. Als je erop klikt, kom je op een andere webpagina.

Hyperlinks

Wordpress is een website bedrijf waar je online een website kan maken maar ook ruimte kan kopen op hun server.

Je betaald dan ruimte voor de online Cloud. 

En de provider zorgt er voor dat je foto's video's eventuele producten kan verkopen aan klanten

Een webadres bestaat uit verschillende onderdelen.

• de extensie: het laatste stukje in de url, bijvoorbeeld .com of .nl
• de domeinnaam: de naam van de website met de extensie

De domeinnaam is bijvoorbeeld bol.com.

De naam van de website bol.com is bol. De extensie is .com

•  een host: de server waarop de website staat

 dat is www. Www staat voor world wide web. 

Webadres

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

Wat is de extensie van www.lidl.nl?

1. .com
2. .nl
3. .net
4. Weet ik niet

Wat is de domeinnaam van de www.lidl.nl met de extensie?

1. lidl.com
2. lidl.nl
3. lidl.net
4. Weet ik niet

Welke webadressen ken jij?
Schrijf het volledig uit
voorbeeld: www.JD.nl

• Officieel begint een webadres met https:// . 
• Https staat voor Hypertext Transfer Protocol Secure. 
• Hiermee kom je op een beveiligde website. Bijvoorbeeld bij internetbankieren. 
• Je herkent het aan het slotje in de browserbalk.
• Websites die (nog) niet op deze manier beveiligd zijn beginnen met http. 

Bezoek je zo'n website, dan geeft je computer vaak een waarschuwing dat de site mogelijk onveilig is.

https://

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

URL

Uniform Resource Locator

Wensen en eisen opdrachtgever

Opdracht

• Ontwerp een online webshop.
• Het product wat je wilt gaan verkopen mag je zelf verzinnen.
• Doel van de website: producten verkopen

• De doelgroep : jongeren tot 18 jaar.
• De functionaliteiten die op de website terug moeten komen zijn:
• Logo moet op de homepage
• Eigen huisstijl aanhouden.

Webshop voorbeelden: schoolspullen, kleding, sportartikelen, speelgoed etc.

Doelgroep: jongeren, oudere, zakelijk mensen, vrouwen, mannen etc.

Wens en eisen opdrachtgever

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

Als je een website ontwerpt, houd je rekening met het doel. 

Een website die als doel heeft om producten te verkopen, ziet er anders uit dan een website die als doel heeft om het imago te versterken.

Een bedrijf of organisatie die een website wil, heeft een doel. 

Bijvoorbeeld:

• producten verkopen
  
• nieuwe klanten aantrekken
  
• duidelijke informatie geven
  
• het imago versterken.

Het imago is het beeld dat mensen van een bedrijf hebben.

Doel

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

Bij het ontwerpen van een website is het heel belangrijk dat je rekening houdt met de doelgroep: 

• Bedenk welke informatie de doelgroep belangrijk vindt. En hoe zou de doelgroep deze informatie het liefst zien op de website?
  
• De teksten op de website moeten de doelgroep aanspreken.
  
• Vergeet de vormgeving niet. Wat spreekt een bepaalde doelgroep aan?
  
• Probeer het doel van de website te laten aansluiten op de behoeften van de klanten. Dan is de kans op succes het grootst.

Doelgroep

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

 Functioneel ontwerp

Overzicht van waar welke knoppen komen en hoe je website eruit komt te zien voordat je het digitaal gaat ontwerpen.

• een login voor een afgeschermd gedeelte voor klanten of leden
  
• een zoekvenster
  
• een contactformulier
• Foto's en video's
• een forum
• social media links

Extra functionaliteiten

Functionaliteiten zijn dingen die je op een website kunt doen, bijvoorbeeld een vraag stellen, informatie lezen, een kaartje met de locatie van de winkels bekijken of een winkelmandje vullen.

Elke website heeft een webadres. Dit is de naam die je moet intypen om naar de website te gaan.

Opdracht