interact.js - JavaScript drag and drop, resizing and gestures with inertia and snapping
▻http://interactjs.io
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers
’Negative latency’ - best way I ever heard to describe user interfaces that anticipate user input by predicting it from extrapolation. Item #7 in ▻http://rauchg.com/2014/7-principles-of-rich-web-applications
En ajoutant ça à la technique du mega_dropdown d’Amazon on devrait avoir le menu le plus rapide de l’univers...
►http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
#Amazon #Javascript #UX
Le premier, ça me parait super dur de ne pas provoquer des actions inattendues. Surtout sur des gros sites avec pas mal de liens et de boutons.
Pour le deuxième par contre ça a l’air bien fichu et pratique :
▻https://github.com/kamens/jQuery-menu-aim
Training the #cms · An A List Apart Article
▻http://alistapart.com/article/training-the-cms
Launching a site powered by lovingly crafted content models is a joy. But what happens in the weeks that follow, as authors start entering new content into the CMS? If you want to keep your well-structured content intact and on strategy, a training PDF won’t cut it. Let Eileen Webb show you what will: getting editorial guidelines where your authors need them most-in the CMS itself. Tags: #webdesign cms
Une des questions importantes notamment :
How hard is it to update the help text? As needs change over time, will adjusting the instructions be a hassle?
Can you change custom field labels used in the admin interface without affecting the machine name used in queries and front-end display?
C’est-à-dire pour un CMS donné : peut-on facilement changer le label humain des champs et ajouter ou changer l’explication de chacun des champs ?
Ceci afin d’adapter rapidement l’interface de rédaction au contexte précis du site sur lequel on est.
J’utilise à présent ceci ▻http://contrib.spip.net/Manuel-de-redaction-du-site car j’ai compris que le manuel livré en PDF avec la livraison du site ne sert à rien pour la suite de la vie du site mais c’est décontextualisé. C’est à l’endroit où il y a une manipulation à faire qu’il faut l’info.
Pour la documentation utilisateur j’utilise dans SPIP une possibilité qui est déjà là : les annonces générales.
On peut en faire plusieurs, par exemple pour expliquer comment insérer des documents, traiter les images, pour des formulaires spécifiques, pour les mises à jour successives… Ces annonces ont l’avantage d’être envoyées par mail, puis sont accessibles en page d’accueil de l’espace privé et modifiables par les différents acteurs du site au fur et à mesure.
#SPIP #CMS_utilisateur
Je ne sais pas si c’est pertinent ou pas (c’est un questionnement), mais il faut peut-être distinguer :
1) l’aide globale au site (rarement utile)
2) les aides globales à une page ou à une zone
3) le fait de pouvoir personnaliser les labels et explications de chaque champ de chaque formulaire du site
Ce ne sont pas forcément les mêmes besoins, ni la même technique par derrière.
À mon avis (et suivant l’article Alistapart), le mieux est d’arriver à permettre le 3.
Le 1 est un pis-aller, qui peut se faire actuellement avec le plugin Manuel ou les annonces générales.
Un entre-deux, plus facilement techniquement faisable à court terme, serait de permettre le 2. Par exemple en utilisant le Compagnon comme API, dans un plugin dédié qui proposerait de rédiger des aides en de multiples endroits (vue et édition d’un type d’objet, voire personnalisation dans une branche ou un objet précis).
Pour le 3 je me rend compte que la fonctionnalité est disponible avec les champs extra et je l’utilise souvent (d’autant plus que ces champs correspondent souvent à des besoins spécifiques au site).
Il y a une API du Compagnon ou c’est une hypothèse ?
Oui et non pour Champs Extras : disons que c’est logique puisqu’on les ajoute nous-mêmes, donc forcément on peut choisir leur label et explication. :)
Le point 3 concerne surtout le fait de pouvoir modifier ceux par défaut (de SPIP et de plugins).
Pour le compagnon, oui oui, il y a une API, pipelines, etc, pour pouvoir en ajouter.
Méthode Daisy, pour du CSS modulaire
▻http://daisy.tetue.net
Plus personne aujourd’hui n’est seul·e à produire son CSS : outil de publication, plugins, intervenants différents… Les styles en vigueur sur un projet ont plusieurs origines. Pragmatique, la méthode Daisy leur donne successivement la main :
1. posons d’abord la base CSS,
2. puis laissons passer les plugins additionnels,
3. et reprennons la main, en dernier, pour définir nos styles spécifiques.
Quand on travaille en pré-processeur, il semblerait que 1 et 2 soit entièrement inversé. En effet, en pré-proc on génère un thème en utilisant des frameworks et des modules. Ce qui est dans 3, utilise ce qui est dans 1 en l’incluant directement afin de pouvoir l’utiliser (par exemple avec @extend). « theme.scss » inclut les trucs de 1.
Or ce qui est dans 2 est ajouté automatiquement par le CMS ou autre outil, de manière externe à la construction du thème. Le 2 est hors pré-proc et a sa propre vie, développé par d’autres et inséré automatiquement.
Ce qui fait qu’on a alors plutôt 2 / 1 / 3, avec 3 incluant 1 en son début.
<head>
- feuilles insérés par le CMS
- theme.css généré par agrégation, incluant 1 en son début
</head>
Je précise que je parle de ça car la documentation évoque le cas du « pré-processing » :
Daisy s’utilise de façon progressive, sur mesure : en feuille unique, en trois feuilles, ou en framework CSS multi-feuilles (avec ou sans concaténation, preprocessing , etc.)
Et donc je commente uniquement ce cas-là. Et même plus précisément en fait : je commente uniquement le cas où on utilise pré-processeur ET un CMS qui ajoute des choses.
Le thème (en 3) n’a pas à inclure la base (= 1), jamais, celle-ci devant passer avant (en 2) les outils (dont CMS) et divers plugins.
La méthode Daisy décrit ce qui se joue dans le navigateur (du CSS donc), quelque soit la façon de le produire (avec ou sans preprocessing).
En cas d’utilisation avec preprocessing, la personnalisation ne se fait plus seulement en 3 (par surcharge CSS), effectivement, mais aussi sur la base, par paramétrage, des variables. En revanche, il n’y a aucune bonne raison d’intervertir l’ordre d’appel dans le navigateur.
J’ai pourtant tenté de l’expliquer : en pré-processing, le thème (les choix personnels pour tel ou tel élément) peuvent appeler un ou plusieurs styles définis dans les feuilles du 1. C’est même une bonne pratique pour ne pas redéfinir des styles similaires en plusieurs endroits.
Par exemple si on choisit graphiquement d’afficher tel lien précis « comme un bouton », alors on va dire .bloc_truc a{ @extend .button; }
. Ce choix personnel peut changer plus tard si on pense que graphiquement ou ergonomiquement ça ne va pas, c’est donc bien dans « theme.css » (3), en revanche la définition générique d’un bouton, c’est bien dans 1. Or pour pouvoir utiliser ce code, tout ce qui est dans 1 doit être importé (@import
) au début de 3. Sinon c’est inutilisable et le pré-processing ne sert à rien.
Loading webfonts with high performance on responsive websites
▻http://bdadam.com/blog/loading-webfonts-with-high-performance.html
Only serve #fonts in woff format Other browsers get the old “websafe” fonts Download the font in “binary” format and optimize it Serve the fonts yourself Serve them as #css files - base64 encoded data URIs If the user doesn’t have the font, load it asynchronously and store in localStorage Otherwise load it from localStorage without accessing the server Have fun because your site renders much faster and your users have a much better usability experience
Bon j’ai envoyé un mail à l’auteur car impossible de commenter sur son Disqus sans avoir un compte autre part, et il m’a répondu, à propos de test de connectivité, donc je vous en fait profiter :
I think connectivity tests just aren’t reliable now. You can maybe make some predictions, but there are many factors, which make it almost impossible to guess appropriate enough. On a mobile device it also changes almost every time e.g. when you are travelling.
The cool thing about my method is that the browser loads those fonts asynchronously and it doesn’t really matter whether the font files can be downloaded or not, because the content is always going to be visible. In the worst case it will be displayed with fallback fonts.
What could be more interesting is to optimize the font stack. Each device has some default fonts which are always installed: like Roboto on Android, Tahoma on Windows etc.
Et effectivement, un truc intéressant, dans la pile de polices, après avoir mis celle qui doit être téléchargée, mais avant celles qui sont génériques ("verdana", « sans », etc), c’est d’arriver à trouver des polices qui sont dans chacun des systèmes un peu connu du marché (Windows 7 et 8, Android, OSX, Ubuntu, etc).
De cette manière, même sans avoir encore chargé la police voulue, le site sera tout de même plus joli qu’avec du verdana !
C’est, entre autre, aussi une idée pour la dist de #SPIP même quand on ne charge aucune police !
La suite, toujours du même auteur :
In my previous article about webfont loading I showed a technique about how to load webfonts without blocking page rendering and without annoying the users with flickering text on all pageloads. This time I show you an optimized version of the script and provide a solution for WOFF2 support for the newest browsers.
Expectations
– The users must see the text as soon as possible.
– As longs as the font is loading, the text must be rendered with the fallback font so that users can see and read it.
– Users shouldn’t be annoyed with flickering text on each page load.
– Modern browsers with WOFF2 support should receive the fonts in WOFF2 format. This means ca. 30% less filesize.
▻http://bdadam.com/blog/better-webfont-loading-with-localstorage-and-woff2.html
Ça serait pas mal d’arriver à automatiser ça dans SPIP. #idée_pour_SPIP
Size Matters: Balancing Line Length And Font Size In #Responsive #Web_Design | Smashing Magazine
▻http://www.smashingmagazine.com/2014/09/29/balancing-line-length-font-size-responsive-web-design
As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.
The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.
#javascript library that manages breakpoints on elements
▻https://github.com/reusables/breakpoints.js
“Javascript library that manages breakpoints on elements, toggling classes or executing logic on each element when the element matches the breakpoint.” Tags: #RWD #element_queries javascript
Ça marche en em
? :D
#responsive #développement #web
@rastapopoulos je n’ai pas encore testé… ;-)
Map Glyphs | The Ultimate CSS Map Font
▻http://mapglyphs.com
Map Glyphs has hundreds of scalable vector map icons of the world, continents, globes, countries and states.
#carto #typographie @reka @fil @b_b
Je me suis demandé (pour deux des concernés) si vous préfériez que j’adresse à vous ou à @visionscarto, ce genre de trucs ?
CSS Shapes Editor for Chrome
▻http://razvancaliman.com/writing/css-shapes-editor-chrome
CSS Shapes allow web designers to wrap content around custom paths, but authoring them is not trivial.
None of the traditional tools used in web design currently export code for CSS Shapes and the syntax conversion workflow is unwieldy and time-consuming. It wouldn’t help too much even if they did. CSS Shapes are meant to be used in the browser context where it’s easy to see how they interact with other elements on the page in various configurations. The shape authoring process should capitalize on this affordance, something external editing tools are not well equipped to do.
To solve this problem, I released the CSS Shapes Editor for Chrome. It is a Developer Tools extension which provides an interactive editor for shape property values.
Pour mémoire, on a un truc sous SPIP qui fonctionne de manière totalement automatique (ça détecte les limites de l’image) et sur n’importe quel navigateur depuis… 2006 :-))
▻http://paris-beyrouth.org/tutoriaux-spip/article/un-habillage-irregulier-float
(Après, c’est le genre de chose dont l’utilité pratique est assez problématique sur le Web. C’est très séduisant parce que ça reproduit un comportement typique du papier, et comme avec les tablettes on a l’impression de s’approcher du format magazine… ; mais en pratique, je n’ai jamais vu grand chose de très satisfaisant sur le Web. Et avec le responsive, je crains qu’on ne complique encore un peu la question.)
Ce qui est intéressant, dans ce cas précis, ce n’est pas tant l’usage au jour le jour pour un site web courant, que ce que cela suggère au nivaux des possibilités “techniques” dans l’utilisation des ccs et du html.
Au “Monde”, par exemple, nous sommes en train de configurer un CMS print propriétaire qui utilise largement XML et CSS pour la gestion de la mise en page (ce qui est en partie le cas avec InDesign).
Le Shape Editor de Chrome suggère juste l’idée qu’il pourrait être possible un jour de faire de la mise en page avancée et à façon dans une interface Web... tu me vois venir ;-)
Oh, genre XPress dans une interface Web ? Tu as Pages sur iCloud qui est assez spectaculaire (pas de détourage automatique des images, en revanche, même s’il y a des possibilité d’habillage). Évidemment, c’est très grand public comparé à Indesign.
jonom/jquery-focuspoint
▻https://github.com/jonom/jquery-focuspoint
Intelligent cropping for flexible image containers
#développement #web #javascript #focus #idée_pour_SPIP (avoir un plugin pour définir le point de focus d’une image, ensuite d’autres plugins, filtres, etc, peuvent l’utiliser)
Medium’s CSS is actually pretty f***ing good. — #Medium
▻https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06
I’ve been meaning to write something about the #CSS at Medium for a while because I’m not completely ashamed of it…
So how did that happen? What did we do differently? OMG, how can you do the same thing? Or learn from us, or something?
What follows are some notes on our CSS, the steps we’ve taken to get it to where it is, and the world we live in today.
Pure CSS Off-screen Navigation Menu
▻http://www.sitepoint.com/pure-css-off-screen-navigation-menu
In-browser kitten platform action game introduces kids to hacking #HTML by having them modify levels while playing: ▻http://eraseallkittens.com
#CSS #Web #development #cats #education #kids
#HTML #apprentissage #serious-game (mouais… :D)
La démo ne marche pas vraiment chez moi, je peux ouvrir l’édition mais je ne peux jamais sauver, annuler, etc, bref revenir au jeu ensuite.
Une application (libre !) en ligne pour construire sa police d’icônes, super simple.
Fontello - icon fonts generator
►http://fontello.com
▻https://github.com/fontello/fontello
Une application en ligne similaire à IcoMoon
▻http://seenthis.net/messages/234952
mais dont le code est libre sur github. Qui peut s’utiliser aussi en API à distance, soit avec le serveur par défaut, soit si on a installé sa propre instance.
Le principe est le même que pour IcoMoon :
– on sélectionne des jeux d’icônes (fournis par défaut + on peut en ajouter)
– à l’intérieur on sélectionne quelles icônes on veut vraiment
– on personnalise le nom de chaque icône
– on personnalise le code Unicode attaché à chaque icône
– on génère la police
#icône #icon #picto #webapp #font #développement #web #intégration #accessibilité #responsive #CSS
Navigating #The_Guardian
▻http://www.theguardian.com/help/insideguardian/2014/jul/11/-sp-navigating-the-guardian
“A common challenge for mobile #navigation design is trying to expose the breadth of content whilst preserving a clean design. This is not an easy challenge” Tags: #RWD navigation #UX The Guardian
Mieux qu’une barre d’édition : des raccourcis
▻http://romy.tetue.net/barre-outils-edition-raccourcis
Les barres d’outils d’édition ne sont pas accessibles. Pire, elles constituent des obstacles pour certain·e·s. Si elles sont utiles à d’autres, elles ne sont pas la meilleure aide qui soit. Elles ne constituent donc pas une aide suffisante, mais secondaire ; l’aide principale doit être autre. Enfin, dans le cas où une barre d’édition est disponible, celle-ci doit être absente par défaut et affichable à la demande. Et chaque fonctionnalité devrait faire l’objet d’un raccourci documenté.
Même s’ils causent certaines difficultés, les raccourcis clavier standards sont davantage utilisables. Mieux encore, les raccourcis de saisie ou syntaxe de rédaction à balisage léger, de type wiki, sont ce qu’il y a de plus utilisable par tous et toutes. Trop peu mis en avant, ces raccourcis sont méconnus. Ils nécessitent d’être expliqués par l’interface, en contexte. Il suffit d’une phrase explicative, avant chaque champ de saisie.
#toolbar #WYSIWYG #raccourcis #syntaxes_légères
#handicap #accessibilité #a11y #ergonomie #UX #clicodrome
Et avec une capture de @seenthis en tant que bon exemple !
entièrement d’accord pour les virer ; la méthode seenthis est bien mieux :)
sinon je crois qu’@arno aime aussi la barre contextuelle de medium, qui ne s’affiche que lorsqu’on sélectionne une partie de texte, et flottant au-dessus, du moins laisse-t-il ici transparaître un appétit :
▻http://seenthis.net/messages/271377
Une librairie PHP pour CardDAV et CalDAV
sabre/dav
►http://sabre.io
L’intérêt c’est que c’est une librairie, donc pas un logiciel complet, mais à utiliser pour être intégrée dans un autre logiciel. La librairie gère l’interaction HTTP, c’est-à-dire les requêtes, en allant chercher les bons contenus et en les renvoyant de la bonne manière.
Mais du coup chacun peut écrire ses propres « backends » pour dire où et comment aller chercher les contenus (événements, tâches, vcards).
On peut donc imaginer rendre DAV compatible n’importe quel site ayant des événements ou des contacts.
Au passage, même sans tout intégrer, ils ont aussi en interne des librairies indépendantes très complètes. Par exemple pour gérer les icals et vcards :
▻http://sabre.io/vobject
#idée_pour_SPIP, évidemment…
#SPIP #développement #web #PHP #CalDAV #CardDAV #WebDAV #événement #contact #agenda
Drop Downs Should be the #UI of Last Resort (avec images, tweets) · lukew · Storify
▻https://storify.com/lukew/drop-downs-are-the-ui-of-last-resort
Un des articles qui détaille la chose en longueur, avec exemple de solution pour eux :
▻https://medium.com/@mibosc/responsive-design-why-and-how-we-ditched-the-good-old-select-element-bc190d6
Intéressant, mais à voir si ça peut s’imaginer accessible (y compris sans JS…).
Etude Web Energy Archive : la consommation énergétique des sites web, côté utilisateur | ADEME Presse
▻http://www.presse.ademe.fr/2014/07/etude-web-energy-archive-la-consommation-energetique-des-sites-web-cote
Pendant un an, le projet Web Energy Archive , soutenu par l’ADEME, a mesuré les consommations énergétique de 600 sites web par le biais de leurs utilisateurs.
Les 100 sites français les plus visités engendrent une consommation annuelle totale de 8,3 GWh, soit l’équivalent de la consommation d’énergie de 3 077 foyers. L’impact de ces mêmes sites côté serveur est de 0,58 GWh, soit plus de 10 fois moins !
Selon le niveau d’éco-conception du site web (optimisation du poids du site et de ses images éventuelles,…), la consommation varie de 10 à 300 Wh pour 1000 pages vues.
Il serait intéressant d’évaluer la consommation électrique induite et non sollicitée liée à cette avalanche de pubs (de plus en plus grosses et intrusives) qu’on doit subir sur la plupart des sites d’information...
De même, l’ensemble de ces éléments sont bien inclus dans la consommation électrique de l’utilisateur final, et donc payée par lui alors qu’il n’a rien demandé.
cc @aude_v pour les chiffres :)
Octicons
▻http://octicons.github.com
Two years ago we started using Octicons—our icon font—on GitHub. We use them in many of our sites and include them in Atom. Now we are making them available for download to everyone else. Go forth, and octiconify the world. Et il y a même du SPIP :p ▻http://octicons.github.com/icon/squirrel
Scoop: A Glimpse Into the NYTimes #CMS - NYTimes.com
►http://open.blogs.nytimes.com/2014/06/17/scoop-a-glimpse-into-the-nytimes-cms
take a closer look at Scoop’s past, present and future — what it does well, what can be improved and how it will help The Times remain the finest journalistic organization in the world.
Quelques trucs repérés :) :
– un « rétro-planning » de publication,
– une visibilité à la Microsoft Word des corrections apportées à un article,
– la possibilité d’enregistrer plusieurs brouillons / versions d’un même article,
– collaboration en temps réel, mais sur les différents éléments de l’article (titraille, corps de l’article),
– travail de l’image (redimensionnement, rogne) dans l’interface de publication (ça c’est top vu les nouvelles pratiques en matière de logos, dorénavant souvent de la même taille et orientation sur un site, cf. paris-luttes.info )
– prévisualisation pour la version mobile,
– proposition automatique de contenu similaire pour enrichir l’article.
Accessible Mega #menu
▻http://adobe-accessibility.github.io/Accessible-Mega-Menu
“The #navigation menu at the top of this page demonstrates how one can implement an accessible #mega_menu as a jQuery plugin. It is modeled after the mega menu on adobe.com but has been simplified for use by others.” Tags: accessibilité menu navigation mega menu
A Complete Guide to #flexbox
►http://css-tricks.com/snippets/css/a-guide-to-flexbox
Tags : flexbox #documentation #CSS #mise_en_page #layout #RWD #référence
Real-Life Responsive Web Design
▻https://speakerdeck.com/smashingmag/real-life-responsive-web-design
Tags : #RWD #webperf #méthodologie #todo:formation:rwd #slides