Digital
In this workshop we’ll explore a simple steganography technique – the practice of camouflaging information out in the open by concealing a message within another message – using a digital Cardan grille and a website of your choosing. To do this, we’ll work with two types of digital information, a transparent .PNG grille/filter and the html code rendered by the browser. These different technical processes create an easy method for transmitting a hidden ‘message’, and via the design of the grille we’ll unite these technologies to communicate an alternative reading for an existing web page / platform.
Technical Process
In the process we’ll reflect on the necessity of secret communications for marginalized populations, our agency as designers within our communication ecosystem, and the potential of parasitic/cooperative making.
Step 1: Select a Website
Brush Stroke and Geese, Elisa Giardina Papa
1. On your selected website, resize the browser window to 1440px x 900px (this plugin may be useful) and scroll to the portion of the page you are most interested in.
Although the Cardan grille is previously credited as being used previously in China, it is most widely attributed to Italian mathematician Jérôme Cardan who developed a method in which a heavy paper or cardboard “grille” with an assortment of cutouts would be placed over a text to highlight an alternative message.
2. Take a screenshot and open it in this Figma file. Place your screenshot in a “frame” and design your “filter” on a new layer on top of it. Then export your filter as a .PNG with transparency.
Do you visit the website everyday (willingly or unwillingly)? Is it a website you love and want to show appreciation for? A website you disdain and would like to modify so it’s more palatable? A webpage you and a friend share a special connection to and want to experience together in a new way? Follow your intuition and select your website, then take a screenshot.
Shrub, Linked By Air
3. Create a bookmarklet by right-clicking on your bookmarklet bar in Google Chrome (if it’s not visible make sure “View > Always Show Bookmarks Bar is checked”) and click “Add Page”.
untitledinternet.com, Constant Dullaart
For our grilles we’ll take an existing text (website) and create a digital grill to place ‘on top’ of it in order to communicate a message of your choosing. This does not mean we need to communicate sensitive textual information (although you can), but can also serve as commentary, or a sensory experience.
4. In the dialog that appears copy the following code into the “URL” field:
Step 2: Design Your Filter
Cardan
Now that you’ve selected your website, consider your intervention. Your filter/grille can be used to create a textual message you want to keep hidden. Or it can be more experiential and communicate a mood.
Step 1: Select a Website
Brush Stroke and Geese, Elisa Giardina Papa
1. On your selected website, resize the browser window to 1440px x 900px (this plugin may be useful) and scroll to the portion of the page you are most interested in.
Although the Cardan grille is previously credited as being used previously in China, it is most widely attributed to Italian mathematician Jérôme Cardan who developed a method in which a heavy paper or cardboard “grille” with an assortment of cutouts would be placed over a text to highlight an alternative message.
2. Take a screenshot and open it in this Figma file. Place your screenshot in a “frame” and design your “filter” on a new layer on top of it. Then export your filter as a .PNG with transparency.
Do you visit the website everyday (willingly or unwillingly)? Is it a website you love and want to show appreciation for? A website you disdain and would like to modify so it’s more palatable? A webpage you and a friend share a special connection to and want to experience together in a new way? Follow your intuition and select your website, then take a screenshot.
Shrub, Linked By Air
3. Create a bookmarklet by right-clicking on your bookmarklet bar in Google Chrome (if it’s not visible make sure “View > Always Show Bookmarks Bar is checked”) and click “Add Page”.
untitledinternet.com, Constant Dullaart
For our grilles we’ll take an existing text (website) and create a digital grill to place ‘on top’ of it in order to communicate a message of your choosing. This does not mean we need to communicate sensitive textual information (although you can), but can also serve as commentary, or a sensory experience.
4. In the dialog that appears copy the following code into the “URL” field:
Step 2: Design Your Filter
Cardan
Now that you’ve selected your website, consider your intervention. Your filter/grille can be used to create a textual message you want to keep hidden. Or it can be more experiential and communicate a mood.
javascript:(function(){ document.body.innerHTML += ''; document.body.innerHTML += '![]()
'; document.getElementById('file-input').click(); document.getElementById('file-input').addEventListener('change', function() { if (this.files && this.files[0]) { document.getElementById('filter').src = URL.createObjectURL(this.files[0]); } }); window.resizeTo(1366, 768); })();
Random Selection, Random Image
Use the plugin to upload and test your filter in the browser.
Some things to consider when designing your filter: Who is the audience for your secret message/alternative web experience? Do you want to communicate literally or on an emotional level? What are the graphic potentials for your filter? How could it interact with scrolling, clicking, or resizing? What sorts of communications does the web medium encourage or discourage? What are some types of communication you’d like to encourage? What levels of access and barriers does the web create to communication? Who is given a platform and who is excluded?
Greetings from the Invisible Borderlands, Amy Suo Wu
Step 3: Share
Once you’ve fine tuned your filter, upload it to this Google Drive folder and fill out this spreadsheet with its meta information. They’ll be added to a microsite where they can be interacted with and downloaded.
Workshop for Design Seminar B: Contemporary Practice w/Mindy Seu
The final step will be sharing our filters. This will be synthesized post-workshop by chris (more on that in the technical process section).
Rutgers MGSA Spring 2021: Wednesday Feb 24, 2021