Exemple de calepin

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

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 :

CSS CalepinOuvrirCompte
  1. #OuvrirCompte {
  2.         background-image: url(/My/CalepinOuvrirCompte.jpg);
  3.         background-repeat: no-repeat;
  4.         width: 537px;
  5.         height: 593px;
  6.         text-align: justify;
  7. }       
  8.                
  9. #OuvrirCompteEtPostitOoops {
  10.         background-image: url(/My/CalepinOuvrirCompteErreur.jpg);
  11.         background-repeat: no-repeat;
  12.         width: 537px;
  13.         height: 717px;
  14.         text-align: justify;
  15. }
  16.                
  17. #OuvrirCompte p, #OuvrirCompteEtPostitOoops p {
  18.         /* Les éléments p tomberont les un sous les autres
  19.         en cascade, à partir de 198 px (top). La position
  20.         left de 161 px est à calculer à partir d’OuvrirCompte
  21.         et non de la page (position: relative et non absolute).
  22.  
  23.         La largeur de 360 pixels, s’obtient en supprimant les
  24.         marges : 161 pixels à gauche (on reprend la valeur de
  25.         left), et disons 16 pixels à droite. 537-161-16 = 360 */
  26.        
  27.         position: relative;
  28.         left: 161px;
  29.         width: 360px;
  30.         top: 198px;
  31.         margin-bottom: 25px;
  32. }
  33.  
  34. .OuvrirCompteErreur {
  35.         color: #e23e18;
  36.         font-weight: bold;
  37.         position: relative;
  38.         top: 245px;
  39.         left: 40px;
  40.         width: 340px;
  41. }
Dereckson, vous pouvez librement utiliser ce code.

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/.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.