Archives du mot-clef codage Web

Dialogues en CSS

1 réponse

L’objectif était de réduire au maxi­mum le bali­sage, donc de ne pas uti­li­ser les arti­fices .first et .last que l’on trouve ailleurs. Merci de vous don­ner vos impressions.

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

Quelques remarques :

  • Le B du pre­mier bon­jour est légè­re­ment décalé sur la droite. J’ignore pour­quoi, c’est peut-être lié au caractère.
  • J’ai rajouté la loca­li­sa­tion, donc vous pou­vez inté­grer les règles de ponc­tua­tion de dif­fé­rentes langues dans votre CSS
  • Les espaces de sépa­ra­tion du pre­mier niveau de guille­mets sont des espaces fines insé­cables (&202f; nom­mée espaces étroites insé­cable par Uni­code), confor­mé­ment à la typo­gra­phie fran­çaise soi­gnée. Á ne pas confondre avec l’espace insé­cable ( ) ou l’espace fine sécable ( ).
  • Ini­tia­le­ment, 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 fina­le­ment, je l’ai passé en HTML5 :) .
  • Même si dans cet exemple ça ne sert à rien, j’ai isolé la dis­cus­sion avec un ID (#dialogue), car dans la vraie vie, vous ne vou­drez pas que toutes vos listes à puce se com­portent comme des dis­cus­sions :)

Voyez le résul­tat 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>

CSS snippets

1 réponse

High SNR, mini­mum ver­biage CSS code recipes. NEW!: check out this great CSS snipp­ters com­pi­la­tion Lire la suite →

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

4 réponses

Word­Press est de plus en plus une boîte à outils, très flexible et très puis­sante. Trop puis­sante. Implé­men­ter les fonc­tions dans un thème est un gros tra­vail. Pas éton­nant dès lors que la majo­rité des thèmes n’assurent que le ser­vice mini­mum. Donc, si l’on ne veut pas du thème par défaut, on risque gran­de­ment de perdre des fonc­tions (que ce soit les com­men­taires imbri­qués, un menu per­son­na­li­sable, un aperçu de la police du thème dans l’interface d’édition ou autre). Com­ment avoir le beurre (la puis­sance de Word­Press) 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émons­tra­tion tech­no­lo­gique, un thé­meur ama­teur n’a pas à réin­ven­ter la roue en acti­vant les fonc­tions. Quant à l’utilisateur, il a une visi­bi­lité sur les fonc­tions du thème. Conséquences :
  • fonc­tion­nel­le­ment, Twenty Ten est un fra­me­work. On peut dire que Twenty Ten est à Word­Press ce que Ruby on Rails est à Ruby, voire Latex à Tex [2. Plus pré­ci­sé­ment, je dirai que Twenty Ten est un fra­me­work de niveau 2 ; les « vrais » fra­me­works, comme Car­ring­ton, The­sis… sont des fra­me­works de niveau 1] ;
  • en cher­chant 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 Ele­ven

Word­Press déve­lop­pera désor­mais un thème par défaut par an — le pro­chain sera donc Twenty Ele­ven. Il y a de fortes chances que ce soit à chaque fois une réfé­rence tech­no­lo­gique. Ainsi, des thèmes enfants basés sur le nou­veau thème par défaut garan­ti­ront à l’utilisateur final qu’il aura un thème très puis­sant. Inver­se­ment, il suf­fira de taper Twenty Eleven child theme pour avoir l’assurance d’avoir un thème puis­sant (beau ou conve­nable, c’est une autre question).

Conclu­sion

À 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 assu­rance de qua­lité pour les thèmes comme les uti­li­sa­teurs. Les thèmes enfant de Twenty* sont des gages de qua­lité.

Utiliser Google pour peaufiner son référencement

Laisser une réponse

Les mul­tiples opé­ra­teurs (je pré­fère par­ler de para­mètres) de Google per­mettent de fil­trer gran­de­ment les infor­ma­tions. Mais, tout comme l’acces­si­bi­lité, ce n’est pas que les aveugles, la recherche poin­tue, ce n’est pas que des sujets obs­curs. C’est aussi des sujets très clairs, mais que l’on veut bien ana­ly­ser. Par exemple ? La popu­la­rité de son site. Et Google vient à la res­cousse, sans un seul plu­gin de sta­tis­tiques. D’autres pro­duits Google (Google Ana­ly­tics et Google Web­mas­ter Tools) vous don­ne­ront des infor­ma­tions sur les per­sonnes qui visitent votre site. Mais si vous vou­lez des infor­ma­tions en amont (à quel point votre site est visible), alors pas­sez par ce bon vieux Google Search&hellip; avec quelques para­mètres ! Ce qui suis est lar­ge­ment ins­piré de Using Search Engine Ope­ra­tors for Easy Link Buil­ding. Lire la suite →

Modules indispensables à Drupal

Laisser une réponse

Comme vous le savez peut-être, même si ce blog est pour le moment sur Word­Press, l’objectif final est de le faire pas­ser sur Dru­pal. C’est un objec­tif assez loin­tain, car il faut d’abord que je prenne la pleine mesure de la puis­sance de Word­Press (qui m’esbaudit de jour en jour) et que je vois com­ment ça avance sur Dru­pal. Donc, disons que je garde un œil sur Dru­pal tout en res­tant sur Word­Press. Il y a plu­sieurs liste d modules indis­pen­sables (ins­rer liste). Voici la mienne :
  • tra­duc­tion en français
  • Poor Man’s cron. Pour ceux chez qui, comme moi, cron ne fonc­tionne pas tout seul et n’ont pas l’expertise tech­nique pour le faire fonc­tion­ner. Mon expé­rience montre qu’il n’est plus néces­saire avec Dru­pal 7.
  • admin. Une refonte totale de l’interface admi­nis­tra­teur, incom­men­su­ra­ble­ment meilleure que l’existant. En fait, il s’agit d’un module et d’un thème admi­nis­tra­teur. J’ignore com­ment le module admin fonc­tionne avec un autre thème uti­li­sa­teur que celui qu’il pro­pose et, hon­nê­te­ment, je m’en moque ; celui-ci est très bien. En plus, il est prévu qu’à l’avenir, l’interface d’admin soit acces­sible direc­te­ment depuis la par­tie publique (pour les uti­li­sa­teurs y ayant accès, bien sûr) — on appelle ça l’« over­lay »
  • Tendu. Ce n’est pas un module, mais un thème bidi­rec­tion­nel, le meilleur parait-il. Bon, vous me direz, la majo­rit d’entre vous n’a pas besoin de grer la bidi­rec­tion­na­lit (crire en arabe, en hbreu&…), mais bon.

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

Laisser une réponse

Ver­sion courte

Sand­box + Blue­print + thème enfant

Appelons-le « Blue­box child »

Ver­sion longue

En com­bi­nant ces trois outils, vous obte­nez une mise en page fonc­tion­nelle pour com­men­cer à travailler.

  • Pas d’inquiétude pour la mise en page, Sand­box s’en charge (sous réserve que vous ne cher­chez pas une mise en page exotique).
  • Pas d’inquiétude pour la com­pa­ti­bi­lité entre les navi­ga­teurs, Blue­print s’en charge (enfin, tant qu’on reste sur des navi­ga­teurs de bureau).
  • Pas d’inquiétude pour la perte de modi­fi­ca­tions lors d’une mise à jour, le thème enfant s’en charge.

Quelques modi­fi­ca­tions sup­plé­men­taires sont néces­saires, car le code de Bllue­print a changé depuis la publi­ca­tion sur michaelwender.com. J’ai ajouté les­dites modi­fi­ca­tions en commentaires.

Grands mer­cis à Scott Wal­lick et Andy Skel­ton pour Sand­box, Olav Bjor­koy et Chris­tian Mon­toya, Joshua Clay­ton, Chris Epp­stein and Glenn Rempe pour Blue­print, Michael Wen­der pour le didac­ti­ciel pour com­bi­ner les deux, Ian Ste­wart pour le didac­ti­ciel sur les thèmes enfants et Guy James Sta­ni­forth pour mélan­ger celui-ci avec la pré­cé­dente com­bi­nai­son.

Et main­te­nant, que la fête com­mence : adap­tez cet excellent sque­lette à vos besoins !

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

2 réponses

Short ver­sion

Sand­box + Blue­print + child theme

Let’s call it the “Blue­box child”

Long ver­sion

With the com­bi­na­tion of these three tools, you get a clean blog layout to work with.

  • No need to worry about the layout, Sand­box takes care of it (assu­ming you are not loo­king for an exo­tic layout).
  • No need to worry about brow­ser incon­sis­ten­cies, Blue­print takes care of it (as far as we are tal­king desk­top brow­ser, I mean).
  • No need to worry about upgrade loss, child theme takes care of it.

Some extra modi­fi­ca­tions are requi­red because the blue­print code change since the publi­ca­tion on michaelwender.com. I added the said modi­fi­ca­tions in comments.

Many thanks to Scott Wal­lick and Andy Skel­ton for Sand­box, Olav Bjor­koy and Chris­tian Mon­toya, Joshua Clay­ton, Chris Epp­stein and Glenn Rempe for Blue­print, Michael Wen­der for the tuto­rial on mixing the both, Ian Ste­wart for the tuto­rial on child themes and Guy James Sta­ni­forth for mixing this with the pre­vious com­bi­na­tion.

And now, let’s the real fun begin: cus­to­mise this great ske­le­ton to your needs!

Frameworks de thèmes pour WordPress

Laisser une réponse

Bon, on recommence.

À peine ai-je décou­vert Sand­box et com­mencé à tra­vailler des­sus que je me rends compte que je suis en 2008. Et qu’en 2009, les theme fra­me­work ont beau­coup évolué.

J’ai donc beau­coup cher­ché et hésité. La liste ci-dessous est le résul­tat de mes recherches.

  1. Pre­mière géné­ra­tion : K2. Il intro­duit l’idée de « super-thème » (advan­ced tem­plate) et de thèmes enfant (styles). Il n’a pas été suivi (il conti­nue à être déve­loppé, mais il n’attire pas les foules ou les inspirations).
  2. Deuxième géné­ra­tion : Sand­box. Il devient la base de nom­breux déve­lop­pe­ments et, en fait, est le père de (presque  ?) tous les fra­me­works de thème actuels. Peut-être doit-il son suc­cès à son dépouille­ment, qui incite jus­te­ment à regar­der le fra­me­work comme un fra­me­work, et non comme un thème avec des fonc­tions en plus.
  3. Troi­sième géné­ra­tion : Car­ring­ton (le plus puis­sant appa­rem­ment, il lorgne clai­re­ment sur le CMS, Hybrid, The­ma­tic, Vanilla (mon pré­féré sur le papier), WP Fra­me­work, et plein d’autres. Le terme styles de K2 est désor­mais appelé thèmes enfant (child themes)
  4. Qua­trième géné­ra­tion : The Future of Word­Press Themes 2009.

J’ai hésité à ins­tal­ler Vanilla, qui me semble le plus inté­res­sant (tout comme le logi­ciel de forum épo­nyme), mais il n’est pas fina­lisé. Je sou­hai­tai aussi uti­li­ser Carrington/JAM (une ver­sion dépouillée et amé­lio­rée de Carrington/Blog), mais elle était vrai­ment trop bare­bones pour moi (même le PHP ne marche pas en l’état).

Donc, je pars de Carrington/Blog et je vire­rais la CSS.

WordPress, arrête de penser à ma place !

Laisser une réponse

D’après mes essais (texte mini­mal, fichier CSS vidé), Word­Press force l’affichage des liens en tant que tel, même quand on ne veut pas. Exemple pour le prou­ver, une CSS que je vou­lais don­ner « telle qu’elle appa­raît dans BBE­dit » (mais en conser­vant un vrai lien) :

/* http://david.latapie.name/blog/765-modifications-esthetiques */

[hreflang]:after	{
    background:transparent;
    color:#666;
    content:"\a0[" attr(hreflang)"]";
    font-size:smaller;
    text-decoration:none
}

Voici le code per­ti­nent : <a href="#" style="color:inherit;text-decoration:none">bla</a>

J’ai même essayé avec du !important (ce qui est géné­ra­le­ment une mau­vaise pra­tique), rien n’y fait.

Je vous met au défi d’empêcher Word­Press de pen­ser à votre place. Et je suis pre­neur de tout plugin.

Je suis loin d’être le seul à m’en plaindre (ce lien traite de HTML, pas de CSS, mais j’ai aussi eu ce pro­blème avec du HTML.

Improving Leopress theme for WordPress

Laisser une réponse

I love the Leopress-fr theme (adap­ted from Leo­press 1.0), but it has seve­ral issues, some so fun­da­men­tal I can nei­ther use it nor bug­fix it.
  • back­ground is not fixed. It fixed it (pun inten­ted): html {background:attachment:fixed}
  • I favour justify over left when it comes to text-align. I fixed this too: .post .entry {text-align:justify}
  • not widget-ready. Quite impor­tant for me and I don’t have the pro­fi­ciency to fix it.
  • does not dis­play tags in posts. Very impor­tant for me and I don’t have the pro­fi­ciency to fix it.
  • ignore the a ele­ment in post! Fun­da­men­tal and I don’t know how to fix this.
  • no bul­let for bul­le­ted lists. Strange, since the code is there. I have the intui­tion it comes from the same pro­blem with the lack of anchors. Fun­da­men­tal and I don’t know how to fix this.
The last twos pro­blem may be rela­ted to this theme not being Word­Press 2.8-ready. If, by any chance, you have some spare time…