Petite note rapide pour signaler le lancement de Test Drive par Microsoft. Une fois l’archive .msi installée sur votre disque dur (le moteur de rendu d’IE9 s’installe à côté de votre exemplaire d’Internet Explorer), Internet Explorer Platform Preview vous permettra de tester le moteur de rendu de IE9 censé respecter les standards (CSS3, HTML5) au plus près des spécifications du W3C. →
Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels. →
Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure». →
La propriété CSS3 `border-radius` permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 `border-radius` : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent `-webkit-border-radius` et ceux qui tournent sur Gecko (Firefox, Camino) utilisent `-moz-border-radius`. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel… →
L’analyse des mots-clés en provenance de Google en dit autant sur les intentions des internautes que sur le contenu de votre site ! Et ceci dans un double mouvement qui se renforce : plus votre contenu colle à la formulation des demandes des internautes, plus ces derniers auront des occasions de vous lire. C’est bête comme choux, mais pas si facile à réaliser 😉 Ce billet est la réécriture de la deuxième partie du (trop long) article intitulé Mesure d’audience : des mots-clefs au ClickRank il y a plus de 3 ans. Non seulement il n’a pas trop vieillit, mais certaines hypothèses (relation entre les résultats de recherche et les statistiques puisées dans Google Analytics) ont trouvé depuis des éléments de confirmation avec le Google Bounce Factor, notamment. →
Je partage généralement mes bons liens depuis mon compte Twitter mais n’est pas une raison pour arrêter complètement les listes de liens : elles ont leurs détracteurs mais aussi leurs supporters, sans compter que ces simples listes peuvent devenir Le petit journal du web qui claque mieux ! Cette sélection de ressources illustrées vous permettra de : (ré)apprendre à faire des liens accessibles ; vous méfier des attaques XSS avec Markdown ; créer des boutons funky en full CSS3 ; voir une méthode pour faire des blocs avec des coins arrondis avec une seule image ; utiliser les sélecteurs avancés y compris avec IE6, mieux connaitres les nouveaux enjeux concernant le métier de rédacteur web, etc. →
Lorsqu’on réalise le design d’un site web, il est d’usage de formaliser les choix créatifs retenus en répertoriant les éléments qui composent l’identité graphique et éditoriale dans un guide stylistique. Son objectif est de garantir à l’utilisateur final une expérience visuelle et intellectuelle cohérente tout au long de la navigation. Ce guide stylistique s’adresse généralement aux professionnels chargés de la réalisation technique du site (développeurs, intégrateurs web, etc.) et à ceux qui devront intégrer les contenus au quotidien, qu’il s’agisse des textes et de tout élément graphique ou multimedia. Il peut également préciser les valeurs de la marque et son positionnement vis-à-vis de ses concurrents. C’est dire l’importance de ce guide qui servira souvent de référence dans l’entreprise. →
Dynamic Dummy Image Generator est un outil en ligne qui génère une image en fonction de la taille que vous indiquez : saisissez le format dont vous avez besoin à la fin de l’URL du site, comme http://dummyimage.com/434×200 par exemple. Très utile en complément de HTML-IPSUM pour commencer à travailler sans contenu. L’auteur précise que l’on peut « hotlinker » autant d’images que son serveur pourra le supporter 😉
Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Ceci dit, j’aime bien tester les frameworks CSS qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation. Le potentiel didactique de ces projets est très intéressant. Ne vous en privez pas. →
HTMLIPSUM nous propose de copier-coller le célèbre paragraphe Lorem Ipsum attribué à Cicéron que l’on utilise traditionnellement comme faux-texte pour placer les blocs de contenu dans une maquette en attendant les éléments définitifs. Il existe de nombreux sites qui proposent des portions plus ou moins importantes de ce texte. L’originalité apportée par HTMLIPSUM provient du balisage de Lorem Ipsum avec les balises HTML les plus employées pour structurer du texte : paragraphe `p`, listes ordonnées `ol` ou non-ordonnée `ul`, liste de définition `dl`, mélange de plusieurs balises pour simuler un texte structuré et pour finir un exemple de formulaire `form`. →
