C’est peut-être bête, mais il y a des fois où on cherche un truc tout bête, qui nous faciliterait la vie, mais qui nous bloque parce qu’on ne sait pas comment s’y prendre. C’est tout l’intérêt des programmeurs que de chercher ce genre de petites bêtes afin de les résoudre et d’ajouter sa petite pierre à l’humanité

Pour ma part, je ne suis pas un pro de Facebook et je cherchais à accepter automatiquement tous les éventuels amis qui s’inscrirait par la suite. Cela peut se révéler utile pour celui qui a plusieurs comptes Facebook, cela lui évite de devoir, à chaque fois, se connecter avec des login et des mots de passe différents.

J’ai fini par tomber sur la technique suivante :

• Se rendre sur http://www.facebook.com/reqs.php
• copier ce bout de code dans votre barre d’adresse :
• javascript:for( i = 1;i<document.getElementsByName(« actions[accept]« ).length;i++){document.getElementsByName(« actions[accept]« )[i].click();}void(0);
• pour les utilisateurs de Google chrome, penser à réécrire « javascript: » avant d’appuyer sur Entrée, parce que ça disparaît

Normalement ça devrait marcher, je l’espère du moins, je vous dis ça dès que j’ai un retour.

PS :

Pour rejeter automatiquement les invitations, c’est ce code-là qu’il faut utiliser :

javascript:for( i = 1;i<document.getElementsByName("actions[hide]").length;i++){document.getElementsByName("actions[hide]")[i].click();}void(0);

Google url shortener est le service lancé en 2010 par Google qui permet de réduire vos longues urls en urls très courtes, le premier service de ce type date de 2001 et l’un des plus connus à ce jour reste TinyURL qui date de 2002.

Si vous souhaitez réduire vos urls par Google il faut donc se rendre sur le site, saisir l’url à réduire, cliquer sur un bouton et hop, l’url correspondante raccourcie apparaît, vous n’avez plus qu’à la copier pour l’utiliser où bon vous semble (quelques réserves).

Qu’en est-il si vous voulez proposer à vos utilisateurs la réduction d’url par Google directement depuis votre application ou site web ?

Depuis le début d’année 2012, Google propose une API nous permettant d’utiliser ce service en le programmant, sur cette page vous verrez un exemple d’utilisation selon votre langage, cependant la méthode proposée en Java me semble peu pratique et compliquée, d’autant plus qu’elle nécessite l’utilisation de nombreux jars.

Je vais donc vous proposer la façon que j’ai choisie pour utiliser de façon simple l’API de Google url shortener :

1. le paramètre key=API_key n’est pas obligatoire à la fin de l’url, cependant il est nécessaire si vous souhaitez connaître suivre les reports et statistiques sur votre console Google apis
2. seule la bibliothèque Jackson est nécessaire (vous pouvez en utiliser une autre) pour parser le flux JSON reçue par l’appel du service Google

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.Map;
import org.codehaus.jackson.map.ObjectMapper;
public class ShortenerUrlUtil {
	public static final String GOOGLE_SHORTENER_URL = "https://www.googleapis.com/urlshortener/v1/url?key=API_key";
	public static String shortenUrl(String longUrl) {
		String data = "{\"longUrl\": \"" + longUrl + "\"}";
		try {
			// création d'une connection HTTP
			URL url = new URL(GOOGLE_SHORTENER_URL);
			HttpURLConnection connection = (HttpURLConnection) url.openConnection();
			connection.setRequestMethod("POST");
			connection.setDoOutput(true);
			connection.setRequestProperty("Content-Type", "application/json");
			// appel de l'API
			OutputStreamWriter output = new OutputStreamWriter(connection.getOutputStream());
			output.write(data);
			output.flush();
			// réception de la réponse au format JSON
			BufferedReader response = new BufferedReader(new InputStreamReader(connection.getInputStream()));
			String result = "";
			String line;
			while ((line = response.readLine()) != null) {
				result += line;
			}
			// interprétation du flux JSON pour extraire l'url réduite
			ObjectMapper mapper = new ObjectMapper();
			Map map = mapper.readValue(result, Map.class);
			output.close();
			response.close();
			return (String) map.get("id");
		} catch (Exception e) {
			return longUrl;
		}
	}
	/**
	 * @param args
	 */
	public static void main(String[] args) throws Exception {
		System.out.println(shortenUrl("http://magicsupremacy.fr/#!/deck"));
	}
}

Nous ne parlerons pas du composant Swing JTable dans ce billet mais plutôt du plugin jQuery jTable qui permet de générer, à partir de données au format JSON, des tableaux riches et ajaxifiés proposant toutes les fonctionnalités d’un CRUD sans avoir à écrire une ligne d’HTML ou de JavaScript.

Les points intéressants

Voici rapidement les principales qualité de ce plugin :

• Génère le source HTML de votre tableau et charge les données à afficher depuis votre serveur en AJAX
• Crée automatiquement les actions « ajouter », « supprimer » et « modifier » qui ouvrent une popup Dialog jQuery UI en envoyant l’information du changement au serveur en Ajax et en rafraîchissant le tableau dans le même temps
• Supporte la pagination et le tri des colonnes côté serveur avec AJAX
• Permet aux utilisateurs de sélectionner une ou plusieurs lignes du tableau et de modifier à la volée les tailles des colonnes
• Plusieurs thèmes sont disponibles pour vos tableaux, il est simple de fabriquer soit-même son thème en jouant avec le fichier CSS
• Fonctionne sur l’ensemble des navigateurs et ne dépend pas d’une technologie côté serveur, tant que les données sont renvoyées au format JSON
• Expose certains évènement lors de la validation des formulaires et permet l’internationalisation simplement

Traitement serveur en Java

Les exemples fournis dans la documentation en ligne du plugin nous montrent une utilisation avec .NET et PHP, j’ai donc tenté l’expérience en Java en utilisant Spring MVC 3.1 et Jackson 1.9.6 pour la lecture et l’écriture en JSON.

Etant donné que les données qui transitent entre le client et le serveur sont au format JSON, je n’ai eu aucune difficulté à utiliser jTable.js dans une application JavaEE :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Utilisation de jTable.js avec Java</title>
		<link type="text/css" rel="stylesheet" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css"/>
		<link type="text/css" rel="stylesheet" media="all" href="${pageContext.request.contextPath}/static/stylesheet/jtable/themes/standard/blue/jtable_blue.css"/>
	</head>
	<body>
		<div id="FourriereTableContainer"></div>
	</body>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.18/jquery-ui.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/javascript/jquery.jtable.js"></script>
	<script>
		$('#FourriereTableContainer').jtable({
			title: 'Liste des Fourrières',
			actions: {
				listAction: '${pageContext.request.contextPath}/jtable/list',
				createAction: '${pageContext.request.contextPath}/jtable/create',
				updateAction: '${pageContext.request.contextPath}/jtable/update',
				deleteAction: '${pageContext.request.contextPath}/jtable/delete'
			},
			fields: {
				id: {
					key: true,
					create: false,
					edit: false,
					list: false
				},
				nom: {
					title: 'Nom',
					width: '25%'
				},
				adresse: {
					title: 'Adresse',
					width: '25%'
				},
				ville: {
					title: 'Ville',
					width: '25%'
				},
				codePostal: {
					title: 'Code postal',
					width: '25%'
				}
			}
		});
		$('#FourriereTableContainer').jtable('load');
	</script>
</html>

Voici en détail le contenu du contrôleur Spring derrière l’action /jtable/list qui permet de retourner les données JSON (avec Jackson) pour que jTable génère un joli tableau :

@RequestMapping(value="/jtable/list", method=RequestMethod.GET)
@ResponseBody
public List listFourrieres() {
	FourriereJtable fourriereJtable = new FourriereJtable();
	// normalement ici appel à votre service métier qui va interroger votre base de données
	Fourriere fourriere1 = new Fourriere(1, "Nom1", "Adresse1", "Ville1", "CodePostal1");
	Fourriere fourriere2 = new Fourriere(2, "Nom2", "Adresse2", "Ville2", "CodePostal2");
	Fourriere fourriere3 = new Fourriere(3, "Nom3", "Adresse3", "Ville3", "CodePostal3");
	List records = new ArrayList();
	records.add(fourriere1);
	records.add(fourriere2);
	records.add(fourriere3);
	fourriereJtable.setResult("OK");
	fourriereJtable.setRecords(records);
	return fourriereJtable;
}

Attention aux Majuscules

Le seul problème est que jTable requiert une majuscule à la première lettre des clés formant le message JSON :

{
 "Result":"OK",
 "Records":[
  {"id":1,"nom":"Benjamin Button","adresse":"17 rue baudin","ville":"levallois", "codePostal","75000"}
 ]
}

Or il me semble que la norme JSON impose des minuscules au niveau des clés du message, en tout cas c’est ce que fait Jackson automatiquement et d’autres bibliothèques Java comme Json-lib ou Json-simple.

Voici donc ce que Spring et Jackson génère en sortie et qui ne plait pas à jTable.js (« result » au lieu de « Result », « records » au lieu de « Records ») :

{
 "result":"OK",
 "records":[
  {"id":1,"nom":"Benjamin Button","adresse":"17 rue baudin","ville":"levallois", "codePostal","75000"}
 ]
}

Je n’ai pas trouvé d’autre moyen que de modifier le code JavaScript de jTable.js directement, en changeant data.Result en data.result, data.Records en data.records et data.Message en data.message.

J’ai appris il y a longtemps qu’il était toujours nécessaire de contrôler et valider les données saisies par vos utilisateurs, du côté client comme du côté serveur (en HTML/JavaScript et en Java pour ma part), car généralement les erreurs ou les attaques viennent de là. Je n’ai jamais apprécié personnellement cette partie du travail car c’est à chaque fois la même chose et à chaque fois on doit tout refaire à la main …

Validation côté client (HTML5)

Avec HTML5 la validation de surface se fait déjà plus aisément, les nombreux « type » paramétrable dans nos champs de saisie limitent considérablement la saisie au mauvais format, exemple : <input type=email>, <input type=date>, <input type=number>, <input type=color> … (liste complète ici avec support des différents navigateurs).

Ensuite de nouveaux attributs ont vu le jour comme required, min, max, list … qui nous évitent de devoir contrôler que le champ est bien saisi, qu’il est compris dans un intervalle donné ou bien qu’il fait partie d’une liste prédéfinie de valeurs.

<form action="" method="post">
<input type="email" name="email" placeholder="Votre email" autofocus="autofocus" required="required" maxlength="100" size="50"/>
<input type="password" name="password" placeholder="Votre mot de passe" required="required" size="50"/>
<input type="number" name="age" placeholder="Votre age" required="required" size="25" min="18"/>
</form>

Dans mon nouveau projet j’utilise HTML5 comme validateur client de surface plutôt que JavaScript.

Les données envoyées au serveur sont au format JSON, la transformation de mon formulaire en objet JSON est faite avec form2js et l’envoi se fait avec jQuery de la façon suivante :

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/maxatwork/form2js/master/src/form2js.js"></script>
<script type="text/javascript" src="https://raw.github.com/maxatwork/form2js/master/src/jquery.toObject.js"></script>
$("form").submit(function(event) {
	var action = $(this).attr('action');
	var formAsObject = $(this).toObject(); // form2js
	$.ajax({
		url: action,
		type: "post",
		data: formAsObject,
		dataType: 'json',
		success: function(jsonFromServer) {
			// callback du serveur
		}
	});
	return false;
});

A retenir : il faut utiliser la méthode « submit » de jQuery sur le formulaire plutôt que la méthode « on » ou « bind » sur le bouton submit car sinon la validation des données en HTML5 ne se fera pas.

Validation côté serveur (Spring3)

C’est là que Spring3 entre en jeu ainsi que ses nombreuses annotations qui nous facilitent la tâche, dans notre cas je parle de @ModelAttribute et @Validated.

@RequestMapping(value="/login", method=RequestMethod.POST)
@ResponseBody
public UserModel login(@Validated({ UserLoginGroup.class }) @ModelAttribute UserModel user, BindingResult result, HttpServletRequest request, HttpServletResponse response) {
	// validation de surface faite avec @annotations
	if (result.hasErrors()) {
		// des erreurs de validation
	} else {
		// aucune erreur de validation en surface
	}
}

La première (@ModelAttribute) permet de transformer automatiquement l’objet json envoyé par notre requête Ajax en objet Java : chaque attribut de l’objet json ayant le même nom (case sensitive) qu’un attribut de l’objet Java sera récupéré automatiquement.

La seconde (@Validated) indique que l’objet annoté doit être validé, la validation est écrite uniquement via des annotations, il en va de même pour les messages d’erreur à retourner. J’utilise les annotations de Hibernate Validator qui offrent un plus grand choix, allant de @Email à @NotBlank en passant par @Future pour valider que la date saisie est dans le futur.

Malheureusement il n’existe encore aucun moyen nativement de comparer deux attributs de l’objet à valider, par exemple « email » et « emailConfirm » ou encore « password » et « passwordConfirm », la communauté s’en est chargé en créant une annotation maison « FieldMatch » que j’utilise et qui marche à merveille, voici le lien vers cette annotation.

Vous l’avez compris, avec Spring3 la validation côté serveur est rendue très simple, voici un copier coller d’un objet que je valide automatiquement avec cette méthode :

@FieldMatch.List({
    @FieldMatch(first = "password", second = "passwordConfirm", message = "Votre confirmation de mot de passe est invalide", groups = { UserRegisterGroup.class }),
    @FieldMatch(first = "email", second = "emailConfirm", message = "Votre confirmation d'email est invalide", groups = { UserRegisterGroup.class })
})
public class UserModel implements Serializable {
	private static final long serialVersionUID = -6014837207296264624L;
	@NotBlank(message = "Votre email est obligatoire", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	@Email(message = "Votre email a un format incorrect", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	@Length(min=3, max=100, message = "Votre email doit faire entre 3 et 100 caractères", groups = { UserLoginGroup.class, UserRegisterGroup.class, UserLostPasswordGroup.class })
	private String email;
	// FieldMatch suffit pour les contrôles
	private String emailConfirm;
	@NotBlank(message = "Votre mot de passe est obligatoire", groups = { UserLoginGroup.class, UserRegisterGroup.class })
	@Length(min=6, max=100, message = "Votre mot de passe doit faire entre 6 et 100 caractères", groups = { UserLoginGroup.class, UserRegisterGroup.class })
	private String password;
	// FieldMatch suffit pour les contrôles
	private String passwordConfirm;
	...
}

J’ai toujours été retissant à l’idée d’utiliser des annotations dans un projet, j’ai toujours manipulé des fichiers de configurations XML et l’idée d’ajouter de la configuration dans mes classes Java m’a toujours semblé contre-nature.

Cependant tous les échos positifs entendus autour de moi quant à l’utilisation des Annotations m’ont fait franchir le pas ce week-end en démarrant un nouveau projet perso full annotations avec Spring MVC et JPA. Voici la façon dont je m’y suis pris pour configurer un tel projet.

Environnement

Voici l’état des lieux des technologies utilisées et de mon environnement de travail :

• Eclipse Helios SR2
• Java 6.0 update 25
• Tomcat 7.0
• Spring 3.1.1
• Hibernate 4.1.1
• MySQL 5.5.8
• JSTL 1.2 et Jackson 1.9.5 (pas utile pour la configuration de base)

Configuration XML

Finalement tout se joue au niveau des fichiers de configuration XML pour une bonne utilisation des annotations que ce soit côté web ou côté service/persistence, rien de bien compliqué en soit, mais il existe tellement de version possible sur la toile qu’il est vite facile de se tromper ou de copier coller n’importe quoi.

• web.xml (src/main/webapp/WEB-INF/web.xml)

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<display-name>Patati Patata</display-name>
	<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
	<context-param>
        <description>Spring configuration file</description>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring/applicationContext.xml</param-value>
	</context-param>
	<!-- Creates the Spring Container shared by all Servlets and Filters -->
	<listener>
        <description>Spring Loader</description>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<!-- Processes application requests -->
	<servlet>
		<description>Spring MVC</description>
        <servlet-name>spring-mvc</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:spring/applicationContext-web.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>spring-mvc</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

• applicationContext.xml (src/main/config/spring/applicationContext.xml)

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:jdbc="http://www.springframework.org/schema/jdbc"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xsi:schemaLocation="
		http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.0.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
		http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">
	<!-- Annotations Scan -->
	<context:annotation-config/>
	<context:component-scan base-package="fr.patati.patata.service, fr.patati.patata.persistence" />
	<!-- Entity Manager Factory -->
	<bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
		<property name="persistenceUnitName" value="monAppliPU" />
	</bean>
	<!-- Transaction Manager -->
	<bean id="transactionManager" class="org.springframework.orm.jpa.JpaTransactionManager">
		<property name="entityManagerFactory" ref="entityManagerFactory" />
	</bean>
	<!-- Transaction Annotations -->
	<tx:annotation-driven proxy-target-class="true" />
	<tx:annotation-driven transaction-manager="transactionManager" />
</beans>

• applicationContext-web.xml (src/main/config/spring/applicationContext-web.xml)

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:beans="http://www.springframework.org/schema/beans"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
		http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">
	<!-- Enables the Spring MVC @Controller programming model -->
	<mvc:annotation-driven />
	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>
	<context:component-scan base-package="fr.patati.patata.web" />
</beans:beans>

• persistence.xml (src/main/config/META-INF/persistence.xml)

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
  	<persistence-unit name="monAppliPU" transaction-type="RESOURCE_LOCAL">
    	<provider>org.hibernate.ejb.HibernatePersistence</provider>
    	<non-jta-data-source>jdbc/monAppliDS</non-jta-data-source>
    	<properties>
      		<property name="hibernate.dialect" value="org.hibernate.dialect.MySQLDialect"/>
      		<property name="hibernate.hbm2ddl.auto" value="update"/>
			<property name="hibernate.show_sql" value="true"/>
    	</properties>
  	</persistence-unit>
</persistence>

• context.xml (src/main/webapp/META-INF/context.xml)

<?xml version="1.0" encoding="UTF-8"?>
<Context>
	<!-- Specify a JDBC datasource -->
	<ResourceLink name="jdbc/monAppliDS" global="jdbc/monAppliDS" type="javax.sql.DataSource"/>
</Context>

• server.xml (Servers/Tomcat v7.0 Server at localhost-config)

<GlobalNamingResources>
    <Resource auth="Container" driverClassName="com.mysql.jdbc.Driver" name="jdbc/monAppliDS" password="XXXX" testOnBorrow="true" type="javax.sql.DataSource" url="jdbc:mysql://localhost:3306/patati_patata_db?autoReconnect=true" username="YYYY" validationQuery="SELECT 1"/>
</GlobalNamingResources>

Ajouter des boutons réseaux sociaux sur son site pour que vos pages soient partagées n’est plus quelque chose de difficile, il suffit de se rendre sur les sites concernés (twitter, facebook ou google+), de choisir son bouton et d’insérer le code généré dans vos pages.

Ces bouts de code à insérer dans vos pages respectent les deux principes suivants :

1. ajout d’une zone html (lien ou calque) qui va servir à recevoir le bouton de partage
2. ajout d’un script javascript qui va permettre de construire le bouton et ses diverses options choisies

Ajout standard

Cette solution standard permet d’obtenir tous les boutons proposés par les réseaux sociaux sur son propre site : grand, petit, vertical, horizontal, avec compteur, sans compteur, etc. Il suffit d’insérer quelques lignes de code et la magie opère au prochain chargement de votre site, vos boutons s’affichent à l’endroit où vous l’aurez choisi.

Cependant pour en arriver au résultat final, beaucoup de requêtes auront été faites et beaucoup de scripts auront été chargés, vous découvrirez ceci en détail dans la partie suivante « ajout simplifié ».

Voici les différents codes à insérer pour offrir à vos utilisateurs la possibilité de partager sur les 3 réseaux sociaux twitter, facebook et google+ :

Twitter

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://magicsupremacy.fr" data-via="xMIMIEx" data-lang="fr">Tweeter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Facebook

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1&appId=109609109136303";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Google+

<!-- Placez cette balise là où vous souhaitez positionner le bouton +1. -->
<div class="g-plusone" data-size="medium" data-href="http://magicsupremacy.fr"></div>
<!-- Placez cet appel d'affichage à l'endroit approprié. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'fr'};
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Ajout simplifié

Contrairement à la première solution, cette solution présente l’énorme avantage de ne pas alourdir vos pages d’1 ko, les boutons de partage sur les 3 réseaux sociaux ne sont que des liens vers la page de partage du réseau social concerné qui a la responsabilité de charger les différents scripts et styles.

<a href="https://twitter.com/share?url=http://magicsupremacy.fr"><img src="tweet.png" alt="tweet"/></a>
<a href="http://www.facebook.com/share.php?u=http://magicsupremacy.fr"><img src="like.png" alt="like"/></a>
<a href="https://plusone.google.com/_/+1/confirm?hl=fr&url=http://magicsupremacy.fr"><img src="plusone.png" alt="plusone"/></a>

Vous l’aurez compris avec cette méthode nous déportons totalement le chargement des scripts des réseaux sociaux qui alourdissent le chargement de nos pages, comme en atteste ce screenshot pris à l’instant qui révèle que l’insertion des différents bouts de code présentés ci-dessus (ajout standard) génère beaucoup de requêtes (21 !) et autant de temps de chargement (plus d’1/2 secondes) :

L’inconvénient de cette méthode est qu’il n’est pas possible de visualiser depuis son site le nombre de partage par le biais de tel ou tel réseau social. J’ai personnellement opté pour cette option depuis aujourd’hui sur mon site magic.

C’est en ajoutant récemment un bouton de paiement Paypal sur mon site magic que j’ai remarqué que l’assistant de création de boutons proposé par Paypal ne permettait finalement uniquement d’intégrer un bouton image sur son site et non pas un simple lien.

Pour ma part j’ai regretté cette alternative, j’ai donc dû la trouver moi-même, vous préférez un bouton image ? copiez-collez le code généré par Paypal, vous souhaitez un simple lien discret ? utilisez l’alternative javascript proposé ci-dessous.

Bouton image

Je vais prendre l’exemple du bouton de paiement « Dons » mais le code généré par l’assistant Paypal est très ressemblant pour l’ensemble de ses boutons, à savoir « Panier », « Acheter », « Dons », « Chèques-cadeaux » et « Abonnements ».

Voici le genre de code qu’il vous faudra copier-coller pour avoir un bouton image « Dons » sur votre site :

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="AABBCCDDEEFFGG">
    <input type="image" src="https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">
    <img alt="" border="0" src="https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif" width="1" height="1">
</form>

Lien texte

Pour obtenir un lien « Dons », il existe deux façons, j’utilise personnellement la seconde car elle permet de masquer intégralement l’identifiant unique du bouton enregistré au niveau du compte.

• Sans Javascript

Cette façon est très simple et correspond finalement à ce que propose déjà Paypal au niveau de l’onglet « Email » une fois le bouton généré, je lui reproche simplement le fait que nous voyons l’identifiant privé du bouton qui apparaît en bas du navigateur lors du survol du lien avec la souris :

<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=AABBCCDDEEFFGG" title="PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !">Dons</a>

• Avec Javascript

Cette façon est invisible et inodore, nous obtenons un lien qui ne fait apparaître nul part l’identifiant du bouton et renvoi exactement au même point qu’un bouton image dont le code a été présenté ci-dessus. En effet nous générons en javascript le formulaire de l’image bouton et le soumettons dans le même temps pour se rendre sur la page Paypal, de façon transparente pour l’utilisateur.

Voici un exemple en utilisant la bibliothèque jQuery :

<a id="donate">Dons</a>

$('#donate').bind('click', function() {
	var paypal_dons_form =
		"<form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\">" +
			"<input type=\"hidden\" name=\"cmd\" value=\"_s-xclick\">" +
			"<input type=\"hidden\" name=\"hosted_button_id\" value=\"AABBCCDDEEFFGG\">" +
			"<input type=\"image\" src=\"https://www.paypalobjects.com/fr_FR/FR/i/btn/btn_donate_SM.gif\" border=\"0\" name=\"submit\" alt=\"PayPal - la solution de paiement en ligne la plus simple et la plus sécurisée !\">" +
			"<img alt=\"\" border=\"0\" src=\"https://www.paypalobjects.com/fr_FR/i/scr/pixel.gif\" width=\"1\" height=\"1\">" +
		"</form>";
	// génère un formulaire virtuel à la volée pour soumettre puis le supprime
	$(paypal_dons_form).appendTo('body').submit().remove();
});

Voici ce que cela donne pour de vrai, visible au niveau du bas de page : lien de dons sur magicsupremacy

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 :

<div id="carouselWrapper">
	<div id="carousel">
		<div class="work">
			<img src="/img/portfolio/magicsupremacy.jpg" alt="Magic Supremacy" width="450" height="350" />
			<h3>Magic Supremacy</h3>
			<p>
				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 !
			</p>
			<a href="http://magicsupremacy.fr" target="_blank" title="Magic Supremacy">Visiter le site »</a>
		</div>
		<div class="work">
			<img src="/img/portfolio/desgeeksetdeslettres.jpg" alt="Des Geeks et des lettres" width="450" height="350" />
			<h3>Des Geeks et des lettres</h3>
			<p>
				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 <em>agence web</em>.
			</p>
			<a href="http://desgeeksetdeslettres.com/blog" target="_blank" title="Des Geeks et des lettres">Visiter le site »</a>
		</div>
		<div class="work">
			<img src="/img/portfolio/agencewebdesigner.jpg" alt="Agence Web-Designer" width="450" height="350" />
			<h3>Agence Web-Designer</h3>
			<p>
				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.
			</p>
			<a href="http://agence-web-designer.fr" target="_blank" title="Agence Web-Designer">Visiter le site »</a>
		</div>
	</div>
	<a id="prev" href="#" title="Précédent"><span></span></a>
	<a id="next" href="#" title="Suivant"><span></span></a>
</div>

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 :

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

<form action="" id="formContact">
	<label for="nom">Nom</label>
	<input type="text" id="nom"/><br/>
	<label for="prenom">Prénom</label>
	<input type="text" id="prenom"/><br/>
	<label for="age">Age</label>
	<input type="text" id="age"/><br/>
	<input type="submit" value="Envoyer"/>
</form>

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.

• JS

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#formContact').submit(function() {
				var contact = {
					nom : $('#nom').val(),
					prenom : $('#prenom').val(),
					age : $('#age').val()
				};
				$.ajax({
					type: 'POST',
					url: 'contact.do',
					data: contact,
					success: function() {
						alert("fin du traitement java");
					}
				});
				return false;
			});
		});
	</script>

• 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

• JS

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/json2.js"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#formContact').submit(function() {
				var contact = {
					nom : $('#nom').val(),
					prenom : $('#prenom').val(),
					age : $('#age').val()
				};
				$.ajax({
					type: 'POST',
					url: 'contact.do',
					data: 'contact=' + JSON.stringify(contact),
					success: function() {
						alert("fin du traitement java");
					}
				});
				return false;
			});
		});
	</script>

• 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

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

1. var
2. Constants
3. Semicolons
4. Nested functions
5. Function Declarations Within Blocks
6. Exceptions
7. Custom exceptions
8. Standards features
9. Wrapper objects for primitive types
10. Multi-level prototype hierarchies
11. Method definitions
12. Closures
13. eval()
14. with() {}
15. this
16. for-in loop
17. Associative Arrays
18. Multiline string literals
19. Array and Object literals
20. Modifying prototypes of builtin objects
21. Internet Explorer’s Conditional Comments

• JavaScript Style Rules

1. Naming
2. Custom toString() methods
3. Deferred initialization
4. Explicit scope
5. Code formatting
6. Parentheses
7. Strings Visibility (private and protected fields)
8. JavaScript Types
9. Comments
10. Inner Classes and Enums
11. Compiling
12. Tips and Tricks

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 <img/> 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 :

<img src="http://www.gravatar.com/avatar/monadresseemail@gmail.com">

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.

<img src="http://www.gravatar.com/avatar/f628cd552adb34c7601d18bb0b94611f">

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

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
" http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
	<tlibversion>1.0</tlibversion>
	<jspversion>1.2</jspversion>
	<shortname>Gravatar</shortname>
	<tag>
		<name>image</name>
		<tagclass>fr.mtg.supremacy.taglib.GravatarImageTag</tagclass>
		<bodycontent>empty</bodycontent>
		<info>Get avatar image from gravatar.com for the given email</info>
		<attribute>
			<name>email</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>alt</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>size</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>className</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>defaultImage</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>rating</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>
</taglib>

• Fichier web.xml

...
<jsp-config>
	<taglib>
		<taglib-uri>gravatar.tld</taglib-uri>
		<taglib-location>/WEB-INF/tld/gravatar.tld</taglib-location>
	</taglib>
</jsp-config>
...

• 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("<img src=\"");
			img.append(avatar_url);
			img.append("?size=" + size);
			img.append("&d=" + defaultImage);
			img.append("&r=" + rating + "\"");
			img.append(" alt=\"" + alt + "\"");
			img.append(" class=\"" + className + "\"");
			img.append("/>");
			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" %>
<gravatar:profil email="mon.adresse.email@gmail.com"/>

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 » :

1. 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.
2. 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("<hr>");
			out.println("<center><h3>You are viewing a non-interactive page that is intended for the crawler.  You probably want to see this page: <a href=\""
					+ pageName + "\">" + pageName + "</a></h3></center>");
			out.println("<hr>");
			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

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.

• CSS

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
}

• JS

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.

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é) :

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
	<channel>
		<title>Les derniers Tournois ajoutés sur Magic Supremacy</title>
		<link>http://magicsupremacy.fr/index.jsp#!menu=deck&submenu=search_by_events</link>
		<description>Une liste des derniers Tournois Magic l'Assemblée ajoutés, tout format confondu</description>
		<webMaster>admin@magicsupremacy.fr</webMaster>
		<item>
			<title>Magic Online Premier #2853353 - Pauper</title>
			<link>http://magicsupremacy.fr/index.jsp#!menu=deck&event=115</link>
			<description>description simplifiée du tournoi #2853353</description>
			<author>Admin</author>
			<pubDate>sam., 24 sept. 2011 09:11:00 CEST</pubDate>
		</item>
		<item>
			<title>Magic Online Premier #2853358 - Standard 2010-2011 [ZEN M11 SOM]</title>
			<link>http://magicsupremacy.fr/index.jsp#!menu=deck&event=114</link>
			<description>description simplifiée du tournoi #2853358</description>
			<author>Admin</author>
			<pubDate>dim., 25 sept. 2011 17:23:00 CEST</pubDate>
		</item>
	</channel>
</rss>

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.