Photo prise sur Flickr par Pyxis technologies

Depuis cet été j’ai commencé à m’impliquer dans l’organisation de la conférence «ConFoo Web Techno Conference». Je crois que j’en ai parlé dans ce billet. Il s’agit d’un événement annuel pensé pour les programmeurs, les passionnés du web et des logiciels libres.

La semaine passée, nous avons publié officiellement l’appel aux conférenciers. C’est la première annonce grand public du début de la programmation 2011. Jusqu’au 26 Novembre 2010, nous acceptons les propositions de présentations.

La procédure est simple, il faut proposer sa présentation par le formulaire “appel aux conférenciers” sur le site officiel.

La date et le lieux de la conférence sont maintenant officielles et se déroulera à l’Hôtel
Hilton Bonaventure de Montreal du 9 au 11 Mars 2011. Durant cette semaine il y aura aussi des journées de formation privés.

Ma participation

Pour moi ce sera ma première année dans l’équipe d’organisation de cet événement d’envergure. Je pense que ça tombe dans le sens de m’y impliquer car lorsque j’ai démissionné de l’animation des scouts j’ai décidé de pousser dans des loisirs qui sont plus près de ma carrière mais qui demanderont d’autres talents que ceux de faire de l’Intégration ou de la programmation.

Depuis que nous avons fondé EVOCATIO Solutions technologiques nous avons pris une position d’experts dans le domaine des acrobaties techniques. C’est ce qu’on faisait dans nos journées de tout les jours avant.

Ce que j’avait pas pensé c’est que je trouverait de la demande pour des tâches pointues et qu’on devait  «faire marcher». L’une d’elles a été fait, justement, pour un ami que je respecte beaucoup: Geoffroi Garon.

Avec sa permission je publie ici comment j’ai réglé un petit bug Javascript. Rien d’extraordinaire mais quand même bête lorsqu’on s’attend a ce que de quoi fonctionne qu’on a acheté et qu’il ne fonctionne pas. Finalement, tout juste avant de publier ce billet, j’ai réalisé que, l’auteur (@ftolgacan) a réparé le code. Comme quoi j’ai pris trop de temps avant de le publier.

Il s’agit d’un thème adapté qui a été acheté sur ThemeForest pour un site fait en WordPress. Étant donné que le thème fourni n’a pas vraiment d’endroit ou proposer les correctifs j’ai décidé de publier sur mon blogue.

Je contribue en français mais ferai une courte explication de ma correction en anglais sur l’item précis sur le site officiel.

Explication du problème

Lorsqu’on achète un thème on s’attend a ce que tout fonctionne… même avec les choses qu’on peut configurer dans le paneau d’administration. D’un point de vue fonctionnel… ça fait du sens.

Dans le cas ici ce n’était PAS le cas.

Le problème était le suivant. Une fois avoir modifié une liste d’items dans le catalogue utilisant le panneau de contrôle de WordPress. Un mini javascript permettant d’avoir une liste avec Tabs (a droite).

Mais les autres «tab» ne fonctionnaient pas et on ne comprenait pas pourquoi.

C’est là que j’ai intervenu.

Explication de la problématique

Le problème consistait a la génération des attributs id=”" une liste UL avec un thème et où le thème allait chercher ses valeurs du id. Ci-bas on voit comment Firebug voit le code généré.

Les elements de la liste (LI) avec l'attribut id (exemple: id="technical_details") est générée à partir d'une variable qui utilise le input d'un usager (dans le panneau de contrôle WordPress) qui n'a aucune idée de l'incidence possible de son entrée (espaces, accents, etc).

Cet exemple de code (ci-haut) est fonctionnel. Mais dans le cas du client, les <div id="" />  de la liste <div id="content" /> avaient des noms qui provenaient du nom de l’item (je ne peut illustrer où ils prenaient la valeur… je n’ai plus accès pour faire une capture d’écran).

La solution au problème

Au lieu d’utiliser un input de l’usager comme id d’une liste. Utiliser le fait qu’on sait que le <div id="tabs" /> a deux enfants… <div class="product_tabs" /> (avec une liste ordonnée… pour les boutons qui seront transformés en «tab») et <div id="content" /> (qui a une liste dans le même ordre que “product_tabs”). J’ai donc utilisé ce concept.

Le code

Comme c’est étrange. J’ai écrit ce billet que j’ai commencé en Mai lorsque j’ai eu a faire le petit travail. Depuis le temps, le développeur a réglé le problème. Ce que vous voyez de commenté (précédé par // et en vert) dans “Le code original” est ce qui était utilisé en jQuery.

J’ai donc trop pris de temps avant de publier ma solution

Le code original

Près de la ligne 107 dans ce fichier.

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

//product tabs
	$(document).ready(function(){
			var tabs= $("#tabs ul li");
			var content = $("#tabs #content");
			var kids = content.children();
			kids.attr("style","display:none;");
			$("#tabs #content div:first").attr("style","display:block;");
			tabs.click(
				function(){
//					var show=$(this).attr("title");
					var show=$("#tabs ul li").index(this);
 
					//change clicked tab class
					$("#tabs ul li").removeClass("active");
					$(this).addClass("active");
					//view clicked tab content
					kids.attr("style","display:none;");
					content.slideUp(400);
					$(function(){
						content.slideUp(400);
//						$("#"+show+"").attr("style","display:block;");
						$("#tabs #content div:eq("+show+")").attr("style","display:block;");
						content.slideDown(400);
					});
				}
			);
	});

Le code tel qu’il est aujourd’hui a la ligne 10 et ligne 21 (qui est commenté mais qui n’était pas comme ça avant) illustre qu’il utilisait l’attribut title.

Le code remplacé par

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//product tabs
	$(document).ready(function(){
			var tabs= $("#tabs ul li");
			var content = $("#tabs #content");
			var kids = content.children();
			kids.attr("style","display:none;");
			$("#tabs #content div:first").attr("style","display:block;");
			tabs.click(
				function(){
					var show=$("#tabs ul li").index(this);	
					//change clicked tab class
					$("#tabs ul li").removeClass("active");
					$(this).addClass("active");
					//view clicked tab content
					kids.attr("style","display:none;");
					content.slideUp(400);
					$(function(){
						content.slideUp(400);
						$("#tabs #content div:eq("+show+")").attr("style","display:block;");
						content.slideDown(400);
					});
				}
			);
	});

Ici c’est le code que j’avait donné a Geoffroi le 31 mai dernier.

Finalement

J’ai pris trop de temps pour publier mon billet de solution et il a été corrigé. Tant mieux!

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!

Je travaillait sur un mandat récemment pour transférer plusieurs dizaines de sites web vers une nouvelle infrastructure. Dans ce billet j’expliquerai le processus que j’ai utilisé pour en finir par produire un script bash qui pourrait vous être utile.

A propos du projet

Considérant que certains sites avaient plus d’une base de donnée il était hors de question de faire a bras les lignes mysqldump, ssh (en fait le transfert se fait en compressant le fichier et le copiant via une redirection gzip avec cat), mysql pour, en ordre, dumper la base de donnée, la transférer, et la restaurer…. sans oublier les create users pour chaque.

Je me suis dit: faisons-en un script!

Les prérequis

Nous voulions…

• Faciliter le travail car on savait qu’il faudrait souvent re-re-transférer chacune des bases de données;
  Car nous devions faire fonctionner le site sur le nouveau serveur avant de transférer les DNS.
• Entrer une commande minimale et en conserver les configurations;
• Que le nouveau serveur réalise la tâche a lui-seul, sans prérequis sur le serveur distant;
• Utiliser les commandes minimales et pouvoir réutiliser le scripts dans ma propre librairie de script bash;
• Éviter de répéter, parceque c’est «con»

Ce que le script fait

1. Transférer la base de donnée

1

$ migratemysql transfer

1. Lire le fichier de configuration migratemysql.conf dans le dossier courrant (ou en créer un)
2. Se connecter en SSH
3. Lancer mysqldump en conservant le tmp paramétrable (éviter de remplir le disque)
4. Compresser le .sql en gzip (.sql.gz)
5. Transférer via scp

2. Importer dans le serveur local

1

$ migratemysql import

1. Lire le fichier de configuration migratemysql.conf dans le dossier courrant
2. Véfirier si le .sql.gz existe…
   
   1. oui: le décompresser
      1. si le .sql existe déja, écrire par dessus? (attente d’une réponse a l’usager)
         1. oui: overwrite, continuer…
         2. non: DIE!
   2. non: continuer
3. Véfirier si le .sql existe…
   1. oui: continuer
   2. non: DIE!
4. Se connecter au serveur précisé, si erreur… DIE!
5. Véfirier si la database existe sur le serveur
   1. oui…
      1. Retenir de ne pas effacer le compte de base de donnée (PRIVILEGES) (variable “OVERRIDEUSERCREATION“)
      2. Effacer pour ré-insérer? (attente d’une réponse a l’usager)
      3. Créer les drop statements? (oui ou non… une switch “ALT_PURGE” dans le fichier de config)
         1. oui: générer le script, puis continuer
         2. non: continuer (utile si le fichier SQL a les DROP statements)
   2. non: continuer…
6. (si “OVERRIDEUSERCREATION” existe, ne pas faire) Créer les PRIVILEGES spécifique pour la table a créer
7. Exécuter le .sql
8. Afficher a l’écran un snippet de code PHP pour le fichier de config (format WordPress)

Le script

Pour le télécharger

Installer

1. Télécharger

   1	renoirb@ubuntu:~$ wget http://renoirboulanger.com/wp-content/uploads/scripts/migratemysql.gz

2. Extraire

   1	renoirb@ubuntu:~$ gunzip migratemysql.gz

3. Déplacer dans un dossier du PATH

   1 2	renoirb@ubuntu:~$ echo $PATH /usr/local/bin:/usr/bin:/bin:/usr/games:/home/renoirb/scripts:/home/renoirb/scripts

   Note Personnellement, j’ai mon propre dossier scripts dans mon home, mais c’est à vous de voir

Sources

Le script a été fait en collaboration avec Etienne Lachance qui est nettement plus rapide que moi dans le scripting BASH

Il s’agit d’une réalisation que j’ai effectuée en deux semaines pour RED L’agence. L’idée vient de François Sauvé lors d’une rencontre pour un autre projet. Il m’a dit: «J’ai une idée de fou. Je ne sais pas si on pourrait faire ça rapidement mais…».

C’est le genre de situation que j’aime!  Une question, la possibilité de me laisser aller, et hop!

RED voulait faire offrir un cadeau à chacun de ses clients privilégiés d’une façon hors de l’ordinaire. Les participants étaient invités a visionner leur cadeau par une petite carte de noël reçue par la poste (devant, dos) avec une adresse web et un code.

Le concept graphique était, selon moi, bien rendu. Un club échangiste avec les lumières tamisés, rien d’offensant mais tellement bien choisi pour le jeu.

Le site web devait permettre aux participants de voir leur cadeau et de pouvoir «Participer au club échangiste» en volant le cadeau d’un autre participant. Chaque participant qui se faisait voler son cadeau reçevait un courriel qui lui annonçait qu’il s’était fait voler et qu’il pouvait aller le récupérer.

Les échanges pouvaient avoir lieu jusqu’au 16 décembre 2009 à 23:59:59. Ensuite une page affichait pour dire que l’échange était terminé.

Le lendemain même, RED a préparé tout les cadeaux et les a envoyés avec une petite carte postale (devant, dos) et partait les cadeaux de chaque récipiendaire vers leur résidence.

PARTAGE DES TÂCHES

Je n’ai, évidemment, pas tout fait ça tout seul. En gros, je me suis occupé de l’application tandis que RED a fait tout le reste.

RED L’agence

RED à fait une grosse partie du travail dans ce projet: Le graphisme et le concept de tout le projet, l’intégration HTML, le Javascript, les deux cartes, les photos de chaque cadeaux, chaque description

Ma participation

J’ai planifié, rédigé les besoins techniques, les cas d’utilisations et programmé en utilisant symfony framework (v1.2 en PHP). Stéphan Champagne m’a accompagné pour ce qui concerne la normalisation de la base de donnée et les controleurs. Grâce à lui j’ai pu produire dans les temps une grande charge de travail a moi seul.

Ce projet arrivait dans un bon timing car j’était dans une passe où je ne voulait que coder pour passer ma certification ZCE (que je n’ai toujours pas). Je cherchait des petits projets pour jouer avec des frameworks PHP. Je crois que ce projet fut une réussite.

AU FINAL

Il y a eu plus d’une centaine d’échanges et beaucoup de plaisir pour les participants. J’ai su, ce week-end, que le projet club échangiste est en nomination au 17^e concours annuel «Le Grenier d’Or» pour le monde des communications.

Mise à jour du lendemain des Grenier d’Or: Durant la soirée, le projet a été mentionné lauréat plusieurs fois. Le projet a remporté un Certificat d’Excellence dans la catégorie JEU ET INTERACTIVITÉ.

PHOTOS

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 !!

Lorsqu’on travaille sur un site qui doit avoir plusieurs langues… il m’arrive souvent de devoir détecter la langue du visiteur. Ce bout de code permet de détecter la langue selon les données fournies dans HTTP_ACCEPT_LANGUAGE et HTTP_USER_AGENT. Il faut comprendre que ce n’est pas une solution absolue, mais un bout de code qui peut s’avérer utile!

Toujours utile pour configurer la langue. Ce bout de code permet de savoir la préférence du language du visiteur… il est utile lorsqu’on place ensuite des images ou des bouts de texte avec des conditions. Voici le code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// --- DEBUT DU BOUT DE CODE --- 
/**
  * Les langues disponibles
  **/
  $langues[] = 'fra'; # AUSSI LA LANGUE PAR DEFAUT
  $langues[] = 'eng'; 
 
/**
  * Avoir la liste des details HTTP_USER_AGENT et HTTP_ACCEPT_LANGUAGE dans $ua  
  **/
 foreach(explode(';',$_SERVER['HTTP_USER_AGENT']) as $agent_details)
   $ua[] = substr(trim($agent_details), 0, 2); 
 foreach(explode(';',$_SERVER['HTTP_ACCEPT_LANGUAGE']) as $agent_details)
   $ua[] = substr(trim($agent_details), 0, 2); 
 
/**
  * Avoir la liste des traductions possibles... puis setter la langue
  **/
 foreach($GLOBALS['langues'] as $trx) {
   if(in_array(substr($trx, 0, 2), $ua))
     $langue = "$trx";
   else
     $langue = $GLOBALS['langues'][0];
 } // --- FIN DU BOUT DE CODE --- @@

Ensuite, on appelle la reponse avec $GLOBALS['langue'] (a l’intérieur d’une fonction), ou encore $langue… vous pouvez utiliser évidemment la structure de noms que vous voulez. Un exemple intéressant d’usage pourrait etre lorsqu’on veut charger une image en fonction de la langue actuelle… on pourrait le faire ainsi:

1

 return "<img src=\"/path/to/image/?={$langue}/design_slice_12.jpg\" alt=\"Welcome\" border=\"0\" />";