Il est toujours difficile dans la création d’un site Internet de faire un compromis entre les possibilités d’édition de texte que l’on fourni et le respect des standards du web.
De plus, les copier/coller vers ces éditeurs rajoutent souvent du code impropre qui ne respecte pas ces standards.
Vu que chez Vitam nous codons tous nos sites en XHTML 1.1 Strict, nous avons du trouver des solutions.

Nous avons opté pour TinyMCE qui respecte de manière native une bonne partie des recommandations W3C.
De plus, il offre la possibilité de définir quelles balises l’éditeur autorise ainsi que les attributs autorisés balise par balise.
Il est même possible de définir les valeurs précises acceptées pour un attribut.

Cette spécification s’utilise avec la déclaration “valid_elements”.
La syntaxe est la suivante :

balise[attr1|attr2<val1?val2|attr3],balise2[attr1| ...], ...

Voici un exemple de quelques balises que nous avons spécifiées

a[class|href|hreflang|lang|name|title]
h1[class|lang|title]
p[class<bleu?head?center|lang|title]

Il est possible d’aller encore un peu plus loin en précisant qu’une balise dépréciée doit être remplacée par une autre.
Par exemple, que la balise <i> soit remplacée par <em>.
La syntaxe devient :

balise/oldbalise[attr1| ...

Par exemple :

strong/b[class|lang|title]
em/i[class|lang|title]

Si vous voulez plus d’information et toutes les syntaxes possibles, nuos vous invitons à lire la documentation sur le site de TinyMCE

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 le dernier né tout droit sorti de l’atelier.

BIJOB, site que nous avons designé et intégré, est le site pour le placement et le recrutement international d’Actiris en collaboration avec EURES.

Nous avons du tenir compte des exigences graphiques et de développement d’Actiris tout en y apportant une touche créative.

Voici quelques “screens” du site afin de vous montrer la “splash”, la page d’accueil ainsi qu’une page interne.

Le 30 juin dernier sortait la version 5.3.0 de PHP. Après avoir fait plusieurs tests en interne, nous avons upgradé tous nos serveurs avec cette nouvelle version. Cette dernière propose de nouvelles fonctionnalités et corrige plus de 140 bugs divers. Si vous voulez plus d’information, surfez sur php.net/releases/5_3_0.php.

De plus, Vitam a décidé d’adapter son code pour être prêt lors de la sortie de PHP 6. En effet, certaines fonctions qui sont utilisées dans nos scripts seront supprimées. Nous repassons donc dans tout nos sites afin de les adapter petit à petit pour passer le cap sans soucis.

Voici un exemple concret : la suppression des slashs répétitifs inutiles d’une URL.

Avant PHP 6, on pouvait utiliser la fonction ereg_replace():

$newUrl = ereg_replace("/+", "/", $url); 

Après sa sortie, nous devrons utiliser la fonction preg_replace() :

$newUrl = preg_replace("/\/+/", "/", $url);

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” …

Comme cela faisait un moment que l’on ne vous donnait pas de nouvelles sur les futurs projets ainsi que sur les projets récemment finis, voici un mini résumé.

Vitam va accompagner Allo Telecom (appartenant à Base) dans sa stratégie de développement interne (intranet) et externe (site internet) L’agence fera une analyse complète des systèmes existants et cherchera à harmoniser l’ensemble de leurs outils aussi bien d’un point de vue technique qu’ergonomique.

Dexia Asset Management fera aussi appel à Vitam pour un projet d’e-learning.

D’autres projets d’intranet et d’ERP sont également en route de front avec la refonte du site du Chirec.

Concernant les sites récemment mis en ligne: Le dernier concours organisé pour Contrex vient de se clore. Un succès pour la marque (appartenant au groupe Nestlé) qui renforce ainsi sa présence online après un petit temps d’absence sur la toile belge.

Le nouveau site de Voo a également fait parler de lui avec le lancement du Voocorder. Le projet va encore beaucoup évoluer dans les prochains mois.

Pour finir, nous vous annonçons l’arrivée de Gil comme développeur ainsi que de Quentin pour nous donner un coup de main en intégration.

Attention, si vous vous préparez à passer vos exams de philo c’est ici que ça se passe.

Voici donc un petit site qui peut grandement vous aider si vous faites des études de philo ou si tout simplement vous y portez de l’intérêt.

Les lightbox sont de plus en plus utilisées sur les sites web actuels. Il s’agit de box qui s’ouvrent au-dessus du contenu du site et qui grisent en général le fond du site. Elles sont généralement utilisées pour afficher plus rapidement une information au lieu de charger une nouvelle page.

Il en existe un bon nombre de prêtes à l’emploi mais assez figées d’un point de vue graphique. Vitam a donc décidé de créer ses propres lightbox adaptées au design de chacun de nos sites.

Mais quitte à le faire, autant aller au bout des choses. Nos lightbox personnalisées ont des fonctionnalités plus avancées que certaines autres.

Nous mettrons par exemple l’accent sur le positionnement de cette box par rapport à la fenêtre du navigateur.
Peu importe sa taille, la lightbox sera toujours centrée au milieu de la fenêtre, même si on la redimensionne une fois la box ouverte.
De plus, si la largeur de la fenêtre est plus petite que la box, cette dernière se bloquera en haut à gauche afin que l’information soit toujours visible grâce aux “scrollbar”.

Bref, mieux vaut un bon example qu’un long discours; allez sur www.voo.be et cliquez en bas à gauche sur “MOOVIE”.