Augmenting the human

Dreams of computers

Epistemic actions

Dreams of networks

Web 1.0

Web 2.0

Structure and style

HTML review

CSS basics

Layout

Exercise

Media queries

Outro

Augmenting the human

Welcome!


Housekeeping

Readings presentations:

Transmediale / CTM / Berlinale


Plan for the day


Dreams of computers


how would you qualify (y)our relationship with computers today?


when was the last time you used a computer to think deeply about a problem?

what are some future developments you're excited about? what about developments you're suspicious of?


J.C.R Licklider, Man-Computer Symbiosis, 1960.


David Rokeby, The Computer as a prosthetic organ for philosophy, 2003.


how do you get a computer to give you the meaningful images of your life?


Epistemic actions


they can help us access answers to known problems, by doing mechanical tasks (finding, filtering, sorting, indexing).


computers can help us formulate problems and construct answers by organizing and presenting information.

Data visualization reveals some truths
Data visualization reveals some truths


they did not answer the questions of intent (what do I want to do) and purpose (how do I want to do it).


to access the capabilities of the computer, we first need to translate the world into computer terms!

this involves standardization and disambiguation.


data > information > meaning

the presentation of information contributes to meaning


Ivan Sutherland, the next director of DARPA was thinking about The Ultimate Display


displays adds spatiality as a way to reveal information (making visible an object), and to lay it out (making visible the relationship of objects) and to manipulate it (changing it in real-time to observe its behaviour).


VisiCalc, the first spreadsheet software, completely changed how we see data
VisiCalc, the first spreadsheet software, completely changed how we see data


comparing and relating are two ways to create knowledge.

computers make it possible to compare the invisible world with the visible world.


Dreams of networks


The internet is a bunch of computers connected by cables.

The ARPANet in 1969
The ARPANet in 1969


The ARPANet in 1973
The ARPANet in 1973


The Internet can carry a lot of different kinds of information

(like the telegraph carries single words, or the phone carries soundwaves)


Web 1.0


Tim Berners-Lee is _the_ web developer
Tim Berners-Lee is _the_ web developer

The Web was developed at CERN in order to exchange documents, that were formatted in a language called HTML.


The first webpage
The first webpage


The first popular browser
The first popular browser


Web 2.0


The web 2.0 refers to when the WWW becomes a lot more usable


what is at stake:


Structure and style


HTML review


The HyperText Markup Language describes what makes up a webpage.

(i.e. a document meant to be served over the web protocol via web browsers)


An HTML element is made up of:

<a href="https://webpage.com"> click here </a>

Examples of tags:


CSS basics


A CSS file contains all of the style rules to be applied to a document.

CSS makes form separate from content .


A style rule targets elements and sets the value of attributes.

element {
    attribute: value;
}
a {
    color: red;
    font-size: 14px;
}

We need to tell the HTML which CSS rules to apply by linking the CSS documents:

<link rel="stylesheet" href="style.css" />

Layout


Layout is done by putting things in boxes and manipulating the size and the space between those boxes.

An HTML box is called a div.

We can manipulate width, height, margin, padding.


Introducing flexbox.

container {
    display: flex; /* this line unlocks flexbox layout for the children of the container */
    flex-direction: row; /* this tells the children to align as a row (the default is column) */
}

( full guide here )


Exercise


On a separate page, make a header with a title on the left and some links on the right.

Inside the main part of the webpage, put some text, and then a row of three images.

Recreate this layout
Recreate this layout


Media queries


Media queries is a system allowing you to change the style depending on the screen size.

@media only screen and (min-width: 600px) {

/* here, we write any rule that will only be applied if our screen is BIGGER THAN 600PX */

}

Outro


The dreams of computers were dreams of helping us think, which requires an act of translation (into machine languages) and representation (via screen interfaces).


On a webpage, everything is a box. By using whitespace and flexbox on those boxes, we can do whatever layout we want!

Homework: