A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 37KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>The Irony of Writing About Digital Preservation (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.theatlantic.com/technology/archive/2015/11/the-irony-of-writing-about-digital-preservation/416184/">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. The Irony of Writing About Digital Preservation (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.theatlantic.com/technology/archive/2015/11/the-irony-of-writing-about-digital-preservation/416184/">Source originale du contenu</a></h3>
  445. <section id="article-section-1"><p>Recently, Adrienne LaFrance <a href="http://www.theatlantic.com/technology/archive/2015/10/raiders-of-the-lost-web/409210/" data-omni-click="r'article',r'link',r'0',r'416184'">wrote</a> in <em>The Atlantic</em> about the digital death and rebirth of a story that was a Pulitzer Prize finalist in 2008. Because “The Crossing,” a 34-part series originally published by the <em>Rocky Mountain News</em>, was born digital, it was not as easily archived as print stories, and its journey from obscurity to resurrection was moving.</p><p>I loved LaFrance’s story. It was masterfully written, and it touched on most of the issues that digital preservationists grapple with every day. Coincidentally, the story was published the same week as a <a href="http://nrj.sagepub.com/content/current" data-omni-click="r'article',r'link',r'1',r'416184'">special issue of <em>Newspaper Research Journal</em></a> called “Capturing and Preserving the ‘First Draft of History’ in the Digital Environment,” which is a collection of scholarly papers (including my own) about preserving digital news.</p><p>Which led me to wonder: In 20 years, will anyone be able to read LaFrance’s story?</p><p>There is no guarantee that we will be able to read today’s news on tomorrow’s computers. I’ve been studying news preservation for the past two years, and I can confidently say that most media companies use a preservation strategy that resembles Swiss cheese.</p></section>
  446. <p class="ad-boxinjector-wrapper"><gpt-ad id="boxinjector1" targeting-pos="boxinjector1" class="ad ad-boxinjector" lazy-load="2" data-object-pk="1" data-object-name="boxinjector"><gpt-sizeset viewport-size="[1050, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1024, 350], [1, 3], [1600, 520], [1000, 350], [1600, 500], [970, 350]]"/><gpt-sizeset viewport-size="[1010, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1, 3], [768, 350], [768, 520], [640, 360], [970, 350]]"/><gpt-sizeset viewport-size="[760, 0]" sizes="[[728, 90], [728, 350], [1, 3], [768, 350], [768, 520], [640, 360]]"/><gpt-sizeset viewport-size="[0, 0]" sizes="[[300, 250], [320, 350], [300, 350], [1, 3], [320, 520], [320, 430]]"/></gpt-ad></p>
  447. <section id="article-section-2"><p><a href="http://nrj.sagepub.com/content/36/3/299.full.pdf+html" data-omni-click="r'article',r'link',r'2',r'416184'">My contribution</a> to the <em>NRJ</em> special issue centers on news apps, the interactive databases like <em>ProPublica</em>’s <a href="https://projects.propublica.org/surgeons/" data-omni-click="r'article',r'link',r'3',r'416184'">“Surgeon Scorecard”</a> that allow readers to read a story, search for themselves or their community in the data, and then figure out exactly how the story affects their own lives. When a data journalist calls something a “news app,” it doesn’t mean the thing you download from the App Store. <em>ProPublica</em>’s Scott Klein <a href="http://knightlab.northwestern.edu/2014/03/18/preserving-interactive-news-projects-with-newseum-opennews-and-pop-up-archive/" data-omni-click="r'article',r'link',r'4',r'416184'">explains</a>: “Inside newsrooms, these interactive databases are sometimes called ‘news applications’—but don’t be confused. They’re interactive databases published on the web, not something you buy on your smartphone. Think Dollars for Docs, not Flipboard or Zite.”</p>
  448. <p>News apps aren’t being preserved because they are software, and <a href="http://www.softpres.org/" data-omni-click="r'article',r'link',r'5',r'416184'">software preservation</a> is a specialized, idiosyncratic pursuit that requires more money and more specialized labor than is available at media organizations today. But, you might argue, it ought to be easy to preserve stories that are not software, right? A story like LaFrance’s, which is composed of text and images and a few hyperlinks to outside sources, ought to be simpler to save?</p><p>You’d think so. But not necessarily.</p><p>To understand why, we need to look at the back-end technology of the newsroom. In developer-speak, the front end is the nice-looking part of the technology that is open to customers and the world; the back end is the factory where the sausage is made.</p><p>You probably know the basics of the back end: When you click a link or type a URL into your web browser, a <a href="https://en.wikipedia.org/wiki/Web_server" data-omni-click="r'article',r'link',r'6',r'416184'">web server</a> delivers a page to your browser. At a media organization, the web server assembles a page for you that consists of different digital assets: text, images, captions, headlines, code, videos, or ads. These assets reside in a <a href="https://en.wikipedia.org/wiki/Content_management_system" data-omni-click="r'article',r'link',r'7',r'416184'">content management system</a> (CMS) that organizes the thousands or millions of pieces of content that the media company generates.</p><p>It’s rarely just one CMS, however. Newsrooms rely on a blend of new and legacy systems. In a newsroom that produces a print edition, there is always an additional software system—like K4 or CCI or Hermes—that manages page layouts and sends those pages to digital printers. Let’s call this the print CMS. This is different than the web CMS, which could be a system like Wordpress. The BBC <a href="https://vimeo.com/119949161" data-omni-click="r'article',r'link',r'8',r'416184'">uses</a> at least two web CMSs. (Here’s a diagram of the newest one, <a href="http://www.bbc.co.uk/blogs/internet/entries/89de2d90-d020-47d0-857e-03ee4f7b2beb" data-omni-click="r'article',r'link',r'9',r'416184'">Vivo</a>.)</p></section>
  449. <p class="ad-boxright-wrapper" data-pos="boxright"><gpt-ad id="boxright1" targeting-pos="boxright1" class="ad ad-boxright" lazy-load="2" data-object-pk="3" data-object-name="boxright"><gpt-sizeset viewport-size="[1010, 0]" sizes="[[300, 250], [300, 600]]"/><gpt-sizeset viewport-size="[0, 0]" sizes="[[300, 250]]"/></gpt-ad></p>
  450. <section id="article-section-3"><p>Invisible processes seamlessly transmit text, images, headlines, and other content from one system to the other. Most news organizations don’t have in-house librarians any more, so archiving is largely done automatically. Large organizations like LexisNexis or EBSCO (<em>The Atlantic</em>’s archiver) will hoover up a digital feed from the news organization, store the information in a database, and then license packages of such databases to libraries. The digital feed might include the text of each story, the author’s name, the title of the story, any associated images, and some meta-information that describes the placement of the story or its licensing rights. In some cases, the feed also includes PDF images of each page of the newspaper or magazine.</p><p>To try to determine if LaFrance’s story was included in the archival feed, I ran a search on October 16, 2015, for all articles from <em>The Atlantic</em> in the EBSCO database (using my university-library subscription) from January 1, 2014, to December 31, 2015. There were 488 results.</p><p>I ran the same search on Google on the same date for stories that show a publication date on TheAtlantic.com from January 1, 2014, to December 31, 2015. There were 20,200 results.</p><p>Were there really 19,712 more stories published on TheAtlantic.com than in <em>The Atlantic</em> magazine? I’m not sure. Some of the Google hits could be duplicates, bringing the total number of articles published down below 20,200. Or, there could be something I don’t know about how many articles are included in my library’s subscription to EBSCO’s collection of works in <em>The Atlantic</em>. There could also be additional technical and licensing issues that I’m not aware of—archiving is an immensely complex practice. The 20,200 number does not include <em>Atlantic</em> writers’ posts to Facebook, Twitter, Instagram, Pinterest, Reddit, or any other social platforms where the journalists may have interacted with readers or posted comments related to their stories. If we want to count social posts as journalistic content, we need to revise our estimate dramatically upward. (Social posts are also <a href="https://www.washingtonpost.com/lifestyle/style/library-of-congress-has-archive-of-tweets-but-no-plan-for-its-public-display/2013/01/03/e4db1c24-55d4-11e2-bf3e-76c0a789346f_story.html" data-omni-click="r'article',r'link',r'10',r'416184'">surprisingly difficult</a> to meaningfully preserve in libraries, by the way.)</p><aside class="pullquote">The challenges of maintaining digital archives are as much social and institutional as technological.</aside><p>In all of my library searching, I couldn’t find LaFrance’s article on “The Crossing.” In fact, searching more than 400 databases and publishers via EBSCO, and the 700 million sources contained therein, I only found nine articles by Adrienne LaFrance. Which is strange, because looking at <a href="http://www.theatlantic.com/author/adrienne-lafrance" data-omni-click="r'article',r'link',r'11',r'416184'">LaFrance’s author page</a> on The Atlantic.com reveals pages upon pages of search results.</p><p>To understand what’s happening, we need to return to the back-end and think about the systems in which story text resides. LaFrance’s story appeared on TheAtlantic.com, which runs on a web CMS called <a href="http://www.theatlantic.com/product/archive/2015/01/building-our-new-photo-channel/384397/" data-omni-click="r'article',r'link',r'12',r'416184'">Ollie</a>. Ollie, which replaced three older CMSes, was <a href="https://www.youtube.com/watch?v=RWLQTCUpyWw" data-omni-click="r'article',r'link',r'13',r'416184'">custom-built</a> using a popular open-source software framework called <a href="https://www.djangoproject.com/" data-omni-click="r'article',r'link',r'14',r'416184'">Django</a>. The print edition of <em>The Atlantic</em> is managed through a workflow system called <a href="http://www.vjoon.com/" data-omni-click="r'article',r'link',r'15',r'416184'">K4</a>, which (unlike Django) works well with the Adobe software programs that are used to create layouts. From a media-tech perspective, this is state-of-the-art engineering. I don’t know how or where the EBSCO feed taps into this configuration. Probably, what happens is something like this:</p><figure><picture><img alt="" data-src="https://cdn.theatlantic.com/assets/media/img/posts/2015/11/Meredith_Diagram/133cff4d7.jpg" class="lazyload"/></picture><figcaption class="credit">Meredith Broussard</figcaption></figure><p>I’m reminded of the time I used a sink in a friend’s new pool house, which he built himself. “Don’t run too much water when you’re washing things,” my friend told me. “It looks like a real sink, but I didn’t hook it up to the sewer system, so the water just runs out onto the ground.” I was flummoxed. How could that be? Was he even allowed to do that? In that moment, I realized that plumbing, like software, is a complex system built by humans. Humans make mistakes and make idiosyncratic design decisions. So it is surprising, but not improbable, to realize that the complex multidimensional software systems that serve us web content might not be sending content to libraries in the ways that we expect.</p></section>
  451. <p class="ad-boxinjector-wrapper"><gpt-ad id="boxinjector2" targeting-pos="boxinjector2" class="ad ad-boxinjector" lazy-load="2" data-object-pk="1" data-object-name="boxinjector"><gpt-sizeset viewport-size="[1050, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1024, 350], [1, 3], [1600, 520], [1000, 350], [1600, 500], [970, 350]]"/><gpt-sizeset viewport-size="[1010, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1, 3], [768, 350], [768, 520], [640, 360], [970, 350]]"/><gpt-sizeset viewport-size="[760, 0]" sizes="[[728, 90], [728, 350], [1, 3], [768, 350], [768, 520], [640, 360]]"/><gpt-sizeset viewport-size="[0, 0]" sizes="[[300, 250], [320, 350], [300, 350], [1, 3], [320, 520], [320, 430]]"/></gpt-ad></p>
  452. <section id="article-section-4"><p>When I started my research into news preservation, I thought there would be an easy technological solution. There isn’t. Every media company in the world grapples with the issue of digital archiving. Large legacy organizations, like <em>The Atlantic</em> or <em>The New York Times</em> or the BBC, do a better job than smaller companies, but nobody has a solution. From a software perspective, it is a legitimately difficult problem: unsolved, but probably not unsolvable. “The challenges of maintaining digital archives over long periods of time are as much social and institutional as technological,” reads a 2003 NSF and Library of Congress <a href="http://www.digitalpreservation.gov/multimedia/documents/about_time2003.pdf" data-omni-click="r'article',r'link',r'16',r'416184'">report</a>. “Even the most ideal technological solutions will require management and support from institutions that in time go through changes in direction, purpose, management, and funding.”</p><p>Newsrooms need to manage workflow and content for print, audio, visuals, video, and code. Most software is built for companies that do only one of those things at a time; newsrooms do them all simultaneously. Every time a new technology is introduced, a newsroom needs a new content-management or workflow system to handle it. Ensuring interoperability between these systems and archival systems requires engineering, ingenuity, and regular attention.</p><p>The scale is different for newsrooms, too. Facebook only has to manage 11 years’ worth of data, all of which is digital and all of which is structured exactly the way it needs to be structured. A legacy media company might have to deal with more than a hundred years’ worth of data, only some of which is digital, all of which is <a href="http://educopia.org/publications/gdnpr" data-omni-click="r'article',r'link',r'17',r'416184'">potentially important to scholars</a>, all of which has different licensing restrictions and preservation needs and is <a href="http://blogs.loc.gov/digitalpreservation/2014/07/preserving-born-digital-news-at-digital-preservation-2014/" data-omni-click="r'article',r'link',r'18',r'416184'">ambiguously structured</a>. Remember when <a href="http://www.ojr.org/050922mcadams/" data-omni-click="r'article',r'link',r'19',r'416184'">Macromedia Flash was the new hot thing</a> in journalism? Most of those elaborate Flash projects have <a href="http://flashjournalism.com/examples/case_studies.htm" data-omni-click="r'article',r'link',r'20',r'416184'">disappeared</a> now. They’re probably archived on <a href="https://en.wikipedia.org/wiki/Jaz_drive" data-omni-click="r'article',r'link',r'21',r'416184'">Jaz drives</a> in a storage room somewhere, next to boxes of color slides and piles of floppy disks and other outdated media. Future historians will likely lament this loss.</p><aside class="pullquote">The Internet Archive will allow you to find a needle in a haystack, but only if you already know approximately where the needle is.</aside><p>The web only shows recent history. “Not one publication has a complete archive of its website,” my colleagues Kathleen Hansen and Nora Paul write in their <em>NRJ </em>article, <a href="http://nrj.sagepub.com/content/36/3/290.full.pdf+html" data-omni-click="r'article',r'link',r'22',r'416184'">“Newspaper Archives Reveal Major Gaps in Digital Age.”</a> “Most can go back no earlier than 2008 … In every case, informants talked about the chaos of switching CMSes or servers, of shifting organizational homes for the website, of staffing changes and many other elements that have had an impact on the integrity of the website over time.”</p></section>
  453. <p class="ad-boxinjector-wrapper"><gpt-ad id="boxinjector3" targeting-pos="boxinjector3" class="ad ad-boxinjector" lazy-load="2" data-object-pk="1" data-object-name="boxinjector"><gpt-sizeset viewport-size="[1050, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1024, 350], [1, 3], [1600, 520], [1000, 350], [1600, 500], [970, 350]]"/><gpt-sizeset viewport-size="[1010, 0]" sizes="[[728, 90], [728, 350], [970, 250], [1, 3], [768, 350], [768, 520], [640, 360], [970, 350]]"/><gpt-sizeset viewport-size="[760, 0]" sizes="[[728, 90], [728, 350], [1, 3], [768, 350], [768, 520], [640, 360]]"/><gpt-sizeset viewport-size="[0, 0]" sizes="[[300, 250], [320, 350], [300, 350], [1, 3], [320, 520], [320, 430]]"/></gpt-ad></p>
  454. <section id="article-section-5"><p>The quantity and variety of information we now produce has outpaced our ability to preserve it for the future. Librarians are the only ones who are making sure that our collective memory is preserved. And they, along with small teams of digital historians elsewhere, are still trying to understand the scope of myriad challenges involved in modern preservation. If today’s born-digital news stories are not automatically put into library storehouses, these stories are unlikely to survive in an accessible way.</p><p>So: The articles we see today on TheAtlantic.com are stored in a CMS that is ambiguously hooked up to my library’s archival feed. For the purposes of scholarly research (which is performed through library databases, not through Google), it appears that some subset of articles from TheAtlantic.com are not being preserved. Which means that in 20 years, media scholars may not be able to read Adrienne LaFrance’s article about a story that disappeared and was resurrected, because LaFrance’s article may have disappeared.</p><p>Some savvy readers may wonder: What about <a href="https://archive.org/about/" data-omni-click="r'article',r'link',r'23',r'416184'">the Internet Archive</a>? Doesn’t the Wayback Machine preserve web pages, and won’t LaFrance’s story be preserved that way? The simple answer is yes. LaFrance’s article was crawled by the Internet Archive’s Wayback Machine, and you can go and look at it there. The folks at the Internet Archive are thoughtful digital preservationists, and I am grateful every day for their work preserving our collective digital memory.</p><p>If I know exactly what web page I am looking for, the Internet Archive is very helpful. I know that LaFrance’s story ran on the front page of TheAtlantic.com on October 14, 2015, and so I can go to the Wayback Machine and <a href="https://web.archive.org/web/*/http://theatlantic.com" data-omni-click="r'article',r'link',r'24',r'416184'">look at the snapshot</a> taken closest to that date, which is October 15, and I can see LaFrance’s story “Raiders of the Lost Web” and I can click on it.</p><p>But if I don’t know exactly the web page that I want and exactly the day that the information appeared, I won’t be able to find the information in the Internet Archive. Library databases are indexed so that they are searchable, meaning that the databases include lots of information about the information that they contain. The Wayback Machine is <a href="http://www.xml.com/pub/a/ws/2002/01/18/brewster.html" data-omni-click="r'article',r'link',r'25',r'416184'">technologically quite sophisticated</a>—it preserves images and code too, for example—but it is not <a href="https://blog.archive.org/2015/10/21/grant-to-develop-the-next-generation-wayback-machine/" data-omni-click="r'article',r'link',r'26',r'416184'">yet</a> indexed so as to be easily searchable. The Internet Archive will allow you to find a needle in a haystack, but only if you already know approximately where the needle is.</p><p>I’m pretty sure that in five years, when I want to re-read LaFrance’s article, I won’t remember the exact date on which it was published. I’m also reasonably sure that in five years my browser bookmark to the story will be broken because of linkrot: <em>The Atlantic </em>will have redesigned its website and the story’s URL will be different. My 2020 web-searching self will probably look on <em>The Atlantic</em>’s website and fail to find the article because the CMS will have changed, and the search parameters will be set up differently, and I will not be able to find so much as a title for the article in the library databases. Which means I will give up in frustration and rant to anyone who will listen about how disorganized the online world is and how we are losing digital history almost as soon as we make it. This is a shame. Because it’s a really good article, and it deserves to endure.</p><p>There is a solution, of course. I could just print the article and keep it in my filing cabinet. But that would be a step backward, not forward.</p></section>
  455. </article>
  456. </section>
  457. <nav id="jumpto">
  458. <p>
  459. <a href="/david/blog/">Accueil du blog</a> |
  460. <a href="http://www.theatlantic.com/technology/archive/2015/11/the-irony-of-writing-about-digital-preservation/416184/">Source originale</a> |
  461. <a href="/david/stream/2019/">Accueil du flux</a>
  462. </p>
  463. </nav>
  464. <footer>
  465. <div>
  466. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  467. <p>
  468. Bonjour/Hi!
  469. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  470. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  471. </p>
  472. <p>
  473. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  474. </p>
  475. <p>
  476. Voici quelques articles choisis :
  477. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  478. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  479. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  480. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  481. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  482. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  483. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  484. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  485. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  486. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  487. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  488. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  489. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  490. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  491. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  492. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  493. </p>
  494. <p>
  495. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  496. </p>
  497. <p>
  498. Je ne traque pas ta navigation mais mon
  499. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  500. conserve des logs d’accès.
  501. </p>
  502. </div>
  503. </footer>
  504. <script type="text/javascript">
  505. ;(_ => {
  506. const jumper = document.getElementById('jumper')
  507. jumper.addEventListener('click', e => {
  508. e.preventDefault()
  509. const anchor = e.target.getAttribute('href')
  510. const targetEl = document.getElementById(anchor.substring(1))
  511. targetEl.scrollIntoView({behavior: 'smooth'})
  512. })
  513. })()
  514. </script>