nyroBlog

Tag : Internet


Chips, Twix et Mix

Des news d'ici et d'ailleurs :

  • Prism sort en version 0.9
  • Si vous chercher l'extension ultime pour rechercher vos messages dans Thunderbird, Seek est votre ami
  • Firefox sort en beta 4. Encore une beta 5 avant laversion finale. A noter les améliorations de mémoire.
  • IE8 sort en beta
  • Les résultats des navigateurs en beta à l'acid test 3
  • Vous travaillez sur une version mobile d'un site ? Lisez ceci pour connaitre les bonnes pratiques
  • jQuery organise un worldwide sprint ce week-end spécialement pour jQuery UI
  • On parle de plus en plus de Piwik
  • TinyMCE sort en version 3.0.5
  • Netvibes évolue vers le réseau social, sous le nom de Ginger. Ma page est ici, et devrait se remplir ce week-end.
  • Marre de créer vos htaccess à la main ? La solution en ligne.
  • Après l'Air Guitar, Canal Plus lance l'Air Fuck : filmez-vous et gagner un scooter (wahou, un scooter, j'en ai toujours rêver...)
  • Les LoKataires, amis et artistes que j'adore, ont maintenant leur clip, simplement nommé le LoKaclip (Bravo à Pitch pour le montage !)

Nouvelle page pour NyroBlog : Informations légales

Je viens d'ajouter une nouvelle page à NyroBlog, les informations légales. La plupart du temps on n'y prête pas attention, mais elle est pourtant importante.

Pourquoi cet ajout maintenant ?

  • Google Adsense a modifié récemment ses termes d'utilisation en ajoutant l'obligation d'indiquer dans la page des mentions légales que des cookies peuvent être enregistré par des tiers (les annonceurs donc)
  • Cette page devrait exister depuis le premier jour de la mise en ligne de ce site.
  • Dans tous les sites sur lesquels je travaille chez Fluidesign, cette page est toujours présente.

Pour la réaliser, je me suis inspiré de deux pages différentes :

Je vous invite donc à la lire et de me donner votre avis, vos remarques ou vos suggestions. Tout à la fois est aussi possible.

Je vais contacter deux enseignants de droit que j'ai eu pour savoir leur avis, je vous donnerai plus d'infos quand j'aurai leur réponse.

Tutoriel : transformer un site pour recharger les pages en Ajax

Aujourd'hui, j'ai implanté sur un site un chargement des pages en Ajax parce que le site intégre un petit lecteur son et couper le son à chaque fois et quelque chose qui n'est pas des plus agréable. Le résultat est le même site avec un rechargement des pages en Ajax, sans pour autant perdre en accessibilité, puisque la source HTML n'a été en aucun cas modifié.

J'ai fait ça rapidement en utilisant notamment grâce à jQuery. Comme la méthode utilisée peut servir à d'autres, je vais vous décrire étape par étape comment j'ai procédé.
Le site sur lequel j'ai réalisé ça était très petit est très simple : Amandine Café. Mais rien de mieux que de s'exercer sur un petit exemple pour ensuite l'appliquer à des projets plus conséquents.

L'étude du site actuel

La première chose à faire est de naviguer sur le site de fond en comble pour en déduire les zones fixes et les zones à recharger. Il faudra identifier quels liens vont recharger quelles zones, et tout ce que cela va engendrer au niveau de la page qui ne sera pas rechargé comme elle l'ai actuellement. On pense ici aux éventuels contrôles javascript qui peuvent ne pas fonctionner correctement. Il faut les noter pour les corriger au dernier moment.
Le tour du propriétaire s'est fait très vite pour moi puisque le site n'intègre pas de sous navigations et ne contient que 5 pages. On peut identifier 3 zones délimiter par des div avec les identifiants header, page et footer. Seule la div#page change selon les pages. C'est donc uniquement ce contenu que nous allons recharger en Ajax.

La préparation du côté PHP

Avant de s'attaquer au javascript, nous allons modifier les fichiers PHP de nos pages. Lors du chargement Ajax de nos pages, nous n'allons pas recharger la page complète, mais uniquement le contenu à modifier. Et pour plus de simplicité et de flexibilité du site, nous allons utiliser les mêmes URL que les liens réels. Il faut donc être capable du côté de PHP de n'afficher que le contenu demandé, sans les parties head de la page, ou les div fixes. Si vous ne pouvez –voulez– pas réaliser ceci, regarder du côté du petit bonus un peu plus bas...
Le plus simple pour réaliser ceci est de mettre les parties fixes dans des fichiers séparés, nommés au hasard header.php et footer.php. Ces fichiers sont inclus dans toutes les pages; ce qui est d'aileurs peut-être déjà le cas, grâce à include. Il va donc s'agir de n'afficher ses parties que lorsqu'on est pas dans une requête Ajax. Rien de plus simple, nous allons écrire une fonction PHP isAjax. L'inclusion des fichiers header.php et footer.php se fera donc à la seule condition que isAjax est faux. Autrement dit:
if (!isAjax())
    inlcude('header.php');

La fonction isAjax est, comme vous allez le voir, très très compliqué :
function isAjax() {
    return array_key_exists('HTTP_X_REQUESTED_WITH', $_SERVER);
}
En effet, jQueryPrototype aussi, je ne sais pas pour les autres– ajoute un élément HTTP_X_REQUESTED_WITH dans la requête que l'on peut récupérer avec la variable globale $_SERVER.
Nous en avons donc terminé avec la préparation des pages PHP, qui vont être capable de fournir des versions light des pages spécialement pour les requêtes Ajax.

L'installation du Javascript

Nous en arrivons donc à la programmation véritable des requêtes Ajax. Pour garder un site totalement accessible, qui fonctionnera exactement de la même façon sans Javascript, nous n'allons en aucun cas modifier les sources HTML des pages actuelles. Nous allons plutôt inclure jQuery dans toues les pages, et un autre fichier javascript contenant le code qui va arriver.
Le schéma du script sera le suivant :
  1. Au chargement de la page, intercepter tous les liens qui pointent vers des pages .php
  2. A ces liens, leur appliquer une fonction sur le click pour procéder à la requête Ajax plutôt qu'au changement de page
  3. Lors du click, appelez en Ajax la page demandée (avec la même url) et intégrer le résultat là où on le désire.
  4. Arrêter la propagation du click
Pour jQuery, on écrira ceci d'une façon très simple :
$(function() {
    $('a[href*=.php]').click(function() {
       $('#page').load(this.href);
return false;
    });
});
Très court, n'est-ce pas ?
Bien sûr, cet exemple ne fonctionnera pas dans tous les cas. Dans mon cas par exemple, je dois modifier l'identifiant du body en fonction de la page demandée pour changer le lien en marron du menu. Pour ce faire, on peut utiliser le 3ème paramètre de la fonction load qui sera appelé une fois le chargement ajax terminé. Voilà à quoi ressemble ma fonction :
$(function() {
    $('a[href*=.php]').click(function() {
        $('#page').load(this.href, null, function() {
        $('body').attr('id', this.href.substring(this.href.indexOf('.')));
        });
return false;
    });
});
Bon dans la réalité, ce n'est pas du tout ça, mais c'est car vraiment spécifique au site.

Petit Bonus

Si vous ne pouvez –voulez– pas mettre en place le découpage du fichier spécifique en PHP pour les reqêtes Ajax, ne jetez pas l'éponge tout de suite ! Il serait tout d'abord possible de mettre à jour la page complète, mais cela ne serait pas très propre et engendrai sûrement beaucoup d'autres problèmes.
Mais jQuery est là pour nous aidé. En effet, dans l'URL de la fonction load, il est possible de spécifier un sélecteur HTML pour filtrer le résultat et ainsi n'afficher que ce qui nous intéresse.
Dans mon exemple, l'appel à la fonction load deviendrait simplement :
$('#page').load(this.href+' #page');

Je ne vous conseille pas cette technique, puisque cela veut dire que vous allez recharger la page complète, donc on perd un peu l'utilité de l'Ajax qui est de réduire les transferts de données entre le client et le serveur.

Et si c'est plus compliqué ?

A vous de faire preuve d'imagination !
Comme j'ai déjà beaucoup réfléchi à la question, je vous donnerai plusieurs pistes d'ici une semaine au deux. Ce billet est déjà bien conséquent et vous pouvez déjà vous amuser. Enfin, j'espère que vous ne m'attendiez pas pour ça... Ou bien si vous avez un site sur lequel vous aimeriez implémenter une telle solution, demandez-moi et je ferai mon exemple dessus.

La parole est à vous !

Comment trouvez-vous ce billet ? Intéressant, totalement inutile, peut mieux faire ?
Avez-vous des questions par rapport à ça ? des suggestions ?
Utilisez les commentaires !

English Version of this post

Chips, Twix et Mix

Des news d'ici et d'ailleurs :

Pas forcément très variés comme info, mais c'est ce qui m'a intéressé ces 2 dernières semaines

PS : J'ai réfléchi longtemps pour le titre (que je n'ai pas encore trouvé en écrivant ça)

Orange/LaPoste, même combat ?

J'étais tranquillement en train de rédiger un rapport pour l'UTBM, que je reçois un mail sur mon compte laposte.net. Une pub indiquant que le webmail a changé, qu'il est super bien, etc...

Comme je suis curieux, je clique bêtement pour arriver sur un site très pauvre en contenu : simplement 3 vidéos, de quoi les partager, et un lien vers un autre site expliquant ce qui est nouveau. Les vidéos sont un temps soit peu rigolotes, mais longues à charger (traverser l'Atlantique n'est pas une chose aisée apparemment).

Après visionnage tant bien que mal des 3 vidéos (oui, je n'ai pas grand chose à faire aujourd'hui), je regarde le site explicatif des nouveautés. Là encore, très peu de contenu : une vidéo présentant rapidement les nouveautés et une FAQ, vraissemblablement reprise du site laposte.net, puisqu'on y retrouve la question : "Comment paramétrer Outlook ?"

Mais dès la 1ère image du webmail, j'ai une sensation de déjà vue. La façon dont sont affiché les listings me rappellent étrangement un autre mail, mais je ne vois pas tout de suite lequel. Et puis à la dernière diapo, celui des préférences, ça me revient : il s'agit du webmail d'Orange.

Ni une ni deux, je me connecte sur les 2 webmails pour faire la comparaison. Aucun doute, il s'agit bel et bien du même webmail.
Préférences du webmail Orange Préférences du webmail Laposte
(Cliquez pour agrandir)

Dans ma lancée, je vais regarder du côté des sources javascript et CSS de laposte, pour en être totalement sûr. Il est tout à fait possible que ce webmail soit une application payante ou bien fourni par un quelconque service. Mais non, voici quelques extraits de ce que j'ai trouvé :

var ORANGE_EMAIL = "LaPoste.Net";
function SmsInbox()
{
 self.location = "http://r.wanadoo.fr/r/WGsmsrecus";
}

Et puis du côté des CSS, j'ai trouvé ceci, tout en tête de la principale feuille de style :

/* Recommandations pour les modifications ATOS en phase d'integration Next
   Indiquer les modifications par :
   ATOS - DEBUT MODIF
   ATOS - FIN MODIF
  + mettre en commentaire l'ancienne ligne */

Et à regarder dans la CSS, on ne trouve que 3 endroits avec ce genre de commentaires. Sans doute la raison pour laquelle les 2 webmails sont si proches.

Mais alors pourquoi tout ça ?

  1. Le coût : La Poste a toujours cherché à promouvoir son outil de messagerie car peu utilisé et donc non rentable. L'installation du webmail Orange par une entreprise tierce est une bonne affaire.
  2. Orange gagne donc de la pub "gratuite". En échange, le webmail affiche de nombreuses pubs pour Orange en haut et à droite.
  3. Les services mobiles. Les options d'alertes SMS et autres fonctionnalités mobiles sont pour l'instant non disponibles. C'est à tous les coups Orange qui va s'occuper de ça et gagner encore quelques sous de plus.

Et au final, je pense que la poste ne gagnera pas grand chose, ni grand monde. Le webmail bien que plus avancé que celui d'avant est selon moins très mauvais d'un point de vue ergonomique. L'affichage des pubs ralentit gravement l'affichage des pages, qui se rechargent d'ailleurs à chaque clique. Pas d'ajax pour recharger les pages ce qui gagnerait du temps. Forcément, il faut bien rafraichir les pubs.

L'email envoyé et leur campagne de pub m'avait l'air sympa et avec un bon budget derrière. Les 2 sites m'ont totalement déçu, avec aucun réel contenu.

De tout façon, quand David Asher arrivera avec la version 3 de Thunderbird et tout un tas de nouvelles idées, adieux les webmails...