Spam créatif

Des spams pour vendre du « médicament » en ligne, comme tout le monde j’en reçois assez souvent.

En général un entête de mail « facilitant » l’ouverture (phrase amicale pouvant provenir d’une connaissance, message d’une plateforme connue – boutique en ligne ou réseau social…) suivi d’une tonne de variations de contenus en général en mode texte (lien direct, texte rédigé également sous la forme d’une phrase amicale…)

Ce soir, j’ai reçu un spam particulier, dont l’entête répond bien aux codes du genre (Amazon.com – Your Cancellation (927-92010-192019) ), mais dont le contenu a retenu toute mon attention.

Ce soir, j’ai reçu un spam créatif :

spam-creatif

Très sincèrement, j’ai failli cliquer pour voir la tête des sites derrière. Tout est en html, pas une image, la croix est faite avec un tableau.

Il y a quelque chose dans la composition que je trouve diablement efficace.

Le Fail du jour

J’interviens depuis quelques temps pour un nouveau partenaire.

Un de leurs clients, bureau local d’une multinationale veut juste héberger des pages sur un serveur, avec quelques modifications, ces pages ou mini sites sont en général temporaires et ne servent qu’à récolter des infos suite à des mailings.

Mes interventions se limitent en général à « dynamiser » les formulaires de collecte d’info, héberger les fichiers temporairement, bref rien de bien méchant.

D’habitude, je reçois des sites ou des pages réalisés sous dreamweaver, à l’ancienne, tout en tableaux.

Mais pour un projet un peu plus important, j’ai reçu un dossier de mini site réalisé par le bureau web de la multinationale, du beau boulot, intégration ultra propre, clairement orientée navigateurs récents mais qui se déprécie très correctement avec, au hasard, IE6.

« Se déprécie très correctement » veut dire que oui, il y a de nombreux bugs d’affichage, mais rien de mortel ou qui empêche l’utilisation du site, juste de légers décalages,  les classiques problèmes de layout, des min-height et min-width non interprétés, bref que du classique.

Ma mission (que j’ai acceptée) est de franciser le mini site (travail aisé étant donné que le dev/intégrateur du mini site semble savoir que utf-8 ne se limite pas à un simple charset ) à modifier certains contenus et à « dynamiser » les divers formulaires.

Je fais donc les modifs, publie sur le serveur, préviens mon partenaire qui lui prévient le client.

Les premiers retours du client arrivent, ou il fait mention de bugs d’affichage…

Je vous laisse deviner la suite.

Peinture fraîche

Une envie comme ça, depuis hier, l’envie de reprendre l’habillage de ce blog.

Pas vraiment un redesign complet mais plus une évolution, finaliser deux ou trois choses.

Comme toujours, je m’occuperais des détails plus tard (surtout cette satanée sidebar qui me résiste) mais je crois que je vais dans la bonne direction.

Pour l’instant, j’ai juste rehaussé certains contrastes, apporté plus de structure au haut de page et relooké les commentaires.

Plus ce que l’on ne voit pas, certaines optimisations du code html et un bon gros nettoyage de mon CSS qui a perdu pas loin de 4kos depuis ce matin, la pauvre feuille de styles gardait des stigmates d’anciens designs.

Donc, attention, la première couche de peinture est toute fraîche et la deuxième devrait se faire la semaine prochaine.

Développeurs faites vous apprendre le html

Nuage de mots de l'article : développeurs, faites vous apprendre le html

Une constante, quand on fait un tant soit peu d’intégration html est de vouer aux gémonies les graphistes et leurs designs farfelus.

Ne dites pas non, je lis vos blogs ou vous suis sur twitter.

Mais sincèrement, si IE6 ne foutait pas autant le bordel, l’intégration html des maquettes de graphistes seraient en général gérées à grands coups de png transparent et tout se passerait pour le mieux dans le meilleur des mondes.

On parle moins souvent des résultats plus ou moins hasardeux des travaux des développeurs, parce que le développeur c’est sacré, et c’est teigneux.

Seulement, voilà, il ne faut pas se voiler la face, il est plus simple d’intégrer une maquette de graphiste en créant la structure html qui va bien que de styler et habiller des pages générées par un développeur pour qui l’html c’est juste un vague truc qui balise du contenu.

Un exemple simple et pas plus vieux qu’hier ou j’ai du intervenir sur un projet pour un truc relativement simple, un menu déroulant en CSS.

Le menu de base n’est en fait qu’une suite de liens <a> séparés par un | le tout bien rangé dans un <div>, ça c’est le plus simple à gérer, le plus compliqué arrive quand on se rend compte que les pages n’ont pas… de doctype. Et là, avec IE 6 ou 7, ça devient amusant de gérer un menu déroulant en CSS quand on peut se coller les commentaires conditionnels ou je pense.

L’html en mode Quirks, c’est amusant, 2 minutes… ou pas en fait.

Un autre grand classique; les plugins WordPress, ou tout autre CMS d’ailleurs.

On trouve un plugin puissant, qui répond parfaitement au besoin du moment, c’est cool, ça réduit les coûts.

On l’intègre, et au moment de vouloir l’habiller pour l’intégrer au design, l’horreur. De la soupe de balise incompréhensible, ni identifiants ni classes que l’on peut aisément styler à la volée. Il faut tout recoder proprement, ce qui, bien sur, pose de gros problèmes en terme de maintenance pour suivre les mises à jour de l’outil.

Je crois bien que le pire que j’ai pu voir dans le genre, c’était un plugin (je ne sais plus lequel) qui générait un formulaire brut de chez brut, avec des textes présentant les champs sans balise label, ni id ni class sur aucun élément, tout était placé en brut…

J’ai du placer une surcouche javascript pour pouvoir styler correctement le plugin, l’enfer.

Et je ne parle même pas des développeurs anglophones pour qui UTF8 se limite à un charset.

Ce n’est d’ailleurs pas pour rien que l’on parle de plus en plus de développeur back et développeur front.

Mais quand même, s’il vous plait messieurs les développeurs, apprenez le html, ce n’est pas difficile de faire un petit effort, et ça rendra service à tout le monde, vous en premier.

Une boutique en ligne, ce n’est pas qu’un script

L’objectif d’un site ecommerce est de vendre, certes, en transformant ses visiteurs en acheteurs, mais, il ne faut pas oublier que tous n’achètent pas et ne viennent pas pour acheter. Et s’il est donc primordial de se concentrer sur l’optimisation du taux de transformation, il est tout aussi important de ne pas négliger les moyens de faire revenir les internautes sur votre site en gardant le contact avec eux par tout moyen que ce soit.

Capitaine commerce : Conception de site : optimiser les parcours clients (1)

Premier article sur les différentes pistes d’optimisation de l’expérience utilisateur et de la relation client dans le cadre d’un e-commerce.

Premier article d’une série sur l’optimisation d’une boutyique en ligne, je vous conseille de suivre le blog Capitaine Commerce, si ce n’est déjà fait.

La déprime du Webdesigner

Je viens de terminer un site pour un projet personnel. Le cahier des charges était de réaliser un site clair, sobre, efficace. J’ai utilisé peu de couleurs, très peu d’images et des polices très visibles pour le menu. J’ai passé un certain temps à peaufiner les détails, car je suis persuadé que ce sont les détails qui font la différence entre un chouette site et un pur site.

Au final, je suis arrivé à un site clair, épuré, et que je croyais être dans le top de la tendance minimaliste. Le contenu ressort bien et en un clin d’oeil on sait de quoi parle le site.

Comme je n’ai pas la science infuse, je montre le résultat à quelques personnes de mon entourage perso et pro. La plupart des retours que j’ai obtenus étaient du genre : « c’est bien, mais c’est cheap. Ca manque un peu d’images et de trucs animés ». Comme je n’ai pas la science infuse, je suis intimement persuadé que au final c’est effectivement bien mais cheap.

Grégoire (Barbablog) : Parfois, le métier de webdesigner me déprime

Celle là aussi, je l’ai vécue il n’y a pas si longtemps, mais pour un site client.

Leur précédent site était aussi coloré qu’inutilisable et personnellement je le trouvais assez moche.

J’ai carte blanche, je leur refait un site propre, sobre car le sujet est « sérieux » avec une navigation bien mieux pensée, du call to action bien placé sans être trop envahissant, bref je suis content de moi et mon interlocuteur chez eux aussi.

Deux jour plus tard mon interlocuteur me contacte pour me donner les retours de là personne en charge de la communication, je cite :

C’est pas top, je trouvais l’ancien site bien mieux, beaucoup plus coloré…

Réaliser un site internet avec WordPress

Je vais baser cet article sur un des derniers sites que j’ai créé : Construire en Vendée.

capture d'écran du site Construire en Vendée

Le cahier des charges

Créer un site internet attractif à vocation prospective.

Le site devra refléter l’activité de la société, permettre du contact facilité (demande de devis principalement) et créer une certaine interactivité avec les visiteurs (partie blog, abonnements, newsletter…).

Secteur d’activité : Constructeur, maître d’oeuvre orienté maisons individuelles.

Le site devra présenter l’activité de la société, ainsi que certaines de ses réalisations sous la forme d’un « portfolio ».

L’ensemble des contenus pourront être mis à jour par le client.

Une dimension référencement très forte est intégrée à ce dossier, mais ce n’est pas ce qui nous intéresse aujourd’hui.

Pourquoi WordPress

Après étude des besoins du client, et des contenus initiaux, il est clair que le site n’aura pas une architecture du contenu profonde, pas de réelles rubriques (à part sur la partie blog) ni sous rubriques, ni sous sous… donc le défaut principal de WordPress pour organiser son contenu (le système de page parent/page enfant), ne pose aucun problème.

De plus j’ai déjà en tête une liste de plugins répondant parfaitement aux besoins du site, donc réduction des coûts, ce qui intéresse, vous vous en doutez, le client.

Passons maintenant aux choses sérieuses, la production.

Le site internet complet réalisé avec WordPress

Petit message : pour que vous compreniez mieux la relative facilité de personnalisation des boucles WordPress, je précise que je ne suis pas développeur, que je connais juste assez le PHP pour pouvoir intervenir sur du code simple, je sais ce qui est faisable, je ne sais pas forcément le faire. Tous les « trucs » appliqués sur ce site, je les ai, soit appris dans le codex WordPress, soit créés de toute pièce sur des questions de logique et de bon sens (faut être curieux dans ce métier).

Le site a été développé à partir de WordPress 2.3.3, la versions 2.5 n’étant pas encore sortie à cette époque, mais normalement tout est transposable sur WordPress 2.5.

Le design

Contrairement à ce que j’ai déjà publié sur différents projets, je ne vais pas m’étendre sur cette partie juste préciser certains points techniques.

Je base mon travail de design pour des sites réalisés avec WordPress sur le thème Sandbox, vierge de toute décoration mais dont les classe automatiquement générées sont très intéressantes pour le designer et permettent un habillage personnalisé pour chaque page du site si le besoin s’en fait sentir.

Au besoin, vous pouvez écrire vos boucles via des fonctions personnalisées dans le fichier functions.php du thème ou en dur dans vos pages en fonction de vos besoins en terme de maintenance ou de réutilisation de ces fonctions (si vous n’utilisez une boucle qu’une seule fois, il n’est pas forcément nécessaire de la centraliser dans le fichier functions.php).

Le header / Haut de page

Haut de page du site construire en vendée

Rien à la main, que du WordPress de base et de la fonction du thème Sandbox personnalisée :

	<div id="header">
		<h1 id="blog-title"><a href="<?php echo get_option('home') ?>/" title="<?php bloginfo('name') ?>" rel="home"><?php bloginfo('name') ?></a></h1>
		<ul id="boutonsplus">
		<?php wp_list_pages('include=15,16,14&title_li=&sort_column=menu_order'); ?>
		</ul>
		<?php sandbox_globalnav() ?>
	</div>

Comme vous le voyez, le code générant le header est plutôt simple, nous avons deux boucles générant des listes de pages.

La première, celle de « boutonsplus » permet de n’afficher que les pages listées par leur identifiant (include=15,16,14), la seconde, sandbox_globalnav() n’est ni plus ni moins que la même chose (ou presque) mais que l’on retrouve dans le fichier functions.php du thème Sandbox, je l’ai juste personnalisée, car par défaut elle liste l’ensemble des pages du site, je voulais juste afficher les pages présentes dans le menu, donc je l’ai modifiée de la même façon que la partie « boutonsplus » en ne lui faisant afficher que les pages désirées.

Si vous surfez un peu sur le site, vous vous rendrez compte que l’habillage du header change sur certaines pages. j’ai simplement créé de styles sur mesure pour le header en fonction des classes intégrées en automatique dans la balise body par le thème sandbox (le body de chaque page du site contient des classes fixes et variables, dont l’identifiant unique de la page en cours), on joue ensuite sur les notions d’héritage, analysez la feuille de style CSS du site pour comprendre comment ça marche.

La Homepage et les pages intérieures

Homepage du site Construire en vendée

Pour changer la page affichée par défaut par votre site wordpress, rien de plus simple, utilisez l’option suivante : dans l’interface d’administration : onglet options, sous menu Lecture : Affichage de la page d’accueil. Choisissez « une page statique » pour la page d’accueil et voila, votre homepage a changé pour une des pages que vous avez créé initialement. Trop dur.

La homepage sous forme d’images cliquables est en fait une page de texte. Je suis juste passé par le mode d’édition html de l’éditeur wysiwyg pour ajouter des classes aux 4 paragraphes pour que je puisse m’amuser avec la feuille de style CSS. les effets de rollover sont entièrement gérés via CSS.

Pour les pages intérieures, vous remarquerez que tout comme le header, la couleur de certains titres et des liens changent en fonction de la page, même technique que pour le header tout est basé sur une question d’héritage avec les classes de la balise body générées par le thème Sandbox.

Les images sont gérées par le plugin Nextgen Gallery, j’y reviendrai plus tard.

Sur chaque page se trouve le même visuel message « rencontrons-nous pour étudier votre projet gratuitement » de façon à optimiser la prise de contact du visiteur, ou qu’il soit, il peut rapidement prendre contact avec la société.

Les modèles de pages

Bien que je n’ai pas eu besoin d’utiliser cette possibilité de WordPress, je pense qu’il est nécessaire de vous en parler.

Lorsque vous travaillez sur une Page dans le backoffice, et non pas sur un billet, vous avez dans les onglets de droite un onglet appelé « modèle de page » qui par défaut est sur « modèle par défaut ».

Ces modèles de pages, sont en fait des fichiers de template complémentaires basés en général sur le fichier page.php de votre thème sur lesquels on greffe des données d’identification de modèle.

Pour créer un modèle de page, faites une copie du fichier page.php dans votre dossier template et renommez cette copie en modele1.php (ou tout autre nom à votre convenance). Editez ce fichier avec votre éditeur de texte favori et ajoutez tout en haut du fichier les lignes suivantes :

<?php
/*
Template Name: NomduModele
*/
?>

Publiez ce fichier sur votre serveur dans le dossier de votre template et retournez dans la page d’édition de Page de votre WordPress. Si vous regardez l’onglet « modèle de page », le nom NomduModele s’est ajouté à la liste des modèles de pages présents.

A partir de là, laissez jouer votre imagination sur les possibilités de modification de mise en page des Pages basées sur ce modèle : sidebar personnalisée, header personnalisé, ajout d’une boucle wordpress pour par exemple ajouter un menu complémentaire sur toutes les pages basées sur ce modèle, etc… les possibilités sont sans fin.

La sidebar / colonne de droite

En relation avec le dernier élément du menu « blog Maison JPY », elle est simplement gérée en mode widgets, le template Sandbox supportant les Widgets WordPress, autant en profiter.

Le contenu est volontairement limité, les rubriques du blog, le formulaire de recherche, une petite galerie des images du site gérée par le un Widget du plugin Nextgen Gallery très aisément configurable.

Le footer / Pied de page

J’ai fait le choix d’utiliser un grand pied de page, pour y caser toutes les informations redondantes ou qui ne sont pas facilement accessible dans la navigation initiale du site :

  • Coordonnées de la société pour encore optimiser la prise de contact.
  • Liste complète des pages du site présentée comme « plan »
  • Les informations du blog que l’on trouve classiquement dans la sidebar
  • Un formulaire de contact que l’on retrouve également sur la page contact, mais du coup, il est également présent sur toutes les pages du site.
  • Les Partenaires, principalement pour le référencement, on y trouvera uniquement les sites à thématique proche.
  • Les « micro » mentions légales, tiens ça me rappelle qu’il faut que je m’occupe de la page complète mentions légales.

Dans la série trucs et astuces :

Le plan du site est généré avec une boucle basique sur l’ensemble des pages du site : <?php wp_list_pages('title_li=&sort_column=menu_order' ) ?>

La partie Blog est un copié/collé des fonctions que l’on trouve dans le fichier sidebar.php, j’ai juste fait un choix au niveau des informations à afficher.

Pour le formulaire, il s’agit du plugin cforms permettant de générer en ligne des formulaires complexes.

Les plugins utilisés

Pour gérer les images : NextGEN Gallery
Le choix s’est porté sur Nextgen Gallery, tout simplement car nous avions besoin de fonctionnalités intégrées au plugin entre autre, la possibilité de gérer… des galeries d’images. Il possède également son Widget permettant d’insérer une micro galerie et ajoute un bouton d’outil dans l’éditeur wysiwyg pour insérer dans un billet ou une page, au choix, une image seule ou une galerie complète.

Pour gérer les formulaires : cforms
Plugin extrêmement puissant permettant de gérer à peu près tout type de formulaire via l’interface d’administration de WordPress, du simple formulaire de contact à l’enquête en ligne. Il ajoute un bouton pour insérer un formulaire dans une page ou un billet mais peut également insérer un formulaire dans votre template avec la fonction suivante : <?php insert_cform('2'); ?> 2 étant l’identifiant du formulaire que j’ai inséré, il vous suffit juste de récupérer l’identifiant de votre fomulaire et de changer ce chiffre.

Pour gérer la sitemap : Google Sitemaps
Le grand classique.

Pour le formulaire de recherche : Search Everything
Permettant d’intégrer les Pages dans les recherches, obsolète depuis WordPress 2.5

Pour la newsletter : Subscribe2
Plugin permettant de gérer des newsletter simples, mais surtout générant des envois automatiques d’emails pour tout nouveau contenu publié sur le site. Voir l’article : Une Newsletter dans wordpress, c’est possible avec le plugin Subscribe2

Pour les liens internes : SH-Autolink
Pour générer des liens automatiques de page à page sur des mots clés ou ensemble de mots clés. Pour rappel, il a maintenant un remplaçant, le plugin Keyword Autolink de webinventif.

Pour les élément du head optimisés : All in One SEO Pack
C’était la solution de facilité, mais je pense m’orienter vers une solution personnalisée moins lourde et mieux intégrée au moteur WordPress.

Et c’est tout, vous retrouverez les liens utiles tout à la fin de l’article.

Pour en finir avec ce site internet WordPress

J’avais déjà eu l’occasion de développer défférentes choses autour du moteur wordpress, mais qui restaient assez proches du modèle du blog, en réalisant ce projet, je me suis prouvé à moi même que WordPress tenait sans aucun problème la comparaison avec d’autres CMS plus lourds pour des projets relativement simple.

La batterie de plugins existants permet de répondre à un nombre assez important de problématiques, il faut juste prendre le temps de les tester, de lire des retours d’utilisateurs et de vérifier si ils ne sont pas intégrés n’importe comment au moteur wordpress, au risque de casser votre joli code tout propre. Et surtout, choisissez de préférence des plugins référencés dans le codex WordPress.

Si vous prenez vraiment le temps de vous intéresser au fonctionnement de WordPress et à la façon dont vous pouvez personnaliser son mode de rendu html et ses boucles, vous obtenez un outil de rêve pour les webdesigners, vous pourriez même avoir un site avec un habillage en fonction du mois, du jour, voir de l’heure de la journée, mais là, faut vraiment avoir le temps ou les moyens.

Ah oui, un dernier point : CSS, CSS et encore CSS !

les liens utiles :

Astuce dotclear 1 : billet suivant – précédent de la catégorie

Code avancé pour gérer les billets suivant/précédents au sein d’une catégorie :

Je me suis basé sur l’astuce suivante fournie dans le site le petit dotclear illustré : Billet précédent, billet suivant du blog/de la catégorie.

Et voici nouveau code que je vous propose pour le fichier prepend.php :

  /** * Naviguer d'un billet a l'autre dans la meme categorie
  * @function dcPostNextInCat
  */
  function myGetNextID($ts,$dir=1,$cat=0) {
  	global $blog;
  	$ts = (integer) $ts;
  	$reqPlus = ''; 	if($dir > 0) {
  		$sign = '>';
  		$order = 'ASC';
  	} else {
  		$sign = '<';
  		$order = 'DESC';
  	}
  	if ($blog->pub_mode !== NULL) {
  		$reqPlus .= 'AND post_pub = '.$blog->pub_mode.' ';
  	}
  	if ($blog->lang !== NULL) {
  		$reqPlus .= 'AND post_lang = \''.$blog->con->escapeStr($blog->lang).'\' ';
  	}
  	if ($cat !== 0) {
  	   $reqPlus .= 'AND cat_id = '.$cat.' ';
  	}
  	$strReq = 'SELECT post_id, post_titre, post_dt, post_chapo, post_content '.
  			'FROM '.$blog->t_post.' '.
  			'WHERE UNIX_TIMESTAMP(post_dt) '.$sign.' \''.$ts.'\' '.
  			$reqPlus.
  			'ORDER BY post_dt '.$blog->con->escapeStr($order).' '.
  			'LIMIT 0,1 '; 	if (($rs = $blog->con->select($strReq)) !== false) {
  		return $rs;
  	} else {
  		$blog->setError('MySQL : '.$blog->con->error(),2000);
  		return false;
  	}
  }
  function dcPostNextInCat($dir,$s='%1$s %2$s %3$s') {
  	global $blog;
  	global $news;
  	$rs = myGetNextID($news->getTS(), $dir, $news->f('cat_id'));
  	if (!$rs->isEmpty())
  	{
  		$id = $rs->f('post_id');
  		$titre = $rs->f('post_titre');
  		$date = $rs->f('post_dt');
  		$ts = strtotime($date);
  		$url = sprintf($blog->front_url['post'],date('Y',$ts),
  		date('m',$ts),date('d',$ts),$id,$blog->str2url($titre));
  		
  		if ($rs->f('post_chapo') != '') {
  			$desc = strip_tags($rs->f('post_chapo'));
  		} else {
  			$desc = util::cutString(strip_tags($rs->f('post_content')),150).'...';
  		}
  		printf($s,$id,$titre,$url,$desc);
  	}
  	else {
  	printf('< h5 >Vous êtes sur le dernier article de la rubrique< /h5 >< p >Le prochain article est, probablement, en cours de rédaction.< /p >< p >Cordialement,< br / >Aymeric Jacquet< /p >');
  	}
  }

A insérer avant le ?> fermant du fichier prepend.php de votre thème.

Important : pour la partie <h5>… en bas du code, il s’agit d’un message personnalisé à afficher si on est sur le dernier article de la catégorie, pensez à créer votre propre texte et si vous utilisez des balises html retirez les espaces après les > et avant les >, ils ne sont là que pour éviter le formatage hrml dans mon bilet dotclear. ;)

Ensuite, dans votre fichier post.php, insérez les lignes suivantes, en fonction de l’endroit ou vous voulez afficher ces éléments :

<div id="avantapres">
<h3>Autres articles de la rubrique : <a href="<?php dcPostCatURL(); ?>/" title="Rubrique <?php dcPostCatTitle(); ?>"><?php dcPostCatTitle(); ?></a></h3>
	<div class="artprecedent">
	<h4>Billet précédent :</h4>
	<?php dcPostNextInCat(-1,'<h5><a href="%3$s">%2$s</a></h5><p>%4$s</p>'); ?>
	</div>
	<div class="artsuivant">
	<h4>Billet suivant :</h4>
	<?php dcPostNextInCat(1,'<h5><a href="%3$s">%2$s</a></h5><p>%4$s</p>'); ?>
	</div>
</div>

Pour ma part, j’ai choisi de l’insérer juste avant le <div id= »comments »>.

Attention : ce code est parfaitement adaptable à vos besoins, pour ma part, j’ai privilégié un balisage avancé pour faire un habillage en deux colonnes géré via la feuille de style CSS, au besoin, n’hésitez pas à demander si vous avez des problèmes de mise en forme.

L’habillage CSS correspondant sur l’AJblog est le suivant :

#avantapres {background:#F5F5F5;padding:10px;}
#avantapres h3 {color:#5D5D5D;padding:0 0 5px 0;margin:0 0 5px 0;border-bottom:1px solid #A4A4A4;}
.artsuivant, .artprecedent {width:230px;text-align:justify;font-size:0.9em;}
.artsuivant {float:right;}
.artprecedent {float:left;}

A vous de le personnaliser en fonction de vos besoins.

Pour le rendu, c’est simple, c’est juste en dessous de cet article.

Ps : pour les coins arrondis, je triche, j’utilise jQuery.

Edit : si vous utilisez des urls personnalisées ne correspondant pas forcément au titre du billet, vous trouverez la solution sur ce billet : Solution au problème des URLs dans la fonction Billet suivant/précédent de Dotclear

Relooking extrême du blog

Si vous n’avez rien vu, voici ce qui a été modifié :

  • Les titres des billets : passés en Police de caractères Georgia et en tout majuscules, ils me plaisent plus comme ça et je les trouve plus clairement identifiables.
  • Le formulaire de commentaires : exit les fonds striés estampillés web2.0 que je n’ai jamais aimé pour un formulaire plus sobre et que je pense plus lisible.
  • Les rétroliens : ils passent tout en bas de la page d’articles, de façon à mieux mettre en avant les commentaires que je trouve personnellement plus importants.
  • Les citations : ça, ça fait déjà quelques temps que je les ai modifiées, maintenant je les trouve visibles et à mon goût.
  • Le corps des articles : Ca va faire plaisir à Florent.V, j’ai uniformisé les marges des titres et des paragraphes pour éviter l’effet d’escalier.
  • Le pied de page : Retouche des listes de billets, travail sur le nuage de tags pour le rendre plus exploitable (et il y a encore du travail).
  • Formulaires multiples et divers (contact, envoyer à un ami…) : début d’uniformisation avec le formulaire de commentaires.
  • Les liens : retrait de la couleur bleu, vieux reliquat d’un ancien thème, le temps de trouver une solution qui me convienne.
  • Flux RSS : Ajout par défaut de la catégorie dans le titre du billet ainsi que quelques informations complémentaires, mais je vais revenir dessus dans un futur billet.

C’est tout pour le moment, mais c’est déjà pas mal.

Donc, comme toujours, si vous avez des critiques, des conseils, etc. Quand on est le nez dans un design, on ne se rend pas toujours compte des détails gênants ou améliorations possibles qui peuvent servir à l’utilisateur final.

Une landing page dotclear 1 pour vos visiteurs google

Voici le premier billet sur la série SEO pour dotclear. Nous parlerons de landing page. Les quelques lignes de code que je vais vous fournir proviennent d’une recherche personnelle sur ce blog, et adaptée depuis peu sur le blog d’emob. Nicolas à d’ailleurs rédigé un article plus que complet sur les landing page, pour ceux qui souhaiteraient en savoir un peu plus ! Pour les quelques lecteurs que nous aurions en commun, les fameuses sources sont donc dans la suite, avec quelques explications.
Wilfried (adaero) : SEO dotclear // landing page – Adaero.fr

Une landing page, pour quoi faire ?

En résumé, une landing page vous permet de fournir à vos visiteurs un contenu personnalisé en fonction de leur origine (lien dans un autre site, requête dans un moteur de recherche, etc…). Ca vous donne donc les moyens d’accueillir votre visiteur d’une façon un peu personnalisée tout en mettant en avant certaines fonctionnalités et certains contenus clés du site/blog.

Et il est bien ce script de landing page Dotclear ?

Il existe un plugin spécifique pour WordPress, mais je n’avais encore rien trouvé pour Dotclear, c’est maintenant chose faite avec le script de Wilfried du blog adaero, qu’il en soit 1000 fois remercié.

Quelques petits bugs dans les résultats, mais rien de bien méchant, et comme je le dis en commentaire sur son blog, si ça fonctionne sur la majorité des requêtes, c’est un plus indéniable, donc, à prendre.

Attention : le script demande de toucher à un fichier du moteur Dotclear en lui même et à votre base de données, donc suivez vraiment à la lettre les indications données et ne le faites que si vous êtes à l’aise avec ces opérations.