GL kV PS 5

WELKOM GL3
1 / 41
volgende
Slide 1: Tekstslide
Dienstverlening en ProductenMiddelbare schoolvmbo gLeerjaar 3

In deze les zitten 41 slides, met tekstslides.

time-iconLesduur is: 100 min

Onderdelen in deze les

WELKOM GL3

Slide 1 - Tekstslide

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.

Slide 2 - Tekstslide

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



Slide 3 - Tekstslide

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



Slide 4 - Tekstslide

lesdoelen

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

Slide 5 - Tekstslide

Slide 6 - 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 7 - 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 8 - 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 9 - 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 10 - Tekstslide

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.

Slide 11 - Tekstslide

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

Slide 12 - Tekstslide

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.

Slide 13 - Tekstslide

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

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. 

Slide 15 - 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 16 - Tekstslide

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

Slide 17 - 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 18 - Tekstslide

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

Slide 19 - Tekstslide

 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

Slide 20 - Tekstslide

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

Slide 21 - Tekstslide

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

Slide 22 - Tekstslide

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.

Slide 23 - 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 24 - 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 25 - 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 26 - Tekstslide

3: Zelf een website (laten) programeren
Als je totale vrijheid wilt, dan is dit de beste optie. Je hebt wel kennis van programmeren nodig


Slide 27 - Tekstslide

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.

Slide 28 - 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 29 - Tekstslide

  • 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 30 - Tekstslide

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.

Slide 31 - Tekstslide

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 32 - 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 33 - 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 34 - Tekstslide

Stap 8: Presenteren en evalueren gemaakte            website

Slide 35 - Tekstslide

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.

Slide 36 - Tekstslide

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. 

Slide 37 - Tekstslide

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.

Slide 38 - Tekstslide

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)

Slide 39 - Tekstslide

Ga naar jouwweb.nl en klik op nu beginnen

Slide 40 - Tekstslide

Vooruitblik 

Volgende week ga je aan de slag aan je website 

Slide 41 - Tekstslide