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.

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!

En rédigeant Accessibilité et les liens externes j’ai réalisé qu’il y aurait trop de matière pour être lue dans un simple billet. Alors j’ai décidé d’aller plus en profondeur et de le documenter.

Cet article explique une méthode simple pour transformer tout les liens d’une page qui vont à l’extérieur du site courrant en ajoutant un icône approprié et la note disant qu’une fenêtre s’ouvrira

Les méthodes généralement utilisés

Actuellement, il existe plusieurs manières de faire. Sauf qu’elles demandent souvent de le faire à la main pour chaque lien et ca peut être lourd.

Surtout pour la rédaction qui se fout un peu de faire du html propre

Comment faire un pop-up

Voici quelques manières… rien d’extravagant.

Ces méthodes font bel et bien le travail mais certaines d’entre elles (je ne les ai pas toutes listés) sont sémantiquement invalides… et donne un du tagsoup

Règles pour les liens extérieurs

• Une balise html doit être utilisée pour son usage
• Le markup doit être le plus simple possible pour éviter les erreurs d’entrée de l’édimestre.
• On ne peut pas utiliser le CSS pour ajouter les icones
  Note: Parceque les Lecteurs d’écran (aveugles) “lisent” le texte et non pas ce qui a été modifié via CSS.
• On ne peut pas utiliser de Javascript invalide
  Note: Si on y va via le DOM, avec les manipulations valide, ca passe bien: bref on évite innerHTML et on se fie aux Spécifications du DOM

D’autres règles pourraient être mentionnées. Mais le message peut bien se résumer ainsi.

En HTML, on doit utiliser les balises pour l’usage qu’elles sont destinés à faire.

… il ne reste pas tant d’options. La méthode que j’ai élaboré répond a toutes ces conditions.

Les autres choses que le lien doit faire

Dans les lignes guides de l’accessibilité du web (et en ergonomie/utilisabilité) on mentionne

Qu’on doit avoir un indice qu’un lien est destiné à ouvrir une page extérieure et/ou un popup

Source: ma mémoire… j’ai pas trouvé de lien référence. Si vous en trouvez, faites moi signe

ça veut donc dire qu’en plus de faire le lien en tant que tel, il faut ajouter une image dans le lien qui va annoncer le popup… Ouf!

Ce qu’il faudrait…

En gros, il faudrait, que pour chaque lien…

• Avertir qu’il y a un lien externe dans un icône image ajouté automatiquement
• Placer l’icone avec la bonne balise et ne pas utiliser le CSS.
• Avoir un alt="" pour l’image (icône) car sinon c’est du html invalide en plus qu’il servirait a avertir
• Que le alt="" soit dans la langue utilisée dans le site
• Que le lien soit utilisable SANS JAVASCRIPT donc, on oublie le href="javascript..."
  Note: C’est une approche qui veut que l’on puise “dégrader élégamment” le code dans la “pire des situations“

la Manière idéale

Il s’agit d’une méthode que j’ai élaborée avec un ancien collègue que l’on surnomme (alias) Reynold Kirby pour être valide avec toutes les règles ci-haut mentionnés.

• Lister tout les liens externes qui commencent par http://;
• Éliminer de la liste les domaines qu’on ne veut pas qui se fassent transformer;
• Créer, via le DOM, une image AVEC le bon alt="";
• Ajouter un attribut rel="popup" pour le handler de popup;
• Ajouter, finalement, le handler onclick="".

La “pogne”

On va utiliser le onclick="", mais généré automatiquement via Javascript. Car de toute façon il est ridicule de s’interdire d’utiliser javascipt. Dans ce contexte, ce serait donc acceptable. Et toujours mieux que de faire target="_blank" et/ou de demander aux édimestres de faire chaque lien à bras (!!)

Le code

Simplement ajouter ce bout de code Javascript aux autres scripts du site.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

var strPopUpWarning = 'Lien sur un site externe qui va ouvrir dans une nouvelle fenetre.';
 
function addImageAtExternalLinks(){
  var anchorList = document.getElementsByTagName('a');
  for(var i=0; i < anchorList.length; i++) {
  /**
    * Remarquez les indexOf()... remplacez renoirboulanger 
    * par votre propre nom de domaine... addthis a été ajouté 
    * au cas ou vous avez un service du genre
    **/ 
    if(anchorList[i].href != '' &&
    anchorList[i].href.indexOf('renoirboulanger') == -1 &&
    anchorList[i].href.indexOf('javascript') == -1 &&
    anchorList[i].href.indexOf('addthis') == -1) {
      var elContainer = anchorList[i];
      var createdEl = document.createElement('img');
      createdEl.alt = strPopUpWarning;
      createdEl.src = '/icones/extlink.gif';
      elContainer.setAttribute('rel','popup');
      elContainer.appendChild(createdEl);
      elContainer.onclick = dopopup;
    }
  }
}
 
/* Ensuite... l'appel */
addImageAtExternalLinks();
 
/**
 * Fonctions pour les popup
 *
 * Permet de crere un popup en faisant un lien
 * <a href="http://www.othersite.com/url/" />text (usage normal)
 * Mais creer des liens popup au besoin selon des specifites que l'on veut. Donc, un
 *  lien comme ceux ci  genereront...)
 *   <a href="http://www.othersite.com/url/" rel="popup" />text et aussi
 *   <a href="http://www.othersite.com/url/" rel="popup standard 800 600" />text
 *     (un popup de 800x600 avec toolbars)
 *   <a href="http://www.othersite.com/url/" rel="popup console 800 600" />text
 *     (un popup de 800x600 mais sans toolbars)
 *   <a href="http://www.othersite.com/url/" rel="popup fullscreen" />text (un popup plein ecran)
 *
 * En plus, ce qui a ete ajoute est la possibilite (avec addImageAtExternalLinks();) de scanner toutes les
 * href de la page courrante qui ne sont pas interieurs (ou acceptes) et d'y ajouter une image qui dit que c'est
 * un popup (via le DOM) et qui annonce que ca va ouvrir un site exterieur... bref qui prendrait
 *
 * @author Renoir Boulanger <lunique @renoirboulanger.com>
 * @author Reynold Kirby (alias) <reynold .kirby@gmail.com>
 **/
function dopopup(e){
  // Source: http://www.accessify.com/features/tutorials/the-perfect-popup/
  //set defaults - if nothing in rel attrib, these will be used
  var t = "standard";
  var w = null;
  var h = null;
 
  //look for parameters
  attribs = this.rel.split(" ");
  if (attribs[1]!=null) {t = attribs[1];}
  if (attribs[2]!=null) {w = attribs[2];}
  if (attribs[3]!=null) {h = attribs[3];}
 
  //call the popup script
  popUpWin(this.href,t,w,h);
 
  //cancel the default link action if pop-up activated
  if (window.event) {
    window.event.returnValue = false;
    window.event.cancelBubble = true;
  } else if (e) {
    e.stopPropagation();
    e.preventDefault();
  }
}
 
function popUpWin(url, type, strWidth, strHeight){
  closeWin();
  //calls function to close pop-up if already open,
  //to ensure it's re-opened every time, retainining focus
  type = type.toLowerCase();
  if (type == "fullscreen"){
    strWidth = screen.availWidth;
    strHeight = screen.availHeight;
  }
  var tools="";
  if (type == "standard")
  tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
  if (type == "console" || type == "fullscreen")
    tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0";
  newWindow = window.open(url, 'newWin', tools);
  newWindow.focus();
}
var newWindow = null;
 
function closeWin(){
 
  if (newWindow != null){
    if(!newWindow.closed)
      newWindow.close();
  }
}</reynold></lunique>

Il existe plusieurs normes en accessibilité du web qui demande des choses qu’on ne prend pas nécessairement le temps de faire.

Soit que c’est pas manque de temps, trop de choses à penser, ou on n’y pense simplement pas.

Dans cet article j’exprime mon opinion sur l’importance (du point de vue utilisabilité) des icones de liens extérieurs. Plus tard je montrerai une méthode pour automatiser [EDIT 2009-08-23] J’ai documenté comment faire dans Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité.

Le problème que j’ai voulu me pencher consiste avec la règle qui suit :

2.4.4 (niveau A)
Destination d’un lien :
La destination d’un lien peut Être déterminée à partir du libellé (label=”") du lien ou du libellé et du contexte de ce lien déterminable par programmation, sauf pour un lien dont la destination serait ambigüe pour l’ensemble des utilisateur.

Ce qui implique qu’on doit ajouter à la main une icône qui annonce le «popup» et si c’est un lien extérieur.

Pourquoi ne pas automatiser ce qui est automatisable?

Lorsqu’on doit manuellement, faire l’option popup quand on édite un site et le faire à bras pour chacun.

Parfois, en programmant on finit par se demander… “L’informatique au service de l’homme” (ou le contraire?)

L’objectif

Alors, j’ai décidé de trouver une manière d’automatiser?

• de prendre une balise standard

  1	<a href="http://www.somesite.com/action/handler">Link</a>

• d’ajouter de l’image icône qui annonce que c’est un (lien externe + popup)
• d’instaurer le alt="" de l’image
• de transformer le lien en popup…

  1	<a href="http://www.somesite.com/action/handler">Link<img src="/icons/external_link.png" alt="Avertissement: Ce lien ouvre dans une fenêtre externe car il ne fait pas partie du présent site" width="10" height="10" class="popuphreficon" /></a>

… tout ça en Javascript qui manipule le DOM d’une manière valide… et qui suit les normes d’Accessibilité du web !!