Au sommaire de ce petit journal nous trouvons : une traduction par mes soins d’un article fouillé sur les roues chromatiques (théorie et perception des couleurs) ; une vidéo de recommandations pour vos designs «responsive» ; des principes de codage pour travailler efficacement avec Javascript ; des propriétés CSS3 utiles pour concevoir des médias paginés (livres) ; un récapitulatif des éléments HTML & CSS pour obtenir une grille typographique équilibrée ; des retours d’expériences sur les méthodes d’intégration web ; une astuce simple et efficace pour simuler les états actifs dans Chrome et Firefox et, pour finir, une méthode pour modifier une palette de couleurs d’un seul coup avec Less et/ou avec Sass. Voulez-vous en savoir plus ?
Le blog de l'intégrateur web
20 ressources pour la création de formulaires HTML
Les formulaires web ont souvent une mauvaise e-réputation auprès des designers web. Pourtant, ils sont incontournables dès que l’on veut recueillir des données sur les utilisateurs ou les faire interagir avec une application en ligne. Pour rendre la création des formulaires HTML moins laborieuse, voici une série de liens pour mieux comprendre l’accessibilité des formulaires, avoir des exemples pour l’inspiration, générer des formulaires en ligne. Pour finir, je vous ai ajouté une liste de plugin jQuery pour rendre vos formulaires un peu plus «sexy» :-) Voulez-vous en savoir plus ?
Mes thèmes WordPress Basics et Beyond Basics sont sur Github
Cela fait longtemps que j’envisage de mettre mon thème WordPress Basics et son thème enfant Beyond Basics sur Github. L’intérêt est double : 1) mieux gérer les mises à jour et les tests de nouvelles fonctionnalités, et 2) faciliter le côté «thèmes à emporter» pour les développeurs qui sont les destinataires principaux de ce «blank thème». Par ailleurs, la création des .zip à la volée m’évitera de jongler avec la mise à disposition des téléchargements pour les versions intermédiaires. Pour tout savoir sur l’installation de Git et l’utilisation de Github, je vous conseille la lecture du tutoriel Gérez vos codes source avec Git. Voulez-vous en savoir plus ?
CSS Selectors — Visualiser les sélecteurs CSS de manière interactive
CSS Selectors – Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours. Voulez-vous en savoir plus ?
Quel est le coeur de métier de l’intégrateur web ?
Cet article s’inspire d’un tweet de Sophie Drouvroy @cyberbaloo_ qui pose une question apparemment toute simple : Pour vous un intégrateur web est censé savoir faire quoi techniquement ?
L’intégrateur web devrait maitriser le couple HTML & CSS et connaitre suffisamment Photoshop pour découper les portions d’images. Il doit également pouvoir travailler au milieu d’un langage côté serveur comme PHP ou client comme Javascript. En effet, il arrive souvent que l’intégrateur intervienne sur des projets déjà en production. Voulez-vous en savoir plus ?
La journée mondiale de l’accessibilité, c’est maintenant !
Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap. Voulez-vous en savoir plus ?
Guide de bonnes pratiques HTML & CSS par Google
Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent. Voulez-vous en savoir plus ?
Editeur de dégradés CSS3 à la mode de Photoshop
ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64. Voulez-vous en savoir plus ?
Optimiser les images PNG, JPG, GIF
Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site : Voulez-vous en savoir plus ?
Recommandations pour développeurs web front-end
Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin. Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs. Voulez-vous en savoir plus ?
