Le blogzine de l'intégrateur web : du Design Web au HTML5, CSS3 et jQuery en passant par la création graphique

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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 ?

Lutte des classes CSS !

Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS. Voulez-vous en savoir plus ?

Tutoriels pour apprendre HTML & CSS

Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux. D’autant plus que la majorité des tutoriels présents dans cette liste sont en français ! Voulez-vous en savoir plus ?

Media queries et téléchargement des images par les mobiles

A l’heure où l’on parle beaucoup de Responsive Webdesign via notamment les propriétés CSS3 Media Queries, il est important de s’interroger sur la manière dont les différents périphériques mobiles se comportent au moment de télécharger les images. Disons que vous affichez une image en tant “normal” et que vous décidez de lui appliquer display: none si max-width: 600px. L’idéal serait que le périphérique ciblé ne demande pas l’image afin d’épargner la bande passante. Voulez-vous en savoir plus ?

Le petit journal du web des CSS : Bootstrap, Responsive, Triangle, Etc.

Dans ce petit journal du web vous trouverez des liens bien frais pour 1) faire ce que vous voulez avec Bootstrap, 2) avoir un aperçu du rendu de votre site dans différents formats mobiles, 3) copier-coller quelques règles CSS pour obtenir des triangles orientés dans les quatre directions sans image, 4) suivre un tutoriel pour intégrer un prototype de page directement dans le navigateur avec le framework CSS Zurb Fondation. Voulez-vous en savoir plus ?

EM Calculator : simplifiez vos calculs en em

Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu. Voulez-vous en savoir plus ?

2 vidéos sur le fonctionnement du navigateur (Gecko)

L’amélioration des performances d’affichage des sites web est la nouvelle frontière du développement web. La majorité des articles disponible traite du bon usage des sélecteurs, classes ou identifiants de nos feuilles de style. Pourtant, une des clés de l’optimisation des performances web passe par une meilleure compréhension du fonctionnement du navigateur qui reste peu connu des intégrateurs HTML / CSS. Pour y remédier, voici deux vidéos qui devraient vous en apprendre plus sur Gecko, le moteur de rendu de Mozilla Firefox. Voulez-vous en savoir plus ?

Check your <body> avec le W3C

Suite à l’arrivée W3C mobileOK Checker sur mon écran radar (merci @flashxman), je me suis dit qu’il pourrait être utile de faire une liste des outils proposés par le W3C pour vérifier la conformité de nos sites web par rapport aux standards, aux bonnes pratiques ou aux performances web. D’une manière générale, ces outils œuvrent pour l’amélioration de la qualité web. Voulez-vous en savoir plus ?



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site