Naše třída

Fake news: Tvořte falešné screenshoty webových stránek jako profík

Dnešní tip se bude hodit do mediální výchovy, nebo všude tam, kde chcete ukázat, jak jednoduché je někomu podstrčit smyšlený obsah podpořený screenshotem webové stránky.

Jak na falešné screenshoty?

Budeme si hrát s vývojovými nástroji prohlížeče, ale žádný strach, přísahám, že to zvládne i úplný začátečník (v podstatě stačí umět kliknout pravým tlačítkem myši :))

Princip je jednoduchý – stačí si najít libovolnou webovou stránku, kterou chcete změnit, kliknout na daný prvek (třeba nadpis) pravým tlačítkem myši a zvolit „prozkoumat“ (v různých prohlížečích se to bude jmenovat trochu jinak, ale princip je stejný – já používám Chrome, tak se budu držet názvosloví a ukázky budou také z vývojových nástrojů Chrome).

Fake news: Tvořte falešné screenshoty webových stránek jako profík
„Prozkoumat prvek“ v různých prohlížečích

A dostanete se do „vývojářských nástrojů“ prohlížeče. Nebojte se toho, není co pokazit, jsou to vývojářské nástroje pro ladění webových stránek před ostrým programováním, takže se nikde nic neukládá ani reálně nepřepisuje – mění se jen vykreslení stránky a po obnovení stránky vše zase zmizí! Můžete tedy experimentovat jak chcete…

Fake news: Tvořte falešné screenshoty webových stránek jako profík

V pravé straně vidíte HTML kód webové stránky – technikálie můžete pro teď ignorovat, pro vás je důležité, že vidíte v daném zápisu text a když si do něho 2x kliknete, tak ho můžete změnit a prohlížeč ho hned vykreslí ve svém okně.

Baník porazil Barcelonu

Takže za 2 minuty jsem z původního článku o tom jak je „Baroš zdravý a těší se na nadstavbu“, udělal článek o tom, jak „Baník porazil Barcelonu a Milan Baroš oslavuje Hattrick“:

Falešné screenshoty
Původní článek vlevo, upravená verze vpravo.

Tímto trikem můžete na stránce měnit libovolný obsah (vzhled jednotlivých elementů, fotky, cokoliv… ale to už je trochu obtížnější na vývojářské znalosti), který poté můžete screenshotovat! Víc než screenshot z toho triku nedostanete, všechny změny jsou lokální a nejdou nijak uložit a mají trvanlivost jen do obnovení stránky v prohlížeči.

Takže pokud chcete někomu ukázat, jak jednoduché je vytvořit uvěřitelný a zároveň smyšlený článek (uvěřitelný v tom smyslu, že na falešném screenshotu je zachycený design existujícího webu, doplněný vaším smyšleným obsahem), nebo někoho nachytat na aprílový vtípek, třeba o tom, že učitelé dostali zase přidáno… je to relativně jednoduché.

Google Chrome – Design mode

Trochu jsem přemýšlel zda tento trik s vývojovými nástroji nejde vymyslet jednodušeji a našel jsem skvělou navazující funkcionalitu v Google Chrome:

  • Spusťte vývojářské nástroje přes „prozkoumat“ viz výše v článku.
  • Přepněte se do záložky „Console
  • Vložte tento příkaz:
document.designMode = "on"

Chrome celý web přepne do interaktivního módu a můžete měnit text bez zásahu do kódu.

Reálná ukázka ze školní praxe

Proto nikdy nevěřte screenshotům webových stránek bez uvedení online zdroje – Vytvořit falešné screenshoty je opravdu jednoduché 🙂

Tomáš Musiol

Nejsem učitel, nikdy jsem ve škole neučil a ani to v blízké budoucnosti neplánuji. Zajímám se o moderní technologie ve vzdělávání a digitání hračky všeho druhu.

Komentáře: 6

Jste začínající učitel a čeká Vás začátek nového školního roku na 1. stupni základní školy a máte obavy z toho, co Vás čeká, na co se připravit, co raději ignorovat? 

Poslední dobou dostávám podobné dotazy, proto jsem se rozhodla, že budu pořádat kurz pro začínající učitele a online konzultace, kde můžeme osobně probrat Vaše konkrétní dotazy, na které ráda zodpovím na základě své zkušenosti z dlouholeté praxe ve školství.

Momentálně připravuji nový web, ale trochu se to (jako všechny IT projekty) natahuje 🙂

Pokud byste o společnou online konzultaci měli zájem, napište mi na katka@nase-trida.cz a domluvíme se na podrobnostech.

Úspěšný start do nového školního roku přeje Katka.