La multiplication des digg-like, des agrégateurs et autres aspirateurs de contenus nécessite une vigilance accrue quant aux redirections qui affectent les liens pointant vers nos blogs et nos sites web. A cause de Wikio, il faudra non seulement vérifier les redirections, mais aussi les fichiers robots.txt. Magneto ! Lire la suite
XHTML & CSS
Création de webdevfr sur Google Groups
Yves Van Goethem annonce la création du groupe de discussion webdevfr sur Google Groups pour rassembler les professionnels francophones du développement web afin qu’ils échangent en toute simplicité.
The HTML Framework Project | Phase 1.1 — définir
Je vous ai rapidement parlé de The HTML Framework Project qui propose de réfléchir ensemble à la mise en place d’un environnement de travail pour rendre le démarrage d’un projet de site web moins ennuyeux. Le projet en est à la phase 1.1 : définir. Il est évident que produire un bon code HTML est un métier, un art qui peut difficilement se faire comme on élève des poules en batteries. Pour autant, il doit être possible de dégager parmi les bonnes pratiques de travail, quelques concepts récurrents que l’on pourrait utiliser au démarrage d’un projet. Lire l’article »
Tags : Aside, Fichiers, Footer, Framework, HTML, HTML5, Intégration HTML, Section |
Publié le 5 septembre 2008 par Bruno Bichet. 6 commentaires »
Publié le 5 septembre 2008 par Bruno Bichet. 6 commentaires »
The HTML Framework Project | Phase 1 — définir
Le HTML Framework Project se donne pour mission de rassembler les idées des développeurs d’interface utilisateur et des webdesigners pour poser les bases d’une spécification de framework HTML. Le projet s’étalera sur une durée de 18 semaines de réflexion : Lire l’article »
Manifeste pour un interlignage minimum syndical pour les blogs !
Un spectre hante le web : le spectre de l’interlignage par défaut des navigateurs. Trop de blogs et de sites web se contentent du minimum syndical pour gérer l’interlignage. Par défaut, les navigateurs web proposent 120% de la taille de la police. Lire l’article »
Tags : Accessibilité, Design, Ergonomie, interlignage, Tutoriels, typographie |
Publié le 28 août 2008 par Bruno Bichet. 20 commentaires »
Publié le 28 août 2008 par Bruno Bichet. 20 commentaires »
Créer un site web en XHTML et en CSS
Voici un tutoriel vidéo consacré à la conception d’une page web en XHTML 1.0 strict et en CSS. Créer un site web : codage envoyé par JojoRatonLaveur
Mes conventions en “programmation” PHP et CSS
Tiens, ça faisait longtemps que je n’avais pas participé à une chaine de blog. Suite à l’invitation de Darklg à livrer les conventions que j’utilise en programmation, voici mes secrets avec un exemple PHP et CSS à la clé. Lire l’article »
Blueprint Generator : une grille CSS à vos mesures
Le framework CSS Blueprint propose une grille par défaut de 950 pixels de large, divisée en 24 colonne de 30 pixels chacune, séparée par une gouttière de 10 pixels. Contruire sa propre grille est assez fastidieux mais Blueprint Generator est là pour vous demander le nombre de colonne, leur largeur, la gouttière qui les sépare ainsi que la largeur totale que vous voulez.
Vous saurez ensuite combien de pixels vous manquent (ou de combien vous dépassez) pour arriver à la bonne largeur. Reste à jouer sur les différentes valeurs pour générer le code CSS qui remplacera les valeurs de grid.css inclus à l’origine dans Blueprint.
Cerise sur le gâteau, une version compressée est proposée, ainsi que l’image grid.png qui sert à afficher la grille de base pour le placement des colonnes lors de la phase de conception.
Zapper la maquette Photoshop et passer directement à l’intégration HTML/CSS ?
Depuis longtemps je me dit qu’un jour je saurai faire une maquette complète d’un design web dans Photoshop. Pourtant, je lance Illustrator à chaque fois, et dès les principes graphique en place, je lance mon éditeur web préféré (en ce moment, c’est Aptana Studio) pour commencer l’intégration tout de go ! Dans mon fors intérieur, j’ai toujours trouvé que paufiner une maquette dans les moindres détails dans Photoshop était souvent chronophage : on se focalise sur les détails graphiques (le bidule, un peu plus à droite, c’est possible ?) au lieu de privilégier la bonne distribution des informations dans l’espace. Lire l’article »
Markdown, un plugin WordPress pour produire du XHTML facilement, rapidement et proprement
Markdown est un convertisseur qui transforme du texte “brut” en code XHTML. C’est une alternative aux éditeurs WYSIWYG qui ne s’adaptent pas forcément à tous les besoins. Markdown vous permettra de rédiger des textes en utilisant un format de balisage de texte simple à écrire et à lire, puis à le convertir en code XHTML (ou HTML en option) structurellement valide. A première vue, la syntaxe utilisée est très proche de celle que vous utilisez peut-être si vous rédigez sur des wikis. A première vue, car Markdown est bien plus puissant, surtout si l’on utilise PHP-Markdown Extra… Lire l’article »
Granularisation du balisage HTML : parce que nos documents le valent bien…
Suite à mon dernier billet sur les différentes manières d’aborder le balisage HTML d’une hCard, Neovov et burningHat ont soulevé la question de la sur-sémantisation du code d’une manière générale et de la sur-utilisation des listes en particulier. Neovov, par exemple, ne voit pas pourquoi on devrait mettre des listes partout. burninHat quant à lui, se demande si l’on ne n’accorde pas trop d’importance à la description de notre code HTML… Magneto ! Lire l’article »
Tags : HTML, Sémantique, Tutoriels, XHTML |
Publié le 30 avril 2008 par Bruno Bichet. 20 commentaires »
Publié le 30 avril 2008 par Bruno Bichet. 20 commentaires »
Proposition de balisage HTML sémantique du microformat hCard
En lisant ce billet de Frédéric de Villamil sur le compte rendu du troisième WASP café France dans lequel il présente un exemple de structuration du microformat hCard, je n’ai pu m’empêcher d’ajouter mon grain de sel pour remplacer la divite et la spanite par une structure à base de listes imbriquées que je trouve comment dire… plus sémantique… Lire l’article »
Tags : hCard, HTML, Microformats, Sémantique, Tutoriels, XHTML |
Publié le 29 avril 2008 par Bruno Bichet. 31 commentaires »
Publié le 29 avril 2008 par Bruno Bichet. 31 commentaires »
Mon thème magazine pour WordPress : C comme Cahier des charges
Après A comme Allons-y et B comme Bêtise, Je continue à égrener l’alphabet qui me sert de fil conducteur pour la création d’un thème de type magazine, selon la formule consacrée. C comme Cahier des charges parce que si lors de la première étape, j’ai noté quelques idées pour savoir dans quelle direction aller, il est temps de fixer le cap avec la liste des fonctionnalités dont j’ai besoin. Cette phase, indispensable lorsqu’on doit développer les fonctionnalités d’un site from scratch, peut sembler un peu formelle pour un blog, où sauf exception, tout est déjà codé dans le moteur du blog ; il reste néanmoins à déterminer celles que l’on va intégrer, de quelle manière et avec quelles options. Lire l’article »
.ma-classe-css vs div.ma-classe-css
En général, j’utilise la notation .ma-classe-css pour nommer les classes réutilisables par n’importe quel élément HTML. Cette notation est en fait un raccourci pour .ma-classe-css où est utilisé comme joker universel (les tirets ne sont là que pour le référencement).
Me souvenant que le reset * { margin: 0; padding: 0; } n’était pas optimum en terme de performances, je me suis dit que l’utilisation de div.ma-classe-css (en préfixant le nom de la classe avec la balise HTML à laquelle elle s’applique) permettrait certainement au navigateur de parcourir le DOM plus rapidement en raison du nombre réduit d’éléments sur lesquels boucler.
Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d’un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j’en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j’assure le service après-vente, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… ^_^ Lire l’article »
C’est possible ? Parce qu’avec les tableaux… Tôt ou tard, ça ne rate jamais, la question revient sur le tapis de souris. Et là, de vous lancer dans une diatribe comme quoi ça ne sert absolument à rien de vouloir ce footer toujours en bas, que si on manque de contenu, on n’a qu’à en créer, etc. Certes, vous y croyez, et votre interlocuteur commence même à trouver que ce pauvre footer tout seul en bas a l’air de s’ennuyer ferme. Seulement, vous êtes un professionnel, et même si ça ne sert à rien, vous aimeriez bien trouver la solution ;) 
Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels
Les hacks CSS, c’est pas bien ; les commentaires conditionnels, c’est mieux. Pour autant, je ne vois pas d’inconvénient à utiliser quelques hacks à l’intérieur d’une feuille de style réservée à Internet Explorer à l’aide des commentaires conditionnels. En effet, pourquoi ajouter une requête inutile en ciblant chaque version de IE quand on peut régler le problème une fois pour toute ? Lire l’article »
Publié le 17 avril 2008 par Bruno Bichet. 4 commentaires »