Julie Blanc

Design graphique, code et recherche

</>

graphisme.design, Université Paris 8
8 février 2024

  • Licence Concepteur designer Axe Sud, Toulouse (2014)
  • Master erg.edit : politique du multiple erg, Bruxelles (2016)
  • Pré-doctorat EnsadLab EnsAD, Paris (2017)
  • Doctorat en ergonomie Université Paris 8, EnsadLab, EUR Artec (2018-2023)

Technologies du web

Technologies du web = séparation du contenu et de la présentation

Concevoir des sites web

(en codant directement)

https://medialab.sciencespo.fr/

Concevoir avec une sobriété technique

  • No images
  • No fonts
  • No javascript

https://julie-blanc.fr/blog/2020-03-25_medialab-1/

https://repenserlesheros.femis.fr/

Publication web

  • Couverture
  • Structure et navigation
  • Design responsive
  • Animations
  • Éléménts multimédias et interactifs

Publication web

  • Couverture
  • Structure et navigation
  • Design responsive
  • Animations
  • Éléménts multimédias et interactifs

Publication web

  • Couverture
  • Structure et navigation
  • Design responsive
  • Animations
  • Éléménts multimédias et interactifs

Publication web

  • Couverture
  • Structure et navigation
  • Design responsive
  • Animations
  • Éléménts multimédias et interactifs

Publication web

  • Couverture
  • Structure et navigation
  • Design responsive
  • Animations
  • Éléménts multimédias et interactifs

https://chromobase.huma-num.fr

https://chronologie.delure.org

https://designenrecherche.org

Concevoir avec CSS print

Bibliothèque JavaScript libre et open source
qui affiche un contenu paginé dans un navigateur
en prenant en charge le code CSS pour l'impression

Basée sur les standards du W3C

Core team

Adam Hyde

Fred Chasen

Julien Taquet

Julie Blanc

Coko Foundation

Flux → Pagination

Vue dans le navigateur de l'utilisation de Paged.js

Demo time

Concevoir des chaînes éditoriales

  • Multisupports
  • Collaboratives
  • Légères et modulaires
  • Ouvertes

Les sculptures de la villa romaine de Chiragan, musée Saint-Raymond (Toulouse)

Une chaîne éditoriale Multisupports

Publication web

Catalogue imprimé

Single source publishing

Une chaîne éditoriale Collaborative

Une interface d'entrée des contenus pour l'équipe éditoriale (reliée à GIT)

Utilisation du système de versionnemet GIT
(Vue du projet dans Gitlab)

Nombre de commits par participant·e·s en fonction de la durée du projet

Une chaîne éditoriale Légère et modulaire

https://julie-blanc.fr/blog/2020-11-05_chiragan

Une chaîne éditoriale Ouverte

Open Source
Open Access
Open Data

https://villachiragan.saintraymond.toulouse.fr/

Concevoir une recherche doctorale

Théories de l'activité

Développement des individus
et des systèmes socio-techniques

Approche anthropocentrée de la technique

Vygotsky, 1981 ; Léontiev, 1974
Rabardel, 1995 ; Engeström, 2014 [1987]

La technique c'est la façon dont quelqu'un fait quelque chose a écrit l'historien Lynn White dans une formule dont l'intérêt est de nous rappeler que le “quelqu'un est essentiel”, parce que c'est lui qui nous indique la bonne échelle. Une technique n'existe que lorsqu'elle est pratiquée, c'est-à-dire lorsqu'elle passe par quelqu'un qui, l'ayant apprise ou inventée, la met en œuvre de façon efficace. Il n'y a pas de technique sans cette efficacité et les habiletés humaines qu'elle implique. C'est donc là où ces habiletés sont produites qu'il faut observer les techniques.

Rabardel, 1995

Instruments de rationalisation

Flux → Pagination

Double page du programme 2013-1014 de la Balsamine, mis en page par Open Source Publishing
« On a assumé ce flux. Au niveau des images, on faisait exprès de mettre des images qui étaient coupées pour assumer ça. (...) On aime bien laisser des petits indices sur le processus.»

Nouvelles notions
de composition graphiques

Comportement, flexibilité, fluidité et variabilité

Je voulais vraiment laisser le contenu prendre la place dont il avait besoin et donc obtenir des pages qui avaient des grilles à peu près similaires mais en même temps qui étaient jamais tout à fait les mêmes. (...)
Quelque part, je laisse un peu de place à la machine et à la manière dont elle est programmée, pour finir ma mise en page.

CSS flexbox

Positionner et distribuer des éléments flexibles dans un espace flexible

Hybridation des pratiques du web
(espace fluide)
et des pratiques de l'imprimé (espace fixe)

S'inscrire dans une communauté de pratique (faire collectif)

Logiciel libre

Possibilité d’inspecter, modifier et dupliquer son code source
Licence ouverte

Culture

Collaboration, promotion d’un rapport actif et créatif aux objets techniques, l’apprentissage collectif

Piocher dans les ressources
de la communauté

Concevoir
à partir du code d'autrui

Page web source du code du filtre de bichromie pour les images (codepen.io)

Capture d'écran du code de benjamin et du rendu dans son navigateur web

Coder pour soi, coder pour les autres :
la mise en lisibilité du code

Mise en lisibilité du code
se traduit dans différentes pratiques d’écriture codifiée

  • décomposer le code en unités appréhendables,
  • donner des noms de classes génériques,
  • utiliser la sémantique HTML,
  • trouver les lignes de code les plus simples possible,
  • enlever les lignes de code inutiles,
  • ajouter des commentaires textuels du code,
  • donner des noms de fichiers et de variables pertinents, etc.

Apprendre à écrire un programme informatique, c’est apprendre à l’écrire de manière à ce qu’il soit intelligible pour une communauté de praticien·ne·s

Graham Button et Wes Sharrock, « The Mundane Work of Writing and Reading Computer Programs »,1995.

S'inscrire dans une communauté de pratique (faire collectif)

Concevoir un outil collectivement et développer de nouvelles fonctionnalités

Développer les fonctionnalités manquantes
et imaginer de nouvelles spécifications CSS

Revue Rechtexte/ Design graphique: Julie Blanc

Wim Nijenhuis The Riddle of the Real city, 2017 / Design graphiaque: Open Source Publishing

https://phd.julie-blanc.fr/

Merci

  • julie-blanc.fr / studio-cascade.fr
  • julieblancfr
  • contact@julie-blanc.fr

Made width HTML & CSS
slides.julie.blanc.fr