{"id":2842,"date":"2012-09-17T12:20:20","date_gmt":"2012-09-17T10:20:20","guid":{"rendered":"http:\/\/www.rienadire.fr\/wordpress\/?p=2842"},"modified":"2012-09-17T10:33:54","modified_gmt":"2012-09-17T08:33:54","slug":"une-carte-de-visite-toujours-a-jour","status":"publish","type":"post","link":"https:\/\/www.rienadire.fr\/wordpress\/2012\/09\/17\/une-carte-de-visite-toujours-a-jour\/","title":{"rendered":"Une carte de visite toujours \u00e0 jour !"},"content":{"rendered":"<p style=\"text-align: justify;\"><a href=\"https:\/\/www.rienadire.fr\/wordpress\/wp-content\/uploads\/2012\/09\/CV.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2843\" title=\"CV\" src=\"https:\/\/www.rienadire.fr\/wordpress\/wp-content\/uploads\/2012\/09\/CV-550x328.png\" alt=\"\" width=\"550\" height=\"328\" srcset=\"https:\/\/www.rienadire.fr\/wordpress\/wp-content\/uploads\/2012\/09\/CV-550x328.png 550w, https:\/\/www.rienadire.fr\/wordpress\/wp-content\/uploads\/2012\/09\/CV.png 810w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Comme je l&rsquo;ai dit dans un article pr\u00e9c\u00e9dent, je me suis amus\u00e9 \u00e0 mettre en ligne un CV au format html. \u00c9videmment, je n&rsquo;ai pas inclus dans ce CV mes coordonn\u00e9es personnelles !<\/p>\n<p style=\"text-align: justify;\">Je me suis donc pos\u00e9 la question suivante, comment faire en sorte que cette page de CV en ligne puisse \u00e9ventuellement me servir de \u00ab\u00a0carte de visite\u00a0\u00bb toujours \u00e0 jour tout en limitant l&rsquo;acc\u00e8s au travers d&rsquo;un simple moteur de recherche \u00e0 mes coordonn\u00e9es ? En poussant la r\u00e9flexion plus loin, pourquoi ne pas utiliser cette page comme une v\u00e9ritable carte de visite en la liant avec une carte physique (un peu sur le principe de ce que proposent certains sites en ligne) ?<\/p>\n<p style=\"text-align: justify;\">Les donn\u00e9es du probl\u00e8me \u00e9taient donc les suivantes :<\/p>\n<ul style=\"text-align: justify;\">\n<li>disposer d&rsquo;une page en ligne indexable par les moteurs de recherche<\/li>\n<li>faire en sorte que cette page affiche les informations \u00e0 jour de mon CV<\/li>\n<li>faire en sorte qu&rsquo;un acc\u00e8s direct \u00e0 la page n&rsquo;affiche pas mes coordonn\u00e9es except\u00e9 un mail d\u00e9di\u00e9<\/li>\n<li>disposer d&rsquo;un moyen permettant d&rsquo;afficher dans certain cas mes coordonn\u00e9es personnelles<\/li>\n<li>rendre cette page accessible pour les mobiles et les pc<\/li>\n<li>faire le lien entre cette page et une carte de visite physique<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Il s&rsquo;av\u00e8rent au final que ce n&rsquo;est pas si compliqu\u00e9 \u00e0 mettre en \u0153uvre. Dans un premier temps, nous allons prendre un nom de domaine pour h\u00e9berger cette page avec un minimum d&rsquo;espace de stockage (chez OVH par exemple).<\/p>\n<p style=\"text-align: justify;\">On va ensuite r\u00e9aliser la page de CV. Concernant l&rsquo;accessibilit\u00e9 mobile, il existe plusieurs solutions en fonction de ce que vous impl\u00e9mentez dans votre page. Je m&rsquo;\u00e9tais orient\u00e9 initialement vers les media query pour caract\u00e9riser la taille de l&rsquo;\u00e9cran et modifier le css en cons\u00e9quence mais \u00e7a ne fonctionnait pas avec mon t\u00e9l\u00e9phone.<\/p>\n<p style=\"text-align: justify;\">Je suis donc parti sur du javascript. La premi\u00e8re solution consiste \u00e0 v\u00e9rifier la r\u00e9solution et \u00e0 rediriger en fonction sur une page sp\u00e9cifique. C&rsquo;est simple, pas prise de t\u00eate et \u00e7a marche relativement bien. Le probl\u00e8me c&rsquo;est qu&rsquo;il faudra maintenir deux pages de CV. Voil\u00e0 le code \u00e0 utiliser entre &lt;head&gt;&lt;\/head&gt; :<\/p>\n<blockquote>\n<div><code>&lt;script type=\"text\/javascript\"&gt;<br \/>\nif (screen.width &lt;= 900)<br \/>\n{<br \/>\ndocument.location = \"http:\/\/www.monsite.fr\/mapagemobile.php\";<br \/>\n}<br \/>\n&lt;\/script&gt;<\/code><\/div>\n<\/blockquote>\n<p style=\"text-align: justify;\">L&rsquo;autre possibilit\u00e9 et d&rsquo;utiliser le m\u00eame principe de v\u00e9rification mais de ne changer que le fichier .css (ce qui \u00e9vite d&rsquo;avoir deux pages). Dans ce cas, on ajoute l&rsquo;id \u00ab\u00a0style\u00a0\u00bb \u00e0 notre lien vers le fichier css dans l&rsquo;en-t\u00eate de notre page et on remplace le <code>document.location<\/code> pr\u00e9c\u00e9dent par :<\/p>\n<blockquote>\n<div><code>document.getElementById(\"style\").href=\"style\/cssmobile.css\";<\/code><\/div>\n<\/blockquote>\n<p style=\"text-align: justify;\">Il existe des tas d&rsquo;autres solutions (en utilisant le responsive design) mais les deux pr\u00e9c\u00e9dentes sont assez faciles \u00e0 mettre en \u0153uvre.<\/p>\n<p style=\"text-align: justify;\">On passe ensuite \u00e0 la question de la page \u00ab\u00a0s\u00e9curis\u00e9e\u00a0\u00bb. Le but n&rsquo;est \u00e9videmment pas de cr\u00e9er un espace restreint ultra-prot\u00e9g\u00e9 sur son site mais simplement un affichage conditionnel basique. Si une personne consulte la page depuis un lien disponible en ligne, elle acc\u00e8de \u00e0 des \u00e9l\u00e9ments limit\u00e9s. Je suis parti sur un script basique en php, si on acc\u00e8de en utilisant l&rsquo;URL contenant la variable \u00ab\u00a0passwd\u00a0\u00bb, le CV s&rsquo;affiche avec les coordonn\u00e9es et un lien vers une vCard compl\u00e8te et \u00e0 jour. Sinon, (acc\u00e8s depuis un profil en ligne quelconque, ou un moteur de recherche), on n&rsquo;affiche que les informations choisies.<\/p>\n<p style=\"text-align: justify;\">C&rsquo;est parti :<\/p>\n<p style=\"text-align: justify;\">On r\u00e9cup\u00e8re notre page de CV, sous la balise &lt;body&gt; (avant le d\u00e9but du CV), on ajoute :<\/p>\n<blockquote>\n<div><code>&lt;?php<br \/>\nif (isset($_GET['passwd']) AND $_GET['passwd'] ==\u00a0 \"motdepassesupercomplexe\") \/\/ Si le mot de passe est bon<br \/>\n{<br \/>\n\/\/ On affiche le CV avec les coordonn\u00e9es<br \/>\n?&gt;<br \/>\non place ici le CV avec les coordonn\u00e9es<br \/>\n&lt;?php<br \/>\n}<br \/>\nelse \/\/ Sinon, on affiche la m\u00eame page mais sans les coordonn\u00e9es et le lien vers la vCard<br \/>\n{<br \/>\n?&gt;<br \/>\non place ici le CV basique<br \/>\n&lt;?php<br \/>\n}<br \/>\n?&gt;<br \/>\n<\/code><\/div>\n<\/blockquote>\n<p style=\"text-align: justify;\">et on referme &lt;\/body&gt;<\/p>\n<p style=\"text-align: justify;\">De cette mani\u00e8re, seules les personnes connaissant le \u00ab\u00a0motdepassesupercomplexe\u00a0\u00bb ou cliquant sur l&rsquo;URL passant la variable avec <code>?passwd=motdepassesupercomplexe<\/code> pourrons voir les donn\u00e9es du CV complet.<\/p>\n<p style=\"text-align: justify;\">Th\u00e9oriquement, en limitant la diffusion de cette URL ou de ce mot de passe et en utilisant un mot de passe complexe, ces donn\u00e9es seront relativement s\u00e9curis\u00e9es.<\/p>\n<p style=\"text-align: justify;\">On dispose donc maintenant d&rsquo;une page accessible aux mobiles et aux ordinateurs et qui n&rsquo;affiche nos coordonn\u00e9es qu&rsquo;aux personnes autoris\u00e9es.<\/p>\n<p style=\"text-align: justify;\">On va ajouter une vCard qui est un format standard de fichier exploitable par l&rsquo;ordinateur pour enregistrer un contact et ses informations. On cr\u00e9e un fichier texte basique. on lui donne l&rsquo;extension .vcf et un nom de fichier complexe type 0zerkllk5Mld.vcf (verra apr\u00e8s pourquoi). On ajoute nos coordonn\u00e9es dans ce fichier de la mani\u00e8re suivante :<\/p>\n<blockquote>\n<div><code>BEGIN:VCARD<br \/>\nVERSION:3.0<br \/>\nN:Nom;Prenom;;Mr;<br \/>\nFN:Prenom Nom<br \/>\nTITLE:Titre ou poste<br \/>\nTEL;TYPE=cell:00 00 00 00 00<br \/>\nTEL;TYPE=fax:00 00 00 00 00<br \/>\nADR;TYPE=dom,home,postal:;;rue;ville;;CP;Pays<br \/>\nEMAIL;TYPE=internet,pref:mail@mail.fr<br \/>\nURL:http:\/\/www.lesite.fr<br \/>\nEND:VCARD<\/code><\/div>\n<\/blockquote>\n<p style=\"text-align: justify;\">Il existe des g\u00e9n\u00e9rateur de vCard en ligne et la documentation sur les champs est facile \u00e0 trouver.<\/p>\n<p style=\"text-align: justify;\">Revenons \u00e0 ce nom complexe, cette vCard peut \u00eatre diffus\u00e9e par mail ou accessible depuis notre CV. Elle est facile \u00e0 mettre \u00e0 jour mais encore faut-il la prot\u00e9ger si on veut \u00e9viter que tout le monde puisse la r\u00e9cup\u00e9rer.<\/p>\n<p style=\"text-align: justify;\">Encore une fois plusieurs possibilit\u00e9s : limiter l&rsquo;acc\u00e8s au dossier avec un .htacess et .htpasswd et fournir les codes au contact ou limiter les risques d&rsquo;acc\u00e8s non d\u00e9sir\u00e9s.<\/p>\n<p style=\"text-align: justify;\">Pour le login\/mot de passe, on trouve de nombreux tutoriaux sur internet (comme <a title=\".htpasswd\" href=\"http:\/\/www.mmt-fr.org\/article163.html\" target=\"_blank\">http:\/\/www.mmt-fr.org\/article163.html<\/a>).<\/p>\n<p style=\"text-align: justify;\">Il suffit ensuite de transmettre le login par mail ou de l&rsquo;afficher avec le lien sur le CV complet.<\/p>\n<p style=\"text-align: justify;\">On peut aussi tout simplement donner un nom de fichier complexe (pour \u00e9viter que quelqu&rsquo;un puisse le r\u00e9cup\u00e9rer juste en saisissant l&rsquo;URL) et le placer dans un dossier sp\u00e9cifique. On ajoute ensuite dans ce dossier un .htacess contenant \u00ab\u00a0Options -Indexes\u00a0\u00bb pour bloquer l&rsquo;exploration par le navigateur et on affiche un lien uniquement dans le CV complet.<\/p>\n<p style=\"text-align: justify;\">Cette solution est normalement suffisante si on ne met pas de lien en ligne exploitable par les moteurs de recherches pointant directement sur la vCard ou contenant le mot de passe du contenu complet.<\/p>\n<p style=\"text-align: justify;\">Il reste enfin la possibilit\u00e9 d&rsquo;utiliser du php avec une variable <code>$_post<\/code> contenu dans l&rsquo;url du CV complet pour limiter l&rsquo;acc\u00e8s au dossier avec un mot de passe et \u00e9viter \u00e0 la personne d&rsquo;avoir \u00e0 le saisir.<\/p>\n<p style=\"text-align: justify;\">On en arrive maintenant \u00e0 la question des cartes de visites physiques. On va bien \u00e9videmment utiliser un QR code pour permettre une lecture et un acc\u00e8s direct au informations.<\/p>\n<p style=\"text-align: justify;\">Je conseille ce site qui est tr\u00e8s bien pour cela : <a title=\"G\u00e9n\u00e9rateur de QR code\" href=\"http:\/\/keremerkan.net\/qr-code-and-2d-code-generator\/\">http:\/\/keremerkan.net\/qr-code-and-2d-code-generator\/<\/a><\/p>\n<p style=\"text-align: justify;\">Vous pouvez, soit mettre directement l&rsquo;url du CV avec le mot de passe soit, constituer carr\u00e9ment une vCard contenant cette URL et vos coordonn\u00e9es directement exploitable par un mobile au scan du QR code.<\/p>\n<p style=\"text-align: justify;\">Et voil\u00e0 ! Il n&rsquo;y a plus qu&rsquo;\u00e0 imprimer des cartes de visite personnalis\u00e9es contenant ce QR code et le tour est jou\u00e9.<\/p>\n<p style=\"text-align: justify;\">On s&rsquo;attaque \u00e0 la cr\u00e9ation de la carte. On commence par installer le plugin permettant de g\u00e9rer les couleurs en CMJN sous Gimp (puisque notre fichier est destin\u00e9 \u00e0 l&rsquo;impression) : <a title=\"CMJN pour The Gimp\" href=\"http:\/\/cue.yellowmagic.info\/softwares\/separate-plus\/index.html\">http:\/\/cue.yellowmagic.info\/softwares\/separate-plus\/index.html<\/a><\/p>\n<p style=\"text-align: justify;\">Il suffit ensuite de cr\u00e9er un fichier en 300 dpi en respectant les marges et les tailles pr\u00e9conis\u00e9es par le site d&rsquo;impression de carte de visite choisi et c&rsquo;est tout bon !<\/p>\n<p style=\"text-align: justify;\">Le r\u00e9sultat sur :<a title=\"Mon CV en ligne\" href=\"http:\/\/bit.ly\/cleguyadec\" target=\"_blank\"> http:\/\/www.cleguyadec.fr\/<\/a>. Je me suis m\u00eame amus\u00e9 \u00e0 faire une mind map de mon CV (avec Freemind) que j&rsquo;ai mis en ligne sur cette page : <a title=\"Mind map\" href=\"http:\/\/cleguyadec.fr\/freemind.html\" target=\"_blank\">http:\/\/cleguyadec.fr\/freemind.html.<br \/>\n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comme je l&rsquo;ai dit dans un article pr\u00e9c\u00e9dent, je me suis amus\u00e9 \u00e0 mettre en ligne un CV au format html. \u00c9videmment, je n&rsquo;ai pas inclus dans ce CV mes coordonn\u00e9es personnelles ! Je me suis donc pos\u00e9 la question suivante, comment faire en sorte que cette page de CV en ligne puisse \u00e9ventuellement me [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[3,9],"tags":[246,253],"class_list":["post-2842","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-actualite","category-tutoriaux","tag-cv","tag-php"],"_links":{"self":[{"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/posts\/2842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/comments?post=2842"}],"version-history":[{"count":1,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/posts\/2842\/revisions"}],"predecessor-version":[{"id":2844,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/posts\/2842\/revisions\/2844"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/media\/2843"}],"wp:attachment":[{"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/media?parent=2842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/categories?post=2842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rienadire.fr\/wordpress\/wp-json\/wp\/v2\/tags?post=2842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}