Le blog de Medialibs

Meilleurs voeux !

Yann Faurie — Sun, 03 Jan 2010 23:21:00 +0100

Bonne Année 2010 à tous ! Pleine de nouveaux sites E-Majine et Izi-Media ! Santé, bonheur et prospérité

Billet original sur Yann Faurie

Comment corriger plus de 25 bogues d'Internet Explorer 6

Yann — Wed, 16 Sep 2009 08:59:00 +0200

Traduction de l'article publié le 15 septembre 2009 par Benjamin sous le titre "Ultimate IE6 cheatsheet : How to fix 25+ Internet Explorer 6 Bugs" sur le site Virtuosi Media :

http://www.virtuosimedia.com/tutorials/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs

La meilleure stratégie à adopter avec IE6 est de ne pas assurer une compatibilité avec.

Stop. Très bien, je sens votre frustration. Vous êtes développeur web et prêt à vous arracher les cheveux parce que vous AVEZ à supporter IE6, mais pour dire les choses avec diplomatie, IE6 ne vous supporte pas. Vous avez passé des heures sur votre mise en page, mais vous ne pouvez toujours pas obtenir un rendu correct. Je peux comprendre. Je peux aussi vous aider.

Ceci n'est pas un de ces assaut à propos d'IE6 ou une campagne pour essayer de l'enterrer. Il y a assez de cela sur le web, et cela ne vous aide pas si vous devez supporter IE6 pour la simple raison qu'il a encore assez de parts de marché que vous ne pouvez ignorer pour des raisons professionnelles. Non, ce ne sont pas les ressources que vous aviez espérées.

J'ai parcouru le web pour trouver des ressources, j'ai également inclus mes correctifs pour IE6 et j'ai maintenant tout réuni dans cet article de référence afin de venir en aide à celui qui doit tenir compte d'Internet Explorer 6. Quand cela m'a été possible, j'ai fait de mon mieux pour proposer des solutions valides et propres à chaque bug, plutôt que des bidouilles. J'ai également tenté de donner les crédits appropriés pour chaque cas, mais certaines solutions ont été partagées tellement de fois que trouver la découverte originale de chaque correction est difficile. Si vous rencontrez un crédit manquant ou si j'ai oublié un bogue et sa solution, merci de contacter l'auteur qui mettra son article à jour.

Ce volumineux guide pour IE6 a prit un certain temps à être rédiger, et je vous invite à le bookmarker, partager, tweeter et utiliser afin de vous épargner du temps.

Stratégies

Avant de regarder les bogues spécifiques à IE6 et leurs correctifs, il est important de mettre en place en premier certaines stratégies qui vous aideront à minimiser le nombre de problèmes à répétition. Un peu de prévention est bien plus efficace/rentable que d'avoir à gérer une multitude de bugs qui auraient pu être évités en suivant ces bonnes pratiques.

Parts de marché d'IE 6

Selon Market Share, le pourcentage actuel (Aout 2009) d'utilisateurs d'IE6 est de 25,25%, mais d'autres sources indiquent un pourcentage bien inférieur à 18,1%. Bien que les statistiques varient, elles indiquent toutes une courbe / tendance descendante. Toutefois, les seules statistiques qui comptent vraiment sont celles de votre propre site. Si vous utilisez déjà des outils d'analyse de traffic , le pourcentage d'utilisation d'IE6 justifie-t-il le développement pour lui ? En termes d'affaire, quel est le cout / ratio bénéfique pour le temps et l'argent investis à développer pour IE6, contre le fait de l'abandonner carrément ? Pouvez-vous faire un cas de marché pour supporter le mourant IE6 ? Si la majorité de vos visiteurs n'utilisent pas IE6 et que cela ne risque pas de vous amputer du chiffre d'affaire, vous pouvez vous épargner beaucoup de temps, d'effort et d'argent en évitant carrément le problème IE6.

Planifiez votre design et gardez-le simple

Si vous planifiez votre design , ne serait-ce qu'en prenant quelques minutes pour étudier la meilleure approche de développement, vous pouvez mettre de côté certains problèmes de mise en page potentiels. Même les plus complexes designs visuels peuvent et doivent être créés à l'aide de solutions de balisage simples. Si vous trouvez que vous utilisez un nombre de balises excessif, c'est peut-être le signe que vous devriez ré-évaluer votre approche.

Avec l'expérience et en surmontant plusieurs cas de mise en page, gardez trace de vos résultats et des problèmes résolus. Je peux quasiment vous garantir que vous rencontrer à nouveau le même problème, et le fait d'avoir ce document de référence vous fera économiser du temps.

Utilisez un Doctype correct.

Le fait de ne pas utiliser le bon doctype (ou ne pas utiliser de doctype tout court) va déclencher le mode "quirks" et va empêcher votre page d'avoir un rendu consistent selon les navigateurs. Utilisez un des doctypes suivants : HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1

HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Validez votre code

J'ai entendu quelques personnes dire qu'il n'y avait aucune raison commerciale de valider le code, mais je n'adhère pas.
La validation n'est pas difficile à ce point dans la plupart des cas, et devrait prendre seulement quelques minutes à réaliser. Quelques minutes passées à valider le XHML et CSS peuvent soulever des bénéfices pour TOUS les navigateurs, pas seulement pour IE6. La validation assure une compatibilité future et réduit la maintenance. Au minimum, validez le balisage XHTML. La seule vraie raison pour laquelle cela pourrait être ignoré est si vous souhaitez donner l'avantage de quelques propriétés CSS3 aux navigateurs qui les supportent.

Développez en premier pour les navigateurs respectueux des standards

En conjonction avec la validation de code, vous vous épargnerez beaucoup de tracas en développant prioritairement pour les navigateurs respectueux des standards comme Firefox, Opera, Safari et Chrome en premier, puis en opérant pour des navigateurs non conformes comme IE6 et IE7. Parce que les premiers vont avoir sensiblement le même rendu, vous aurez alors la capacité de traiter les particularités d'Internet Explorer séparément. Utiliser le workflow peut également aider dans la garantie d'un code évolutif parce qu'il vous donne une base solide et que si vous identifiez correctement vos correctifs, vous pourrez les oter sans soucis une fois que le support pour ces navigateurs ne sera plus assuré.

Utilisez les améliorations progressives

L'amélioration progressive signifie simplement de s'assurer que la fonctionnalité de base est disponible pour tous les utilisateurs avant d'ajouter le lustrant. EN général, l'amélioration progressive fait référence à des applications web qui fonctionnent sans javascript, puis qui utilisent javascript pour ajouter des animations effets Ajax, etc, mais, en parlant d'IE6, on pourrait également appliquer le principe des améliorations progressives à l'utilisation des CSS3 (oû même plusieurs parties de CSS2), HTML5, et d'autres protocoles non supportés par IE6.

Dans certains cas, il se peut que cela ne soit pas possible de procurer la même expérience à tous les utilisateurs de tous les navigateurs, spécifiquement ceux utilisant IE6. Mettre en place la stratégie d'amélioration progressive assurera que ces utilisateurs auront au moins le minimum de fonctionnalité en parcourant votre site ou votre application web.

Utilisez une règle de mise à zéro CSS

Chaque navigateur est livré avec sa propre feuilles de style par défaut, et cela ne surprendra personne, chacune est différente. Une simple remise à zéro au début de votre feuille de style peut s'avérer gagnante dans l'écriture de code compatible inter-navigateurs. Il y a de nombreuses règles de remise à zéro sur internet, allant de la plus simple à la plus détaillée.

Utilisez un framework javascript

Si JavaScript représente plus qu'une part anecdotique de votre site, considérez l'utilisation d'un framework. La plupart ont été testé dans de multiples navigateurs incluant IE6 et prendront automatiquement en main la plupart (mais pas tous) des cas inter-navigateurs. Il y a plusieurs framework javascript parmi lesquels choisir. En général, ce qui peut être fait avec l'un peut l'être avec l'autre, aussi choisissez avec lequel vous êtes les plus à l'aise au niveau de la syntaxe.

Voici une liste de quelques frameworks parmi les plus populaires :

Il y a certainement beaucoup d'autres frameworks et de nouveaux continuent de sortir, mais les lister tous sera pour un autre jour. Parmi ceux cités, j'adore, utilise et recommande pleinement MooTools si vous maîtrisez JavaScript. Si vous venez juste de débuter, jQuery serait probablement ma seconde recommandation.

Utilisez un script de correction Javascript pour IE

Il y a quelques solutions javascript proposées sur Internet qui tentent de forcer IE à agir comme un navigateur respectueux des standards. Si l'audience ciblée comporte un seuil suffisamment élevé d'utilisateurs disposant de Javascript, vous pourriez essayer IE7 de Dean Packer's ou un script similaire.

Comment déboguer Internet Explorer

Internet Explorer est de notoriété publique difficile à déboguer, mais il existe de nombreux outils pour rendre la tâche aux développeurs plus facile. Comme déjà dit, premièrement développez pour les navigateurs respectant les normes. Firebug et la Web Developper toolbar sont tous deux d'excellent greffons pour Firefox et peuvent aider à trouver ou éradiquer de nombreux bugs dans IE. Si vous souhaitez la puissance de Firebug dans d'autres environnements, Firebug Lite est maintenant également disponible en tant que bookmarklet.

Pour tester de multiples versions d'Internet Explorer, la meilleure option sans installer une machine virtuelle est actuellement IEtester. Les créateurs d'IETester proposent également DebugBar, un plugin pour IE gratuit pour un usage personnel mais demandant une licence commerciale après 60 jours d'utilisation à des fins commerciales.

Comment isoler IE6

Billet original sur Yann Faurie

Faire passer un menu au-dessus d'un flash.

Nicolas Ménard — Thu, 24 Jul 2008 16:11:00 +0200

Au cours d'une intégration e-majine, tout le monde s'est retrouvé un jour ou l'autre face à une situation où le menu déroulant passe sous le flash et il n'est pas toujours évident de trouver les bonnes astuces pour régler le problème. Je vous propose d'étudier différents cas et de voir les solutions appropriées.

Il faut dans un premier temps bien différencier les flashs qui sont intégrés dans un article en tant que média, les flashs intégrés directement dans un template par l'intégrateur ou bien encore le flash "coverflow" qui est mis en place pour les visuels additionnels des produits. Je vous propose d'étudier chaque cas séparément et de voir les astuces pour forcer le flash à passer AU-DESSOUS du menu déroulant.

Cas numéro 1 : le flash intégré dans un article :

En insérant un flash avec un article en bloc par exemple, il peut arriver que dans certains cas, le menu passe au-dessus du flash. Il y a une solution, c'est de définir le paramètre de transparence du flash. Ce peut se faire en cliquant sur la petite icône "modifier" du bloc, puis dans la fenêtre qui s'ouvre en cliquant sur le bouton "modifier" et enfin sur l'onglet "Modifier le flash". Vous accéderez ainsi aux préférences du flash où l'on peut remarquer une boite à cocher "transparence". En cliquant dessus, vous forcerez ainsi le flash à devenir transparent. Rassurez-vous, cela ne veut pas dire qu'il va devenir invisible mais plutôt qu'il va pouvoir laisser apparaître l'image ou la couleur du fond de votre document HTML. D'autre part il va gérer les layers qui passeront au-dessus, comme un menu déroulant par exemple. En examinant le code qui va être généré par e-majine (et qui est tout à fait standard), on notera la présence d'une ligne paramétrant la transparence et réglant dans bien des cas le problème du menu qui passe dessous.

<object height="300" width="1000" data="/media/clx_juxt__059093700_1133_24072008.swf" type="application/x-shockwave-flash">
<param name="quality"/>
<param value="transparent" name="wmode"/>
<param value="/media/clx_juxt__059093700_1133_24072008.swf" name="movie"/>
</object>

Cas numéro 2 : le flash intégré dans un template :

Il peut arriver que l'on doit doive insérer une animation flash dans un template, quitte à ce qu'il ne soit pas facilement administrable. Dans ce cas là, quel code mettre ? Tout d'abord vous pouvez essayer celui qui est écrit au-dessus, en pensant à bien changer les tailles, le nom du fichier et le chemin pour y accéder. Si cela ne résout pas l'affaire, il y a une alternative très intéressante qui est d'utiliser une solution extérieure et gratuite '"swfobject" et que l'on trouve à cette adresse : http://wiki.mediabox.fr/documentation/swfobject Cette solution permet d'une part de régler la transparence d'un flash, mais également de désactiver le cadre activeX que l'on trouve parfois chez les utilisateurs Windows et qui se met automatiquement autour des flashs, obligeant à cliquer dessus pour le désactiver. Très perturbant sur un bouton en flash où il est nécessaire de cliquer deux fois pour accéder au lien. Notons enfin que cette solution utilise un code reconnu valide par le W3C, donc votre site, s'il est bien intégré, restera valide.

Voilà comment mettre en place le script :

Téléchargez le "swfobject.zip"
Vous y trouverez à l'intérieur "swfobject.js". Mettez-le sur le serveur dans le dossier /scripts/.
Dans le "mainPage.html", insérez cette ligne de code, en changeant l'adresse du lien en fonction de l'endroit où vous avez mis le js : <script type="text/javascript" src="/scripts/swfobject.js"></script>
A l'endroit du template où vous souhaitez insérer le flash, mettez le code suivant :

<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var so = new SWFObject("/images/swf/movie.swf", "mymovie", "400", "200", "7", "#336699");
so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

Le texte "This text is replaced by the Flash movie." représente le contenu alternatif qui s'affichera si l'internaute a une vieille version de lecteur flash. En dessous, dans la balise <script> vous indiquerez les propriétés de votre flash : le nom, la largeur, la hauteur, et la couleur de fond de l'animation. Le "7" correspond à la version minimum du lecteur flash que vous souhaitez que l'internaute ait pour voir l'animation. Vous noterez qu'ici également, on insère une ligne sur la transparence : so.addParam("wmode", "transparent");

Et voilà, si tout va bien, le flash passe bien sous le menu.

Cas numéro 3 : le coverflow des visuels supplémentaires des produits :

Comme vous l'avez peut-être vu, il est possible de mettre en place une méthode de visualisation dynamique des visuels supplémentaires des produits : http://communaute.medialibs.com/support/forum/topic-988.html Il est possible que là également, le flash passe au-dessus de votre menu déroulant. Pour régler cela, il suffit d'éditer votre template "product.html" (par exemple : /modeles/fr/Modele1/catalog/product.html) et au niveau de la ligne :

RunFlash("/images/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);

remplacez "window" par "transparent"

RunFlash("/images/swf/pictureflow-H180.swf", "600", "300", "#000000", "transparent", "PictureFlow", flashVars);

Billet original sur Nicolas Menard

Diaporama avec les visuels supplémentaires des produits du catalogue

Nicolas Ménard — Wed, 23 Apr 2008 11:28:00 +0200

Un diaporama est maintenant disponible pour afficher les visuels supplémentaires des produits du catalogue et ceci de façon dynamique et intuitive. Vous pouvez d'une part naviguer entre les images et d'autre part cliquer sur une vignette pour afficher l'image en grand.

Il est maintenant possible d'utiliser un nouveau module afin de regarder les visuels supplémentaires des produits du catalogue et ceci de façon dynamique et intuitive. Vous pouvez d'une part naviguer entre les images et d'autre part cliquer sur une vignette pour afficher l'image en grand avec ShadowBox.

Un exemple en action est visible ici

Ce module fait appel à du javascript, des feuilles de styles ainsi qu'à du flash. Celui-ci se nourri d'un fichier XML qui est généré lorsque vous intégrez des visuels additionnels dans le manage. A noter qu'il est donc tout à fait possible de créer votre propre animation flash pour afficher les images.

Le fichier flash peut afficher des images de différentes hauteurs prédéfinies à l'avance (90 pixels de hauteur, 135, 180, 240 ou 340), vous devez donc préparer vos images à l'avance suivant votre choix de la liste. Les modes portraits, paysages ou panoramiques sont automatiques. La largeur est maintenant recalculée en fonction de l'image

Vous pouvez utiliser ce module en utilisant les scripts MooTools ou Scriptaculous.

Cliquez ici Pour télécharger le visualiseur utilisant MooTools

Cliquez ici Pour télécharger le visualiseur utilisant Scriptaculous

Attention, ce visualiseur peut générer des conflits de javascript si vous utilisez du JQuery sur votre site. A ce moment là il est conseillé de passer JQuery en mode de compatibilité (voir la méthode « noConflict »).

Analyse des éléments :

Dossier « swf » : C'est ici que l'on trouver les swf spécifiques à chaque taille : pictureflow-H090.swf, pictureflow-H135.swf, pictureflow-H180.swf, pictureflow-H240.swf et pictureflow-H340.swf. C'est un de ces fichiers que vous choisirez d'appeler dans votre site, suivant la hauteur des images désirée.

Dossier «scripts» : plug_flash.js qui permet d’inclure proprement un SWF dans une page web et d’agir simplement sur tous les paramètres du FlashPlayer. shadowbox.js : le programme qui gère ShadowBox shadowbox.css : permet de paramétrer l'apparence de ShadowBox

Dossier « images » : vous trouverez à l'intérieur les images utilisées pour l'interface du ShadowBox (animation du loading, etc...)

L'un des dossiers suivants est nécessaire (Scriptaculous ou MooTools) suivant le fichier zip que vous avez téléchargé :

Dossier « scriptaculous » : "flashShadowboxInjector.js", "shadowbox-prototype.js", "prototype.js", "scriptaculous.js", "effects.js" qui correspondent à l'interface ShadowBox avec script.aculo.us

Dossier « mootools » : "mootools-release-1.11.js", "shadowbox-mootools.js", "flashShadowboxInjector-mootools.js" qui correspondent à l'interface ShadowBox avec MooTools.

Mise en place des fichiers en ftp :

Que ce soit dans la cas de MooTools ou Scriptaculous, il suffit de mettre le fichier « scripts » à la racine de votre site. Voici l'arborescence que vous obtiendrez :

Fichiers plug_flash.js, shadowbox.js, shadowbox.css : mettre ces fichiers à la racine de votre site dans un dossier « scripts » (pour obtenir un chemin de type : /scripts)

Dossier « images » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/images)

Dossier « swf » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/swf)

Dossier « mootools » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/mootools)

Dossier « scriptaculous » : à mettre dans le dossier scripts (pour obtenir un chemin de type : /scripts/scriptaculous) Intégration des scripts dans le site :

Tout d'abord il s'agit d'appeler le style pour l'effet ShadowBox :

<!-- CSS : pour l'effet shadowbox-->
<!-- Pour e-majine vous pouvez le placer dans le head dans mainPage.html ou l'intégrer dans les feuilles de styles -->
<link rel="stylesheet" type="text/css" href="/scripts/shadowbox.css">

Voici ensuite le bloc à installer sur votre page product.html (par exemple : /modeles/fr/Modele1/catalog/product.html) dans le cas d'une intégration avec MooTools :

<!--  COVERFLOW  -->
        <mx:bloc id="coverflow">
        <div>
                <script type="text/javascript" src="/scripts/plug_flash.js"></script>
                <script type="text/javascript" src="/scripts/mootools/mootools-release-1.11.js"></script>
                <script type="text/javascript" src="/scripts/mootools/shadowbox-mootools.js"></script>
                <script type="text/javascript" src="/scripts/mootools/flashShadowboxInjector-mootools.js"></script>
                <script type="text/javascript" src="/scripts/shadowbox.js"></script>
                <script type="text/javascript">window.addEvent('domready', function(){Shadowbox.init();});</script>
                <mx:text id="script" />
                <mx:bloc id="tplScript">
                <script type="text/javascript">
                        var flashVars="";
                        flashVars+="xmlfeed=/getProductImages-coverflow-{idproduct}";
                </script>
                </mx:bloc id="tplScript">
                
                <script type="text/javascript">
                        flashVars+="&lightBox=true";                      // Path to xml file or PHP script
                        flashVars+="&myBckgrnd=0x000000";         // Image Reflection Background (for realistic reflection)
                        flashVars+="&superGlass=false";                   // Transparent reflection switch (for specific background): true or false
                        flashVars+="&myBckGrndImage=";                    // Path to load specific image background
                        flashVars+="&myColor=0xFFFFFF";                   // Image border color: Hex number
                        flashVars+="&myTextColor=0xFFFFFF";               // Tooltip text color: Hex number
                        flashVars+="&mySubTextColor=0xFFFFFF";            // Description text color: Hex number
                        flashVars+="&myArrowColor=0x000000";              // Scrollbar arrow color: Hex number
                        flashVars+="&myScrollColor=0xEF7701";             // Scrollbar color: Hex number
                        flashVars+="&myLoadBarColor=0xEF7701";            // Load bar color: Hex number
                        flashVars+="&myAlpha=0.9";                        // Image border transparency ratio (0 (invisible) to 1 (max opacity))
                        flashVars+="&Border=rounded";                     // Image border aspect "rounded" or "square"
                        flashVars+="&Tooltip=true";                       // Tooltip switch
                        flashVars+="&descText=true";                      // Description text under front image
                        flashVars+="&Scrollbar=true";                     // Scrollbar behavior ("true" = autoHidden, "permanent" = always on, "false" = no scrollbar)
                        flashVars+="&myStep=80";                  // Images pitch
                        flashVars+="&myOffset=40";                        // Front image pitch
                        flashVars+="&scaleDown=75";                       // Inactive images Scale in %
                        flashVars+="&scaleUp=100";                        // Active images Scale in %
                        flashVars+="&MaskScene=false";                    // Scene side mask switch
                        flashVars+="&shownPicture=5";                     // Image shown at start
                        flashVars+="&U_Flow=true";                        // U Flow switch: Linear run or U run for images
                        flashVars+="&descText=true";                      // Description text below front image switch: true or false
                        flashVars+="&scrollbar_Y=220";                    // Y coord of scrollbar: int number
                        flashVars+="&rollOverAnim=false";         // Rollover navigation switch: true or false
                        flashVars+="&easeTime=0.9";                       // Ease transition time (s): Float number
                        flashVars+="&clips2move=8";                       // Number of clips to animate: Int number
                        
                        RunFlash("/scripts/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);
        </script>
                <noscript>
                  <span class="Style1">You should have Javascript active to see this page</span>
            </noscript>  
        
        </div>
        </mx:bloc id="coverflow">
<!--  FIN COVERFLOW-->

Voici ensuite le bloc à installer sur votre page product.html (/modeles/fr/page/catalog/product.html) dans le cas d'une intégration avec Scriptaculous :

<!--  COVERFLOW  -->
        <mx:bloc id="coverflow">
        <div>

                <script type="text/javascript" src="/scripts/plug_flash.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/prototype.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/effects.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/flashShadowboxInjector.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/scriptaculous.js"></script>
                <script type="text/javascript" src="/scripts/scriptaculous/shadowbox-prototype.js"></script>
                <script type="text/javascript" src="/scripts/shadowbox.js"></script>
                <script type="text/javascript">window.onload = Shadowbox.init;</script>
                <mx:text id="script" />
                <mx:bloc id="tplScript">
                <script type="text/javascript">
                        var flashVars="";
                        flashVars+="xmlfeed=/getProductImages-coverflow-{idproduct}";
                </script>
                </mx:bloc id="tplScript">
                
                <script type="text/javascript">
                        flashVars+="&lightBox=true";                      // Path to xml file or PHP script
                        flashVars+="&myBckgrnd=0x000000";         // Image Reflection Background (for realistic reflection)
                        flashVars+="&superGlass=false";                   // Transparent reflection switch (for specific background): true or false
                        flashVars+="&myBckGrndImage=";                    // Path to load specific image background
                        flashVars+="&myColor=0xFFFFFF";                   // Image border color: Hex number
                        flashVars+="&myTextColor=0xFFFFFF";               // Tooltip text color: Hex number
                        flashVars+="&mySubTextColor=0xFFFFFF";            // Description text color: Hex number
                        flashVars+="&myArrowColor=0x000000";              // Scrollbar arrow color: Hex number
                        flashVars+="&myScrollColor=0xEF7701";             // Scrollbar color: Hex number
                        flashVars+="&myLoadBarColor=0xEF7701";            // Load bar color: Hex number
                        flashVars+="&myAlpha=0.9";                        // Image border transparency ratio (0 (invisible) to 1 (max opacity))
                        flashVars+="&Border=rounded";                     // Image border aspect "rounded" or "square"
                        flashVars+="&Tooltip=true";                       // Tooltip switch
                        flashVars+="&descText=true";                      // Description text under front image
                        flashVars+="&Scrollbar=true";                     // Scrollbar behavior ("true" = autoHidden, "permanent" = always on, "false" = no scrollbar)
                        flashVars+="&myStep=80";                  // Images pitch
                        flashVars+="&myOffset=40";                        // Front image pitch
                        flashVars+="&scaleDown=75";                       // Inactive images Scale in %
                        flashVars+="&scaleUp=100";                        // Active images Scale in %
                        flashVars+="&MaskScene=false";                    // Scene side mask switch
                        flashVars+="&shownPicture=5";                     // Image shown at start
                        flashVars+="&U_Flow=true";                        // U Flow switch: Linear run or U run for images
                        flashVars+="&descText=true";                      // Description text below front image switch: true or false
                        flashVars+="&scrollbar_Y=220";                    // Y coord of scrollbar: int number
                        flashVars+="&rollOverAnim=false";         // Rollover navigation switch: true or false
                        flashVars+="&easeTime=0.9";                       // Ease transition time (s): Float number
                        flashVars+="&clips2move=8";                       // Number of clips to animate: Int number
                        
                        RunFlash("/scripts/swf/pictureflow-H180.swf", "600", "300", "#000000", "window", "PictureFlow", flashVars);
        </script>
                <noscript>
                  <span class="Style1">You should have Javascript active to see this page</span>
            </noscript>  
        
        </div>
        </mx:bloc id="coverflow">
<!--  FIN COVERFLOW-->

Paramétrage de l'apparence :

Le script par défaut est paramétré pour être sur un site à fond noir mais il est heureusement tout à fait possible d'en changer l'aspect graphique. Tous les paramètres concernant l'apparence sur trouvent ci-dessus, entre les commentaires « COVERFLOW »

Billet original sur Nicolas Menard

La réécriture d'URL (URL rewriting) avec E-Majine

Yann — Tue, 15 Apr 2008 14:51:00 +0200

La ré-écriture d'URL avec E-Majine

Qu'est-ce ?

Cela consiste à remplacer une chaine de caractères utilisée par les serveurs web par une autre.
Concrètement, il s'agit des caractères affichés après le nom de domaine du site, dans la barre d'adresse de votre navigateur internet.

Exemple :

http://www.monsite.com/marequete.php?param1=moncritere&param2=autrecritere&variable=français

pourra être avantageusement remplacé par :

http://www.monsite.com/formation/referencement/optimisation-de-code-source.php

Pourquoi recourir à la réécriture d'URL ?

D'un point de vue purement pratique, cela permet d'afficher l'arborescence que l'on souhaite voir apparaitre dans la barre d'adresse.
C'est également beaucoup plus explicite pour l'internaute (qui n'a plus besoin de nommer ses favoris/bookmarks puisque le contenu est dans l'URL).
Pour le référencement internet, les robots des moteurs de recherche collectent les adresses des pages web (URL) et y associent des champs lexicaux : Une URL de type http://www.e-majine.com/gerer-son-site-avec-e-majine-manage/, et qui comprend dans le contenu visible de la page des mots liés à la gestion de site, va être mieux prise en compte par le moteur de recherche, puisque les mots-clé associés au thème de la page sont repris dans l'adresse, qu'une URL de forme http://www.e-majine.com/1435423.html.

A contenus équivalents et en partant d'une page "nouvelle" (pas de liens externes pointant vers elle), le moteur affichera en priorité notre URL dans les résultats !

Enfin,

http://www.monsite.com/marequete.php?param1=moncritere&param2=autrecritere&variable=français

regroupe les inconvénients suivants : illisibilité, signification nulle pour l'internaute non spécialiste, caractères spéciaux (?/&/$/€,ç..) encodés et non pris en compte par la plupart des moteurs de recherche.

C'est une adresse qui ne sera pas retenue pour figurer dans les index des bases d'engins de recherche en réponse à la requête "naturelle" d'un internaute.

Accessoirement, c'est aussi potentiellement dangereux car cela fournit un bon indicateur pour toute personne malveillante qui tenterait d'accéder par déduction à d'autres contenus...

Je suis convaincu(e) ! Quand utiliser la réécriture d'URL ?

Lorsqu'il s'agit d'un site web dit "statique" (les pages sont assemblées à la main, et les liens vers les ressources et les autres pages sont connus d'avance par le webmaster), nul besoin de ré-écrire l'adresse puisque le webmestre peut choisir lui-même le nom à donner à ses fichiers.

Lorsqu'il s'agit de sites administrables, c'est à dire dont le contenu est créé puis publié au fur et à mesure, l'exercice est impossible puisque nul ne peut prédire les contenus qui vont être intégrés. Il s'agit alors de trouver un système qui va forger une adresse à partir d'éléments contenus dans et autour de la ressource.

L'état de l'art de la ré-écriture d'URL

Par défaut, la grande majorité des sites dits "dynamiques" servent leurs pages en laissant dans l'URL les paramètres qui sont passés via le langage interprété côté serveur, afin d'accéder à la base de données et de retourner les résultats correspondants à la requête de l'internaute.

Ce système est utilisé massivement par la plupart des outils dits "web 2.0", qu'ils soient blogs, forums ou CMS...

Concrètement, cela donne souvent, avec les différentes solutions du marché (exemples au hasard) :

article.php3?id_article=765
spip.php?article98
/content/section/1/2/
index.php?id=250
/content/#more-55

Note : Certaines de ses solutions peuvent permettre la ré-écriture d'URL, à condition d'user de plug-in (greffons), et d'aller configurer et éditer manuellement des fichiers .php et .htaccess , et sous réserve de compatibilités entre versions; enfin sous réserve de compatibilité avec la configuration serveur de l'hébergeur...

E-Majine les surpasse en déclinant ce principe au plus petit élément rédactionnel publié sur le site, l'article.

En effet, par défaut (sans aucune configuration), E-Majine est optimisé pour le référencement naturel avec un système d'écriture d'URL qui reprend le chemin de votre arborescence (au minimum), puis le nom du fichier (si vous l'avez spécifié).

Ex : http://www.e-majine.com/concevoir-des-sites-internet-cms/solutions/les-produits-standards/34-gerer-son-site-internet.html

Et depuis la V1, c'est également tout le catalogue (et donc les produits...) qui bénéficie de cette fonctionnalité !

Où est le piège ?

Il n'y en a pas ! E-Majine vous permet d'associer exclusivement une adresse optimisée à une page. Ainsi, pas de risque de se voir pénalisé par Google pour "duplicate content" (duplication de contenu > deux pages proposant le même code - visible et invisible - dans le but de posséder un plus grand nombre de pages indexées, et donc de toucher potentiellement plus d'internautes en squattant les places dans les pages de résultats des moteurs de recherche; en savoir plus sur le site de Google "outils pour webmasters").

Existe-t-il des contraintes ?

Bien entendu, dans le cadre d'une réécriture d'URL pour améliorer le positionnement de sa page dans les feuilles de résultats des moteurs de recherche, il ne faut pas s'imaginer qu'il suffit de truffer son adresse de mots-clés pour que l'affaire soit gagnée...
Tout comme pour les sous-domaines mieux notés que les répertoires, il faut penser à positionner les mots importants le plus près du nom de domaine possible (donc à gauche pour notre sens de lecture.) Ceux qui viennent après perdent en importance. Enfin, il est souvent question de limite du nombre de caractère d'une URL, variable tant que le serveur est capable de donner la page (sans quoi il retourne une erreur 414 - URI trop longue).

Voici ainsi quelques adresses ayant pignon sur web :

http://thelongestlistofthelongeststuffatthelongestdomainnameatlonglast.com/wearejustdoingthistobestupidnowsincethiscangoonforeverandeverandeverbutitstilllookskindaneatinthebrowsereventhoughitsabigwasteoftimeandenergyandhasnorealpointbutwehadtodoitanyways.html

Et une requête encodée :

http://www.google.com/search?hl=en&lr=&c2coff=1&rls=GGLG%2CGGLG%3A2005-26%2CGGLG%3Aen&q=http%3A%2F%2Fwww.google.com%2Fsearch%3Fhl%3Den%26lr%3D%26c2coff%3D1%26rls%3DGGLG%252CGGLG%253A2005-26%252CGGLG%253Aen%26q%3Dhttp%253A%252F%252Fwww.google.com%252Fsearch%253Fhl%253Den%2526lr%253D%2526c2coff%253D1%2526rls%253DGGLG%25252CGGLG%25253A2005-26%25252CGGLG%25253Aen%2526q%253Dhttp%25253A%25252F%25252Fwww.google.com%25252Fsearch%25253Fsourceid%25253Dnavclient%252526ie%25253DUTF-8%252526rls%25253DGGLG%25252CGGLG%25253A2005-26%25252CGGLG%25253Aen%252526q%25253Dhttp%2525253A%2525252F%2525252Fwww%2525252Egoogle%2525252Ecom%2525252Fsearch%2525253Fsourceid%2525253Dnavclient%25252526ie%2525253DUTF%2525252D8%25252526rls%2525253DGGLG%2525252CGGLG%2525253A2005%2525252D26%2525252CGGLG%2525253Aen%25252526q%2525253Dhttp%252525253A%252525252F%252525252Fuk2%252525252Emultimap%252525252Ecom%252525252Fmap%252525252Fbrowse%252525252Ecgi%252525253Fclient%252525253Dpublic%2525252526GridE%252525253D%252525252D0%252525252E12640%2525252526GridN%252525253D51%252525252E50860%2525252526lon%252525253D%252525252D0%252525252E12640%2525252526lat%252525253D51%252525252E50860%2525252526search%252525255Fresult%252525253DLondon%25252525252CGreater%252525252520London%2525252526db%252525253Dfreegaz%2525252526cidr%252525255Fclient%252525253Dnone%2525252526lang%252525253D%2525252526place%252525253DLondon%252525252CGreater%252525252BLondon%2525252526pc%252525253D%2525252526advanced%252525253D%2525252526client%252525253Dpublic%2525252526addr2%252525253D%2525252526quicksearch%252525253DLondon%2525252526addr3%252525253D%2525252526scale%252525253D100000%2525252526addr1%252525253D%2526btnG%253DSearch%26btnG%3DSearch&btnG=Search

Et avec E-Majine ?

De la même façon que l'écriture pour le web requiert un travail adapté (on appelle cette tâche optimisation des contenus), vous déclarez les règles que vous souhaitez voir appliquer à cette ré-écriture en signifiant à E-Majine les paramètres à intégrer dans l'URL.

Voici les différentes possibilités qui vous sont fournies pour faire du sur-mesure, sans connaissance particulière :

Nom de la page : c'est la partie finale de l'URL, placée donc à l'extrémité droite, et qui comporte l'extension du fichier. Il vous est ainsi possible d'associer à votre page un nom et une extension de votre choix (.html, .html, .php, .txt....)

Titre de la page : c'est la balise html <title> dont le contenu est affiché dans la barre du navigateur. C'est une balise primordiale dans le cadre du référencement naturel.

Pour le CATALOGUE E-COMMERCE, depuis la V1 d'E-Majine, il est possible de choisir un certain nombre de paramètres des fiches produits qui seront remontés dans l'adresse :

Libellé
Référence
Propriété(s) additionnelle(s)
Variante(s) de produits

Tout en ayant la possibilité d'inter-changer l'ordre de ces éléments dans la réécriture.

Il en va de même pour les fiches du module annuaire. Il est ainsi possible de choisir parmi les noms de catégories, et les noms des fiches. Par exemple : /liens/category-3-sites-de-salles-de-concerts.html

L'accès à la fiche de l'annuaire permet de remonter le titre de l'entrée dans le <title> de la page.
Utilisée conjointement avec la ré-écriture d'URL de l'arborescence dans E-Majine, vous allez ainsi obtenir des URL dites "propres", c'est à dire dont la syntaxe comprend des mots explicites et signifiants, sans caractère spécial (encodage, sigles, etc) qui pourrait en gêner la lisibilité.

Le même principe est décliné aux articles (de type actualités, évènements, en multi-publication...)

Le forum hérite quant à lui du passage des titres et de la description au niveau de la balise <title> et de la balise meta description.

La ré-écriture d'URL est également la méthode utilisée dans E-Majine pour gérer les exceptions, comme la fameuse page 404 ("page not found", page non trouvée (sur le serveur)), que vous pouvez choisir de diriger vers une page/rubrique spéciale (un plan du site ?), ou bien de ramener au niveau d'arborescence parent.

(A noter que les redirections au niveau des rubriques, si utilisées via les méthodes de publication, sont de type "permanentes" (entête HTTP 301)).

Ces possibilités de ré-écrire vos adresses vous épargnent le travail délicat qui est effectué en coulisse, basé sur des règles d'expressions régulières dont la moindre erreur (de logique ou de syntaxe) peut entrainer l'indisponibilité partielle ou totale de votre site !

Elles sont accessibles simplement, et ne demandent aucune connaissance informatique (E-majine corrige vos suggestions en remplaçant les caractères spéciaux et les espaces.)

Enfin, elles sont immédiates à mettre en oeuvre, et peuvent s'appliquer de façon individuelle à chaque page. Ainsi donc, on peut laisser au choix E-Majine gérer la ré-écriture automatiquement, ou attribuer arbitrairement (à posteriori) une adresse individuelle à une page. Et c'est ce qui fait l'atout incomparable d'E-Majine face aux autre solution qui ne peuvent qu'appliquer des règles de réécriture à priori (c'est à dire où il faut définir une règle qui sera appliquée de façon uniforme à toutes nos adresses) : dans le cadre d'un travail collaboratif sur un site E-Majine, la personne en charge du référencement peut venir optimiser individuellement les URL des pages et des articles crées par les rédacteurs même une fois les contenus publiés !

Nous aborderons dans un prochain billet la question d'accessibilité, en couvrant les notions de code standard conforme, de normes et de l'optimisation appliquée aux ressources dans E-Majine (code XHTML et CSS valides, attributs ALT, LONGDESC, LANG gérés nativement, etc...)

YF

Billet original sur Yann Faurie

Quelques logiciels utiles pour intégrer avec e-majine

Nicolas Ménard — Fri, 28 Mar 2008 14:13:00 +0100

Pour optimiser son temps d'intégration avec e-majine, il y a un certains nombre de petits logiciels très utiles pour intégrer rapidement tout en faisant des pages compatibles avec un maximum de navigateurs. En voici quelques-uns.

Web Developer :

Cette extension Firefox ajoute un menu et une barre de navigation au navigateur. Cet outil est utile à tout développeur e-majine. Vous pouvez gérer le CSS sur une page (voir ou enlever les styles), désactiver sur une page le java, les javascripts, les couleurs, les images, gérer les cookies du site visité, traiter les images (les retirer, voir les chemins de chacune, les tailles). Vous pourrez tester votre site en différentes résolutions et de liens automatiques pour valider votre site sur W3C…

Lien pour télécharger l'extension

Firebug :

Autre extension Firefox très intéressante. Firebug fait partie de mes extensions préférées depuis un moment. Je l’estime aujourd’hui même plus importante que l’extension Web Developer.

Cette extension permet de retrouver simplement le code lié au visuel. Après avoir activé l’inspecteur, en survolant l’élément sur lequel on veut travailler, on clique dessus et le volet Firebug se fige dessus en indiquant toutes ses propriétés CSS, le modèle de boîte, etc. L’inverse est également possible, c’est-à-dire qu’en survolant le code, la correspondance visuelle dans la page est établie. De plus les différentes marges (internes, externes, bordures) sont elles aussi mises en surbrillance.

L'intérêt principal de cet inspecteur c’est également l’édition à la volée de toutes les balises. Très utile pour tester diverses classes d’un objet. Ainsi en changeant la valeur d'un style, le résultat est visible immédiatement à l'écran. C'est plus rapide que d'éditer la feuille de style, d'enregistrer, et regarder le résultat sur le navigateur.

Firebug permet de gagner beaucoup de temps dans la modification des CSS des template e-majine. En sélectionnant sur la fenêtre du navigateur une boîte, un h1 ou autre, on retrouve dans le panneau latéral, outre ses caractéristiques, la feuille de style qui est appelée ainsi que le numéro de la ligne du style dans le code. Le gain de temps est assez énorme.

Par contre attention, Yann me signale qu'il existe un conflit entre Firebug et l'éditeur de css accessible via l'onglet "intégration".

Lien pour télécharger l'extension

Multiple IE :

Avec Windows, il est compliqué d'installer plusieurs versions d'Internet Explorer sans qu'elles entrent en conflit. Même si Windows Vista installe IE7, bon nombre d'ordinateurs sont encore équipés de IE6. Multiple IE installe toutes les versions d'Internet Explorer (IE3, IE4.01, IE5, IE5.5 et IE6) de façon très fiable. Très utile pour développer votre site e-majine en le testant sur différentes versions d'IE.

Lien pour télécharger Multiple IE

IETester :

Voici le petit dernier : IETester. Même s'il est en version 0.2, il mérite qu'on s'y attarde. Contrairement à Multiple IE qui installe toutes les versions d'IE, IETester va installer UNE application basée sur une interface multionglets, chaque onglet correspondant à une version. Même s'il y a quelques bugs, il vaut le coup qu'on en suive l'évolution.

Lien pour télécharger IETester

Billet original sur Nicolas Menard

En savoir plus sur les fonctionnalités proposées par E-Majine : LE SITEMAP

Yann — Mon, 10 Mar 2008 09:15:00 +0100

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

Réaliser des aides pour les formulaires avec CSS et Javascript

Simon Bonaventure — Mon, 30 Apr 2007 16:43:00 +0200

Depuis la version 0.14a d'e-majne, vous avez certainement rencontré une nouveauté sur les formulaires. Lors de l'ajout de champs de formulaires, il est possible de remplir un nouveau champ, le champ d'information : On peut se servir de ce champ pour compléter le libellé du champ afin de donner plus d'informations sur le champ à compléter. Nous allons voir comment gérer l'affichage de ces champs de façon un peu moins brut, voir un peu tendance... Attention, ce billet est relativement long, donc pour ceux qui n'ont pas trop le temps voici le résultat final voir le résultat final

Le XHTML et le CSS :

Tout d'abord, il va falloir modifier vos templates si vous voulez pouvoir remonter ce champ de nouveauté pour qu'au niveau du HTML, cela nous donne quelque chose comme cela :

<div class="row">
        <label for="libelleid">
                libelle
                <span class="obligatory">*</span> :
        </label>
        <span>
                <input name="libelle" id="libelleid" type="text">
                <span class="aide">
                        <p>
                        voici mon champ d'information
                        </p>
                </span>
        </span>
</div>

Ce qui impose pour le template creator_form.html de rajouter cet élément à la place des champs de formulaire :

<span mXattribut="class:error2">
        <mx:text id="fields_input"/>
        <mx:bloc id="additionnals_informations">
                <span class="aide">
                        <mx:text id="additionnals_informations" />
                </span>
        </mx:bloc id="additionnals_informations">
</span>

Si maintenant on appliquait un peu de CSS afin de rendre tout ça un peu plus propre.

body{
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size:65%;
}
*{
        margin:0;
        padding:0;
}
form{
        width:600px;
}
fieldset{
        border: 1px solid #757575;
        margin:10px;
        padding:5px;
}
legend{
        color:#757575;
        font-size:1.1em;
        font-weight: bold;
        padding:0 5px;
}
.row{
        clear:both;
        margin: 5px;
        padding: 5px;
        position:relative;
}
label{
        float:left;
        width:170px;
}
input, select, textarea{
        border: 1px solid #999999;
        text-align:left!important;
        width: auto;
}

Si maintenant on applique un style à nos aides, voici ce que cela donne. On pourra remarquer que les aides sur les champs de formulaires sont masqués par défaut à l'aide d'un display:none;, car nous allons afficher ces aides uniquement lorsque l'internaute aura placé sa souris dans le champs (focus).

.aide {
        display:none;
        width: 191px;
        z-index:800;
        margin:-5px 0 0 15px;
        position:absolute;
        background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;
}
.aide p{
        margin:0;
        padding:10px 12px 10px 18px;
        background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;
}

Le Javascript :

On va maintenant en javascript parser notre page afin de trouver tout les champs de formulaire de type input, et pour chacun d'entre eux, nous allons réagir au focus en affichant l'aide et enlever cette aide lorsque le curser de la souris ne se trouve plus dans mon champ de formulaire (onblur).

function prepareInputsForHints() {
        var inputs = document.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++){
                inputs[i].onfocus = function () {
                        if(this.parentNode.getElementsByTagName("span").length>0){
                                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                        }
                }
                inputs[i].onblur = function () {
                        if(this.parentNode.getElementsByTagName("span").length>0){
                                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                        }
                }
        }
}

Il va falloir faire exactement la même manipulation pour les champs de type select (liste déroulante) et textarea (texte multilignes), juste ici aucun soucis, on change les input par les champs de formulaire correspondant. Malheureusement, avec e-majine il existe un peu plus que ces champs de formulaire, il faut aussi prévoir l'affichage de mes champs de formulaire de type input radio et case à cocher qui ont une structure XHTML différente que des champs de formulaire normaux, donc il va falloir gérer des conditions et un fonctionnement différent de ce script. Et puis il y a aussi le soucis pour les champs de formulaire de type file, pour lesquelles la réaction au comportement focus se fait sur le bouton parcourir, ce qui en sera visible que pour les utilisateur qui naviguent à l'aide de la touche tabulation, donc pour ces champs de type fichier, l'affichage de l'aide se fera au survol.
Je vous fait grâce du fonctionnement de ce script, pour les plus curieux, tout se trouve dans le ficher à télécharger ci-dessous.

Télécharger la première version du script.

Un peu d'animation avec tout ça :

Maintenant, si on jouait avec des effets à la sauce 2.0, jouer d'accord mais en toute légèetré d'abbord, voici donc une librairie qui regroupe juste des effets graphique pour seulement 4ko, simple.js. Parmis tout les effets que propose cette librairie javascript, il y en a un qui m'intéresse tout particulièrement c'est $opacity qui va me permettre d'afficher l'aide nom seulement dans la bulle grâce à mes styles, mais aussi en fondu, il faut donc tout d'abord faire appel à cette librairie :

<script type="text/javascript" src="/common_scripts/simple.js"></script>

Lorsqu'on regarde la documentation de cette librairie javascript pour cette fonction, il est écrit :

$opacity(id, opacStart, opacEnd, millisec)

On remarque donc que cette fonction s'applique à un identifiant, avec une opacité de départ et de fin, et une durée en millisecondes entre les deux opacités. Le soucis c'est qu'avec e-majine, nous n'avons pas d'identifiant sur les balises span qui entourent nos aides, pas de soucis, grâce au javascript et surtout du DOM, nous allons recréer ces identifiants.

var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');

Et nous allons donc pouvoir appliquer la fonction qui gère l'opacité

$opacity(this.id+'aide', 0, 100, 1500);

Ce qui nous donne au final :

inputs[i].onfocus = function () {
        if(this.parentNode.getElementsByTagName("span").length>0){
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
                $opacity(this.id+'aide', 0, 100, 1500);
                return false;
        }
}
inputs[i].onblur = function () {
        if(this.parentNode.getElementsByTagName("span").length>0){
                var identifant = this.parentNode.getElementsByTagName("span")[0].setAttribute("id", this.id+'aide');
                $opacity(this.id+'aide', 100, 0, 1500);
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                return false;
        }
}

Attention, il est important de remarquer qu'à la réaction sur le onblur, je repasse l'opacité à 0, sinon lorsqu'on clique deux fois sur un même élément de formulaire, la gestion de l'opacité ne sera pas bonne.

Et l'accessibilité dans tout ça

Exact, comment font les utilisateurs ne disposant pas de javascript pour avoir accès à ces champs d'aide dans les formulaires. Et bien plutôt que d'appliquer les styles (avec un style display:none;) à ces champs pour tout les utilisateurs, je vais insérer ces styles la via javascript.

document.write('<style type="text/css">.aide {filter:Alpha(opacity=0); -moz-opacity:0; opacity:0;display:inline;width: 191px;z-index:800;margin:-5px 0 0 15px;position:absolute;background:url(/common_images/skin001/form_aide.gif) bottom right no-repeat;}.aide p{margin:0;padding:10px 12px 10px 18px;background:url(/common_images/skin001/pointer_form.gif) top right no-repeat;}</style>');

Désormais, il ne reste plus qu'a intégrer ces deux fichiers javascript

<script type="text/javascript" src="/common_scripts/simple.js"></script>
<script type="text/javascript" src="/common_scripts/helpForm.js"></script>

Voici le résultat final.

Télécharger les deux scripts ainsi que le template et la feuille de style permettant de faire fonctionner ces aides pour les formulaires.

Billet original sur Simon Bonaventure

Version 0,14a d'e-majine manage

Charline Colineau — Wed, 28 Mar 2007 10:40:00 +0200

Nous sommes heureux de vous annoncer la sortie de la version 0.14a d'e-majine manage ! A noter dans vos agendas : le vendredi 30 mars 2007, sortie de la version 0.14a

__Voir le détail de la version 0,14a__

Parmi les nouvelles fonctionnalités de cette version, beaucoup sont issues de vos propres suggestions, alors continuez à participer et à soumettre vos idées !

Pour échanger sur cette nouvelle version et s’entre aider, rendez-vous sur le forum du site communautaire.

Billet original sur Charline Colineau

Vers la mise en conformité de l'internet public

David Mattmann — Mon, 26 Mar 2007 09:47:00 +0200

La loi impose aux collectivités d'adapter, d'ici à trois ans, leurs services de communication en ligne aux contraintes techniques liées aux handicaps visuel, auditif, moteur et cognitif.

Il existe en France plus de 7000 sites internets publics. Ils auront, à compter de la parution des textes d'application, un délai de trois ans pour se mettre en conformité avec les règles d'accessibilité numérique, en prenant en compte les handicaps auditif, visuel et moteur. L'article 47 de la loi du 11 février 2005 dispose, en effet, que « les services de communication publique en ligne des services de l'etat, des collectivités territoriales et des établissements publics qui en dépendent doivent être accessibles aux personnes handicapées ».

SANCTIONS

L'accessibilité concerne l'accès à tout type d'information sous forme numérique, et ce quels que soient le moyen d'accès, les contenus et le mode de consultation. Un décret en Conseil d'Etat doit fixer les règles relatives à l'accessibilité et préciser la nature des adaptations à mettre en oeuvre, ainsi que les sanctions imposées en cas de non-respect de ces règles. Il doit, en outre, énoncer les modalités de formation des personnels intervenant sur les services de communication publique en ligne. Le décret d'application n'a pas encore été publié et le référentiel est en cours d'élaboration. Il s'appuiera sur les normes internationales du W3C ( World Wide Web Consortium).

RECOMMANDATIONS

Les recommandations internationales pour l'accessibilité de l'internet, mises en place dès 1999 par le consortium W3C, devront être appliquées. Cet organisme de standardisation a été créé, en octobre 1994, pour promouvoir la compatibilité des technologies du web : il s'agit de mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastucture réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitides physiques ou mentales.
Elles s'adresent aux concepteurs de sites et réalisateurs de contenu ( Web Content Accessibility Guidelines, WCAG), aux développeurs de logiciels et d'outils de navigation internet ( User Agent Accessibility Guidelines, UAAG), et aux développeurs de logiciels et d'outils générant du contenu ( Authoring Tool Accessibility Guidelines, ATAG).
L'accessibilité, au sens strict de la prise en compte des différentes situations de handicap, a pour objectif de rétablir l'universalité de l'accès aux services de communication publique. Pour l'internet, les critères d'accessibilité concernent notamment les éléments graphiques, les couleurs, le multimédia, les liens, la structuration d'une page web et l'aide à la navigation.

FORMATS SPECIFIQUES

Pour les personnes handicapées visuelles, l'accessibilité passe par les caractères agrandis, la loupe d'écran, la synthèse vocale et la plage braille; pour les personnes malentendantes ou sourdes, souvent illettrées, par la traduction en langue des signes; pour les personnes handicapées motrices, par l'utilisation d'une souris et d'un clavier adaptés, car leur principal problème est la navigation dans la page; et pour les personnes atteintes de handicap mental ou cognitif,par la conception de contenus de formats spécifiques, langage simplifié, diffusion audio.
Un référentiel, en cours d'élaboration à la direction générale de la modernisation de l'etat ( DGME ) et s'appuyant sur les directives WCAG du W3C, comprendra les règles obligatoires auxquelles devront se conformer les services de communication publique en ligne et les moyens d'évaluer cette conformité. Ce référentiel sera une annexe indispensable à tout cahier des charges de création ou de refonte de service de communication publique en ligne et notamment du projet web ( Internet, intranet et service accessibles via téléphone, le mobile ou encore la télévison).

Article 47 de la loi N° 2005-102 du 11 février 2005 ( JO du 12 février 2005 )

Billet original sur David Mattmann

Comment faire un menu déroulant avec e-majine.

Simon Bonaventure — Mon, 05 Mar 2007 14:42:00 +0100

Avec e-majine il est possible de réaliser des menus déroulant, c'est à dire qu'au survol d'un item de menu, on va afficher tout les sous-niveau de cet item.

Pour cela, il faut tout d'abord aller dans le factory puis dans votre projet pour aller configurer la navigation, et ici, on pourra noter l'apparition d'une nouvelle case à cocher « menu toujours déplié ». Cette dernière permet de faire apparaître tout les niveaux et sous niveaux d'un menu, sans avoir besoin de cliquer sur un item du menu pour faire apparaître les sous item de ce menu. Mais aussi subtil que cela puisse paraître c'est grâce à cette case que l'on va pouvoir réaliser notre menu déroulant. Il ne faut pas oublier de sélectionner le type de menu vertical dans le factory, car un menu de type vertical est en réalité un menu à listes imbriqués, ce qui est indispensable pour réaliser un menu déroulant. Voici de façon simplifié la structure html dont on a besoin:

<ul id="first_level">
      <li>
            <a href="#">libelle</a>
            <ul class="second_level">
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
                  <li><a href="#">libelle</a></li>
            </ul>
      </li>
      <li><a href="#">libelle</a></li>
      <li><a href="#">libelle</a></li>
</ul>

Toute première chose à faire, avant de commencer à donner une apparence à notre menu, il faut masquer les seconds niveaux de notre arborescence. On va éviter l'utilisation de la propriété display:none; qui pose quelques soucis avec certains navigateurs non graphiques.

ul#first_level li ul{
      position:absolute;
      left:-999em;
}

Une fois que cette étape est faite, il en reste plus qu'a habiller notre menu, et à gérer la réaction au survol pour afficher les seconds niveaux de liste qu'on a masqués auparavant. Pour faire cela, on va utiliser la pseudo classe :hover non pas sur un lien comme on a l'habitude de le faire, mais sur nos éléments de liste (<li>...</li>), jusqu'ici fantastique, cela fonctionne me direz-vous mais en plus cela fonctionne sans javascript

ul#first_level li:hover ul {
        left: auto;
}

Malheureusement Internet Explorer ne comprend cette pseudo-classe :hover que sur les liens. C'est pourquoi nous avons avoir besoin malgré tout de javascript pour IE.

sfHover = function() {
        var sfEls = document.getElementById("first_level").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

En gros, ce code va appliquer la classe "sfhover" aux items ("li") de la liste ("ul") nommée ("id") "first_level", lorsque ces items sont survolés par la souris. Cette classe est ensuite retirée en utilisant une expression régulière lorsque la souris quitte la zone. Donc, du coup le style devient :

ul#first_level li:hover ul, ul#first_level li.sfhover ul {
        left: auto;
}

Cet article s'inspire de l'excellent pompage.net et de son article sur les menus déroulant

Billet original sur Simon Bonaventure

Structure et mise en forme optimales d'une page XHTML ...

Simon Bonaventure — Mon, 22 Jan 2007 12:00:00 +0100

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

[Référencement] Pour un meilleur positionnement dans les moteurs de recherche

Ronan Cassin — Thu, 18 Jan 2007 10:13:00 +0100

Je vous fait part de l'une de mes lectures ... Frédéric de Villamil fait une petit point sur un retour d'expérience de modifications apportées sur son blog pour gagner un meilleur positionnement.

Ces conseils ont été prodigués par l'auteur du très bon blog Référencement, Design et Compagnie, se découpent en deux types : structurels et éditoriaux ...

le titre la page : e-majine ne permet pas encore de faire cela en automatique,( je le rajoute dans les évolutions à faire) mais en gérant vos titres manuellement il vous est possible de tout faire ...
le contenu avant le reste : nos templates de base sont fait ainsi ...
la hiérarchie des titres, d'un point de vue global la sémantique des balises dans le site : nos templates tentent déjà de respecter cela, et rien ne vous empêche de faire encore mieux ...
pour les conseils éditoriaux à vous de jouer et de bien expliquer tout ceci à vos clients ...

Si vous souhaitez poursuivre la discussion n'hésitez pas à créer un topic dans le forum ...

Billet original sur Ronan Cassin

W3C : Validez tout un site

Jérémie Glotin — Thu, 21 Dec 2006 16:34:00 +0100

Validez un site Web en entier grâce à l'outil de validation W3C multipages.

Vous devez fournir un site conforme au recommandation du W3C ?

Le site www.validateur.ca propose l'indexation et de validation en une seule opération toutes les pages de votre site.

Voici les actions disponibles :

Bouton « Indexer & Valider » pour lancer les deux opérations en même temps
Bouton « Charger » pour afficher les pages d'un site déjà indexé
Mise en mémoire du dernier site validé
Validation par partie de l'arborescence
Limite de 200 pages par répertoire
Affichage de statistiques et graphiques
Possibilité d'utiliser le lien http://www.validateur.ca/?referer sur vos pages
Possibilité d'utiliser le lien http://www.validateur.ca/?q={url} sur vos pages
Validateur développé en AJAX disponible en français

Billet original sur Jérémie Glotin

10 chiffres marquant de l'année 2006

Charline Colineau — Thu, 21 Dec 2006 14:19:00 +0100

Dix chiffres qui, à leur manière, témoignent des évolutions du monde Internet en 2006 en France et dans le monde.

France : 3,5 millions de lignes dégroupées.
Etats-Unis : Internet pèse 29 % des ventes touristiques - Internet devrait peser 34 % des ventes touristiques totales.
L'e-pub en Europe proche des 4 milliards d'euros - La croissance des investissements publicitaires sur Internet continue sur sa lancée en Europe. Ce chiffre comprend les campagnes de bannières, d'e-mailings, et de liens sponsorisés et les petites annonces.
Services mobiles : + 25 % d'utilisateurs en France - Sercices multimédia mobiles = Internet mobile, envoi de MMS...
Etats-Unis : la vidéo pèse 2 % des dépenses e-pub - La progression des budgets publicitaires en ligne profite pleinement à la création vidéo.
Europe : 30 % des internautes sont mobinautes - Avec plus d'un internaute sur trois qui accède au Web via son mobile, l'Allemagne et l'Italie.
Une internaute française sur deux achète en ligne - Féminisation du e-commerce est notamment due à l'origine du boom du secteur vestimentaire en ligne.
+ 55 % de télédéclarations en France.
Chine : les dépenses e-pub bondissent de 60 %.
Explosion du nombre de blogs - La blogosphère a vu sa taille se multiplier par plus 11 en 2 ans. Ce sont 100.000 nouveaux blogs qui sont créés par jour.

Billet original sur Charline Colineau

Comment l'accessibilité d'un site Web peut améliorer son référencement ?

Charline Colineau — Thu, 21 Dec 2006 14:11:00 +0100

Et si l'optimisation du référencement passait tout simplement par une meilleure accessibilité des sites Web ?

Cette notion d'accessibilité d’un site Internet est multiple, tant elle conjugue la technique - avec le respect des standards comme le W3C - et l'ergonomie du site pour l'ouvrir à tous. Cette "usabilité" se résume à une compatibilité multi plate-forme matérielle et logicielle, mais doit aussi tenir compte des handicaps physiques présents dans notre société.

L'objectif de l'accessibilité pour le référenceur est donc de limiter au maximum tous les obstacles pouvant bloquer l’indexation par les moteurs. Il convient dès lors d'optimiser le contenu Web en privilégiant les textes qui respectent des règles sémantiques et syntaxiques.

Les moteurs ne comprennent pas directement les images et le texte. Pour être accessible, tout site doit être explicite avec des mots et des phrases en français. Chaque image doit être décrite textuellement et ces consignes s'appliquent aussi aux liens qui doivent être renseignés. Nous arrivons à augmenter le ranking en augmentant le nombre d'itérations sur une page. Le contenu est alors revalorisé et plus clair pour le moteur.

Au centre des relations entre l'ergonomie, le graphisme et la technique, le code HTML fait encore figure de pilier. "L'utilisation des standards XHTML et des feuilles de syles CSS2 permet de répondre aux critères d'accessibilité. Ces derniers, impliquant une bonne construction et structuration des pages, hiérarchisent le contenu Web.

L'accessibilité, choix citoyen se traduit aussi en investissement car les choix techniques nécessaires s'inscrivent dans une démar,che qualité. Développer aujourd'hui des pages accessibles, c'est d'abord produire un code HTML léger et propre. Nous retrouvons les bases du référencement naturel.

Billet original sur Charline Colineau

Conditions générales de vente : cinq clés pour se mettre en conformité

Charline Colineau — Thu, 21 Dec 2006 12:36:00 +0100

Attention, l'affichage des CGV sur les sites marchands est une obligation. Une attention particulière doit être apportée à la rédaction des clauses.

Les conditions générales de vente (CGV), que les e-commerçants ont pour obligation de faire figurer sur leurs sites, ont une spécificité qu'il est important de ne pas méconnaître : elles doivent à la fois répondre au cadre législatif fixé par le Code de la Consommation, et à celui de la vente à distance et du commerce électronique.

Voici les grands axes de ce qu'il faut indiquer et de ce qui est illicite en matière de CGV :

Mentionner les conditions générales de ventes : une obligation
Rendre les CGV accessibles
Adapter ses conditions générales de vente au commerce électronique
Proscrire les clauses qui déresponsabilisent l'entreprise
Dater et actualiser les conditions générales de vente

Détail des points-clés des CGV

Billet original sur Charline Colineau

Comparatif VMware ESX et Server

Jean-Gaël Rouchon — Tue, 12 Dec 2006 14:59:00 +0100

Libre traduction d'un compratif entre VMWARE ESX et Server. Source : http://www.virtualization.info/2006/12/choosing-between-vmware-server-and-esx.html

Importance du choix de la bonne solution pour éviter les problèmes de scalabilité (sous-dimensionné) ou de ROI (Surdimensionné en terme de cout)

Server, le produit gratuit. Attention pas un produit cheeap et de basse qualité. Server est un produit stable. Server 1 est en fait le GSX Server 4.0 qui a 5 ans d'antériorité et avait un prix proche de celui d'ESX. La différence principale se situe au niveau des performances. Pas de Bench disponible mais la différence d'architecture explique naturellement la différence de performances.

ESX est concu pour s'installer sur une machine nue et opérer comme un OS à par entière. VMServer s'installe au dessus d'un OS hôte. L'OS ESX est dédié à la virtualisation et ne gère que ces aspects afin de tirer le maximum du hardware. Cela explique que le ratio de consolidation est meilleur (4 à 8 par hôte contre 2 à 4 pour VMserver). Les performances dépendent évidemment étroitement des apllications de la machine : un ESX extrèmement chargé ne pourrait héberger que 3 machines virtuelles tandis q'un VMserver pourrait aller jusq'au hébergere 10 serveurs web peu demandeurs. De la même manière, VMware a développé pour ESX un système de fichier orienté vers la virtualisation VMFS qui est plus rapide et stable que les FS traditionnels. VMServer est limité intrinsèquement par les performances de son filesystem hote (windos / Linux). Cependant, le filesystem utilisé dans les VMServer est directement utilisable pour déplacer la machine virtuelle (c'est une ensemble de fichiers pouvant être gravés sur un CD, une clé ...). Le VMFS nécessite une conversion avant d'être déplaceé.

Les limitations d'ESX sont également instrinsèques. Comme tout Os, il est limité aux matériel pour lequels il dispose de Drivers (pas de SATA => disques SCSI ou NAS / SAN par exemple). Au contraire, VMServer s'appuie sur les performances de l4OS et de sa compatibilité (montage de disques iSCSI, ou distants ... ) VMware ne suporte officellement qu'un panel limité de materiels pour ESX. Idem pour les applications. Il est possible que certaines librairies ne soient pas disponibles et rendent impossible / dangereuse l'installation du programme (NDTR : installation dans ESX OS je présume ...). Dans VMSERVER il est possible de se baser sur les outils de l'OS de l'hyperviseur pour gérer la défragmentation, le partitionnement, l'ajout de disque, les backups ...

Securité et courbe d'apprentissage : Grosse différence entre les 2 produits. ESX est concu comme une appliance, une boite noire. Taillé pour les performance en laissant le minimum de surface exposée aux attaques. Peu de possibilité d'ajouter des composants externes donc des failles non référencées. par contre pas de possibilité de corriger personnellement ces failles (dépendance envers VMWARE Corp.) Au final un faible TCO pour ESX. Pour VMServer, la sécurité du système dépend de l'OS Hiperviseur, avec les implications habituelles en terme de veille patch ... Notez aussi la possibilité que les patch de sécurité metttent en péril la stabilité des machines virtuelles. D'où la nécessité d'une phase d'intégration et de test importante. Le TCO pour VMServer est plus élévé. Concernant la courbe d'apprentissage, elle est en défaveur de ESX qui nécessite un backgournd d'unixien pour être plus rapidement opérationnel.

Optimiser grace à Virtual Center Les différence entre ESX et VMServer sont relativement limitées mais cela change beaucoup s'ils sont utilisés avec Virtual Center. Les 2 produits disposent d'un monitoring multi hotes en réseau, d'un inventaire des machines virtuelles, d'un système de template, d'un système de gestion des permission et d'un outil d'alerte. Cependant, seul ESX bénéficie d'une intégration avec Virtual server permttant de migrer un machine d'une plateforme physique à une autre sans interruption de service (VMotion) L'intégration est encore plus poussée dans VMware Infrastructure 3 comme la détection des pannes sur la plateforme physique et le déplacement vers un noeud dispoible dans le datacenter ou la capacité à déplacer automatiquement et sans interruption une machine d'un hyperviseur en surcharge vers une machine moins stressée. Cela permet un économie importante en administration mais déporte le coût vers le Hardware et nécessite un infrastructure réseau performante. Pour le moement VMServer ne bénéficie pas de ces avancées puisqu'il ne peut utiliser que Virtual Center 1.4 qui ne bénéficie pas de ces capacités. Il n'est pas sur que ces fonctionnalités soient disponibles au final pour des VMServer. Les alternatives comme vizioncore permettent d'obtenir certaines de ces fonctionanlités. Virtual Center 1.4 n'est pas non plus gratuit et il convient d'étudier la solution et son cout dans son ensemble par rapport à ESX + VMInfrastructure 3.

VMWare propose des plans de support pour les 2 solutions.

__ Conclusion :__ VMwareServer et ESX adressent 2 besoins différents. Les administrateur recherchant le maximum de performances de performance et d'automatisation seront intéressés par ESX en gardant à l'esprit les coût en matériel, en infrastrcuture et en formation. Les administrateur à la recherche d'une solution souple et rapide à mettre en place peuvent adopter VMserver en confiance , il est suffisamment stable pour être appliqué dans la plupart des projets de virtualisation.

Billet original sur Jean-Gaël Rouchon

Les versions d'e-majine

Jérémie Glotin — Mon, 11 Dec 2006 11:04:00 +0100

E-majine manage est pour le moment dans sa version 0.12e. Un grand nombre d'évolutions est venu compléter le produit depuis la version 0.01a. Comment sont choisis les numéros de versions, avec quelle logique ?

La logique

Décomposons la version courante d'e-majine : 0.12e

La décimale, ici le 0, correspond au évolution majeure du produit. On entend par majeure toutes les modifications ergonomiques, esthétique ou fonctionnelle qui apporte une véritable (r)évolution du le produit.
Ensuite, nous retrouvons, après le point un nombre constitué de 2 chiffres. Ce nombre est incrémenté lors d'un ajout de fonctionnalités importantes et/ou de refontes ergonomiques mineures.
Enfin la lettre en fin de version est changée lors de l'ajout de fonctionnalités mineures ou de corrections de bugs.

Un exemple

Il y a quelque mois, nous étions dans la version 0.11b.
Nous avons repéré une très importante hausse de la demande en ce qui concerne le e-commerce. Nous avons développé de nouveaux modules pour le e-commerce (promotions, coupons, ...) et nous avons refondu l'ergonomie de la gestion du catalogue. Lorsque ces évolutions sont sorties, nous avons nommé la nouvelle version "0.12a".
Pendant la vie de cette version, de nouvelles fonctionnalités nous ont été demandées. A chaque fois que nous avons ajouté des paquets de fonctionnalités, nous avons modifié la lettre pour arriver à ce jour à la version 0.12e.

Billet original sur Jérémie Glotin

Avis aux intégrateurs, une extension et la révoltion n'est pas loin ....

Ronan Cassin — Tue, 05 Dec 2006 21:27:00 +0100

Vous connaissiez peut-être la version précédente de l'extension FireBug ?

La version 1.0 Beta qui viens de sortir est un petit bijou ... CSS, HTML, Javascript, Header tout y est

Un petit billet bien détaillé en fait la description, allez lire "FireBug 1.0 Beta: plus qu'une extension, un prodige !", et testez là par vous même

Billet original sur Ronan Cassin