A

A presentation at CSS Day 2016 + HTML Special in June 2016 in Amsterdam, Netherlands by Jeremy Keith

Slide 1

Slide 1

! e world exploded into a whirling network of kinships, where everything pointed to everything else, everything explained everything else. ” “ —Umberto Eco

Foucault’s Pendulum

Slide 2

Slide 2

a

Slide 3

Slide 3

a pophenia

Slide 4

Slide 4

Slide 5

Slide 5

a nchor

Slide 6

Slide 6

< A NAME=0 HREF="WhatIs.html">

hypermedia

</ A

http://info.cern.ch/hypertext/WWW/TheProject.html

Slide 7

Slide 7

http://info.cern.ch/hypertext/WWW/WhatIs.html

Slide 8

Slide 8

a rchive

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

80 symbols per line 40 lines per page 410 pages per book 3200 symbols per page 1312000 symbols per book

Slide 12

Slide 12

! e orthographic symbols are twenty-five in number.” “ In the vast library there are no two identical books.” “

Slide 13

Slide 13

1312000 25 1834097 10

Slide 14

Slide 14

https://libraryofbabel.info/

Slide 15

Slide 15

https://libraryofbabel.info/

Slide 16

Slide 16

https://libraryofbabel.info/

Slide 17

Slide 17

https://libraryofbabel.info/

Slide 18

Slide 18

a ll

Slide 19

Slide 19

Linnaeus Messier Dewey Wilkins Otlet

Slide 20

Slide 20

Wilkins He divided the uni v erse in forty categories or classes, these being further subdivided into differences, which was then subdivided into species. He assigned to each class a monosyllable of two letters; to each difference, a consonant; to each species, a v owel. For example: de , which means an element; deb , the first of the elements, fi re; deba , a part of the element fire, a fl ame. ” “

Slide 21

Slide 21

Wilkins Leibniz

Slide 22

Slide 22

a da

Slide 23

Slide 23

In enabling mechanism to combine together general symbols in successions of unlimited variety and extent, a uniting link is established between the operations of matter and the abstract mental processes of the most abstract branch of mathematical science. ” “ — Ada Lovelace

Slide 24

Slide 24

Slide 25

Slide 25

a lan

Slide 26

Slide 26

…an infinite tape marked out into squares, on each of which a symbol could be printed. ” “ — Alan Turing Intelligent Machinery

Slide 27

Slide 27

1 0

Slide 28

Slide 28

a -machine

Slide 29

Slide 29

a tlantic

Slide 30

Slide 30

Slide 31

Slide 31

Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. ” “ — Vannevar Bush As We May ! ink

Slide 32

Slide 32

a ugmentation

Slide 33

Slide 33

Slide 34

Slide 34

a rpa

Slide 35

Slide 35

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

lo

Slide 39

Slide 39

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

TCP/IP

Slide 43

Slide 43

email gopher f tp H T TP telnet TCP/IP

Slide 44

Slide 44

H T TP WWW URLs HTML

Slide 45

Slide 45

Slide 46

Slide 46

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

…a solution based on a distributed hypertext system ” “ — Tim Berners-Lee Information Management: A Proposal

Slide 50

Slide 50

Memex Hypercard Xanadu EN Q UIRE NLS

Slide 51

Slide 51

Mesh

Slide 52

Slide 52

! e Information Mine

Slide 53

Slide 53

World Wide Web

Slide 54

Slide 54

Slide 55

Slide 55

Slide 56

Slide 56

H T TP WWW URLs HTML

Slide 57

Slide 57

HTML

Slide 58

Slide 58

HTML Tags 21 elements

<ul>

Slide 59

Slide 59

<A>

Slide 60

Slide 60

Today’s one-way hypertext — the World Wide Web—is far too shallow. ! e Xanadu project foresaw world-wide hypertext decades ago, and endeavored to create a much deeper system. ! e Web, however, took over with a very shallow structure. ” “ — Ted Nelson ! e Xanadu Model

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

<a href ="..." rel ="..."

Slide 64

Slide 64

<a href ="..." rel ="prev"

Slide 65

Slide 65

<a href ="..." rel ="next"

Slide 66

Slide 66

<a href ="..." rel ="author"

Slide 67

Slide 67

<a href ="..." rev ="..."

Slide 68

Slide 68

<a href ="..." rev ="prev " rel ="next"

Slide 69

Slide 69

vote-links

Slide 70

Slide 70

<a href ="..." rev ="vote-for"

Slide 71

Slide 71

<a href ="..." rev ="vote-against"

Slide 72

Slide 72

X HTML F riends

N etwork

Slide 73

Slide 73

<a href ="..." rel ="friend"

http://gmpg.org/xfn/

Slide 74

Slide 74

<a href ="..." rel ="colleague"

http://gmpg.org/xfn/

Slide 75

Slide 75

<a href ="..." rel ="friend colleague"

http://gmpg.org/xfn/

Slide 76

Slide 76

<a href ="..." rel ="me"

http://gmpg.org/xfn/

Slide 77

Slide 77

a dactio

Slide 78

Slide 78

<a rel="me" href=

"https:// twitter.com/adactio "

<a rel="me" href=

"https:// github.com/adactio "

<a rel="me" href=

"https:// flickr.com/adactio "

Slide 79

Slide 79

Slide 80

Slide 80

<a rel="me nofollow" href=

     "https://

adactio.com "

Slide 81

Slide 81

Slide 82

Slide 82

a uthentication

Slide 83

Slide 83

Slide 84

Slide 84

Slide 85

Slide 85

https:// indiewebcamp .com

Slide 86

Slide 86

https:// brid.gy/

Slide 87

Slide 87

Slide 88

Slide 88

<a rel="me" href=

"https:// twitter.com/adactio "

Slide 89

Slide 89

Slide 90

Slide 90

! e Garden of Forking Paths

Slide 91

Slide 91

Slide 92

Slide 92

a

Slide 93

Slide 93

! e world exploded into a whirling network of kinships, where everything pointed to everything else, everything explained everything else. ” “ —Umberto Eco

Foucault’s Pendulum