De nouvelles interfaces plus graphiques accueillent le nouveau membre et celui ayant égaré son mot de passe au travers de calepins, post-it et petits papillons.
Liens
- Générer un nouveau mot de passe
- Créer un compte My Espace Win
- Créer un compte My Espace Win (test mode, ne crée pas réellement le compte)
Making of
Il s’agit d’une photo de calepin sur lequel est venu s’ajouter du texte qui est définie en tant background d’un bloc <div> où vient se placer le formulaire.
Le positionnement des divers éléments est donné en css :
-
#OuvrirCompte {
-
background-image: url(/My/CalepinOuvrirCompte.jpg);
-
background-repeat: no-repeat;
-
width: 537px;
-
height: 593px;
-
text-align: justify;
-
}
-
-
#OuvrirCompteEtPostitOoops {
-
background-image: url(/My/CalepinOuvrirCompteErreur.jpg);
-
background-repeat: no-repeat;
-
width: 537px;
-
height: 717px;
-
text-align: justify;
-
}
-
-
#OuvrirCompte p, #OuvrirCompteEtPostitOoops p {
-
/* Les éléments p tomberont les un sous les autres
-
en cascade, à partir de 198 px (top). La position
-
left de 161 px est à calculer à partir d’OuvrirCompte
-
et non de la page (position: relative et non absolute).
-
-
La largeur de 360 pixels, s’obtient en supprimant les
-
marges : 161 pixels à gauche (on reprend la valeur de
-
left), et disons 16 pixels à droite. 537-161-16 = 360 */
-
-
position: relative;
-
left: 161px;
-
width: 360px;
-
top: 198px;
-
margin-bottom: 25px;
-
}
-
-
.OuvrirCompteErreur {
-
color: #e23e18;
-
font-weight: bold;
-
position: relative;
-
top: 245px;
-
left: 40px;
-
width: 340px;
-
}
Remarquez qu’en cas d’erreur un post-it apparaît, on a simplement changé l’id du <div> englobant le calepin d’OuvrirCompte vers OuvrirCompteEtPostitOoops.
Enfin, pour les messages de confirmation ne nécessitant pas de formulaire, c’est une simple image insérée.
Pour améliorer cette application, il conviendrait de demander au serveur GD d’écrire directement sur le post-it les messages d’erreur, mais nous avons souhaité privilégié la lisibilité d’une part, fournir une réponse immédiatement d’une autre part.
Pour un exemple d’application PHP permettant d’écrire sur un post-it, renvoyé sous forme d’image, je vous renvoie sur http://gd.espace-win.org/.