Les 9/10/11: Theorie website

• Dienstverlening en Producten
• Middelbare school
• vmbo g
• Leerjaar 3,4

Profielmodule Multimediale Producten

Les 9: Website/ stappenplan website maken

• Laatste onderdeel van het profieldeel Multimediale Producten
• Onderdelen Multimediale producten:

      digiproducten - film - website

Proeve van bekwaamheid Multimediale Producten

PTA Praktijk: maandag 13 maart

PTA Theorie:donderdag 16 maart

Wat en hoe moet je leren?

• 1. Neem de theorie goed door in de digitale leeromgeving (Learningbox)
• 2. Beantwoord de vragen voor jezelf om te bekjken of je de stof beheerst
• 3.Neem de gedeelde LessonUps door die in Teams staan.

Lesplanning

12.15-12.35 Lezen theorie Learningbox

12.35-12.45 Theorie website maken

12.45- 13.50 Film afmaken/script laten beoordelen

                           Filmopnames klaar? Dan mag je gaan monteren

 13.50-13.55 Afsluiten les + lesdoelen behaald?

Praktijkopdracht: Film maken

• Aan het einde het praktijkboek hebben jullie een film gemaakt 
• UIt welke onderwerpen/ soorten films mag je kiezen?

1.een dag op het leven op het Wiringherlant

2.promotiefilm voor je sportvereniging/club

3.instructiefilm (how to…)

• Voorwaarden: de film is 3 tot 5 minuten

-je mag in tweetallen werken maar je maakt wel je eigen film

-montageprogramma: hitfilm of moviemaker

-je gebruikt je telefoon als camera

-voordat je gaat flimen is je idee goedgekeurd door je docent

-filmen in lokaal of anders buiten (met toestemming)

Praktijkopdracht: Film maken

 Aan de montage zitten de volgende eisen:

1. Jouw film heeft een aftiteling en/of ondertiteling.
2. Jouw film heeft een afbeelding, animatie of titel.
   
3. Jouw film heeft minstens één beeldovergang.
   
4. Jouw film heeft geluidseffecten en muziek op het juiste volume.
   
5. De stemmen in jouw film zijn op het juiste volume.
   

Theorie website maken

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

Doel theorie website

• in de komende 2/3 lessen krijg je de theorie die hoort bij het maken van een website
• je gaat nu nog geen website maken; deze maak je later dit schooljaar over je 2e keuzevak 
• wel is het belangrijk dat je snapt hoe je een website moet maken en de belangrijkste begrippen/onderdelen kent

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.

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

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.

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.

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.

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
  

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. 

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.

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

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.

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

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.

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

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

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.  

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.

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. 

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
  

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

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

Domeinnaam

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

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
   

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.

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

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.

Stap 4: Begroting opstellen

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.

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

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.

Voorbeeld navigatie

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.

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.

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. 

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  

Stap 8: Presenteren en evalueren gemaakte            website