Geek by *recycledwax on deviantART

Je l’avait annoncé. Nous avons particié a des événements, joints d’autres. Maintenant, depuis Janvier 2011, à tous les mercredis, nous vous invitons a vous joindre a nos rencontres. Donc,depuis cinq semaines maintenant nous hébergeons au public nos ateliers de travail qu’on appelait nos GeekNights maintenant surnommé devLAB.

Comment devLAB a commencé?

Tout a commencé en 2006. Le besoin est né après plusieurs mois à discuter de technologie a deux (avec Etienne) a prendre une bière au 3Brasseurs et de parler de binaire, netmask… vous savez, des trucs de Geeks. Nous avons joins notre  vieil ami Stephan et nous avons officialisé le pacte que nous avons tenu de 2006-2009. Une fois par semaine tous les Mercredis soir nous suivions ce concept:

1. Se rencontrer peu importe la charge de travail au bureau
2. Faire avancer une idée
3. Utiliser quelque chose qu’on a jamais utilisé avant
4. Pratiquer les méthodologies pour prendre les plis qu’on ne pouvait pas toujours prendre au bureau

Parfois nous en faisions des CodeFests qui duraient une fin de semaine complète. D’autres fois nous invitions des amis a jouer avec nous sur des sujets divers.

Quelques sujets que nous avons couverts

Nous discutions d’a peu près tout ce qui nous tentait. Parfois nous étions inspirés par ce que nous faisions au bureau, d’autres fois, des amis venaient nous montrer leus trucs qui les “faisaient tripper”  (!)

Entre autres…

1. Le Test Driven Development avec Visual Studio
2. Environnement généré en Javascript avec ExtJS
3. Des processus d’auto installation avec CentOS 5 (Kick start)
4. Monter un serveur SMTP avec Debian Etch et Exim connecté avec un backend MySQL
5. Faire des routines de déploiement en XML avec Apache Ant
6. Monter une librairie de migration de base de donnée d’un serveur a l’autre
7. Monter un “Une VM Linux qui sert au développement” et utiliser un tunnel X pour afficher localement ce qui est exécuté dans la VM
8. Monter une sandbox…  sous Mac OS X
9. Un projet de gestion de parc informatique
10. Un projet de gestion de menu utilisant le “Fichier canadien sur les éléments nutrritifs“
11. … et plusieurs autres.

Pourquoi avons nous lancé un autre événement a Montréal

Étant donné qu’aucun événement a Montréal n’avait ce type de concept, nous l’avons ouverts au public. Surtout que les gens autour de nous aimaient  l’idée de nos rencontres.

Notre objectif est clair:

devLAB est  une occasion de partager avec d’autres passsionnés en faisant des rencontres hebdomadaires de travail ou on “met la main à la pâte”.

Parceque ce qu’on veut depuis toujours c’est un endroit ou essayer des trucs. Peu importe la techno. Des chose qu’on peut pas nécessairement faire au bureau, ou chez soi. C’est de se donner une occasion d’améliorer ses capacités.

Evocatio : L’oeuf ou la Poule?

Pour les gens qui se le demandent. Evocatio a commencé A CAUSE des GeekNights.

Pas le contraire.

En fait, nous sommes ouverts a l’aide pour en faire une entité a part entière.

La direction de devLAB

… notre manifeste, en quelque sorte. Pas nécessairement officiel mais va comme suit:

1. Rencontre tous les mercredis 18h30-22h00
2. Avancer un projet de logiciel Libre
3. Ne pas se coincer qu’a une seule technologie ou langage de programmation
4. Travailler en équipe (code pairing) pour apprendre des interventions de son pair
5. Ajouter des facteurs d’inconnus coté technologique
6. Tout le monde est là pour apprendre et jouer a la technologie
7. But non lucratif. Aucune entreprise ne peut être promu par devLAB. Le contraire n’est pas interdit par contre.
8. Bilinguisme from the ground up (Except that my blog is for a french only audience. sorry)

C’est quand?

CE Mercredi, ou le prochain!

Le détail des annonces sur Techentreprise (voir le lien devLAB Montréal), Twitter via @devLABmtl et dans le groupe Facebook.  Vous pouvez aussi être fan de la Page Facebook.

Vous pouvez aussi  devlabmtl.org et qui n’est pas aussi à jour mais qui le sera éventuellement.

Vous voulez vous joindre a nous? Pas de problème! Si vous avez des questions vous pouvez envoyer un courriel a info A dev LAB mtl POINT org

Au plaisir de vous y croiser.

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

Dans ma série d’articles ou je parle des sites que j’ai fait dans le passé. J’ai mentionné quelques fois que j’utilisait GéraniumCMS. Le projet du site du Manoir Saint-Francis à Magog, est l’un des derniers déployés.

Derniers sites faits avec GéraniumCMS

J’était en emploi chez TechSolCom Groupe informatique depuis quelques temps déjà et un ancien client de Inexis a voulu que je fasse un site pour lui.

Le contexte général du projet est comme il l’est souvent. Un graphiste me fournit des planches Photoshop et je dois le rendre identique en HTML.

Gallerie d’images

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

Comme j’en ai parlé dans ce billet j’ai eu plusieurs rôles dans la réalisation du logiciel beebox. L’un d’eux était de m’occuper de l’image du produit.

Pour résumer l’usage du produit je vous laisser aller visiter le site web (beebox.ca) mais pour ce qui me concerne j’ai conçu et entretenu l’image du produit jusqu’en 2009.

Mon implication

Au début le produit s’appelait TSCM pour «Software Configuration Management» et il est fonctionnel et utilisé depuis 2005 (environ) chez plusieurs clients. J’ai donc:

• Produit plusieurs schémas de vulgarisation
• Fait des fonds d’écran
• Fait le logo de TSCM et de Beebox
• J’ai eu de l’aide de Quatorze Juillet Design pour la direction artistique du début pour le site

Sites web

Il y a eu trois versions du site. Une qui a été entretenue mais jamais été mise en ligne durant 2007. Ensuite lorsque nous avons travaillé le nom et l’image nous avons publié la version avec le nom Beebox sous GéraniumCMS (je n’ai pas de captures, malheureusement).

Images

Voici quelques captures. Certaines d’entre-elles proviennent du site. Je n’entretiens plus le site et je ne peut garantir qu’ils vont conserver mon travail c’est pour ça que je les partage ici avec vous

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

Rapports de séquence

J’ai eu la chance de travailler sur l’interface d’un logiciel fait en Java avec Struts.

A quoi sert le logiciel

Ce logiciel sert pour automatiser les déploiements des versions selon l’idéologie du Développement en mode «Intégration continue». Bref il est utilisé pour créer des suites d’actions programmables qui peuvent être répétées au besoin.

Histoire brève

Au début le logiciel s’appelait TSCM et était utilisé chez quelques clients dont Téléfilm Canada et la Banque Nationale du Canada dans un département que je ne mentionnerai pas. Dans le but de le rendre plus grand public nous avons changé le nom et remonté l’image.

Mon implication

Aujourd’hui appelé beebox. Mon travail consistait à monter l’interface utilisateur et guider l’équipe développement à monter les librairies du back end pour générer le front-end.

Tout ce qui touchait le design du produit, l’image, le site, l’interface utilisateur, et son intégration html.

Description d'un module

En gros j’ai collaboré avec le créateur du produit pour donner une interface plus actuelle.

• Monté maquettes de présentation du logiciel dans Photoshop CS2;
• Produit les maquettes statiques de l’interface utilisateur avec MooTools et du HTML;
• Monté les maquettes et le découpage;
• Réalisé l’intégration HTML avec les une librairie custom de tags Struts que j’ai participé a la conception;
• Fait la sélection des icônes;
• Travaillé et découpé les icônes;
• Produit le site web (billet à venir…);
• Programmé les behaviors en Javascript sous MooTools;

Sécurité des modules

Pour avoir plus de détails a propos du produit, allez-voir le site web.

Le logiciel est distribué sous licence Creative Commons “paternité” qui demande uniquement de mentionner sur le site de l’entreprise et des personnes qui l’utilisent d’afficher leur utilisation. (Je n’ai pas étudié les termes, allez voir la licence sur le site web.)

Personnellement, je compte développer des suites de scripts qui seraient utilisés pour administrer des projets en PHP avec cet outil. Je n’ai rien de publiable pour le moment.

Voir la suite de mon Portfolio.