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

Une galerie quoi ?

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

Comment cela fonctionne ?

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

Comment l'intégrer autre part?

On fait appel aux fichiers externes

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

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

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

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

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

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

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

Pour ceux qui ne

On s'amuse avec javascript et le DOM

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

function getElementsByClassName(oElm, strTagName, strClassName){

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

}

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

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

}

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

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

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

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

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

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

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

Billet original sur Simon Bonaventure