Les conseils prodigués ci-après vous permettront d'avoir le maximum de cartes en mains pour suivre et optimiser le référencement naturel de vos sites avec E-Majine.

1/ Qu'est-ce que c'est ?

Le Sitemap est un fichier au format XML le plus souvent (il peut aussi être au format .txt) qui liste les pages de votre site.
Le sitemap est depuis fin 2006 un standard informatique, dont on peut lire les spécifications sur le site sitemaps.org.

Il a longtemps été associé au moteur de recherche Google (d'où le terme lu un peu partout de "Google Sitemaps") puisque c'est ce dernier qui a contribué à le rendre populaire.
Il peut être généré par des programmes ou des applications en ligne, et la V1 d'E-Majine vous permet de le publier et paramétrer selon vos besoins.

2/ A quoi cela me sert-il ?

Le sitemap ("plan du site" en anglais) est destiné à indiquer aux robots des moteurs de recherche en un endroit toutes les pages de votre site, sans notion de hiérarchie ou d'arborescence. Les adresses absolues (déclaration de type : http://www.votresite.com/index.php ou http://www.votresite.com/rubrique2/sous-rubrique2/mon-fichier.php) se succèdent les unes à la suite des autres au sein de balises XML.

Le Sitemap est alors un autre plan du site ?

Oui, il est destiné aux "non-humains". Il est à différencier du plan du site "traditionnel" qui lui est destiné à être lu par vos internautes dans le but de leur faciliter l'accès aux rubriques et aux contenus parfois nombreux et imbriqués. Le plan du site qui vous est proposé comme méthode de publication avec E-Majine vous permet ainsi de délimiter le niveau d'imbrication de vos rubriques ainsi que la rubrique de départ afin de proposer éventuellement plusieurs plans pour des publics différents.

3/ A qui s'adresse t-il ?

Les moteurs de recherche listés ci-dessous et leur robots adhèrent au standard sitemap et sont donc capables de lire et parcourir votre fichier afin d'en extraire les liens :

Google
Yahoo!
Ask
MSN/Windows LiveSearch
Exalead

(Cette liste est donc susceptible de croitre puisque le sitemap répond à un standard pouvant être utilisé par tous.)

4/ Quel bénéfice puis-je en tirer ?

Le robot qui arrive sur votre site n'a pas à parcourir toute l'arborescence de vos pages avant de pouvoir les indexer, puisque vous lui en fournissez la liste au moyen de ce fichier. Cela vous permet donc d'optimiser votre référencement naturel en conférant une visibilité à toutes les pages désirées, même si
la citation d’une url de page dans un sitemap ne garantit pas son indexation par le moteur ! De même, les pages énumérées ne sont pas immédiatement indexées (le robot procède par étapes, et il est généralement constaté que l'affichage au sein des pages de résultat de recherche se fait progressivement, par petits groupes de pages).

5/ Comment procéder ?

Une fois que l'arborescence de votre site est faite, et que vous commencez à publier des contenus, vous avez la possibilité de générer le sitemap de façon automatique avec E-Majine depuis la version 1 de l'interface Manage (la version 0.15a vous permet de l'éditer après l'avoir récupéré par un autre biais).
Manage > Référencement > Sitemap

N'oubliez pas de supprimer de la liste ainsi générée les URL que vous ne souhaitez pas faire connaitre (rubriques invisibles par exemple).
Le Sitemap généré par E-Majine est compressé afin d'optimiser l'espace disque : sitemap.xml.gz (qui est parfaitement décompressé par les robots).

C'est tout ?

Non. Vous devez maintenant faire connaitre l'existence de l'adresse de ce plan aux principaux intéressés, à savoir les moteurs de recherche.
Pour ce faire, il existe plusieurs méthodes.
La plus simple est d'ajouter cette adresse au sein d'un autre fichier pouvant être également généré par E-Majine, le fichier robots.txt
Ce dernier faisant partie d'un protocole plus ancien et connu de tous les développeurs d'agents utilisateurs, il est demandé et lu par tous les robots lorsque ceux-ci accèdent à votre site par la racine. Depuis l'apparition du sitemap le standard a été modernisé afin que le robots.txt puisse également servir à faire connaitre l'adresse du sitemap (faire d'une pierre deux coups.)

La déclaration se fait de la manière suivante dans votre fichier robots.txt :

Plan Sitemap : "emplacement_Sitemap"

ce qui peut donner : 

Plan Sitemap : http://www.medialibs.com/sitemap.xml.gz

Plus d'infos sur le protocole d'exclusion de robots : http://www.robotstxt.org/

Si vous souhaitez aller plus loin et obtenir des informations des moteurs de recherche en retour, il va vous falloir vous créer un compte (gratuit) sur certains de ces moteurs. Le plus connu, Google, propose depuis 2006 un service baptisé "outils pour webmasters" qui permet de suivre l'évolution de la présence des pages de son site sur son index, ainsi que des conseils basés sur les principes du référencement naturel. De même pour le sitemap, pour lequel le service susnommé de Google va vous indiquer s'il a bien été pris en compte par son robot, s'il ne comporte pas d'erreurs, et quand il a été parcouru pour la dernière fois .

Et après ?

Soyez un minimum patients... Progressivement les pages de votre site (celles indiqués sur votre sitemap) devraient être indexées par les robots, et donc ressortir sur les pages de résultats de moteurs de recherche par rapport à leurs contenus.

Au fur et à mesure de la vie de votre site, de nouvelles rubriques vont surement voir le jour, ainsi que de nouvelles publications de contenus.
Des mises à jour du sitemap sont donc à prévoir, puisque par défaut E-Majine ne peut décider pour vous ce qui doit-être référencé par les robots.
Une fois que vous avez généré votre nouveau sitemap, il faut penser à signaler aux robots qu'il a été mis à jour, afin que ceux-ci prennent les modifications en compte (le plus rapidement possible, en sachant que vous n'avez aucune - ou très peu d' - influence sur le délai ni les fréquences de passage des robots sur votre site).

Pour ce faire le Manage vous propose d'envoyer une requête à Google pour qu'il soit averti que vous avez mis vos pages à jour.
Cette opération s'appelle "PINGer" (prononcez "Pineguer").

Dans le cas de figure où vous avez également créé un compte sur d'autres sites de moteur, n'hésitez pas à reproduire l'opération pour leurs robots !
Voici les adresses à utiliser, notez bien qu'il vous faut changer les noms de domaine indiqué (www.e-majine.com) par celui de votre site ! Certaines adresses doivent également être encodées.

Ask.com: http://submissions.ask.com/ping?sitemap=http://www.e-majine.com/sitemap.xml
Google: http://www.google.com/webmasters/sitemaps/ping?sitemap=http://www.e-majine.com/sitemap.xml
Yahoo: http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=YahooDemo&url=http://www.e-majine.com/sitemap.xml
Exalead : http://www.exalead.fr/search/submitYourSitePage
MSN / LiveSearch : http://webmaster.live.com/ping.aspx?siteMap=http://www.e-majine.com/sitemap.xml

A VENIR :

Lors de mon prochain article, je vous parlerai d'une autre fonctionnalité très utile au référencement naturel : la ré-écriture d'URL (URL REWRITING), proposée depuis la version 0.15 dans l'interface Manage, et grandement améliorée depuis la V1 avec l'extension de ses fonctionnalités au catalogue.

Billet original sur Yann Faurie

Etudions la manière d'organiser une page afin d'être le plus optimal possible. Première étape, séparer le contenu de la mise en forme. Il faut se le dire, le XHTML n'est pas un langage de mise en page, mais un langage de description. Grâce au XHTML, il est possible d'organiser son contenu en regroupant des éléments de contenu entre eux, et de leurs donner un sens (sémantique) tout en le laissant accessible à tous. Le CSS est le langage qui va nous permettre d'habiller, de mettre en forme, ces éléments. Voyons ensemble comment organiser son XHTML et ses CSS afin d'avoir une page XHTML optimale.

La structure (XHTML)

Tout d'abord, il faut trouver la structure XHTML la plus souple possible, dans laquelle nous avons peu de modification à faire du XHTML, tout en ayant la possibilité, avec les feuilles de styles, de faire un maximum de mises en page possibles.

Au niveau de l'en-tête (<head>...</head>), utilisons une DTD XHTML 1.0 Strict. Nous choisissons cette DTD, car c'est la dernière norme en vigueur du W3C. Elle permet de spécifier la langue du document : pour chacune des langues, chaque en-tête doit être différente.

Dans le corps de la page (<body>...</body>), nous retrouvons tout d'abord un div#page contenant l'intégralité du site. Grâce à ce calque, il est possible de restreindre le site en largeur, pourquoi pas en hauteur, et puis de le centrer.

• Le premier calque enfant du calque #page est #accessibility. On y retrouve des liens d'évitement qui nous permettent d'accéder directement au menu, au contenu,...(cf Alsacréations - les liens d'évitements).
• Un calque #banner, avec un titre reprenant un titre générique à votre projet (pensez aux mots clefs ...) et un lien sur ce titre, permet de revenir à la page d'accueil.
• Ensuite, le calque #wrapper, va lui contenir les calques #conteneur, #leftbar et #rightbar. A l'aide de cet élément, nous pouvons dissocier l'affichage des éléments de contenu (le menu, les outils et le contenu) qui peuvent être contraints en largeur et centrés, de la bannière qui elle peut s'adapter à la largeur de l'écran. Cet élément va également servir à mettre une image de fond sous ces trois colonnes.
• Les calques #leftbar et #rightbar correspondent aux deux colonnes de la page de base. A l'intérieur de ces deux colonnes, retrouvons un menu et des outils par exemple.
• Le calque #footer donne la possibilité d'y mettre des liens pour revenir en haut de page, ou bien pour faire un rappel/accéder à des rubriques importantes de votre site.
• Et pour finir, un calque de signature #signature, dans lequel vous retrouverez la signature du/des créateurs de votre projet. Ce calque est le seul ne faisant pas parti du calque #page.

Imbrication des éléments dans le flux

La mise en forme (CSS)

Utiliser des feuilles de style ne fait pas tout, encore faut-il bien les utiliser. Tout d'abord, n'utilisez pas une unique feuille de style mais plusieurs feuilles de style. Ceci vous permettra d'économiser un temps non négligeable lors de vos intégrations, car plutôt que de naviguer dans une seule feuille de style qui fait des milliers de lignes, vous n'aurez qu'à sélectionner la bonne feuille de style pour trouver tout de suite ce que vous désirez.

Pour permettre de s'y retrouver encore plus facilement, indenter ses feuilles de style est un bon moyen de regrouper toutes les déclarations qui servent à mettre en page un élément :

#menu{}
     #menu ul{}
          #menu ul li{}
          #menu ul li.toto{}
          #menu ul#toto li{}
                  #menu ul li a{}
                  #menu ul li a:hover{}
                  #menu ul li a:visited{}
                  #menu ul li.active a{}

Supprimez toutes les marges par défaut *{margin:0;padding:0;}. On trouvera cette déclaration dans la feuille de style de base (celle qui importera toutes les autres). Cela servira à annuler les styles que toutes les balises HTML ont par défaut. Désormais grâce à cet élément, plus besoin de se poser la question si les éléments auxquels on veut appliquer des styles héritent d'une propriété qui a été écrite ou bien du style par défaut que possèdent toutes les balises HTML (notamment pour les listes des menu). Ceci va également éviter de mettre les marges internes et externes à zéro. Enfin, nous devrons penser aux espaces entre les paragraphes par exemple, plutôt que de se laisser porter par les styles HTML par défaut.

Attention particulière afin de contourner le problème du "box model" : ne pas mélanger, et des propriétés width, et du padding. Il est préférable d'appliquer le padding, si besoin, à un calque enfant. Par exemple :

#box{
width:250px;
}
#box div{
padding:15px;
}

Concernant le style de la balise body, inutile de vous rappeler qu'il est toujours important de déclarer ses polices de caractères de façon relative (si besoin est, alsacreations a un très bon tutoriel)

Il est important de dédier une feuille de style qui va permettre d'installer uniquement l'ergonomie du site, celle-ci ne sera pas parasitée par la mise en place d'autres éléments. La zone #banner sera fixe en hauteur pour pouvoir placer tout ce qui se trouvera dedans de façon absolue, et aussi appliquer de jolis fonds en CSS. Ensuite on va retrouver le calque #conteneur qui prend la totalité de la largeur de son parent (#wrapper), et auquel on attribut un float:left; pour que les éléments qui le suivent #leftbar et #rigthbar reviennent vers leur gauche. Ces deux derniers éléments ont des largeurs d'appliqués avec des marges négatives sur la gauche afin de venir se placer au dessus de #conteneur. Attention dans le cas d'une design liquide (qui s'adapte à la largeur de l'écran), la largeur de la colonne de gauche se doit d'être à -100%. Mais dans le cas d'une design restreint il faudra spécifier pour internet explorer une marge négative de la largeur de l'élément conteneur. Logiquement le -100% devrait suffire, car 100% de 770px par exemple, ça fait 770px ! Et bien de temps à autres, Internet Explorer ne comprend pas, il faudra donc spécifier des largeurs en pixels dans les cadres de designs qui ne s'adaptent pas aux écrans. Ensuite, nous avons un élément avec un style de type clear:left;, afin que l'élément conteneur (#wrapper) puisse savoir où il se termine. Mais pourquoi utiliser une structure aussi compliquée avec toutes ces marges négatives ? En fait, le but de cette structure, est d'utiliser le moins possibles d'éléments avec des clear:both;, tellement problématiques sous Internet Explorer...

Afin d'optimiser le poids de ses feuilles de styles, utilisons des propriétés raccourcies. Par exemple, pour appliquer un fond en CSS, il existe toutes une série de propriétés qui peuvent être remplacées par une seule :

#element{
background-color:red;
background-image:url(/images/monimage.jpg);
background-repeat:repeat-y;
background-attachment:scroll;
background-position:top left;
}

équivaut à

#element{
background:red url(/images/monimage.jpg) repeat-y scroll top left;
}

On peut faire ça avec les propriétés de font, padding; margin, border, list-style, outline et background bien sûr.

Pour l'insertion des images, dans une logique de sémantique et d'accessibilité, les images qui seront inclues en feuille de style sont uniquement les images de décoration. Dès qu'une image apporte du sens à votre page web, dès qu'il y a du texte dessus, il est préférable de l'inclure en XHTML.

Quelque chose de plus didactique (à la alsacréations, si si) sera réalisé dans les prochaines semaines afin de mieux comprendre comment est réalisé le style par défaut.

Billet original sur Simon Bonaventure

Une galerie quoi ?

Avec e-majine, dans l'interface d'administration, lorsque vous créez un article en bloc, vous avez la possibilitée de faire un bloc de type médias. Dans la configuration de ce bloc, il suffit de lui demander d'afficher pour les types de médias des images. Ensuite, pour type d'affichage, on va demander une galerie d'images,a fin de pouvoir mettre plusieurs images, après avoir séléctionné toutes les images voulues, il faut cocher la case à cocher vignettes, qui va faire en sorte d'afficher tout d'abord les vignettes des images et avoir une action en cliquant dessus. Après avoir caché cette case, il faut choisir dans la liste déroulante, le mode de fonctionement avancé.

Comment cela fonctionne ?

Beaucoup d'entre vous apprécie le fonctionnement du bloc de type média lorsqu'il affiche une galerie d'images en mode avancé. On me pose souvent la question sur son fonctionnement et les technologies qui sont utilisés pour faire fonctionner cela, certains parlent de flash, d'autres d'AJAX. En fait il s'agit de DHTML, qui n'est pas à proprement parler un language mais une combinaison de languages. Le DHTML est une combinaison de technologies entre le Javascript, le CSS et le XHTML. Et donc cette galerie d'images proviens du site lightbox.

Comment l'intégrer autre part?

On fait appel aux fichiers externes

nous allons maintenant voir comment intégrer cette magnifique galerie d'images. Si on suit les recommendations du site de l'auteur, il va tout d'abord faire appel aux fichiers jaavscripts qui permettent de faire les effets de redimentionnement. Je vous conseille de déposer ces fichiers dans le dossier prévu à cet effet Scripts, qui se trouve à la racine de votre FTP :

<script type="text/javascript" src="/scripts/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>

Ensuite, il va aussi falloir faire appel à la feuille de style de cette galerie, sans oublier de déposer dans le dossier images, à la racine du FTP toutes les images qui sont appellées dans la feuille de style. :

<link  rel="stylesheet" type="text/css" href="/modeles/fr/Modele1/css/gallery.css" title="normal" />

On défnit le(s) endroit(s) on vont le trouver les images

Ensuite, il va falloir définir dans votre template l'endroit ou va se trouver la galerie d'images, en encapsulant les images dans un div qui va devoir porter un attribut de class qui vous aurez définit.

<div class="gallery">
         <img src="/medias/thumbnail/image1.png" alt="texte alternatif 1" />
         <img src="/medias/thumbnail/image2.png" alt="texte alternatif 2" />
         <img src="/medias/thumbnail/image3.png" alt="texte alternatif 3" />
</div>

Pour ceux qui ne

On s'amuse avec javascript et le DOM

Après avoir fait cela, il falloir intégrer un nouveau fichier javascript de mon fait, qui aura pour but de rajouter avec le DOM pour chaque image le lien avec les bons attributs qui vont pouvoir faire en sorte d'afficher le galerie d'images. Dans ce fichier, on va tout d'abord commencer par retrouver une fonction qui va nous permettre de travailler avec les classname, car il n'existe pas de fonction native en javascript qui récupère chaque classname, et qui stock le contenu dans un tableau.

function getElementsByClassName(oElm, strTagName, strClassName){

        var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
        var arrReturnElements = new Array();
        strClassName = strClassName.replace(/\-/g, "\\-");
        var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
        var oElement;
        for(var i=0; i<arrElements.length; i++){
                oElement = arrElements[i];    
                if(oRegExp.test(oElement.className)){
                        arrReturnElements.push(oElement);
                }
        }
        return (arrReturnElements)

}

Ensuite, on à une seconde fonction, qui à chaque fois qu'on va rencontrer le nom de class qu'on aura choisi de mettre sur notre div qui englobe les images de notre galerie, va regarder toutes les images. Pour chacune des images, je rajoute une lien dans le div parent, à ce lien, je lui met l'image à l'interieure, et ensuite je créer les attributs href, title et rel (qui av parmettre de créer la galerie). Je vous fait grace du fonctionnement de tout ça.

function createGallery(class){
        var className = getElementsByClassName(document, "div", class);
        // à chaque fois qu'on rencontre la classname, on crée uen nouvelle gallerie
        for(var i=0 ; i<className.length ;i++){
                var imagesGallery = className[i].getElementsByTagName("img");
                //pour chacune des images de la gallerie
                for(var j=0 ; j<imagesGallery.length ;j++){
                        //création du lien
                        var lien = document.createElement("a");
                        className[i].appendChild(lien);
                        lien.appendChild(imagesGallery[j]);
                        //création des attributs du lien
                        lien.setAttribute('rel', 'lightbox['+class+']');
                        lien.setAttribute('href', '/media/'+imagesGallery[j].src.split("/")[5]);
                        lien.setAttribute('title', '<h3>'+lien.title+'</h3><p>'+imagesGallery[j].alt+'</p>');
                        //alert(lien.innerHTML);
                }
        }

}

Et enfin, une fois que tout cela est fait, il ne reste plus qu'a lancer cette dernière fonction à la fin du chargement de la page. En n'oubliant pas de faire apple au même nom de class qui est mis sur le div en englobe nos images.

window.onload = function(){
        var classname = "gallery";
        if (getElementsByClassName(document, "div", classname).length>=1){
                createGallery(classname)
        }
}

Ces trois dernieres fonctions se trouvent aussi dans un fichier externe, il va falloir y faire appel comme précédemment :

<script type="text/javascript" src="/scripts/Gallery.js"></script>

Je laisse à disposition une archive contenant tout les fichiers susciétes

A vos claviers, il ne vous reste plus qu'à insérer cela dans vos annuaires, catalogues, articles préformatés, etc.

PS : si dans votre site vous avez déjà intégré du javascript avec la fonction onload, il est fort probable qu'il y ai un conflit avec deux fonctions onload. Si c'est le cas, n'hésitez pas à lire cet article

Billet original sur Simon Bonaventure

Le module de gestion des formulaires personnalisés vient d'être remanié. De nouvelles fonctionnalités sont disponible dans cette mise à jour.

Gestion de templates spécifiques

Il est maintenant possible de définir un template spécifique pour l'affichage des "formulaires personnalisés". Lors de la consultation d'un formulaire dans le centre de ressources, un nouvel onglet Editeur de templates est disponible. En cliquant sur ce lien, vous obtenez :

Cette option est uniquement disponible pour les utilisateurs "agence" (login%identifiant_agence). L'éditeur de template vous précise qu'il faut créer un nouveau fichier, nommé dans cet exemple "creator_form_48.html". Celui-ci doit ensuite être posé en FTP avec le reste des templates de votre site, dans le dossier nommé "form". Une fois ce template créé, e-majine l'utilisera systématiquement pour tout les affichages du formulaire. Vous pouvez donc le modifier pour obtenir l'apparence souhaitée. Vous devez toutefois faire attention aux points suivant afin de conserver le bon fonctionnement du module :

• Ne modifiez pas les attributs name des champs du formulaire
• Les balises modeliXe sont utiles pour la gestion d'erreur, ne les supprimez pas.
• Ne supprimez pas le champ caché nommé "form_submit"

La gestion de ce template spécifique, vous permet par exemple :

• De gérer du formulaire sur plusieurs colonnes
• D'ajouter des attributs tabindex
• D'ajouter de l'aide pour les champs
• ...

Des nouveaux blocs

Deux nouveaux types de bloc sont disponibles :

• Cases à cocher
• Pièce jointe

Cases à cocher

Ce champ permet de définir plusieurs valeurs pouvant être sélectionnées en cochant des cases. Par exemple :

Pièce jointe

Ce champ permet au visiteur du site de joindre un fichier à sa demande. Durant la configuration, vous pouvez choisir les types de fichiers autorisés parmi les types de médias de votre site ainsi qu'un poids de fichier maximal. Vous obtiendrez par exemple :

Dans les messages envoyés suite à la validation du formulaire et dans le module "correspondance", vous retrouverez un lien permettant de télécharger le fichier joint.

Optimisation de l'affichage du message envoyé

Dans le message envoyé suite à la validation d'un formulaire, les champs sont regroupés par ensembles (si des ensembles de champs sont définis). Vous aurez par exemple :

Coordonnées
Société : MEDIALIBS SAS
Adresses : 7 route du Marillais
CP : 49410
Ville : St-Florent-le-Vieil
Contact
E-mail : contact [at] medialibs [dot] com
Tél. : 0826 620 996
Pièce jointe
Logo : Télécharger le fichier

Un nouveau template, mail_main.html, est maintenant disponible pour affiner la mise en forme du message envoyé. Ce template est fourni en pièce jointe de ce billet. Après modification, vous pouvez le poser en FTP dans le dossier form de votre modèle graphique.

Envoi d'un message de confirmation à la personne qui a soumis le formulaire

Lors de la configuration du formulaire, dans l'onglet Editer, il est possible de définir un "Message de confirmation". Si vous avez défini un champ de type E-mail avec l'option Expéditeur ainsi qu'un message de confirmation alors une message sera envoyé à la personne qui a rempli le formulaire. Un template, mail_confirmation.html, est disponible pour affiner la mise en forme du message envoyé. Ce template est disponible en pièce jointe de ce billet. Après modification, vous pouvez le poser en FTP dans le dossier form de votre modèle graphique.

Billet original sur Jérémie Glotin

E-majine est maintenant capable de gérer un effet de rollover sur les menus. Pour le mettre en oeuvre sur vos sites, il suffit de suivre le mode d'emploi suivant.

Configurer le site dans le factory

Dans le factory, vous allez ajouter les options "Visuels de rubriques dans les menus" et "Type de visuels dans les menus" avancée pour votre site.

Cette option gratuite peut être ajouter pendant toute la vie du site e-majine.

Associer les visuels aux rubriques

Vous allez maintenant pouvoir vous rendre dans la gestion d'arborescence du manage. Choisissez une rubrique puis cliquez sur Editer. Dans l'ensemble de champs "Aspect graphique", cliquez sur "Configurer". Vous obtiendrez alors

Il faut maintenant choisir des médias à associer pour les différentes images du menu :

• Image dans le menu : Image affichée par défaut
• Image dans le menu (actif) : Image affichée lorsque la rubrique est active
• Image dans le menu (au survol) : Image affichée au survol

Modification des templates

Vous allez maintenant modifier le template horizontalmenu_navigation_elements.html ou verticalmenu_navigation_elements.html. Il suffit d'ajouter onmouseover:onmouseover;onmouseout:onmouseout dans tous attributs mxAttribut de toutes mes balises liens du template.

Par exemple :
La balise suivante :

<a mxAttribut="href:href;hreflang:hreflang;title:title">
  <span>
    <mx:text id="links" />
    <mx:bloc id="picture"><mx:text id="picture" /></mx:bloc id="picture">
  </span>
</a>

devient :

<a mxAttribut="href:href;hreflang:hreflang;title:title;onmouseover:onmouseover;onmouseout:onmouseout">
  <span>
    <mx:text id="links" />
    <mx:bloc id="picture"><mx:text id="picture" /></mx:bloc id="picture">
  </span>
</a>

Vous trouverez en annexes de ce billet les 2 templates incluant cette modification.

Billet original sur Jérémie Glotin

La France compte désormais 16 millions de cyber-acheteurs, soit une hausse de 24 % sur un an. Résultat : le chiffre d’affaires du commerce électronique grimpe de 31 %, boosté par l'offre des TPE-PME.

La croissance du haut-débit et la baisse des coûts d'équipement en terminaux d'accès à Internet profitent pleinement au commerce électronique. Selon le baromètre e-commerce du troisième trimestre 2006 de l'Acsel (Association pour le commerce et les services en ligne), réalisé en partenariat avec Médiamétrie, plus de 16 millions de Français achètent désormais en ligne, soit une progression de 24 % sur un an.

Le nombre d'acheteurs progresse deux fois plus vite que le nombre global d'internautes, en augmentation de 12 % en un an avec 27,3 millions de connectés. En outre, les marges de progression des e-commerçants sont encore confortables, d'autant que 41, 5 % des non acheteurs se déclarent prêts à passer à l'acte d'ici trois mois. Les fêtes de fin d'année devraient donc s'avérer fructueuses.

Le trimestre a donc été bon pour le e-commerce français, qui conserve un rythme de croissance soutenu. Le panel Acsel de 23 e-commerçants, consolidé par PricewaterhouseCoopers, indique une progression de 31 % du chiffre d'affaires au troisième trimestre 2006 par rapport au troisième trimestre 2005 et à périmètre comparable.

L'indicateur e-commerce des TPE-PME indique une progression de 55 % du nombre de transactions et une hausse de 90 % du chiffre d'affaires sur un an réalisé par 731 boutiques actives. Le chiffre d'affaires moyen par boutique a ainsi progressé de 40 % sur un an.

Le développement des TPE-PME sur le Web correspond de moins en moins à une logique de niche. On compte aujourd'hui moins de pure players et plus de commerçants de détail qui franchissent le pas, ne serait-ce que pour fidéliser leur clientèle existante. Les secteurs du prêt-à-porter et des articles de sport sont en très fort développement.

Le réseau de guides d'achat LeGuide.com référençait pour sa part un total de 6.903 e-commerçants implantés en France au 1er octobre 2006, contre 4.429 en octobre 2005, soit une hausse de près de 56 % sur un an. Les catégories de produits 'Culture et Loisirs' et 'Vie pratique' sont respectivement commercialisées par 47 % et 45 % des e-commerçants. Les secteurs de la mode et de la beauté, de la culture et des loisirs, et de l'informatique enregistrent les plus fortes hausses durant le troisième trimestre 2006. 45,5 % des e-commerçants proposent en outre des livraisons à l'étranger avec une forte concentration sur les pays limitrophes : Luxembourg, Allemagne, Espagne et Belgique.

Après analyse des 50.000 mots-clefs les plus tapés chaque mois dans les moteurs de recherche partenaires de son service (notamment Yahoo France, Voila.fr, Alice, Lycos…), Yahoo Search Marketing précise par ailleurs que les "intentions d'achats", soit les requêtes effectuées sur le réseau, ont augmenté de 19 % au troisième trimestre 2006 par rapport au troisième trimestre 2005. Les catégories les plus actives sont celles de la "culture et des loisirs", qui draine 20 % des intentions d'achat, suivie des "voyages et du tourisme" avec 16 %, puis de l'informatique à hauteur de 10 %. "Soutien scolaire", "connexion ADSL", "voyage", "billet d'avion" et "rachat crédit" sont les mots-clefs ayant connu les plus fortes progressions au troisième trimestre 2006.

Billet original sur Charline Colineau

De nouvelles fonctionnalités pour e-majine sont disponibles...
Pour plus d'information vous pouvez relire la newsletter d'e-majine

Pour toutes questions n'hésitez pas à vous retourner vers le support.

A bientôt

Billet original sur Ronan Cassin