Výuka a třídní projekty. Prakticky!

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.

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

„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…

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

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

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

Bonus Update

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 🙂

Profilový obrázek
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.

Jeden komentář

Výuka a třídní projekty. Prakticky!