English version available

Même exempte de bogue, une application dont l’ergonomie n’a pas été bien pensée sera surement un frein pour l’utilisateur. Il est donc important de prendre un peu de temps pour améliorer le design et l’ergonomie d’une application. Même si un client ne le spécifie pas directement dans le cahier des charges, il sera toujours plus plaisant pour lui d’utiliser une application « user-friendly ». L’identité visuelle n’est pas en reste et ne doit pas être négligée. Elle est même primordiale dans certains secteurs où la concurrence est forte comme la vente en ligne ou la publicité.

Cet article va vous montrer qu’il est possible d’améliorer le design général d’une application à moindre coût. En quelques minutes, vous allez voir comment apporter une petite touche en plus à vos formulaires.

Ainsi, vous passerez de ce style d’écran :

à celui-ci :

Attention, seules les versions récentes des navigateurs prendront en compte efficacement ces améliorations (Firefox 4, Internet Explorer 9 par exemple). Ceci s’explique par l’utilisation de propriétés avancées CSS3 (box-shadow, border-radius, text-shadow notamment). Sur des navigateurs plus anciens, vous obtiendrez un comportement dégradé pour ces propriétés. Les bords arrondis deviennent carrés, les ombres n’apparaissent pas… Néanmoins, le rendu final sera souvent plus joli que l’original. Je vous invite à consulter ce site https://caniuse.com/ pour accéder aux tables de compatibilité CSS3/HTML5 des navigateurs.

Voici le rendu d’origine sous IE6 :

Et le comportement dégradé obtenu :

Quelle est l’astuce pour réaliser ce « lifting » ? Il suffit de vous rendre sur ce site : https://cssbuttongenerator.com/ qui vous permettra de créer des boutons personnalisés avec vos propres paramètres : taille, couleur, ombre, texte, effet d’enfoncement, de focus, etc. et de générer le code CSS associé (aucune image n’est nécessaire). Une fois la portion de code intégré à votre feuille de style, il vous suffira d’utiliser vos nouvelles classes sur les éléments classiques d’un formulaire (input de type button, text, textarea, etc.).

 English version available

Ajax

Apparu en 2005, Ajax (Asynchronous JavaScript and XML) regroupe un ensemble de technologies déjà existantes, notamment HTML, JavaScript et XML. Avec Ajax, les applications web peuvent mettre à jour partiellement la page affichée par le navigateur sans avoir à recharger la page entière. L’interface graphique peut ainsi évoluer par petits bouts, devenant ainsi plus interactive et reproduisant la sensation d’utiliser une application type client lourd. Nous parlons alors d’applications RIA (Rich Internet Applications). Le terme « Asynchronous » signifie que l’exécution du JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur est « gelé » en attendant la réponse du serveur.

jQuery

Initié en 2006, le projet jQuery est une bibliothèque JavaScript libre devenue très populaire. Elle permet de développer des scripts JavaScript rapidement et de manière concise, le slogan du site « Write less, do more. » (Ecrire moins, faire plus) est bien adapté ! jQuery intègre la gestion des évènements, des animations, des interactions Ajax, des selectors CSS… De plus, de nombreux plugins existent et la librairie fonctionne sur la plupart des navigateurs (cross-browser).

Ajax avec jQuery

Il y a plusieurs possibilités pour faire de l’Ajax avec jQuery.


$.get(url, data, callback, type)

$.get() permet de faire des requêtes de type GET. Il récupère la réponse dans de nombreux formats tels que XML, Html, Text, Script et Json.

	function ajouter_elements_table(elementIds) {
		$.get( 'demoajax.php', 
				{	
					'cmd': 'ajouterElements', 
					'elementSelecteds': elementIds
				}, 
				function (data) { refresh_table() });
	}

$.post(url, data, callback, type)

$.post() est l’équivalent de $.get(), mais les requêtes sont de type POST.


$.ajax(options)

$.get() et $.post() sont des implémentations plutôt haut niveau, plus faciles et simples à utiliser pour le développeur. Cependant, elles n’offrent pas autant de fonctionnalités que $.ajax(). Par exemple, la gestion de « callback » lorsque des erreurs interviennent, des options sur le cache, etc. $.ajax() ne prend qu’un seul argument qui est un objet composé de couples « clé/valeur », utilisé pour initialiser et gérer la requête.

	function ajouter_elements_table(elementIds) {
		$.ajax({ url : 'demoajax.php', 
				data : {	
					'cmd': 'ajouterElements', 
					'elementSelecteds': elementIds
				},
				cache : false,
				success : function (data) { refresh_table() }});
	}

Problème de cache avec Ajax sous Internet Explorer

J’ai travaillé sur un projet qui utilisait jQuery et des appels Ajax. J’ai utilisé la méthode $.get() pour traiter mes appels simples. Cela fonctionnait parfaitement sous Firefox, Chrome et même Internet Explorer 6. Cependant, je me suis rendu compte que sous IE7, 8 et 9, j’avais des comportements un peu aléatoires.
Après quelques recherches, j’ai réalisé qu’il s’agissait d’un problème de cache. La première fois, l’appel Ajax est correctement traité. La seconde fois, le serveur n’est pas sollicité, mais je me retrouve quand même avec la même réponse…
Désormais, je priviligie l’utilisation de $.ajax() avec l’option « cache: false ».