GL kV PS 5

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

WELKOM GL3

Startopdracht: 

Bekijk de websites van MotoHippo, rsg Wiringherlant en Bloeiers.

Schrijf in je blok aan of de huisstijl in de vormgeving verwerkt is. Geef aan wat je van de uitstraling van de website vindt.

Planning

12.15 uur:  Huiswerkcheck

12.25  uur:  Korte theorie 

12.45 uur:  Spullen klaarleggen opdracht

12.55 uur: Werken aan je opdracht
13.40 uur: Opruimen

13.55 uur: Afsluiten en einde van de les

Planning

13.55 uur: Huiswerkcheck

14.10  uur: Korte theorie 

14.30 uur: Spullen klaarleggen opdracht

14.45  uur: Pauze

15.00 uur: Werken aan je opdracht
15.35 uur: Opruimen

15.50 uur: Afsluiten en einde van de les

lesdoelen

• Jij kunt aan het einde van de les een website maken

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

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.

Inhoud website: Functionele eisen

• functies, opties, die je toevoegt aan de website 

1. logo (meestal links in de hoek)
2. Menubalk
   a: Over ons
   b: Onze producten
   c: Nieuws
   d: agenda
3. Gebruiksvriendelijk ( niet te veel)

Functionaliteiten: jouw website moet bepaalde dingen kunnen, dat noem je functionaliteiten. Deze functionaliteiten bedenk je voordat je begint met het bouwen van een website.

Extra Functionele eisen

1. Login
2. Zoekvenster
3. Contactformulier
4. een webshop
5. weblog
6. foto's
7. video's
8. forum 
9. routeplanner

Footer/Header/Navigatiebalk

Footer: dit staat onderaan op de website. Hier staan vaak in kleine lettertjes de auteursrechten, contactgegevens, etc.

Header: het bovenste gedeelte van je website. Je ziet dit  als eerste als je de website bezoekt. Het is het visitekaartje van je website.

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

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.

Widget

Een widget is een klein programmaatje dat je in je website kunt gebruiken. 

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

Deze kleine programmaatjes kun je vaak zo op je website kopiëren of slepen. 

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

Inhoud website  - Webdesign

Naast de functionaliteiten moet je ook bedenken hoe de website eruit moet zien; denk aan de huisstijl en het imago

Vormgeving hangt af van je doelgroep

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: met een websitemaker

2: Met een content management systeem CMS

3: Door zelf (te) laten programeren

 1: met een websitemaker

De eenvoudigste manier om een website te maken is met een websitemaker. Bijvoorbeeld met Wix, Jimdo, JouwWeb of Webnode.

Een websitemaker is een pakket waarin alles zit wat je nodig hebt:

• sjablonen voor het ontwerp

Je hoeft dan niet meer zelf alles te ontwerpen. Je kunt vaak nog wel kleuren en vormen kiezen en aanpassen.

• de editor waarmee je teksten schrijft

• hostingprovider

• de domeinnaam

• een e-mailadres

• ondersteuning

Voordele/Nadelen websitemaker

• Hij is eenvoudig in gebruik.

• Je hebt geen aparte software nodig.

• Je kunt meteen aan de slag, zonder programmeerkennis.

• Updates en beveiliging worden door de websitemaker geregeld.

• Sjablonen met kant-en-klare ontwerpen die je zelf kunt aanpassen.

• De website past zich automatisch aan aan het apparaat dat je gebruikt.

• Je moet werken binnen de sjablonen die er zijn.

• Het is vaak niet mogelijk om extra functies toe te voegen. Bijvoorbeeld een webshop.

• Je kunt niet zelf je hostingprovider kiezen.

• Niet geschikt voor complexere websites waarvoor een database nodig is (bijvoorbeeld een vacaturesite of huizensite).

2: Met een content management systeem CMS

Een contentmanagementsysteem (CMS) werkt in principe hetzelfde als een websitemaker, maar is iets ingewikkelder in gebruik. Bijvoorbeeld WordPress, Joomla!, Drupal of Typo3

Voordele/Nadelen CMS

•.Hosting, de domeinnaam, e-mailadressen, installatie en de ondersteuning die je nodig hebt zijn afhankelijk van hoeveel je wilt betalen en hoeveel technische kennis je zelf hebt.

• Je kunt zelf je provider kiezen.

• Je hebt meer ontwerp opties omdat je sjablonen kunt installeren en aanpassen.

• Er zijn veel plug-ins beschikbaar waarmee je speciale functies aan je website kunt toevoegen. Bijvoorbeeld WooCommerce, een plug-in waarmee je een complete webwinkel aan je website kunt toevoegen.

• De website past zich automatisch aan aan het apparaat dat je gebruikt. 

• Er is geen persoonlijke technische ondersteuning.

• Voor veel plug-ins moet je betalen.

• Je hebt programmeer kennis nodig voor aanpassingen in het ontwerp.

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.

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
   

3: Zelf een website (laten) programeren

Als je totale vrijheid wilt, dan is dit de beste optie. Je hebt wel kennis van programmeren nodig

Voordele/Nadelen Zelf een website (laten) bouwen

• Heel veel mogelijkheden en flexibiliteit.

• Goedkope hosting. 

• Geen ondersteuning.

• De kosten zijn moeilijk in te schatten.

• Je hebt veel tijd nodig om het te leren.

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

• 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 5: Flowchart

• Voor je begint met het vullen van je website maak je schetsen.  
• 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. = Flowchart
• 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.

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 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

Tekst en beeld voor de website

Vrijwel ieder bedrijf of organisatie heeft een website en informeert daarmee bezoekers. 

Denk aan het doel van de website.

Daarom is het belangrijk om veel aandacht te besteden aan tekst en beeld.

SEO

Search Engine Optimization (zoekmachineoptimalisatie)

SEO zorgt ervoor dat jouw website gevonden wordt. Hiervoor worden er verschillende technieken ingezet waardoor een website stijgt in de zoekmachineresultaten. Dit wordt de ranking genoemd. Hoe hoger de positie in Google, hoe meer bezoekers er op de website terechtkomen. Zelf heb je hier ook invloed op. Door in je teksten voldoende kernwoorden te verwerken, help je Google om jouw tekst beter te vinden en te duiden. 

Praktische Opdracht:
Maak een Vernieuwde Website 

Jullie gaan een vernieuwde website maken voor jouw case

1. RSG Wiringherlant

2. Bloeiers

3. MotoHippo

Deze website maken jullie via JouwWeb.nl. Dit wordt een eenvoudige, moderne website waarin het logo, foto's en belangrijke informatie van de oude website worden verwerkt.

Praktische Opdracht:
Maak een Vernieuwde Website 

Voordat je begint met het bouwen van je website, ga je eerst een stroomschema maken. Een goed stroomschema helpt je om na te denken over de structuur, de inhoud en de indeling van je website. Het zorgt ervoor dat je later efficiënter kunt werken en een goed overzicht hebt van wat je moet doen.

Dit ga je doen in je kladblok (15 minuten)

Ga naar jouwweb.nl en klik op nu beginnen

Vooruitblik 

Volgende week ga je aan de slag aan je website