Websites

1 / 31

Slide 1: Tekstslide

MediawijsheidMiddelbare schoolWOPraktijkonderwijsLeerjaar 2

In deze les zitten 31 slides, met interactieve quizzen en tekstslides.

Lesduur is: 120 min

Onderdelen in deze les

Websites

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Website

Slide 2 - Woordweb

Deze slide heeft geen instructies

Intro

Websites zijn opgebouwd uit twee delen:

HTML
CSS

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Wat is HTML?

Slide 4 - Open vraag

Deze slide heeft geen instructies

Wat is CSS?

Slide 5 - Open vraag

Deze slide heeft geen instructies

HTML en CSS

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

CSS: de taal die opmaak geeft aan webpagina’s

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat is het doel van een website?

Slide 11 - Open vraag

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Wat is een functioneel ontwerp?

Slide 13 - Tekstslide

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Maak zelf een Schema functioneel ontwerp

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Slide 17 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Contentstijlen

Kijk ook eens hier:

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

Slide 19 - Tekstslide

Deze slide heeft geen instructies

Contentstijlen

Kijk ook eens hier:

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

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Waar moet een pakkende titel aan voldoen?

Slide 21 - Woordweb

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Apps

Slide 29 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

Opdracht

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

Slide 31 - Tekstslide

Deze slide heeft geen instructies

Websites

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Woordweb

Slide 3 - Tekstslide

Slide 4 - Open vraag

Slide 5 - Open vraag

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Open vraag

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Tekstslide

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Tekstslide

Slide 20 - Tekstslide

Slide 21 - Woordweb

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Slide 24 - Tekstslide

Slide 25 - Tekstslide

Slide 26 - Tekstslide

Slide 27 - Tekstslide

Slide 28 - Tekstslide

Slide 29 - Tekstslide

Slide 30 - Tekstslide

Slide 31 - Tekstslide

Meer lessen zoals deze

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