Appel à compétences

Pour des raisons multiples et diverses, mon activité est amenée à changer dans les semaines et mois à venir.

C’est pourquoi, j’ai besoin actuellement d’élargir et de renouveler mon réseau de compétences.

Donc pour résumer, si vous êtes freelance (ou petite agence) dans le domaine du web vous m’intéressez.

J’ai besoin de tout type de profil, que vous soyez ultra spécialisé ou au contraire avec des compétences pluridisciplinaires, dans les domaines suivants :

Graphisme / Webdesign

Intégration / Developpement

Référencement / Netlinking

Je recherche, bien sur, des personnes motivées, ayant à cœur de réaliser un travail de qualité et qui sachent communiquer avec leurs clients.

Donc, si vous voulez étendre votre réseau de prescription, contactez-moi soit via le formulaire de contact du blog soit par email (ajacquet [at] ajcrea.com) en me précisant :

  • Vos compétences en précisant si possible votre niveau d’expertise
  • Les CMS que vous connaissez sur le bout des ongles
  • Des références visibles (oui je sais plus simple pour des profils graphiques, mais je sais aussi reconnaitre une bonne intégration et une structure de code bien pensée).
  • Votre coût horaire ou journalier

Vous pouvez également diffuser cette demande autour de vous, je suis preneur d’un maximum de profils.

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 :

A tester : Midgard CMS

Midgard utilizes PHP as the web scripting language and provides integration interfaces on Java and C layers. Midgard’s unique architecture enables it to provide services like single sign-on and replication. With these capabilities and the integrated full-text search system, Midgard is an excellent match for information-rich web sites and intranets.

Midgard CMS: Midgard Project: Midgard – New user experience

J’avais commencé à m’intéresser au projet suite à une formation, ça semble avoir pas mal avancé. Leur Framework dédié paraissait pas mal foutu.

Mise à jour Importante de Dotclear : 1.2.7

Pep (callmepep.org) sur le blog de Dotclear nous prévient de cette mise à jour :

En réponse aux récentes failles de sécurité, voici venue Dotclear 1.2.7. Comme les corrections ont demandé d’assez importantes modifications, il s’agit là d’une version dépassant la simple maintenance release . Ainsi, l’interface d’administration subit un léger (et discret) lifting, certaines possibilités de traitement par lot sur les billets et les commentaires font leur apparition, certaines méthodes du core ont vu leur comportement enrichi et quelques bugs mineurs ont été corrigés pour l’occasion. Notez également que jQuery complète désormais la panoplie Javascript disponible du côté de l’administration.

Vous en saurez plus en allant voir son billet sur le blog dotclear : Dotclear 1.2.7

Bon, on va retrousser ses manches et installer la nouvelle version, attendez vous à des gros plantages sur le Blog (oui je sais j’ai touché au moteur Dotclear et c’est mal).

Merci à Kozlika pour l’info.

15h45 : allez je me lance, à tout à l’heure.

Bon.. Jusqu’ici tout va bien.

Ahahhh.. bon je suis allé trop vite. commentaires et trackbacks bloqués le temps de la mise à jour.

aarglllll plus de 250 spams sont passés pendant la mise à jour entre le moment ou j’ai fait les premières manipulations et le moment ou j’ai bloqué commentaires et trackbacks. quelle plaie.

On ne peut pas tout gérer avec un CMS

Les lecteurs habitués du blog savent que je m’intéresse de près aux CMS et plus particulièrement aux CMS légers vu que ma cible client est essentiellement constituée de TPE et PME qui, à moins de projets très spécifiques, ont des besoins simples en terme de gestion de contenu.

Il y a quelques jours, je reçois un appel d’un contact professionnel pour des estimations sur différents types de projets simples.

La personne me demande également d’aller voir un site particulier et me demande d’essayer de chiffrer un projet de ce type et de voir si il est réalisable avec un CMS ou demande un développement plus personnel.

Il s’agit d’un gros site de contenu, graphiquement très propre, avec des articles réguliers, tous habillés graphiquement, des sondages personnalisés, chaque contenu nouveau ou ancien a son habillage propre, des titres graphiques, des montages photo, du beau boulot.

En étudiant de près le fonctionnement du site, je me rends compte qu’il pourrait très bien tourner sur un simple WordPress, techniquement, rien d’extraordinaire.

Toute la valeur ajoutée du site, c’est qu’il y a quelqu’un derrière (en plus des rédacteurs), quelqu’un dont le travail est de faire vivre le site graphiquement, de mettre en page les articles pour les rendre le plus attractif possible, d’habiller et de mettre en avant tout contenu important, de gérer l’interface entre le site et ses lecteurs, un webmaster en clair (webmaster editorial serait peut-être plus approprié).

Sans cette personne, le contenu pourrait être facilement géré par les différents contributeurs/rédacteurs, mais il n’aurait pas cette valeur ajoutée qu’apporte ce webmaster, ce qui fait l’esprit graphique du site.

Ceci dit, il n’est pas donné à toute société de pouvoir se payer un webmaster à temps plein sauf si bien sûr le site EST la société, mais je crois qu’il serait bénéfique pour de nombreuses sociétés d’associer des contrats de webmastering à la hauteur de leurs besoins pour faire vivre leurs sites.

C’est un service difficile à vendre particulièrement parce qu’avec des solutions de gestion de contenu, nous vendons aussi à nos clients une autonomie par rapport à leur prestataire qu’ils n’ont pas eue pendant de nombreuses années (faire changer une ligne de texte, un tarif, une adresse, créait souvent une relation conflictuelle) mais je crois que c’est un service qu’il ne faut pas négliger dans nos offres commerciales, en fonction du client et du projet.

Pensez-y.

PS : si je ne donne pas le nom du site, c’est que j’ai un devoir de réserve sur les projets de mes clients.

Quel anti-spam pour votre blog dotclear?

Une bonne question n’est-il pas?

Plus sérieusement, je me demande quel plug-in pour lutter contre le spam est le plus efficace parmi ceux proposés dans la longue liste pour Dotclear?

Lequel utilisez-vous? Avez-vous créé des ruses personnelles pour lutter contre ce fléau?

Parce qu’il faut bien le dire, il y a toujours des spams qui arrivent à passer, et franchement ça finit par me fatiguer, ça me prend pas mal de temps à gérer et à la longue une certaine lassitude s’installe.

Personnellement j’utilise Spamplemousse. Et vous?

Petit billet au passage sur WordPress

Les deux ou trois habitués qui passent sur l’AJblog savent combien j’aime Dotclear, le CMS orienté blog.

Il y’a quelques semaines de ça, j’ai craqué, j’ai installé un Wordpres.

Depuis je n’ai pas eu le temps de réellement tester ce qu’il a dans le ventre pour en faire une analyse, mais je travaille actuellement sur un site qui sera architecturé sur un moteur WordPress.

Je dois bien avouer que une fois passée la première impression « d’auto promo » du soft dans le back office, on ne peut qu’être charmé par la facilité de personnalisation.

J’en parlerai plus longuement, soit dans l’analyse de WordPress, soit dans létude de cas du site sur lequel je travaille.

En attendant, si vous n’avez pas encore testé WordPress, allez y sans aucun scrupule, ça vaut le coup.

Joomla! 1.5, un meilleur contrôle sur le rendu HTML

Il semble, d’après les informations que l’on peut trouver sur le forum Francophone, que Joomla! 1.5 devrait permettre de prendre complètement la main sur le rendu des pages HTML.

En clair, on pourra faire du Joomla! propre, valide, sans tableaux et avec un réel balisage « sémantique ».

Petit résumé tiré de l’article sur le forum Joomla! :

Le problème avec le développement d’une solution accessible est que le rendu à générer dépendra de la demande du client, des buts et des utilisateurs du site etc.. et qu’il n’y a donc pas de solution universelle. Il a donc été décidé, plutôt que d’essayer de tout intégrer dans le Core (fichiers du CMS), d’adopter une stratégie plus ouverte, donnant toute liberté aux designers de proposer pour chaque site la solution la mieux adaptée. Vous allez donc trouver dans le framework:

1 – tout le rendu HTML a été déplacé dans des templates extension. Ces templates peuvent être remplacés en incluant une version alternative dans le répertoire ad hoc du template utilisé par le site, le designer pourra donc complètement adapter le rendu à ses souhaits (ou ceux du client). Il peut modifier les classes CSS, supprimer les tableaux, rendre le template compatible avec les standards d’accessibilité etc?

2 – le designer peut definir ses propres wrappers de module dans le template du site. Dans 1.0 il n’y avait que 3 options codées en dur, avec 1.5 le designer peut definir ses propres options.
3 – le module menu dans 1.5 est maintenant rendu sous forme de liste non ordonnée par défaut, les anciens types de menu ne restent supporté que pour la retro-compatibilité.

4 – le rendu de pagination (Début Précédent 1,2,3,… Suivant, Fin) peut être remplacé dans le template du site par le designer.

5 – tout le système SEF a été revu. Le support dans le Core a été amélioré pour devenir facilement extensible par un plugin, sans aucune modification de fichier.

Conclusion de tout ceci?
Avec 1.5, un designer peut changer chaque petit bout de HTML généré, tandis que le rendu standard reste le même que pour 1.0 afin de conserver la compatibilité avec les templates existants. Ce qui permet la création de sites accessibles, respectant les standards, sans tableaux, tout-ce-que-le-designer-pense-être-important…

Comme je l’avais dit dans mon analyse de Joomla!, ce produit deviendra vraiment adulte quand il génerera un code valide et propre et quand l’interface d’administration deviendra réellement intuitive, j’espère sincèrement que l’on en prend le chemin.

Rèste à voir quel sera le suivi au niveau des extentions pour les rendre compatibles avec le nouveau mode de construction graphique, affaire à suivre donc.

Boutique Oscommerce : OYOYO.fr, votre boutique BD et jeux

AJcréa et Fairweb sont fiers de vous annoncer le lancement officiel de la boutique Oscommerce OYOYO.

Vous y trouverez de tout, des bandes dessinées, des Jeux de cartes à collectionner (et cartes à l’unité), des Jeux avec figurines, des figurines de décoration, des mangas…

Tellement de choses en fait qu’au final nous sommes loin de la demande initiale, « Une petite boutique », mais je vous raconterai tout ça lors de l’analyse du projet que, hélas, je n’ai pas le temps de faire aujourd’hui.

Dès que je peux, je vous prépare une analyse complète comme celles de l’élevage du Gesvres ou de Site Web PME.

L’adresse du site : http://www.oyoyo.fr

Cordialement,
Aymeric Jacquet

Thème Dotclear de l’AJblog à télécharger

Suite à cette proposition faite à erix, un de mes lecteurs, je place donc le template du blog en téléchargement pour ceux que ça pourrait intéresser.

A cette adresse :
http://www.ajcrea.com/ajblog.rar

Quelques précisions tout de même :

Il s’agit d’une archive contenant tous les fichiers du template AJblog et non un template auto-installable
Les fichiers php ou html son codés en UTF8 (sans BOM) si votre blog est en ISO, pensez à changer ça dans votre éditeur de texte préféré.
Je n’ai pas nettoyé mes fichiers php des appels à des plugins, il y’en a peu, mais pensez-y tout de même.

C’est tout pour le moment.

Tout ce que je demande, comme toujours, c’est de ne pas oublier de citer l’auteur du thème, c’est à dire moi même, si vous le réutilisez, et ne pas réutiliser le Logo.

Dernier point, ce template a été pensé pour mon blog, en fonction de son contenu, donc pour l’adapter au votre, il faudra surement faire quelques petits réajustements au niveau du CSS (qui au passage n’est pas à 100% optimisé).

Si vous avez des questions ou des soucis, postez un commentaire, je me ferais un plaisir d’y répondre.

Cordialement,
Aymeric Jacquet