Git Product home page Git Product logo

lorem's Introduction

๐Ÿ‘พ Lorem Ipsum is Simply Dummy Text (or, Pain Itself) ๐Ÿ‘พ

Reading for format involves the delamination of media composites. (Tenen, Plaintext, 115)

lorem oopsum

In this exercise we will (attempt to) use freely available tools (web browser, text editor, GitHub) to dissect and "delaminate" text on the web. Starting with an excavation of form, format and protocols, hopefully we can begin to get at some of the other technical and social layers that comprise digital text and its reproduction. The goal is to deform and bewilder what we might be tempted to think of as innocuous, passive, ubiquitous (no but seriously, where is there not digital text?).

Basically, 1) we are going to appropriate the design and content of a familiar website, 2) examine its insides, 3) maximize what tenen calls "format" through decontextualization and deformation, and 4) finally republish it.

Ingredients

  • Browser (Chrome, Firefox)
  • Text Editor (any will do though I recommend atom.io)
  • GitHub Account
  • You might want to take a peek at some HTML/CSS basics to get familiar with the rough idea of how webpages are structured

Part 1: Prep

  1. Pair up
  2. Choose a text-centric website that is iconic in some way.
  3. Create a new folder on your desktop
  4. Save the site in your new folder
    • File > Save Page As
    • Rename to index.html
    • Make sure Webpage, Complete is selected
  5. Open the folder and take a look at what you've saved

Part 2: Delamination

  1. Open the file 'index.html' in your browser as well as in a text editor. If the code is too dense or long, you might want to "beautify" it using this online tool
  2. Explore the file in the browser by right clicking on elements and selecting Inspect from the menu
  3. What do you notice?
    • Where are there correspondences between the underlying code and the browser representation?
    • What doesn't correspond or doesn't make sense based on what you observe in either the code or the browser?
  4. Try editing in some way in the text editor, either replacing text or replacing an image, and then refreshing the browser
  5. ๐Ÿ”ฅ Now to deform and decontextualize! ๐Ÿ”ฅ Here are a few strategies:
    • Try to replace text with auto-generated text from one of the generators on this list of generators
    • Try distorting an image on the site using this online glitch tool (remember that for the image to render, it has to maintain the same filename and filetype)
    • ๐Ÿ”ž Try adding a p5.js script like this one to the bottom of the index.html file before the </body> tag ๐Ÿ”ž
  6. As you are editing, you'll want to save in the text editor, then refresh in your browser

Part 3: Publication

  1. Log into GitHub
  2. Fork (i.e., copy) this repository to your own account
  3. Select index.html then select edit (the pencil icon in the top right)
  4. Copy-and-paste the contents of your index.html file, replace the contents of the existing file, and select the commit (i.e., save) button
  5. Select index_files folder then drag the files from your index_files folder into this folder
    • Note: If you have many files, you'll want to transfer no more than thirty at a time, selecting commit after each group of files
  6. Select Settings and scroll down to GitHub Pages, under the Source header choose master branch
  7. A green box will appear with your new URL in it (this process takes some time) -- your delamination is live!

lorem's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.