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

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…

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“:

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

Díky @nasetridacz za skvělý tip. Dnes využito při mé absenci, kolegyně dohlížela a deváťáci v rámci informatiky tvořili. Zadáno v Učebně Google i s videonavodem … výsledek je skvělý … dokončíme příště debatou na #zsdamborice pic.twitter.com/muMUJh0WWp

— Karel Malík (@karelmalik) April 25, 2019

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