Je profite de l’occasion que j’ai de mettre à jour ce blog vers la version 6.2 de WordPress pour te présenter mon nouveau blog emploi Dans tes cordes ! J’en profite pour te tenir au courant (les derniers articles réguliers sur 4design datent de 2015 environ) : je suis passé d’intégrateur – webdesigner à conseiller en insertion professionnelle après un passage dans les études barométriques auprès de chefs d’entreprise en direction d’autres chefs d’entreprises de plus grandes tailles (les entreprises, pas les chefs, quoique…).
→Archives de : Bruno Bichet
Copier le texte des items d’un menu déroulant HTML ?
Dans la série des petits tracas de la vie quotidienne du veilleur stratégique qui sommeille en chacun·e de nous, il y a la sélection des items d’un menu déroulant dans une page html pour les coller ailleurs. Voici quatre techniques pour y parvenir, avec une expression régulière et Notepad++, Mastodon, Google Image ou l’extension Fake News Debunker.
→Les différents types de tirets : ceux qui n’en sont pas et comment s’en servir
Comme il n’est pas toujours facile de savoir à quels tirets se vouer et comment les afficher, voici quelques éléments à garder à portée de clavier. Ça va sans dire mais mieux en le disant, il suffit de copier-coller le symbole affiché au début de chaque titre et l’affaire est dans le sac. Vous pouvez aussi cliquer sur les liens pour en savoir plus sur chaque symbole : son petit nom dans l’Unosode, son nombre dans l’Unicode et autres HTML-code, CSS, entité HTML, etc.
→Notes de lecture : « Responsive Design Patterns »
Quelques années après avoir sorti Responsive Web Design, Ethan Marcotte déroule sa pensée concernant la conception web avec Responsive Design Patterns. Il ne s’agit plus de penser la page web, mais de l’imaginer comme autant de modules apparaissant lorsqu’on en a besoin. La conception web monolithique doit laisser la place à une conception modulaire. La place de chaque élément devra être soigneusement pesée en fonction de son intérêt selon le contexte de l’utilisateur. Est-il face à un grand écran avec une souris ou est-il en train de marcher en regardant son smartphone ? →
38 outils en ligne pour vérifier l’accessibilité de votre site web
L’accessibilité des sites web est un enjeu majeur pour proposer des contenus ou des interactions — non pas pour un nombre réduits de personne — mais au contraire, pour le plus grand nombre. Pour paraphraser une publicité célèbre en son temps : ce qui est bon pour un lecteur en situation de handicap, est bon aussi pour un lecteur en situation de pleine possession de ses moyens. Pour cela, voici une compilation d’outils en ligne, en ligne de commande ou de logiciels pour tester la conformité de votre site web au regard des différents tests proposés : Section 508, WCAG 2.0, ADA, OAC, ISO PDF/UA, niveaux de lecture, contraste, etc. →
Design tactile : le « taca taca tile » du Smartphone
Les smartphones, les tablettes et les phablettes ont envahit notre quotidien. L’étude des interactions tactiles n’en est qu’à ses débuts, et la manière de tenir ces écrans et d’interagir avec eux détermine en grande partie l’ergonomie des contenus. Les mains et les pouces ont une réalité physique que l’on ne peut ignorer, tout comme le poids et l’encombrement d’une tablette. Il faut donc « faire avec » et trouver le moyen de proposer aux utilisateurs un contenu non seulement consultable proprement (la moindre des choses), mais qui tire de surcroît partie des possibilités tactiles de nos appareils « intelligents ». →
Qu’est-ce que la couleur ?
Et si on passait par le son pour expliquer le fonctionnement de la couleur ? Curieuse idée, mais qui en a sous le pied, comme nous le démontre cette vidéo issue de la chaîne Youtube Science Etonnante. L’auteur nous explique comment la couleur naît dans notre cerveau par le biais de trois cônes sensibles à des longueurs d’onde allant de 400 nm à 700 nm. Plus particulièrement, ces cônes, sensibles chacun à une plage de longueur d’onde (soit grosso modo 450 nm pour le bleu, 550 nm pour le vert et 600 – 650 nm pour le rouge), expliquent comment une couleur mélangée à une autre peut en créer une troisième. →
Filtres Google Nik Collection : traitement et retouche pour Photoshop
Après avoir racheté Nik Software en 2012 pour surfer sur la vague des filtres Instagram — et après avoir baissé drastiquement les prix dans un second temps — Google offre désormais Nik Collection. Il s’agit d’un ensemble de filtres pour Photoshop, Lightroom, Bridge et Aperture, disponible à la fois pour Windows et MacOS. Ces filtres tirent partie des possibilités des objets et des filtres dynamiques de Photoshop ; ils s’insèrent donc sans problème dans un flux de travail non destructif. Il s’agit de HDR Efex Pro, Dfine, Viveza, Color Efex Pro, Silver Efex Pro, Sharpener Pro et Analog Efex Pro. TL;DR : si vous aviez rêvé d’avoir le talent des plus grands photographes ou d’utiliser des techniques et du matériel d’antan, Nik Collection est fait pour vous. →
« We want Flex, Flex for fantasy »
J’ai eu le plaisir de recevoir dernièrement le livre « CSS 3 Flexbox, Plongez dans les CSS modernes » publié chez Eyrolles. Un ouvrage entier sur une seule propriété ? Et oui, Raphaël Goetter a choisi de consacrer près de 130 pages (en couleurs, s’il vous plait) à une seule propriété CSS, à savoir, Flexbox. Il faut dire qu’il y a matière, car les specs sont complexes et les possibilités infinies (et au-delà) ! →
9 liens pour l’intégrateur web
Que celui ou celle qui n’a jamais cherché·e : des images libres et gratuites en Creative Common ; un framework basé sur le Material Design de Google ; à traduire un thème WordPress avec Poedit ; une extension WordPress pour créer des formulaires ; à tout savoir sur le développement mobile ; un fichier .htaccess pour optimiser les performances de son site ; à faire des grilles à la Flexbox, sans flexbox ; à savoir si les règles de l’ergonomie web du XXe siècles sont toujours respectables ; à connaitre le classement des projets Javascript les plus populaires sur GitHub me jette la première souris sans fil ! →