Bref, Dans tes cordes est un blog emploi où je vais faire la même chose qu’ici mais dans le domaine de l’insertion professionnelle, de l’orientation et de la formation : rassembler mes réflexions, mes découvertes et mes opinions et garder des traces de mes lectures et de ma pratique professionnelle.

Sous le capot, Dans tes cordes fonctionne avec WordPress et le thème Author. Et oui, je n’utilise même pas mon super thème WordPress Basics qu’il est sobre et classe.

Pourquoi ? J’ai décidé de ne pas mettre les mains dans le cambouis : pas de HTML, pas de CSS, pas de PHP, pas de JavaScript, rien, nada ! Je veux juste appuyer sur des boutons comme les gens normaux. (j’ai fait une exception pour le copié-collé du script Google Analytics dans une extension. Oui, Matomo est plus propre et propose une extension WP, mais les prérequis techniques vont un peu au-delà des possibilités techniques de mon hébergement mutualisé. Je changerai plus tard).

Plus sérieusement, l’idée c’est aussi de faire du conseil numérique en plus de l’emploi et je me vois mal donner des cours de webdesign en plus de l’accompagnement vers l’emploi. Déjà, WordPress 6.2, c’est une grosse claque par rapport à ce que j’ai laissé en 2015 ^^

Dans tes cordes, c’est quoi, au juste ? Voici le copié-collé du pitch pour te faire une idée :

En prime, tu as droit à mon motto perso (après Matomo, ça m’a semblé rigolo) :

Expression régulière et Notepad++

Supprimez les balises html dans Notepad++ avec la fonction « Remplacer ». 
Collez l’expression régulière suivante dans le champs « Recherche » : 
<([A-Za-z0-9= \#\/\"\n\r\t-:;&\[\]_\.@]+)> 
Laissez le champs « Remplacer par » tel quel (pensez à cocher « Expression régulière » tout en bas, sans quoi vous resterez coi). Ne copiez pas d’espace avant ou après l’expression régulière !

Mastodon / Piaille.fr

Réaliser une capture d’écran et faites détecter le texte de l’image via l’ajout de texte alternatif à une image importée dans Mastodon (Twitter ne sait pas faire).

Google Image

Faites une capture d’écran et utilisez les fonctions de reconnaissance de texte de Google Image (en cochant l’icône de l’appareil photo, vous voyez ?).

Extension Fake News Debunker

Utilisez la fonction « Open with OCR » de l’extension Chrome/Edge « Fake News Debunker » en cliquant-droit sur l’image que vous ouvrirez dans votre navigateur.

C’est tout pour le moment.

‐ Le trait d’union

On l’appelle tiret court ou tiret quart de quadratin, c’est le fameux « tiret du 6 » !
Il sert à relier des mots pour en faire une entité (mille-feuille) ou pour les césures en fin de ligne. Peut servir à relier deux éléments qui conservent leur autonomie (Lyon-Marseille) ou exprimer un intervalle (2022-2023). Ce n’est pas un tiret au sens strict mais un signe orthographique.
Accessible via Alt + 45
https://unicode-table.com/fr/002D/

– Le tiret moyen

Ce tiret demi-cadratin ou tiret d’incise sert à faire des incises (proche, paraît-il, des parenthèses, mais je ne suis pas vraiment d’accord) ou introduire des listes (hé oui, pour ça on n’utilise pas le trait d’union, c’est moche).
Accessible via Alt + 0150 (Word).
https://unicode-table.com/fr/2013/

− Le signe moins typographique.

Ce symbole n’existe pas sur les claviers. Quand il est remplacé par le trait d’union, on parle du signe moins dactylographique. Il sert à faire le signe moins dans les ouvrages de bon aloi.
Accessible via Alt + 8722 (Word).
https://unicode-table.com/fr/2212/

— Le tiret long (ou cadratin).

Appelé également cadratin, il sert principalement à introduire les dialogues mais peut aussi servir pour les incises.
Accessible via Alt + 0151 (Word).
https://unicode-table.com/fr/2014/

Le Tiret conditionnel ou trait d’union conditionnel

Last but not least, le trait d’union conditionnel permet de spécifier l’endroit où il est possible de couper le mot si l’espace venait à manquer. Dans Word, il suffit de d’insérer le curseur à l’endroit souhaité et d’utiliser l’équivalent clavier Ctrl+6 ou d’aller le rechercher à la mano dans Insertion > Symboles > Autres symboles > Caractères spéciaux.
Accessible via Alt + 0173
https://unicode-table.com/fr/00AD/

_ Tiret bas

Attention ! le non moins fameux « tiret du 8 » (tiret bas, tiret de soulignement ou underscore) n’est pas un tiret : il servait à souligner les mots à l’époque des machines à écrire. Aujourd’hui, il remplace le symbole Espace (Alt + 32) dans moults situations où l’usage de l’espace est malvenue (URL, noms de fichiers, etc.).
Accessible via Alt + 95
https://unicode-table.com/fr/005F/

Il est temps de se tiret, non ?

Les utilisations conseillées plus haut ne sont pas forcément gravées dans le marbre et il est tout à fait possible d’utiliser un tiret moyen à la place du trait d’union pour exprimer un intervalle, par exemple. C’est d’ailleurs ce que je fait, je trouve ça plus joli. L’essentiel est dans la cohérence : utilisez donc le même tiret pour la même fonction dans votre document.

P.S.

A noter que la longueur des tirets semble varier selon le traitements de texte : dans mon bloc-notes, l’ordre des tirets tels que je les ai énumérés ici est respecté, mais la même chose dans Word affiche le signe moins juste après le tiret moyen. Vous verrez bien ce que ça donne chez vous. Vous pouvez copier-coller ce qui suit pour en avoir le cœur net :

‐
–
−
—

Dans le doute, le module est notre ami : bien conçu, il se fera discret là où il n’est pas indispensable et trouvera la meilleure place à côté — ou en dessous — des autres modules pour apporter la meilleure expérience à l’utilisateur.

Pour ce faire, l’auteur passe en revue les éléments pour lesquels les aspects Responsive sont les plus critiques : éléments de navigation, images & vidéos, publicité, et grille de mise en page infinie pour terminer.

Bref, je ne saurais que trop vous conseiller de lire les deux livres d’Ethan Marcotte chez Eyrolles : Responsive Design Patterns et Responsive Web Design (sur lequel j’avais écris quelques mots).

Glossaire

Section 508

La section 508 est une loi fédérale américaine destinée aux organisations qui reçoivent des fonds publics pour permettre aux personnes en situation de handicap d’accéder aux nouvelles technologies et à internet dans de bonnes conditions.

WCAG 2.0 (Web Content Accessibility Guidelines)

Les Règles pour l’accessibilité des contenus Web (WCAG) 2.0 font des préconisations pour rendre les contenus Web plus accessibles pour les personnes en situation de handicap.

ADA (Americans with Disabilities Act of 1990)

La loi en faveur d’un design accessible pour les américains en situation de handicap. Valable aussi pour le reste du monde.

OAC (Open Accessibility Checks)

Ce projet open source soutenu par l’Université de Toronto propose une série de tests universels pour les page HTML afin de déterminer leur conformité avec les standards de l’accessibilité.

ISO PDF/UA (ISO 14289-1:2014)

Cette norme ISO spécifie l’utilisation du format PDF (ISO 32000-1 depuis 2008 – PDF 1.7) pour l’accessibilité universelle des documents PDF et des formulaires.

Les outils

508 Checker

Avec 508 Checker vous pouvez rapidement vérifier la conformité de vos pages avec la section 508 et en savoir plus sur la diffusion des bonnes pratiques au sein de votre organisation. (Formstack).

A-Tester

A-Tester peut vous aider à atteindre WCAG 2.0 (niveau AA) pour les pages conçues dans une optique d’amélioration progressive. (Evaluera Ltd).

A11Y Compliance Platform

Outils pour effectuer des rapports et aider les organisations dans leur quête de l’accessibilité pour le web (Section 508, WCAG et ADA). (Bureau of Internet Accessibility).

Accessibility color wheel

Cet outil vous permettra de choisir des paires de couleurs (texte/fond) en simulant trois types de handicaps liés à la vue. (Giacomo Mazzocato).

Accessibility Developer Tools

Ajoute une extension pour l’accessibilité dans les outils pour développeurs de Google Chrome : 17 règles documentées à l’adresse http://goo.gl/L7gCXu et une barre latérale pour des informations sur les valeurs de contraste, suggestion de couleur, attributs ARIA manquants, etc. (Google Accessibility).

AccessIn

Outil de maintenance et de reporting sur l’accessibilité en temps réel via l’analyse du DOM. (Digital Accessibility Centre).

AccessLint Rubygem

AccessLint utilise la bibliothèque d’outils JavaScript de Google pour l’accessibilité afin de donner des recommandations à partir du DOM via PhantomJS. Fonctionne à partir d’URL ou de fichiers, en ligne de commande, ou en installant la gemme Ruby sur votre serveur. AccessLint.com est la version hébergée d’AccessLint décrit ci-dessus. Il suffit d’entrer l’adresse d’un site pour obtenir les résultats dans votre navigateur. (Cameron Cundiff).

AccessMonitor

Utilisé par l’administration publique du Portugal, AccessMonitor crée un échantillon de pages ) surveiller à partir d’un site (peut aussi surveiller les nouvelles pages). Un logo dynamique résume les résultats basés sur l’échantillon. (Fundação para a Ciência e a Tecnologia, IP).

AChecker

Basé sur OAC, AChecker est un outils interactif et personnalisable pour tester l’accessibilité des contenus web. Permet aux utilisateurs et aux auteurs de créer leurs propres tests. (Inclusive Design Research Centre).

Acrobat XI Pro

Adobe Acrobat XI Pro inclut des outils permettant d’identifier les problème d’accessibilité des documents PDF. (Adobe).

pdfGoHTML

Plugin Acrobat qui convertit des fichiers PDF tagués vers le format HTML en tenant compte du standard ISO PDF/UA. Un seul clic suffit pour convertir un fichier et l’ouvrir dans le navigateur par défaut. (Callas software GmbH).

Color Oracle

Simulateur de déficience visuelle pour Windows, Mac et Linux. (Bernhard Jenny).

Contrast checker

Vérifie la conformité des niveaux de contraste et de luminosité de la combinaison des couleurs de premier plan pour le texte et l’arrière-plan, selon les préconisations de WCAG 1 et WCAG 2. Propose également une simulation de la vision. (Jorge Rumoroso).

Contrast-Finder

Évalue le contraste en terme de ratio couleur de texte / couleur d’arrière-plan et propose des couleurs de remplacement, proches des couleurs initiales, si le ratio est faible. (Tanaguru).

FireEyes

Plugin Firefox intégré à Firebug permet de tester une ou plusieurs page au regard de la Section 508 et des WCAG 2.0 (analyse des contrastes, simulation de lecteur d’écran et compatible avec les pages dynamiquees (DHTML). (Deque Systems Inc.).

Functional Accessibility Evaluator

Évalue le respect de WCAG 2.0 niveau AA. Fourni un résumé et un rapport détaillé avec une URL pour partager le résultat des test avec d’autres personnes. (University of Illinois).

HeadingsMap

Ce plugin Firefox génère une carte de la page en surlignant les niveaux d’en-tête et les sections HTML5 et met en évidence les niveaux d’imbrications incorrects. (Jorge Rumoroso).

HTML Validator for Firefox by Marc Gueury

HTML Validator est une extension Mozilla qui ajoute la validation HTML dans Firefox et Mozilla. Le nombre d’erreurs d’une page HTML est visible sous la forme d’une icône dans la barre d’état lors de la navigation. Les détails des erreurs sont visibles lors de la recherche de la source de la page HTML.

HTML_CodeSniffer by Squiz

Vérifie votre document HTML et détecte les violations d’une norme de codage défini, soit les trois niveaux de WCAG 2.0 et la législation Section États-Unis 508.

MAUVE by Human Interfaces in Information Systems Laboratory – ISTI-CNR

MAUVE est un environnement pour évaluer l’accessibilité du Web. Des règles d’accessibilité peuvent être définies et mises à jour par le biais d’un langage de définition XML. Peut valider des pages dynamiques via l’ajout de plugins au niveau des navigateurs.

Online-Utility.org Document Readability Test Tool by Online-Utility.org

Calcule de lisibilité, Index Coleman Liau, Flesch Kincaid Grade, ARI (Indice de lisibilité), SMOG. La mesure de la lisibilité utilisée ici est l’indication du nombre d’années d’études qu’une personne doit avoir suivie pour être en mesure de comprendre facilement le texte en première lecture.

Opquast desktop by Opquast

Ce plugin Firefox permet d’effectuer plus de 450 tests sur la qualité, le SEO, l’accessibilité et les performances. Vous pouvez également ajouter un commentaire si vous avez trouvé des bugs et exporter vos résultats dans un fichier CSV ou dans vos projets via opquast.reporting.com.

Opquast Reporting by Opquast

Opquast Reporting est un outil pour mesurer la qualité et l’accessibilité d’un site web. Il inclut des fonctionnalités d’évaluation manuelle et automatique, et autorise l’export du rapport d’audit dans différents formats.

PAC: PDF Accessibility Checker 2.0 by Access for all

PAC fournit un moyen rapide pour tester l’accessibilité des fichiers PDF et accompagne à la fois les experts et les utilisateurs finaux dans leurs évaluations en vue d’améliorer l’accessibilité.
PAC 2, le nouveau Vérificateur d’accessibilité pour les PDF de l’organisation Suisse « Access for All » à but non lucratif, est le premier à mettre en œuvre le Protocole « Matterhorn ».

PEAT – Photosensitive Epilepsy Analysis Tool by Trace R & D Center, University of Wisconsin-Madison

PEAT (« Photosensitive Epilepsy Analysis Tool ») est une ressource téléchargeable gratuitement pour permettre aux développeurs d’identifier les risques de saisie dans les contenus Web et les logiciels. L’évaluation utilisée par PEAT est basée sur un moteur d’analyse développé spécifiquement pour les applications Web et les applications informatiques.

Siteimprove Accessibility by Siteimprove

Siteimprove surveille votre site en vue de la conformité avec WCAG 2.0 pour les contenus web et les documents PDF. Le service sur abonnement offre une interface intuitive, une formation, un soutien illimité, ainsi que des rapports personnalisés.

Sitemorse by Sitemorse Ltd

SiteMorse fournit des tests complets de conformité et de performance pour votre site web. Il peut examiner une page ou des dizaines de milliers dans un seul rapport. Ses nombreux contrôles comprennent : accessibilité, HTML, liens brisés, orthographe, règles de marque personnalisées, etc.

SortSite by Powermapper Software

SortSite est un outil d’analyse de site Web basé sur des standards qui aident à l’évaluation de l’accessibilité. Il prend en charge : la Section 508,  WCAG 2, la validation HTML et les liens brisés. Il est disponible sous forme d’application Web, d’abonnement, d’installation serveur auto-hébergé et d’application de bureau pour Windows et Macintosh.

Tanaguru by Tanaguru

Tanaguru est un outil d’évaluation de site open source sous licence LGPL . Il est dédié à l’accessibilité (a11y) les audits, et met l’accent sur la fiabilité avec un niveau élevé d’automatisation.

Tenon by Tenon

Tenon est un outil de test d’accessibilité qui offre une flexibilité sans précédent pour les concepteurs, les développeurs, les testeurs et les auteurs de contenu. Tenon atteint ces objectifs via son API qui peut être intégrée de façon transparente avec vos outils existants.

Tingtun Accessibility Checker by Tingtun

Tingtun vérifie les pages web basées sur WCAG 2.0. Fait un rapports en mentionnant : les obstacles rencontrés, leur localisation, les références WCAG et propose des pistes de résolution.

Tingtun PDF Checker by Tingtun

Vérifie les documents PDF basés sur WCAG 2.0. Téléchargez ou consultez les documents en ligne pour générer un rapport avec les obstacles détectés et les solutions proposés. « Tingtun checker PDF » est un outil en ligne open source.

Total Validator by Total Validator

Total Validator est un outil de validation « 5 en 1 » comprenant un validateur XHTML, un validateur d’accessibilité (WCAG et US 508), un validateur CSS, un correcteur orthographique, et un vérificateur de liens brisés. Il peut être exécuté à partir du bureau, en ligne de commande, ou via les « addons » Chrome et Firefox.

UCDmanager by jordisan

UCDmanager est une application web collaborative gratuite visant à gérer et documenter différentes conception et techniques orientées utilisateur, et cela d’une manière intégrée : rôles des utilisateurs, personas, évaluations heuristiques, tests utilisateurs, etc.
Comprend des évaluations d’accessibilité et heuristiques : http://ucdmanager.net/technique/web-accessibility-conformance-evaluation Windows 8 app : http://ucdmanager.net/app

Vamolà by Regione Emilia-Romagna

Ceci est une version prête installée de « aChecker validator » (vérificateur d’accessibilité en ligne), accompagnée de « Allegato A L. 4/04 » (par rapport aux lois italiennes aka Stanca ACT) et d’une traduction en langue italienne. Le projet est open-source et en ligne à l’adresse : https://github.com/RegioneER/vamola

Visolve by Ryobi System Solutions

Visolve est l’outil logiciel qui transforme les couleurs affichées sur l’écran vers les couleurs « discriminables »  pour les personnes ayant une déficience de la vision des couleurs, communément appelée cécité des couleurs.
La version web et la version iOS ont une fonction de simulation qui permet de simuler l’apparence d’une image pour les personnes atteintes de daltonisme. En utilisant cette fonctionnalité, les personnes ayant une vision normale des couleurs peuvent vérifier comment les daltoniens voient une scène ou une signalisation, etc.

WAVE by WebAIM

WAVE est une suite d’outils pour faciliter l’évaluation de l’accessibilité du Web en fournissant une représentation visuelle des questions d’accessibilité dans la page. Existe sous forme de service en ligne à http://wave.webaim.org/~~number=plural, d’extensions Firefox et Chrome et d’API.

WCAG Compliance Auditor by Funnelback

WCAG Compliance Auditor peut passer au crible des sites Web entiers, voire des groupes de sites Web, au regard des critères WCAG. Il identifie les défaillances et fournit des recommandations sur la façon de corriger les erreurs. Donne par ailleurs, un repère par rapport auquel l’accessibilité peut être mesurée au fil du temps pour aider les organisations à atteindre la conformité petit à petit.

→ Source : Web Accessibility Evaluation Tools List

Maintenant que nous avons mis en place des stratégies de design « responsive » pour occuper au mieux les tailles et les résolutions sans cesse différentes des écrans qui nous entourent, il est temps de concevoir les sites en tenant compte de la richesse des gestes possibles pour naviguer tactilement. Qui dit web, dit navigateur, et qui dit navigateur dit diversité. Chaque navigateur possède ses propres contrôles (que l’on prendra soin de ne pas court-circuiter), et chaque constructeur utilise déjà l’espace à sa manière, ce qu’il faut aussi prendre en considération.

C’est dans ce contexte que s’inscrit le livre Design tactile publié dernièrement aux éditions Eyrolles. Josh Clark passe en revue les stratégies de mise en page pour prendre en main les appareils tactiles : de la distribution des informations et des contrôles, à la taille idéale des boutons, en passant par l’ergonomie des formulaires et des carrousels (qui ont encore des marges de manœuvre dans la panoplie du webdesigner !).

L’auteur n’oublie pas de faire le point sur le vocabulaire gestuel de base comme : tap, double tap, swipe, pression, pression longue, pincement, étirement, etc. et donne quelques pistes pour une implémentation avec Javascript et CSS pour une compatibilité étendue.

A lire, donc, pour entrer à pleine main dans l’univers tactile.

En avant la musique, avec la taca taca tic du gendarme (désolé, mais depuis ma dernière note de lecture, le pli est pris) : 

https://youtu.be/lktJLgy4h-w?t=35s

Assez parlé, je vous laisse avec la vidéo :

→ Au fait, pour aller plus loin, voici l’article La roue chromatique est un mensonge qui approfondit cette notion de création de couleur par le cerveau, et plus particulièrement pourquoi on peut dire qu’il existe des couleurs « opposées » ou « antagonistes ».

Et un grand merci à @burninghat pour le partage sur Twitter.

Flux de production

Si vous envisagez un usage intensif de ces filtres, il est bon de garder à l’esprit qu’il est peut-être préférable de les utiliser dans un certain ordre. Pourquoi pas celui-ci :

1. Si votre flux est en Raw, utilisez d’abord Raw Presharpener disponible dans Sharpener Pro.
2. Dfine — Traitement du bruit en vue de sa réduction. Améliorez vos photos en adaptant la réduction du bruit à votre appareil.
3. HDR Efex Pro — Assemblage et fusion d’images à plage dynamique étendue. Utilisez la technologie HDR pour créer des photos surprenantes de naturel ou résolument artistiques.
4. Viveza — Correction des couleurs et de la tonalité avec la technologie des points de contrôle (U Point). Ajustez sélectivement les couleurs et la tonalité de vos photos sans recourir à des masques sophistiqués ou à des sélections complexes.
5. Color Efex Pro — Découvrez un ensemble complet de filtres pour la correction chromatique, les retouches et l’application d’effets créatifs avec de nombreux filtres couleurs paramétrables.
6. Silver Efex Pro — Conversion et traitement des images en noir et blanc. Maîtrisez l’art de la photographie en noir et blanc grâce à des fonctions inspirées de la chambre noire.
7. Sharpener Pro — Accentuation et netteté. Bénéficiez d’outils professionnels pour révéler les détails de vos photos et optimiser leur netteté.

Cerise sur le gâteau, avec le filtre Analog Efex Pro, découvrez les différents rendus obtenus avec des appareils, des films et des objectifs classiques. Ce filtre s’adresse plus particulièrement aux nostalgiques des effets argentiques et des boîtiers à l’ancienne pour permettre des fantaisies d’un temps que les smartphones n’ont pas connus !

Concernant l’ordre des opération pour Analog Efex Pro, ce dernier peut être utilisé à tout moment après Dfine.

Par ailleurs, ce filtre fonctionne de deux manières : en cliquant sur Appareil photo classique, on fait apparaître les outils ainsi que les combinaisons d’outils. Si les secondes permettent d’obtenir un résultat très rapidement (et même si chaque composante de l’effet est paramétrable dans le panneau de droite), le premier permet de créer effet après effet ses propres combinaisons.

Utiliser les filtres dans Photoshop

Une fois installée, cette collection est accessible depuis le menu Filtre de Photoshop : Filtre > Nik Collection. Vue la richesse des filtres, un panneau récapitulatif Selective Tool est accessible depuis le menu Fichier > Automatisation > Nik Collection Selective Tool pour permettre un accès plus direct. Au bas de ce panneau, n’oubliez pas le menu Paramètres qui permet, entre autres, d’appliquer les effets à la composition de l’image dans son ensemble ou au calque actif, voire de fusionner l’effet avec le calque actif ou sur un autre calque.

Chaque filtre s’affiche dans une interface spécifique à Nik Collection, qui, si elle prend un peu de place, donne néanmoins la possibilité de s’affranchir des Panneaux de réglages à droite et à gauche via la touche Tab.

D’une manière générale, chaque filtre propose trois volets :

• Filtres prédéfinis — Il suffit de cliquer sur une vignette prévisualisant l’effet pour l’appliquer.
• Prévisualisation en direct — Des contrôles permettent de gérer les aperçus avant-après, en utilisant un fractionnement de l’image soit avec un slider, soit côte-à-côte, ou encore en appuyant sur Comparer.
• Réglages pour personnaliser l’effet — Lorsque l’effet global est appliqué, chacune de ses composantes est modifiable, qu’il s’agisse des réglages standards (Détails, Luminosité, Contraste et Saturation) ou du Vignetage de l’objectif, du Type de film, etc. selon les ingrédients utilisés dans l’effet.

Il est tout à fait possible d’utiliser ces filtres avec la palette Actions de Photoshop pour automatiser les rendus : les effets artistiques ne sont pas les ennemis de la productivité.

Les plus « ergonomiques » de cette collection

• Les points de contrôles (U Point). Il s’agit de cliquer sur une partie de l’image et de spécifier l’étendue des modifications souhaitées, puis de jouer sur les contrôles proposés, avec la possibilité de voir le masque généré à l’occasion. Cette technologie U Point permet d’effectuer des sélections précises sans recourir à des masques de sélection. Chaque filtre inclut des points de contrôle adaptés à sa fonction.
• Rectangles de sélection. Il s’agit de délimiter une ou plusieurs zones pour spécifier les échantillons à retenir pour certains effets (Dfine, etc) en activant l’option Méthode > Manuelle.
• Mode Pinceau — Permet de revenir dans l’interface de Photoshop pour appliquer le filtre de manière sélective à l’image l’effet via l’outil Pinceau ou Dégradé.

⇒ Télécharger Google Nik Collection

Ressources :

• NikSoftwareLessons by Google — La chaîne Youtube de Google présente les filtres Nik Collection.
• Centre d’aide Nik Collection — Toutes les ressources pour apprendre à utiliser ces filtres.
• Video2brain — Gilles Théophile et Benoît Aragou montrent comment corriger, améliorer, retoucher et optimiser vos photos. Quelques chapitres gratuits permettent de se faire une idée du fonctionnement des filtres.
• Tuto.com — Apprendre à utiliser en détail : Analog Efex Pro, Dfine 2.0, Viveza 2, Color Efex Pro 4, Silver Efex Pro, Sharpener Pro 3.0 et HDR Efex Pro.
• Google Analog Efex Pro : la famille Nik s’agrandit — Cet article présente les filtres avec quelques exemples en images.

Le grand intérêt de Flexbox ? Ce qui le rend incontournable, c’est sa capacité innée à s’intégrer dans une logique « responsive ». Cerises sur le gâteau, les opérations telles que : l’alignement, le centrage vertical, la fluidité, les hauteurs identiques, la modification de l’ordre d’affichage des élément, etc. sont facilitées et accessibles au plus grand nombre, sans prise de tête (quoique).

La compatibilité avec le parc des navigateurs ? Elle semble excellente : plus de 95% des navigateurs utilisés en France (et au-delà) sont compatibles avec Flexbox (si l’on n’oublie pas les préfixes qui vont bien pour certains) ; et plus de 81% sont compatibles sans préfixe. Et gageons que ça ira en allant mieux.

Comment ça marche ? Il suffit qu’un élément soit transformé en flex-item (son parent est dans un contexte Flexbox) pour qu’iil change de statut : ni block ni inline, il devient alors possible de lui appliquer des propriétés spécifiques, telles que : order, align-self, flex-grow, flex-shrink, flex-basis, et flex qui est un raccourci pour les trois dernières propriétés cités.

Pour tester ? Rien de plus simple, deux Codepen sont disponibles : Livre Flexbox pour des démonstrations basiques et Jack in the flexbox pour aller plus loin.

Vous voulez en savoir plus ? C’est simple, il suffit de vous procurer le livre CSS 3 Flexbox et de vous caler dans votre siège baquet pour foncer vers de nouvelles aventure avec Flexbox ! En attendant d’être livré par drone, vous pourrez patienter avec l’article CSS3 Flexbox Layout module. Pour les plus impatients, voici la présentation du livre par Raphaël Goetter lui-même.

PS : on me souffle dans l’oreillette que les plus jeunes de mes lecteurs ne connaissent peut-être pas Billy Idol… Sur ce :

• In Pixel I Trust — Trouver de jolies images libres et gratuites en Creative Common pour vos projets.
• Materialize — Un framework front-end moderne d’après « Material Design » à forker sur Github !
• WPScouts — Comment traduire un Thème ou Plugin WordPress avec Poedit ?
• WP Marmite — Goûtez à Gravity Forms, le meilleur plugin de formulaire.
• Mobile Tutorials — Plus de 50 articles sur le développement mobile, par David Walsh.
• htaccess-useful — Il n’y a pas que le .htaccess de h5bp dans la vie, il y a aussi celui de Nicolas.
• johnm.io — Une grille à la manière de Flexbox grâce à la magie de nth-child.
• webmarketing-com — Les règles d’or de l’ergonomie web sont-elles toujours d’actualité ?
• stats.js — Classement des 10 000 projets Javascript les plus populaires sur GitHub.