Websites

1 / 31

Slide 1: Diapositive

MediawijsheidMiddelbare schoolWOPraktijkonderwijsLeerjaar 2

Cette leçon contient 31 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 120 min

Éléments de cette leçon

Websites

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Website

Slide 2 - Carte mentale

Cet élément n'a pas d'instructions

Intro

Websites zijn opgebouwd uit twee delen:

HTML
CSS

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Wat is HTML?

Slide 4 - Question ouverte

Cet élément n'a pas d'instructions

Wat is CSS?

Slide 5 - Question ouverte

Cet élément n'a pas d'instructions

HTML en CSS

HTML:de taal die de structuur van webpagina’s definieert

CSS: de taal die opmaak geeft aan webpagina’s

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Opdracht

Wil je zien wat voor HMTL er achter de schermen gebruikt wordt om een webpagina weer te geven? Doorloop dan deze stappen (voor Google Chrome en Microsoft Edge):

Rechtsklik op iets van de webpagina (bv. het woord “Edge” hierboven)

Inspecteren (onderste optie in het menu)

Nu opent er een extra paneel die weergeeft wat de achterliggende HTML is.

Achter de schermen van een webpagina

Als je zweeft over de HTML, licht het overeenkomstig element op in de webpagina. Handig toch? Met ✕ rechtsboven kan je het terug sluiten.

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

HTML

HTML is een afkorting voor HyperText Markup Language en wordt gebruikt voor de structuur van webpagina’s op het internet. Het maakt gebruik van speciale labels (tags) die bepalen hoe de inhoud van een pagina eruit zal zien.

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Head and Body

Head & body

Structuur van een HTML-bestand

Net zoals een persoon heeft HTML een hoofd (head) en een lichaam (body).

<!DOCTYPE html> zorgt er voor dat de HTML-pagina correct wordt weergegeven door de browser.

<html> is de basis van elke HTML-pagina en bevat alle andere elementen.

<head> bevat informatie over de pagina, zoals de titel die wordt weergegeven in de browser-tab en informatie voor zoekmachines zoals Google.

<body> bevat de inhoud van de pagina zoals tekst, afbeeldingen, links en andere elementen.

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

Hoe bepaal je het soort website

- Wat is je doel voor de website?

- Wat is je doelgroep?

- Welke informatie/inhoud wil ik laten zien?

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Wat is het doel van een website?

Slide 11 - Question ouverte

Cet élément n'a pas d'instructions

Doelen van een website

Een goede website is zo ingericht dat deze een bepaald doel kan behalen.

Om je conversie (percentage bezoekers dat tot actie overgaat) te verhogen, moet je eerst vaststellen wat voor soort bedrijfswebsite je hebt.

Kijk voor meer informatie eens op:

https://www.isource.nl/welk-soort-bedrijfswebsite/ (of zoek in Google even op 7 bedrijfswebsites)

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Wat is een functioneel ontwerp?

Slide 13 - Diapositive

Laat de leerlingen nadenken over deze vraag en proberen tot een antwoord te komen a.d.h.v dit plaatje.

Functioneel ontwerp is een ontwerp met jouw ideeën en afspraken met jouw opdrachtgever over de te ontwerpen website. Belangrijk is wel dat je alles vraag aan je opdrachtgever. Van lettertype tot kleur gebruik

Een functioneel ontwerp is

Een schets waarin je functionaliteiten opneemt. Hierin schets en beschrijf je precies welke functionaliteiten de website moet hebben. Functionaliteiten zijn mogelijkheden die de website heeft.

Het logo staat altijd links boven in en kan je aanklikken

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Layout

Tips:

Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je herkenbare patronen?
Ontwerp alleen voor wat je nodig hebt!
Gebruik echte teksten!

Zo kan een schets eruit zien

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Maak zelf een Schema functioneel ontwerp

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Contentstijlen

Bij de verschillende types websites passen verschillende schrijfstijlen. Als je iets wilt verkopen, gebruik je een andere schrijfstijl dan wanneer je wilt informeren. Een verkoop tekst is vaak persoonlijker en minder formeel dan een informatieve tekst.

Kijk ook eens hier:

https//:www.copydogs.nl/de-4-schrijfstijlen-die-elke-tekstschrijver-moet-beheersen/

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

Contentstijlen

Kijk ook eens hier:

https//:www.copydogs.nl/de-4-schrijfstijlen-die-elke-tekstschrijver-moet-beheersen/

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Contentstijlen

Kijk ook eens hier:

https//:www.copydogs.nl/de-4-schrijfstijlen-die-elke-tekstschrijver-moet-beheersen/

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

Waar moet een pakkende titel aan voldoen?

Slide 21 - Carte mentale

Cet élément n'a pas d'instructions

5. Tips voor een pakkende titel

1. Hoe, wat en waarom verwerken

2. Gebruik lijstjes met getallen

3. Doe een aantrekkelijke belofte

4. Maak het makkelijk

5. Liever stellend dan vragend.

Voor meer tips: https://www.blogkracht.nl/pakkende-titel/

Voorbeeld

1. Hoe schrijf je een pakkende titel

2. De 5 gevaren van een mobiele telefoon.

3. Verlies 5 kilo in een week!

4. 10 simpele tips om meer bezoekers te krijgen op je site

5. Wil jij snel rijk worden?

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

Usability

Usability betekent gebruiksgemak. Als een bezoeker op de website gemakkelijk kan vinden wat hij zoekt, is de usability goed. Als dat niet zo is, is de usability niet goed. Het is dus belangrijk om je bij het ontwerpen van een site in de bezoeker te verplaatsen.

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Hoe kan de usability gecontroleerd worden?

Door te kijken naar:

- de hyperlinks

- de on-page navigatie

- de website-inhoud (teksten, afbeeldingen en meer)

- design, typografie, lay-out en opmaak

Uitgebreide checklist met toelichting vinden jullie op SPL.

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Het belang van een goede foto

1. De impact van een foto is enorm

2. Een foto werkt sneller

3. Een foto heeft voorkeur boven tekst

4. Een foto blijft langer hangen

5. Blog altijd met foto's

6. Gebruik foto's met de juiste emoties

7. Gebruik niet alleen maar of teveel foto's

8. Gebruik geen bij elkaar "gegoogelde" foto's

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Websites op meerdere devices

Responsive webontwerp: wordt er optimaal gebruik gemaakt van de beschikbare ruimte zonder dat de leesbaarheid daaronder lijdt. Het ontwerp reageert op de ruimte van het scherm of venster en past zich automatisch aan omdat de grids flexibel zijn.

Het nadeel: een langere laadtijd omdat de template continu moet berekenen hoe breed het weergavescherm is en welke content opgehaald moet worden.

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Adaptive webdesign

Adaptive webdesign: zorgt ervoor dat de functionaliteit van de website zich automatisch aanpast aan het schermformaat, locatie en tijdstip. Afhankelijk vanaf welk apparaat de site wordt geopend, wordt de daarbij aansluitende template opgehaald.

Voordeel: de website laadt snel op alle apparaten.

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Mobile first design

Het is een designstrategie die uitgaat van de mobiele gebruiker bij het ontwerp van een nieuwe website. Er wordt dus eerst ontworpen voor het kleinste schermpje om dit vervolgens om te zetten naar een design voor de grotere schermen, zoals een tablet en een laptop.

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Apps

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Apps

Native apps- > specifiek voor Android en iOS, snelle werking, verkrijgbaar in Appstore of Playstor

Hybride app -> voor meerdere besturingssystemen beschikbaar, ook verkrijgbaar via o.a. app store, playstore, soms klein stukje performance verlies t.o.v .native app.

Progressive web apps -> eigenlijk is dit geen app maar een website die je als app op je telefoon installeert. Minder functies zoals niet altijd mogelijkheid tot push notificatie. Geen update omdat via website verloopt en deze automatisch aanpast.

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

Opdracht

Bedenk een idee voor je eigen zaak
Bedenk een goede naam. Zet dit in een drivedocument.
Maak een website via (webnode)

Slide 31 - Diapositive

Cet élément n'a pas d'instructions

Websites

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Carte mentale

Slide 3 - Diapositive

Slide 4 - Question ouverte

Slide 5 - Question ouverte

Slide 6 - Diapositive

Slide 7 - Diapositive

Slide 8 - Diapositive

Slide 9 - Diapositive

Slide 10 - Diapositive

Slide 11 - Question ouverte

Slide 12 - Diapositive

Slide 13 - Diapositive

Slide 14 - Diapositive

Slide 15 - Diapositive

Slide 16 - Diapositive

Slide 17 - Diapositive

Slide 18 - Diapositive

Slide 19 - Diapositive

Slide 20 - Diapositive

Slide 21 - Carte mentale

Slide 22 - Diapositive

Slide 23 - Diapositive

Slide 24 - Diapositive

Slide 25 - Diapositive

Slide 26 - Diapositive

Slide 27 - Diapositive

Slide 28 - Diapositive

Slide 29 - Diapositive

Slide 30 - Diapositive

Slide 31 - Diapositive

Plus de leçons comme celle-ci

Doelen van een website

Doelen van een website

Les 2: Doelen van een website

Multimediale Producten maken

HWUD04-sj2122-01-Webdev-introductie

F1 Usability

D&P - Website

D&P - Website