Fake news is overal, en is zelfs big business. In Brazilië is bijvoorbeeld meer dan 95% van de nieuws-items die op sociale media circuleren FAKE. Want voor het echte nieuws daar moet je betalen op internet. Publiciteitsbedrijven geven daar miljoenen uit aan fake news, bijvoorbeeld om een politieke kandidaat zwart te maken. Dit kan via Facebook, inmiddels verplaatst naar Whatsapp-groepen. Allerlei social media worden gebruikt  om echt nieuws en FAKE NEWS te publiceren en te lezen. Ook Google News wordt zo misbruikt.

Wat kunnen we er tegen doen? Om te beginnen kan je leren hoe makkelijk het is om fake news te maken. Dan leer je meteen iets over webtechniek en HTML-code, op een leuke en makkelijke manier. Dat doe je in deze opdracht. Precies zoals malicieuze beïnvloeders dat nu ook doen, getuige dit artikel op Nu.nl

Verderop staat Opdracht 2: de CSS veranderen

Deel 1: HTML oftewel inhoud

Zoek drie verschillende nieuws-sites. Verander in elk bericht de koptekst, en herschrijf de gehele eerste alinea. Verander ook het plaatje. Dat kan allemaal in de code: Rechtsklik > inspecteer element, bijvoorbeeld in Chrome.

In Safari op de Mac kan het ook: kies dan eerst Voorkeuren > Geavanceerd > Onderste knopje AAN (toon ontwikkelmenu).

Klik in de code het driehoekje open van datgene je wil wijzigen (bijvoorbeeld de H1 of de P, of de img). Dubbelklik daar dat wat je wil wijzigen, zoals de tekst, of bij het  img-plaatje de SRC=”bla.jpg“. De url van jouw (online) plaatje kun je daar inplakken, tussen die aanhalingstekens:

Lever je screenshots in

Maak screenshots: ⌘ Shift 5 op de Mac (of ⌘ Shift 4 en dan een vakje trekken).
Op Windows: Windows-toets Shift S
Lever de screenshots in via Teams / Canvas.

Bij deze opdracht moet je dus in de HTML-code duiken en die veranderen. Leerzaam als introductie in webdesign. Screenshots maken heb je ook vaak nodig. Let ook op de spelling, anders ziet iedereen meteen dat het fake news is.

 

 

 

 

---

Deel 2: CSS oftewel Design

Bij het inspecteer-venster zie je ook de vormgeving, in de rechter-kolom. De linkerkolom was de HTML oftewel de inhoud, de rechterkolom is de CSS oftewel de vormgeving.

Die CSS kun je dubbelklikken en veranderen. Hieronder een paar voorbeelden: de koptekst is groter (font-size), de kleur is veranderd (color:orange) en het lettertype is veranderd naar Georgia (font-family).

Je mag er zelf ook CSS bijtikken, gewoon erachter. met een Enter, en dan bijvoorbeeld zo:

font-family: Georgia;
color: orange;
font-size: 3rem;

Je wordt geholpen met Auto-aanvullen.

Als het is doorgestreept werkt het niet (dan wordt het overruled door iets anders). Tik dan vlak voor de puntkomma !important en dan werkt het wel:

font-family: Georgia;               DOORGESTREEPT doet het niet
font-family: Georgia !important;    (maar zo dus wel)

Een border om iets heen kan zo:

border: 5px solid orange;
border-radius: 50px;
padding: 10px;

Een schaduw kan met 4 eigenschappen: horizontale en verticale verschuiving, zachtheid en kleur. Da heet text-shadow (en bij een kader heet het box-shadow):

text-shadow: 5px 5px 5px grey;

In plaats van grey kan 50% transparant zwart ook: rgba(0,0,0,0.5)

De interlinie (de ruimte tussen de regels) heet lineheight, de spatiëring heet letter-spacing en alles in hoofdletters of kleine letters heet text-transform:

lineheight: 1.1;
letter-spacing: 3px;
text-transform: uppercase;

Lever dit in:

• Verander minstens 3 dingen aan het design 
• Doe dat op drie verschillende websites
  
• Lever je 3 screenshots in op Teams
  

Filmpje met uitleg