Google lance son navigateur Web

julien lavault — Tue, 02 Sep 2008 12:34:00 +0000

C'est officiel, Google à confirmé le lancement aujourd'hui, de la version bêta de son propre navigateur web open source: Google Chrome. Vous vous demandez quels sont les avantages de Google Chrome ? Voici quelques caractéristiques qui mériterons d'être testées:

Interface du navigateur très simple et dépouillé,
Navigateur très propre et rapide,
Amélioration de la vitesse et des temps de réponse,
Moteur javascript plus puissant: V8,
Etc...

Google pense apporter une valeur ajoutée aux utilisateurs et participer au développement de l'innovation sur le Web. Ses concurrents directement, je cite Mozilla et Microsoft Internet Explorer, qui dominent le marché, risque de se voir grignoter des parts de marché !
Seul petit bémol, le navigateur en version bêta ne sera disponible que pour windows ! Les utilisateurs de Mac OS et Linux devront est patient.

J'attends vos avis sur cette solution !

Google Ad Manager la solution idéal pour gérer ses campagnes e-pub

julien lavault — Fri, 29 Aug 2008 13:28:00 +0000

Google a encore élargi son offre avec l'arrivée de Google Ad Manager, un outil en ligne de gestion de bannière. Encore en version bêta, l'outil permet aux éditeurs de gérer leur inventaire publicitaire et les commandes. Bien entendu, google en a profité pour proposer son programme adSense dans les cas d'espace invendu. Avantageux pour tout le monde non ? Enfin surtout pour google, car cela simplifie fortement l'affichage de pub google sur son site, vue que cela est fait automatique en absence de pub !

Les fonctionnalités intéressantes à mes yeux sont:

La partie rapport très complète et particulièrement les Ventes réalisées par le commercial et les Ventes de l'annonceur,
La gestion des espaces publicitaire très complète et très simple d'utilisation (je pense notamment à openX très complexe),
La gestion des commandes avec la possibilité d'importer directement des fichiers de commande dans l'outil,
L'ergonomie intuitive,
Le didacticiel qui permet de prendre l'outil en main très rapidement.

Pour ma part, je trouve que cet outil est une vraie réussite à tous les niveaux. Reste plus qu'à le tester dans la durée pour réellement juger de sa performance. Ses concurrents directs comme OpenX, Microsoft Atlas ou Smart Adserver vont devoir s'accrocher pour réussir à concurencer la machine google !

Faire une requête en Ajax avec Mootools

julien lavault — Tue, 28 Aug 2007 16:58:00 +0000

Ce tutoriel vous montre comment faire des requêtes en Ajax avec la librairie Javascript Mootols, c'est à dire comment afficher des données provenant d'une base de données en fonction d'une requête SQL sans rechargement de la page et en apportant une touche d'interactivité. Cette application Ajax se greffera sur un site traditionnel, car comme je l'ai déjà expliqué dans un précédent billet, une application Ajax se greffe sur un site déjà existant afin de bénéficier de son référencement et d'une structure stable dans le cas où le client a désactivé le Javascript de son navigateur.

Avant de commencer, il est important de comprendre deux choses qui sont essentielles dans le développement d'un application Ajax: les conteneurs et les gestionnaires d'évènements (je parle aux non initiés !!!).

Les conteneurs

Les conteneurs vont vous permettre de délimiter les zones d'affichage des données, ce sont des 'div' que l'on identifie grâce à leur 'id'. Il est important de bien les nommer afin de pourvoir les retrouver facilement !

Les gestionnaires d'évènements

Les gestionnaires d'évènements vont vous permettre de récupérer les évènements de la page suivant les actions de l'utilisateur. Exemple: quand l'utilisateur 'click' sur un bouton, quand les données sont chargées avec succès 'onSucces' ...
Mootools dispose de puissants gestionnaires d'évènements qui vont vous permettre de contrôler l'ensemble des actions de l'utilisateur et des différents états de la page.

Dans un premier temps il faut développer le site normalement pour qu'il fonctionne en totale indépendance du Javascript et pour être référencé sous Google. Conservez vos méthodes et outils traditionnels pour concevoir votre site, il faut juste bien définir le nom des 'id' des éléments qui seront utilisés par nos scripts Ajax, par exemple le conteneur qui affiche les données, le menu qui déclenche les requêtes Ajax, etc...
Une fois le site construit, nous allons développer notre applications Ajax, pour se faire nous aurons besoin de:

Notre page XHTML avec un menu en liste,
La librairie Javascript Mootools à inclure dans l'entête de la page,
Un fichier Javascript qui exécute la requête Ajax,
Un fichier PHP qui traite la requête et retourne les données à afficher.

Comme le développement de l'application Ajax est indépendant de votre site, elle peut être déployée sur un site déjà existant sans nécessité de modification sur la structure du site! Il vous faudra alors uniquement inclure vos librairies Javascript et Mootools et créer vos fichiers PHP qui effectueront vos traitements coté serveur.

Débutons désormais le développement de l'application Ajax, tout d'abord il faut inclure dans l'entête la librairie Mootools que vous pouvez télécharger sur le site de Mootools.net, et le script Javascript que nous allons développer. Le principe de base est de déclencher la requête Ajax lorsque l'on 'click' sur un lien du menu. Voici le code XHTML de notre page, comme vous pouvez le constater, il n'y a aucun script ou gestionnaire d'évènements dans notre document XHTML, juste des balises! Tout le contrôle des évènements va se faire depuis notre script Javascript !

<ul id="myElement">
<li><a href="http://blog.jflad.com/post/test/voila1/">Test1</a></li>
<li><a href="http://blog.jflad.com/post/test/voila2/">Test2</a></li>
<li><a href="http://blog.jflad.com/post/test/voila3/">Test3</a></li>
<li><a href="http://blog.jflad.com/post/test/voila4/">Test4</a></li>
<li><a href="http://blog.jflad.com/post/test/voila5/">Test5</a></li>
<li><a href="http://blog.jflad.com/post/test/voila6/">Test6</a></li>
</ul>

Maintenant, nous allons récupérer l'évènement 'click' avant de déclencher notre requête Ajax, et bloquer le pointage naturel du lien vers la page correspondante avec Event(E).stop().

// On applique le gestionnaire d'évènement à tous les liens du menu liste
var list = $$('ul#myElement li a');
list.each(function(element) {
    // Gestionnaire d'évènement 'click'
    element.addEvent('click', function(e){

        // On stoppe le pointage naturel du lien pour ne pas recharger la page
        e = new Event(e).stop();

       // Ici notre requête Ajax décrite plus bas
   });
});

Un fois que l'on a récupéré l'évènement 'click', il est temps de déclencher notre requête en Ajax! Pour ce faire nous allons créer un objet 'Ajax' de Mootools avec comme paramètre l'url du fichier PHP qui va traiter notre requête, la méthode de transfert (post ou get), l'encodage des données (uft-8, iso ...), le cadre du conteneur dans lequel vont être affichées les données transférées (update) qui doit être renseigné par le nom de l'id du conteneur. Et enfin, un gestionnaire d'évènements 'onComplete' qui prend en paramètre une fonction, cela permet par exemple de mettre un effet d'apparition sur le conteneur qui affiche les données. Dans un deuxième temps il faut paramètrer la requête Ajax grâce à la méthode 'request' avec les variable à envoyer au fichier PHP de traitement. Voici le code Javascript de la requête Ajax:

            // Requête ajax
            var url = 'ajax.php';

            var ajaxRequest = new Ajax(url, {

                method: 'post',
                encoding: 'uft-8',
                onComplete: showSucces(),
                update: log

            });

            var requestVar = {
                var1: 'voila la variable numéro1',
                var2: 'voila la variable numéro1',
                var3: 'voila la variavle numéro1',
                var4: 'voila la variable numéro1',
                var5: 'Tutoriel par JFLAD'
            };

            ajaxRequest.request(requestVar);

Il faut maintenant traiter la requête Ajax avec un fichier PHP qui va retourner le contenu à afficher:

<?php

    // On récupère les données
    $var1 = $_POST['var1'];
    ...

    // Traitement des données
// Içi vous effectuez vos requêtes SQL et traitement divers

   // On retourne le contenu a affiché
   if(isset($_POST['var1']))

   {

        print '<p>Votre contenu à afficher...</p>';

   }

?>

Le traitement en PHP doit être développé comme à l'habitude, à la différence près que vous allez envoyer votre contenu à afficher à votre page XHTML plutôt que de l'afficher directement. Néanmoins je vous conseille de sécuriser vos fichiers PHP de traitement avec par exemple une session de tests surtout lorsqu'il exécute des requêtes insert/delete dans vos bases de données afin d'éviter des injections SQL!

Dans un prochain tutoriel, je vous montrerai comment apporter une touche d'interactivité à vos évènements grâce à Mootools et l'utilisation de sa class Fx !

JFLAD Blog: Recherche & développement: Ajax, Javascript, CSS, XHTML, Flash, Référencement, Webmarketing, Open Source, gestion de projet - Google

Google lance son navigateur Web

Google Ad Manager la solution idéal pour gérer ses campagnes e-pub

Faire une requête en Ajax avec Mootools

Les conteneurs

Les gestionnaires d'évènements