Mise en place de Facebook Connect

La mise en place de Facebook Connect a été relativement simple à réaliser sur aviresto.com. Dans un premier temps, l’objectif était de faciliter le dépôt d’avis et leur diffusion sur le réseau social n°1, à savoir Facebook. Après quelques recherches sur le net et sur le blog http://blog.facebook.com,  on trouve facilement la documentation nécessaire pour l’intégration des APIs Javascript et PHP.

Intérêt sur le guide aviresto.com

L’intérêt sur aviresto.com a vite été limité :

• connexion sur aviresto.com : intégration du bouton Facebok Connect pour faciliter la saisie des infos (email, nom, site web). Le problème rapidement rencontré vient du fait que l’adresse email ne peut pas être récupérée, seule une adresse email « proxy » Facebook est récupérable.
• diffusion des avis sur Facebook : afin de garder une certaine qualité dans les avis, je tenais à valider tous les avis avant diffusion sur aviresto.com et autres réseaux sociaux satellites : de ce fait, une demande de permissions pour pouvoir écrire sur le mur du dépositaire de l’avis en mode déconnecté était nécessaire.

Statistiques d’utilisation sur aviresto.com

Les statistiques d’utilisation de Facebook Connect sur aviresto.com sont éloquentes. En un peu plus d’un mois et un peu plus 30000 visiteurs plus tard, seuls 3 avis ont été déposés sur aviresto.com par l’intermédiaire de Facebook Connect (hormis les miens) et aucun d’entre eux n’a pu être diffusé sur le réseau Facebook faute de permissions suffisantes.

Sur la même période, environ 300 avis ont été déposés sans utilisation du bouton Facebook Connect ! L’impact de Facebook Connect est donc négligeable et je ne pense pas que ce mode de connexion incite au dépôt d’avis (au moins dans mon cas).

Suppression (temporaire) de la fonctionnalité Facebook Connect sur aviresto.com

Vous allez me dire que cela ne mange pas de pain ! Bien sûr, sauf que ça n’apporte pas grand chose et en ce moment, Facebook (ou tout du moins son API) est plus souvent en rade qu’opérationnel. Du coup, plutôt que de pénaliser le guide aviresto, j’ai préféré supprimer cette fonctionnalité.

Elle reviendra surement un jour ou l’autre sous une autre forme… affaire à suivre !

En savoir plus :

1. aviresto.com : votre guide restaurant communautaire Il est grand temps pour moi de vous présenter le...
2. CreaResto.fr : création sites Internet gratuits pour restaurant Ce n’est pas en 2010 que je vais me reposer....
3. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....

La plupart de ces remarques sont applicables par extension au langage Javascript et même à tout langage de programmation afin d’en optimiser les performances ou d’en faciliter la lecture.
jQuery : Les bonnes pratiques.

En complément de cet article, je rajouterai un lien vers le site de Sébastien Derrey sur lequel vous pourrez trouver de nombreux exemples commentés et en Français relatifs à l’utilisation de jQuery.
jQuery : Framework Javascript.

En savoir plus :

1. Calendrier jQuery Dans la famille ressources utiles, je demande le calendrier Javascript....
2. Le webdesign léger illustré Avec beaucoup de retard, je vous relaye ce guide que j’ai...
3. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...

Ce petit billet n’est donc pas un tutoriel, mais juste une présentation du service fournit par Google.

Résumé du vocabulaire

CPC : Coût Par Clic

CPM : Coût Par Mille impressions

CPA : Coût par action

Capping : Limitation du nombre d’affichages d’une publicité pour un visiteur et sur une période donée.

Présentation et fonctionnalités

Voici le schéma explicatif disponible en page d’accueil de Google Ad Manager.

On peut y remarquer deux points importants :

• Les annonces peuvent provenir d’Adsense ou d’autres réseaux publicitaires. C’est un point qui m’intéresse particulièrement afin de pouvoir mixer des publicités de différentes régies et afin que les publicités AdSense prennent automatiquement la suite en cas de pénurie chez les régies.
• Il y a une notion de rendement implicite à Google AdManager basée  a priori sur une logique de CPM. Google n’étant pas en mesure de comptabiliser les clics sur de bannières flash par exemple, ni de connaitre les CPC ou CPA des programmes externes, vous devrez renseigner un CPM estimé à la création du programme. Ce CPM devra être assez élevé pour que la publicité soit diffusée, car Google AdManager privilégie les programmes en fonction de leur CPM.

La prise en main de Google AdManager n’est pas des plus faciles et il faut comprendre le vocabulaire utilisé dans l’outil et principalement la différence entre les inventaires et les emplacements publicitaire, mais tout est relativement bien expliqué dans les tutoriels mis à disposition sur le site pour peu qu’on prenne la peine de les suivre ou de les lire. On notera également qu’il est facile de jouer sur le capping des programmes ou encore de profiter des services de Google pour associer de la géolocalisation à certains programmes.

La mise en place de l’outil est elle très simple : trois petites lignes de Javascript sont à ajouter sur chaque page de votre site Internet qui comportera des publicités issues de Google AdManager. Certaines lignes pourront d’ailleurs être factorisées si vous utilisez plusieurs emplacement publicitaires sur une même page.

Conclusion

En résumé, AdManager est un bon produit qui manque toutefois un peu de maturité. Le site apparaît régulièrement en « maintenance », ce qui n’est pas bloquant car les affichages publicitaires continuent heureusement de fonctionner. Il permet aisément de planifier des campagnes publicitaires, d’en gérer et d’en optimiser les performances, de vendre des emplacements publicitaires directement à ses propres annonceurs.

De plus, j’ai actuellement un problème de performance avec Google AdManager que j’essaye de résoudre, mais il semble que je ne sois pas le seul dans ce cas. La préparation des publicités met parfois jusqu’à une seconde d’exécution en Javascript, ce qui forcément pénalise le site Internet !

En savoir plus :

1. DFP Small Business : Google AdManager évolue Pour le moment, on n’en sait pas grand chose, mais...
2. Ressources pour Google Adsense C’est article n’est qu’une reprise d’une étude parue sur le...
3. Google Adsense pour les domaines Depuis le mois de février, il existe une nouvelle déclinaison...

Calendrier jquery

Il dispose de nombreuses options telles que la possibilité d’interdire la saisie de certaines dates, celle de préselectionner une date ou de choisir celle du jour… Il supporte aussi un grand nombre de format de dates, dont le format français jj/mm/aaaa qui nous intéresse plus particulièrement. Un grand nombre classes CSS permettent également de l’adapter aisément au look de votre site.

Plutôt que de longs discours, voici le lien vers un calendrier développé en Javascript, utilisant le framework jQuery, très simple à mettre en place.

Lien : http://jqueryui.com/demos/datepicker/

PS : Pour informations, ce calendrier a également été utilisé sur aviresto.com dans la partie organisation de sortie au restaurant.

En savoir plus :

1. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je...
3. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...

Ce qui pêche dans Google Analytics, c’est l’ergonomie et l’utilisabilité ! Vous avez surement comme moi passé au moins 10 minutes à trouver le code du marqueur javascript à inclure dans vos pages…

Pour vous simplifier la vie lorsque vous souhaiterez compter les clics des internautes sur certains de vos objets, voici un article détaillé présentant la méthode à suivre.

J’ajouterai juste que le fichier javascript ga.js se situe à l’adresse : http://www.google-analytics.com/ga.js. Laissez-le sur le serveur de Google : vous économiserez de la bande passante, et surtout lorsque Google Analytics fera des mises à jour, elles seront transparentes.
Article Google Analytics sur noid.fr

En savoir plus :

1. Widget Google Analytics Netvibes / iGoogle Petit article rapide pour vous présenter un widget bien pratique...
2. Intégrez votre compte Adsense à Google Analytics C’est une évolution que Google prépare depuis un bon moment,...
3. Nouveaux referers chez Google Petit billet rapide pour vous faire suivre un article sur...

Dom Inspector (version 2.0.3)

Dom Inspector est une extension qui vous permettra de voir le contenu de votre page sous forme d’arbre HTML comme le montre l’exemple suivant.

Cette fonctionnalité s’avère pratique mais pas autant que celle nommée « Display Element Information » présente au sein de l’extension Web Developper détaillée juste après.

Web Developer (version 1.1.6)

Je pense qu’il s’agit de l’extension la plus intéressante de ce panel. Elle permet de retrouver des références à des images cassées, de désactiver une ou plusieurs feuilles de style CSS, la gestion des cookies, l’exécution de Javascript.

Il est également possible d’éditer une feuille de style directement depuis le navigateur pour tester rapidement des changement ou bien de retrouver facilement les styles d’un élément particulier avec l’option « Display Element Information » depuis le menu « Information ». Une autre fonctionnalité intéressante est la retaille de la fenêtre aux dimensions standards (800×600, 1024×768….) pour vérifier la compatibilité de votre site.

Firebug (version 1.33)

Firebug possède certaines fonctionnalités similaires au plugin Web Developper, mais la fonctionnalité la plus intéressante est sans aucun doute la console permettant d’analyser tous les appels HTTP effectués depuis une page. Cela permet de débugger très facilement toute intégration d’AJAX au sein de votre site web.

Cette extension permet aussi d’analyser les temps de chargement de vos ressources externes (scripts javascript, feuilles de style, images…).

IE Tab (version1.5.2)

Comme je vous l’avais dit dans un précédent post, ce plugin est utile et vous permettra la navigation de votre site internet sous Internet Explorer tout en restant dans un onglet Firefox. Quel avantage par rapport à un Internet Explorer standard ? Juste un clic sur le plugin et le rendu de la page courante s’opère avec Firefox… imaginez un peu le temps gagné !

Téléchargement des extensions

• Dom Inspector
• Web Developer
• Firebug
• IE Tab

Vous avez des plugins à conseiller ? Laissez un commentaire sur cet article et dites-nous tous vos secrets…

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...
3. CreaResto.fr : création sites Internet gratuits pour restaurant Ce n’est pas en 2010 que je vais me reposer....

En tout cas, moi j’aime ! Je trouve que ça a tendance à alléger le design tout en s’intégrant bien et surtout cela améliore l’ergonomie.
En voici un bel exemple d’utilisation, capturé sur le site maville.com, où en plus de la bonne intégration, la popup est bien travaillée et complète.

En plus, du point de vue du développement, ces popups modales s’intègrent en général très facilement et il existe de nombreuses ressources adaptées à différents cas d’utilisation :

• LightBox : il s’agit sûrement du plus connu de ces systèmes. Il ne permet cependant d’afficher que des images. L’avantage de ce script est qu’il bénéficie d’un nombre important d’effets de chargement et de transition entre images…
• ThickBox : ThickBox est une « version étendue de LightBox » qui permet pour sa part d’afficher de façon modale des formulaires, des iframes….
• il en existe encore de nombreux autres tels que : HighSlide JS, SlimBox, Sexy Lightbox, ClearBox, VideoBox, ModalBox, Lightview…

Pour finir, je vous laisse cet article intéressant qui recense 8 de ces systèmes, tous basés sur du Javascript : 8 popups modales en Javascript

Liens :
8 popups modales en Javascript
MaVille.com

En savoir plus :

1. Le webmaster : le mouton à 5 pattes du web2.0 Voici un article intéressant que je voulais partager avec vous...
2. Exécution Javascript sur le chargement d’une page Comment exécuter plusieurs scripts Javascript au chargement d’une page ?...
3. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...

Problème

Supposons que dans nous devons exécuter deux fonctions script1 et script2 au chargement de la page.

Surcharge de l’attribut onLoad de la balise body

La première solution à bannir est l’utilisation de l’attribut onLoad de la balise body, comme le montre l’exemple ci-dessous :

<body onload="script1();script2();">

Cette solution impose en effet de connaitre dès le début du rendu de la page l’ensemble des scripts qui devront être exécutés. Par conséquent, cette solution n’est pas viable. Cette solution est d’autant moins envisageable si vous optez pour un design à base de template, où le header (comportant la balise body) se retrouvera dans un fichier séparé du reste de la page.

Ajout d’événement sur le chargement de la page

La deuxième solution qui ne fonctionne pas de la même façon selon les navigateur Internet où elle s’exécute consiste à ajouter des événements Javascript sur le chargement de la page au fur et à mesure de son rendu au navigateur, car tous n’auront pas le même comportement vis-à-vis du code ci-dessous.

window.onload=script1();
[...]
window.onload=script2();

Le problème de cette solution est que l’appel de la fonction script2() remplacera celui de la script1(). On aura donc au final une exécution de script2() uniquement.

Une solution (celle pour laquelle j’ai opté)

Partant de ces constats, je passe désormais par une fonction Javascript intermédiaire qui s’occupe de gérer les événements attachés au chargement de la page. Elle s’occupe d’empiler les événements qui seront déclenchés au chargement de la page. Cette fonction est stockée dans un fichier .js référencé depuis la balise head de la page.

function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
      window.onload = func;
   } else {
      window.onload = function() {
         if (oldonload) {
            oldonload();
         }
         func();
      }
   }
}

Du coup, pour ajouter un événement au chargement de la page, il suffit d’appeler la fonction de la façon suivante :

addLoadEvent(script1);
[...]
addLoadEvent(script2);

Ce code vous permettra donc de lancer l’exécution de plusieurs fonctions Javascript directement après le chargement de la page. Je ne l’ai pas testé sur les navigateurs Google Chrome, Safari ou Opera, mais il marche sous Internet Explorer 7 et Mozilla Firefox 3, ce qui garantit déjà une bonne compatibilité avec les navigateurs actuels.

Source

Je vous laisse également le lien initial où j’ai trouvé cette fonction javascript et les exemples d’utilisation (en anglais par contre) : lien article original (en anglais).

En savoir plus :

1. Popups modales Javascript : le fer de lance du web2.0 Que celui qui n’a jamais vu de popups modales lui...
2. Bonnes pratiques jQuery Voici un article très intéressant retraçant les bonnes pratiques du...
3. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je...

Au niveau des coûts de développement, les deux options sont sensiblement identiques. Il existe en effet pour chacune de ces technologies des solutions intéressantes et gratuites :

• Apache et PDT (PHP Développement Tools) ou tout simplement en un bon éditeur de texte pour ceux qui préférent les solutions simples (NotePad++ par exemple) pour le développement PHP,
• pour le développement .Net, il n’y a pas vraiment le choix : Visual Web Developper et Visual C#/VB Developper en version Express Edition, gratuites et complètes, même pour un usage commercial.

Concernant les bases de données, je donnerai un avantage au monde .Net, car là encore, on retrouve les versions Express Edition, toujours gratuites et permettant tout ce qu’un SGBD digne de ce nom se doit de proposer : procédures stockées, triggers, requêtes imbriquées…

Développement : match nul. Les deux ont leurs avantages et inconvénients. PHP pour son côté prise en main rapide, ses innombrables ressources disponibles sur Internet… .Net pour son aspect plus professionnel, sa rigueur, la facilité d’utilisation de Visual Studio…

Hébergement : avantage PHP ! Un hébergement PHP coûtera forcément un peu moins cher car le prestataire ne vous refacturera pas les coûts de licence. La différence n’est pas énorme sur des hébergements mutualisés, mais l’avantage de PHP se situe surtout à un autre niveau : la concurrence. Il y a bien plus de concurence pour les hébergements en PHP ce qui fait que vous trouverez plus facilement celui qui vous ressemble et toujours au meilleur prix ! Pour ma part, je suis hébergé sur des serveurs Linux/PHP chez 1&1 dont je suis pleinement satisfait hormis les temps de réponse du support très très long… Si j’avais à choisir un hébergement Windows pour des applications .Net, je partirai sans hésitation chez Ikoula, connu, reconnu dans le métier et également conseillé par Microsoft.

Respect des normes, exploration des moteurs et deep-linking : avantages PHP ! Ceci n’est pas grave pour un développement Intranet et l’est bien plus pour du développement Internet. Avec .Net, vous ne serez pas entièrement maître du code HTML généré puisque tous les objets haut-niveau que vous utiliserez (Datagrid, Repeater…) seront traduits en HTML et en Javascript avant d’être envoyé au navigateur. De plus, .Net étant un language événementiel, la notion de de postback n’est pas la plus adaptée à du développement Web grand public, principalement à cause du javascript généré ce qui, par conséquent, gênera considérablement l’exploration des moteurs de recherche et le travail de référencement.

Enfin, et c’est le point qui me parait le plus important pour un site Internet personnel : avantage PHP pour la mise en production ! Bien sur, en .Net, il est très simple de générer des installateurs au format MSI qui font très professionnels, mais est-ce vraiment ce qu’on recherche pour un site personnel ? Non, bien sûr… comme moi, vous éditez surement des fichiers directement depuis votre serveur et faites juste de petites modifications quand cela vous chante. La mise en production PHP, qui du coup se limite à un simple transfert FTP est bien plus adaptée qu’une compilation et réinstallation (même s’il est également possible de transférer des fichiers non compilés en production avec .Net).

Bref, si vous vous posez la question, je vous conseille PHP pour le développement de vos projets Web personnels… Pour des projets professionnels, c’est tout une autre histoire et cela doit être étudié au cas par cas.

Et vous, quel est votre ressenti ? Que préconisez-vous comme language de développement pour un site Internet personnel ?

En savoir plus :

1. CreaResto.fr : création sites Internet gratuits pour restaurant Ce n’est pas en 2010 que je vais me reposer....
2. Monitoring de sites web avec WoozWeb.com Pour ceux qui ne souhaitent pas investir dans une solution...
3. Design et support des navigateurs… Actuellement, et heureusement, car c’est la concurrence qui fait progresser...

Comme beaucoup le savent, chaque navigateur embarque son propre moteur de rendu graphique et cela engendre des différences au niveau de l’affichage pour un même site selon le navigateur utilisé et sa version. Pour un webmaster, est-il impératif de rendre ses sites compatibles avec tous ces logiciels ?

C’est une bonne question à laquelle, je ne serai répondre pour vous. Tout dépendra en effet de votre site Internet, de sa complexité, de vos connaissances des standards et compétences en CSS, (x)HTML, Javascript… mais également de votre cible de visiteurs. Quel intérêt de rendre son site compatible Safari, s’il ne sert qu’à partager des photos avec des proches qui utilisent tous Internet Explorer ? La problématique inverse se pose si vous souhaitez développer un site sur les Mac et que votre site Internet n’est pas compatible Safari ou Opera…

Internet Explorer et Mozilla Firefox

Bref, dans la plupart des cas, et c’est la politique que j’adopte pour mes sites, je pense qu’il est nécessaire de maintenir son site pour les versions 6&7 de Internet Explorer et la version 3 de Firefox. Au regard de l’étude réalisée par Xitimonitor courant décembre 2008, on remarque que ces trois navigateurs représentent près de 90% des visites sur Internet, réparties de la façon suivante :

• 36,3% pour Internet Explorer 7
• 23,6% pour Firefox 3
• 23,2% pour Internet Explorer 6
• 7,5% pour Firefox 2

Les rendus des moteurs de Firefox 2 et 3 étant très proches, les tests sur Firefox 3 suffisent généralement pour valider le fonctionnement sur ces deux navigateurs. En revanche pour Internet Explorer, des tests s’imposent pour les deux versions, car elles diffèrent plus l’une de l’autre. Le respect de ces navigateurs vous permet donc d’être compatible avec au moins 91% des utilisateurs d’Internet à l’heure actuelle.

L’avenir d’Internet Explorer 6

Cependant, comme le montre l’étude marketshare.hitslink.com, la version 6 d’Internet Explorer est en pleine perte de vitesse au profit de sa version 7 mais également au profit de Firefox. D’ici peu de temps, il ne devrait plus être utile de valider le bon fonctionnement de ses sites sous IE6, qui par ailleurs souffre d’importantes lacunes, l’une des plus connues, étant la non gestion de la transparence des images au format PNG.

J’ai, en partie, arrêter de rendre mes sites 100% compatibles avec Internet Explorer 6, tout du moins pour ce qui concerne l’utilisation des formats PNG. Si vous naviguez avec Internet Explorer 6, vous pourrez le remarquez grâce aux deux images PNG en haut à droite de ce blog (Twitter et RSS), dont le fond, théoriquement transparent, vous apparait gris.

Et vous, sur quels navigateurs testez-vous vos sites ?

Sources :

• Xitimonitor.com
• marketshare.hitslink.com

En savoir plus :

1. Outils de tests multi-navigateurs Suite à un article paru récemment sur ce blog concernant...
2. Extensions Firefox pour vos développements web 2.0 Je ne sais pas pour vous, mais personnellement, je...
3. A bas les conventions… vive l’art et le design ! Voici un petit post pour vous présenter un site que...