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.

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.

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

De nouveaux exercices sur l’AJblog

J’ai reçu par mail, il y a quelques temps déjà, un message d’un lecteur me demandant pourquoi il n’y avait plus d’exercices depuis longtemps.

La raison en est simple : le manque de temps.

Ecrire un billet d’information ou de réflexion prend du temps, mais moins, beaucoup moins que la création d’un exercice complet.

Il faut l’idée de base, le sujet de l’exercice, définir son degré de difficulté, trouver les bonnes sources, le réaliser moi-même, chercher différentes pistes de réalisation en fonction du cahier des charges, le rédiger, regarder et analyser les propositions de réponse des uns et des autres ET rédiger sa propre réponse expliquée et argumentée.

Le plus dur étant de trouver un sujet dont la réponse ne se trouve pas en 30 secondes via une recherche Google, le but de ces exercices étant en général l’expérimentation et l’application concrète de connaissances de base.

Tout ça pour dire qu’à l’heure du Web 2.X et du User Generated Content (que c’est beau) je vous propose de participer à la création de ces exercices.

Je ne vous demande pas forcément de me pondre des exercices complets (quoique si vous vous en sentez le courage), mais de me proposer par mail des sujets propices à l’expérimentation.

Ces sujets peuvent venir de différentes sources :

  • Un problème auquel vous avez été confronté
  • Un exemple que vous avez vu sur un site en production
  • Toute autre source possible

En contrepartie, je promets d’essayer de créer un exercice autour de ce sujet ou au pire d’essayer de décrypter et d’expliquer les techniques utilisées pour arriver au résultat final que vous aurez pu voir.

Donc, si vous vous sentez l’âme partageuse, n’hésitez pas, mon email se trouve toujours à la même place, en haut à droite de la page que vous êtes en train de lire.

Quelques nouvelles du programme de formation (X)HTML/CSS

Un peu d’information ne fait pas de mal, surtout pour vous dire que je n’ai pas abandonné le projet, juste pris beaucoup de retard…

Je comptais dans un premier temps m’en occuper cet été, étant donné que c’est en général une période assez creuse pour le secteur de la création Web.

Sauf que contre toute attente, l’été a été plutôt mouvementé et il semble que ce soit général d’après les retours que j’ai eu d’autre professionnels.

Donc, pour revenir au sujet, le projet avance un peu tout de même, j’ai quasi finalisé le plan de formation, ce qui, hélas, n’est que la partie visible de l’iceberg.

Dés que ce plan me convient dans son ensemble, je le posterai sur le blog pour que l’on puisse échanger nos points de vue et voir les améliorations à y apporter.

Je pense que le dossier final sera édité sous forme de livre blanc à télécharger ou bien sur seront citées toutes les personnes ayant participé au projet.

Je pense pouvoir proposer un plan assez complet mi ou fin Septembre, pour le reste, à mon avis ce ne sera pas avant Octobre/Novembre étant donné mon agenda un peu surchargé.

Désolé pour le retard.

Etude de cas : Habillage du Blog Typepad Espace Innovation

Le projet

Le blog du GIe Espace innovation est un projet initié par les trois sociétés RC&A, Factorielles et Avensi Consulting.

Le but du projet est de créer une tribune d’expression pour le GIE avec une forte importance donnée à la participation et réactions des visiteurs/lecteurs.

Cahier des charges :

Nous fixons un rendez-vous physique pour parler du projet, dégager les pistes de travail initiales tant d’un point de vue technique que graphique.

Créer un habillage personnalisé pour le blog du GIE Espace Innovation hébergé sous plateforme Typepad.

Rechercher et intégrer tout élément complémentaire nécessaire au bon fonctionnement du blog.

La cible client du blog : cabinet comptables, experts comptables qui sont le coeur de cible des 3 sociétés fondatrices du GIE.

Les textes seront rédigés par le client, ils sont déjà en partie réalisés et seront finalisés lors de la phase de production.

Il y aura certaines pages considérées comme statiques : A propos, Actualités générales, Contact.

La présentation générale de l’information devra tourner autour de ce schéma :

  • Bandeau du haut : Logo EI + slogan Puis à droite, logos des partenaires
  • Onglets : Accueil, A propos, Actualités, Contact
  • Article (2/3 de la page) : Date de l?article – Titre de l?article – Auteur – Version imprimable – Faire suivre cet article – Lire la suite?
  • Bandeau de droite : Rechercher – S?inscrire à la newsletter – Syndication – Les commentaires récents – Les notes récentes – Archives – Catégories – Liens utiles (avec logo)
  • Bandeau bas de page : Différentes mentions – Haut de page – Accueil

Quelques aménagements ont été réalisés par la suite pour cause de limitations de possibilités de personnalisations « dynamiques » de l’architecture des blogs typepad hébergés. Ces aménagements simplifiaient le travail à effectuer et évitaient d’avoir à décomposer l’ensemble des modules/boucles intégrés dans les pages de template typepad.

En nous basant sur différents types de design existants et sur l’étude de la cible client, nous déterminons l’esprit graphique qui devra être donné au blog : Clair, lisible, efficace, professionnel, « classe ».

Comme il s’agit d’un projet suivi et piloté par plusieurs personnes géographiquement éloignées, un espace de collaboration et d’information est créé en ligne pour que chacun puisse suivre les évolutions du dossier au fur et à mesure de son avancement. Cet espace est secondé par la mise en place d’une « mailing list » classique couplée à un abonnement par mail au flux RSS de l’espace de collaboration : Tous les participants au projet sont prévenus par mail dss publication d’un nouveau contenu.

Passons à la production.

Le logo

Le logo est déjà existant, il servira donc de base à la construction chromatique de l’ensemble du graphisme : bleu, vert, orange et bien sûr, du gris.

Logo du GIE Espace Innovation

L’interface graphique du site

Le layout général

Suite à différentes discussions le contenu général a été un peu repensé et l’architecture a été revue pour l’usage à court terme du blog et la prise en compte de son évolution future.

Voici la première pré-maquette proposée :

première maquette graphique du projet Espace Innovation

Oui, je pousse toujours mes pré-maquettes assez loin, souvent proches du rendu final d’ailleurs et ce d’autant plus que la piste de travail est claire.

Après confrontation de la maquette avec les clients, plusieurs modifications sont effectuées :

  • La couleur Orange est trop dominante, étant donné que c’est un peu la couleur « affiliée » au RSS, il est hors de question de changer la couleur de ce pavé. De plus le titre orange, doit le rester, pour ne pas déséquilibrer l’ordre des couleurs et le balisage de lecture créé par les blocs verts (date et bloc de colonne de droite en diagonale). Nous allons donc opter pour un remplacement des couleurs des onglets vers du gris, ce qu’il y a de plus neutre.
  • Les logos en haut à droite ne sont pas assez mis en avant, il va donc falloir modifier cette partie pour donner à chaque logo d’entreprise la visibilité qu’il mérite. Décision est prise d’essayer d’en faire une animation ou les logos seront affichés les uns après les autres.
  • Pour la colonne de droite, l’ensemble est validé (en attendant l’ajout de logos liés aux derniers liens du bas) sauf le bleu utilisé qui est trop aérien, trop léger, nous allons essayer de lui trouver une teinte plus soutenue.

Ce qui nous donne la version suivante (sans les logos qui se retrouvent maintenant à part) :

deuxieme maquette graphique du projet Espace Innovation

Qui vous semble forcément très proche, mais les petits détails de modification sont très importants avec par exemple, l’ajout d’un deuxieme article dans la maquette pour que le client se rende bien compte du rendu final potentiel des articles « en résumé » et du rapport de force entre les gris typographiques et les blocs d’information de la colonne de droite.

Le bleu des blocs n’est pas encore assez soutenu, je vais donc aller directement au bleu le plus foncé que l’on retrouve dans le logo. Les liens de bas de page vont être remontés dans le bloc blanc d’information principale pour leur donner une meilleure lisibilité.

Le rendu final

Le plus simple est d’aller voir directement le site en ligne à cette adresse : http://www.espace-innovation.fr/

Vous y trouverez quelques variations mineures par rapport à la maquette pour une simple raison, je n’ai pas la main totale sur la structuration html car nous sommes dans le cas d’un produit « tout-en-un » hébergé.

En fait, il est possible de pousser encore plus loin la personnalisation graphique d’un blog typepad, mais le ratio temps passé/utilité n’est pas intéressant, d’autant plus que c’est prendre le risque que vos modifications ne survivent pas à une mise à jour du moteur typepad.

Technologie employée

C’est un blog typepad, tout simplement. Comme vous pouvez le voir, il est fort possible de totalement personnaliser un blog typepad.

Les besoins en terme de graphisme ont obligé une restructuration avancée du rendu html du blog, mais il est fort possible d’arriver à des designs évolués en gardant la structure par défaut, il faut dans ce cas s’adapter, ce qui n’est pas toujours simple.

Si je devais avoir un reproche à faire à typepad, c’est l’impossibilité de créer un template sur mesure de la partie de gestion des commentaires, de fait j’ai été obligé de m’appuyer sur la structure typepad pour leur donner un habillage en adéquation avec celui du blog :

habillage partie commentaires typepad

Pensez-y si on vous commande un habillage de blog typepad, car si vous repartez d’une feuille de style vierge appliquée à une structure html que vous aurez créée sur mesure, cette partie ne sera plus habillée du tout, ce qui fait désordre.

Cerise sur le gateau

Le GIE a mis en place un mailing pour communiquer sur son blog et son actualité, c’est donc tout naturellement que nous avons créé une matrice html dont la charte graphique est proche de celle du blog :

matrice de mail html pour le GIE

Avec la prise en compte de la possibilité des clients mails à ne pas afficher les images ou à les bloquer :

matrice de mail html pour le GIE sans images

Ce qui fait que le mail reste lisible, ce qui n’est pas le cas de nombreux mails de prospection que je reçois chaque jour.

Pour finir

Un travail très intéressant, des clients avec un projet pensé et travaillé mais ouverts aux conseils d’un professionnel du secteur, ce qui est très appréciable.

La maquette initiale a presque coulé de source, le travail en amont ayant été bien réalisé et les discussions sur les besoins et envies bien cadrées. Il n’y a pas de secrets, si vous savez écouter votre client, décrypter les non-dits et que votre client est en pleine confiance, tout se passe pour le mieux dans le meilleur des mondes.

Le fait de travailler sur une plateforme sur laquelle les possibilités de personnalisation du code sont quand même limitées est également très enrichissant, même si j’avais déjà eu affaire à typepad, entre autres pour le site de Ze Village.

En tous cas, bonne journée à vous, et travaillez bien.

Garder un code valide, un combat de tous les instants

En vérifiant les statistiques de fréquentation du blog ce matin (oui, je sais, nombril tout ça…), je me rends compte qu’un visiteur a passé une de mes pages au « validateur » HTML du W3C.

Je me dis, tiens, ça fait effectivement longtemps que je n’ai pas passé mon blog à la moulinette et je m’empresse de vérifier tout ça… erreur… des tonnes d’erreurs en fait.

Et la faute est mienne, totalement, j’ai baissé la garde, je n’ai pas vérifié le code des nombreux « trucs » orientés promo que j’ai inséré ces derniers temps. Je pourrais dire, c’est leur faute, ils n’ont qu’à me donner des codes valides, mais au final, qui fait le choix d’icnlure telle ou telle chose, de coller tel ou tel code, si ce n’est moi.

Certaines erreurs étaient évitables (des codes en HTML4 alors que le blog est en xhtml), d’autres plus difficiles à détecter (attention ce qui suit n’intéressera que des « puristes »):

L’AJblog utilise un jeu de caractères UTF-8. Pour des raisons que je ne développerai pas ici (allez plutôt voir du côté d’Openweb lire cet article : Introduction aux jeux de caractères), tous les fichiers constituant la partie visible et lisible du blog sont encodés sans BOM (Byte Order Mark). Je parle bien ici des fichiers (PHP ou HTML), encodés, « en dur ».

Sauf que souvent, on utilise dans son blog ou dans son CMS des ajouts, des plugins, qui eux ne sont pas forcément encodés de la même manière. Bilan, votre jolie page que vous avez peaufiné aux petits ognons devient invalide suite à un conflit d’encodage de fichiers.

Ce que je veux souligner, c’est qu’il est actuellement extrêmement difficile de garder un site avec un code valide si on ne se créé pas des mécanismes de contrôle à la hauteur de ses besoins. Et encore, il s’agit de mon site, sur lequel j’ai entièrement la main, imaginez un projet avec différents intervenants techniques et de nombreux rédacteurs.

L’enfer est dans les détails.

Article à lire : Rédaction Web – À quoi ressemblent vos liens ?

Florent Verschelde vient de publier sur son site (Covert prestige) un article très intéressant, argumenté et documenté sur le bon usage et le bon formatage des liens hypertextes :

Rédaction Web – À quoi ressemblent vos liens ?

Article dont je vous recommande chaudement la lecture.