fastclemmy.com

Histoire d'élargir un peu les discussions sur ce blog, voici un embryon de réflexion sur l'interface utilisateur qui me travaille depuis quelques temps déjà...

Sans être spécialiste de l'histoire informatique, on peut dire que la relation utilisateur/machine repose depuis l'origine sur la ligne de commande.

Ligne de commande, quézako ?

Concrètement, un curseur plus ou moins clignotant indique à l'utilisateur que le système attend des instructions. En rentrant du texte avec une syntaxe documentée, on peut faire exécuter par le système des actions (par exemple en DOS la commande dir pour lister les fichiers du répertoire courant). Plus fort encore, on peut rajouter des arguments pour modifier le fonctionnement de la commande (en reprenant l'exemple de DOS : dir /p liste comme précédemment les fichiers mais page par page). Austère mais versatile la ligne de commande ! Pour preuve, l'utilisation exclusive qu'en font beaucoup d'informaticiens sous Linux (qui a dit qu'on ne pouvait pas utiliser un ordinateur sans souris ?).

Pourtant, si l'informatique s'est démocratisée c'est justement parce qu'on est passé de la ligne de commande à l'interface graphique (c'est la GUI - Graphical User Interface). Cachez cette syntaxe que je ne saurais voir, d'un clic j'affiche l'ensemble des fichiers de mon répertoire, na ! On est passé de l'ère du clavier à celui de la souris. Facilité ? Certainement. Efficacité ? On pourrait sans doute en discuter. D'ailleurs bien souvent, le plus on devient spécialiste, le plus on a recours au clavier plutôt qu'à la souris. Ainsi, presque paradoxalement, un bon graphiste est aussi doué avec ses raccourcis-clavier qu'avec sa souris ou sa tablette graphique. Mais peu importe, c'est l'évolution générale qui est importante, d'autant que certains signes me font dire qu'un retour de balancier est en train d'intervenir.

Compliquée la ligne de commande ?

Difficile de l'affirmer au moment où tout le monde sait qu'il faut envoyer le numéro de son star académicien préféré au 72500 par SMS pour éviter sa tragique élimination. La banalisation du SMS -outre le massacre perpétuel de la langue française- contribue à sa façon au renouveau de l'utilisation de la ligne de commande. Si cela se fait de façon embryonnaire pour des applications grand public, on peut l'imaginer plus finement pour des applications plus spécifiques. On pourrait par exemple imaginer -si ce n'est déjà fait- des applications évoluées de consultation de cours de bourse, etc.

Autre exemple, Google. Tout le monde l'utilise, certes, mais certains l'utilisent intelligemment grâce à des mécanismes similaires à la ligne de commande. En excluant par exemple des termes pour affiner une recherche avec l'opérateur -, en recherchant des expressions exactes avec des guillemets, etc. D'ailleurs Google fait parfois la promotion de cette utilisation avancée en signalant des conseils en haut de la page de résultats.

Toujours dans le domaine du web, la barre d'adresse où l'ont saisit les URL peut aussi procéder de ce phénomène. Imaginons par exemple que l'URL d'un site soit : "http://www.domaine.com/?cat=jardin&gamme=gardena&page=2". Quand l'internaute vient modifier manuellement l'URL pour indiquer page=6 plutôt que page=2, cela procède d'une interaction proche de la ligne de commande. Une bonne raison de plus d'avoir des Cool URLs.

Certes, on pourra me rétorquer que ces exemples sont autant d'épiphénomènes... Il faut dire aussi que l'état de ma réflexion sur le sujet est assez embryonnaire. Pourtant, je ne démords pas de l'idée que la ligne de commande n'est pas réservée à une élite et qu'elle a toujours sa place parmi les autres interfaces-utilisateur.

#techno

Pour faire suite à un article d'Openweb sur des pop-ups intelligentes et accessibles, j'ai voulu pousser un peu plus loin la logique en déclinant une version "non-intrusive".

"Non-intrusif", derrière ce terme barbare se cache une nouvelle philosophie sous-tendant l'utilisation de javascript. Que celui-ci soit activé ou non chez votre visiteur, votre site doit pouvoir fonctionner : javascript pour l'inutile et non pour l'indispensable. L'exemple d'Openweb le démontre bien : l'utilisation d'une pop-up n'est pas indispensable, elle est possible pour les gens utilisant javascript, mais le lien est simplement cliquable pour tous.

Seulement l'article d'Openweb fait l'impasse sur une autre nouvelle approche que tout bon concepteur web doit intégrer dans ses bonnes pratiques : la séparation contenu/interactivité. Vous êtes sans doute déjà familier avec le concept de la séparation structure/présentation : la structure et le contenu d'un document se trouvent dans le fichier HTML tandis que toutes les informations de présentation sont spécifiées dans la feuille de style. Séparer l'interactivité (gérée par javascript) du contenu revient de la même manière à :

  • mettre toutes les fonctions dans un fichier javascript séparé (*.js)
  • retirer tous les appels à ces fonctions dans le fichier HTML (attributs onmouseover, onclick, etc.)

Reprenons donc l'exemple d'Openweb :

<a href="/img/logo.png" onclick="window.open(this.href, 'exemple', 'height=200, width=400, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;">Mon lien</a>

En donnant un id à notre lien, on se donne non seulement la possibilité de le styler avec CSS, mais de le manipuler facilement avec javascript. Notre HTML se résume donc maintenant à :

<a id="monLien" href="/img/logo.png">Mon lien</a>

Pour appeler notre fonction de pop-up, il ne faut pas oublier de rajouter dans la balise <head> de notre document HTML :

<script type="text/javascript" src="outils.js"></script>

Attaquons maintenant la fonction javascript proprement dite que nous enregistrerons dans un fichier "outils.js" :


function zoom() {
	// on récupère l'adresse vers laquelle on pointe dans le lien
	var lienPrecedent = document.getElementById("monLien").href;
	
	// on fixe une taille pour la pop-up
	var largeur = 100;
	var hauteur = 200;
	
	// on fixe les coordonnées pour centrer la pop-up
	var gauche = ( screen.width - largeur ) / 2;
	var haut = ( screen.height - hauteur ) / 2;

	// on ouvre la pop-up avec les bons paramètres
	var urlImage = lienPrecedent;
	var nomFenetre = "zoomModele";
	var options = "left="+gauche+"px,top="+haut+"px,width="+largeur+",height="+hauteur+",toolbar=0,resizable=0";
	window.open(urlImage, nomFenetre, options);
	
	// on empêche le lien de s'ouvrir en double en plus de la pop-up
	return false;
}

function initOnclick() {
	// si la page contient le lien avec l'id "monLien"
	if(document.getElementById("monLien")) {
	
		// on lance la fonction zoom au clic sur l'élément "monLien"
		document.getElementById("monLien").onclick = function () { return zoom();};
	}
}

// on initialise le comportement onclick au chargement de la page
window.onload =	function () {initOnclick()};

Et voilà le résultat ! Bien entendu, l'exemple est ici limité, libre à vous de modifier la fonction pour la rendre plus générique ou plus complète...

#javascript