A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>[alt.hypertext] WorldWideWeb: Summary (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://groups.google.com/g/comp.archives/c/CfsHlSNYPUI/m/DTs60INnuzcJ">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>[alt.hypertext] WorldWideWeb: Summary</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://groups.google.com/g/comp.archives/c/CfsHlSNYPUI/m/DTs60INnuzcJ" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Archive-name: auto/alt.hypertext/WorldWideWeb-Summary
  71. Original-posting-by: timbl@info .cern.ch (Tim Berners-Lee)
  72. Original-subject: WorldWideWeb: Summary
  73. Reposted-by: ad...@soda.berkeley.edu</p>
  74. <p>In article <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#54;&#52;&#46;&#46;&#46;&#64;&#99;&#101;&#114;&#110;&#118;&#97;&#120;&#46;&#99;&#101;&#114;&#110;&#46;&#99;&#104;">&#54;&#52;&#46;&#46;&#46;&#64;&#99;&#101;&#114;&#110;&#118;&#97;&#120;&#46;&#99;&#101;&#114;&#110;&#46;&#99;&#104;</a> I promised to post a short summary of the
  75. WorldWideWeb project. Mail me with any queries.</p>
  76. <p>WorldWideWeb - Executive Summary</p>
  77. <p>The WWW project merges the techniques of information retrieval and hypertext to
  78. make an easy but powerful global information system.</p>
  79. <p>The project started with the philosophy that much academic information should
  80. be freely available to anyone. It aims to allow information sharing within
  81. internationally dispersed teams, and the dissemination of information by
  82. support groups.</p>
  83. <p>Reader view</p>
  84. <p>The WWW world consists of documents, and links. Indexes are special documents
  85. which, rather than being read, may be searched. The result of such a search is
  86. another ("virtual") document containing links to the documents found. A simple
  87. protocol ("HTTP") is used to allow a browser program to request a keyword
  88. search by a remote information server.</p>
  89. <p>The web contains documents in many formats. Those documents which are
  90. hypertext, (real or virtual) contain links to other documents, or places
  91. within documents. All documents, whether real, virtual or indexes, look similar
  92. to the reader and are contained within the same addressing scheme.</p>
  93. <p>To follow a link, a reader clicks with a mouse (or types in a number if he or
  94. she has no mouse). To search and index, a reader gives keywords (or other
  95. search criteria). These are the only operations necessary to access the entire
  96. world of data.</p>
  97. <p>Information provider view</p>
  98. <p>The WWW browsers can access many existing data systems via existing protocols
  99. (FTP, NNTP) or via HTTP and a gateway. In this way, the critical mass of data
  100. is quickly exceeded, and the increasing use of the system by readers and
  101. information suppliers encourage each other.</p>
  102. <p>Making a web is as simple as writing a few SGML files which point to your
  103. existing data. Making it public involves running the FTP or HTTP daemon, and
  104. making at least one link into your web from another. In fact, any file
  105. available by anonymous FTP can be immediately linked into a web. The very small
  106. start-up effort is designed to allow small contributions. At the other end of
  107. the scale, large information providers may provide an HTTP server with full
  108. text or keyword indexing.</p>
  109. <p>The WWW model gets over the frustrating incompatibilities of data format
  110. between suppliers and reader by allowing negotiation of format between a smart
  111. browser and a smart server. This should provide a basis for extension into
  112. multimedia, and allow those who share application standards to make full use of
  113. them across the web.</p>
  114. <p>This summary does not describe the many exciting possibilities opened up by the
  115. WWW project, such as efficient document caching. the reduction of redundant
  116. out-of-date copies, and the use of knowledge daemons. There is more
  117. information in the online project documentation, including some background on
  118. hypertext and many technical notes.</p>
  119. <p>Try it</p>
  120. <p>A prototype (very alpha test) simple line mode browser is currently available
  121. in source form from node info.cern.ch [currently 128.141.201.74] as</p>
  122. <p>/pub/WWW/WWWLineMode_0.9.tar.Z.</p>
  123. <p>Also available is a hypertext editor for the NeXT using the NeXTStep graphical
  124. user interface, and a skeleton server daemon.</p>
  125. <p>Documentation is readable using www (Plain text of the instalation instructions
  126. is included in the tar file!). Document</p>
  127. <p>http://info.cern.ch/hypertext/WWW/TheProject.html</p>
  128. <p>is as good a place to start as any. Note these coordinates may change with
  129. later releases.</p>
  130. <hr />
  131. <p>Tim Berners-Lee Tel: +41(22)767 3755
  132. WorldWideWeb project Fax: +41(22)767 7155
  133. C.E.R.N. email: t...@cernvax.cern.ch
  134. 1211 Geneva 23
  135. Switzerland</p>
  136. </article>
  137. <hr>
  138. <footer>
  139. <p>
  140. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  141. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  142. </svg> Accueil</a> •
  143. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  144. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  145. </svg> Suivre</a> •
  146. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  147. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  148. </svg> Pro</a> •
  149. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  150. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  151. </svg> Email</a> •
  152. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  153. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  154. </svg> Légal</abbr>
  155. </p>
  156. <template id="theme-selector">
  157. <form>
  158. <fieldset>
  159. <legend><svg class="icon icon-brightness-contrast">
  160. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  161. </svg> Thème</legend>
  162. <label>
  163. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  164. </label>
  165. <label>
  166. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  167. </label>
  168. <label>
  169. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  170. </label>
  171. </fieldset>
  172. </form>
  173. </template>
  174. </footer>
  175. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  176. <script>
  177. function loadThemeForm(templateName) {
  178. const themeSelectorTemplate = document.querySelector(templateName)
  179. const form = themeSelectorTemplate.content.firstElementChild
  180. themeSelectorTemplate.replaceWith(form)
  181. form.addEventListener('change', (e) => {
  182. const chosenColorScheme = e.target.value
  183. localStorage.setItem('theme', chosenColorScheme)
  184. toggleTheme(chosenColorScheme)
  185. })
  186. const selectedTheme = localStorage.getItem('theme')
  187. if (selectedTheme && selectedTheme !== 'undefined') {
  188. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  189. }
  190. }
  191. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  192. window.addEventListener('load', () => {
  193. let hasDarkRules = false
  194. for (const styleSheet of Array.from(document.styleSheets)) {
  195. let mediaRules = []
  196. for (const cssRule of styleSheet.cssRules) {
  197. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  198. continue
  199. }
  200. // WARNING: Safari does not have/supports `conditionText`.
  201. if (cssRule.conditionText) {
  202. if (cssRule.conditionText !== prefersColorSchemeDark) {
  203. continue
  204. }
  205. } else {
  206. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  207. continue
  208. }
  209. }
  210. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  211. }
  212. // WARNING: do not try to insert a Rule to a styleSheet you are
  213. // currently iterating on, otherwise the browser will be stuck
  214. // in a infinite loop…
  215. for (const mediaRule of mediaRules) {
  216. styleSheet.insertRule(mediaRule.cssText)
  217. hasDarkRules = true
  218. }
  219. }
  220. if (hasDarkRules) {
  221. loadThemeForm('#theme-selector')
  222. }
  223. })
  224. </script>
  225. </body>
  226. </html>