Core 1 Interaction

HTTP(S)>A(G)I?!1@#$%&!!

Computers

The “Harvard Computers” in the late 1800s.

Before this time, the term computer usually referred to a person, not a machine—someone who would compute (solve) math problems. It is worth noting these were often women, and they were underpaid compared to men in their field—and many would go on to operate the early mechanical/electronic computers. We’re going to have to talk about a lot of men, here—but know that women have been present from the start.

Some important once were:

Ada Lovelace figured out that numbers could represent other things than quantities, by looking at mechanized weaving looms

Grace Hopper documented the first actual computer bug, a moth found inside the Mark II at Harvard.

Elizabeth "Jake" Feinler ran the Network Information Center (NIC) for the ARPANET, a Google before Google existed.

Katherine G. Johnson calculated the flight path for the United States' first mission into space.

Univac, the first commercial computer in the US.

By the 1960s, computers were room-sized, institutional electronic machines—used by governments (the military), businesses, and universities. They were used to solve complex math problems and sort data, but were still very slow and didn’t communicate with one another.

Some notable once were:

Babagge's Analytical Engine: a proposal for mechanical general-purpose computer designed by English mathematician and computer pioneer Charles Babbage. The first time that a design for a general-purpose computer could be described in as Turing-complete.

ENIAC the first Turing-complete, programmable, electronic, general-purpose digital computer, in the US completed in 1945. It's first programmed job was was to study the feasibility of the hydrogen bomb, which took about six weeks to calculate and a million punchcards for input/output.

SDS 940 the first machine designed to support time-sharing. Famously used for Community Memory, the first public computerized bulletin board system—another proto Google but community owned and authored. It was part of Resource One a people's computer center conceived by Pamela Hardt-English which was again part of Project One, the first 70s warehouse community operating from an abandoned candy factory in San Francisco.

Arpanet

The Advanced Research Projects Agency Network (ARPANET) was the first wide-area packet-switched network with distributed control and one of the first computer networks to implement the TCP/IP protocol suite. Both technologies became the technical foundation of the Internet.

Wikipedia, ARPANET

Networks

The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.

How does the Internet work?

A handy primer on web mechanics by MDN (Mozilla Developer Network).

A catalyst in the formation of the internet was the Cold War. The threat of nuclear conflict spurred the US Defense Department to consider decentralized and distributed networks—to disseminate orders and information in the event of an attack (and ultimately, for retaliation).

It was necessary to have a strategic system that could withstand a first attack and then be able to return the favor in kind. The problem was that we didn’t have a survivable communications system, and so Soviet missiles aimed at US missiles would take out the entire telephone-communication system [...] that was highly centralized. Well, then, let’s not make it centralized. Let’s spread it out so that we can have other paths to get around the damage.

Paul Baran

The original sketch of ARPANET.

By 1969, computer nodes connected the Stanford Research Institute, UCLA, UCSB and the University of Utah—developed by the Defense Department’s Advanced Research Project Agency (ARPA).

The growth of ARPANET into the 1970s.

Over the following decade, ARPANET would grow to include other cities in the US. It had its first expansion outside the States in 1973, with connections to the UK and Norway. Slowly, similar commercial and academic networks were developing alongside, each with their own communication protocols.

The core of TCP/IP is routing bundles of data called “packets.”

In 1974, Robert Kahn and Vinton Cerf (two ARPA scientists) developed the Transmission Control Protocol and the Internet Protocol (TCP/IP). On January 1st 1983, also known as flag day, it became the standard network communication format for ARPANET. and still underpins the internet we all use today.

Got it?

Web 1, 2, 3

Our guy Tim.

Tim Berners-Lee, a British academic and scientist, invented the World Wide Web (WWW) with his team while working at CERN in 1989. It was developed on top of TCP/IP as a standard way to connect documents, living on different computers in different places, via hypertext links.

Their proposal had four components:

  1. A text file format to represent the documents: the HyperText Markup Language (HTML)
  2. The rules for exchanging these documents: the HyperText Transfer Protocol (HTTP)
  3. A program to display (and edit) these documents: the first web browser (called WorldWideWeb)
  4. Software that gives access to the documents: the server (an early version of Apache/httpd)

The first webpage.

Let's take a small detour into naming and why it is important. In the beginning of 2023 the Apache Foundation has been asked by Natives in Tech to change it's name. Its useful to take a close look at the name of any project. For example: Palantir, the data analytics company of the alt-right's best-boy and angel-investor Peter Thiel, is named after the crystal ball that Saruman uses to spy on Frodo and his friends in Lord of the Rings.

American Artist, Master-Slave Flip-Flop, 2021

But also the Master/slave terminology, used to describe the hierarchical relationship between computing devices, has long been a topic of concern. In 2020, during the Black Lives Matter movement this discussion got a lot of new attention. As a result, GitHub replaced the default 'master' git to describe code branches with 'main'.

I'm emphasizing this because the language we use, not only in tech, and not only within the code we write but also in its surrounding context, significantly influences our understanding of the things we design with it.

HyperText

Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text that the reader can immediately access.

Wikipedia, Hypertext

I would extend this definition beyond the digital:

The cover of the original proposal, visualizing the idea of “hypertext.”

What do you notice when looking at the HTTP visualization above?

That's right.

The arrows are only pointing only in one direction.

Transpointing windows, a screenshot of a Xanadu demo

Even though HTTP is standard today, the web is just one implementation of a hypertext system. And before the web as we know it today, took shape there were many many people who broke their brains trying to make information retrieval and the linking of information more accessible—some of them in deeply intertwingled ways that allowed for hyperlinks to be bi-directional instead of one-directional. Almost unimaginable today.

In 1934 Belgian bibliographer, Paul Otlet proposed a proto-hypertext system in which all documents would be decomposed down to unique phrases stored on interlinked index cards forming a network of electric telescopes. Together with Henri La Fontaine he founded the Mundaneum, an institution aimed to gather together all the world's knowledge.

There is of course, Jorge Luis Borges' book The Garden of Forking Path's, often cited as the earliest inspiration for the concept of hypertext. But most famously perhaps, there is Vaneevar Bush's 1945 essay As We May Think and the Memex, his idea of a mechanized information retrieval system mimicking the associative, trailing nature of our minds.

an image caption providing context for a screenshot of a website showing a video of an older man showing a print out of a photo of a user interacting with a computer screen showing a hypertext system, does it get any better then this?

Ted Nelson's Project Xanadu was a hypertext system that he began conceptualizing in the 1960s. Unlike the uni-directional hyperlinks we have on the web today Nelson imagined links to be bi-directional. Unlike the one-way links we have on the web, Xanadu's bi-directional links enabled users to not only reference information but also maintain direct connections to the sources they cited.

In 1962 at Stanford Research Institute, computer pioneer Douglas Engelbart started working on the NLS, or the "oN-Line System". When Engelbart demoed it in 1968, today known as The Mother of All Demos, it wasn't only the first time that the practical use of hypertext links was demonstrated but also many of the fundamental elements of modern personal computing like windows, video conferencing, the computer mouse, word processing, dynamic file linking, revision control, and a collaborative real-time editor.

The Hypertext Editing System (HES) was an early hypertext research project conducted at Brown University in 1967 by Andries van Dam, Ted Nelson, and several Brown students. It was the first hypertext system available on commercial equipment that novices could use.

There are too many other relevant projects out there to mention them all but incase you want to dive further down this rabbit-hole make sure to read up on: HyperCard, Storyspace and WikiWikiWeb. Like Project Xanadu, a lot of these ideas have turned into abandon or vaporware, due to a lack of funding and/or interest. So for now we are still working with Tim's HTTP and the web. But it's important to keep in mind how those early dreams have shaped our current concept of hypertext.

Linear, never ending news-feeds and social media fatique, have helped alternative linking practices to gain a lot of new attention. For making this website I used Obsidian one of many new text-editors that makes it very easy to link documents together. Also are.na the platform that we will use in this class to share links has been immensely influenced by Nelsons ideas.

Linking practices—referencing other material—are at the core of any contemporary approach to design and more often than not, our job as designers can be broken down to connecting the dots. All you need is links.

Which brings us back to the web.

Web 1

By 1991, the first web page was up and running and things began to take off.

Mosaic was one of the first widely-available browsers. It introduced support for images.

Netscape, was another early one

Internet Explorer for MacOS was the first browser I used.

The 1990s then saw more-affordable home computers bring internet access to many more people, escaping the government (military), business, and university settings it had been siloed in before. Early web browsers like Mosaic and Netscape (1993) helped evolve what was possible online, adding color, images, and interactivity.

And the web exploded from there.

  1. Before search engines, there were web directories like Yahoo.

  1. GeoCities brought web design to the masses. Artists Olia Lialina and Dragan Espenschied are tracking the history of GeoCities in their blog One Terabyte of Kilobyte Age. So does Cameron's World.

  1. Olia Lialina's seminal net-art piece 'My Boy Friend Came back from the War'

  1. CyberPowWow is an Indigenous-determined online gallery with digital artworks and a library of texts.

  1. "Simple Net Art Diagram", a 1997 work by Michael Sarff and Tim Whidden

  1. In Own, Be Owned or Remain Invisible, Heath Bunting edits an article about himself so that each word links to a respective .com domain. Over the course of the following years many of these words became actual domains linking to various enterprises.

  1. We eventually got search engines.

  1. Keith Obadike's Blackness for Sale was an eBay page advertising the sale of his blackness.

  1. Cory Arcangel teaches his web design class 'Dirt Style' here at Parsons.

  1. The Pirate Bay goes live. TBP AFK a documentary on The Pirate Bay and it's founders

  1. 4chan goes live, out of that, Anonymous emerges. Later, parts of Anonymous turn into Qanon on 8chan.

  1. The Facebook goes live at Harvard.

  1. Marisa Olson starts using the term post internet to describe art made after the internet, art that takes the internet and the web as a defining condition.

  1. Aza Raskin develops infinite scrolling and paths the way to smartphone and social media addiction. Facebook patents it in 2010.

  1. Nasty Nets was one of many early internet Surf Clubs.

  1. Guthrie Lonergan's makes Hacking vs Defaults

  1. Loren Brichter develops Pull-to-refresh as a personal project. Twitter patents it in 2010.

  1. Olia Lialina and Dragan Espenschied publish Digital Folklore a reader on the vernacular web, a must read.

  1. Facebook introduces—the like button on it's website.

two of Ryan Trecartin's spreads for W-Magazine, showing Ashland Miles (left) and Lizzie Fitch (right)

  1. Ryan's Web 1.0, published by DIS gives a sneakpeak into Ryan Trecartin's creative process.

Web 2.0

By 2010 the Web 2.0, the participatory web is in full swing. The internet, our computers, likes and comments are owned by GAFAM(Google, Amazon, Facebook, Apple, Microsoft). The early internet optimism has faded, we just passed the 2008 global financial crisis. Darker patterns start to emerge on the internet not only through like buttons and endless scrolls. The corporate web seems to have infused into every aspect of online culture.

And even though a bit less optimistic perhaps, people still make art, or memes.

  1. Hide The Pain Harold goes viral.

  1. The Jogging, another surfclub/collective, starts posting.

  1. Reddit co-founder and freedom of information hacktivist Aaron Swartz commits suicide. The documentary The Internet's Own Boy tells the story of how and why this happened.

  1. Are.na launches, as a tool to assemble knowledge, maybe already anticipating the rise of knowledge creation tools that was born out of our desire for more mindful digital interaction.

  1. Piratebay cofounder Peter Sunde declares the internet dead at transmediale, Berlin.

  1. DIS Magazine curates the 9th Berlin Biennale, The Present in Drag that gets retroactively dubbed the first and last Post-internet Biennale

  1. Trump get's memed into office and pepe the frog becomes a hate-symbol

  1. TikTok goes live.

  1. Christopher Wylie blows the whistle on Cambridge Analytica

  1. Tristan Harris and aforementioned Aza Raskin, two Silicon Valley dropouts co-found the Center for Humane Technology

Web3

It's 2020. We are in the middle of a mental health crisis and are about to enter The Pandemic. Web3 is also trying very hard to be a thing.

Web3 is a bit of a ambiguous term. Sometimes it refers to the decentralized/distributed/federated nature of the web yet to come, sometimes it just means all things blockchain and other times it's just marketing to sell stuff. It first appeared around 2013/14 but gained popularity during the 2021 crypto craze. To add to the ambiguity I'm using it here in the later sense, to mark how things got weird throughout the pandemic.

  1. Sam Lavigne and Tega Brain make Get Well Soon a website from scraped comments posted on gofundme.com's medical fundraisers during the pandemic.

  1. The Social Dilemma debuts on Netflix

  1. Lot's of media coverage on police violence, Black Lives Matter responds.

  1. Stores board up their shop windows. American Artist boards up the website of the Whitney.

  1. Ethereum becomes the most used cryptocurrency. ¯\_(ツ)_/¯

  1. Beeple sells an NFT at Christies $69 million dollar.

  1. Qanon reaches it's peak, and stormes the capitol on January 6.

  1. Facebook rebrands to Meta.

  1. Mindy Seu launches the Cyberfeminsim Index as a book

  1. ChatGPT breaks the internet.

What will be next?

Web(sites)

You see, the big-internet-bang created a lot of web pages.

But..

What is a website, anyway?

Laurel Schwulst

This is a web page.

Ultimately, a web page is just a text file on a computer. It is written in a special format, the aforementioned HTML, which structures the document and often links it to other resources—other web pages, images, computers, really almost anything.

You could think of the web as text with instructions.

These all started as simple, hand-typed documents. Then as the power of computers grew, and the languages of the web evolved alongside—web pages expanded almost inconceivably in complexity and capabilities. Cascading Style Sheets (CSS) gave them marvelous abilities to be customized and designed. JavaScript (JS) gave them remarkable, newfound interactivity and function.

Websites (collections of web pages) today are built on top of an complex stack of technology—networks, servers, databases, libraries, browsers, devices. And increasingly JavaScript is taking on many of theses tasks. That's pretty MEAN.

The internet and the web have infused many aspects of our lives. It is the water that we are swimming in and surfing on, both as users and as designers. While surfing comes natural, in that latter role, we’ll need to learn how to swim. Our path into design then is to understand how these things are made and how they function.

Luckily you don't need to study computer-science to make a website. And in recent years the vernacular web has gotten a lot of fresh wind.

These days there many people that still care about making and publishing websites:

(just to name a few, in no particular order)

Websites are also a really hot item to collect in are.na channels:

Metaphors

In the coming weeks we are going to learn the fundamentals of HTML, CSS, and JS—the fabric of web pages. Let’s try and also think of these—more conceptually and semantically. Most commonly as content, form, and function. Or in another way, skeleton, skin, and muscles. Or in yet another way, as architecture, furnishing and appliances.

But be aware that these distinctions are handy abstractions. Form, content and function can't always, if not ever, be thought apart. And even in a technical sense JS can structure content. HTML determines form, it's elements can be styled without CSS and one of it's most important HTML elements, the link, is very interactive.

There are many metaphors, lenses, definitions, names and concepts through which we can think/talk about and act on the internet, web 1, 2, 3, 4... websites, their design and code and the computers and cables on which all of this is running, hosted or served.

For Laurel Schwulst websites can become a shifting house next to a river of knowledge. Femke Snelting thinks about web-design and free software through Skelteton, Skin and Coreset. American Artist considers the possibility of a Black Gooey Universe. And Olia Lialina highlights the importance of a Turing Complete User.

Context

Throughout this course I want to encourage you to ask how all of these things you saw today fell into place. Look at the many histories that define(d) and name(d) them. Make up your own. And when you do so—think about context. How does the information you gather and the technologies you use create meaning. At what point are your intervening, for who and how?

While doing so, be a user first, then an expert/designer. You will never read/know it all. So don't be afraid of getting lost or saying to little. Getting lost is encouraged and I am/we are here to help (each other).

The Schools role is to make big things approachable and small-scale gestures valued.

Silvio Lorusso, No Problem: Design School as Promise

This page was partially adapted from Michael Fehrenbach's page Everything is a web page.