Budoryu - Politique vie privée
▻http://www.budoryu.be/rgpd
Rarement vu une assoc qui a une page intelligente et intelligible en lien avec le RGPD. Quelques PME font des efforts aussi me semble-t-il. Les grosses boites, en général le but est qu’on ne comprenne rien, c’est simple.
Todo : chercher des infos/études/réflexions sur ce sujet...
]]>CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
►https://tobiasahlin.com/blog/masonry-with-css
Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...
Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns
]]>Where to put #buttons on #forms
▻https://adamsilver.io/articles/where-to-put-buttons-in-forms
Align the primary button to the left edge of the inputs
illuminate a clear path to completion. Aligning inputs and actions with a strong vertical axis clearly communicates how to go about completing a form."
This layout also helps screen magnifier users to see it without having to pan across.
Les boutons des formulaires de #SPIP seraient mal placés ?
]]>Priority Guides : A Content-First Alternative to Wireframes – A List Apart
►https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes
Une manière de commencer l’ergonomie uniquement sur une liste de contenus ordonnés, hiérarchisés. On se focalise sur la hiérarchie du contenu, sans préjuger du placement (je ne parle même pas des styles mais bien même pas du placement, layout, maquettes filaires). En plus c’est directement mobile-first, puisque juste en une longue colonne.
Du coup, en allant même plus loin que ce que montre l’article, cela peut se faire uniquement en texte amélioré (markdown par ex), et donc dans un pad commun à plusieurs. Cela permet de valider avec les propriétaires du site/clients le « qu’est-ce qu’on décide de mettre dans chaque page », sans du tout passer des heures à discuter de l’affichage.
]]>Can I email… Support tables for #HTML and #CSS in #emails
▻https://www.caniemail.com
A site that offers support info on more than 50 HTML and CSS features tested across 25 email clients.
Tiens, une configuration en #CSS pour fabriquer directement du scroll doux (« smooth scroll ») :
scroll-behavior: smooth;Inconvénient, Safari ne le prend pas en compte (mais ça se dégrade très bien, puisque le scroll sera effectif, simplement il ne sera pas « progressif »).
Avantage, on peut le désactiver facilement avec une media query pour les gens qui ont le mal de mer :
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Using SVG | CSS-Tricks
►https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
]]>Welcome to the wonderful world of Web Performance
►https://www.sitespeed.io
Suite d’outils libres pour monitorer la performance des sites, tout installable en docker ou npm.
]]>Connexion dès l’inscription
Ce minuscule plugin permet de connecter directement les personnes qui s’inscrivent immédiatement lorsqu’elles ont fini de remplir le formulaire.
Profils
Ce plugin permet de configurer un ou plusieurs profils utilisateurs en déclarant quelles informations ils peuvent contenir (quels champs, une fiche de personne ou d’organisation, des coordonnées, etc).
Icongram
►https://icongr.am
Une sorte de méga #cheatsheet pour plein de packs/fonts d’icones.
Vers un système modulaire de publication : éditer avec le numérique – Antoine Fauchié
Le domaine du livre, et plus particulièrement l’édition, connaît des mutations profondes au contact du numérique. Après des phases successives d’informatisation, l’une des manifestations les plus visibles de ces bouleversements est probablement l’ebook. Si le livre numérique est une approche inédite de l’écrit tant dans sa diffusion que dans sa réception, il y a en filigrane des transformations plus essentielles dans la manière de faire des livres. Des structures d’édition imaginent des nouvelles chaînes de publication originales et non conventionnelles pour générer des versions imprimée et numériques d’ouvrages et de documents, remplaçant les traditionnels traitements de texte et logiciels de publication par des méthodes et des technologies issues du développement web. Ainsi un système modulaire de publication peut se substituer à des chaînes linéaires, repositionnant l’humain au cœur des machines ou des programmes. À travers des commentaires de textes et des analyses de cas nous étudions les évolutions du livre avec un regard plus global sur notre rapport à la technique, et nous exposons les principes fondateurs d’un nouveau modèle.
Mémoire d’Antoine Fauchié dans le cadre du Master Sciences de l’information et des bibliothèques, spécialité Publication numérique, de l’Enssib, sous la direction d’Anthony Masure, maître de conférences en design à l’université Toulouse – Jean-Jaurès et de Marcello Vitali-Rosati, professeur au département des littératures de langue française de l’Université de Montréal et titulaire de la Chaire de recherche du Canada sur les écritures numériques.
#publications_hybrides #prepostprint #web2print #digital-first_publishing #système_modulaire_de_publication
]]>Inclusive Components
▻https://inclusive-components.design
A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
Cards
04/06/18Data Tables
31/03/18Notifications
27/02/18A Content Slider
22/11/17Collapsible Sections
26/10/17Tabbed Interfaces
05/10/17A Theme Switcher
08/09/17Tooltips & Toggletips
25/07/17Menus & Menu Buttons
10/05/17A Todo List
07/04/17Toggle Buttons
31/03/17
#intégration #web #accessibilité #composants #bonne_pratique #bonnes_pratiques #pattern #UX #ergonomie
]]>GitHub - VPenkov/okayNav: The world’s okayest #responsive navigation
▻https://github.com/VPenkov/okayNav
This navigation aims at progressively collapsing navigation links into an off-screen navigation instead of doing it for all the links at the same time.
Lancement aujourd’hui de la nouvelle refonte du site #SPIP de pensez sauvage #shameless_autopromo donc
Depuis quelques années, l’association pensezsauvage fait pousser des plantes potagères, des fleurs curieuses et rares pour récolter les graines à redistribuer et à revendre sur les marchés ou sur internet.
Jusque là, le site disposait du theme_greeny de @marcimat (merci :*) avec un squelette légèrement modifié. Mais l’asso souhaitait quelque chose de plus clair et de responsive, avec une navigation compréhensible à tout·es. C’est finalement Mikou de pensez sauvage lui même qui a dessiné la maquette style Kraft. Pas évident du tout, mais j’estime que c’est bien la technique qui doit se plier aux idées créatives et non l’inverse. J’ai refait l’architecture du site et réalisé les fonctionnalités et l’intégration SPIP html/css/js sur une base zcore. J’ai créé une boutique minimaliste avec trois plugins SPIP : prix, panier et paypal, il n’y a ni compte client ni stockage de coordonnées, bref, rien d’autre qu’un document de l’article avec un champ ’prix’ à remplir.
L’idée est celle d’un onepage où l’internaute navigue par ancres, un petit JS perso permet de tester si l’ancre existe, sinon de renvoyer vers l’URL demandée pour éviter les impasses de navigation et permettre au site d’évoluer à son rythme. Bon, j’avoue que j’étais pas réjouit de mettre tout le catalogue sur l’accueil, mais j’ai trouvé des astuces pour alléger.
Il m’aurait été parfaitement impossible de faire cela sans #CSS3 il n’y a que serait-ce 5 ans et je me suis pas mal amusée à vrai dire.
Le plugin panier a été modifié pour faire apparaitre les sachets de graines au fur et à mesure de leur mise au panier, avec un peu d’ajax perso on reste sur la même page le plus souvent possible. Le plugin lazysizes permet de ne faire apparaitre les images au format définitif que lorsque la vue visiteur est en face.
Comme l’asso et les visiteurs préfèrent de loin les chèques, qui évitent de laisser des données sur internet, le panier une fois remplit peut être imprimé avec un montant qui déduit les frais de paypal.
Pour cela j’ai créé une page reprise par le plugin Dompdf qui créé le pdf du panier de session du visiteur à la volée.
La recherche est en autocompletion sur l’ensemble du catalogue des graines, la page glisse ensuite vers le sachet choisi.
Merci à @jacotte qui a bien voulu revoir de ses yeux de lynx les défauts restants à corriger. Par exemple la font choisie par Mikou ne disposait pas d’apostrophes et de virgules correctes. Je suis donc passée par FontForge pour corriger cela avant l’intégration en base64 dans la CSS.
Merci aussi à @james qui m’a poussé à écrire ce billet !
Paged.js – Paged Media
▻https://www.pagedmedia.org/paged-js
aged.js is an open-source library to paginate content in the browser. Based on the W3C specifications, it’s a sort of polyfill for Paged Media and Generated Content for Paged Media CSS modules. The development was launch as an open-source community driven initiative of it’s still experimental. The core team behind paged.js includes Adam Hyde, Julie Blanc, Fred Chasen & Julien Taquet.
The best Icon Tool - Orion Icon Library
►https://orioniconlibrary.com
#Intégration / #développement : Plugin vs #boilerplate
Vous êtes plutôt l’un ou plutôt l’autre vous ?
Il y a 1 an, j’attaquais mon squelette perso, celui qui me sert aujourd’hui de base pour la structure html et quelques styles css de bases et qui repose sur ZPIP V2. Ce squelette est (plus que) largement inspiré de Intégraal de @rastapopoulos et SPIPr de Cédric et @ben.
Je commence à avoir quelque chose d’assez adapté à mes besoins. Outre une structure html5, ça permet de gagner beaucoup de temps : une grille à mettre en place ? <INCLURE{fond=inclure/liste/grille,...> + les bons paramètres et le tour est joué.
La question qui se pose maintenant, c’est le fonctionnement : boilerplate ou plugin.
Le plugin , c’est un squelette qu’on surcharge avec un squelette/plugin propre à chaque nouveau projet. Le boilerplate , c’est un squelette qu’on modifie directement pour chaque nouveau projet.
L’avantage du 1er, c’est qu’on partage les évolutions entre tous les sites qui l’utilisent mais l’inconvénient, c’est qu’il faut conserver une compatibilité descendante sous peine, soit de casser le site, soit de ne plus pouvoir profiter des évolutions.
Le 2nd, ben c’est exactement l’inverse.
Au début, le fonctionnement plugin m’allait très bien : je développais mon plugin en même temps que les sites et chacun profitait donc des mise à jour de la structure et des styles de bases. Mais à force de bouger des choses, je me rends compte que ça devient galère de garder cette compatibilité descendante.
Donc voilà, si vous avez des retours d’expérience...
Liens :
SPIPr : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/spipr-dist/trunk
Integraal : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/integraal
integraal (principe) : ▻https://zone.spip.net/trac/spip-zone/changeset/83559/spip-zone
Repo de mon plugin : ▻https://gitlab.com/jmoupah/zcm
Doc de mon plugin : ►https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html
Building Your Color Palette
▻https://refactoringui.com/previews/building-your-color-palette
Ever used one of those fancy color palette generators? You know, the ones where you pick a starting color, tweak some options that probably include some musical jargon like “triad” or “major fourth”, and are then bestowed the five perfect color swatches you should use to build your website?
Home Page - WeasyPrint
►https://weasyprint.org
Un logiciel serveur pour générer les PDF à partir de pages HTML + CSS (nécessite python 3.8)
Dépot github : ▻https://github.com/Kozea/WeasyPrint
La revue de Linuxfr.org : ▻https://seenthis.net/messages/734549
(on va tester pour faire des retours d’usages...)
Syncope
▻http://nowodzinski.pl/syncope
Super efficace pour définir des réglages typos de base (taille, interlettrage, longueur de ligne), permet aussi de caler un rythme vertical régulier entre titre, inters et paragraphes. Moins complexe que d’autres outils mais c’est aussi bien.
Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.
Basically, it’s a set of tools which adjust the rhythm and output the styles in a preferred, production–friendly format. It is also a lot of fun to play with! In fact, if it weren’t for that, this tool wouldn’t have seen the light of day.
Free Flat Icons - FlatIcons
►https://flaticons.net
▻https://framapiaf.org/system/media_attachments/files/000/902/694/original/f9cac165fee1a64e.jpeg
#FlatIcons : une banque de plus de 2500 icônes gratuites et personnalisables (couleur, taille, bordure, fond).
Don’t Use My Grid System (or any others)
▻https://noti.st/mirisuzanne/DDJo3H
Rencontre SPIP dans la Drôme du 27 au 30 septembre 2018
▻https://linuxfr.org/news/rencontre-spip-dans-la-drome-du-27-au-30-septembre-2018
SPIP est un logiciel de publication pour internet francophone, réputé notamment pour sa gestion du multilinguisme et son système de squelettes, permettant, tel Monsieur Jourdain, de faire du MySql sans le savoir.
La communauté SPIP est autogérée, sans support d’une structure associative ou commerciale.
Elle organise du 27 au 30 septembre une rencontre (inter)nationale dans la Drôme, dans un gîte au cadre bucolique. Possibilité d’hébergement sur place.
Le programme sera défini collectivement par les participants et participantes à cette rencontre. Mais nous pouvons d’ores et déjà supposer qu’il n’y aura pas que de la programmation, puisque, par exemple, la cuisine sera faite collectivement.lien n°1 : InscriptionTélécharger ce contenu au format Epub Commentaires : voir le flux atom (...)
J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).
L’idée c’est que j’arrive à faire ça très bien avec une flex box :
Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.
Mes CSS pour l’instant :
ul.carres_oeuvres {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-right: 1px;
}
ul.carres_oeuvres li {
margin-top: 1px;
margin-left: 1px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 150px;
}Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.
Je voudrais obtenir ceci :
Et j’ai pas trouvé comment…
]]>
