Vitam - Blog.

Vitam recherche un développeur PHP/MySQL senior pour une période d’un mois afin d’alléger un peu le travail de nos équipes.

Une bonne connaissance de l’intégration et du jQuery est un plus.

Si vous êtes intéressés, n’hésitez pas à nous contacter pour convenir d’un rendez-vous le cas échéant.

Les listes ordonnées sont en général toutes simples. En effet le css, ne permet pas de modifier les numéros de la liste, les mettre d’une couleur différente du texte qui les suit.
Bien sûr, il est toujours possible d’utiliser des astuces, englober le texte avec des balises pour différencier le style des numéros et le style du texte.

Pour éviter cela, chez Vitam nous avons choisi d’utiliser Jquery (framework de javascript) afin d’éviter les imbrications de balises et de rendre les listes beaucoup plus jolies.

Pour réaliser cette liste, il suffit d’enlever avec Jquery, le style des éléments de la liste.
Puis il faut insérer avant le texte une balise span comprenant un numéro qui s’incrémente pour chaque élément.
Vous pouvez ainsi mettre le style souhaité au span et votre liste paraît tout de suite plus sympatique.

Pour voir un exemple, vous pouvez aller sur le site Admitis.

Parfois les intégrateurs doivent trouver des astuces afin de respecter les layouts proposés par le graphiste tout en gardant la meilleure ergonomie possible.

Par exemple, dans le design du projet Voo, il y avait écrit dans le footer : “sélectionnez votre langue” à la place des 4 abréviations de langues que l’on voit couramment sur les sites web. Ceci implique à l’internaute de devoir passer par une page intermédiaire pour pouvoir sélectionner sa langue.

Afin de respecter le design et d’éviter ce désagrément pour choisir sa langue, Vitam a décidé de modifier le lien “sélectionnez votre langue” lors de son survol.
Avec l’aide de Jquery (framework de javascript), lors du passage de la souris, nous remplaçons le lien par une liste comprenant les liens vers chaque langue.

Cela permet aux internautes de sélectionner directement la langue souhaitée.
Pour ceux qui ont javascript désactivé sur leur machine, ils accèdent à une page intermédiaire de choix de langue.

Pour mettre en valeur des éléments d’un site, des promotions ou des news, nous utilisons les showcases. Ce sont ces encadrés avec une grande image, du texte et des onglets. Soit les images et le texte s’affichent l’un après l’autre comme un slideshow, soit vous cliquez ou survolez sur un onglet, et l’image correspondante s’affiche.

Ces showcases sont réalisés avec jquery, ce qui permet une meilleure accessibilité, que s’ils étaient développés en flash.

Pour réaliser cela, nous créons une liste, puis nous superposons les éléments de la liste. Avec la fonction javascript setTimeout(), nous alternons l’affichage des images automatiquement. Pour positionner les images, l’une au-dessus de l’autre, nous modifions le z-index des éléments avec l’utilisation du framework jquery.

Exemples :
www.cyc2.be
www.voo.be

Une FAQ (Frequently Ask Questions) est souvent composé de nombreuses questions/réponses. Il y a la liste des questions en haut de page, puis les réponses plus bas.
Vous cliquez donc sur la question souhaitée et grâce à une ancre, cela vous emmène à la réponse correspondante plus bas dans la page. Pour revoir les questions, il faut cliquer sur un lien “revenir en haut de la page” ou bien utiliser le scroll.

Grâce à l’utilisation du jquery (framework de Javascript), Vitam affiche seulement les questions. En cliquant sur une question, la réponse s’affiche et se déroule juste en dessous de celle-ci. Puis en cliquant une nouvelle fois sur la question, la réponse se referme.
Vous pouvez également voir deux questions ou plusieurs en même temps.

Lorsque Javascript est désactivé, les questions suivies directement de leur réponses respectives s’affichent entièrement.

Pour voir un exemple, rendez-vous sur le site de Sealease.

Voici une partie de  l’administration du site corrigé-dissertation.fr que nous avons essayé de simplifier.

Ce site est composé de catégories auxquelles sont liés des thèmes et aux thèmes sont liées des questions. Tous les thèmes, ainsi que les questions, sont accessibles sur la même page.

Ici, nous allons parler des titres éditables pour les thèmes et les questions.

Dans un fonctionnement non simplifié, il faudrait cliquer sur le thème pour arriver dans une autre page. Celle-ci permettrait de modifier le titre du thème dans un champ éditable puis, il faudrait cliquer sur un bouton “enregistrer” et ensuite revenir sur la page listant les thèmes.

Vitam a simplifié l’édition des titres à l’aide de jquery et ajax.
Il suffit de cliquer sur l’icône correspondant à l’édition du titre et le titre se transforme en champ éditable. Il est alors possible de modifier le titre directement. En appuyant sur la touche “Enter”,  les modifications sont prises en compte et le champ éditable redevient un titre en simple texte.

Avec ce procédé on réduit le nombre d’étapes, ce qui rend le travail plus agréable, plus rapide et surtout plus ergonomique.

Vous n’êtes pas sans savoir que le nombre de réseaux sociaux et d’outils de partage sur Internet n’arrêtent pas d’augmenter.
Il est donc intéressant de proposer un moyen rapide et facile pour les visiteurs d’un site de diffuser une info sur leurs réseaux.

AddThis est un petit module en Jquery qui peut s’incruster sur n’importe quelle page et qui permet de le faire.
Son avantage est qu’il est centralisé et que si un nouveau réseau social vient à naître, il sera automatiquement ajouté à tous les sites qui utilisent ce module.

Pour mieux comprendre, rendez-vous sur www.miroir.eu et passez votre souris sur un bouton “+ Partager” …

Dans les administrations des sites, Vitam utilise de plus en plus le tri “user friendly”.

Petit rappel:
Le tri dans les listes fonctionnaient parfois avec un champ comportant un numéro. Il fallait modifier le numéro 5 en numéro 2,  puis cliquer sur “enregistrer”. L’élément se plaçait alors en deuxième position.

Maintenant, grâce au jquery (framework de javascript) et son plugin “sortable”, il n’y a plus besoin de faire un champ libre “position”.

Il suffit de cliquer sur un élément, une phrase ou une image, puis de déplacer l’élément et le lâcher à l’endroit souhaité dans la liste (drag & drop).
Une fois l’élément déplacé, le nouvel ordre des éléments est automatiquement enregistré dans la base de données ( grâce à une combinaison de technologies  AJAX).

Ce système de tri est plus ergonomique et vous n’avez plus besoin d’appuyer sur un bouton et d’attendre le chargement de la page pour voir le nouvel ordre.

C’est donc plus simple et intuitif pour nos clients.

Le jQuery(lien : http://fr.wikipedia.org/wiki/JQuery), pour ceux qui ne connaissent pas, est un framework Javascript libre. Il permet d’améliorer le coté “user friendly” des sites web.

Pour le concours Contrex, il fallait faire un questionnaire en 3 étapes.
Vitam a voulu éviter de faire 3 pages où les internautes doivent recharger toute la page à chaque étape.
Nous avons donc créé un questionnaire sur une page et grâce au jQuery, nous n’affichons qu’une étape après l’autre.

Ce qui est surtout intéressant, c’est le choix de l’image dans la première étape. Il faut choisir une image de femme qui représente la femme Contrex.
Pour réaliser cela, il faut mettre un champ avec une liste de sélection où le participant choisit le numéro de l’image souhaitée.
Afin de rendre ce choix plus sympathique, Vitam a remplacé ce champ par un simple clic sur une des 5 images.
Grâce à jQuery, nous avons caché la liste de sélection et lorsque l’internaute clique sur l’image, la valeur de l’image est attribué au champ contenant la liste de sélection.

Pour voir à quoi ressemble la page sans ces effets, il faut désactiver le javascript. Vous aurez alors l’occasion de voir le concours en entier. Et vous pourrez y participer car il fonctionne évidemment sans javascript.

D’ailleurs, s’il y en a parmi vous qui veulent participer: http://contrex.be/fr/concours/ . Le concours a lieu jusqu’au 15 juin.