Des Geeks et des lettres » Programmation

Mettre en pause un carrousel au survol de la souris

Mimie — Fri, 27 Jan 2012 08:30:22 +0000

Il n’existe quasiment plus de site d’informations sans carrousel qui présente les actualités à la une, les billets sponsorisés ou des publicités.

Vous l’aurez compris je ne vous parle pas du manège « chevaux en bois » ou du tapis roulant dans les aéroports, mais bien de l’élément IHM qui consiste à afficher une liste d’items défilants, souvent de manière circulaire à l’image du Flip 3D dans Windows Vista et Windows 7 (touche Win+Tab), ou du célèbre affichage des albums dans iTunes.

Ce ne sont pas les scripts ou plugins javascript qui manquent pour en mettre un en place sur votre site perso ou votre blog, l’un de ceux que j’utilise est le plugin jQuery.carouFredSel qui a le mérite d’être complet et simple d’utilisation, le seul reproche que je lui ferai est son poids car il pèse tout de même 30 ko en version minifiée.

Structure du carrousel

L’avantage de ce carrousel réside dans le fait qu’il est tout à fait possible de faire défiler du contenu HTML quel qu’il soit, au lieu d’être obligé de faire défiler des images. Voici un exemple de structure HTML simple que j’utilise :


	
		
			
			Magic Supremacy
			
				Entièrement réalisé, ce site communautaire pour les joueurs de Magic l'Assemblée propose une multitude d'outils de qualité
				devenus rapidement indispensables pour les joueurs quel que soit leur niveau. Voici quelques fonctionnalités intéressantes :
				un simulateur de drafts qui permet de jouer entre amis, un générateur de paquets scellés, la création et le partage de decks
				et un design fluide et unique. Un exemple à suivre !
			
			Visiter le site »
		
		
			
			Des Geeks et des lettres
			
				Ce blog WordPress a été customisé par nos soins. Simple mais efficace, il est la preuve que le minimalisme dans le design
				peut entraîner l'addiction du lecteur : avec plus de 1000 visites uniques journalières, ce blog peut vous donner envie
				d'ouvrir votre boutique en ligne et d'attirer les internautes dans votre agence web.
			
			Visiter le site »
		
		
			
			Agence Web-Designer
			
				Il ne s'agit ni plus ni moins que du site que vous êtes en train de consulter. Il vous présente rapidement ce en quoi vous
				êtes en mesure de vous attendre en nous confiant la création de votre espace web. Pour toute demande élaborée, n'hésitez pas
				à nous contacter directement.
			
			Visiter le site »

Déclenchement du défilement

Le plugin carouFredSel possède un attribut qui permet de lancer le défilement automatiquement ainsi qu’un paramètre permettant de régler le temps d’affichage entre chaque diapo, à titre d’exemple voici ce que cela donnerait :

$('#carousel').carouFredSel({
	scroll	: {
		duration	: 0,
		pauseDuration	: 5000
	},
	auto	: true
});

Cependant pour faire ce que nous souhaitons, à savoir pouvoir mettre en pause et reprendre le défilement au survol de la souris sur une diapo, je n’utilise pas l’option de défilement automatique offert par le plugin, je déclenche moi-même le changement de diapo toutes les X secondes en appelant l’évènement next qui permet de passer à la diapo suivante.

Voici le script JavaScript :

var timer = setInterval(function() {
		$("#carousel").trigger("next");
	}, 5000);

Arrêt/Reprise du défilement

La variable timer représente désormais le moyen de simuler l’arrêt et la reprise de l’opération paramétrée à la fonction setInterval(), à savoir le déclenchement du passage à la diapo suivante. L’arrêt du processus se fait en appelant la méthode clearInterval() sur la variable timer.

Il vous suffit alors de programmer les endroits où vous souhaitez que votre souris agisse sur le défilement, dans mon cas je choisis la diapo tout entière mais cela pourrait être uniquement le titre ou l’image, et d’écrire ces quelques lignes JavaScript :

$('#carousel .work').mouseenter(function() {
		clearInterval(timer);
	}).mouseleave(function() {
		clearInterval(timer);
		timer = setInterval(function () {
				$("#carousel").trigger("next");
			}, 5000);
	});

Pour voir le mécanisme en action, je vous invite à visiter notre nouveau site à Greg et moi, et de survoler avec votre souris le carrousel présenté en page d’accueil :

Soumission d’un formulaire au format JSON avec jQuery

Mimie — Thu, 12 Jan 2012 08:00:49 +0000

J’ai jusque là utilisé principalement le format de données JSON pour récupérer des informations d’un quelconque service métier ou d’une API, comme récupérer les données d’un joueur ou les caractéristiques d’une carte Magic par exemple.

Cependant le format JSON se prête aussi bien à la récupération d’informations qu’à l’envoi de données, c’est sur cette deuxième option que porte la suite de ce billet.

Formulaire de contact

(Je vous renvoi à cet ancien article pour ceux qui souhaiteraient connaître une façon de retourner des données au format JSON depuis un contrôleur Java.)

Pour mettre en application l’envoi de données JSON vers un contrôleur Java, partons du principe que nous avons un formulaire de contact et que les données saisies par l’utilisateur doivent faire l’objet d’une action de sauvegarde en base de données par exemple.
La structure du formulaire de contact est la même pour les deux cas présentés ci-dessous :

HTML


	Nom
	

	Prénom
	

	Age

Envoi éparpillé

L’envoi classique correspond à envoyer les données saisies par l’utilisateur de façon unitaire, chaque champ du formulaire correspondant à un paramètre de la requête HTTP. Pour une quantité très réduite de données à envoyer cela peut suffire, mais lorsque nous parlons de dizaine voire de centaine de données, vous vous rendrez vite compte que cela nécessite trop de travail.

JAVA

// Récupère des données saisies par l'utilisateur
String nom = request.getParameter("nom");
String prenom = request.getParameter("prenom");
String age = request.getParameter("age");
// création de l'objet à persister en base
Contact contact = new Contact();
contact.setNom(nom);
contact.setPrenom(prenom);
contact.setAge(age);
// TODO : contrôles éventuels &  insertion en base de données

L’inconvénient de cette méthode est que les données soumises à l’aide de l’objet JavaScript ‘contact’ ne sont pas automatiquement transformées vers un objet de classe ‘Contact’ en Java, les paramètres sont à récupérer un à un, charge à nous de construire l’objet Java à la main … imaginez le travail avec des dizaines de paramètres dans tous les sens.

La deuxième méthode présentée ci-dessous permet de faciliter et d’optimiser tout ce travail.

Envoi groupé

Vous l’aurez compris, ce principe permet de convertir simplement l’objet JavaScript ‘contact’ en objet Java de classe ‘Contact’, voici les outils que l’on devra utiliser pour réussir ceci :

- l’envoi des données, côté client, se fait à présent au format JSON à l’aide d’un script JavaScript nommé json2.js
- les données reçues au format JSON, côté serveur, peuvent à présent être converties en objet Java en une ligne grâce à la librairie Json-lib

JAVA

// Récupère des données saisies par l'utilisateur
String contactAsString = request.getParameter("contact");
// création de l'objet à persister en base
JSONObject jsonObject = JSONObject.fromObject(contactAsString);
Contact contact = (Contact) JSONObject.toBean(jsonObject, Contact.class);
// TODO : contrôles éventuels & insertion en base de données

L’exemple simpliste de ce billet ne permet pas de se rendre compte tout à fait des possibilités offertes par l’utilisation du format JSON, étant donné que nous avons pris pour exemple un formulaire avec 3 champs très simples, mais croyez-moi l’utilisation de ce format d’échange entre le client et le serveur (dans les deux sens) est une véritable bénédiction et se fait très facilement

JavaScript : Les bonnes pratiques

Mimie — Mon, 12 Dec 2011 13:27:32 +0000

Avant d’appréhender un nouveau langage de programmation, il est utile voire primordiale de se documenter en amont pour comprendre un peu les subtilités et les rouages techniques du langage. Du temps bien dépensé qui vous permettra de ne pas pondre du code douteux ou mal écrit, surtout lorsque ce langage est JavaScript.

Ce n’est pas moi qui vais vous donner les bonnes pratiques du langage JavaScript, mais Google. Je viens de tomber sur cette page très bien faite qui va vous permettre de démarrer de la meilleure des façons : Google JavaScript Style Guide.

Chaque thème abordé par le document propose un exemple et un lien vers une page qui approfondie la bonne pratique, voici les sujets traités par le document :

JavaScript Language Rules

var
Constants
Semicolons
Nested functions
Function Declarations Within Blocks
Exceptions
Custom exceptions
Standards features
Wrapper objects for primitive types
Multi-level prototype hierarchies
Method definitions
Closures
eval()
with() {}
this
for-in loop
Associative Arrays
Multiline string literals
Array and Object literals
Modifying prototypes of builtin objects
Internet Explorer’s Conditional Comments

JavaScript Style Rules

Naming
Custom toString() methods
Deferred initialization
Explicit scope
Code formatting
Parentheses
Strings Visibility (private and protected fields)
JavaScript Types
Comments
Inner Classes and Enums
Compiling
Tips and Tricks

Avez-vous vous même des bonnes pratiques ou des astuces à nous faire partager ?

Gravatar : Mise en place d’une Tag Library

Mimie — Fri, 04 Nov 2011 13:37:02 +0000

Dans « Gravatar » il y a le mot « Avatar », en disant ça tout est dit, ce service propose à n’importe qui de lier une image à une adresse email, généralement une image de profil représentant la personne physique liée à une adresse email virtuelle (avatar).

Lorsque cette adresse email sera utilisée dans un blog ou forum au moment de la saisie d’un commentaire par exemple (un plug-in Gravatar est disponible sur la plupart des moteurs de blog connus), l’image « gravatar » associée à cette adresse email sera affichée automatiquement à côté de ce commentaire.

Pratique non ? plus besoin d’avoir à gérer sur chaque blog ou forum son avatar, l’adresse email suffit à présent.

J’ai voulu utiliser ce mécanisme sur mon site perso sur Magic l’Assemblée, au niveau des commentaires de cartes et de decks, c’est à présent chose faite (voici un exemple en dépliant le bloc « Commentaires » en bas), et voici ce que j’ai du faire pour en arriver à ce résultat.

Comment ça marche ?

Le mécanisme mis en place par gravatar pour afficher une image à partir d’une adresse email est simple, il suffit d’utiliser la balise HTML et d’y mettre en attribut « src » une url gravatar avec l’adresse email concernée, cela pourrait se traduire de la façon suivante :

Toutefois, pour éviter le spam, les adresses e-mail sont hachées avec la fonction de cryptage MD5. Cela empêche les robots de récupérer les adresses emails en clair dans le code source de la page.

Voici donc véritablement à quoi ressemble le code HTML qui permet d’afficher l’image gravatar liée à une adresse email.

Un avatar peut avoir des dimensions allant jusqu’à 512 pixels, il est toujours carré, et fait 80 pixels de côté par défaut. Si l’email n’est associé à aucun compte gravatar, une image par défaut apparaîtra.

Tag Library

Les pages de mon site étant des JSP, c’est tout naturellement que je me suis penché du côté d’une taglib pour automatiser la génération du code présenté ci-dessus, cependant aucune taglib officielle n’existe.

Etant simple à écrire, voici le code qui m’a permis de réaliser cette « taglib gravatar maison » en s’inspirant de bouts de code par ci par là.

Fichier de descripteur gravatar.tld




	1.0
	1.2
	Gravatar
	
		image
		fr.mtg.supremacy.taglib.GravatarImageTag
		empty
		Get avatar image from gravatar.com for the given email
		
			email
			true
			true
		
		
			alt
			false
			true
		
		
			size
			false
			true
		
		
			className
			false
			true
		
		
			defaultImage
			false
			true
		
		
			rating
			false
			true

Fichier web.xml

...

	
		gravatar.tld
		/WEB-INF/tld/gravatar.tld
	

...

Classe fr.mtg.supremacy.taglib.GravatarImageTag

public class GravatarImageTag extends TagSupport {
	private static final long serialVersionUID = 2766493961169800616L;
	private static final String GRAVATAR_URL = "http://www.gravatar.com/avatar/";
	private String email;
	private String size = "80";
	private String rating = "g";
	private String defaultImage = "";
	private String alt = "";
	private String className = "";
	public void setEmail(Object email) {
		this.email = (String) email;
	}
	public void setSize(Object size) {
		this.size = (String) size;
	}
	public void setRating(Object rating) {
		this.rating = (String) rating;
	}
	public void setDefaultImage(String defaultImage) {
		this.defaultImage = defaultImage;
	}
	public void setAlt(Object alt) {
		this.alt = (String) alt;
	}
	public void setClassName(Object className) {
		this.className = (String) className;
	}
	/**
	 * create the img html tag
	 */
	@Override
	public int doStartTag() throws JspException {
		try {
			String hash = DigestUtils.md5Hex(email.toLowerCase());
			String avatar_url = GRAVATAR_URL + "" + hash;
			StringBuilder img = new StringBuilder("");
			pageContext.getOut().print(img.toString());
		} catch (IOException e) {
			throw new JspException(e.getMessage());
		}
		return SKIP_BODY;
	}
}

On notera au passage l’utilisation de la bibliothèque d’Apache Commons Codec (classe DigestUtils) qui nous permet en une ligne d’obtenir le hash MD5 de l’email.

Utilisation dans une JSP

<%@ taglib uri="gravatar.tld" prefix="gravatar" %>

SEO : Bien référencer son site Web full Ajax

Mimie — Thu, 27 Oct 2011 07:52:19 +0000

AJAX

Le gain d’un site Web full Ajax est clair d’après moi, tout le monde y gagne :

le serveur : il est sollicité plus souvent mais ne retourne que des fragments de pages au lieu de l’intégralité du contenu des pages, souvent inutiles. Un gain de bande passante notable au passage
le client : l’interface est souvent plus fluide, les pages ne se rechargent pas entièrement à chaque clic et les actions nécessitant du temps ne bloquent pas l’utilisateur

Ces points se vérifient si vous vous rendez sur mon site Magic l’Assemblée qui est basé sur l’idée d’une application à page unique (Single-page application).

Méfiance

L’AJAX (Asynchronous JavaScript And Xml) est pour beaucoup de personnes synonyme de mauvais référencement dans les moteurs de recherche, et elles n’ont pas tout à fait tort au premier abord même si le sujet de ce billet est justement de présenter des solutions de contournement (SEO).

Voici donc les deux principaux arguments contre une utilisation massive d’AJAX pour les sites web Internet »grand public » :

les requêtes AJAX ne permettent pas de changer l’url de l’application, impossible donc d’utiliser l’historique de navigation des navigateurs et impossible de partager un lien vers le site pour qu’il affiche l’état sur lequel nous nous trouvons actuellement.
les robots d’indexation ne pouvant exécuter le JavaScript (langage du navigateur côté client) et les pages du site étant justement chargées par le biais de JavaScript (AJAX) signifie en effet que les robots (Googlebot, Bingbot, etc.) ne pourront pas indexer correctement les urls de vos pages « ajaxifiées ».

Contournement

Le premier point soulevé dans les arguments contre est aujourd’hui assez facilement contournable mais reste néanmoins obligatoire à mettre en place pour résoudre le deuxième point sur le référencement des pages.

J’utilise personnellement une bibliothèque JavaScript, nommée History Keeper, qui me permet d’ajouter une ancre au niveau de l’url de l’application (#nom_ancre) et de mapper cette ancre vers une fonction JavaScript qui se chargera de lancer une requête AJAX vers le serveur. Cette bibliothèque me permet donc de changer l’état d’une page (ou de mon unique page) sans la recharger entièrement.

Chaque page possède désormais une url dédiée (.../#page1, .../#page2, etc.) qui rend l’historisation fonctionnelle au niveau du navigateur et permet le partage de liens vers un contenu spécifique.

A noter qu’il existe beaucoup d’autres solutions pour contourner ce premier point qui font qu’il n’en est plus vraiment un : jQuery propose un plugin, GWT propose un mécanisme en interne, Flex en fait autant, Vaadin aussi, etc.

Référencement

Le second point évoqué dans les arguments contre est beaucoup plus complexe à appréhender et la solution proposée ci-dessous est plus délicate à mettre en place. En effet le nerf de la guerre reste le positionnement de son site dans les SERPs de Google principalement, un site mal référencé dans les moteurs de recherche est un site invisible ce qui entraîne donc peu de trafic, peu de backlinks, peu de ventes, peu de revenus publicitaires, etc.

Google a donc mis au point un mécanisme destiné aux webmasters et aux développeurs qui va permettre à son robot de correctement indexer les urls AJAX d’un site, il n’y a plus qu’à comprendre ce qui est demandé et à le mettre en place.

Fragment de hachage (#! et _escaped_fragment_)

Après résolution du premier point, nos URL AJAX présentent toutes à présent une ancre (ou fragment de hachage), tel que www.example.com/index.html#mon_état, où #mon_état correspond à l’ancre. Cependant le fragment de hachage est une particularité du navigateur et ne fait pas partie du protocole HTTP ce qui fait que ce paramètre n’est pas envoyé au serveur Web (Apache, Nginx, Lighttpd, etc.).

Ce qui implique que lorsque le robot va requêter des urls avec un #, l’état souhaité de la page ne pourra lui être retourné correctement, il faut donc que le robot interroge notre application sans fragment de hachage. C’est ce que propose Google en suffixant nos « ancres dynamiques » à l’aide du point d’exclamation (pour différencier les vraies « ancres statiques » des nouvelles) et en incluant dans son algorithme un mécanisme de transformation des urls contenant un tel paramètre (#!), sur le schéma »Pretty URL to Ugly URL » :

impact sur notre application

www.example.com/index.html#mont_état devient alors www.example.com/index.html#!mon_état

impact chez Googlebot

www.example.com/index.html#!mon_état sera transformé en www.example.com/index.html?_escaped_fragment_=mon_état

Cette fois-ci l’état de la page est envoyé au serveur Web, car le paramètre _escaped_fragment_ est un paramètre comme un autre autorisé dans le protocole HTTP. Il ne nous reste plus qu’à intercepter cette url dans notre application et de lui renvoyer le contenu de la page souhaitée (ça a l’air simple dit comme ça ? ^^).

Navigateur sans tête (servlet et htmlunit)

Puisque les robots d’indexation ne peuvent exécuter de code JavaScript, il faut le faire à leur place, sous-entendu qu’il faut que notre serveur délivre un « snapshot » (un instantané HTML) de la page demandée lorsque le robot va requêter notre site. Ce snapshot doit correspondre à l’ensemble du contenu qui apparaît sur la page après l’exécution du JavaScript.

Pour cela nous avons donc besoin d’une servlet pour intercepter les url contenant _escaped_fragment_ et d’un headless browser qui va simuler pour nous le comportement du navigateur pour récupérer le contenu des pages demandées, l’outil HtmlUnit a été choisi pour réaliser cette tâche.

Google a mis à disposition un exemple de Servlet utilisée dans une démo GWT, le code est accessible ici. Voici cependant ma version qui inclut quelques nouveautés avec entre autre le moyen d’éviter que ces requêtes, appelées par les robots, ne soient prises en compte dans les statistiques de Google Analytics par exemple.

/**
 * Servlet that makes this application crawlable
 */
public final class CrawlServlet implements Filter {
	private transient FilterConfig filterConfig = null;
	/**
	 * Initializes the filter configuration
	 */
	public void init(final FilterConfig filterConfig) {
		this.filterConfig = filterConfig;
	}
	/**
	 * Destroys the filter configuration
	 */
	public void destroy() {
		this.filterConfig = null;
	}
	/**
	 * Filters all requests and invokes headless browser if necessary
	 */
	@SuppressWarnings("unchecked")
	public void doFilter(final ServletRequest request, final ServletResponse response, final FilterChain chain) throws IOException {
		if (filterConfig == null) {
			return;
		}
		final HttpServletRequest req = (HttpServletRequest) request;
		final HttpServletResponse res = (HttpServletResponse) response;
		String queryString = req.getQueryString();
		if ((queryString != null) && (queryString.contains("_escaped_fragment_"))) {
			final StringBuilder pageNameSb = new StringBuilder("http://");
			pageNameSb.append(req.getServerName());
			if (req.getServerPort() != 0) {
				pageNameSb.append(":");
				pageNameSb.append(req.getServerPort());
			}
			pageNameSb.append(req.getRequestURI());
			queryString = rewriteQueryString(queryString);
			pageNameSb.append(queryString);
			final WebClient webClient = new WebClient(BrowserVersion.FIREFOX_3_6);
			new PinConnectionWrapper(webClient);
			webClient.setJavaScriptEnabled(true);
			webClient.setThrowExceptionOnScriptError(false);
			webClient.setAjaxController(new NicelyResynchronizingAjaxController());
			final String pageName = pageNameSb.toString();
			final HtmlPage page = webClient.getPage(pageName);
			res.setContentType("text/html;charset=UTF-8");
			final PrintWriter out = res.getWriter();
			out.println("");
			out.println("You are viewing a non-interactive page that is intended for the crawler.  You probably want to see this page: " + pageName + "");
			out.println("");
			out.println(page.asXml());
			webClient.closeAllWindows();
			out.close();
		} else {
			try {
				chain.doFilter(request, response);
			} catch (ServletException e) {
				e.printStackTrace();
			}
		}
	}
	/**
	 * rewrite the URL back to the original #! version.
	 * remember to unescape any %XX characters.
	 * @param queryString
	 * @return
	 * @throws IOException
	 */
	private String rewriteQueryString(final String queryString) throws IOException {
		StringBuilder queryStringSb = new StringBuilder(queryString);
		int i = queryStringSb.indexOf("&_escaped_fragment_");
		if (i != -1) {
			final StringBuilder tmpSb = new StringBuilder(queryStringSb.substring(0, i));
			tmpSb.append("#!");
			tmpSb.append(URLDecoder.decode(queryStringSb.substring(i + 20, queryStringSb.length()), "UTF-8"));
			queryStringSb = tmpSb;
		}
		i = queryStringSb.indexOf("_escaped_fragment_");
		if (i != -1) {
			final StringBuilder tmpSb = new StringBuilder(queryStringSb.substring(0, i));
			tmpSb.append("#!");
			tmpSb.append(URLDecoder.decode(queryStringSb.substring(i + 19, queryStringSb.length()), "UTF-8"));
			queryStringSb = tmpSb;
		}
		if (queryStringSb.indexOf("#!") != 0) {
			queryStringSb.insert(0, '?');
		}
		return queryStringSb.toString();
	}
	/**
	 * @author Mimie
	 *
	 */
	public class PinConnectionWrapper extends FalsifyingWebConnection {
	    public PinConnectionWrapper(final WebClient webClient) throws IllegalArgumentException {
	        super(webClient);
	    }
	    @Override
	    public WebResponse getResponse(final WebRequest request) throws IOException {
	        final WebResponse res = super.getResponse(request);
	        if (res.getWebRequest().getUrl().toExternalForm().endsWith(".css")
	        		|| res.getWebRequest().getUrl().toString().indexOf("plusone") != -1
	        		|| res.getWebRequest().getUrl().toString().indexOf("twitter") != -1
	        		|| res.getWebRequest().getUrl().toString().indexOf("facebook") != -1
	        		|| res.getWebRequest().getUrl().toString().indexOf("moderator") != -1
	        		|| res.getWebRequest().getUrl().toString().indexOf("google-analytics") != -1) {
	            return createWebResponse(res.getWebRequest(), "", "application/javascript", 200, "Ok");
	        }
	        return res;
	    }
	}
}

Pour tester que tout fonctionne correctement, il vous suffit de tester une « Ugly URL » pointant sur une de vos pages pour voir le résultat, par exemple : http://magicsupremacy.fr/index.jsp?_escaped_fragment_=menu=card&submenu=advanced_search, ou sinon vous pouvez aussi le faire en vous connectant au site Google Webmaster Tools.

A noter

- Le robot n’indexe que le contenu des pages (le source HTML) et non la présentation, c’est pourquoi j’ai volontairement fait en sorte que les fichiers css ne soient pas téléchargés avec HtmlUnit.

- Pour vérifier que Googlebot a correctement indexé vos urls AJAX, il suffit de taper site:votre_nom_de_domaine dans le moteur de recherche pour voir le nombre de lien qu’il en ressort, par exemple : site:magicsupremacy.fr affiche 19400 résultats.

- Toutes les urls dans le code de votre application et celles de votre sitemap si vous en avez un, ne doivent contenir que les « Pretty URL » avec les #!, le paramètre _escaped_fragment_ ne doit jamais être présent.

- La bonne nouvelle est qu’il semblerait que ce mécanisme ait été repris par Bing dans une mise à jour récente de son Webmaster tools.

Liens utiles

Making AJAX Applications Crawlable
Le référencement de l’Ajax avec un Headless Browser
Google’s AJAX crawling scheme and its effects on SEO

Menu fixe mais flottant selon la scrollbar (JS + CSS)

Mimie — Wed, 19 Oct 2011 14:15:16 +0000

Certains ne comprennent peut-être pas ce dont je veux parler par « menu fixe mais flottant selon la scrollbar », en fait je fais référence au nouveau menu dans Gmail qui est figé en haut mais suit la scrollbar lorsque nous descendons l’ascenseur.
Cet effet permet d’avoir toujours à disposition le menu où que nous soyons dans la lecture de nos mails.

Ça semble anodin au premier abord pour la plupart des gens, un peu de CSS, un petit « position: fixed » et le tour est joué ? hé bien non, c’est plus fort que ça, car au départ le menu est incrusté et c’est seulement lorque la scrollbar atteint un point précis (ici lorsque le haut de la fenêtre atteint le menu) que le menu devient flottant, c’est donc dynamique, à comprendre qu’il va falloir utiliser du JavaScript.

Ce menu m’a intrigué dès le départ car je ne savais pas moi-même réaliser un tel effet, jusqu’au jour où j’en ai eu besoin pour l’affichage d’un deck de type « Commander » sur MS.

Démo

En effet au niveau de la vue d’un deck, le survol de la souris sur le nom d’une carte fait afficher l’image de celle-ci sur le côté gauche. Le problème c’est que la quantité de cartes d’un deck « Commander » fait que l’image ne devient plus visible lorsque nous scrollons vers le bas pour voir l’intégralité des cartes. D’où l’idée de rendre flottante l’image de la carte lorsque la scrollbar tente de la masquer.

Pour vous rendre compte du résutlat obtenu, je vous invite à visiter cette page et à scroller vers le bas pour voir que l’image suit la scrollbar : Deck Magic l’Assemblée Momentary Rafiq EDH.

Code

Finalement c’est assez simple à comprendre et donc à mettre en place.

Votre élément (menu, image, bandeau, div, etc.) a rendre flottant a par défaut une position « relative » par rapport à son conteneur, cette position devra passée à « fixed » au moment où nous le choisirons, dans notre cas lorsque la scrollbar tentera de masquer notre élément.

Le changement d’état de notre élement se fera par le biais d’une classe CSS, appliquée par du JavaScript, la voici :

#votre_menu_ou_votre_image_ou_votre_element.floatable {
	position: fixed;
	top: 10px; // non-obligatoire
}

Pour détecter qu’il est temps de changer la position de notre élément, il faut connaître le positionnement de la scrollbar et la comparer au positionnement de notre élément. Pour cela j’utilise la fonction $(window).scroll() de jQuery.
Voici le mécanisme à mettre en place :

// listen for scroll
var positionElementInPage = $('#votre_menu_ou_votre_image_ou_votre_element').offset().top;
$(window).scroll(
	function() {
		if ($(window).scrollTop() >= positionElementInPage) {
			// fixed
			$('#votre_menu_ou_votre_image_ou_votre_element').addClass("floatable");
		} else {
			// relative
			$('#votre_menu_ou_votre_image_ou_votre_element').removeClass("floatable");
		}
	}
);

Lorsque nous descendons l’image nous suit et reste visible, lorsque nous remontons, elle se recale à l’endroit du départ si nous dépassons son emplacement d’origine.

Sources

Si mes explications ne sont pas claires, voici un fichier d’exemple : menu_fixe_mais_flottant.html.

jRSS : Création de flux RSS en Java

Mimie — Tue, 27 Sep 2011 15:37:48 +0000

J’entends déjà de loin ceux qui pensent que créer son flux RSS à la main est chose facile (ce n’est que de l’XML) et qu’il n’est pas nécessaire d’utiliser une bibliothèque tierce pour réaliser cette tâche, je ne suis pas de cette avis et surtout lorsque la bibliothèque en question ne fait que 22 ko.

jRSS m’a permis de me concentrer uniquement sur le contenu à mettre à disposition sans s’occuper des balises XML et autres fioritures englobant ce contenu, c’est exactement ce que je voulais.

Ce que je souhaite

Je souhaite présenter à mes abonnés les derniers tournois répertoriés sur mon site magicsupremacy.fr, voici donc à quoi doit ressembler le flux RSS que je dois fournir (volontairement simplifié pour plus de clarté) :



	
		Les derniers Tournois ajoutés sur Magic Supremacy
		http://magicsupremacy.fr/index.jsp#!menu=deck&submenu=search_by_events
		Une liste des derniers Tournois Magic l'Assemblée ajoutés, tout format confondu
		admin@magicsupremacy.fr
		
			Magic Online Premier #2853353 - Pauper
			http://magicsupremacy.fr/index.jsp#!menu=deck&event=115
			description simplifiée du tournoi #2853353
			Admin
			sam., 24 sept. 2011 09:11:00 CEST
		
		
			Magic Online Premier #2853358 - Standard 2010-2011 [ZEN M11 SOM]
			http://magicsupremacy.fr/index.jsp#!menu=deck&event=114
			description simplifiée du tournoi #2853358
			Admin
			dim., 25 sept. 2011 17:23:00 CEST

Ce n’est pas forcément très complexe à réaliser seul, cependant l’utilisation de jRSS permet de donner un cadre de développement, une direction, en utilisant les objets adéquates, voici la façon dont j’ai procédé.

Comment je m’y prends

L’utilisation de jRSS permet soit de générer à la volée le flux RSS soit de générer le flux sous forme de fichier XML afin de le déposer dans un répertoire de l’application. J’ai opté pour la première solution, je ne stocke aucun fichier sur mon serveur.
Au lieu de manipuler des chaînes de caractères, jRSS permet de manipuler des objets Java, voici l’exemple qui permet de générer le flux présenté plus haut :

final RSSFeedGenerator rssFeed = RSSFeedGeneratorFactory.getDefault();
final RSS rss = new RSS(RSS.VERSION_2_0);
final Channel channel = new Channel("Les derniers Tournois ajoutés sur Magic Supremacy", "http://magicsupremacy.fr/index.jsp#!menu=deck&submenu=search_by_events", "Une liste des derniers Tournois Magic l'Assemblée ajoutés, tout format confondu");
channel.setWebMaster("admin@magicsupremacy.fr");
final Item item1 = new Item("Magic Online Premier #2853353 - Pauper", "http://magicsupremacy.fr/index.jsp#!menu=deck&event=115", "description simplifiée du tournoi #2853353");
item1.setAuthor("Admin");
item1.setPubDate(new Date());
final Item item2 = new Item("Magic Online Premier #2853358 - Standard 2010-2011 [ZEN M11 SOM]", "http://magicsupremacy.fr/index.jsp#!menu=deck&event=114", "description simplifiée du tournoi #2853358");
item2.setAuthor("Admin");
item2.setPubDate(new Date());
channel.addItem(item1);
channel.addItem(item2);
rss.addChannel(channel);
final String rssFeedGenerated = rssFeed.generateAsString(rss);

La variable rssFeedGenerated représente le flux RSS souhaité. Il vous suffit ensuite de mettre à disposition de vos utilisateurs un lien ou un bouton pointant sur l’action qui appelle ce bout de code.

Google Feedburner

Pour masquer l’url de mon flux RSS un peu verbeuse à mes utilisateurs et surtout pour avoir des statistiques sur mes abonnés, j’utilise Google Feedburner qui me permet alors d’offrir une url « propre » à mes utilisateurs, celle-ci pointera ensuite sur la véritable url de l’application sans que cela se voit.

URL de l’action qui génère le flux RSS :

http://magicsupremacy.fr/rss.do?action=getLatestEventsInFrench

URL présentée aux utilisateurs grâce à Feedburner :

http://feeds.feedburner.com/latest_events_magic_supremacy_fr

Feedburner se charge au passage d’enregistrer le trafic au niveau de mes RSS et de me les présenter sous forme graphique, ça ne vaut pas le coup de s’en priver.

jCookies : Gestion simple des cookies avec jQuery

Mimie — Tue, 13 Sep 2011 12:30:21 +0000

Vous avez peur de ces petites bébêtes stockés sur votre ordinateur à votre insu par le biais de votre navigateur ? vous avez tord, les cookies ne sont que des fichiers texte (ce ne sont pas des exécutables), même s’ils stockent certaines informations vous concernant sur la navigation du site lié au cookie, ils ne peuvent pas vous infecter d’un quelconque virus.

Ces petits fichiers sont principalement utilisés sans mauvaises intentions :

Simplification de l’authentification utilisateur
Maintient d’une session active
Stockage d’informations spécifique à l’utilisateur comme les préférences d’un site ou le contenu de son panier d’achat

Généralement créé par un langage serveur (programe CGI, script PHP, etc.) qui ajoute une ligne dans l’entête HTTP (Set-Cookie: name=value), la création d’un cookie peut se faire aussi côté client, en JavaScript.

L’utilisation d’un plugin jQuery comme jCookies apporte une souplesse et une simplicité quant à la création de cookie côté client, voici comment l’utiliser.

Création

La création d’un cookie devient un jeu d’enfant, il suffit de renseigner le nom du cookie et sa valeur JSON :

$.jCookies({
    name : 'Magic Supremacy',
    value : { card : 'Birds of Paradise', edition : 'M12', rating : '4.5', price : 5}
});

Pour paramétrer d’avantage le cookie, vous avez la possibilité de passer d’autres arguments à la méthode, comme par exemple la durée d’expiration qui est par défaut de 27 jours :

$.jCookies({ name : 'MS login', value : { username : 'Mimie' , level : 'Admin' }, minutes : 60 });

Récupération

La récupération d’un cookie nécessite de connaître le nom de celui-ci, ensuite grâce à la propriété get du plugin, vous récupérez son contenu si celui-ci a été créer par le procédé décrit précédemment :

var magic_supremacy = $.jCookies({ get : 'Magic Supremacy' });
    // réponse : { card : 'Birds of Paradise', edition : 'M12', rating : '4.5', price : 5}
var password = $.jCookies({ get : 'MS password' }); // (cookie créé par un autre procédé)
    // réponse : false

Suppression

Pour invalider définitivement un cookie, la propriété erase du plugin est faite pour vous, elle vous retournera true si l’opération a été exécutée avec succès, false sinon :

var erased_magic_supremacy = $.jCookies({ erase : 'Magic Supremacy' });
    // réponse : true
var erased_password = $.jCookies({ erase : 'MS password' });
    // réponse : false

Difficile de faire plus simple non ?

Pour plus de détails sur le plugin, voici la présentation officielle faite par son créateur.

Ignorer les accents lors de la comparaison de chaînes en Java

Mimie — Fri, 02 Sep 2011 12:05:58 +0000

Le problème s’est manifesté dans la « recherche rapide » de cartes sur mon site Magic Supremacy, les joueurs étaient obligé de saisir les accents d’une carte, si celle-ci en comportait, pour que le système la retrouve correctement et la propose dans sa liste de résultats possibles.

Exemple, si nous commencions à saisir « Viande frai », la carte française nommée « Viande fraîche » (avec un i circonflexe) n’était pas proposée. La raison est tout simplement due à l’utilisation de la méthode startsWith() de la classe java.lang.String pour comparer les noms de cartes et ça se comprend car après tout le i et le î sont différents, ainsi que le e et le é, ou le u et le ü, cependant ce n’est pas pratique de devoir taper les accents pour retrouver une carte en particulier, j’ai donc dû trouver un moyen pour satisfaire mes joueurs ^^

Je suis tombé sur la classe java.text.Collator qui de prime à bord semblait faire exactement ce que je voulais puis finalement je me suis plutôt tourné vers une méthode plus manuelle pour des questions de performance.

Voici trois solutions testées pour l’occasion.

Collator

Cette classe permet de déterminer si les caractères accentués doivent être considéré comme des caractères non-accentués ou si les caractères majuscules doivent être considéré comme des caractères minuscules. Ce niveau de comparaison est paramétré grâce aux constantes suivantes de la classe : PRIMARY, SECONDARY, TERTIARY ou IDENTICAL, la Locale rentrant aussi en considération. Cette classe était donc faite pour moi.

Cependant les méthodes de cette classe sont assez limitées, il n’y a quasiment que le compare() qui ne m’aide pas étant donné que je souhaite comparer les chaines de caractères qui commencent par une autre (le startsWith).

Déception et abandon de cette solution.

Normalizer

L’idée a été ensuite de trouver un moyen de transformer en amont les chaînes à comparer, pour ensuite utiliser le startsWith(). Les caractères accentués doivent être converti en leurs caractères non-accentués équivalent (é -> e, ü -> u, î -> i, etc.) ainsi que les majuscules en minuscules (E -> e, Ü -> u, etc.).

La classe java.text.Normalizer s’occupe très bien de la conversion des accents et pour les majuscules un simple toLowerCase() permet de s’en arranger :

public static String formatStringNormalizer(String s) {
	String temp = Normalizer.normalize(s, Normalizer.Form.NFD);
	return temp.replaceAll("[^\\p{ASCII}]", "").toLowerCase();
}

Ainsi la recherche du nom « Viande fraîche » ou « viande fraiche » parmis tous les noms de cartes disponibles sera équivalente en appliquant cette méthode au nom de la carte à chercher ET au nom des cartes à comparer.

Méthode maison

Plus les chaînes de caractères sont longues, plus la transformation des accents avec Normalizer prend du temps, de même qu’un grand nombre d’exécution successive de la méthode formatStringNormalizer() met un certain temps.

J’ai donc décidé d’utiliser une méthode non disponible dans la JRE qui permet à la fois de convertir les accents en non-accent et les majuscules en minuscules, une méthode fort appréciable car environ 8x plus rapide, trouvée à cette adresse.

static public String formatStringManual(String string) {
	char[] charsData = new char[string.length()];
	string.getChars(0, charsData.length, charsData, 0);
	char c;
	for (int i = 0; i < charsData.length; i++) {
		if ((c = charsData[i]) >= 'A' && c <= 'Z') {
			charsData[i] = (char) (c - 'A' + 'a');
		} else {
			switch (c) {
			case '\u00e0':
			case '\u00e2':
			case '\u00e4':
				charsData[i] = 'a';
				break;
			case '\u00e7':
				charsData[i] = 'c';
				break;
			case '\u00e8':
			case '\u00e9':
			case '\u00ea':
			case '\u00eb':
				charsData[i] = 'e';
				break;
			case '\u00ee':
			case '\u00ef':
				charsData[i] = 'i';
				break;
			case '\u00f4':
			case '\u00f6':
				charsData[i] = 'o';
				break;
			case '\u00f9':
			case '\u00fb':
			case '\u00fc':
				charsData[i] = 'u';
				break;
			}
		}
	}
	return new String(charsData);
}

Temps d’exécution

Voici la façon utilisée pour me rendre compte que la méthode formatStringNormalizer() est plus lente que la méthode formatStringManual() :

public static void main(String[] args) {
	String search = "frai";
	String text = "Une ";
	for (int i = 0; i < 100; i++) {
		text += "viande ";
	}
	text += "fraîchement découpée";
	long time = System.currentTimeMillis();
	// Recherche de la sous-chaîne search dans text plusieurs fois de suite
	for (int i = 0; i < 100000; i++) {
		formatStringNormalizer(text).indexOf(search);
		//formatStringManual(text).indexOf(search);
	}
	// Affichage du temps écoulé
	System.out.println((System.currentTimeMillis() - time) + " ms");
}

Récupérer les paramètres d’une URL en JavaScript

Mimie — Tue, 23 Aug 2011 13:20:59 +0000

Vous ne vous êtes jamais demandé à quoi servait tous ces paramètres incompréhensibles dans les URL que vous saisissez pour vous rendre sur tel ou tel site ou page Web ? pour s’en rendre compte je vous invite à regarder attentivement l’URL générée par Google lors de vos recherches.

Finalement c’est assez simple à comprendre, les paramètres d’une URL servent simplement à transmettre des variables au script ou document cible, particulièrement utilisés dans les sites Web dynamiques.

Rappel

Les URL (Uniform Resource Locator) sont les chemins d’accès aux différentes ressources sur Internet. Ils sont utilisés pour identifier les pages et sites Web et permettent d’accéder à n’importe quel document. Ces chemins sont communément appelées « adresses Web ».

Syntaxe (protocole http)

http://:/?#

Le caractère ? indique que la suite de l’URL sont des paramètres et ne font pas partie du nom de fichier cible. Le caractère = sépare un nom de paramètre de sa valeur. Le caractère & sépare deux couples (nom, valeur).

Exemple

nom du lien

Dans cet exemple on transmet deux variables au script index.jsp : $menu de valeur « deck » et $id de valeur « 75″.

Méthode classique

De prime à bord ça ne semble pas très compliqué grâce à la fonction split qui nous permet d’isoler les valeurs de part et d’autre d’un séparateur, dans notre cas les séparateurs sont & et =.

Voici donc une façon simple qui permet de récupérer les paramètres d’une URL en JavaScript sous la forme d’un tableau associatif (clé => valeur) :

// read a page's GET URL variables and return them as an associative array.
var getUrlVars = function (historyHash) {
	var vars = [], hash;
	var hashes = historyHash.split('&');
	for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
};
var url = location.href;
var parameters = getUrlVars(url.substring(url.indexOf("?") + 1));

Méthode avancée

Qu’en est-il lorsque les valeurs des variables à transmettre comportent des & ? comme par exemple :

http://magicsupremacy.fr/index.jsp?menu=card&artist=Chippy+&+Matthew+Wilson

Le script précédent ne fonctionne plus, il faut un peu ruser pour contourner le problème, voici la façon que j’ai trouvé qui m’a permis d’avancer :

// read a page's GET URL variables and return them as an associative array.
// tiens compte des & dans la valeur d'une clé (&artist=titi&toto => "artist" : "titi&toto")
var getUrlVars = function (historyHash) {
	var vars = [];
	var hashes = historyHash.split('&');
	var previousHash;
	for (var i = 0; i < hashes.length; i++) {
        var hash = hashes[i].split('=');
		if (hash.length == 1) {
			vars[previousHash] += "&" + hash[0];
		} else {
			previousHash = hash[0];
        	vars.push(hash[0]);
        	vars[hash[0]] = hash[1];
		}
    }
    return vars;
};
var url = location.href;
var parameters = getUrlVars(url.substring(url.indexOf("?") + 1));

Générer son sitemap.xml en Java avec la bibliothèque SitemapGen4j

Mimie — Thu, 11 Aug 2011 14:18:10 +0000

Le terme Sitemap désigne finalement deux choses, dans un premier temps il désigne une page Web qui permet aux utilisateurs d’avoir un « plan du site » (sous forme d’arborescence) afin de mieux les repérer et faciliter l’accès à l’information, dans un second temps il désigne le fichier que l’on doit générer et fournir aux moteurs de recherche pour que les robots d’indexation (crawlers) trouvent et indexent des pages qu’ils n’auraient pas pu trouver autrement, ce qui favorise un meilleur référencement.

Ce terme, dans le second cas, désigne en fait le protocole Sitemaps conçu par Google et adopté par les autres, qui consiste en une représentation du plan des sites en texte ou en XML, à destination exclusive des moteurs de recherche.

J’avoue ne pas avoir fait de page Sitemap sur mon site sur Magic, ça me semble ringard, par contre j’ai fait en sorte de générer au mieux le fichier XML Sitemap (voire même deux) par le biais d’une bibliothèque Java que je vais vous présenter.

Fichier Sitemap

- Bien entendu le fichier Sitemap.xml doit respecter une norme et un squelette prédéfini afin qu’il soit lisible par les robots : définitions des balises XML, encodage du fichier et caractères d’échappement d’entité entre autres. Je vous invite à lire cet article Format XML de plans Sitemap et celui-là Utilisation de caractères non alphanumériques dans les URL d’un sitemap pour de plus amples informations car il y en a trop pour être résumées dans ce billet.

L’avantage de passer par une bibliothèque, telle SitemapGen4j, est que tout est prévu d’avance, ainsi toutes les bonnes pratiques sont implémentées et facilement exploitable, attention tout de même aux caractères spéciaux à encoder obligatoirement et autres caractères interdits à proscrire.

- Voici un extrait de ma classe permettant de générer mes deux fichiers Sitemap XML, un par langue du site (le fichier généré est automatiquement validé avec les schémas officiels du protocole) :

public class GenerateSitemap {
	public static void main(String[] args) throws MalformedURLException, UnsupportedEncodingException {
		// un fichier sitemap par langue
		generateSitemapForTld("com");
		generateSitemapForTld("fr");
	}
	private static void generateSitemapForTld(final String tld) throws MalformedURLException, UnsupportedEncodingException {
		// Use DAY pattern (2009-02-07), Greenwich Mean Time timezone
		final W3CDateFormat dateFormat = new W3CDateFormat(Pattern.DAY);
		dateFormat.setTimeZone(TimeZone.getTimeZone("GMT"));
		final WebSitemapGenerator wsg = WebSitemapGenerator.builder("http://magicsupremacy." + tld, myFile).dateFormat(dateFormat).fileNamePrefix("sitemap-" + tld).autoValidate(true).build();
		// home
		wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld).lastMod(new Date()).priority(1.0).changeFreq(ChangeFreq.WEEKLY).build());
		// menus
		wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=home").lastMod(new Date()).priority(1.0).changeFreq(ChangeFreq.WEEKLY).build());
		wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=card").lastMod(new Date()).priority(1.0).changeFreq(ChangeFreq.WEEKLY).build());
		wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=deck").lastMod(new Date()).priority(1.0).changeFreq(ChangeFreq.WEEKLY).build());
		wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=account").lastMod(new Date()).priority(1.0).changeFreq(ChangeFreq.WEEKLY).build());
		// cards
		for (CardDto card : cardService.getAllCardsForCrawlers()) {
			wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=card&name=" + URLEncoder.encode(card.getName(), "UTF-8")).lastMod(new Date()).priority(0.8).changeFreq(ChangeFreq.WEEKLY).build());
			wsg.addUrl(new WebSitemapUrl.Options("http://magicsupremacy." + tld + "/index.jsp#!menu=card&id=" + card.getPkCard()).lastMod(new Date()).priority(0.8).changeFreq(ChangeFreq.WEEKLY).build());
		}
		wsg.write();
	}
}

Fichier d’index Sitemap

Pour les sites Web dynamiques qui génèrent un nombre importants d’URLs et étant donné les limites imposées par fichier Sitemap (maximum 50 000 URLs et une taille de 10 Mo), vous avez la possibilité de découper vos fichiers par thème ou groupement puis de les référencer dans un unique fichier Sitemap index qui deviendra alors l’unique point d’entrée du robot pour accéder à vos liens repertoriés (article à lire Fichier d’index Sitemap).

Voici la façon de procéder avec SitemapGen4j :

WebSitemapGenerator wsg;
// generate cards sitemap
wsg = WebSitemapGenerator.builder("http://magicsupremacy.fr", myDir).fileNamePrefix("cards").build();
for (int i = 0; i < 50; i++) wsg.addUrl("http://magicsupremacy.fr/index.jsp#!menu=card&id="+i);
wsg.write();
// generate decks sitemap
wsg = WebSitemapGenerator.builder("http://magicsupremacy.fr", myDir).fileNamePrefix("decks").build();
for (int i = 0; i < 50; i++) wsg.addUrl("http://magicsupremacy.fr/index.jsp#!menu=deck&id="+i);
wsg.write();
// generate sitemap index for cards + decks
SitemapIndexGenerator sig = new SitemapIndexGenerator("http://magicsupremacy.fr", myFile);
sig.addUrl("http://magicsupremacy.fr/cards.xml");
sig.addUrl("http://magicsupremacy.fr/decks.xml");
sig.write();

Le fichier généré en sortie devrait ressembler à ceci, il ne vous manquera plus qu’à l’envoyer aux différents moteurs de recherche :


  
    http://magicsupremacy.fr/cards.xml
    2011-08-11T14:32:18.825+02:00
  
  
    http://magicsupremacy.fr/decks.xml
    2011-08-11T14:32:18.825+02:00

Outils d’aide

Pour vous aider à générer votre fichier sitemap.xml, il existe un tas de plugins pour les CMS, des outils à installer soit-même sur sa machine et des applications en ligne qui vous permettent de faire tout ça à la volée, voici une liste plutôt conséquente qui vous aidera dans votre recherche : Web Sitemap Generators.

Google +1 : chargement asynchrone + validation W3C

Mimie — Tue, 26 Jul 2011 15:58:49 +0000

Pour les nombreux utilisateurs du moteur de recherche Google, l’arrivée du récent bouton +1 (plusone) dans les résultats de recherche n’est pas passé inaperçu.

Ce même bouton est en train de fleurir un peu partout sur les sites Web car en plus de conseiller et partager du contenu à son entourage, ce bouton a la vertue d’améliorer le classement du site Web en question dans les résultats de recherche Google.

Pour connaître les principaux boutons sociaux à mettre en place sur votre site, cet article vous sera utile.

Utilisation classique

Chargement du script de façon synchrone

Placement du bouton en utilisant une balise spécifique à Google

Utilisation améliorée

Chargement du script de façon asynchrone pour ne pas ralentir l’affichage des pages de vote site Web

Placement du bouton en utilisant les balises standard HTML pour qu’il soit valide W3C (Doctype HTML5)

C’est sûr qu’au lieu de 2 lignes il nous en faut à présent 10 mais pour les puristes de la validation W3C et de la vitesse d’affichage des pages, ce n’est pas grand chose et très simple à mettre en place.

Dozer à la rescousse du lazy-loading

Mimie — Sun, 17 Jul 2011 12:23:52 +0000

Pour ceux qui ne connaissent pas mon chouchou Dozer, voici deux articles pour vous donner envie d’y goûter, ici et là.

Cette fois-ci Dozer vient en aide au problème récurrent du lazy-loading (chargement à la demande), dans mon cas les problèmes se sont posés avec Hibernate qui a adopté cette stratégie par défaut depuis la version 3.

Si vous non plus vous n’êtes pas convaincu par l’utilisation du design pattern nommé Open Session in View, et que vos services métiers renvoient systématiquement des objets de type DTO par exemple, alors la suite de ce billet peut vous aider dans vos développements.

Model vers DTO

Si vos services métiers retournent d’autres objets que ceux provenant du modèle de données mappés avec Hibernate, alors la copie automatique de l’objet Model vers DTO peut se faire avec Dozer. Cependant la copie de chaque attribut de l’objet Model vers l’objet DTO utilise systématiquement les getters de celui-ci, annulant du même coup l’effet du lazy-loading car l’appel d’un getter d’un objet Model sur un attribut configuré en chargement à la demande, déclenche automatiquement une requête en base pour récupérer les informations qu’il ne possède pas encore.

Pour cela j’utilise deux mapping Dozer différents par objet Model qui utilise des associations lazy-loadées (il est bien entendu possible d’en définir plus), et dans mes services métiers j’indique quel mapping utiliser.

Mapping Dozer

Les deux mapping en question ressemblent à ceci, tout est paramétré dans le fichier de configuration XML de Dozer en utilisant l’attribut map-id de la balise mapping, ainsi que la balise field-exlucde pour jouer sur les attributs que nous ne souhaitons pas charger :

le mapping qui ne charge pas les associations en lazy-loading, appelé miniDeck


    	fr.mtg.supremacy.core.model.Deck
    	fr.mtg.supremacy.core.dto.DeckDto
    	
    		colors
    		colors
  	
  	
    		styles
    		styles
  	
  	
    		contents
    		contents
    	
    	
    		comments
    		comments

le mapping qui charge entièrement l’objet et donc les associations en lazy-loading, appelé maxiDeck


    	fr.mtg.supremacy.core.model.Deck
    	fr.mtg.supremacy.core.dto.DeckDto
    	
    		colors
    		colors
  	
  	
    		styles
    		styles

Impact

L’impact au niveau de vos services métiers est minime, il suffit juste de récupérer la « moulinette Dozer » que vous avez défini préalablement via Spring ou autre (je vous renvois pour cela au premier lien en haut du billet), et ensuite il faut appeler la méthode public void map(Object source, Object destination, String mapId) throws MappingException qui va vous permettre de transformer vos objets Model en DTO avec le mapping de votre choix.

Deck deck = this.deckDao.read(deckId);
DeckDto miniDeck = (DeckDto) mapperDozerBean.map(deck, DeckDto.class, "miniDeck");
ou
DeckDto fullDeck = (DeckDto) mapperDozerBean.map(deck, DeckDto.class, "fullDeck");

Avec ce mécanisme mis en place, vous savez toujours de quoi sont composés les objets DTO qui sont remontés à vos clients et vous ne vous faites plus avoir avec des données non chargées au moment où vous en avez besoin, ce qui évitera par ailleurs toute Lazy-Loading Exception du style : « org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role: fr.mtg.supremacy.core.model.Deck.contents, no session or session was closed ».

JSTL : Utilisation des constantes Java sans scriptlet

Mimie — Tue, 21 Jun 2011 16:27:30 +0000

Tout le monde a vraisemblablement déjà dû se confronter au problème des constantes Java inutilisables avec la librairie de tags JSTL, j’en mettrai ma main au feu, et c’est généralement le prétexte utilisé pour mettre en place du code Java en dur à la place (une scriptlet), chose à proscrire à mon sens.

La suite de ce billet va vous montrer qu’il est désormais possible de se passer définitivement des scriptlets pour ce genre d’utilisation, en proposant deux solutions raisonnables.

Constat

Imaginons une classe Java de constantes LoginConstants :

package blog.geeks.and.letters;
public class LoginConstants {
   public static final String KEY_USERNAME = "username";
   public static final String KEY_EMAIL = "email";
   (...)
}

L’exploitation d’une de ces constantes dans nos pages est malheureusement impossible en utilisant l’expression JSTL EL suivante, la raison est que EL ne dispose d’aucun moyen de référencer les valeurs des constantes de classes (de même que l’utilisation de est impossible étant donné que les constantes n’ont pas d’accesseurs) :

A la place nous voyons ce genre de contournement qui encombre très souvent nos pages :

A partir de ce constat, voyons à présent les alternatives possibles.

Choix 1 : API Reflection + Map

L’idée est d’utiliser l’objet java.util.Map pour stocker en entrée et en sortie les noms des différentes constantes de votre application et leurs valeurs.

L’avantage de l’objet Map est qu’il est facilement accessible en JSTL EL :

${mapObject["MY_KEY"]} ou ${mapObject.MY_KEY}

Pour cela nous utilisons l’introspection rendue possible via l’API Reflection, qui nous permet de parcourir les classes données et d’extraire les informations des attributs « public static final » afin d’alimenter notre Map.

Voici une des façons possible en rendant accessible cet objet depuis le scope application de l’application Web :

Paramétrage XML : web.xml


    	MyApplicationContextListener

Listener Java : MyApplicationContextListener.java

public class MyApplicationContextListener implements ServletContextListener {
	private static final String CONSTANTS = "constants";
	public void contextInitialized(ServletContextEvent event) {
		Map constants = new HashMap();
		Class[] declaringClasses = { blog.geeks.and.letters.LoginConstants.class };
		for (Class declaringClass : declaringClasses) {
			Field[] fields = declaringClass.getFields();
			for (int n = 0; n < fields.length; n++) {
				int modifiers = fields[n].getModifiers();
				if (Modifier.isPublic(modifiers) && Modifier.isStatic(modifiers) && Modifier.isFinal(modifiers)) {
					try {
						constants.put(fields[n].getName(), fields[n].get(null));
					} catch (Exception e) {
						// TODO Auto-generated catch block
						e.printStackTrace();
					}
				}
			}
		}
		event.getServletContext().setAttribute(CONSTANTS, constants);
	}
	public void contextDestroyed(ServletContextEvent event) {
		Map constants = (Map) event.getServletContext().getAttribute(CONSTANTS);
		try {
			event.getServletContext().removeAttribute(CONSTANTS);
		} finally {
			constants = null;
		}
	}
}

Utilisation dans une page JSP

     ${applicationScope.constants.KEY_USERNAME}

Choix 2 : Apache Unstandard Tag Library

« Un bon développeur est un développeur fainéant », je n’ai bizarrement jamais oublié cette phrase provenant d’un de mes profs d’université … le mieux est donc de ne pas réinventer la roue, c’est pourquoi je ne peux que vous conseiller d’utiliser la librairie de tags Unstandard distribué par Apache qui permet entre autres de gérer le problème des constantes facilement.

Il suffit pour cela d’inclure ces quelques lignes en entête de vos pages

<%@ taglib prefix="un" uri="http://jakarta.apache.org/taglibs/unstandard-1.0"%>

Son utilisation est alors celle que nous recherchions dès le départ, à savoir :

Merci Apache