Archives du mot-clé codage Web

Dialogues en CSS

L’objectif était de réduire au maximum le balisage, donc de ne pas utiliser les artifices .first et .last que l’on trouve ailleurs. Merci de vous donner vos impressions.

Merci à Heyoan et à GC-nomade pour le coup de main.

Quelques remarques :

  • Le B du premier bonjour est légèrement décalé sur la droite. J’ignore pourquoi, c’est peut-être lié au caractère.
  • J’ai rajouté la localisation, donc vous pouvez intégrer les règles de ponctuation de différentes langues dans votre CSS
  • Les espaces de séparation du premier niveau de guillemets sont des espaces fines insécables (&202f; nommée espaces étroites insécable par Unicode), conformément à la typographie française soignée. Á ne pas confondre avec l’espace insécable ( ) ou l’espace fine sécable ().
  • Initialement, la page était en XHTML 1.1, mais comme je ne sais pas intégrer xml:lang dans les CSS, j’ai dû me rabattre sur XHTML 1.0. Et finalement, je l’ai passé en HTML5 :).
  • Même si dans cet exemple ça ne sert à rien, j’ai isolé la discussion avec un ID (#dialogue), car dans la vraie vie, vous ne voudrez pas que toutes vos listes à puce se comportent comme des discussions :)

Voyez le résultat sur une page extérieure.

Et ci-dessous le code.

<!-- 'HTML-style' HTML5 -->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Dialogue de Q</title>
    <style type="text/css">
    #dialogue                          {list-style:none}
    #dialogue q:lang(fr)               {quotes : '«\202F' '\202F»' "“" "”" "‘" "’"}
    #dialogue li:first-child q:before  {content:open-quote}
    #dialogue li:first-child q:after   {content:no-close-quote}
    #dialogue li q:before              {content:no-open-quote'\2012';padding-right:0.5em}
    #dialogue li q:after               {content:no-close-quote}
    #dialogue li:last-child q:after    {content:close-quote}
    </style>
</head>

<body>
<ul id="dialogue">
  <li><q>Bonjour, comment allez-vous ?</q></li>
  <li><q>Bonjour. Très bien, et vous ?</q></li>
  <li><q>Très bien, merci.</q></li>
</ul>
</body>
</html>

flattr this!

CSS snippets

High SNR, minimum verbiage CSS code recipes.

NEW!: check out this great CSS snippets compilation

Lire la suite

flattr this!

Le Futur de WordPress : les thèmes enfants, gage de qualité

WordPress est de plus en plus une boîte à outils, très flexible et très puissante. Trop puissante. Implémenter les fonctions dans un thème est un gros travail. Pas étonnant dès lors que la majorité des thèmes n’assurent que le service minimum.

Donc, si l’on ne veut pas du thème par défaut, on risque grandement de perdre des fonctions (que ce soit les commentaires imbriqués, un menu personnalisable, un aperçu de la police du thème dans l’interface d’édition ou autre).

Comment avoir le beurre (la puissance de WordPress) et l’argent du beurre (la variété des thèmes de WordPress)?

Twenty Ten child

Une parade qui semble avoir le vent en poupe est de créer un thème enfant de Twenty Ten. Comme ce thème est une démonstration technologique, un thémeur amateur n’a pas à réinventer la roue en activant les fonctions. Quant à l’utilisateur, il a une visibilité sur les fonctions du thème.

Conséquences :

  • fonctionnellement, Twenty Ten est un framework. On peut dire que Twenty Ten est à WordPress ce que Ruby on Rails est à Ruby, voire Latex à Tex [2. Plus précisément, je dirai que Twenty Ten est un framework de niveau 2 ; les “vrais” frameworks, comme Carrington, Thesis… sont des frameworks de niveau 1] ;
  • en cherchant sur Google Twenty Ten child theme, l'utilisateur final est assuré d'avoir un service minimum de fonctionnalités. Assurance qu'il n'a pas avec le moteur de recherche de WordPress ou même Google.

Twenty Eleven

WordPress développera désormais un thème par défaut par an — le prochain sera donc Twenty Eleven. Il y a de fortes chances que ce soit à chaque fois une référence technologique. Ainsi, des thèmes enfants basés sur le nouveau thème par défaut garantiront à l’utilisateur final qu’il aura un thème très puissant. Inversement, il suffira de taper Twenty Eleven child theme pour avoir l’assurance d’avoir un thème puissant (beau ou convenable, c’est une autre question).

Conclusion

À la manière d’Ubuntu qui se base sur la meta-distribution qu’est devenu Debian, les thèmes enfants se basant sur Twenty-something sont une assurance de qualité pour les thèmes comme les utilisateurs.

Les thèmes enfant de Twenty* sont des gages de qualité.

flattr this!

Utiliser Google pour peaufiner son référencement

Les multiples opérateurs (je préfère parler de paramètres) de Google permettent de filtrer grandement les informations. Mais, tout comme l’accessibilité, ce n’est pas que les aveugles, la recherche pointue, ce n’est pas que des sujets obscurs. C’est aussi des sujets très clairs, mais que l’on veut bien analyser.

Par exemple ? La popularité de son site. Et Google vient à la rescousse, sans un seul plugin de statistiques. D’autres produits Google (Google Analytics et Google Webmaster Tools) vous donneront des informations sur les personnes qui visitent votre site. Mais si vous voulez des informations en amont (à quel point votre site est visible), alors passez par ce bon vieux Google Search&hellip; avec quelques paramètres !

Ce qui suis est largement inspiré de

Using Search Engine Operators for Easy Link Building.

Lire la suite

flattr this!

Modules indispensables à Drupal

Comme vous le savez peut-être, même si ce blog est pour le moment sur WordPress, l’objectif final est de le faire passer sur Drupal. C’est un objectif assez lointain, car il faut d’abord que je prenne la pleine mesure de la puissance de WordPress (qui m’esbaudit de jour en jour) et que je vois comment ça avance sur Drupal. Donc, disons que je garde un œil sur Drupal tout en restant sur WordPress.

Il y a plusieurs liste d modules indispensables (insrer liste). Voici la mienne :

  • traduction en français
  • Poor Man’s cron. Pour ceux chez qui, comme moi, cron ne fonctionne pas tout seul et n’ont pas l’expertise technique pour le faire fonctionner. Mon expérience montre qu’il n’est plus nécessaire avec Drupal 7.
  • admin. Une refonte totale de l’interface administrateur, incommensurablement meilleure que l’existant. En fait, il s’agit d’un module et d’un thème administrateur. J’ignore comment le module admin fonctionne avec un autre thème utilisateur que celui qu’il propose et, honnêtement, je m’en moque ; celui-ci est très bien. En plus, il est prévu qu’à l’avenir, l’interface d’admin soit accessible directement depuis la partie publique (pour les utilisateurs y ayant accès, bien sûr) — on appelle ça l’« overlay »
  • Tendu. Ce n’est pas un module, mais un thème bidirectionnel, le meilleur parait-il. Bon, vous me direz, la majorit d’entre vous n’a pas besoin de grer la bidirectionnalit (crire en arabe, en hbreu&…), mais bon.

flattr this!

Squelette Bluebox child : les meilleures bases pour un thème WordPress (pour le moment)

Version courte

Sandbox + Blueprint + thème enfant

Appelons-le « Bluebox child »

Version longue

En combinant ces trois outils, vous obtenez une mise en page fonctionnelle pour commencer à travailler.

  • Pas d’inquiétude pour la mise en page, Sandbox s’en charge (sous réserve que vous ne cherchez pas une mise en page exotique).
  • Pas d’inquiétude pour la compatibilité entre les navigateurs, Blueprint s’en charge (enfin, tant qu’on reste sur des navigateurs de bureau).
  • Pas d’inquiétude pour la perte de modifications lors d’une mise à jour, le thème enfant s’en charge.

Quelques modifications supplémentaires sont nécessaires, car le code de Bllueprint a changé depuis la publication sur michaelwender.com. J’ai ajouté lesdites modifications en commentaires.

Grands mercis à Scott Wallick et Andy Skelton pour Sandbox, Olav Bjorkoy et Christian Montoya, Joshua Clayton, Chris Eppstein and Glenn Rempe pour Blueprint, Michael Wender pour le didacticiel pour combiner les deux, Ian Stewart pour le didacticiel sur les thèmes enfants et Guy James Staniforth pour mélanger celui-ci avec la précédente combinaison.

Et maintenant, que la fête commence : adaptez cet excellent squelette à vos besoins !

flattr this!

Bluebox child skeleton: definitive WordPress starter theme (so far)

Short version

Sandbox + Blueprint + child theme

Let’s call it the “Bluebox child

Long version

With the combination of these three tools, you get a clean blog layout to work with.

  • No need to worry about the layout, Sandbox takes care of it (assuming you are not looking for an exotic layout).
  • No need to worry about browser inconsistencies, Blueprint takes care of it (as far as we are talking desktop browser, I mean).
  • No need to worry about upgrade loss, child theme takes care of it.

Some extra modifications are required because the blueprint code change since the publication on michaelwender.com. I added the said modifications in comments.

Many thanks to Scott Wallick and Andy Skelton for Sandbox, Olav Bjorkoy and Christian Montoya, Joshua Clayton, Chris Eppstein and Glenn Rempe for Blueprint, Michael Wender for the tutorial on mixing the both, Ian Stewart for the tutorial on child themes and Guy James Staniforth for mixing this with the previous combination.

And now, let’s the real fun begin: customise this great skeleton to your needs!

flattr this!