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

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

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

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

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

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

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

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

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

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