A place to cache linked articles (think custom and personal wayback machine)
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  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>From a humble beginning 35 years ago, the Web is now central to the daily lives of billions (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. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>From a humble beginning 35 years ago, the Web is now central to the daily lives of billions</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-03-13
  72. </p>
  73. </nav>
  74. <hr>
  75. <figure class="component component--image">
  76. <img src="https://www.w3.org/cms-uploads/web-proposal-1989.gif" extension="gif" srcset="https://www.w3.org/cms-uploads/_360xAUTO_crop_center-center_none/web-proposal-1989.gif 360w, https://www.w3.org/cms-uploads/_580xAUTO_crop_center-center_none/web-proposal-1989.gif 580w, https://www.w3.org/cms-uploads/_920xAUTO_crop_center-center_none/web-proposal-1989.gif 920w, https://www.w3.org/cms-uploads/_1520xAUTO_crop_center-center_none/web-proposal-1989.gif 1520w" sizes="100vw"
  77. loading="lazy"
  78. alt=""
  79. />
  80. <figcaption>
  81. <p>Diagram illustrating "Information Management: A Proposal" by Tim Berners-Lee, 12 March 1989</p>
  82. </figcaption>
  83. </figure>
  84. <blockquote class="component component--quote">
  85. <p>
  86. “This proposal concerns the management of general information about accelerators and experiments at CERN. It discusses the problems of loss of information about complex evolving systems and derives a solution based on a distributed hypertext system.”
  87. </p>
  88. <footer>Tim Berners-Lee, &quot;Information Management: A Proposal&quot;, 12 March 1989</footer>
  89. </blockquote>
  90. <p>With those words, the World Wide Web was first <a href="https://www.w3.org/History/1989/proposal.html">proposed</a> on this day 35 years ago by Tim Berners-Lee at CERN.</p>
  91. <p>Many inventions and creations often surpass their initial intention and the Web is no exception. The general applicability of the proposed solution to CERN’s problems was quickly apparent as many organizations and systems of people faced similar challenges.</p>
  92. <p>The expanded applicability of the Web is due in large part to the creation of the World Wide Web Consortium 30 years ago. Tim Berners-Lee created a single organization to coordinate web standards, aiming to foster a consistent and interoperable architecture accommodating the rapid pace of progress in web standards. <strong>A single global Consortium that stewards the Web forward to serve the greater good</strong>.</p>
  93. <p>Over the years, the Web and its underlying standards have<strong> evolved to provide solutions to emerging problems</strong> around the world. To name a few, the creation of the Web Accessibility Initiative (WAI) in 1997 was seminal to the deployment of content and sites that are accessible to all, including disabled people; the adoption in 1998 of the Internationalization (i18n) framework to adapt web technologies to the world’s various writing systems thus making the World Wide Web truly world-wide; but also advances that durably shaped the web platform such as Web payments enabling e-Commerce; secure, privacy-respecting and robust online experiences with WebAuthn, Decentralized Identifiers (DIDs), ActivityPub, etc.</p>
  94. <p>To enable such progress, <strong>the Web Consortium too has evolved, always taking a people-first approach</strong>: the Web must continue to serve humanity. The first such inflection point was the creation of the patent policy in 2003 which assures that specifications can be implemented on a Royalty-Free basis and used at no cost, thus boosting adoption and usage. Another is the creation in 2011 of W3C Community and Business Groups which enable everyone –not just W3C Members– to participate in the development of the Web or its technologies. Our most recent inflection point was re-launching the Consortium in 2023 as a public-interest non-profit organization to work for the good of the public.</p>
  95. <p>Along the way we have <strong>fine-tuned our standardization process</strong>, notably by enshrining horizontal review as a key aspect that puts people first: horizontal areas that shape each W3C work package are accessibility, internationalization, security and privacy. And recently a <a href="https://digitallibrary.un.org/record/4031373?ln=en">United Nations report</a> outlined how technical standards do impact people’s enjoyment of their human rights and challenged organizations like ours to ensure standards are more conducive to upholding human rights - a topic I’ll discuss in more detail in the future.</p>
  96. <p>Looking to what is in front of us <strong>we are gathering to face new challenges</strong>. Technical challenges that are rooted in user needs and platform impact. In fact today we have ongoing sessions to discuss critical topics of our time, including ARIA and improved accessibility, the role of real world identities on the web, WoT registries, privacy principles for the web, ethical implications of Generative AI, and how we fund our ecosystem to ensure sustainable success into the future.</p>
  97. <p><strong>From a humble beginning, the Web is now central to the daily lives of billions of people.</strong> W3C with its community is doing the hard but essential work to ensure we are facing challenges, and we continue to evolve our structure to better listen, to increase our reach to include more of the world in this discussion.</p>
  98. </article>
  99. <hr>
  100. <footer>
  101. <p>
  102. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  103. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  104. </svg> Accueil</a> •
  105. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  106. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  107. </svg> Suivre</a> •
  108. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  110. </svg> Pro</a> •
  111. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  113. </svg> Email</a> •
  114. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  116. </svg> Légal</abbr>
  117. </p>
  118. <template id="theme-selector">
  119. <form>
  120. <fieldset>
  121. <legend><svg class="icon icon-brightness-contrast">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  123. </svg> Thème</legend>
  124. <label>
  125. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  126. </label>
  127. <label>
  128. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  129. </label>
  130. <label>
  131. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  132. </label>
  133. </fieldset>
  134. </form>
  135. </template>
  136. </footer>
  137. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  138. <script>
  139. function loadThemeForm(templateName) {
  140. const themeSelectorTemplate = document.querySelector(templateName)
  141. const form = themeSelectorTemplate.content.firstElementChild
  142. themeSelectorTemplate.replaceWith(form)
  143. form.addEventListener('change', (e) => {
  144. const chosenColorScheme = e.target.value
  145. localStorage.setItem('theme', chosenColorScheme)
  146. toggleTheme(chosenColorScheme)
  147. })
  148. const selectedTheme = localStorage.getItem('theme')
  149. if (selectedTheme && selectedTheme !== 'undefined') {
  150. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  151. }
  152. }
  153. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  154. window.addEventListener('load', () => {
  155. let hasDarkRules = false
  156. for (const styleSheet of Array.from(document.styleSheets)) {
  157. let mediaRules = []
  158. for (const cssRule of styleSheet.cssRules) {
  159. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  160. continue
  161. }
  162. // WARNING: Safari does not have/supports `conditionText`.
  163. if (cssRule.conditionText) {
  164. if (cssRule.conditionText !== prefersColorSchemeDark) {
  165. continue
  166. }
  167. } else {
  168. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  169. continue
  170. }
  171. }
  172. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  173. }
  174. // WARNING: do not try to insert a Rule to a styleSheet you are
  175. // currently iterating on, otherwise the browser will be stuck
  176. // in a infinite loop…
  177. for (const mediaRule of mediaRules) {
  178. styleSheet.insertRule(mediaRule.cssText)
  179. hasDarkRules = true
  180. }
  181. }
  182. if (hasDarkRules) {
  183. loadThemeForm('#theme-selector')
  184. }
  185. })
  186. </script>
  187. </body>
  188. </html>