Blog du développement Web http://www.formatic-creation.net/ fr Qwant, un bon moteur de recherche qui préserve votre vie privée http://www.formatic-creation.net/blog/qwant-un-bon-moteur-de-recherche-qui-preserve-votre-vie-privee <span>Qwant, un bon moteur de recherche qui préserve votre vie privée</span> <span><span>Florian</span></span> <span>mer 29/07/2015 - 21:48</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/qwant.jpg?itok=6Jt3bDTB 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/qwant.jpg?itok=fNneawZn 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/qwant.jpg?itok=bEvVOTkn 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/qwant.jpg?itok=IrYSK0kM 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/qwant.jpg?itok=xz8I-2XK 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Logo de Qwant" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Dans le monde des moteurs de recherche sur le Web, l'activité est monopolisée par Google. Il reste quelques miettes pour Bing (Microsoft) et Yahoo! (sauf pour Baidu en Chine) et rien pour les autres. Depuis l'affaire Prism et les révélations d'Edouard Snowden un acteur a fait parler de lui : DuckDuckGo. Sa force consiste dans la préservation de la vie privée en ne stockant aucune donnée des visiteurs. Mais comme de nombreux autres moteurs, la pertinence des résultats est assez aléatoire d'où mon retour vers Google.</p> <p>En février 2013 est apparu Qwant un moteur de recherche franco-allemand.</p> <p>Lui aussi assure respecter la vie privée des internautes, mais les résultats des requêtes étant décevants et je suis rapidement passé à autre chose.</p> <p>Un récent article sur <a href="http://korben.info/qwant-mon-retour-apres-1-mois-de-test.html" target="_blank">Korben.info</a> a attisé ma curiosité. Après un nouveau test, je partage le même avis de son auteur sur son retour d'expérience de la nouvelle monture de Qwant activée en avril 2015. Les résultats sont étonnamment bons même si je dois encore parfois retourner sur Google pour des recherches datées.</p> <p>L'absence de filtres dans la recherche Web, d'images et de vidéos est le gros reproche que l'on pourrait faire à cette nouvelle monture.</p> <p>Points clés de Qwant :</p> <ul> <li>Respect de la vie privée</li> <li>Organisation de la recherche par thématique (web,actualités, social, images, vidéos, shopping)</li> <li>Résultats retournés par des algorithmes développés par « Qwant ».</li> </ul> <p>Les retours que j'ai pu voir sont aussi globalement positifs. Cependant, quelques améliorations seraient les bienvenues :</p> <ul> <li>La taille des aperçus des images et des vidéos dans la recherche globale gagnerait à être plus petite</li> <li>Il manque des filtres dans la recherche Web (Date de publication, langues, pays), d'images (taille, couleurs, date, droits d'usage) et vidéos (date, durée)</li> <li>Une suggestion orthographique en&nbsp; cas de faute de frappe</li> <li>Mélange dans les résultats des sources pour les recherches vidéos et images</li> </ul> <p>Depuis bientôt deux mois, il s'agit de mon moteur de recherche par défaut sur les différents supports que j'utilise. Je reviens seulement vers Google pour des recherches spécifiques pour les images et les vidéos, ou des tests de positionnement (malgré tout, le site de Mountain View figure parmi mes outils de travail). Ce jeune moteur a encore une marge de progression, mais pour quelqu'un comme moi qui souhaite du mieux possible me défaire de l'emprise de Google, c'est un bon compromis le temps qu'il arrive à maturation.</p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=21&amp;2=field_commentaire&amp;3=blog" token="-m0e0a1E_087b24UCJXkpfrQcdFOw1bfomtGn1CIuQk"></drupal-render-placeholder> </section> Wed, 29 Jul 2015 19:48:49 +0000 Florian 21 at http://www.formatic-creation.net http://www.formatic-creation.net/blog/qwant-un-bon-moteur-de-recherche-qui-preserve-votre-vie-privee#comments La compatibilité mobile, critère de positionnement chez Google http://www.formatic-creation.net/blog/la-compatibilite-mobile-critere-de-positionnement-chez-google <span>La compatibilité mobile, critère de positionnement chez Google</span> <span><span>Florian</span></span> <span>mer 08/04/2015 - 21:42</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/google-building.jpg?itok=UFFiqgl9 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/google-building.jpg?itok=4uAlX-NX 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/google-building.jpg?itok=4gQfb54v 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/google-building.jpg?itok=eQBFDRUn 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/google-building.jpg?itok=B1W91KdT 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Logo de Google" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Ces derniers mois, Google a bouleversé le monde du référencement avec les algorithmes Penguin (qui pénalise les liens créé artificiellement ou sur-optimisé) et Panda (qui pénalise les fermes de contenus et les annuaires de liens).</p> <p>Le moteur de recherche a&nbsp; fait <a href="http://googlewebmastercentral.blogspot.fr/2015/02/finding-more-mobile-friendly-search.html" rel="nofollow" target="_blank">une nouvelle annonce en février dernier</a> concernant la mobilité des sites. La part des requêtes effectuées via des terminaux mobiles étant en forte expansion, Google a décidé de donner un coup de pouce aux sites web ayant <strong>une interface qui s'adapte aux écrans mobiles</strong>. Cette mise à jour aura lieu le 21 avril 2015.</p> <p>Il a quelques mois, la firme américaine avait mis à disposition un outil en ligne afin de <a href="https://www.google.com/webmasters/tools/mobile-friendly/" rel="nofollow" target="_blank">tester la compatibilité mobile d'un site</a>. Si les pages de votre site passent ce test avec succès, la nouvelle mise à jour n'aura pas d’incidence sur votre positionnement dans les résultats de recherche. Si le test échoue, il n'y a pas lieu de paniquer pour autant !</p> <p>Même si les sites avec une interface mobile vont être avantagés, ce ne sera que lors des recherches effectuées <strong>à partir d'un téléphone mobile</strong>. Un site qui n'a pas beaucoup de visite provenant d'un smartphone ne va pas être impacté. Avant de suivre des vendeurs de rêves qui vont vous proposer de faire une refonte de votre site, vérifiez avec quels appareils les visiteurs consultent votre site. Pour cela vous pouvez utiliser des outils de mesure d'audience comme <a href="http://www.xiti.com/" rel="nofollow" target="_blank">Xiti</a> ou <a href="https://fr.piwik.org" rel="nofollow" target="_blank">Piwik</a> (plus difficile à mettre en place, mais les données récoltées restent sur votre serveur).</p> <p>Pour respecter les règles de compatibilité mobile, vous pouvez opter pour une solution responsive (qui s’adapte à la taille de l'écran), plus simple et moins coûteuse, ou Dynamic Serving (diffusion dynamique), une version alternative de votre site dédié au mobile qui garde cependant la même adresse.</p> <p>Pour terminer, voici un récapitulatif des critères pour avoir un site "mobile friendly"</p> <ul> <li>Le visiteur ne doit pas avoir à zoomer pour lire le contenu qui ne doit pas déborder de l'écran</li> <li>Pas d'utilisation de Flash</li> <li>Les liens de la page doivent être éloignés pour éviter des cliques par inadvertance</li> </ul> <p>Avec cette nouvelle mise à jour, il n'y a pas péril en la demeure. Il s'agit avant tout d'un alignement du moteur de recherche sur les pratiques des utilisateurs qui doivent être le centre de préoccupation dans le fonctionnement d'un site web.</p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=20&amp;2=field_commentaire&amp;3=blog" token="-qKnLSm3keeLX25w0clMIV_bq_pjYNGpnKPJQmo2Qzk"></drupal-render-placeholder> </section> Wed, 08 Apr 2015 19:42:02 +0000 Florian 20 at http://www.formatic-creation.net http://www.formatic-creation.net/blog/la-compatibilite-mobile-critere-de-positionnement-chez-google#comments URL sans caractères accentués avec Drupal http://www.formatic-creation.net/blog/url-sans-caracteres-accentues-avec-drupal <span>URL sans caractères accentués avec Drupal</span> <span><span>Florian</span></span> <span>lun 02/02/2015 - 19:55</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/reverse-arrow.jpg?itok=Ck6s7GWB 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/reverse-arrow.jpg?itok=83e8cm_4 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/reverse-arrow.jpg?itok=glWtuGpi 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/reverse-arrow.jpg?itok=QTPrsLBU 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/reverse-arrow.jpg?itok=2JD6KXiC 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Flèches" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>L'anglais, langue prédominante en informatique en général, ne comporte pas d'accents. Il en résulte que les langues avec des caractères accentués ne sont pas toujours prises en compte comme il faut.</p> <p>C'est le cas par défaut avec Drupal lors de la réécriture d'URL. Il est important d'avoir une URL lisible pour donner aux visiteurs potentiels une idée de ce que contiendra la page si jamais il n'y a pas de texte contextualisant votre lien. Les navigateurs prennent en charge les accents dans les adresses, mais ils ne les affichent pas toujours de la meilleure des façons :</p> <p><a href="http://fr.wikipedia.org/wiki/%C3%89t%C3%A9" rel="nofollow" target="_blank" title="Pathauto">http://fr.wikipedia.org/wiki/%C3%89t%C3%A9</a></p> <p>Une telle URL est plus moche et peu lisible vous ne trouvez pas ?</p> <p>Mais comme toujours avec Drupal il y a une solution :</p> <ul> <li>Tout d'abord, pour automatiser la réécriture d'URL il faut installer le module <a href="http://drupal.org/project/pathauto" target="_blank" title="Pathauto">Pathauto</a></li> <li>Ensuite pour remplacer les caractères accentués dans l'URL il faut installer le module <a href="http://drupal.org/project/transliteration" target="_blank" title="Transliteration">Transliteration</a></li> <li>Après avoir activé ces deux modules, rendez-vous sur la page de configuration du module pathauto, dans l'onglet paramètres (admin/config/search/path/settings) et cochez "<strong>Transliterate prior to creating alias</strong>", puis sauvegardez le changement.</li> </ul> <p>Pour avoir des URL encore plus propre, vous pouvez ajouter un liste de chaine de caractères à ne pas ajouter dans l'URL. Le module a déjà en base quelques mots anglais. Voici quelques autres, en français :</p> <pre> a, à, ainsi, alors, après, aussi, avant, avec, car, certes, chez, comme, d, dans, de, dehors, depuis, derrière, des, donc, en, ensuite, envers, et, etc, ici, jusqu, jusque, l, la, le, les, là, mais, même, ni, or, ou, où, par, pendant, pour, près, sans, sauf, selon, sous, sur, tout, un, une, vers, vu</pre> <p>Désormais les URL des vos pages ne comporteront plus de caractères accentués.</p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=19&amp;2=field_commentaire&amp;3=blog" token="Y6ztUMeoC2ScaTP-zwvZLuD7UOs98n6hb1f7iuirdgo"></drupal-render-placeholder> </section> Mon, 02 Feb 2015 18:55:34 +0000 Florian 19 at http://www.formatic-creation.net Connaître la police de caractère d'une image avec WhatTheFont http://www.formatic-creation.net/blog/connaitre-la-police-de-caractere-d-une-image-avec-what-the-font <span>Connaître la police de caractère d&#039;une image avec WhatTheFont</span> <span><span>Florian</span></span> <span>lun 19/01/2015 - 21:58</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/fonts.png?itok=63wFRHBN 1x" media="all and (min-width: 992px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/fonts.png?itok=aoxHLa_J 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/fonts.png?itok=s0x8BHMC 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/fonts.png?itok=asL9NGbV 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/fonts.png?itok=mzjTiivw 1x" media="all and (max-width: 360px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Fonts" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Le service WhatTheFont m'a rendu bien des services puisqu'il permet de décomposer une image pour en révéler la typographie de son texte.</p> <p>Le fonctionnement est très simple puisqu'il suffit d'uploader l'image correspondante. L'outil va séparer chaque lettre du texte qu'il aura repéré. À l'utilisateur ensuite d'indiquer quelle lettre est y représenter.</p><p>Le logiciel se charge ensuite de générer une liste de polices proches de celle de l'image.</p><p>L'image envoyée doit être lisible, c'est-à-dire que le fond doit être le plus uni possible que le logiciel ne le confonde pas avec une lettre.</p><p> <a href="http://www.myfonts.com/WhatTheFont/" title="Un outil très pratique" target="_blank">Un outil très pratique</a> assez fonctionnel qui permet de gagner pas mal de temps dans la prospection de la police de caractère idéale.</p></div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=18&amp;2=field_commentaire&amp;3=blog" token="LlkQ-0O6pkPLZTkfX_guS3ij-vkqe1b9oTjt-exj1jA"></drupal-render-placeholder> </section> Mon, 19 Jan 2015 20:58:07 +0000 Florian 18 at http://www.formatic-creation.net http://www.formatic-creation.net/blog/connaitre-la-police-de-caractere-d-une-image-avec-what-the-font#comments Détecter les liens morts de vos pages Web avec W3C Link Checker http://www.formatic-creation.net/blog/detecter-les-liens-morts-avec-w3c-link-checker <span>Détecter les liens morts de vos pages Web avec W3C Link Checker</span> <span><span>Florian</span></span> <span>jeu 15/01/2015 - 21:48</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/chaine.jpg?itok=a8IJOlGf 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/chaine.jpg?itok=x3g10cUY 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/chaine.jpg?itok=sjjSRoPg 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/chaine.jpg?itok=lSUTVeK6 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/chaine.jpg?itok=sJ8hdZjZ 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Chaine de fleur" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>En tant que visiteur d'un site, il est toujours frustrant d'arriver sur une page qui n'existe pas dû à une erreur de frappe ou à la disparition de la page ciblée.</p> <p>Les moteurs de recherches recommandent aux webmasters de faire la chasse à ces liens morts, bien que ça n'ait pas pour l'heure d'impact significatif sur le positionnement du site. En effet, il faut toujours prendre en considération le visiteur. Laisser végéter des liens brisés vous fera certainement perdre des visites à terme, celles des visiteurs qui iront voir ailleurs.</p> <p>Selon le nombre de pages de votre site, cette traque peut s'avérer fastidieuse. Heureusement qu'il existe des outils qui vous permettront de faire cette vérification en automatisant les tâches.</p> <p>Il existe de nombreux logiciels dans cette catégorie. Je vous présente ici <a href="https://validator.w3.org/checklink" target="_blank">W3C Link Checker</a>. Son intérêt est d'être multiplateforme, car il s'agit d'un service web mis à disposition par le W3C. Il est également possible de l'installer sur votre propre serveur.</p> <p>Il fait le boulot simplement, en permettant de choisir la profondeur des liens à analyser et affiche le type d'erreur qu'il rencontre (erreur 404, de redirection, etc.) avec un petit topo sur la marche à suivre pour corriger les problèmes.</p> <p>Il lui manque juste une option lui permettant d'exporter les résultats pour une consultation hors ligne.</p> <small>Crédit photo : <a rel="nofollow" target="blank" href="https://www.flickr.com/photos/curioustangles/"> danna (curious tangles)</a></small></div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=17&amp;2=field_commentaire&amp;3=blog" token="Tdi8n3GZvvYAlgfH6qfujTrU6DnG7Kab-KYIWWhlqfU"></drupal-render-placeholder> </section> Thu, 15 Jan 2015 20:48:20 +0000 Florian 17 at http://www.formatic-creation.net Un chargement de vos pages Web plus rapide avec des sprites CSS http://www.formatic-creation.net/blog/utilisez-des-sprites-css-pour-booster-le-chargement-de-vos-pages-avec-un-generateur-en-ligne <span>Un chargement de vos pages Web plus rapide avec des sprites CSS</span> <span><span>Florian</span></span> <span>lun 27/10/2014 - 21:32</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/sprite.jpg?itok=lG9Mh-r7 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/sprite.jpg?itok=pjvn2g6y 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/sprite.jpg?itok=R3HUP-MI 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/sprite.jpg?itok=i7dyPAcy 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/sprite.jpg?itok=Mo_F0g6n 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Enjoy sprite" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Les sprites CSS permettent de réunir plusieurs images en une seule, en particulier des icônes. Une seule image à charger permet de diminuer le nombre de requêtes faites au serveur. Selon votre hébergeur il y a un nombre maximum de requêtes simultanées et la méthode des sprites CSS permet d'éviter des bouchons dus à cette limite qui affecte la durée de chargement des pages web.<br /> <br /> Le fait de regrouper des images permet également de réduire le poids global des images, et donc encore une fois accélérer l'affichage de vos pages Web.</p> <p>Les sprites CSS c'est pas bien compliquer à mettre en place ! Pour en réaliser il faut utiliser la propriété "background-position". Aux premiers abords ce n'est pas toujours évident de réaliser des sprites CSS c'est pour cela que je vous conseille d'utiliser <a href="http://fr.spritegen.website-performance.org/" target="_blank">ce générateur en ligne</a>.</p> <p>Son utilisation est simple, il vous faudra cependant un minimum de connaissance en CSS :</p> <ul> <li>enregistrez vos images dans une archive zip</li> <li>transférez transférez cette archive</li> <li>cliquez sur Créez le Sprite et le CSS</li> <li>télécharger le Sprite et récupérez le code CSS qu'il vous faudra intégrer à vos pages</li> </ul> <p>Quand je dois générer des sprites j'utilise ce script qui me fait gagner pas mal de temps.</p> <p><small>Crédit photo : <a href="https://www.flickr.com/photos/twmlabs/34649947/" rel="nofollow" target="blank">Twm</a></small></p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=16&amp;2=field_commentaire&amp;3=blog" token="j9Y-K3V3fYCDafIHFNGGNWt4ywWcn-b3tLreTRGanMw"></drupal-render-placeholder> </section> Mon, 27 Oct 2014 20:32:03 +0000 Florian 16 at http://www.formatic-creation.net Compatibilité des propriétés HTML, CSS et JavaScript pour chaque version d'un navigateur Web http://www.formatic-creation.net/blog/compatibilite-des-proprietes-html-css-et-javascript-pour-chaque-version-d-un-navigateur-web <span>Compatibilité des propriétés HTML, CSS et JavaScript pour chaque version d&#039;un navigateur Web</span> <span><span>Florian</span></span> <span>lun 13/10/2014 - 21:22</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/puzzle-compatibilite.jpg?itok=GChEYXKu 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/puzzle-compatibilite.jpg?itok=_ULCyuxU 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/puzzle-compatibilite.jpg?itok=bGaN-GsQ 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/puzzle-compatibilite.jpg?itok=ZUT21H8N 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/puzzle-compatibilite.jpg?itok=Hy7pkZU_ 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Morceaux de Puzzle" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Ces deux dernières années, les spécifications du HTML5 ont été intégrées petit à petit aux versions récentes des navigateurs. Elles apportent des changements bienvenus pour les développeurs. Cependant, il ne faut pas oublier les utilisateurs des anciens navigateurs qui ne peuvent pas interpréter cette nouvelle syntaxe du HTML5.</p> <p>Heureusement, il existe différents <a href="http://modernizr.com" target="_blank">outils qui permettent une meilleure compatibilité</a>.<br /> <br /> Aujourd'hui, le dilemme est de savoir jusqu'où doit-on remonter dans le temps pour rendre les vieux navigateurs compatibles avec les sites Web. La question se pose surtout pour Internet Explorer. Les versions récentes du navigateur de Microsoft respectent mieux les standards établis par le W3C, en revanche ce n'était pas le cas il y a quelques années. Pour ma part, j'ai abandonné IE7 et IE8. Avec l'arrêt de la maintenance de Windows XP en avril dernier, Microsoft annonce la fin des dernières versions de IE compatibles avec cet OS.<br /> <br /> Pourtant, il m'arrive parfois d'utiliser une propriété CSS compatible avec un maximum de navigateur plutôt qu'une autre plus récente avec un résultat similaire. Pour cela, il existe le site <a href="http://caniuse.com" target="_blank">Can I Use</a> qui recense les propriétés HTML, CSS et JavaScript et leur compatibilité avec chacune des versions des navigateurs Web populaires. Un outil indispensable pour ma part.</p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=15&amp;2=field_commentaire&amp;3=blog" token="OPHuWQ8EaHUML0DGDK_GQUkg36ROCJ5P5oCsj31o-XQ"></drupal-render-placeholder> </section> Mon, 13 Oct 2014 19:22:38 +0000 Florian 15 at http://www.formatic-creation.net La ré-écriture d'URL pour le sous-domaine www avec Drupal http://www.formatic-creation.net/blog/re-ecriture-url-pour-eviter-duplicate-content-avec-drupal <span>La ré-écriture d&#039;URL pour le sous-domaine www avec Drupal</span> <span><span>Florian</span></span> <span>lun 29/09/2014 - 20:08</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/www.png?itok=52UhavhM 1x" media="all and (min-width: 992px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/www.png?itok=nOJgDkbB 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/www.png?itok=mAR6GE45 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/www.png?itok=Au6a9TyN 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/png"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/www.png?itok=Qa-Ms2Fz 1x" media="all and (max-width: 360px)" type="image/png"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="WWW" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Si vous avez déjà développé un site avec Drupal, vous avez sans doute remarqué que par défaut vous pouvez accéder à votre site Web avec ou sans les www. Quand vous tapez www.mondomaine.com l'adresse affiche toujours les www et quand vous tapez mondomaine.com les www ne s'affichent pas. Si vous laissez en l'état, Google va considérer qu'il y a deux adresses différentes avec le même contenu. Et le contenu dupliqué est pénalisé chez Google ce qui résultera une descente aux enfers de vos pages dans les résultats du moteur de recherche (SERP).</p> <p>Pour résoudre ce problème, il suffit de faire une réécriture d'URL. Cette technique n'est pas toujours évidente, mais pas de panique, les développeurs de Drupal ont pensé à tout ! En effet, à la racine de votre site Web ou de votre répertoire Drupal il y a un fichier .htaccess. Ouvrez-le avec un éditeur de texte et cherchez les lignes suivantes :</p> <pre> <code># If your site can be accessed both with and without the 'www.' prefix, you </code><code># can use one of the following settings to redirect users to your preferred </code><code># URL, either WITH or WITHOUT the 'www.' prefix. Choose ONLY one option: # </code><code># To redirect all users to access the site WITH the 'www.' prefix, </code><code># (http://example.com/... will be redirected to http://www.example.com/...) </code><code># uncomment the following: </code><span style="color:#800000;"><code> # RewriteCond %{HTTP_HOST} . </code><code># RewriteCond %{HTTP_HOST} !^www\. [NC] </code></span><code><span style="color:#800000;"># RewriteRule ^ http%{ENV:protossl}://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]</span> # </code><code># To redirect all users to access the site WITHOUT the 'www.' prefix, </code><code># (http://www.example.com/... will be redirected to http://example.com/...) </code><code># uncomment the following: </code><span style="color:#ee82ee;"><code> # RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] </code><code># RewriteRule ^ http%{ENV:protossl}://%1%{REQUEST_URI} [L,R=301]</code></span></pre> <p>Si vous souhaitez que les adresses de votre site apparaissent avec les www, enlevez les # devant les trois lignes que j'ai colorisées en marron. Inversement, si vous ne voulez pas de ces www enlevez les # des deux lignes colorisées en violet.</p> </div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=14&amp;2=field_commentaire&amp;3=blog" token="KyaUUadERWfBOxJTPIDCWbgqo_gRAiKYNL1fJqC84Ck"></drupal-render-placeholder> </section> Mon, 29 Sep 2014 18:08:27 +0000 Florian 14 at http://www.formatic-creation.net Avec un simple formulaire, ajoutez votre site dans les moteurs de recherche http://www.formatic-creation.net/blog/ajouter-votre-site-dans-les-moteurs-de-recherche <span>Avec un simple formulaire, ajoutez votre site dans les moteurs de recherche</span> <span><span>Florian</span></span> <span>lun 22/09/2014 - 20:00</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/seo-scrabble.jpg?itok=kCzySJaz 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/seo-scrabble.jpg?itok=GNHJ0SF2 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/seo-scrabble.jpg?itok=ZFfTcD6O 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/seo-scrabble.jpg?itok=EsEP5IZi 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/seo-scrabble.jpg?itok=DgtYj0kH 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Seo Scrabble" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Lorsque vous mettez en ligne votre site Web, vous pouvez l'inscrire directement dans les moteurs de recherche via un formulaire d'inscription. Cela peut accélérer son apparition dans les pages de résultats, en revanche cela n'affectera pas le positionnement qui se travaille en amont (contenu pertinent, site bien codé, etc.) et en aval (mise à jour régulière, lien retour de qualité, etc.)</p> <p>Voici donc les moteurs de recherche qui propose un formulaire d'inscription :</p> <ul> <li><a href="http://www.google.fr/addurl/" rel="nofollow" target="_blank"><strong>Google</strong></a></li> <li><a href="http://www.bing.com/toolbox/webmasters/" rel="nofollow" target="_blank"><strong>Bing</strong></a> (moteur de recherche utilisé également par Yahoo!, inscription obligatoire)</li> <li><a href="http://referencement.ke.voila.fr" rel="nofollow" target="_blank"><strong>Voila</strong></a> (moteur de recherche utilisé également par Orange)</li> <li><a href="http://www.exalead.com/search/web/submit/" rel="nofollow" target="_blank"><strong>Exalead</strong></a></li> </ul> <p>Pour aider les moteurs de recherche à bien référencer toutes vos pages, il est recommandé d'ajouter un sitemap à votre site. C'est un fichier dans lequel est listé toutes les pages de votre site que vous souhaitez référencer.<br /> <br /> Pour cela il faut indiquer où se trouve ce fichier. Avec un éditeur de texte, créez un fichier <strong>robots.txt </strong>(n'oubliez pas le s) dans lequel vous inscrirez :</p> <pre> Sitemap http://www.votredomaine.fr/sitemap.txt</pre> <p>Maintenant, nous allons nous occuper de notre fichier sitemap. Toujours avec votre éditeur de texte préféré, créez un fichier sitemap.txt dans lequel vous inscrirez les adresses de chaque pages que vous souhaitez indexer dans les moteurs de recherche en allant à chaque fois à la ligne.<br /> <br /> Ensuite, vous n'avez plus qu'à envoyer via votre client FTP les deux fichiers à la racine de votre site qui permettront aux moteurs de recherche auront d'avoir une liste d'adresses des pages de votre site.<br /> <br /> Pour les utilisateurs de CMS du type Drupal, Wordpress, Dotclear, etc., il existe des modules qui permettent de générer automatiquement un sitemap.</p> <p>Si vous avez des questions, n'hésitez pas à les poser en commentaire.</p> <small>Crédit photo : <a rel="nofollow" target="blank" href="http://www.dynamicdreamz.com/search-engine-optimization-services/"> Johny Blaze</a></small></div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=13&amp;2=field_commentaire&amp;3=blog" token="htEyxAqRLR2yGfLwsYH1z3k2iiahGMpnmJ0gy_H5tno"></drupal-render-placeholder> </section> Mon, 22 Sep 2014 18:00:33 +0000 Florian 13 at http://www.formatic-creation.net Protéger l'accès de pages web avec un mot de passe http://www.formatic-creation.net/blog/proteger-acces-dossier-par-mot-de-passe-avec-htaccess <span>Protéger l&#039;accès de pages web avec un mot de passe</span> <span><span>Florian</span></span> <span>lun 15/09/2014 - 19:41</span> <div class="field field--name-field-image field--type-image field--label-hidden field--item"> <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_md/public/blog/authenticity-required-password.jpg?itok=DxIyhNvv 1x" media="all and (min-width: 992px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_sm/public/blog/authenticity-required-password.jpg?itok=QZJEIGsM 1x" media="all (min-width: 768px) and (max-width: 991px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xs/public/blog/authenticity-required-password.jpg?itok=UuqUg9bm 1x" media="all and (min-width: 641px) and (max-width: 767px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxs/public/blog/authenticity-required-password.jpg?itok=39nOFxU9 1x" media="all and (min-width: 361px) and (max-width: 640px)" type="image/jpeg"/> <source srcset="/sites/formatic-creation.net/files/styles/illustration_article_xxxs/public/blog/authenticity-required-password.jpg?itok=c1HtuUt3 1x" media="all and (max-width: 360px)" type="image/jpeg"/> <!--[if IE 9]></video><![endif]--> <img src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Ecran d&#039;ordinateur" class="img-responsive" /> </picture> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Pour protéger des documents ou pour accéder à une page d'administration, vous allez avoir besoin de mettre en place un système d'identification avec mot de passe. Si votre serveur tourne sur Apache, c'est très simple.</p> <p>Pour commencer, placez un fichier nommé <strong>.htaccess</strong>&nbsp; dans le dossier à protéger et copiez le code suivant avec un éditeur de texte :</p> <pre> <code>AuthName "Page protégée"</code> <code>AuthType Basic</code> <code>AuthUserFile "/chemin/absolu/dossier_a_proteger/.htpasswd"</code> <code>Require valid-user</code></pre> <p><strong>AuthName</strong> : la phrase qui s'affichera lorsque l'utilisateur devra indiquer son mot de passe.<br /> <br /> <strong>AuthUserFile</strong> : le chemin absolu du fichier .htpasswd qui va contenir les identifiants et leur mot de passe.<br /> <br /> Pour trouver ce chemin absolu, créez un fichier nommé <strong>path.php</strong> que vous placerez dans le dossier à protéger et copier le code suivant :</p> <pre> &lt;?php echo realpath('path.php'); ?&gt;</pre> <p>Lancez votre navigateur Web, puis ouvrez ce fichier. Il vous indiquera alors le chemin absolu que vous devrez copier dans le .htacces en n'oubliant pas de remplacer path.php par .htpasswd.<br /> <br /> Maintenant, occupons nous de ce fameux .htpasswd qui va contenir les identifiants et les mots de passe.<br /> <br /> Créer un fichier nommé <strong>.htpasswd</strong> que vous placerez aux côtés du .htacces dans le dossier à protéger.<br /> <br /> Voilà à quoi ressemble la syntaxe de ce fichier :</p> <pre> <code>identifiant1:mot_de_passe_crypte1</code> <code>identifiant2:mot_de_passe_crypte2</code></pre> <p>Pour crypter un mot de passe, il existe des <a href="http://www.e2.u-net.com/htaccess/make.htm" target="_blank">générateurs en ligne</a> qui le font simplement.</p> <p>Note : certains hébergeurs n'acceptent pas les mots de passe cryptés. Il faut alors les écrire comme en clair.<br /> <br /> Dorénavant, lorsque vous vous rendrez dans ce dossier via un navigateur Web, une fenêtre d'authentification s'ouvrira pour vous demander votre identifiant et mot de passe.</p> <small>Crédit photo : <a rel="nofollow" target="blank" href="https://www.flickr.com/photos/totallygenius/808187848/">Dev.Arka</a></small></div> <div class="mini-bio post-footer"> <div class="author-infos"> <div>A propos de l'auteur</div> <p class="title" itemprop="name">Florian Pennec</p> <p><span itemprop="jobtitle">Développeur Front-end</span> (Drupal et Wordpress) <span itemscope="" itemtype="http://schema.org/PostalAddress">basé à <span itemprop="addressLocality">Rennes</span> et la région <span itemprop="addressRegion">Bretagne</span>, </span> au sein de <a itemprop="url" href="http://www.formatic-creation.net">FormaTIC Création</a>. Également <a href="http://www.florian-pennec.net/photos" target="_blank">photographe amateur</a> et <a href="http://www.florian-pennec.net" target="_blank">rédacteur du Blog / Webzine Schizophrenic</a>.</p> </div> </div> <section class="field field--name-field-commentaire field--type-comment field--label-hidden comment-wrapper"> <div class="title comment-form__title">Ajouter un commentaire</div> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=12&amp;2=field_commentaire&amp;3=blog" token="E_zraZ64ynyD7jKFobnHsEkSZL6X2DKprY9xkw-d_-Y"></drupal-render-placeholder> </section> Mon, 15 Sep 2014 17:41:46 +0000 Florian 12 at http://www.formatic-creation.net