{"id":35,"date":"2007-02-07T09:35:50","date_gmt":"2007-02-07T09:35:50","guid":{"rendered":"http:\/\/www.dereckson.be\/blog\/2007\/02\/07\/nouveautes-sur-espace-win\/"},"modified":"2007-02-07T09:35:50","modified_gmt":"2007-02-07T09:35:50","slug":"nouveautes-sur-espace-win","status":"publish","type":"post","link":"https:\/\/www.dereckson.be\/blog\/2007\/02\/07\/nouveautes-sur-espace-win\/","title":{"rendered":"Nouvelle interface d&#8217;enregistrement et de r\u00e9cup\u00e9ration de mot de passe sur Espace Win"},"content":{"rendered":"<p><img decoding=\"async\" src=\"\/Blog\/images\/EspaceWin\/ExempleDeCalepin.jpg\" alt=\"Exemple de calepin\" align=right \/> <\/p>\n<p>De nouvelles interfaces plus graphiques accueillent le nouveau membre et celui ayant \u00e9gar\u00e9 son mot de passe au travers de calepins, post-it et petits papillons.<\/p>\n<p><!--more--><\/p>\n<style type=\"text\/css\"> \/* GeSHi (c) Nigel McNie 2004 (http:\/\/qbnz.com\/highlighter) *\/ .css .de1, .css .de2 {color: #000060; font-weight: normal;} .css  {font-family: monospace;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 110%; background-color: #f0f0f0; margin: 0; line-height: 110%; padding: 0;color: #0000bb;} .css a:link {color: #006;} .css a:hover {background-color: #d6d6e6;} .css .head {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-bottom: 1px solid #d0d0d0; padding: 2px;} .css .foot {font-family: Verdana, Arial, sans-serif; color: #808080; font-size: 70%; font-weight: bold; background-color: #f0f0ff; border-top: 1px solid #d0d0d0; padding: 2px;} .css .imp {font-weight: bold; color: red;} .css li {font-family: 'Courier New', Courier, monospace; color: #000060; background-color: #e0e0e0; padding-bottom: 2px;} .css li.li2 {font-weight: bold; color: #000090; line-height: 90%} .css .kw1 {color: #000000; font-weight: bold;} .css .kw2 {color: #993333;} .css .co1 {color: #a1a100;font-style: normal;} .css .coMULTI {color: #808080; font-style: italic;font-style: normal;} .css .es0 {color: #000099; font-weight: bold;font-weight: normal;} .css .br0 {color: #66cc66;} .css .st0 {color: #ff0000;} .css .nu0 {color: #933;} .css .me {1} .css .re0 {color: #cc00cc;} .css .re1 {color: #6666ff;} .css .re2 {color: #3333ff;} .css .re3 {color: #933;} .css .re4 {color: #933;} \t<\/style>\n<p><strong>Liens<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/www.espace-win.org\/My\/MotDePassePerdu.php\" hreflang=\"fr\">G\u00e9n\u00e9rer un nouveau mot de passe<\/a><\/li>\n<li><a href=\"http:\/\/www.espace-win.org\/My\/Enregistrer.php\" hreflang=\"fr\">Cr\u00e9er un compte My Espace Win<\/a><\/li>\n<li><a href=\"http:\/\/www.espace-win.org\/My\/EnregistrerTest.php\" hreflang=\"fr\">Cr\u00e9er un compte My Espace Win (test mode, ne cr\u00e9e pas r\u00e9ellement le compte)<\/a><\/li>\n<\/ul>\n<p><strong>Making of<\/strong><\/p>\n<p>Il s&#8217;agit d&#8217;une photo de calepin sur lequel est venu s&#8217;ajouter du texte qui est d\u00e9finie en tant background d&#8217;un bloc &lt;div&gt; o\u00f9 vient se placer le formulaire.<\/p>\n<p>Le positionnement des divers \u00e9l\u00e9ments est donn\u00e9 en css :<\/p>\n<div class=\"css\" style=\"font-family: monospace;border: 1px dotted #a0a0a0; font-family: 'Courier New', Courier, monospace; font-size: 110%; background-color: #f0f0f0; margin: 0; line-height: 110%; padding: 0;color: #0000bb;\">\n<div class=\"head\">CSS CalepinOuvrirCompte<\/div>\n<ol>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"re0\">#OuvrirCompte<\/span> <span class=\"br0\">&#123;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background-image<\/span>: <span class=\"kw2\">url<\/span><span class=\"br0\">&#40;<\/span><span class=\"re4\">\/My\/CalepinOuvrirCompte<span class=\"re1\">.jpg<\/span><\/span><span class=\"br0\">&#41;<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background-repeat<\/span>: <span class=\"kw2\">no-repeat<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">width<\/span>: <span class=\"re3\">537px<\/span>;<\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">height<\/span>: <span class=\"re3\">593px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">text-align<\/span>: <span class=\"kw2\">justify<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"br0\">&#125;<\/span>&nbsp; &nbsp; &nbsp; &nbsp;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"re0\">#OuvrirCompteEtPostitOoops<\/span> <span class=\"br0\">&#123;<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background-image<\/span>: <span class=\"kw2\">url<\/span><span class=\"br0\">&#40;<\/span><span class=\"re4\">\/My\/CalepinOuvrirCompteErreur<span class=\"re1\">.jpg<\/span><\/span><span class=\"br0\">&#41;<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">background-repeat<\/span>: <span class=\"kw2\">no-repeat<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">width<\/span>: <span class=\"re3\">537px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">height<\/span>: <span class=\"re3\">717px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">text-align<\/span>: <span class=\"kw2\">justify<\/span>;<\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\"><span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"re0\">#OuvrirCompte<\/span> p, <span class=\"re0\">#OuvrirCompteEtPostitOoops<\/span> p <span class=\"br0\">&#123;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"coMULTI\">\/* Les \u00e9l\u00e9ments p tomberont les un sous les autres<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; en cascade, \u00e0 partir de 198 px (top). La position<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; left de 161 px est \u00e0 calculer \u00e0 partir d&#8217;OuvrirCompte<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; et non de la page (position: relative et non absolute).<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; La largeur de 360 pixels, s&#8217;obtient en supprimant les<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; marges : 161 pixels \u00e0 gauche (on reprend la valeur de<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\"><span class=\"coMULTI\">&nbsp; &nbsp; &nbsp; &nbsp; left), et disons 16 pixels \u00e0 droite. 537-161-16 = 360 *\/<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">position<\/span>: <span class=\"kw2\">relative<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">left<\/span>: <span class=\"re3\">161px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">width<\/span>: <span class=\"re3\">360px<\/span>;<\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">top<\/span>: <span class=\"re3\">198px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">margin-bottom<\/span>: <span class=\"re3\">25px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"re1\">.OuvrirCompteErreur<\/span> <span class=\"br0\">&#123;<\/span><\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">color<\/span>: <span class=\"re0\">#e23e18<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">font-weight<\/span>: <span class=\"kw2\">bold<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">position<\/span>: <span class=\"kw2\">relative<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">top<\/span>: <span class=\"re3\">245px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">left<\/span>: <span class=\"re3\">40px<\/span>;<\/div>\n<\/li>\n<li class=\"li2\">\n<div class=\"de2\">&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">width<\/span>: <span class=\"re3\">340px<\/span>;<\/div>\n<\/li>\n<li class=\"li1\">\n<div class=\"de1\"><span class=\"br0\">&#125;<\/span><\/div>\n<\/li>\n<\/ol>\n<div class=\"foot\">Dereckson, vous pouvez librement utiliser ce code.<\/div>\n<\/div>\n<p>Remarquez qu&#8217;en cas d&#8217;erreur un post-it appara\u00eet, on a simplement chang\u00e9 l&#8217;id du &lt;div&gt; englobant le calepin d&#8217;OuvrirCompte vers OuvrirCompteEtPostitOoops.<\/p>\n<p>Enfin, pour les messages de confirmation ne n\u00e9cessitant pas de formulaire, c&#8217;est une simple image ins\u00e9r\u00e9e.<\/p>\n<p>Pour am\u00e9liorer cette application, il conviendrait de demander au serveur GD d&#8217;\u00e9crire directement sur le post-it les messages d&#8217;erreur, mais nous avons souhait\u00e9 privil\u00e9gi\u00e9 la lisibilit\u00e9 d&#8217;une part, fournir une r\u00e9ponse imm\u00e9diatement d&#8217;une autre part.<\/p>\n<p>Pour un exemple d&#8217;application PHP permettant d&#8217;\u00e9crire sur un post-it, renvoy\u00e9 sous forme d&#8217;image, je vous renvoie sur <a href=\"http:\/\/gd.espace-win.org\/\" hreflang=\"fr\">http:\/\/gd.espace-win.org\/<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"\/Blog\/images\/EspaceWin\/ExempleDeCalepin.jpg\" alt=\"Exemple de calepin\" align=right \/> <\/p>\n<p>De nouvelles interfaces plus graphiques accueillent le nouveau membre et celui ayant \u00e9gar\u00e9 son mot de passe au travers de calepins, post-it et petits papillons.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":0,"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dereckson.be\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}