Conduite de projets numériques à Nantes & mains dans le code
Front :
#HTML #CSS #Javascript
#Eleventy
| Site web personnel | https://www.teotimepacreau.fr/ |
| Flux RSS | https://www.teotimepacreau.fr/feed/feed.xml |
| Github | https://github.com/teotimepacreau |
Created an #Eleventy plugin to zoom images on fullscreen.
When hovering, the magnifying glass indicates to the user that the img can be enlarged. A click and it appears enlarged, through a fade-in animation. A click outside the image quit the enlarged view.
Under the hood, a #VanillaJS inserts `<dialog>` #HTML modal right before the image. Outside of the modal click =`dialog` disappears.
Styled via #CSS `@starting-style`.
zoom image to fullscreen. Latest version: 1.0.0, last published: 22 minutes ago. Start using eleventy-plugin-img-magnifier in your project by running `npm i eleventy-plugin-img-magnifier`. There are no other projects in the npm registry using eleventy-plugin-img-magnifier.
Comment challenger les pratiques de transformation organisationnelle grâce au design de services ? https://www.teotimepacreau.fr/essais/challenger-pratiques-transformation-organisationelle-par-le-design-de-services
Les pratiques de transformation organisationnelle incitent parfois à adopter la posture de « consultant » telle que celle pratiquée dans les cabinets de conseil. Pourtant, au quotidien, mon activité professionnelle s’intègre à celle de collègues designers de services.
-
#innovation #design #designthinking #transformationorganisationnelle #consulting #innovationpublique
Les pratiques courantes de transformation organisationnelle souffrent parfois d'approches descendantes sans mesurer l’importance d’impliquer les usagers dans les projets de changement. De l’autre côté la méthode du design de services vise à concevoir des dispositifs sur-mesure en immersion au plus près des usagers pour répondre à leurs besoins. Combiner les deux méthodes conduit à réduire le risque d'échec des démarches de transformation et facilite la conduite du changement.
Si vous êtes sensibles au sort des apprentis je vous invite à repartager sur LinkedIn/vos réseaux personnels le communiqué de l'Association Nationale des Apprentis de France demandant le rejet de cette mesure du #PLFSS2025
: https://www.linkedin.com/posts/aur%C3%A9lien-cadiou_communiqu%C3%A9-de-lanaf-plf-plfss-2025-activity-7251487407814959104-7ojU?utm_source=share&utm_medium=member_android
#apprentissage #alternance #etudiants #PLF2025 #Budget2025 #Gouvernement #Travail #Ecole #Entreprise
À contre-courant des images générées par IA, le journal The Guardian, a choisi d'illustrer ses articles à partir de collages faits mains.
Le but : miser sur l'authenticité face à la désinformation à l'œuvre dans certains médias.
Techniquement, les compositions sont basées sur une majorité d'éléments en noirs et blancs avec une touche de couleur d'accentuation. Le découpage et la superposition donnent de la profondeur.
Article détaillant le processus : https://www.itsnicethat.com/features/the-guardian-election-editorial-graphic-design-illustration-spotlight-140624
Ajouter un overlay gradient pour augmenter la lisibilité du texte au dessus d'une image en une seule ligne de CSS !
```
border-image: fill 0 linear-gradient(transparent, #0000009a);
```
Ne fonctionne que pour une background-image
Astuce CSS accessibilité : comment cacher de façon accessible un élément décoratif issu d'un pseudo élément (::before ::after) ?
```
.a:before {
content: "⬈" / "";
}
```
Le contenu indiqué après le / permet d'indiquer le texte accessible à afficher dans l'arbre d'accessibilité
Il est même possible de décrire avec un ALT texte la sémantique de l'icône décorative si souhaitée
D'ici quelques mois supporté par tous les navigateurs :
https://caniuse.com/?search=content%20alt%20text
