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 13KB

3 년 전
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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>Notes sur une photographie ouverte (et amatrice) (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://11d.im/journal/notes-photographie-amatrice/">
  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>Notes sur une photographie ouverte (et amatrice)</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.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://11d.im/journal/notes-photographie-amatrice/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>C’est un peu un dump de cerveau sur ce que j’attends d’un site de publication de photographie. Maintenant que je me suis fait plaisir et rassuré sur la technicité (<a href="/journal/10-jours-six-photos/">épisode 1</a>, <a href="/journal/strapi-astro/">épisode 2</a>), je vais mettre un peu le développement de <a href="https://six.photos">six.photos</a> entre parenthèse pour partir en vacances et aussi alimenter le site plutôt que de juste travailler sur sa forme.</p>
  71. <h2>La photographie comme hobby</h2>
  72. <ul>
  73. <li>Instagram : Mettons de côté quelques secondes la propriété par facebook. Instragram est de moins en moins et depuis certainement plusieurs années un espace de partage de photos/images qu’un espace pour les influenceu·r·ce·s et les marques. Quand les uns ne deviennent pas les autres. Vous et moi ne sommes pas vraiment les usagers de la plateforme. Nous y sommes littéralement des cibles, des variables et des chiffres à acquérir un par un, action par action : like, commentaire et achat.
  74. <ul>
  75. <li>Pour réussir sur instragram, il ne s’agit pas seulement d’avoir des images mais il faut adopter des stratégies. Se contraindre à avoir un univers cohérent et par exemple d’avoir une certaine palette de couleur et ne pas en sortir. Il y a une forme de normalisation des images et des imaginaires.</li>
  76. <li>Pourquoi pas ne pas juste partager des images sur facebook : parce que je n’ai pas envie de contribuer au pillage des données personnelles de cette plateforme. Que je n’ai également aucun contrôle sur le fait que mes cercles de connaissance vont voir les images ou non. Tout dépend d’algorithme d’économie de l’attention qui nous ramène à une problématique similaire au point initial.</li>
  77. </ul>
  78. </li>
  79. <li>Eyem, 500px, Snugmug etc : Je ne sais pas trop comment le formuler. Il y a une forme d’incitation constante à monétiser tout et n’importe quoi sur Internet. C’est devenu une norme de réussite. Aller de plateforme en plateforme pour être poseur de tendance et passer de l’autre côté de barrière sans pour autant montrer la dimension réelle du travail. Certaines plateformes tentent un modèle plus ancien en tapant dans la longue traîne des amateurs qui voudraient bien devenir professionnels, ou plus exactement se faire du blé, ou de l’argent de poche, on ne sait pas trop. Une forme d’uberisation de l’image en quelques sortes. C’est fatiguant.
  80. <ul>
  81. <li>Je crois que j’en suis au point où j’ai fait le deuil de tout ça et que j’ai pris conscience que je ne serai pas photographe professionnel ou reconnu pour cela et que ce n’est pas grave. Peut-être même en faire le deuil.</li>
  82. <li>J’ai par contre envie de continuer à garder le plaisir à produire des images comme une forme d’expression de vie intérieure et de partager cette production à mes proches. C’est une pratique amateur qui est à la fois gratuite pour moi et ce/ux que je prends en photo. Dans ce sens, j’ai également envie de m’améliorer : de faire des photographies plus expressives ce qui dans mon cas passe par un cheminent pour dégager des lignes directrices ainsi que comprendre les aspects techniques qui amènent à des options et des décisions.</li>
  83. </ul>
  84. </li>
  85. <li>Flickr appartient maintenant à Snugmug. Les communautés ont l’air d’être actives et calmes. Je suppose que la stratégie est d’amener les usagers vers la plateforme mère et donc dans un petit délire de monétisation.</li>
  86. <li><a href="https://www.shopmoment.com/">Moment</a> : à voir. Je découvre tout juste. Il y a un aspect boutique super présent mais j'aime bien la qualité de ce qu'on peut y apprendre. Il y a zéro endroit pour partager quoi que ce soit.
  87. <ul>
  88. <li>La vidéo et la photographie, pour les amateurs, sont aujourd’hui très liées à la vente de matériel qui prennent la poussière.</li>
  89. </ul>
  90. </li>
  91. <li>Il y a peut également un parallèle à faire avec le plaisir et le travail du texte.</li>
  92. </ul>
  93. <h2>Quelques pistes pour six.photos</h2>
  94. <ul>
  95. <li>Travailler sur la notion de séries. Sur insta, je m'étais donné 3 hashtags conducteurs. Sur flickr, j'en avais un peu plus mais quand même moins que 10.
  96. <ul>
  97. <li>a-matrice : sans matrice : le contraire :)</li>
  98. </ul>
  99. </li>
  100. <li>Pouvoir documenter les intentions.</li>
  101. <li>Donner à voir les changements/versions. Quand je remplace une photo par une versions retravaillée par exemple.</li>
  102. <li>Laisser visible les traces techniques comme les réglages de l’appareil.</li>
  103. <li>Laisser la possibilité à d’autres personnes d’avoir accès à mes photos pour en faire quelque chose à leur goût. Comme un remix ou un fork.</li>
  104. <li>Oublier les métriques que je m’impose professionnellement et revenir à la base : faire en sorte que mes proches puissent avoir accès aux photos sans contrainte de création de compte ou je ne sais pas quoi.</li>
  105. </ul>
  106. <h2>Similarité avec le logiciel libre et la donnée ouverte</h2>
  107. <ul>
  108. <li>Positionnement éthique plus que technique.</li>
  109. <li>Pas de données brutes. Pas de code brute. Tout est toujours le produit d’un travail.</li>
  110. <li>Donner à voir le travail et le processus.</li>
  111. </ul>
  112. <p>J’avais des grandes lancées sur mon vélo sur ces derniers points vendredi dernier mais maintenant que je suis en vacances, je vais me contenter de ça.</p>
  113. </article>
  114. <hr>
  115. <footer>
  116. <p>
  117. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  118. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  119. </svg> Accueil</a> •
  120. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  121. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  122. </svg> Suivre</a> •
  123. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  124. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  125. </svg> Pro</a> •
  126. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  127. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  128. </svg> Email</a> •
  129. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  130. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  131. </svg> Légal</abbr>
  132. </p>
  133. <template id="theme-selector">
  134. <form>
  135. <fieldset>
  136. <legend><svg class="icon icon-brightness-contrast">
  137. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  138. </svg> Thème</legend>
  139. <label>
  140. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  141. </label>
  142. <label>
  143. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  144. </label>
  145. <label>
  146. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  147. </label>
  148. </fieldset>
  149. </form>
  150. </template>
  151. </footer>
  152. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  153. <script>
  154. function loadThemeForm(templateName) {
  155. const themeSelectorTemplate = document.querySelector(templateName)
  156. const form = themeSelectorTemplate.content.firstElementChild
  157. themeSelectorTemplate.replaceWith(form)
  158. form.addEventListener('change', (e) => {
  159. const chosenColorScheme = e.target.value
  160. localStorage.setItem('theme', chosenColorScheme)
  161. toggleTheme(chosenColorScheme)
  162. })
  163. const selectedTheme = localStorage.getItem('theme')
  164. if (selectedTheme && selectedTheme !== 'undefined') {
  165. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  166. }
  167. }
  168. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  169. window.addEventListener('load', () => {
  170. let hasDarkRules = false
  171. for (const styleSheet of Array.from(document.styleSheets)) {
  172. let mediaRules = []
  173. for (const cssRule of styleSheet.cssRules) {
  174. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  175. continue
  176. }
  177. // WARNING: Safari does not have/supports `conditionText`.
  178. if (cssRule.conditionText) {
  179. if (cssRule.conditionText !== prefersColorSchemeDark) {
  180. continue
  181. }
  182. } else {
  183. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  184. continue
  185. }
  186. }
  187. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  188. }
  189. // WARNING: do not try to insert a Rule to a styleSheet you are
  190. // currently iterating on, otherwise the browser will be stuck
  191. // in a infinite loop…
  192. for (const mediaRule of mediaRules) {
  193. styleSheet.insertRule(mediaRule.cssText)
  194. hasDarkRules = true
  195. }
  196. }
  197. if (hasDarkRules) {
  198. loadThemeForm('#theme-selector')
  199. }
  200. })
  201. </script>
  202. </body>
  203. </html>