The World Wide Web and the Death of Graceful Degradation
via ▻https://diasp.eu/p/17638194
►https://hackaday.com/2025/05/20/the-world-wide-web-and-the-death-of-graceful-degradation
#featured #history #interest #rants #softwaredevelopment #gracefuldegradation #webdesign #hackaday posted by pod_feeder_v2
Un portail qui fait le point sur l’état des connaissances et des débats sur l’#histoire_coloniale et post-coloniale de Marseille.
–-
#Film :
1922. L’exposition coloniale à Marseille
#film_documentaire #vidéo #documentaire
#Marseille #Marseille_coloniale #France #histoire_coloniale #webdoc #balades_décoloniales #balade_décoloniale #impérialisme #exposition_coloniale #objets #musée #appropriation #science #colonialisme #musée_colonial #science #parcours #urban_matter
signalé aussi par @badoldworld :
▻https://seenthis.net/messages/1110472
Mars Imperium : un portail qui fait le point sur l’état des connaissances et des débats sur l’#histoire_coloniale et post-coloniale de #Marseille.
Hum… Je suis à la bourre moi…
Un bon gros site en @spip fait avec @cy_altern (entre autre) pour le labo d’histoire Telemme (AMU/CNRS), avec plein de trucs un peu sympas dedans. Un jour il faudrait que je prenne le temps de faire un détail technique #shameless_autopromo comme @arno :)
#webdoc #documentaire #vulgarisation #histoire #colonisation #spip
#Typographie - Système de Design de l’État
▻https://www.systeme-de-design.gouv.fr/elements-d-interface/fondamentaux-de-l-identite-de-l-etat/typographie
Les typographies Marianne® et Spectral sont les typographies officielles de la charte de l’État. Leur usage crée une cohérence entre les interfaces et offre une expérience positive à l’utilisateur. Leur respect renforce également la reconnaissance de la parole de l’État.
L’envie d’un web plus simple
Depuis quelques années, une partie de la communauté internet se tourne vers des solutions plus simples et moins gourmandes en ressources, en réaction à ce que beaucoup considèrent comme l’« #emmerdification » progressive du #web. Le protocole Gemini a émergé comme une réponse prometteuse à ce besoin, mais après l’enthousiasme initial, une certaine désillusion semble s’installer.
Trouver une voie du milieu entre #Gemini / #Solid et l’« emmerdification » du web actuel.
▻https://jpfox.fr/posts/envie-d-un-web-plus-simple
#webdev #sobriété_numérique #webperf #développement #conception
@stephane fait remarquer en commentaire que dans la FAQ de Gemini il y a déjà une réponse à ça : faire un web plus simple avec les outils déjà existants est parfaitement possible et ça marche, mais ça ne permet pas de le savoir en avance. Le web c’est suivre des liens en permanence, ou aller sur des nouveaux sites qui n’existaient pas hier, et alors il est impossible de savoir d’avance si le site va être plein de tracking, ou va être hyper lourd à charger, ou va faire tourner le CPU avec plein de JS etc. Alors qu’avec un protocole simple dédié, on le sait d’avance et on peut cliquer n’importe où en sachant que ça va rester simple, rapide, et sans surveillance. Ils disent : c’est comme faire du vélo dans un parc dédié VS rouler doucement avec un tank dans un champ de mines.
Et on termine d’ailleurs par une remarque que j’avais déjà faite : l’article se conclut par cette invitation :
On en discute sur le fediverse ?
Ça suggère une très très grosse limite à « un web plus simple », et/ou pourquoi les gens publient sur les réseaux sociaux plutôt que simplement sur leurs sites Web.
Digital Benin
▻https://digitalbenin.org
Administré par le MARKK (Museum am Rotherdaum. Kulturen und Künste der Welt) à Hambourg, le projet associe des historiens, des historiens de l’art, et des spécialistes des humanités numériques, pour reconstituer virtuellement le trésor royal du Bénin, pillé par les Britanniques lors de leur “expédition punitive” de 1897, soit plusieurs milliers de pièces actuellement dispersés dans plus de 130 institutions dans une vingtaine de pays, quasi exclusivement entre l’Europe et l’Amérique du Nord.
Le site Internet propose également du matériel pédagogique, un répertoire de vocabulaire des désignations des types d’objets dans leur langue d’origine (typologie qui diffère parfois de celle des muséographies occidentales), et une collection d’enregistrements audio et vidéo d’histoire orale, dans une volonté de reconnecter cet ensemble numérique inédit avec la culture historique et vivante de Benin City.
HTML: The Bad Parts - HTMHell
▻https://www.htmhell.dev/adventcalendar/2023/13
You’ve probably heard statements along the lines of “HTML is already accessible by default” or “You don’t need to reinvent this perfectly fine HTML control”. I consider these to be more of general claims rather than universal truths. It’s extremely important for web developers to recognize gaps in the platform. To that end, I’ve decided to collect a few instances where HTML falls short, through accessibility issues or usability issues.
This is not a comprehensive list, and it does not include gaps in ARIA. I wanted to find a balance between widely known issues and more frequently encountered (but lesser known) ones, while making sure to include some things that we take for granted. In each section, I will include its severity, alternate suggestions, and links where you can find more detailed information.
kd2org/karadav: Lightweight NextCloud compatible WebDAV server
▻https://github.com/kd2org/karadav
https://github.com/kd2org/karadav/blob/main/doc/scr_index.jpg?raw=true
This is a simple and lightweight #WebDAV server, allowing to easily set up a #file_sharing server compatible with WebDAV and #NextCloud clients. It has no dependencies and good performance.
It is written in #PHP (8+). The only dependency is #SQLite3 for the database.
Its original purpose was to serve as a demo and test for the KD2 WebDAV library, which we developed for Paheko, our non-profit management solution, but it can also be used as a simple but powerful file sharing server.
If you are looking for an even lighter WebDAV server, try also our other server, PicoDAV ▻https://github.com/kd2org/picodav. It isn’t compatible with NextCloud/ownCloud clients, but it is a single file that you can drop anywhere in your document root, nothing to install!
Get the bookmarklet that will check your HTML against the #ARIA in HTML specification, it will tell you whether you are using ARIA as intended
▻https://thepaciellogroup.github.io/WAI-ARIA-Usage/WAI-ARIA_usage.html
Je ne sais pas ce que ça vaut...
Via ▻https://mastodon.social/@SteveFaulkner/110339033446419542
Visual #design #rules you can safely follow every time
▻https://anthonyhobday.com/sideprojects/saferules
You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are #safe to follow every time.
– Use near-black and near-white instead of pure black and white
– Saturate your neutrals
– Use high #contrast for important elements
– Everything in your design should be deliberate
– Optical #alignment is often better than mathematical alignment
– Lower letter spacing and line height with larger #text. Raise them with smaller text
– Container borders should contrast with both the container and the background
– Everything should be aligned with something else
– #Colours in a palette should have distinct brightness values
– If you saturate your neutrals you should use warm or cool colours, not both
– Measurements should be mathematically related
– Elements should go in order of visual weight
– If you use a horizontal grid, use 12 columns
– #Spacing should go between points of high contrast
– Closer elements should be lighter
– Make drop shadow blur values double their distance values
– Put simple on complex or complex on simple
– Keep container colours within brightness limits
– Make outer padding the same or more than inner padding
– Keep body text at 16px or above
– Use a line length around 70 characters
– Make horizontal #padding twice the vertical padding in buttons
– Use two #typefaces at most
– Nest corners properly
– Don’t put two hard divides next to each other
#ux Finitions.
J’ai l’impression qu’on redit toujours un peu les même choses depuis 15 ans.
Et surtout que ce sont les pratiques de PAO qui débouchent sur le web.
Un videogioco per capire la rotta balcanica
▻https://www.balcanicaucaso.org/aree/Bosnia-Erzegovina/Un-videogioco-per-capire-la-rotta-balcanica-216944
Si chiama «The Game – La Rotta Balcanica», è gratuito e consente di mettersi nei panni virtuali di un ragazzo afghano lungo l’ultimo tratto di viaggio, dalla Bosnia Erzegovina all’Italia
Voir aussi :
– le site de « The Game » : ▻https://dialobot.com
– la page de téléchargement : ▻https://dialobot.itch.io/thegamethebalkanroute
– sa présentation en anglais :
You are twenty years old, you are Afghan, you are running away from the Taliban, you want to reach your cousin in Germany.
250 km separate you from Italy and your asylum request: the last part of the Balkan route called - the game -.
How will you get to your goal? How will the journey change you?
A visual novel based on real events, with achievements to collect and eight possible endings conditioned by your choices.
#the_game #route_des_Balkans #interactivité #webdoc #gamedoc
SafeGraph — Places Data for Software and Technology Teams
▻https://www.safegraph.com/careers
Le #no-code, nouveau sésame pour les non-initiés à la #programmation ?
Le mouvement no-code est devenu en trois ans une vraie alternative à la programmation. Des solutions comme #Bubble, #Webflow, #Airtable, #Glide permettent de créer un #site_web ou une #appli_mobile sans pour autant être un développeur confirmé.
En gros,
Cette nouvelle méthode va aider à décharger ces ingénieurs de l’écriture de codes à faible valeur ajoutée, une tâche qu’ils considèrent comme ingrate et qu’ils ont tendance à saboter.
▻https://usbeketrica.com/fr/article/le-no-code-nouveau-sesame-pour-les-non-inities-a-la-programmation
donc ils créent des outils à « forte valeur » ajoutée pour que les utilisateurs et utilisatrices finales sabotent eux-même leur code, c’est ça ? Car j’ai du mal à croire que des applis #wysiwyg produisent un code aussi propre qu’un être humain qualifié. Sans parler de l’accompagnement.
Bref, c’est encore une fois sur le marché lowcost que ça tire vers le bas...
#développement #webdev (no-)#html #no_code
Le #wysiwyg en web, c’était Dreamweaver : le pur cauchemar quand tu passais derrière. Le truc qui imbriquait les balises en mode infini sans jamais rien réécrire. Pas de commentaires, bien sûr. Du code de merde.
Et Ad0b€ InDesign ! ! ! Bon sang ! DreamWeaver, c’était presque W3C par rapport à InDesign !
Toujours cette idée de nouveauté qu’elle est neuve et que c’est un nouveau sésame… C’est juste qu’on en a toujours bouffé sur le Web de ces promesses avec Dreamweaver, Director, Flash… depuis les années 90.
Un aspect vraiment flippant de ces trucs, c’est qu’on continue de fabriquer des jeunes professionnels dont on a encouragé l’incompétence informatique, et qui vont en chier toute leur vie dans des boulots de merde où il n’y a pas d’argent à gagner.
30 ans après, on continue à fabriquer des graphistes, designers, photographes… fiers d’avoir une maîtrise totalement superficielle de leurs outils informatiques. Des gens qui ensuite se lancent sur le marché en étant à la fois moins efficaces et moins « innovants » (y compris sur leur cœur de métier, c’est-à-dire les créations graphiques et visuelles) que leurs concurrents, et vont dépendre de prestataires informatiques qui vont la leur faire à l’envers systématiquement.
L’impossibilité de défendre ton boulot, parce qu’il est toujours plus ou moins approximatif/amateur au moment du rendu, et les clients seront souvent insatisfaits, parce que la fin de la prestation est toujours bordélique (ça marche pas, ça marche pas bien, personne ne sait pourquoi parce que personne n’a la moindre compétence…). Donc végéter dans des petits boulots mal rémunérés et peu gratifiants.
Et évidemment l’impossibilité de survivre quand le seul logiciel Wysiwyg que tu maîtrises disparaît (le massacre quand Flash a disparu, le massacre quand ton client peut s’acheter pour 5 dollars un template tout fait et que tu ne peux proposer rigoureusement aucune valeur ajoutée par rapport à ça…).
Ça fait 30 ans que je vois passer des gens qui galèrent parce qu’on leur a fait miroiter qu’ils pourraient devenir des professionnels avec des outils Wysiwyg, et qu’une fois sur le marché professionnel, c’est une catastrophe et ils sont cantonnés comme tu dis au low-cost, où il y aura toujours quelqu’un d’encore moins cher, et pas forcément plus incompétent (genre à se retrouver au bout de 5 ou 10 ans sur une « place de marché » en ligne en concurrence avec des boîtes low-cost installées en Inde).
«Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
▻https://css-tricks.com/next-gen-css-container
« […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.
Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.
No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »
ça fait tellement d’année qu’on attend ça…
#CSS #intégration #web #responsive
Le sourire d’Auschwitz - FRANCE 24
▻https://webdoc.france24.com/sourire-auschwitz/index.html
Journaliste à France 24, Stéphanie Trouillard s’est spécialisée depuis plusieurs années dans l’histoire de la Seconde Guerre mondiale. En réalisant des recherches sur sa région d’origine, la Bretagne, elle découvre la photo d’une déportée du Morbihan, Marie-Louise Moru, dite Lisette. Un cliché pris à Auschwitz sur lequel la jeune femme, étonnamment souriante, semble défier ses bourreaux. Cette attitude emplie de bravoure va inspirer une longue enquête pour retracer le parcours tragique de cette résistante. Longtemps resté dans l’ombre, le destin de Lisette retrouve la lumière.
En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.
Si vous avez des exemples et des outils à ajouter, je suis preneur.
______________________________________
LES EXEMPLES
▻http://www.framescollection.com/tunnelrats.html
Peu de technique, mais une narration forte illustrée et rythmée graphiquement
▻http://www.framescollection.com/manly.html
essentiellement graphique mais peu adaptable sur mobile
▻https://projects.lukehaas.me/scrollify/examples/apple
principalement des animations visuelles et peu de texte
▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
joue principalement sur les fonds (image ou vidéos) et peu de texte
►http://computer-grrrls.gaite-lyrique.net
joue principalement sur le rythme des blocs de contenu
▻https://brest1937.kubweb.media/episode/heritage
alterne animations et contenus textes/vidéos
▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
très simple, repose sur l’image
▻https://www.liberation.fr/apps/2019/02/paris-populaire
moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus
►https://fabre.montpellier3m.fr/Correspondance d’@arno
pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)
▻https://www.bloomberg.com/graphics/2015-auto-sales
haut niveau, avec animation de #SVG et tout
▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
idem, gros niveau, The Guardian quoi
►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
Site plus archivé mais tjs visible via ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin
►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
Pour l’intro et le zoom sur le carte
►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
pour la navigation dans la carte
►https://www.women-in-type.com
Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties
►https://fos200ans.fr
Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.
►https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713
►https://media.lesechos.fr/infographie/tenet
Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)
►https://ig.ft.com/generative-ai
►https://tympanus.net/codrops/demos/?tag=scroll
Pas mal d’exemples (attention, il y a à boire et à manger)
______________________________________
LES OUTILS
How to implement #scrollytelling with six different libraries partagé par @fil
►https://pudding.cool/process/how-to-implement-scrollytelling
Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
►https://github.com/russellgoldenberg/scrollama
Scroll Btween partagé par @b_b
Tween any CSS values on any DOM element in relation with its position into the viewport.
►https://olivier3lanc.github.io/Scroll-Btween
Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
▻https://projects.lukehaas.me/scrollify
ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
▻https://sjwilliams.github.io/scrollstory
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
►https://maxwellito.github.io/vivus
graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
▻https://github.com/1wheel/graph-scroll
enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
▻https://github.com/russellgoldenberg/enter-view
Projects | Knight Lab partagé par @klaus
▻https://seenthis.net/messages/792645
revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
►https://revealjs.com
______________________________________
TAGS SUR SEENTHIS
#art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms
Gaffe : dans un très grand nombre d’exemples, l’affichage n’est pas du tout responsive. C’est tout de même dommage de nos jours.
Oui, c’est une contrainte forte à intégrer, c’est clair !
Voici un outil qui pourrait être utile : ►https://revealjs.com
Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :
– les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;
– faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.
– et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.
– l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…
– et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.
Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin
En gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
Et c’est responsive :p
Pour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.
Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.
Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).
Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.
Merci pour vos retours forts inintéressants :)
Purement graphique et avec un travail de design sonore mais seulement dans une app
Phallaina, le roman graphique
▻https://youtu.be/GIqQIpmhJGQ
J’ajoute le seen de @thibnton car il y a une partie sur le storytelling et des exemples inintéressants :
Quels usages de l’audio pour les médias en ligne, notamment la presse écrite ? Une édition en partenariat avec Hyperradio, qui fête sa 200ème édition. podcast
2 ajouts :
– pour l’intro et le zoom sur le carte : ►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
– pour la navigation dans la carte : ►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
haha je me suis dit la même chose hier sur l’article Haïti !
Et en lisant cette même série (5 articles), je me suis aussi redit que chaque module pourrait/devrait parfaitement pouvoir faire l’objet d’une « noisette » configurable du plugin Noizetier, pour construire des pages riches du même genre
(@astier si un jour tu remets en ligne une archive de geoculture… vu que là le lien que je donnais l’année précédente est mort maintenant, pour montrer le principe d’expo virtuelle en noizetier)
@rastapopoulos Malheureusement non, ce n’est pas au programme :-/ J’ai seulement produit un petit site présentant simplement quelques unes des notices que l’on avait produite au moment de la refonte, histoire d’en garder une trace, un petit quelque chose...
Par contre, on peut retrouver de belles traces grâce à la Wayback Machine : ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin
1 ajout :
►https://www.women-in-type.com
Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties
1 ajout :
►https://fos200ans.fr de @cy_altern
Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.
1 ajout (malgré #paywall)
►https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713 repéré par @fil sur mastodon
1 ajout
►https://media.lesechos.fr/infographie/tenet
Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)
1 ajout
►https://ig.ft.com/generative-ai
@fil sur mastodon
1 ajout
►https://tympanus.net/codrops/demos/?tag=scroll
Pas mal d’exemples (attention, il y a à boire et à manger)
dont celui-ci qui fonctionne bien ▻https://tympanus.net/codrops/2024/04/23/blurry-text-reveal-on-scroll
Iconduck - Free open source icons, illustrations and graphics
▻https://iconduck.com
#icone #svg
Y a pas mal de ressources partagées ici, si on les recensait ? :)
►https://orioniconlibrary.com
►https://www.flaticon.com
►https://flaticons.net par
►https://icons.pixsellz.io
►https://icongr.am
►https://remixicon.com
►https://www.svgrepo.com
►https://danklammer.com/bytesize-icons
(par @monolecte, @b_b, @cy_altern, @rastapopoulos)
#Icons #ressource_graphique #webdesign #pictos #graphisme #ergonomie #web #intégration #interface
unDraw - Open source illustrations for any idea
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.
Dans mon idée, on partait plus sur les icônes ici pour s’y retrouver et les outils dans d’autres fils :) et avec un #Ressources_graphisme ou #Ressources_integration pour tout lier.
Mais à voir.
des nouveaux
– ▻https://feathericons.com
– ▻https://github.com/primer/octicons
– ▻https://fonts.google.com/icons?selected=Material+Icons
– ▻https://icons.coreui.io/icons
– ▻https://github.com/danklammer/bytesize-icons
– ▻https://useiconic.com/open
– ▻https://forkaweso.me/Fork-Awesome/icons
Source + avis : ▻https://core.spip.net/issues/4727
How to Design Better Icons
▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf
Emmet — the essential toolkit for web-developers
►https://emmet.io
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Découvert via cette vidéo :
▻https://www.youtube.com/watch?v=EhRPdUv1ZrA
Grace à #vscodium, on peut passer plus de temps à apprendre les raccourcis qu’à coder :)
Pour info, il y a des snippets pour #spip : ►https://git.spip.net/spip-contrib-outils/snippets-vscodium
Roh ! Je ne connaissais pas « lorem » ou « lorem5 » ... un indipensable :)
google-drive-to-webdav
Performs the following actions:
– Reads files from a #google_drive source,
– then uploads them to a #webdav destination,
– them trashes them in the google drive source (they will be deleted by google after 30 days)
▻https://github.com/bnjbvr/gdrive-to-webdav
via ▻https://mobile.twitter.com/clochix/status/1342198663603515392?s=09
Fos / étang de Berre : 200 ans d’histoire industrielle et environnementale
►https://fos200ans.fr
Un webdoc en SPIP comme support de vulgarisation d’un projet de recherche socio-historique.
Double navigation immersive ou cartographique, création d’un outil de génération de fonds cartographiques pour GIS à partir d’images, plein d’interviews vidéos des acteurs locaux... une collaboration chercheurs/vidéaste/spipeurs efficace !
aujourd’hui passé en statique
#spip #pollution #lutte_environnementale #fos #webdoc #shameless_autopromo
Accéder à l’ancienne version de MicrosoftEdge | Microsoft Docs
▻https://docs.microsoft.com/fr-fr/DeployEdge/microsoft-edge-sysupdate-access-old-edge
Utiliser les 2 versions du navigateur Microsoft Edge (Legacy et Chromium) sur un même ordi. _modification de la stratégie de groupe à faire avant d’installer la nouvelle version_
Inclusively Hiding & Styling Checkboxes and Radio Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
▻https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image — SVG, of course, being the more flexible, powerful, and accessible replacement. But an SVG image is, at the end of the day, just an image, so while it can visually replace a checkbox, it doesn’t really substitute for it — the user still needs a checkbox to interact with. So, when we attempt to hide the checkbox we want to style, we need to make sure that the checkbox remains accessible and interactive.
Plongez dans notre #webdocumentaire sur les #inégalités
▻https://www.inegalites.fr/Plongez-dans-notre-webdocumentaire-sur-les-inegalites
Nous sommes allés à la rencontre d’une dizaine de jeunes, de 12 à 27 ans, dans plusieurs villes françaises. Ils nous ont parlé de leur vie, de leurs rêves, de leurs espoirs, de leurs ambitions, mais aussi des freins et obstacles qu’ils rencontrent. Nous en avons extrait des témoignages qui servent d’introduction aux quatre grandes thématiques de notre webdoc : l’école, l’emploi, les modes de vie et les loisirs. De l’orientation scolaire à l’échelle des salaires, en passant par les conditions de travail, les vacances, les filles et le foot ou encore l’homophobie, nous y abordons un ensemble de sujets qui sont ensuite approfondis grâce à des infographies, des vidéos d’experts et des textes explicatifs.
à rajouter aussi à la recension des travaux sur la corrélation entre #inégalités et #problèmes_sociaux ici :
►https://seenthis.net/messages/765806
Migrantes de otro mundo
La idea de este trabajo colaborativo nació en un taller que dio la directora de CLIP en 2019 con la Fundación Gabo. Allí descubrimos con Alberto Pradilla –hoy en Animal Político y autor de dos reportajes – el primer hilo de esta historia. Semanas después, con el equipo CLIP, pensamos que, por su misma naturaleza andariega, la migración es la historia que sólo se puede contar bien en forma colaborativa, desde las visiones y las sabidurías de múltiples colegas y sus medios. Por eso, nos pusimos a la tarea de crear esta alianza que ha resultado ser más fructífera y potente de lo que imaginamos. Empezamos en una reunión presencial (cuando eso aún se podía) realizada junto con la organización europea Occrp, cuyo editor para América Latina, Nathan Jaccard es también artífice de esta investigación, y desde septiembre nos pusimos manos a la obra. Después de nueve meses, aquí estamos: doce medios americanos, dos europeos; los otros aliados periodísticos, que fuimos buscando a medida que la historia los pedía en Camerún, India, Nepal, y de la mano de un equipo de producción, diseño, desarrollo digital y de audiencias comprometido y excepcional, con esta investigación colaborativa transfronteriza. Nos acompañó en este sueño desde el vamos, la Fundación Avina, y por el camino se sumó la Seattle International Foundation, las dos con gran generosidad. Los mecenas institucionales de CLIP han sido, todo este tiempo, soporte fundamental. Ahora esperamos que, con la ayuda de ustedes los navegantes, esta historia, hasta ahora sumergida en la indolencia y la clandestinidad, salga a la luz y nos inspiren estos valientes migrantes para imaginar un mundo más humano. Aquí verán los créditos de los creadores y mecenas de Migrantes de Otro Mundo.
▻https://migrantes-otro-mundo.elclip.org/index.html
–-> Travail d’investigation de journalistes (18 medias impliqués) sur les routes et les témoignanes des personnes migrantes du continent african et asiatique en Amérique latine.
#routes_migratoires #parcours_migratoires #Afrique #Amérique_latine #africains #migrations #asile #réfugiés #cartographie #visualisation #webdoc #décès #morts #mourir_aux_frontières #Asie
–—
Ajouté à cette métaliste sur les routes migratoires d’Afrique/Asie aux #Amériques :
►https://seenthis.net/messages/857814
ping @karine4 @isskein @mobileborders @reka
hCaptcha - Stop more bots. Start getting paid.
▻https://www.hcaptcha.com
Une alternative intéressante à reCaptcha. Do you use a captcha to keep out bots? hCaptcha protects user privacy, rewards websites, and helps companies get their data labeled. Help build a better web. — Permalien