Les 8: website

Welkom D&P3
12.15-12.30 binnenkomst + lezen tekstbronnen uit boekje 31/32
12.30-12.45 doornemen planning (film ingeleverd? + uitleg theorie (stageboekje                                inleveren) (gesprekken over uitkomst leerlingbespreking)
12.45-13.55 werken aan  opdrachten (film - website )
13.55-14.05 korte pauze in lokaal
14.05-14.45 inleveren: website 
15.00-15.30 mentortijd
PTA Toetsen:
woensdag 29 maart:  PTA Vaardigheid 
donderdag 30 maart: PTA Theorie



timer
10:00
1 / 40
volgende
Slide 1: Tekstslide
Dienstverlening en ProductenMiddelbare schoolvmbo b, kLeerjaar 3

In deze les zitten 40 slides, met tekstslides.

time-iconLesduur is: 50 min

Onderdelen in deze les

Welkom D&P3
12.15-12.30 binnenkomst + lezen tekstbronnen uit boekje 31/32
12.30-12.45 doornemen planning (film ingeleverd? + uitleg theorie (stageboekje                                inleveren) (gesprekken over uitkomst leerlingbespreking)
12.45-13.55 werken aan  opdrachten (film - website )
13.55-14.05 korte pauze in lokaal
14.05-14.45 inleveren: website 
15.00-15.30 mentortijd
PTA Toetsen:
woensdag 29 maart:  PTA Vaardigheid 
donderdag 30 maart: PTA Theorie



timer
10:00

Slide 1 - Tekstslide

Welkom D&P3
08.05-08.15 binnenkomst + lezen tekstbron uit boekje 
08.30-08.45 doornemen planning (film ingeleverd? uitleg theorie
08.45-09.25 werken aan  opdrachten 
 2e blok: koken

PTA Toetsen:
woensdag 29 maart:  PTA Vaardigheid 
donderdag 30 maart: PTA Theorie



timer
10:00

Slide 2 - Tekstslide

Lesdoelen 
  • je weet welke onderdelen  een website heeft
  • je weet hoe je wensen en eisen van een opdrachtgever kunt onderzoeken
  • je weet wat een functioneel ontwerp voor een website is
  • je weet waarop je let bij de vormgeving van een website
  • je weet wat een begroting is en uit welke onderdelen een begroting bestaat
  • je weet hoe je teksten en afbeeldingen  moet gebruiken
  • je leert hoe je een website bouwt

Slide 3 - Tekstslide

website

Slide 4 - Tekstslide

Wat is belangrijk bij het maken van een website?
  • Om een website te maken volg je het ontwerpproces. 
      Je maakt schetsen, gaat brainstormen maar maakt ook een           begroting. 

  • Je gaat altijd uit van de wensen en eisen van de opdrachtgever -> dit is degene die jou opdracht geeft om een website te maken.

Slide 5 - Tekstslide

Wat is een website?
Een website is een verzameling pagina's op internet met teksten en afbeeldingen. 
Vanaf november 2022 waren er meer dan 1.14 miljard websites wereldwijd

Slide 6 - Tekstslide

Domeinnaam
  • kort maar krachtig (www.speelgoed.nl)
  • gemakkelijk te onthouden (www.happyhome.nl)
  • eenvoudig te spellen (een liggend streepje is lastig: www.magna_speelgoed.nl)
  • gemakkelijk te schrijven (www.straatspel.nl  is beter dan www.streettoys.nl)
  • uniek (naam moet niet lijken op een domeinnaam van de concurrent)
  • vertelt iets over de inhoud
  • maak je een website met behulp van gratis CMS software dan komt de naam van dit systeem terug in jouw domeinnaam: www.jouwweb.nl/pietjepuk

Slide 7 - Tekstslide

Domeinnaam

  • Een domeinnaam is een unieke naam die jij koopt waardoor mensen die deze naam intypen in de browser op jouw website komen. 
  • Een domeinnaam is meestal niet zo duur, tussen de € 2,50 en € 10 per jaar. Let op, je hebt dan alleen een naam!
  •  Elke pagina heeft ook zijn eigen adres nodig. Als een  CMS (Content Management System) gebruikt dan krijg je die adressen er gratis bij. 
  • Bij een gratis CMS (zoals bijv. jouwweb) is de naam van dit CMS terug te vinden in jouw domeinnaam: https//jouwweb.nl/naamwebsite



Slide 8 - Tekstslide

Domeinnaam

  1. laatste stuk is bijvoorbeeld  .com / . org -> noem je extensie
  2. extensie .nl / . be tonen aan uit welk land de website komt

Slide 9 - Tekstslide

Samengevat: domeinnaam
  1. 1e stap bij het maken van een website: vastleggen van een domeinnaam-> het internet adres van je website
  2. met een domeinnaam is je website vindbaar op het World Wide Web
  3. eerste stuk domeinnaam begint met www. 
  4. laatste stuk is bijvoorbeeld  .com / . org -> noem je extensie
  5. extensie .nl / . be tonen aan uit welk land de website komt
  6. via www.sidn.nl kun je bekijken of de domeinnaam nog beschikbaar is

Slide 10 - Tekstslide

Belangrijke begrippen/onderdelen website 
footer
dit staat onderaan op de website. Hier staan vaak in 
kleine lettertjes  de auteursrechten, contactgegevens, etc.

header
het bovenste gedeelte van je website. Dit gedeelte 
zie je als eerste en is dan ook aantrekkelijk om naar 
te kijken. Het is het visitekaartje van je website.




Slide 11 - Tekstslide

Belangrijke begrippen/onderdelen website 
cloud:
een plek om dingen online op te slaan. deze gegevens,  software 
of  bestanden staan niet op je eigen computer (icloud)

URL: 
een uniek adres naar een pagina van een website.


Navigatie- of menubalk: 
een rij knoppen met woorden die verwijzen naar pagina's op jouw website.

Slide 12 - Tekstslide

Belangrijke begrippen/onderdelen website 
Domeinnaam : 
een unieke naam op het internet. Een naam die niemand  anders gebruikt: www. uniekenaam .nl. Een domeinnaam   kun  je kopen. Jij bent dan de enige die dit adres mag en kan                            gebruiken.


Hyperlink: 
een tekst of afbeelding die je doorverwijst naar een andere pagina als je erop klikt met de muis. De knoppen in het menu zijn hyperlinks. Soms is er een afbeelding met 'mail me' op een website. Als je daarop klikt wordt je e-mailprogramma geopend. Die knop is ook een hyperlink.

Slide 13 - Tekstslide

In het kort: de onderdelen website
  • homepage                            :  thuispagina / algemene pagina/sfeermaker
  • menubalk/navigatiebalk: rij knoppen die verwijzen naar pagina's 
  • header                                      : bovenste gedeelte website/ je bepaalt de sfeer die je website
                                                               uitstraalt
  • footer                                        : onderste gedeelte website
  • scrollbar                                  : verticale schuifbalk aan de rechterkant venster
  • sidebar                                     : zijbalk
  • hyperlink/link                        : verwijzing naar een andere webpagina
  • button                                      : knop op webpagina

Slide 14 - Tekstslide

Belangrijke begrippen/onderdelen website 
Widget: 
een widget is een toepassing waarmee jeéén oogopslag actuele informatie kunt zien over bijvoorbeeld het weer of het nieuws.



Dit kan ook een bewegwijzering van Google Maps, of een Share-knop, waarmee je de website makkelijk kunt delen via WhatsApp of e-mail. 

Slide 15 - Tekstslide

Opbouw website
Websites hebben vaak een vrij standaard opbouw. 
Dat is handig voor bezoekers, ze weten dan snel hun weg te vinden op je website.

Slide 16 - Tekstslide

Stappenplan website maken-> deze stappen moet je volgen bij het maken van een website

  1. wensen en eisen (voor wie maak je de website en aan welke eisen moet de website voldoen?)
  2. inspiratie en brainstorm
  3. referenties zoeken
  4. plan en begroting
  5. schetsen en grof ontwerp
  6. plan voorleggen aan de opdrachtgever
  7. website maken
  8. presenteren en evalueren

Slide 17 - Tekstslide

Stap 1: Wensen en eisen opdrachtgever in 
              kaart brengen
  • Een website moet altijd voldoen aan een aantal eisen. 
  • Welke eisen dit zijn hangt natuurlijk af van het doel van de website. 
  • Er zijn verschillende doelen die een opdrachtgever kan hebben voor het maken van een website:

  1. Commercieel: het is de bedoeling dat met de website geld verdiend wordt. Een goed voorbeeld hiervan is een webshop.
  2. Educatief: de website is erop gericht je iets te leren.
  3. Vermaak: de website en de inhoud ervan is alleen bedoeld voor vermaak.

Slide 18 - Tekstslide

Doelen van een website


  • bezoeker gaat op eigen initiatief naar jouw website
  • bij je ontwerp moet je nadenken over je bezoekers -> wat zoeken zij en      hoe zoeken zij?
  • Niet: wat heeft mijn bedrijf te bieden maar WEL -> wat zoekt mijn klant

Slide 19 - Tekstslide

Inhoud website: Functionele eisen
  • functies, opties, die je toevoegt aan de website bijvoorbeeld:

  1. het aantal pagina's                                                              9. agenda
  2. een kaart met locatie                                                          10. chatfunctie
  3. een menu                                                                                  11. enz.
  4. thuisknop
  5. pictogrammen/links naar sociale media
  6. fotogalerij
  7. contactformulier
  8. zoekknop
agenda
nieuwsbrief
chatfunctie
Functionaliteiten: jouw website moet bepaalde dingen kunnen, dat noem je functionaliteiten. Deze functionaliteiten bedenk je voordat je begint met het bouwen van een website.

Slide 20 - Tekstslide

Inhoud website: Vormgeving website
Naast de functionaliteiten moet je ook bedenken hoe de website eruit moet zien; denk aan de huisstijl.
Vormgeving hangt af van je doelgroep

Slide 21 - Tekstslide

Stap 2: inspiratie en brainstorm
  • Inspiratie: je wordt ergens enthousiast over en krijgt nieuwe ideeën. Misschien heb jij al een idee voor een website, of zijn de wensen en eisen van de opdrachtgever heel duidelijk. 
  • Als je nog geen idee hebt wat je moet maken kun je eerst op internet zoeken naar websites die je mooi of goed vindt. 
  • Naar aanleiding daarvan ga je brainstormen: ideeën bedenken en elk idee is even waardevol

Slide 22 - Tekstslide

Stap 3: refenties zoeken
  • Om aan eisen te kunnen voldoen moet je informatie verzamelen. Je doet research. Je verzamelt informatie over de eisen met referenties.
  • Referentie betekent verwijzing. Referenties kunnen plaatjes zijn van andere ontwerpen van de website die jij wilt maken, materiaalinformatie, kleurschema's, of totale websites. 
  • Eigenlijk verzamel je alles dat jou kan helpen om erachter te komen hoe jouw eigen website moet gaan worden.  

Slide 23 - Tekstslide

Stap 4: plan en begroting. Op welke manieren kun je een website maken?
 1: Code schrijven: 
  • m.b.v. programmeercodes/programmeertalen (HTML of JavaScript)
2: Software die bouwt op code
  • programma's die een of meerdere programmeertalen als basis gebruiken. 
  • vrijheid om je afbeeldingen, tekstvelden te plaatsen en eigenlijk de hele vormgeving zó te maken dat het helemaal naar jouw zin is. 
  • Deze manier van ontwerpen zit tussen alles zelf schrijven en een sjabloon gebruiken in.

Slide 24 - Tekstslide

Stap 4: plan en begroting. Op welke manieren kun je een website maken?
3: CMS staat voor content management system.
  • Content is de inhoud van een website, dus alle tekst, afbeeldingen, filmpjes en dat soort dingen. 
  •  CMS is een website die verschillende mogelijkheden en sjablonen aanbiedt om in te werken, waar je jouw content in kunt plaatsen.
  • Je hoeft hier geen programmeertaal voor te kennen.   
  • CMS heeft vaste templates (sjablonen)  waarmee het uiterlijk van een pagina of hele website bepaald wordt. Je kunt een template selecteren voor een website of voor een individuele pagina. 

Slide 25 - Tekstslide

Content Management System

  • CMS: Content Management System: een systeem om de inhoud (content) van je website te organiseren/ betaalde & gratis versie
  • Nadelen gratis CMS:
  1. minder mogelijkheden,
  2. vaak reclame
  3. geen eigen domeinnaam maar samengestelde www.mobirise.nl\je naam
  • Betaalde software/betaalde CMS-> meer mogelijkheden

Slide 26 - Tekstslide

Stap 4: plan en begroting -> Kosten website
Welke kosten heb je bij het maken van een website?
  1. Bouwen/ maken van je website
  2.  Onderhouden van je website
  3. Functionaliteiten; hoe meer functionaliteiten hoe duurder

Slide 27 - Tekstslide

Hosting

  • Hosting: huren van ruimte  op internet voor het opslaan van een website.
  • Hoe duur de hosting is, hangt ervan af hoeveel ruimte jouw website nodig heeft. 
  • Hoe groter de website, hoe meer ruimte, hoe duurder de hosting.J
  • Je eigen computer is niet geschikt om de website te hosten omdat het netwerk altijd online moet zijn, anders is jouw website alleen online als je computer aan is en je verbonden bent met internet! 
  • Om een website te bouwen en in de lucht te houden heb je een server nodig, een netwerk buiten jouw huis dat wel altijd online is.
  • Een server staat dag en nacht aan en is dag en nacht in verbinding met internet.

Slide 28 - Tekstslide

Stap 4: Begroting opstellen
  • Voordat je een website gaat maken is het belangrijk dat je weet hoeveel geld (budget) er beschikbaar is.
  • Je weet al wat er allemaal op de website moet komen te staan. Dit heb je onderzocht bij de wensen en eisen, de brainstorm en de referenties die je hebt gezocht.
  • Voordat je kunt beginnen aan de schetsen en het uiteindelijke maken van de website moet je toestemming krijgen van de opdrachtgever.
  • Werk daarom eerst een begroting uit met alle kosten voor deze website. 
  • Een begroting is een overzicht van alle verwachte inkomsten en uitgaven



Slide 29 - Tekstslide

Stap 4: Begroting opstellen
  • Een begroting is een overzicht van inkomsten en uitgaven. 
  • Je inkomsten zijn het geld dat je ontvangt
  • je uitgaven zijn het geld dat je gebruikt. 
  • Het verschil tussen die twee is je resultaat.
  • Het is belangrijk dat je binnen het budget blijft, dus je moet niet meer geld uitgeven dan je hebt ontvangen.
  • Een begroting maak je meestal in Excel. Je maakt dan twee kolommen. In de ene kolom zet je de inkomsten en in de andere kolom de uitgaven. Aan het einde trek je deze van elkaar af zodat je het verschil weet.

Slide 30 - Tekstslide

Stap 4: Begroting opstellen

Slide 31 - Tekstslide

Stap 5: Schetsen en ontwerp
  • Voor je begint met het vullen van je website maak je schetsen. 
  • Het is belangrijk dat een website duidelijk en logisch is. 
  • Bezoekers moeten er snel kunnen vinden wat ze willen weten. Er zijn veel opties bij het bouwen van een website dus je kunt het beste eerst een duidelijk plan maken en dan pas gaan invullen.
  • Bij het ontwerpen van een website houd je het lijstje met wensen en eisen aan. 
  • Eerst maak je een stroomschema en daarna een ruwe schets.

Slide 32 - Tekstslide

Stap 5: Schetsen en ontwerp/ stroomschema

  • Eerst maak je een stroomschema en daarna een ruwe schets.

Stroomschema van een website met vier hoofdcategorieën en de verbindingen naar elke pagina

Slide 33 - Tekstslide

Stap 5: Schetsen en ontwerp/ stroomschema

  • De bezoeker klikt door de pagina's op zoek naar informatie. 
  • De manier waarop je door een website heen klikt heet navigatie. 
  • De navigatie is heel belangrijk binnen een website. 
  • Als het heel lastig is om iets te vinden kunnen mensen afhaken en naar een andere website gaan.

Slide 34 - Tekstslide

Voorbeeld navigatie

Slide 35 - Tekstslide

Stap 5: Schetsen en ontwerp/ stroomschema

  • De bezoeker klikt door de pagina's op zoek naar informatie. 
  • De manier waarop je door een website heen klikt heet navigatie. 
  • De navigatie is heel belangrijk binnen een website. 
  • Als het heel lastig is om iets te vinden kunnen mensen afhaken en naar een andere website gaan.

Slide 36 - Tekstslide

Stap 5: Schetsen en ontwerp/ ruwe schets

  • Als je weet hoe de opbouw van jouw website in elkaar zit kun je een ruwe schets maken: deze schets mag heel eenvoudig zijn
  • Deze ruwe schets kun je op papier maken of digitaal. 
  • Een ruwe schets noem je ook wel een wireframe.
  • In een ruwe schets geef je aan waar tekst komt, een menu, een footer etc.

Slide 37 - Tekstslide

Stap 6: Plan voorleggen aan 
je opdrachtgever
  • Voordat je nu enthousiast begint met het maken van jouw site leg je jouw totale plan voor aan de opdrachtgever.
  • Deze stap is erg belangrijk. Het kan namelijk zijn dat jouw opdrachtgever het ontwerp toch niet mooi vindt, of de begroting te hoog. Je kunt dit beter vooraf weten dan en niet achteraf.
  • Je presenteer jouw moodboard, schetsen en begroting aan jouw opdrachtgever. 
  • Zorg dat de opdrachtgever een duidelijk beeld heeft van jouw plannen. 

Slide 38 - Tekstslide

Stap 7: Website maken
  • Je gaat de website over je keuzevak aan het einde van dit schooljaar maken.
  • Belangrijk is dat je dan eerst schetsen en een stroomschema maakt  

Slide 39 - Tekstslide

Stap 8: Presenteren en evalueren gemaakte            website

Slide 40 - Tekstslide