Organiser ses feuilles de style CSS

Organiser ses feuilles de style CSS J’ai regardé l’organisation des CSS dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n’y a pas deux feuilles de style qui partagent la même organisation, exceptée la remise à zéro du padding et du margin via le sélecteur universel ou seulement pour les éléments html et body, ou encore le choix de la police de caractère (famille, taille, interlignage et couleur du texte) pour le seul élément body. Certaines commencent par la structure pour finir avec les éléments html quand d’autres mettent les déclarations dans l’ordre alphabétique…

WordPress 2.2 : Stan Getz release et le thème Sandbox de plaintxt.org

wordpress 2.2 est sorti ! La nouvelle version d’une plate-forme de blog utilisée par des millions de blogueurs est toujours un événement, et la version 2.2 de WordPress ne fait pas exception. Parmi les nouveautés, je retiens le support natif des widgets pour gérer les éléments de la sidebar par glissé-déposé, l’intégration des spécifications complètes Atom 1.0, et le plus important pour terminer : les optimisations destinées à accélérer la plate-forme 😉

Améliorations cosmétiques et ergonomiques sur ce blog

Améliorations cosmétiques et ergonomiques sur ce blog ? Après mon petit tour sur les questions relatives à l’ergonomie des blogs, je me suis décidé à repenser la navigation sur css4design qui en avait bien besoin. Quelques commentaires plus tard sur la navigation par tag vs catégorie, je suis descendu de mon petit nuage… J’en ai même profité pour harmoniser les couleurs en diminuant la part du rose au profit du vert. Sans connotation politique aucune 😉

Petit bilan statistique du CSS Naked Day

CSS désactivées : quel impact sur les statistiques de fréquentation du blog ? 1646. C’est le nombre total de sites inscrits sur la page CSS Naked Day. Je suis en 997ème position et Google.com en 210ème. Ils ont vraiment beaucoup d’humour chez Google 🙂 Autant dire que je vais m’entrainer durement et améliorer mon score l’année prochaine. Si vous avez peur d’oublier la date, le concepteur du strip a prévu la fonction PHP is_naked_day() pour désactiver vos CSS en temps et en heure. Ce qui peut être utile pour d’autres occasions. Ceci dit, venons-en au fait : la mise à nu d’un blog en terme d’habillage graphique impacte-t-elle le nombre de visiteurs, de pages vues ou encore le temps passé sur un blog ?

CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique…

Ca part en vrac ? Un petit mix pour commencer le mois. Demain c’est Show Time pour ce blog qui dévoilera ses dessous pour la bonne cause, au moment même où mes Copaings font leur apparition… Et dire que ça se passe peut-être près de chez vous : si vous habitez la région lyonnaise, venez noyer votre chagrin football-istique (pourtant le nom d’une liste ordonnée aurait pu être de bonne augure, mais bon…) en compagnie de Lyon-Blog qui prépare sa V2. En parlant de V2, il y a aussi du nouveau du côté de chez Alsacreations.

Menu HTML et CSS, sliding doors et item current en PHP

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Exercice de style CSS et HTML : table vs div

sivom-nautiqueL’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

Quelques notes sur XHTML et CSS, au fil de l’eau…

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide *téléologique* concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

Utilisez le DOM et Javascript comme un chef

dom-javascript Comment remplacer les gestionnaires d’événements présents dans une page web en redéfinissant le comportement onclick, onmouseover… des éléments XHTML ? Tout simplement en utilisant la magie du DOM et de Javascript. Généralement, lorsqu’on veut appliquer une fonction sur un élément XHTML (ouvrir un popup lorsqu’on clique sur une image, par exemple), on utilise une fonction popup() déclenchée par un événement onclick placé dans la balise comme ici : <img src= »/img1.gif » onclick= »popup() » />. C’est parait simple, efficace et rapide… Or, ça peut vite devenir compliqué, inefficace et lent…

Adriana K, Google et balises meta dans DotClear

Comment ça y dit qu’y voit pas l’rapport…

Google, balises meta, DotClear... Moi c'est tout les jours, et vous ? La particularité d’un bon système de publication de blog comme DotClear ou WordPress est, entre autre, d’opérer une séparation entre les données et leur affichage. Comme le fait une bonne page web avec le contenu et le design grâce à XHTML et CSS. Cela se traduit souvent par l’existence d’un dossier themes qui contient généralement un fichier template.php. Ce fichier regroupe les parties communes de votre site, dont notamment les balises meta. Ce qui peut avoir des conséquences sur la visibilité de vos pages dans Google. Voyons comment…