Formateur et intégrateur XHTML et CSS résidant à Lyon, je suis passionné par la mise en page des textes et des images et je garde un oeil sur l'actualité du design et du développement web.
Intégration web et bonnes pratiques avec HTML et CSS. Design et charte graphique avec ou sans Photoshop. Rédaction web, blogging avec Dotclear et WordPress. Référencement et positionnement sur Google.
Lorem ipsum dolor sit amet, consectetuer adipisci elit. Modo principio voluptatem id te voluptates quae iustitia exercendi inquam at in, ipsa doctus propemodum quamquam cognitionem dicas certe, voluptatem diligi semper contra nisi necessarius turbent me amici saepe ipsa certae debilitati iucunda et materia, laetamur qua.
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 »
Le framework CSSBlueprint 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.
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 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 »
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 »
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 »
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 »
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.
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 »
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 la suite »
Vous n’êtes pas sans ignorer que je participe à un petit concours de référencement sur le mot-clé zobibi. Pour ne pas (trop) gêner la lecture “normale” du blog, j’ai décidé de masquer les billets de la catégorie zobibi. A la demande de Plouf, j’ai fait en sorte que les billets de cette catégorie soient masqués sur la Home tout en restant visible lorsqu’on affiche le billet seul ou lorsqu’on clique sur la catégorie idoine. Lire la suite »
Les archives de WordPress sont de moins en moins employées par les blogmasters soucieux d’optimiser la place disponible. Pourtant, s’il peut être utile de donner aux visiteurs une idée des billets parus chaque mois, le widget Archives d’origine oblige à faire défiler tous les mois un par un. Ce qui n’est pas très ergonomique quand [...]
Qui a besoin d’un moteur de recherche ? Ctrl+F ! J’ai trouvé cette petite phrase savoureuse sur Knol, le nouveau service Google qui propose à chacun d’entre nous de rédiger des Knol — unité de connaissance (knowledge) faisant autorité sur un sujet spécifique.
Remy Sharp de jQuery for Designers propose une documentation alternative à celle de jQuery.com dont les sous-domaines ont connus récemment quelques difficultés. Au menu :
Navigation dans l’API
Visual jQuery
API offline avec Adobe Air (zip).
Si vous n’aimez pas le widget Calendrier proposé par WordPress pour montrer votre activité mensuelle, vous serez peut-être séduit par cette nouvelle manière de présenter les archives : les années en ordonnée et les mois en abscisse.
Actuellement disponible sous forme de code à copier-coller, ne doutons pas que Manu continuera à travailler du chapeau pour [...]
Suite à des attaques contre le réseau internet Géorgien et après avoir perdu son site web, le Ministère des affaires étrangères de Géorgie vient d’ouvrir un blog sur Blogger, la plate-forme de blog de Google. J’ai failli croire à un canular en lisant le nom du blog : georgiaMFA (Géorgie Made For Adsense ? ok, [...]
Marin Gatellier vient de créer son premier plugin. WP Microsummary Comments Track vous permettra de suivre le nombre de commentaires approuvés, en attente et marqués comme spam par Wordpress, le tout dans un Live Bookmark Firefox (à partir de la version 2).
L’article Blogues et commentaires : un mal vraiment nécessaire ? est une très bonne contre-analyse de Michael Carpentier de l’article Le phénomène blogue tire à sa fin de Nelson Dumais que j’avais évoqué il y a peu. Pour résumer, deux journalistes font part de leur désintérêt pour leur blog à cause des commentaires abusifs ou [...]
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 »