The Web Is Made of Links

A talk given at The Web Is, in Cardiff, October 2014

This talk is a short ode to the defining element of the Web: The Link. We look at what a link is, how it has defined the Web and why it is important to protect and maintain this humble building block.

http://theweb.is
#thewebis

Transcript

1. MADE OF LINKS
   THE WEB IS...
   PHIL HAWKSWORTH
   THE WEB IS, CARDIFF, 2014
   7
   7
   

   View Slide

2. PHILHAWKSWORTH
   @
   

   View Slide

3. PHILHAWKSWORTH
   @
   QUESTIONS
   ENCOURAGEMENT
   ARGUMENTS
   COMMENTS
   PITY
   

   View Slide

4. @philhawksworth
   THEWEBIS
   #
   

   View Slide

5. @philhawksworth
   IN THE BEGINNING
   

   View Slide

6. @philhawksworth
   TIM
   

   View Slide

7. @philhawksworth
   IDEA
   

   View Slide

8. @philhawksworth
   VAGUE,
   BUT EXCITING
   

   View Slide

9. @philhawksworth
   VAGUE,
   BUT EXCITING
   

   View Slide

10. @philhawksworth
    SERVER
    

    View Slide

11. @philhawksworth
    SITE
    

    View Slide

12. @philhawksworth
    PAGE
    

    View Slide

13. @philhawksworth
    PAGE
    

    View Slide

14. @philhawksworth
    HTML
    

    View Slide

15. @philhawksworth
    LINKS
    

    View Slide

16. @philhawksworth
    MORE PAGES
    

    View Slide

17. @philhawksworth
    MORE LINKS
    

    View Slide

18. @philhawksworth
    MORE SITES
    

    View Slide

19. @philhawksworth
    MORE SERVERS
    

    View Slide

20. @philhawksworth
    IMAGES
    

    View Slide

21. @philhawksworth
    BLINKING TEXT
    

    View Slide

22. @philhawksworth
    BLINKING TEXT
    

    View Slide

23. @philhawksworth
    MARQUES
    

    View Slide

24. @philhawksworth
    GEOCITIES
    

    View Slide

25. @philhawksworth
    @philhawksworth
    ANIMATED GIFS
    

    View Slide

26. @philhawksworth
    GEOCITIES
    

    View Slide

27. @philhawksworth
    GEOCITIES
    

    View Slide

28. @philhawksworth
    ANIMATED GIFS
    @philhawksworth
    

    View Slide

29. @philhawksworth
    SOUND
    

    View Slide

30. @philhawksworth
    VIDEO
    

    View Slide

31. @philhawksworth
    ANIMATION
    

    View Slide

32. @philhawksworth
    REAL TIME
    

    View Slide

33. @philhawksworth
    APPLICATIONS
    

    View Slide

34. @philhawksworth
    CLOUD
    

    View Slide

35. @philhawksworth
    (INTERNET )
    INTERNET
    

    View Slide

36. @philhawksworth
    INTERNET OF THINGS
    

    View Slide

37. @philhawksworth
    (INTERNET )
    INTERNET
    

    View Slide

38. @philhawksworth
    (INTERN)
    STTTTI
    

    View Slide

39. @philhawksworth
    OFFLINE
    

    View Slide

40. @philhawksworth
    EVERYWHERE
    

    View Slide

41. @philhawksworth
    THE LINK
    

    View Slide

42. @philhawksworth
    THE WEB IS MADE OF LINKS
    7
    7
    

    View Slide

43. @philhawksworth
    WHAT IS A WEB?
    7
    7
    

    View Slide

44. @philhawksworth
    INTERCONNECTED DOCUMENTS
    7
    7
    

    View Slide

45. @philhawksworth
    INTERCONNECTED MEDIA
    7
    7
    

    View Slide

46. @philhawksworth
    INTERCONNECTED RESOURCES
    7
    7
    

    View Slide

47. @philhawksworth
    THE LINK
    

    View Slide

48. @philhawksworth
    THE URI
    

    View Slide

49. @philhawksworth
    THE URI IS THE THING
    PAUL DOWNEY, 2008
    

    View Slide

50. THE URI IS THE THING
    PAUL DOWNEY, 2008
    

    View Slide

51. THE URI IS THE THING
    PAUL DOWNEY, 2008
    

    View Slide

52. @philhawksworth
    

    View Slide

53. @philhawksworth
    

    View Slide

54. @philhawksworth
    

    View Slide

55. @philhawksworth
    

    View Slide

56. @philhawksworth
    

    View Slide

57. @philhawksworth
    HYPERTEXT LINKS
    

    View Slide

58. @philhawksworth
    HYPERTEXT LINKS
    W
    I
    

    View Slide

59. @philhawksworth
    HYPERTEXT LINKS
    W
    I
    WHY DO ?
    

    View Slide

60. @philhawksworth
    WHAT ARE HYPERTEXT LINKS?
    7
    7
    

    View Slide

61. – Ted Nelson
    HYPERTEXT
    7
    7
    

    View Slide

62. – Ted Nelson
    HYPERMEDIA
    7
    7
    

    View Slide

63. – Ted Nelson
    TRANSCLUSION
    7
    7
    

    View Slide

64. – Ted Nelson
    INTERTWINGULARITY
    7
    7
    

    View Slide

65. – Ted Nelson
    TELEDILDONICS
    7
    7
    

    View Slide

66. @philhawksworth
    TELEDILDONICS
    

    View Slide

67. – Ted Nelson
    HYPERTEXT
    7
    7
    

    View Slide

68. @philhawksworth
    YOU NEVER FORGET YOUR FIRST LINK
    7
    7
    

    View Slide

69. @philhawksworth
    YOU NEVER FORGET YOUR FIRST HOTLINK
    7
    7
    

    View Slide

70. @philhawksworth
    
    

    View Slide

71. @philhawksworth
    MY FIRST HOTLINK
    7
    7
    

    View Slide

72. @philhawksworth
    MY FIRST HOTLINK
    7
    7
    

    View Slide

73. @philhawksworth
    SHARING & COLLABORATION
    7
    7
    

    View Slide

74. @philhawksworth
    YOU CAN LINK TO
    ANYTHING FROM ANYWHERE
    7
    7
    

    View Slide

75. @philhawksworth
    MINDBOGGLING MAGIC
    7
    7
    

    View Slide

76. @philhawksworth
    MINDBOGGLING POWER
    7
    7
    

    View Slide

77. @philhawksworth
    THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

78. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    

    View Slide

79. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    7
    

    View Slide

80. http foobar.co
    ://
    

    View Slide

81. AITCH TEE TEE PEE
    DOUBLE MEH
    – Alex Sexton
    7
    

    View Slide

82. THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

83. THE ANATOMY OF A URL
    7
    7
    

    View Slide

84. GIMME THE LINK
    – Actual real living people
    7
    7
    

    View Slide

85. THE ANATOMY OF A HYPERTEXT LINK
    7
    7
    

    View Slide

86. @philhawksworth
    
    

    View Slide

87. @philhawksworth
    
    clickety click
    
    

    View Slide

88. @philhawksworth
    
    ! clickety click
    
    

    View Slide

89. @philhawksworth
    
    ! clickety click
    
    

    View Slide

90. @philhawksworth
    
    ! clickety click
    
    

    View Slide

91. @philhawksworth
    ! rel="author">
    ! clickety click
    
    

    View Slide

92. @philhawksworth
    ! rel="next">
    ! clickety click
    
    

    View Slide

93. @philhawksworth
    ! rel="prefetch">
    ! clickety click
    
    

    View Slide

94. @philhawksworth
    clickety click
    

    View Slide

95. @philhawksworth
    clickety click
    

    View Slide

96. LYCOS.CO.UK CIRCA 1999/2000
    

    View Slide

97. @philhawksworth
    NEW AFFORDANCES
    BUILDING
    

    View Slide

98. @philhawksworth
    USER UNDERSTANDING
    ESTABLISHING
    

    View Slide

99. @philhawksworth
    AN AGREEMENT
    ESTABLISHING
    

    View Slide

100. @philhawksworth
     THE WEB IS AGREEMENT
     PAUL DOWNEY, 2007
     

     View Slide

101. View Slide

102. View Slide

103. @philhawksworth
     POSTEL'S LAW
     7
     7
     

     View Slide

104. BE CONSERVATIVE IN WHAT YOU DO,
     BE LIBERAL IN WHAT YOU ACCEPT
     7
     7
     – Jon Postel
     http://en.wikipedia.org/wiki/Robustness_principle
     

     View Slide

105. WEB STANDARDS
     7
     7
     

     View Slide

106. @philhawksworth
     USER UNDERSTANDING
     ESTABLISHING
     

     View Slide

107. @philhawksworth
     OBSCURING THE URL
     7
     7
     

     View Slide

108. @philhawksworth
     EXPERIMENTAL
     IN CHROME
     7
     7
     

     View Slide

109. @philhawksworth
     EXPERIMENTAL
     IN CHROME CANARY
     7
     7
     

     View Slide

110. 7
     FAIR WARNING
     

     View Slide

111. 7
     ORIGIN CHIP
     chrome://flags/#origin-chip-in-omnibox
     

     View Slide

112. View Slide

113. View Slide

114. AITCH TEE TEE PEE
     DOUBLE MEH
     – Alex Sexton
     7
     protocol
     domain
     top level domain
     path
     fragment
     querystring
     

     View Slide

115. IT'S JUST A CYNICAL ATTEMPT
     TO INCREASE SEARCH &
     EARN MORE FOR GOOGLE
     – The angry hoard
     7
     7
     

     View Slide

116. OBSCURING THE URL
     SHIPPING IN
     MOBILE SAFARI
     7
     7
     

     View Slide

117. @philhawksworth
     AN EFFORT TO REDUCE NOISE
     7
     7
     

     View Slide

118. @philhawksworth
     GRRRRR
     

     View Slide

119. @philhawksworth
     A KEY SIGNPOST HAS
     BEEN REMOVED
     7
     7
     

     View Slide

120. THE URL IS THE SHARE BUTTON
     OF THE WEB,
     AND IT DOES THAT BETTER
     THAN ANY OTHER PLATFORM
     7
     7
     

     View Slide

121. LINKABILITY AND SHAREABILITY
     IS KEY TO THE WEB,
     WE MUST NEVER LOSE THAT
     – Jake Archibald
     7
     7
     http://jakearchibald.com/2014/improving-the-url-bar/
     

     View Slide

122. I’M GENUINELY SHOCKED THAT
     JAKE THINKS THAT CHROME
     HIDING URLS IS A GOOD THING
     – Jeremy Keith
     7
     7
     https://adactio.com/journal/6779
     

     View Slide

123. View Slide

124. UNTIL NOW, THEY COULD COPY THE “LINK”
     FROM THE TOP OF THEIR BROWSER AND PASTE
     IT INTO AN EMAIL, OR A TEXT MESSAGE
     – Jeremy Keith
     7
     7
     https://adactio.com/journal/6779
     

     View Slide

125. @philhawksworth
     SMART PEOPLE
     MAKING SENSIBLE ARGUMENTS
     7
     7
     

     View Slide

126. @philhawksworth
     WHAT IS LOST?
     7
     7
     

     View Slide

127. @philhawksworth
     WHAT IS YOUR
     HOME PHONE NUMBER?
     QUESTION
     

     View Slide

128. @philhawksworth
     PHONE NUMBERS
     9
     CONTACT LIST
     

     View Slide

129. @philhawksworth
     IP ADDRESS
     9
     DNS
     

     View Slide

130. @philhawksworth
     ADDRESS BOOK
     7
     7
     

     View Slide

131. @philhawksworth
     OUR AGREEMENT WITH THE USERS
     BREAKING
     

     View Slide

132. @philhawksworth
     THE WEB IS NOT AN APP STORE
     7
     7
     

     View Slide

133. @philhawksworth
     CONTROL
     7
     7
     

     View Slide

134. @philhawksworth
     

     View Slide

135. @philhawksworth
     

     View Slide

136. @philhawksworth
     “Welcome to Taco Bell!
     Give me your phone, and
     we’ll be happy to take your
     order when I’m done looking
     through it!”
     7
     7
     @Wilto
     https://twitter.com/wilto/status/527165005792555008
     

     View Slide

137. @philhawksworth
     THE WEB IS NOT FACEBOOK
     7
     7
     

     View Slide

138. @philhawksworth
     OWNERSHIP
     7
     7
     

     View Slide

139. @philhawksworth
     ALL YOUR HYPERTEXT LINKS ARE BELONG TO US
     ( somewhat paraphrased )
     

     View Slide

140. PATENT NO. 4,873,662
     7
     7
     

     View Slide

141. @philhawksworth
     A CLICK HAS VA£UE
     7
     7
     

     View Slide

142. @philhawksworth
     PAY PER CLICK?
     7
     7
     

     View Slide

143. @philhawksworth
     MORE STREAMLINED USER JOURNEYS?
     7
     7
     

     View Slide

144. @philhawksworth
     STRANGLED THE WEB?
     7
     7
     

     View Slide

145. @philhawksworth
     CRYING OUT TO BE CLICKED
     7
     7
     

     View Slide

146. LYCOS.CO.UK CIRCA 1999/2000
     

     View Slide

147. LYCOS.CO.UK CIRCA 1999/2000
     

     View Slide

148. @philhawksworth
     CLICK ME
     CLICK ME
     CLICK ME
     

     View Slide

149. THE MILLION DOLLAR HOMEPAGE
     

     View Slide

150. THE MILLION DOLLAR HOMEPAGE
     

     View Slide

151. THE MILLION DOLLAR HOMEPAGE
     

     View Slide

152. NEARLY 15 MILLION PIXELS
     5120 x 2880
     

     View Slide

153. @philhawksworth
     NINETY NINE COLOURS
     BUT THIS BLUE AINT ONE
     

     View Slide

154. #276AD9 #3E6FD9 #3A6FDE #326AED #366AEC #4078ED #2F6FEC
     #3084DE #276DE5 #287DEC #306DD9 #377CE2 #356DE2 #3776DE
     #3A6AE8 #2D6AE0 #3679DD #276EDE #3A73E0 #356AF0 #307EE1
     #277EE1 #2C6AE2 #3578E8 #3D6BED #3079E7 #276BE7 #2B6AE9
     #367DEC #306CE2 #3373ED #406AE8 #2D6AED #2C6DE1 #3579E5
     #3671F2 #276BE7 #2B6AEC #2A73DE #356DDE #4285F4 #41SHADES
     

     View Slide

155. @philhawksworth
     DESIGN DECISIONS?
     7
     7
     

     View Slide

156. @philhawksworth
     KNOWING
     THE VALUE OF
     

     View Slide

157. @philhawksworth
     URL SHORTENERS
     WATERFALLING
     

     View Slide

158. @philhawksworth
     DAISY CHAIN
     

     View Slide

159. @philhawksworth
     CHANGING THE MEANING OF A LINK
     7
     7
     

     View Slide

160. @philhawksworth
     JAVASCRIPT PSEUDO PROTOCOL
     7
     7
     

     View Slide

161. @philhawksworth
     
     

     View Slide

162. @philhawksworth
     
     

     View Slide

163. @philhawksworth
     IS PROGRESSIVE ENHANCEMENT
     STILL IMPORTANT?
     7
     7
     

     View Slide

164. @philhawksworth
     YES
     IS PROGRESSIVE ENHANCEMENT STILL IMPORTANT?
     7
     7
     

     View Slide

165. @philhawksworth
     DON'T DISMISS DEVICES JUST
     BECAUSE YOU DON'T USE THEM
     7
     7
     – Anna Debenham
     

     View Slide

166. @philhawksworth
     SQUIDGERIDEE
     7
     7
     – Anna Debenham
     

     View Slide

167. @philhawksworth
     EMBER, ANGULAR, POLYMER
     7
     7
     

     View Slide

168. @philhawksworth
     RISING
     WATER LEVEL
     7
     7
     

     View Slide

169. @philhawksworth
     WHO IS LEFT BEHIND?
     7
     7
     

     View Slide

170. THIS IS FOR EVERYONE
     7
     7
     

     View Slide

171. THIS IS FOR EVERYONE
     7
     7
     – Dan Williams
     https://twitter.com/iamdanw/status/525241312342462464
     WITH JAVASCRIPT ENABLED
     

     View Slide

172. @philhawksworth
     GROWING AUDIENCE
     7
     7
     

     View Slide

173. @philhawksworth
     WHAT IS THE COST OF ENTRY?
     7
     7
     

     View Slide

174. @philhawksworth
     IS THE WEB'S FUTURE?
     WHO
     

     View Slide

175. @philhawksworth
     IS THE WEB'S FUTURE?
     WHERE
     

     View Slide

176. @philhawksworth
     THE WEB IS LIKE THE FUTURE,
     IT'S ALREADY HERE
     BUT NOT EVENLY DISTRIBUTED
     7
     7
     

     View Slide

177. @philhawksworth
     BUILDING WITH THE
     WEB'S MOST CRITICAL ASSET
     7
     7
     

     View Slide

178. @philhawksworth
     ENABLE & INCLUDE
     7
     7
     

     View Slide

179. @philhawksworth
     LINKS
     http://info.cern.ch/Proposal.html
     http://blog.whatfettle.com/2008/10/06/the-uri-is-the-thing
     http://en.wikipedia.org/wiki/Ted_Nelson
     http://www.thewebisagreement.com
     http://en.wikipedia.org/wiki/Robustness_principle
     http://jakearchibald.com/2014/improving-the-url-bar
     https://adactio.com/journal/6779
     http://warpspire.com/posts/url-design
     http://hawksworx.com/blog/unobtrusify-your-javascript
     http://en.wikipedia.org/wiki/British_Telecommunications_Plc._v._Prodigy
     http://www.google.com/patents/US4873662
     http://www.w3.org/TR/html5/links.html#linkTypes
     http://www.mckinsey.com/Insights/High_Tech_Telecoms_Internet/
     Offline_and_falling_behind_Barriers_to_Internet_adoption
     

     View Slide

180. @philhawksworth
     THANKS
     Ted Nelson
     The URI is the thing
     Unveiling of The URI Is The Thing
     Man drawer
     Daisy chain
     Harbour
     https://www.flickr.com/photos/matlocktest/37349112
     https://www.flickr.com/photos/nickwebb/2918883446
     https://www.flickr.com/photos/nickwebb/2918034747
     https://www.flickr.com/photos/vandinglewop/7993315350
     https://www.flickr.com/photos/tekdiver/3434765820
     https://www.flickr.com/photos/aigle_dore/6226051676
     

     View Slide

181. @philhawksworth
     THANKS
     bit.ly/thewebislinks
     @PHILHAWKSWORTH
     7
     7
     

     View Slide