On savait que le logo présent sur la page d'accueil du site de Google pouvait être différent d'une journée à l'autre. On avait cependant peu l'habitude de voir le logo de la marque évoluer dynamiquement à l'ouverture de la page. Ainsi, le 04 Janvier 2010, le logo de la marque était paré d'un arbre, sur lequel était accroché des pommes, et une d'entre elles finissait par tomber une fois la page chargée.

Nous ne nous occupons pas du fond de l'image, à savoir que Google rendait hommage à Isaac Newton, qui aurait fêté ses 367 ans ce jour-là. Ce qui nous intéresse, c'est la technique utilisée pour réaliser cet artifice très attrayant, reproduit sur cette page.

Une chose qui est très dommage avec cette animation, c'est qu'on n'a pas vraiment le temps d'y voir quoi que ce soit. La plupart étant sur le coup interloqué, ne sachant pas quoi en penser. Il parait donc nécessaire, si on veut comprendre la chose, de reproduire cette expérience, afin de pouvoir en tirer profit.

Les développeurs web ont plusieurs possibilités pour réaliser la pomme qui semble tomber dans la page. Il existe pour cela le format d'image gif, qui permet de faire des animations dans les images directement, mais qui est depuis longtemps obsolète. Certains pourront opter pour le choix de flash, qui permet de réaliser des animations très rapidement, mais qui ne possède pas que des avantages, notamment son poids et sa portabilité très gênante pour les utilisateurs. Google a lui opté pour la meilleure solution, un savant mélange d'images bien choisies et de calculs écrits dans du code javascript, à la fois très léger et très opérationnel.

Ce qui est amusant avec ce type d'animation, c'est qu'à chercher à l'élucider, on peut y remarquer toutes sortes de choses. Ayant regardé de près la page de Google, le code source n'était déjà pas aux normes et le javascript peu extensible ni réutilisable.

Il va falloir faire pas mal de modifications, tout reprendre à zéro en définitive, commencer par généraliser et paramètrer, avant de pouvoir commencer à s'amuser. Toujours est-il que Google montre ici, comment, en quelques lignes, proposer un logo dynamique beaucoup plus intéressant, et réaliser un modèle d'animation de chute d'une pomme accrochée à un arbre. Il n'aura fallu que d'une image d'arrière-plan, d'une image transparente représentant la pomme, et d'un tout petit peu de calcul pour arriver à un tel résultat.

Ce qui serait amusant, ce serait de reprendre ce petit bout de code, et d'essayer de l'améliorer. On pourrait bien sûr se demander, par exemple, s'il ne serait pas plus judicieux que cette pomme tombe uniquement si l'utilisateur clic dessus, afin de rendre l'animation plus attractive et interactive. On peut essayer également de voir si cette pomme ne pourrait pas tomber à droite à la place du côté gauche, ou s'il est vraiment nécessaire d'avoir le logo Google.

Une chose qui serait beaucoup plus intéressante encore, serait de pouvoir faire remonter la pomme sur sa branche, et de choisir la hauteur du sol. Il serait peut-être intéressant également de ralentir cette pomme si on souhaitait la voir tomber plus lentement. Ceci nous permettrait entre autres de pouvoir comprendre ce qu'il s'est passé, et d'analyser la décomposition du mouvement.

Ce qui serait également intéressant, ce serait de pouvoir faire en sorte que toutes les jolies pommes que composent la branche puissent elles aussi tomber. Effectivement, la pauvre pomme précédente se sentait bien isolée. Malheureusement, elle devra quand même s'apercevoir que la gravité n'est pas la même pour toutes les pommes.

Newton n'en saurait déjà plus où donner de la tête ! Mais la chose qui serait vraiment merveilleuse, c'est que cette jolie petite animation soit reproductible, et alors là, on sauterait de joie, et on se laisserait même aller à l'envie de secouer les branches pour tout faire tomber d'un coup.

Ah, ça non plus, ce n'était pas prévu. Décidément, la gravité n'est pas la même pour tous !

Vous pouvez retrouver d'autres animations de ce genre, réalisée uniquement avec javascript et un composé d'images et de photos approprié. Vous pouvez visiter la page beaucoup plus sophistiquée du Conseil Municipal de la commune de Hottviller sur le site en question, et la page des galeries de photos réalisée pour l'occasion, animées et interactives.

Vous pouvez trouver en lien d'autres animations, moins importantes mais qui font également leur effet, la page de présentation du logement et de l'urbanisme, celle présentant le savoir-vivre de la commune, et sa localisation territoriale.

Bien sûr, chacune de ces animations fonctionne quel que soit le système d'exploitation et le navigateur de l'utilisateur. Le site de la commune de Hottviller ayant également fait ses preuves sur iphone.