Pour ajouter a ma collection de billets de mon Portfolio professionnel j’ai fait en 2008 ce petit site.

J’ai de la difficulté à trouver des mots pour decrire ce projet. Un pamphlet publicitaire est le nom le plus près de ce que je peit utiliser pour decrire.

Contrairement aux autres clients que j’ai eu je n’ai pas rencontré le client directement.

Intégration HTML/CSS

Le but était principalement de refaire la brochure PDF en version web. Il a été fait en deux itérations comme vous pouvez le voir sur les captures d’écran.

Captures d’ecran

Voir le site Jean Emond.ca

Ce micro-site était une manière d’afficher aux citoyens de la Ville de Sherbrooke les ressources disponibles (en 2006) pour participer aux précautions relatives aux matières résiduelles domestiques et commerciales du territoire. Le site actuel est maintenant partie intégrante du portail officiel.

Le travail avait été donné a Tatou communication visuelle de s’occuper du projet et Inexis Solution Web Inc était l’exécutant qui devait intégrer les maquettes graphiques pour les transformer en documents HTML.

A propos du projet

Le but de ce site était de faire une version web du dépliant qui a circulé dans la ville pour faire savoir aux citoyens les mesures rendues disponibles par la ville.

Le site n’a pas duré très longtemps car un an et demi plus tard, environ, la ville a fait sa mise a jour majeure pour la version actuelle et a inclus tout ses micro-sites.

Captures d’écrans

Il s’agit d’un plugin que j’ai fait, en PHP 4 il y a deux ans pour MODx 0.9.6.3, pour un site web et je pense qu’il vaut la peine que je partage le code avec la communauté.

Le plugin sert a entourer des mots définis dans un fichier CSV (séparé par des virgules) dans le contenu qui est retourné par le CMS.

LA SITUATION

Lorsque je travaillait sur ce site web, mon employeur et mon collègue nous étions donné comme objectif de paufiner l’Ergonomie et l’Accessibilité du contenu. Ce qui est dommage c’est qu’il n’a jamais été évalué par AccessibilitéWeb. J’ai pourtant reçu la formation pour évaluer les sites… mais je préfère, personnellement, programmer des applications.

LES CRITÈRES QUE CE PLUGIN REMPLIT

Lors de la réalisation du site je n’ai pas noté les points d’évaluation du WCAG 1.0 que cet utilitaire remplit, mais en gros, d’un point de vue utilisabilité :

• L’édimestre n’a pas a écrire à la main les balises ABBR, DFN, et ACRONYM, le plugin le fait tout seul;
• La liste est dans un fichier statique, ce qui rend facile, pour l’édimestre, d’ajouter de nouvelles définitions;
• Pouvoir automatiser le remplacement des abréviations dans des balises valides;

Cette liste ne parle pas des critères d’évaluations mais si vous voulez en savoir plus au sujet de l’Accessibilité; je vous recommande chaudement de visiter la «Base de conaissances» de la fondation AccessibilitéWeb.org qui a fait un IMMENSE EFFORT de vulgariation et de collaboration a l’élaboration du WCAG 2.0 et de sa version française.

EXEMPLE

Plutôt que d’écrire des paragraphes pour expliquer comment fonctionne le plugin, je vous propose de voir par un exemple

Le document CSV a plusieurs lignes similaires à…

1

fr;dfn;FAQ;Foire Aux Questions

Avec le contenu de la page il remplacera les occurences dans le document HTML généré (même après la cache):

1

(...) venez lire <strong>la FAQ</strong> (...)

En le transformant ainsi…

1

(...) venez lire <strong>la <dfn title="Foire Aux Questions">FAQ</dfn></strong> (...)

Le plugin est configuré pour faire cette transformation pour tout les mots définis dans le CSV au moment du rendu de la page chez le client (trigger MODx “OnWebPagePrerender“) ce qui évite d’avoir des définitions empilés.

UTILISER LE PLUGIN

On ne peut s’attendre à simplement installer le plugin et que tout fonctionne. Voici les prérequis pour pouvoir utiliser le plugin

• Au niveau 0 (enfant de la racine dans MODx) il y ait un répertoire servant à spécifier la langue de ses enfants.
• ContentAbbrGenerator (le plugin en question)
  Un plugin de base qui était fourni avec la version 0.9.6.x qui fournit le numéro ID de la page parent absolu
• Il faut 2 Snippet de code (fonctions PHP spécifique a MODx) pour utiliser mon plugin
  • Lang
    Sert, justement a aller chercher le ID de la page ci-haut mentionnée.
  • UltimateParent
    Un plugin de base qui était fourni avec la version 0.9.6.x qui fournit le numéro ID de la page parent absolu
• abbreviations.txt
  Le fichier CSV qui contient les valeurs pour le remplacement des balises. Le contenu de ce fichier peut être une page dans MODx (si mod_rewrite est activé) mais il doit être définitivement être disponible à l’adresse fournie dans le Snippet ContentAbbrGenerator définie par la variable de plugin “cagPluginAttrOverrideFileLoc“

TÉLÉCHARGER ET INSTALLER

Suivre les instructions dans chaque fichier de l’Archive

SOURCES ET CRÉDITS

J’ai pris soin dans le code de laisser les notes des auteurs qui m’ont inspiré avec les pages qui parlent de ce que j’ai utilisé pour produire le plugin. Je n’ai rien inventé en soi, j’ai simplement produit un plugin pour remplir le besoin que j’avait

NOTE

Vous avez le droit et la liberté d’utiliser le code que je rend disponible pour téléchargement car je n’ai pas mise sous licence. Considérez-le comme un don

A VOS COMMENTAIRES…

J’ai déjà considéré commencer a modifier ce plugin pour le rendre fonctionnel dans WordPress mais j’ai d’autres priorités. Alors, si vous avez un intérêt à ce que je produise un plugin pour WordPress ou MODx (pour la version courrante) laissez moi un commentaire!

Il s’agit d’une de mes dernières réalisation avant un an et demi sans produire de sites web sous la tutelle de Inexis Solution web Inc.

Avec le recul, j’ai réalisé que ce site m’a appris une bonne leçon: Savoir les conditions et les deal-breakers possibles avant de commencer a produire quoi que ce soit!. C’est pour cette raison que j’avait arrêté Inexis Solution web: Je ne pouvait plus travailler seul.

Une histoire pas toujours drôle

Le projet s’est jamais publié parce que j’ai eu un mal-entendu concernant la fin du mandat et que j’avait pas su que son fournisseur de transaction de carte de crédit l’obligeait a utiliser son logiciel de chariot d’achat. D’où la leçon sur les conditions.

Étant donné que j’avait fait 90% du travail et que la relation n’allait pas très bien avec le client j’ai décidé de prendre sur moi et d’arrêter le travail.

Par la suite j’ai travaillé chez Évolubiz car je n’avait plus les moyens de faire vivre Inexis Solution web Inc. J’ai donc décidé à ce moment d’arrêter de travailler directement avec mes clients sans avoir de coéquipiers dans le projet.

Aujourd’hui

Lorsque je l’ai réinstallée, hier. J’ai eu mon sourire en coin en réalisant comment j’avait déjà cerné les outils du web2.0 de 2005.

• Lien Google Map
• Génération de XML dans le format Froogle (Google Product Search de l’époque)
• Carte électronique format VCF (pour les carnets d’adresses)

C’est quand même surprenant que je n’ai pas commencé à ce moment là a étudier le PHP en orienté-objet avec PHP 5 qui était sorti un an avant. Car même si la fin du projet m’a déçu, j’ai définitivement eu beaucoup de plaisir de le programmer.

Le site

J’avait utilisé GéraniumCMS et j’y avait crée pour ce client particulier plusieurs modules, dont:

• Chariot d’achat
• Catalogue des produits
• Génération de XML des pages du catalogue
• Génération de XML pour lister son inventaire
• Zone dernière nouvelle

Le graphisme avait été fait par un certain Jean Légaré, un graphiste que je ne retrouve plus aujourd’hui sur le web.

REMARQUE: Si je me trompe dans le crédit et que tu reconnaît ton travail, fait moi signe, je corrigerai!

Les captures d’écran

Finalement

J’ai eu beaucoup de plaisir a réaliser ce mandat et je suis content d’être sur la voie que je suis. C’est avec des échecs comme celui-là que j’ai appris et qui m’a permis d’évoluer.

Il s’agit d’un site que j’ai fait en 2004 qui provient du graphisme produit par Tatou Communication visuelle. Je n’avait pas dans mon dossier d’archives tout les documents ni de captures d’écran car à l’époque je ne faisait pas attention a ce genre de truc.

J’ai donc passé les deux dernières heures a fouiller et réinstaller le site archivé sur un DVD datant de 2005 pour revoir ce dont avait d’lair le site. Dans la Gallerie d’images plus bas.

A chaque fois que je fouille dans mes archives je tombe sur des surprises. Des vieux dossiers ou j’avait des backup de base de donnée MySQL et de «home directories» de serveur. J’était pas très organisé coté archives… mais au moins j’ai pu trouver!

Mon implication

Si on ne considère pas la direction artistique, le graphisme, et la gestion avec le client. J’ai tout fait le reste. Sur ce site j’avait même intégré un engin de recherche ht://dig.

Je n’ai pas pris de capture du résultat de recherche car je n’avait pas archivé tout de l’engin et le site brisait lorsque je faisait une recherche.

Voici quelques fonctions que j’ai intégré

• GéraniumCMS v2.5
  Maintenant c’est une version extraite en html statique qui est en ligne alors il est impossible de voir toute trace de son usage.
• Intégragion de Htdig et de la librairie HtSearch
  Cette fonction qui Indexait les pages et on pouvait y chercher à l’intérieur du site sans utiliser un engin de recherche externe.
• Intégragion html et Javascript des fonctions comme un Scroll Javascript.
  Le concept original laissait une hauteur de document fixe.

Gallerie d’images

Dans la lignée de vouloir apporter a mon blogue l’accumulation de mes réalisations j’ai pensé vous montrer mon travail avec le Musé des Beaux Arts de Sherbrooke. J’ai fait ce site en 2005. Encore ici je n’ai pas conservé de rapport sur la durée du travail que j’ai investi dans ce mandat car à l’époque je ne faisait pas de suivi là dessus.

Mon implication

Comme pour la majorité des mandats que j’ai réalisé avec Tatou Communication visuelle elles me fournissaient les planches Photoshop (PSD) et je m’occupait de m’assurer que le HTML soit identique.

Ce site est l’un de mes premiers que j’ai utilisé avec le «branding» GéraniumCMS. Car avant je n’avait pas de nom en tant que tel et la suite de fonctions de base a été développée pour ce client et le projet Sherbrooke Ville étudiante (NOTE: post a venir).

Gallerie de captures

Page fabriquez votre remise

Parmi les sites que j’ai fait dans les dernières années. Celui de Remises Réal Lamontagne était parmi les plus agréables a travailler. L’équipe de IMACOM (sherbrooke) avait fait un très beau travail. Chacun avait sa tâche de fait et mon travail consistait qu’a intégrer en html valide le code.

C’est aussi l’un des derniers sites que j’ai fait en utilisant Macromedia Dreamweaver.

voir sur Flickr

Page servant a localiser les magasins

Personellement j’avait toujours utilisé soit les tag “Include” des SSI de Apache ou mon propre CMS (GeraniumCMS, note: j’en parlerai plus tard) pour faire les routines de modifications HTML répétitives.

voir sur Flickr

Page d'Accueil

Ce qui a été fait:

• Integration HTML4, les specifications valides du moment
• Production de d’environ deux temates complets et intègres a l’outil de Macromedia Dreamweaver
• Decoupage a partir de Adobe Photoshop et optimisation des coupures avec Image Ready
• Consultation sur le “plan de match” du mandat pour ce qui concerne les specifiteés des standards du web a l’époque

Voir la suite de mon Portfolio.

Voir la consommation modem

Contexte

J’ai travaillé là pendant un an entre Octobre (environ) 2005 et Novembre 2006. Mon emploi était dit comme étant programmeur d’applications pour améliorer les processus de travail de l’entreprise du point de vue support technique pour les départements de services Internet et télé numérique.

J’ai donc travaillé sur les bases de données accès en Microsoft Access puis ensuite j’ai fait un travail d’intégration sur le site corporatif (ce 30 octobre 2009, c’est encore mon travail qui est aparent pour une bonne partie).

Cette page est celle du premier niveau après avoir été dans la région ciblée (Estrie, Beauce, Mégantic, etc).

Mon travail

Mon travail sur ce projet consistait a Intégrer le contenu en HTML et de pouvoir le modifier aux besoins via la base de donnée.

J’avait déjà développé Géranium CMS a ce moment là et j’ai appliqué plusieurs bouts de code et de fonctions pour ce projet.

Bref. Le graphisme et le marketing est géré par une firme de communication que je respecte beaucoup: Arsenal Média. Mon travail consistait a suivre les demandes de la direction artistique et au final: Voir a ce que le contenant paraîsse exactement comment les graphistes l’on conçu.

Quelques trucs qui ont été faits:

• Intégration html, css, javascript
• Découpage des maquettes Photoshop
• Mise en page html du contenu
• Engin d’affichage du contenu dans un CMS fait maison (que j’ai re-fait, à l’époque)
• Engin programmé en PHP qui va chercher les rapports de consommation par Modem du client (au moment ou je travaillait là, j’ai fait un prototype)
• Moteur de rendu basé sur les templates que j’ai découpé et intégré
• Javascript pour les effets spéciaux (qu’on surnomme a tord AJAX car rien n’est XML dans ce site.)
• Règles de redirection Apache 2 pour le serveur web

Voici d’autres prises de vues:

• Page intérieure 1er niveau
• Page intérieure 2e niveau

Voir la suite de mon Portfolio

Prise de vue site Écurie Royale.

Il s’agit d’un site que j’ai fait en 2004 avec l’une des premières moutures de GéraniumCMS dans le temps que je le surnommait Inexis SiS. Système d’Intégration Standard… bref mon propre «framework».

Je n’ai pas beaucoup d’informations sur la durée de la programmation mais le site, encore aujourd’hui (je ne sais pas pour encore combien de temps) toujours en ligne.

D’autres captures

• Screenshot un
• Screenshot deux

Voir la suite de mon Portfolio

Voici la suite de ma revue du livre que j’ai lu récemment qui traîte de l’Utilisabilité. Le livre s’appelait: Don’t make me think. A Common Sense Approach to Web Usability, voici un troisième fait qu’il est bien de considérer.

Attention à l’anglicisme;
Fact of life #3 > We don’t figure out how things work. We muddle through.

En français: “Nous n’essayons pas de comprendre comment les choses fonctionnent avant de les utiliser. Nous fouillons par essais et erreurs”

ça résume encore très bien comment nous pensons. Quand est-ce que nous lisons le manuel lorsqu’on déballe notre nouveau gadget? Quand nos essais ne donne pas le résultat attendu. Puis on le fait souvent a contre-cœur. On veut que “Ça marche, tout de suite!”

Avec la technologie, bien des gens n’ont même pas envie de comprendre comment le “truc” fonctionne.

Personnellement j’ai un point de vue biaisé avec la techno car elle m’intéresse. Dans ces situations je m’imagine dans mon cas comment j’ai essayé de comprendre la fiscalité et les déductions a la source et les paperasseries de gestion lorsque j’était incorporé et que je devait remplir ces formulaires. C’est pas évident!

Notre but quand on fait une application/site-web est donc: “de faciliter la tâche au maximum”

Comment faire?

Il s’agit de quelques trucs simples tels que;

• Les liens et boutons doivent rester évidents
• Un bouton implique une modification
• Un lien un statut-quo (dans le cas d’un formulaire)
• Utiliser des noms courts et évidents
• Le contenu important devrait être évident.
• Avoir une hiérarchie évidente des pages
• Une page doit avoir un nom
• Une page doit donner un indice sur “où je suis” dans le “grand shéma” des choses.
• Éviter les mots inutiles et le “happy talk” il n’avance a rien de concret.
• Les introductions sont inutiles
• Schéma de navigation consistant
• Menu en version texte au bas
• Quelles sont mes options a ce niveau
• Éviter le “bruit visuel” au maximum

Aussi sur le sujet

Il y a quelques posts que j’ai fait dans le temps

• Fait d’usabilité no2, Nous ne faisons pas de choix optimaux. Nous choisisons le premier choix cohérent
• Revue de don’t make me think