<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>Outils-Web</title>
  
  
  <link href="https://outils-web.fr/atom.xml" rel="self"/>
  
  <link href="https://outils-web.fr/"/>
  <updated>2026-03-06T14:24:32.563Z</updated>
  <id>https://outils-web.fr/</id>
  
  <author>
    <name>Philippe Dantine</name>
    
  </author>
  
  <generator uri="https://hexo.io/">Hexo</generator>
  
  <entry>
    <title>Ajouter un favicon à son site</title>
    <link href="https://outils-web.fr/ajouter-un-favicon/"/>
    <id>https://outils-web.fr/ajouter-un-favicon/</id>
    <published>2025-07-07T13:54:42.000Z</published>
    <updated>2026-03-06T14:24:32.563Z</updated>
    
    <content type="html"><![CDATA[<p>Les <strong>favicons</strong>, sont ces petites icones présentes au niveau de l’onglet, devant le nom du site visité. C’est un peu le symbole du site qui le représentera dans la liste des favoris.<br><img src = "/img/icons-fav.png" style="width:320px;"/><br>De façon très pratique, avant (c’était le bon temps), il suffisait de placer une image 16x16 nommé <em>“favicon.ico”</em> à la racine du site pour avoir cette petite image dans le naigateur.<br>Une autre méthode est apparue ensuite, celle qui consiste à mettre un lien vers l’icon choisit; du type :</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;link rel=<span class="string">&quot;icon&quot;</span> type=<span class="string">&quot;image/x-icon&quot;</span> href=<span class="string">&quot;/images/favicon.ico&quot;</span>&gt; </span><br></pre></td></tr></table></figure><p>Avec la venue des mobiles et la diversité des systèmes d’exploitation, de navigateurs et les normes personnelles voulue par certains éditeurs, cette simplicité initiale n’existe plus.<br>Pour tenir compte de tous les formats, je vous propose deux sites :</p><ul> <li><a href="https://realfavicongenerator.net/">favicon generator 1</a></li><li><a href="https://www.favicon-generator.org/">favicon generator 2</a></li></ul><p>Vous n’avez qu’à télécharger l’image couleur du favicon voulu et de récupérer toutes les images créée aux divers formats ainsi que le code à ajouter au site.<br>Voilà, finalement, ce n’est pas la peine de se casser la tête avec les favicon, d’autres l’ont fait pour nous avant.</p><p>A bientôt sur outils-web.fr </p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Les &lt;strong&gt;favicons&lt;/strong&gt;, sont ces petites icones présentes au niveau de l’onglet, devant le nom du site visité. C’est un peu le sym</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="favicon" scheme="https://outils-web.fr/tags/favicon/"/>
    
  </entry>
  
  <entry>
    <title>Ajouter Clippy l&#39;assistant de Microsoft Office à un site.</title>
    <link href="https://outils-web.fr/ajouter-clippy-lassistant-de-microsoft-office-a-un-site/"/>
    <id>https://outils-web.fr/ajouter-clippy-lassistant-de-microsoft-office-a-un-site/</id>
    <published>2023-12-08T20:33:35.000Z</published>
    <updated>2023-12-13T18:01:44.381Z</updated>
    
    <content type="html"><![CDATA[<!-- En haut de page --><link href="/clippy/clippy/build/clippy.css" rel="stylesheet" media="all" type="text/css" /> <p>Si le chargement s’est bien passé, Clippy doit s’être affiché en bas à droite de l’écran. D’autres assistants comme <em>Links</em>, le chat (mon préféré), <em>Merlin</em>, le magicien, <em>Bonzi</em> le singe, <em>F1</em> le robot, etc, existent, mais rassurez-vous, c’est très simple de changer de personnage.<br>Les autres personnages : <a href="/clippy/links.html" target="_blank"><b>Links</b></a> - <a href="/clippy/merlin.html" target="_blank"><b>Merlin</b></a> - <a href="/clippy/bonzi.html" target="_blank"><b>Bonzi</b></a> - <a href="/clippy/F1.html" target="_blank"><b>F1</b></a> - <a href="/clippy/peedy.html" target="_blank"><b>Peedy</b></a> - <a href="/clippy/rocky.html" target="_blank"><b>Rocky</b></a> - <a href="/clippy/rover.html" target="_blank"><b>Rover</b></a></p> <img src="/uploads/2013/08/clippy1.jpg" />  <h2 id="1-Clippy-de-Microsoft-Word-jusqu’a-chat-GPT"><a href="#1-Clippy-de-Microsoft-Word-jusqu’a-chat-GPT" class="headerlink" title="1. Clippy de Microsoft Word jusqu’à chat GPT"></a>1. Clippy de Microsoft Word jusqu’à chat GPT</h2><p>Clippy l’assistant de microsoft fait son grand retour. En effet, <em>chat GPT</em> cherchant un “visage” pour le représenter sur le bureau des ordinateurs, il devrait prendre les traits de <em>Clippy</em>.<br>Vous vous souvenez de Clippy le petit assitant de Microsoft Word 98. Nostalgie ou découverte selon votre âge.<br>A la base,le créateur de <em>Clippy</em> est Apple, puisque <em>Clippy</em> vient de Word, une création de Apple.<br>A l’époque, cet assistant n’étaient pas très performants pour les utilisateurs, mais sa présence sur le bureau de l’ordinateur avait un côté plaisant. </p><p>Si Clippy ou un de ses amis vous plaît, vous pouvez l’installer sur votre site web ou sur votre ordinateur. Vous pouvez le déplacer avec la souris ou double cliqer dessus pour déclencher les différentes animations.<br>Cette prouesse a été rendue possible, grâce au travail de quelques informaticiens nostalgiques et passionnés. Prenant sur leur temps libre, ils ont créé cette application poir redonner vie à ces petits personnages animés que sont Clippy, Links et les autres.<br>Malheureusement,  le site <a href="https://www.smore.com/clippy-js">https://www.smore.com/clippy-js</a>,  original de cette création, n’est plus actif, mais pas de soucis, j’ai récupéré les codes sources et je vous propose de les installer à votre tour…</p><h2 id="2-Mettre-Clippy-sur-son-site-Web"><a href="#2-Mettre-Clippy-sur-son-site-Web" class="headerlink" title="2. Mettre Clippy sur son site Web"></a>2. Mettre Clippy sur son site Web</h2><ul><li><p>Tout d’abord, commencez par télécharger les <strong><a href="/fichiers/clippy.zip">fichiers sources</a></strong> au format “zip” et décompresser le dossier.<br>Placez ensuite le dossier “clippy”  contenant “clippy.html”, à la racine du site. Si vous le placez à un autre emplacement, il faudra bien sûr changer les chemins d’accès en conséquence.<br><em>Si vous ouvrez la page “clippy.html” sur votre site, vous devriez voir une page vide avec Clippy en bas à droite.</em><br>En local (sur votre ordinateur), il faudra un serveur local pour que les scripts Javascript soient exécutés.</p></li><li><p>Ajouter enfin les codes suivants sur la page où vous voulez afficher Clippy :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- En haut de page --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">&quot;/clippy/clippy/build/clippy.css&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- En bas de page --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span> <span class="attr">src</span>=<span class="string">&quot;/clippy/clippy/build/clippy.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- script d&#x27;initialisation --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="line"><span class="language-javascript">clippy.<span class="title function_">load</span>(<span class="string">&#x27;Clippy&#x27;</span>, <span class="keyword">function</span>(<span class="params">agent</span>) &#123;      </span></span><br><span class="line"><span class="language-javascript">agent.<span class="title function_">show</span>();     </span></span><br><span class="line"><span class="language-javascript">&#125;);</span></span><br><span class="line"><span class="language-javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure></li></ul><p>Et c’est fini.<br>Comme vous l’avez constaté, jquery est également requis et charger grâce à un cdn.</p><h2 id="3-Changer-de-personnage"><a href="#3-Changer-de-personnage" class="headerlink" title="3. Changer de personnage"></a>3. Changer de personnage</h2><p>Vous souhaitez peut-être afficher le chat Links, plutôt que Clippy ? (Moi aussi ce petit chat me fait craquer)<br>Pas de problèmes : pour changer de personnage, il faut modifier la ligne de code suivant :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">clippy.load(&#x27;**Clippy**&#x27;, function(agent) &#123;</span><br></pre></td></tr></table></figure><p>Par exemple pour avoir Links, remplacez <strong>Clippy</strong> par <strong>Links</strong> et le petit chat apparaîtra.<br>A part Clippy, vous pouvez proposer d’autres personnages : <em>Links, Bonzi, Merlin, F1, Genie, Genius, Peedy, Rocky et Rover</em></p><p><strong>Important !!!</strong><br>Si vous ne mettez pas le dossier “clippy” à la racine du site ou si la page n’est pas à la racine du site, il faudra changer les chemins d’accès suivant :<br><em>&#x2F;clippy&#x2F;clippy&#x2F;build&#x2F;clippy.css</em> et *&#x2F;clippy&#x2F;clippy&#x2F;build&#x2F;clippy.css<br><strong>Mais aussi, dans le fichier clippy.js, la ligne</strong> : <em>clippy.BASE_PATH &#x3D; ‘&#x2F;clippy&#x2F;clippy&#x2F;agents&#x2F;‘;</em></p><p>Pour terminer, si vous voulez afficher Clippy sur votre ordinateur, il vous faudra un serveur local. Vous pouvez par exemple utiliser <a href="https://outils-web.fr/les-12-meilleurs-editeurs-html-gratuits/">un éditeur HTML</a> comme VS code,<br>ouvrir le dossier <em>clippy</em> avec Visuel Sudio Code, afficher le code dufichier html puis lancer le serveur local (live server) en cliquant en bas à droite sur “Go Live”</p><p>J’espère que cet article vous aura donné envie de vous amuser avec Clippy. </p><p>A bientôt sur Outils-Web.fr</p><!-- En bas de page --><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="/clippy/clippy/build/clippy.js"></script><!-- script d'initialisation --><script type="text/javascript">        clippy.load('Clippy', function(agent) {              agent.show();         });</script>]]></content>
    
    
      
      
    <summary type="html">&lt;!-- En haut de page --&gt;
&lt;link href=&quot;/clippy/clippy/build/clippy.css&quot; rel=&quot;stylesheet&quot; media=&quot;all&quot; type=&quot;text/css&quot; /&gt;
 
&lt;p&gt;Si le chargement </summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="afficher clippy" scheme="https://outils-web.fr/tags/afficher-clippy/"/>
    
    <category term="afficher clippy site web" scheme="https://outils-web.fr/tags/afficher-clippy-site-web/"/>
    
    <category term="clippy" scheme="https://outils-web.fr/tags/clippy/"/>
    
    <category term="clippy Merlin Rover Links" scheme="https://outils-web.fr/tags/clippy-Merlin-Rover-Links/"/>
    
  </entry>
  
  <entry>
    <title>10 effets javascript et CSS pour menus</title>
    <link href="https://outils-web.fr/10-effets-javascript-et-css-pour-menus/"/>
    <id>https://outils-web.fr/10-effets-javascript-et-css-pour-menus/</id>
    <published>2023-12-08T17:05:41.000Z</published>
    <updated>2023-12-08T18:02:39.015Z</updated>
    
    <content type="html"><![CDATA[<p>Comment animer des menus simplement et rendre vos liens textes plus attractifs ?<br>C’est ce que nous allons voir dans cet article consacré aux liens réacifs en JavaScript.</p><img src="/uploads/2013/01/menu.jpg" width="200" height="200"/> <p>Pour commencer, rapplelons la structure d’un lien Hypertext en HTML. </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://lien&quot;</span>&gt;</span> Texte Cliquable <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Maintenant voyons comment nous pouvons rendre ces liens réactifs en Javascript. (on pourrait également utiliser les feuilles de styles CSS)</p><h3 id="1-Premiere-methode-utiliser-onmouseover"><a href="#1-Premiere-methode-utiliser-onmouseover" class="headerlink" title="1. Première méthode : utiliser onmouseover"></a>1. Première méthode : utiliser onmouseover</h3><p>La première méthode consiste à utiliser les méthodes “onmouseover” et “onmouseout” associées aux événements de survol du texte et à la sortie du curseur du texte.<br>Voyons quelques exemples :</p><table><thead><tr><th align="left">Type de lien</th><th align="left">Exemple</th></tr></thead><tbody><tr><td align="left">Lien souligné</td><td align="left"><a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'" href="#">Lien souligné</a></td></tr><tr><td align="left">Lien surligné</td><td align="left"><a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'overline'" onmouseout="this.style.textDecoration = 'none'" href="#">Lien surligné</a></td></tr><tr><td align="left">Lien barré</td><td align="left"><a style="text-decoration: initial;" onmouseover="this.style.textDecoration = 'line-through'" onmouseout="this.style.textDecoration = 'none'" href="#">Lien barré</a></td></tr><tr><td align="left">Lien gras</td><td align="left"><a style="font-weight: normal;text-decoration: none;" onmouseover="this.style.fontWeight = 'bold'" onmouseout="this.style.fontWeight = 'normal'" href="#"  >Lien en gras</a></td></tr><tr><td align="left">Lien ou les lettres s’écartent</td><td align="left"><a style="letter-spacing: 2px;text-decoration: none;" onmouseover="this.style.letterSpacing ='5px'" onmouseout="this.style.letterSpacing='2px'" href="#">Lien espacé</a></td></tr><tr><td align="left">Lien devenant en majuscule</td><td align="left"><a style="text-transform: none;text-decoration: none;" onmouseover="this.style.textTransform ='uppercase'" onmouseout="this.style.textTransform='none'" href="#">Lien majuscule</a></td></tr><tr><td align="left">Lien dont les premières lettres deviennent majuscules</td><td align="left"><a style="text-transform: none;text-decoration: none;" onmouseover="this.style.textTransform ='capitalize'" onmouseout="this.style.textTransform='none'" href="#">lien capitales</a></td></tr><tr><td align="left">Lien changeant de couleur</td><td align="left"><a style="color: #aaaaaa;text-decoration: none;" onmouseover="this.style.color = '#101010'" onmouseout="this.style.color = '#aaaaaa'" href="#">Lien texte coloré</a></td></tr><tr><td align="left">Lien dont le fond change de couleur</td><td align="left"><a style="color: #ffffff; background: #aaaaaa;text-decoration: none;" onmouseover="this.style.background = '#606060'" onmouseout="this.style.background = '#aaaaaa'" href="#">  Lien à fond coloré  </a></td></tr></tbody></table><p>Voici les scripts associés à chacun de ces exemple, puis nous commenterons ces codes.</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Lien Souligné --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;text-decoration: initial;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.textDecoration = &#x27;underline&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.textDecoration = &#x27;none&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien souligné</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien Surligné --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;text-decoration: initial;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.textDecoration = &#x27;overline&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.textDecoration = &#x27;none&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien surligné</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien Barré --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;text-decoration: initial;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.textDecoration = &#x27;line-through&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.textDecoration = &#x27;none&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien barré</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien en gras --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;font-weight: normal;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.fontWeight = &#x27;bold&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.fontWeight = &#x27;normal&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien en gras</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien Espacé --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;letter-spacing: 2px;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.letterSpacing =&#x27;3px&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.letterSpacing=&#x27;2px&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien espacé</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--  Lien Majuscule --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;text-transform: none;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.textTransform =&#x27;uppercase&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.textTransform=&#x27;none&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien majuscule</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien Capitales --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;text-transform: none;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.textTransform =&#x27;capitalize&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.textTransform=&#x27;none&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">lien capitales</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien colorés --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;color: #aaaaaa;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.color = &#x27;#101010&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.color = &#x27;#aaaaaa&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien texte coloré</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- Lien à fond colorés --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">style</span>=<span class="string">&quot;color: #ffffff; background: #aaaaaa;text-decoration: none;&quot;</span> <span class="attr">onmouseover</span>=<span class="string">&quot;this.style.background = &#x27;#606060&#x27;&quot;</span> <span class="attr">onmouseout</span>=<span class="string">&quot;this.style.background = &#x27;#aaaaaa&#x27;&quot;</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span>&gt;</span></span><br><span class="line">Lien à fond coloré</span><br><span class="line"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>La partie <em>style &#x3D; “…”</em> indique le style à appliquer au texte initialement.<br>La partie <em>onmouveover &#x3D; “…”</em> change le style souhaité au survol de la souris.<br>La partie <em>onmouveout&#x3D; “…”</em> rétabli le style initial lorsque a souris se retire du texte.</p><p>N’oubliez pas de remplacer <em>#</em> dans <em>href&#x3D;”#”</em> par l’adresse du lien vers lequel il pointe.</p><p>La méthode que nous venons de vois est simple, mais possède ses limites. Par exemple, on ne peut changer qu’un seul attribut du style CSS, comme la couleur, l’espacement, etc.<br>Cette manière de procéder est donc dépréciée et on préfère écouter les évènmenents grâce à un “Listener”.</p><h3 id="2-Deuxieme-methode-utiliser-un-“event-Listener”"><a href="#2-Deuxieme-methode-utiliser-un-“event-Listener”" class="headerlink" title="2. Deuxième méthode : utiliser un “event Listener”"></a>2. Deuxième méthode : utiliser un “event Listener”</h3><p>Dans cette deuxième partie nous allons utiliser la méthode <em>objet.addEventListener(“type évent”, myFunction);</em></p><ul><li><p>Commençons par créer un lien HyperText avec certains attributs de style : </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> <span class="attr">id</span>=<span class="string">&quot;lien&quot;</span> <span class="attr">style</span>=<span class="string">&quot;text-decoration: none;color: navy; font-weight: bold;&quot;</span>&gt;</span> Texte <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure></li><li><p>Ajoutons ensuite le code JavaScript suivant :</p></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line"><span class="comment">// On récupère l&#x27;objet d&#x27;id &quot;lien&quot; que l&#x27;on met dans la variable lien</span></span><br><span class="line"><span class="keyword">let</span> lien = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;lien&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// On applique un Listener à l&#x27;ojet lien pour le survol de la souris</span></span><br><span class="line">lien.<span class="title function_">addEventListener</span>(</span><br><span class="line">  <span class="string">&quot;mouseover&quot;</span>,</span><br><span class="line">  <span class="keyword">function</span> (<span class="params">event</span>) &#123;</span><br><span class="line">    <span class="comment">// on met l&#x27;accent sur la cible de mouseover</span></span><br><span class="line">    event.<span class="property">target</span>.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="literal">false</span>,</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// On applique un Listener à l&#x27;ojet lien au retrait de la souris</span></span><br><span class="line">lien.<span class="title function_">addEventListener</span>(</span><br><span class="line">  <span class="string">&quot;mouseout&quot;</span>,</span><br><span class="line">  <span class="keyword">function</span> (<span class="params">event</span>) &#123;</span><br><span class="line">    <span class="comment">// on met l&#x27;accent sur la cible de mouseover</span></span><br><span class="line">    event.<span class="property">target</span>.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&quot;navy&quot;</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="literal">false</span>,</span><br><span class="line">);</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure><ul><li>Et voici le résultat :<br>Le lien passe du bleu foncé (navy) au rouge (red) au survol du texte.</li></ul><p><a href="#" id="lien" style="text-decoration: none;color: navy; font-weight: bold;"> Texte </a></p><script>// On récupère l'objet d'id "lien" que l'on met dans la variable lienlet lien = document.getElementById("lien");// On applique un Listener à l'objet lien pour le survol de la sourislien.addEventListener(  "mouseover",  function (event) {    // on modifie la cible de mouseover    event.target.style.color = "red";  },  false,);// On applique un Listener à l'objet lien au retrait de la sourislien.addEventListener(  "mouseout",  function (event) {    // on modifie la cible de mouseout    event.target.style.color = "navy";  },  false,);</script><p>J’espère que ces éléments de programmation vous aurons aider.<br>En attendant de vous revoir, je vous souhaite pleins de bonnes choses.</p><p> A bientôt sur Outils Web</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Comment animer des menus simplement et rendre vos liens textes plus attractifs ?&lt;br&gt;C’est ce que nous allons voir dans cet article consac</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="css" scheme="https://outils-web.fr/tags/css/"/>
    
    <category term="javascript" scheme="https://outils-web.fr/tags/javascript/"/>
    
    <category term="menu" scheme="https://outils-web.fr/tags/menu/"/>
    
    <category term="menu réactif" scheme="https://outils-web.fr/tags/menu-reactif/"/>
    
    <category term="onmouseout" scheme="https://outils-web.fr/tags/onmouseout/"/>
    
    <category term="onmouseover" scheme="https://outils-web.fr/tags/onmouseover/"/>
    
  </entry>
  
  <entry>
    <title>Les 3 méthodes pour insérer un style CSS dans une page HTML</title>
    <link href="https://outils-web.fr/les-3-methodes-pour-inserer-un-style-css-dans-une-page-html/"/>
    <id>https://outils-web.fr/les-3-methodes-pour-inserer-un-style-css-dans-une-page-html/</id>
    <published>2023-11-28T16:12:19.000Z</published>
    <updated>2023-12-09T15:35:48.055Z</updated>
    
    <content type="html"><![CDATA[<p>Les feuilles de style ou CSS (Cascading Style Sheets) sont indispensables pour les documents HTML. Elles apportent les couleurs, la mise en page et le relief nécessaire à un bon document internet.</p><img src="/uploads/2013/01/css-bleu.jpg" width="400" height="300"/><p><strong>Pour que s’applique un style css à un document, il existe trois solutions :</strong></p><h4 id="1-Premiere-methode-le-CSS-en-ligne"><a href="#1-Premiere-methode-le-CSS-en-ligne" class="headerlink" title="1. Première méthode : le CSS en ligne"></a>1. Première méthode : le CSS en ligne</h4><p>C’est la méthode la plus simple, mais peut-être la moins bonne, car elle ne peut s’appliquer qu’à une seule balises.<br>La syntaxe est simple pour changer la couleur d’un texte et celle de l’arrière plan :</p><p><span style="color:blue;background-color:yellow;"> Mon Texte </span></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;color:blue;background-color:yellow;&quot;</span>&gt;</span> Mon Texte <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Cette méthode est pratique à utiliser pour modifier rapidement un élément, mais les puristes vous diront que ce sont des mauvaises pratiques.<br>Quand c’est possible, on préférera les méthodes qui suivent.</p><h4 id="2-Deuxieme-methode-les-balises-lt-style-gt"><a href="#2-Deuxieme-methode-les-balises-lt-style-gt" class="headerlink" title="2. Deuxième méthode : les balises &lt;style &gt;"></a>2. Deuxième méthode : les balises &lt;style &gt;</h4><p>Les CSS d’une page html peuvent être placés entre les balises <em>&lt;style type&#x3D; “text&#x2F;css”&gt; … &lt;&#x2F;style&gt;</em><br>Plus le code css est chargé rapidement plus la page s’affiche vite. On a donc intérêt à le placer dans les balises &lt;head&gt; en haut de page.<br>Pour accéder à un élément, on utilisera souvent les attibuts “class” ou”id”.<br>Voici un exemple : </p><ul><li><p>code CSS ;</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;style type= &quot;text/css&quot;&gt;</span><br><span class="line"><span class="selector-class">.txt</span>&#123;</span><br><span class="line"><span class="attribute">color</span>:blue;</span><br><span class="line"><span class="attribute">background-color</span>:yellow;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure></li><li><p>code HTML :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;txt&quot;</span>&gt;</span> Mon texte <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure></li></ul><style type= "text/css">.txt{    color:blue;    background-color:yellow;}</style><p class="txt"> Mon texte </p><h4 id="3-Troisieme-methode-le-fichier-externe-“-css-“"><a href="#3-Troisieme-methode-le-fichier-externe-“-css-“" class="headerlink" title="3. Troisième méthode : le fichier externe “.css “"></a>3. Troisième méthode : le fichier externe “.css “</h4><p>C’est la méthode la plus utilisée, elle consiste à regrouper tout le code entre les balises &lt;style&gt; et &lt;&#x2F;style&gt; dans un fichier du genre style.css. <br>Ce fichier ne doit pas contenir les balises &lt;style&gt; et &lt;&#x2F;style&gt;, mais seulement le code css et s’intègre dans la page HTML, par un lien comme dans cet exemple : </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">href</span>=<span class="string">&quot;style.css&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure><p>En principe cette balise avec le lien doit être placée entre les balises &lt;head&gt; et &lt;&#x2F;head&gt; de la page, même si vous pouvez le placer ailleurs dans le document.<br>Pour en savoir plus sur les principales balises de mise en forme, vous pouvez vous référer à cet article : <a href="/10-balises-html-pour-mettre-en-forme-un-article/" title="10 balises HTML pour mettre en forme un article."><strong>10 balises html pour mettre en forme un article</strong></a></p><p>Cet article vous a plu, n’hésitez pas à le partager.</p><p>A bientôt sur Outils Web</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Les feuilles de style ou CSS (Cascading Style Sheets) sont indispensables pour les documents HTML. Elles apportent les couleurs, la mise </summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="ajouter css" scheme="https://outils-web.fr/tags/ajouter-css/"/>
    
    <category term="css balise style" scheme="https://outils-web.fr/tags/css-balise-style/"/>
    
    <category term="css lien" scheme="https://outils-web.fr/tags/css-lien/"/>
    
    <category term="fichier css" scheme="https://outils-web.fr/tags/fichier-css/"/>
    
    <category term="integrer css html" scheme="https://outils-web.fr/tags/integrer-css-html/"/>
    
  </entry>
  
  <entry>
    <title>Les 12 meilleurs sites de retouches photos en ligne gratuits.</title>
    <link href="https://outils-web.fr/les-12-meilleurs-sites-de-retouches-photos-en-ligne-gratuits/"/>
    <id>https://outils-web.fr/les-12-meilleurs-sites-de-retouches-photos-en-ligne-gratuits/</id>
    <published>2023-11-27T14:50:32.000Z</published>
    <updated>2023-12-15T21:31:56.617Z</updated>
    
    <content type="html"><![CDATA[<p>Pour retoucher les photos, il n’est pas nécessaire d’installer des logiciels coûteux. Tout ou presque peut se faire en ligne. </p><p><img src="/uploads/2013/02/papillon.jpg" alt="papillon" title="papillon"></p><h3 id="12-sites-de-retouches-photos-en-ligne-gratuits"><a href="#12-sites-de-retouches-photos-en-ligne-gratuits" class="headerlink" title="12 sites de retouches photos en ligne gratuits :"></a><strong>12 sites de retouches photos en ligne gratuits :</strong></h3><ul><li><p><strong><a href="https://www.lunapic.com/editor/" title="lunapic">lunapic</a></strong> ne paie pas de mine, mais il est franchement impressionnant. La page s’affiche rapidement et le nombre d’options et d’effets proposés et tout à fait impressionnant : des effets, des animations des conversion pour vos retouches. Il y a même un petit tutoriel. Que dire sinon bravo lunapic pour ce site gratuit.</p></li><li><p><strong><a href="https://pixlr.com/" title="pixlr retouches photos">pixlr</a></strong> est plus qu’un site de retouches photos, c’est un véritable logiciel de traitement d’images comme photoshop ou gimp. En fait, pixlr propose trois outils : un éditeur spécialisé (à gauche), un outil de retouches express (au centre) et un système de “développement de photos à l’ancienne” (à droite). Dans l’éditeur pixlr, tous les outils nécessaires sont présents comme les calques ou les masques. De nombreux filtres sont aussi présents. La palette de couleurs se trouve en bas de la barre d’outils. Ce sont les carrés du bas. Bref, un must, mais peut-être un peu délicat à apprivoiser.</p></li><li><p><strong><a href="https://editor.pho.to/fr/" title="editor pho.to">editor.pho.to</a></strong> est une application en ligne très performante. Elle offre tous les outils d’un véritable logiciel de retouches photos, plus des options très sympas comme la possibilité de faire des caricatures. Cette application est capable de reconnaître des visages. A tester.</p></li><li><p><strong><a href="https://www.picmonkey.com/" title="picmonkey">picmonkey</a></strong> est un des plus populaires des sites de retouches photos. Très simple d’utilisation, il offre une large gamme d’outils et d’effets.</p></li><li><p><strong><a href="https://fotoflexer.com/" title="foto flexer">foto flexer</a></strong> une véritable atelier de retouches et de modifications d’images en ligne. Plus des décorations, des animations, des calques et des trucs de Geek dont vous n’avez peut-être jamais entendu parlé :). Tout ceci a un petit coût en temps de chargement compté 20 secondes.</p></li><li><p><strong><a href="https://www.imageeditor.net/" title="image editor">image editor</a></strong> est un vrai logiciel pour retoucher les photos en ligne avec tous les outils indispensables. Mais il offre en prime des options de Webcam, des filtres des calques etc. Vraiment très bien fait et gratuit.</p></li><li><p><strong><a href="https://www.fotor.com/fr/">fotor</a></strong> possède les outils essentiels pour ajuster toutes les photos, plus quelques effets uniques…</p></li><li><p><strong><a href="https://www.canva.com/fr_fr/retouche-photo/">canva retouches photos</a></strong> est une en ligne entièrement gratuit et très complet. Une bonne palette d’outils est tout simplement énorme et quelques plus. </p></li><li><p><a href="https://www.onlinephototool.com/" title="online photo tool."><strong>online photo tool</strong></a> fonctionne avec une applet Java. Lorsqu’elle est chargée (ce qui n’est pas instantané) elle affiche un vrai logiciel de dessin avec toutes les fonctionnalité pour toutes vos retouches d’images. Le vrai plus qui m’a séduit, ce sont les options sur le côté droit qui permettent d’ajouter des smileys, des lettres décorées…  à vos photos. Vraiment chouette.</p></li><li><p>Avec <strong><a href="https://www.befunky.com/" title="be funky">be funky</a>,</strong> il suffit de cliquer sur Get Started et c’est parti pour vos retouches :). Beaucoup d’options, dont la fameuse fonction yeux rouges des photos. Je m’arrête ici, car la liste des possibilités est assez longue.</p></li><li><p><strong><a href="https://www.flipmyphotos.com/editpicture.aspx" title="flip my photos">flip my photos</a></strong> est très complet; Il utilise une applet Java. Il faudra donc peu-être accepter une autorisation selon votre navigateur. Vous pourrez en particulier faire tourner et déplacer votre photo dans tous les sens.</p></li><li><p>Ne vous fiez pas aux apparences, <strong><a href="https://www.freeonlinephotoeditor.com/" title="free online photo editor">free online photo editor</a></strong> a un aspect austère, voir acide, mais il offre une palette d’outils en tout genre très complète pour retoucher vos images. Le site  gagnerait selon moi à les mettre davantage en valeur.</p></li></ul><p>J’espère que ces sites de retouches photos gratuits  en ligne vous ont intéressé. N’hésitez pas à ajouter votre touche personnelle :).</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Pour retoucher les photos, il n’est pas nécessaire d’installer des logiciels coûteux. Tout ou presque peut se faire en ligne. &lt;/p&gt;
&lt;p&gt;&lt;im</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="retouche photos en ligne gratuit" scheme="https://outils-web.fr/tags/retouche-photos-en-ligne-gratuit/"/>
    
    <category term="retoucher des photos en ligne gratuit" scheme="https://outils-web.fr/tags/retoucher-des-photos-en-ligne-gratuit/"/>
    
    <category term="retoucher photo en ligne" scheme="https://outils-web.fr/tags/retoucher-photo-en-ligne/"/>
    
    <category term="site de retouche photo gratuit" scheme="https://outils-web.fr/tags/site-de-retouche-photo-gratuit/"/>
    
  </entry>
  
  <entry>
    <title>Personnaliser la couleur des liens avec les CSS</title>
    <link href="https://outils-web.fr/personnaliser-la-couleur-des-liens-avec-les-css/"/>
    <id>https://outils-web.fr/personnaliser-la-couleur-des-liens-avec-les-css/</id>
    <published>2023-11-08T18:28:57.000Z</published>
    <updated>2023-12-08T20:24:25.462Z</updated>
    
    <content type="html"><![CDATA[<link href="/fichiers/liens.css" rel="stylesheet"><!-- a.menu1:link {color:#FF0000;} /\* Lien non visité \*/ a.menu1:visited {color:#00FF00;} /\* Lien visité \*/ a.menu1:hover {color:#FF00FF;} /\* Lien survolé\*/ a.menu1:active {color:#0000FF;} /\* Lien sélectionné \*/ --><!-- a.menu2:link {color:#00FF00;background-color:#FF7F7F;} /\* Lien non visité \*/ a.menu2:visited {color:#00FF00;background-color:#FF7F7F;} /\* Lien visité \*/ a.menu2:hover {color:#FFFF00;background-color:#FF00FF;} /\* Lien survolé \*/ a.menu2:active {color:#00FF00;background-color:#FF7F7F;} /\* Lien sélectionné \*/ --><p>Pour personnaliser des liens, il n’est pas nécessaire d’utiliser Javascript. La balise &lt;a&gt; et les CSS sont suffisants.<br>Dans cet article, vous trouverez un petit tutorial sur les liens, les couleurs et  les CSS.  <br>Vous pourrez ainsi personnaliser vos menus, pour les liens non visités, visités et survolés et créer des effets sur ces liens.<br><img src="/uploads/2013/02/balise-a-CSS1.jpg" width="300" height="200"/></p><h2 id="Les-differents-etats-d’un-lien-d’une-balise-lt-a-gt"><a href="#Les-differents-etats-d’un-lien-d’une-balise-lt-a-gt" class="headerlink" title="Les différents états d’un lien d’une balise &lt;a&gt;"></a>Les différents états d’un lien d’une balise &lt;a&gt;</h2><p>Un lien peut avoir 5 états différents :</p><ul><li><strong>link</strong> : l’état initial d’un lien avant d’être cliqué</li><li><strong>visited</strong> : l’état du lien lorsqu’il a été visité</li><li><strong>hover</strong> : l’état du lien lorsqu’il est survolé</li><li><strong>focus</strong> : l’état du lien lorsqu’on met le focus dessus, par le clavier ou par programmation</li><li><strong>active</strong> : l’état du lien au moment ou on clique dessus</li></ul><h2 id="La-balise-lt-a-gt-et-les-codes-CSS-pour-personnaliser-la-couleur-des-liens"><a href="#La-balise-lt-a-gt-et-les-codes-CSS-pour-personnaliser-la-couleur-des-liens" class="headerlink" title="La balise &lt;a&gt; et  les codes CSS pour personnaliser la couleur des liens."></a>La balise &lt;a&gt; et  les codes CSS pour personnaliser la couleur des liens.</h2><p>Pour donner des couleurs différentes aux liens selon leur état, on utiliser la feuilles de style et la propriété color</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line"><span class="selector-tag">a</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: <span class="number">1px</span> <span class="number">5px</span> <span class="number">1px</span> <span class="number">5px</span>;</span><br><span class="line"><span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#0000ff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#437A16</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#cdfeaa</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#cdfeaa</span>;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><p>L’ordre dans lequel ces attributs sont déclarés doit être respecté. Les couleurs sont codées ici en hexadécimal, il suffit de les adapter pour votre usage.<br>Pour intéger ces CSS dans une page HTML, <a href="/les-3-methodes-pour-inserer-un-style-css-dans-une-page-html/" title="Les 3 méthodes pour insérer un style CSS dans une page HTML">3 méthodes sont disponibles</a> </p><p>Ainsi pour personaliser le lien, il faut commencer par le créer :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;chemin/fichier.html&quot;</span> &gt;</span>Lien dont les couleurs du texte sont personnalisées<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Voici un exemple d’application du code précédent :</p><center><a href="#lien1" class="lien" id="lien1">Lien dont les couleurs du texte sont personnalisées</a></center><p>Le problème avec cette façon de faire, c’est que tous les liens des balises &lt;a&gt;  seront affectés par ces CSS. Pour remédier à ce défaut, on peut ajouter un sélecteur de type <em>class</em>, pour identifier la balise à styliser.</p><h2 id="Appliquer-un-CSS-a-une-balise-lt-a-gt-avec-avec-un-selecteur"><a href="#Appliquer-un-CSS-a-une-balise-lt-a-gt-avec-avec-un-selecteur" class="headerlink" title="Appliquer un CSS à une balise &lt;a&gt; avec avec un sélecteur."></a>Appliquer un CSS à une balise &lt;a&gt; avec avec un sélecteur.</h2><p>En réalité, dans cet article, je n’ai pas utilisé les codes précédents, sinon tous les liens auraient pris les mêmes couleurs et on n’aurait pas pu appliquer des styles différents aux deux liens des exemples.<br>Pour différencier les balises &lt;a&gt; entre elles et leur appliquer des CSS différents, on peut utiliser des sélecteurs de la façon suivante : </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">center</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;chemin/fichier.html&quot;</span> <span class="attr">class</span>=<span class="string">&quot;lien&quot;</span>&gt;</span>Lien dont les couleurs du texte sont personnalisées<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">center</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Ce qui donne :</p><center><a href="#lien2" class="lien" id="lien2">Lien dont les couleurs du texte sont personnalisées</a></center><p>Le code CSS s’écrit ainsi :</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-class">.lien</span> &#123;</span><br><span class="line"><span class="attribute">padding</span>: <span class="number">1px</span> <span class="number">5px</span> <span class="number">1px</span> <span class="number">5px</span>;</span><br><span class="line"><span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#0000ff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#437A16</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ff0000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</span><br><span class="line">  <span class="attribute">background</span>: <span class="number">#cdfeaa</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span><br><span class="line">  <span class="attribute">text-decoration</span>: none;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#cdfeaa</span>;</span><br><span class="line">&#125;<span class="attribute">color</span>: <span class="number">#CDFEAA</span>;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure><p>Il ne vous reste plus qu’à modifier les attributs css à votre guise.</p><h4 id="Pour-aller-plus-loin-personnaliser-d’autres-attributs-texte-d’un-lien"><a href="#Pour-aller-plus-loin-personnaliser-d’autres-attributs-texte-d’un-lien" class="headerlink" title="Pour aller plus loin : personnaliser d’autres attributs texte d’un lien."></a><strong>Pour aller plus loin : personnaliser d’autres attributs texte d’un lien.</strong></h4><p>Dans cet article, nous nous sommes intéressés esseniellement aux couleurs &lt;a&gt; avec CSS. </p><p>Mais on pourrait personnaliser d’autres attributs comme ceux liés au texte. </p><p>En voici quelques exemples :</p><div style="background:#dddddd;padding: 5px 10px 5px 10px;border-radius: 3px;"><b>text-decoration</b> : <i>underline;</i>  (pour souligner ou non avec none) </br><b>font-weight</b> :<i> bold;</i>   (texte en gras) </br><b>font-spacing</b> : <i>15px;</i>  (espacement des lettres )</div><p>Pour compléter cet article, sachez qu’il est aussi possible de faire des <a href="/10-effets-javascript-et-css-pour-menus/" title="10 effets javascript et CSS pour menus">effets javascript pour les liens</a>. </p><p>A bientôt sur Outils Web </p>]]></content>
    
    
      
      
    <summary type="html">&lt;link href=&quot;/fichiers/liens.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;!-- a.menu1:link {color:#FF0000;} /\* Lien non visité \*/ a.menu1:visited {color:#00FF00</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="a css" scheme="https://outils-web.fr/tags/a-css/"/>
    
    <category term="a href css" scheme="https://outils-web.fr/tags/a-href-css/"/>
    
    <category term="css menu tutorial" scheme="https://outils-web.fr/tags/css-menu-tutorial/"/>
    
    <category term="lien couleur css" scheme="https://outils-web.fr/tags/lien-couleur-css/"/>
    
    <category term="lien css" scheme="https://outils-web.fr/tags/lien-css/"/>
    
    <category term="modifier couleur" scheme="https://outils-web.fr/tags/modifier-couleur/"/>
    
  </entry>
  
  <entry>
    <title>Créer un site statique</title>
    <link href="https://outils-web.fr/creer-un-site-statique/"/>
    <id>https://outils-web.fr/creer-un-site-statique/</id>
    <published>2022-11-13T15:07:36.000Z</published>
    <updated>2023-01-12T13:16:21.476Z</updated>
    
    <content type="html"><![CDATA[<p>Depuis de nombreuses années, j’utilisais wordpress pour publier du contenu sur internet.<br>J’ai découvert il y a peu le JamStack et le principe de la création des sites statiques.<br>Ce mode de publication et d’hébergement était plus en accord avec mes besoins et j’ai décidé de passer tous mes sites wordpress en statique.<br>Je vous présente ici ma démarche, en espérant qu’elle vous servira.</p><img src="/img/sites-statiques.jpg" /><p>  <strong>1. Quel est le principe des sites statiques et du JamStack ?</strong><br>  <strong>2. Pourquoi créer un site statique ?</strong><br>  <strong>3. Comment créer un site statique ?</strong><br>  <strong>4. Mes choix pour la génération de sites statiques.</strong></p><h2 id="1-Quel-est-le-principe-des-sites-statiques-et-du-JamStack"><a href="#1-Quel-est-le-principe-des-sites-statiques-et-du-JamStack" class="headerlink" title="1. Quel est le principe des sites statiques et du JamStack ?"></a>1. Quel est le principe des sites statiques et du JamStack ?</h2><p>Un site statique est le site le plus simple que l’on puisse créer, mais aussi le plus rapide. Les pages sont toutes en HTML “basique”.<br>Lorsqu’un utilisateur fait une requête sur un site statique, le serveur lui retourne directement la page demandée en HTML sans avoir à construire quoi que ce soit.<br>Cette solution est séduisante, pour les sites n’ayant pas besoin de s’adapter à l’utilisateur.<br>En gros si vous fournissez un contenu informatif, le contenu sera le même pour tous les utilisateurs. Il n’est donc pas nécessaire de générer une page personnalisée à partir du PHP ou d’un autre langage, sur le serveur comme c’est le cas avec WordPress.<br>Le problème de cette stratégie statique apparaît lors de la création de nouveaux contenu. Il faut ajouter de nouvelle pages HTML, modifier les menus, etc.  Au final, il faudrait changer tout le site “à la main” à chaque mise à jour.<br>C’est là que le JamStack entre en jeu.</p><p>Mais qu’est-ce que le JamStack ?</p><p>Commençons par le <strong>Stack</strong> :</p><p><strong>Stack</strong> se rapporte à un ensemble d’outils de programmation et de langages cohérents pour la création, la publication et l’exploitation d’application web.<br>Trois <strong>Stack</strong> sont déjà popularisé: </p><ul><li>le full stack ou en gros vous vous “démerdez” seul pour le frontend et le backend. Il faut maîtriser tous les langages et les technologies des deux côtés de la rogrammation Web.</li><li>le MEAN stack correspondant à l’emploie de <strong>M</strong>ongoDB, <strong>E</strong>xpress.js, <strong>A</strong>ngular et <strong>N</strong>ode.js.</li><li>le MERN stack correspondant à l’emploie de <strong>M</strong>ongoDB, <strong>E</strong>xpress.js, <strong>R</strong>eact.js et <strong>N</strong>ode.js.</li></ul><p>Quand à <strong>Jam</strong>, c’est l’acronyme de : </p><ul><li><strong>J</strong> pour <strong>Javascript</strong>, le langage de programmation utilisé côté client et serveur.</li><li><strong>A</strong> pour <strong>Api</strong>, l’interface de programmation côté client et serveur.</li><li><strong>M</strong> pour <strong>Makeup</strong>, la création de la vue en HTML.</li></ul><p><strong>Le JamStack est donc un système de développemement de pages HTML grâce au JavaScript et à une ou plusieurs API.</strong></p><p>Concrètement comment tout cela va-t-il se mettre en place ?</p><ul><li>Tout d’abord les pages de contenus sont créées en local, sur l’ordinateur. En général, la mise en forme se fait en MarkDown.</li><li>Un générateur de contenu statique va se charger de la génération du site statique et permet aussi de visualiser les “brouillons” sur un serveur local.</li><li>Enfin, le site pourra être uploadé sur un serveur ou beaucoup mieux mis à jour grâce à Git, github et l’API d’un site d’hébergement spécialisé dans les sites statiques.</li></ul><p>Nous verrons dans la partie 3 et 4, toutes les étapes de la création jusqu’à l’hébergement sur <strong>Netlify</strong> par exemple, pour que vous puissiez construire.</p><h2 id="2-Pourquoi-creer-un-site-statique"><a href="#2-Pourquoi-creer-un-site-statique" class="headerlink" title="2. Pourquoi créer un site statique ?"></a>2. Pourquoi créer un site statique ?</h2><p>Pourquoi passer un site en statique alors que mon blog WordPress me satisfaisait pleinement ?</p><p>Il y a quatre raisons qui m’ont motivé à passer mes blogs WordPress en sites statiques :</p><ul><li>La première raison et qui n’est pas la moindre, c’est le prix. Depuis quelques années le prix des hébergements avec base de données et PHP n’a cessé d’augmenter. C’était devenu un gouffre financier.<br>Initialement j’étais sur 1and1 qui est devenu Ionos et là, les problèmes ont commencé. Les modalités du contrat étaient changées sans mon accord, des options inutiles m’étaient imposées, bref les méthodes de marketting d’Ionos ne me plaisaient pas du tout et cela commençait à me coûter très cher.<br>Ce petit règlement de compte avec mon ancien usurier étant fait, voyons la raison suivante.</li><li>La secondes raison, est la rapidité. Les sites statiques délivrant directement des pages HTML et on ne peut pas faire plus rapide en terme temps de chargement de page. Et la vitesse de chargement s’avère un point crucial du référencement et de l’UX , l’expérience utilisateur.</li><li>La troisième raison de ce changement est la simplicité de mise en place, d’utilisation et de mise à jour. Le site est directement accessible sur l’ordinateur ou sur une clé USB. Il faut se faire à la syntaxe MarkDown, mais une fois ce petit cap franchi, la rédaction se trouve même simplifiée, notamment pour la coloration syntaxique des codes informatiques.</li><li>La quatrième raison est la sécurité. Le site étant statique, il ne peut pas être corrompu par un utilisateur malveillant. Seule une attaque sur l’hébergeur, qui a priori est plus solide que vous, est possible. Si cela venait à se produire, vous aurez toujours un double dde votre site en local et la réinstallation est un jeu d’enfant.</li></ul><p>Dans ce monde idyllique, il existe aussi des points négatifs. Comme le dirait Lapalisse, un site statique est statique et donc pas dynamique. Il n’est donc pas possible, a priori d’interagir avec les utilisateurs grâce aux commentaires ou de faire un site de e-commerce.<br>Cette vision est un peu réductrice, car on peut toujours déléguer certaines fonctionnalités dynamiques à des opérateurs extérieurs.<br>Par exemples :</p><ul><li>Pour les commentaires, on peut par exemple déléguer cette tâches à “Disqus”, un site permettant d’intégrer des commentaires sur n’importe quel site. Disqus propose une offre de démarrage gratuite.</li><li>Pour le e-commerce, il existe de nombreux sytstèmes comme “click-Funnel”. Ce site est déjà très utilisés par les Webmarketteurs qui pourtant sont sur Worpress. Tant qu’à payer des outils externes, autant ne pas payer les options inutiles de l’hébergement.</li></ul><p>Je sens que je vous ai convaincu, si bien sûr vous avez eu le courage de me lire jusqu’ici.<br>Mais alors comment passer mes sites en statiques ?</p><h1 id="3-Comment-creer-un-site-statique"><a href="#3-Comment-creer-un-site-statique" class="headerlink" title="3. Comment créer un site statique ?"></a>3. Comment créer un site statique ?</h1><p>Pour créer un site statique, il existe plusieurs solutions de générateurs dépendanr du langage utilisés.<br>Le premier générateur de site statique était écrit en Ruby (une communauté toujours très innovante). C’est donc le plus populaire mais depuis d’autres solutions peut-être plus performantes ou plus accessibles sont apparues écrites dans divers langages Golang, React.js, Vue.js, python, etc…</p><p>Ce choix est important si vous souhaitez modifier un thème prédéfini ou créer le votre. Selon vos connaissances du langage ou de l’environnement, les modifications seront plus ou moins simple à réaliser. Il faut savoir aussi que certains générateurs proposent de très nombreux thèmes qu’il suffit de configurer d’autres en proposent peu ou pas et c’est à vous de mettre les mains dans le cambouis.</p><p>Voici une liste non exaustives de quelques générateurs :</p><ul><li><strong><a href="https://jekyllrb.com/">Jekyll</a></strong> : écrit en ruby avec de nombreux thèmes tous près. Assez rapide lors de la génération. Très populaire. </li><li><strong><a href="https://gohugo.io/">Hugo</a></strong> : écrit en Golang, le langage de google. De nombreux thèmes. Le plus rapide des générateurs. Devenu très populaire.</li><li><strong><a href="https://www.11ty.dev/">Eleventy</a></strong> : nouveau venu qui monte, écrit en JavaScript et node. Il faut se l’approprier.</li><li><strong><a href="https://gridsome.org/">Gridsome</a></strong> : un générateur écrit en Vue.js.</li><li><strong><a href="https://hexo.io/">Hexo</a></strong> : écrit en Javascript. Rapide. De nombreux thèmes simples d’emploi.</li><li><strong><a href="https://www.gatsbyjs.com/">Gatsby</a></strong> : un générateur en réact.js. Le générateur est maintenant intégré à un système d’hébergement.</li><li><strong><a href="https://nextjs.org/">Next.js</a></strong> : un framework de ReactJs qui permet de faire de la génération de pages statiques. Très intéressant pour le référencement des applications Web écrites en RéactJs. Ce framework est conçu pour un hébergement sur Vercel</li><li><strong><a href="https://getpelican.com/">Pelican</a></strong> : Un générateur pour les utilsateurs de python. Il y a peu de thèmes, mais les possibilités sont nombreuses.</li></ul><p>La mise en place se fait de la manière suivante :</p><ul><li>Après avoir fait votre choix, il faut installer le générateur de site (souvent avec npm ou yarn) et créer un site.</li><li>Ensuite on choisit un thème, on l’installe et on e configure. Vous pouvez bien sûr créer le thème vous même, mais ceal prendra plus de temps et demandera des compétences en la matière.</li><li>Il faut ensuite générer votre contenu. Certains modules permettent de tranfsformer la base de données d’un site Wordpress directement en fichier statiques utilisables par votre générateur de site. Cette méthode de conversion marche pas mal, mais il faudra néanmoins retoucher tous les liens des images pour qu’ils soient valides. Il est aussi possible de se servir de wordpress comme site <strong>headless</strong>, la vue étant générée séparément.</li><li>Le site peut ensuite être générer directement sur votre ordinateur puis chargé sur le serveur, mais ce n’est peut-être pas la meilleur manière de procéder. Il est préférable d’utiliser l’API d’un site dédié à l’hébergement de sites statiques comme Netlify. Le principe est de créer un repository sur github et de lier son compte à github au site d’hébergement. Grâce à git on crée un “commit” puis on “push” sur le répository de github et le site se met automatiquement à jour, grâce à l’API entre github et le site d’hébergement.</li></ul><p>Si ce que je vous raconte ne vous parle pas, sachez que ce n’est pas compliqué du tout. Je ferai un tutoriel sur ce sujet dans un prochain article. Pour les utilisateurs de git, ça doit leur parler.</p><p>Voici une série d’hébergeurs de sites spécialisés dans l’hébergement statique :</p><ul><li><strong><a href="https://www.netlify.com/">Netlify</a></strong> : le pionnier et le plus populaire. Vraiment top.</li><li><strong><a href="https://pages.cloudflare.com/">cloudflare</a></strong> : un nouveau venu dans le domaine qui promet beaucoup.</li><li><strong><a href="https://vercel.com/">Vercel</a></strong> : créé à la base pour NextJs, mais peut servir à d’autres hébergements</li><li><strong><a href="https://firebase.google.com/">Firebase</a></strong> : même si ce n’est pas sa fonction première, Firebase permet l’hébergement statique avec une API ad hoc.</li></ul><h1 id="4-Mes-choix-pour-la-generation-de-sites-statiques"><a href="#4-Mes-choix-pour-la-generation-de-sites-statiques" class="headerlink" title="4. Mes choix pour la génération de sites statiques."></a>4. Mes choix pour la génération de sites statiques.</h1><p>Lorsque j’ai décidé de passer en statique, je voulais aller pour passer de wordpress au statique. J’ai donc fait de nombreux tests et essais.<br>Dans un premier temps, j’avais opté pour Hugo, rapide avec de nombreux thèmes, mais les modifications sur les thèmes étaient trop obscurs pour moi.<br>J’ai finalement choisi <strong>Hexo</strong>. Ce générateur fonctionne bien, est simple et rapide, et propose de nombreux thèmes, qui grâce aux informations du webdesigner son facile à configurer.<br>Voilà déjà de nombreux mois que je l’utilise et j’en suis très content.<br>Pour l’hébergement, je suis sur <strong>Netlify</strong>. Très simple d’utilisation. Avevec la mise à jour via git et github, c’est le top.<br>Je vous partagerai mon expérience dans d’autres articles à venir, dans lesquels je rentrerai davantage dans la pratique, mais l’article est déjà assez long comme cela.</p><p>A bientôt.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Depuis de nombreuses années, j’utilisais wordpress pour publier du contenu sur internet.&lt;br&gt;J’ai découvert il y a peu le JamStack et le p</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="sites statiques" scheme="https://outils-web.fr/tags/sites-statiques/"/>
    
    <category term="JamStack" scheme="https://outils-web.fr/tags/JamStack/"/>
    
    <category term="Netlify" scheme="https://outils-web.fr/tags/Netlify/"/>
    
  </entry>
  
  <entry>
    <title>Styliser des cartes et des toasts en CSS</title>
    <link href="https://outils-web.fr/styliser-des-cartes-et-des-toasts-en-css/"/>
    <id>https://outils-web.fr/styliser-des-cartes-et-des-toasts-en-css/</id>
    <published>2021-06-07T19:40:23.000Z</published>
    <updated>2022-11-28T09:09:23.987Z</updated>
    
    <content type="html"><![CDATA[<p>Vous avez envie de présenter des textes dans des cartes pour les enjoliver et les mettrer en valeur.<br>Cet article est fait pour vous. Grâce à CSS3 vous pourrez réaliser de jolis cadres stylisés si vous connaissez les bonnes propriétés.</p><img src="/uploads/2012/12/toast.jpg" width="300" height="200" /><h3 id="1-Creer-un-simple-cadre"><a href="#1-Creer-un-simple-cadre" class="headerlink" title="1. Créer un simple cadre."></a>1. Créer un simple cadre.</h3><p>Voici un petit bout de code qui dessinera le cadre suivant :</p><div style="width: 400px;        height:150px;        padding:5px;        border:1px solid #aaa;        background:#f9fafb;"        > Mon texte </div><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">150px</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">5px</span>;</span><br><span class="line"><span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#aaa</span>;</span><br><span class="line"><span class="attribute">background</span>:<span class="number">#f9fafb</span>;&quot;</span><br><span class="line">&gt; Mon texte &lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure><p>Détaillons un peu le code.<br><em><strong>width:200px;</strong></em> et <em><strong>height:120px;</strong></em> fixent les dimensions du cadre.<br><em><strong>padding-top: 5%;</strong></em> fixe les marges intérieures du cadre.<br><em><strong>border: 3px solid #A0A0A0;</strong></em> la bordure sera de 3 pixels d’épaisseur, continue et de couleur hexadécimale #287973<br><em><strong>background:#E4F5F4</strong>;</em> fixe la couleur de fond du cadre</p><h3 id="2-Arrondir-les-angles"><a href="#2-Arrondir-les-angles" class="headerlink" title="2. Arrondir les angles."></a>2. Arrondir les angles.</h3><p>Dans la vie il faut souvent arrondir la angles. :) En css, c’est possible également.<br>L’arrondi des coins n’est pas supporté par les anciens navigateurs, donc il ne faut pas trop compter dessus pour enjoliver le cadre. Pour avoir les coins arrondis, il faut ajouter dans la déclaration des styles <em>border-radius: 10px;</em> 10px correspond au rayon des arrondis<br>La propiété css <em><strong>border-radius</strong></em> le permet également. Ce qui donne :</p><div style="width: 400px;        height:150px;        padding:5px;        border:1px solid #aaa;        background:#f9fafb;        border-radius:4px;"        > Mon texte </div><p>Par exemple, avec ce code :</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">150px</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">5px</span>;</span><br><span class="line"><span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#aaa</span>;</span><br><span class="line"><span class="attribute">background</span>:<span class="number">#f9fafb</span>;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">4px</span>;&quot;</span><br><span class="line">&gt; Mon texte &lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure><h3 id="3-Ajouter-une-ombre"><a href="#3-Ajouter-une-ombre" class="headerlink" title="3. Ajouter une ombre."></a>3. Ajouter une ombre.</h3><p>On peut ajouter une petite ombre pour enjoliver notre petit cadre.</p><div style="width: 400px;        height:150px;        padding:5px;        background:#f9fafb;        border: 1px solid #aaa;        border-radius: 4px;        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);"        > Mon texte </div><p>On peut ajouter cette ombre avec le code, suivant :</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">180px</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">5px</span>;</span><br><span class="line"><span class="attribute">background</span>:<span class="number">#f9fafb</span>;</span><br><span class="line"><span class="attribute">border</span>:<span class="number">10px</span> solid <span class="number">#aaa</span>;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">4px</span>;</span><br><span class="line"><span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">8px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.1</span>);&quot;</span><br><span class="line">&gt; Mon texte &lt;/<span class="selector-tag">div</span>&gt;</span><br></pre></td></tr></table></figure><p>Les quatre valeurs de box-shadow correspondent aux attributs suivants :<br>offset-x | offset-y | blur-radius | spread-radius | color<br>Ici le spread-radius n’est pas renseigné.</p><h3 id="4-Ajouter-du-contenu"><a href="#4-Ajouter-du-contenu" class="headerlink" title="4. Ajouter du contenu."></a>4. Ajouter du contenu.</h3><p>Enfin, on ajoute un peu de contenu, comme dans le cadre ci-dessous :</p><div style="width: 400px;        height:150px;        padding:5px;        background:#f9fafb;        border: 1px solid #aaa;        border-radius: 4px;        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);padding:0;position:relative;"> <img src="/img/chat2.jpg" style="width:50%;height: 100%;margin-left:0px;"/><div style="width:50%;height:100%;position:absolute;top: 0px;left:50%;padding: 0px 10px;line-height: 2.5px;">    <p> Nom : Le Chat 🐱</p>     <p> Prénom : A lunettes</p>    <p> Age : Oui</p>    <p> Sexe : Rose</p></div></div><p>Voici le code de l’exemple :</p><div ><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">150px</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">5px</span>;</span><br><span class="line"><span class="attribute">background</span>:<span class="number">#f9fafb</span>;</span><br><span class="line"><span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#aaa</span>;</span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">4px</span>;</span><br><span class="line"><span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">8px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.1</span>);</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">position</span>:relative;&quot;&gt; </span><br><span class="line">&lt;<span class="selector-tag">img</span> <span class="attribute">src</span>=&quot;/<span class="selector-tag">img</span>/chat<span class="selector-class">.jpg</span>&quot; style=&quot;<span class="attribute">width</span>:<span class="number">50%</span>;</span><br><span class="line"><span class="attribute">height</span>:<span class="number">100%</span>;<span class="attribute">margin-left</span>:<span class="number">0px</span>;&quot;/&gt;</span><br><span class="line">&lt;<span class="selector-tag">div</span> style=&quot;<span class="attribute">width</span>:<span class="number">50%</span>;<span class="attribute">height</span>:<span class="number">100%</span>;<span class="attribute">position</span>:absolute;</span><br><span class="line"><span class="attribute">top</span>: <span class="number">0px</span>; <span class="attribute">left</span>:<span class="number">50%</span>;<span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">10px</span>;<span class="attribute">line-height</span>: <span class="number">2.5px</span>;&quot;&gt;</span><br><span class="line">&lt;<span class="selector-tag">p</span>&gt; Nom : Le Chat 🐱&lt;/p&gt; </span><br><span class="line">&lt;p&gt; Prénom : A lunettes&lt;/p&gt;</span><br><span class="line">&lt;p&gt; Age : Oui&lt;/p&gt;</span><br><span class="line">&lt;p&gt; Sexe : Rose&lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure></div><p>La <em>div</em> est en position <em>relative</em>, et le texte en <em>absolute</em> pour pouvoir positionner le texte par rapport à la <em>div</em>.</p><p> On pourrait aussi placer l’image en background de la <em>div</em>, ce serait d’ailleurs plus juditieux. On peut toujours améliorer le contenu, mais amintenant, c’est à vous de jouer …</p><h3 id="5-Conclusion"><a href="#5-Conclusion" class="headerlink" title="5. Conclusion."></a>5. Conclusion.</h3><p> Comme vous avez pu le constater, créer un composant de type carte n’est pas très compliqué.<br> Si vous pensez que vous ne possédez pas les compétences pour ce genre de cartes, vous pouvez toujours vous tourner vers <a href="/2014/02/15/les-meilleurs-frameworks-css-pour-creer-un-site-web-professionnel/">les frameworks CSS.</a><br> Néanmoins, le problème ne sera que repousser, il faudra apprendre le framework, qui lui même est conçu en css.</p><p> J’espère que cet article vous aura aidé. N’hésitez pas à le partager.</p><p> A bientôt sur Outils Web.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Vous avez envie de présenter des textes dans des cartes pour les enjoliver et les mettrer en valeur.&lt;br&gt;Cet article est fait pour vous. G</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="css" scheme="https://outils-web.fr/tags/css/"/>
    
    <category term="css3" scheme="https://outils-web.fr/tags/css3/"/>
    
    <category term="carte css" scheme="https://outils-web.fr/tags/carte-css/"/>
    
    <category term="toast css" scheme="https://outils-web.fr/tags/toast-css/"/>
    
    <category term="cadre css" scheme="https://outils-web.fr/tags/cadre-css/"/>
    
    <category term="border-radius" scheme="https://outils-web.fr/tags/border-radius/"/>
    
  </entry>
  
  <entry>
    <title>Convertir et traiter tous vos PDF : les meilleurs sites</title>
    <link href="https://outils-web.fr/convertir-et-traiter-tous-vos-pdf-les-meilleurs-sites/"/>
    <id>https://outils-web.fr/convertir-et-traiter-tous-vos-pdf-les-meilleurs-sites/</id>
    <published>2018-10-26T20:06:52.000Z</published>
    <updated>2022-06-10T17:35:04.798Z</updated>
    
    <content type="html"><![CDATA[<p>Les PDF sont très pratiques pour partager des documents sans problèmes de compatibilités. Les choses se compliquent lorsqu’on souhaite convertir un PDF en document Word (doc ou docx). En effet, s’il est facile d’enregistrer un document au format PDF à partir de Word, l’opération inverse, PDF vers doc ou docx n’est pas possible depuis le traitement de texte.</p><p><strong>Dans cet article, vous trouverez tout ce dont vous avez besoin pour convertir vos PDF en fichiers Word (doc docx), excel (xls xlsx), powerpoint (ppt pptx) et bien d’autres options.</strong> </p><img src="/uploads/2018/10/pdf.png" width="400" height="300"/> <p>D’autre possibilités sont offertes pour vos PDF,  comme :</p><ul><li>fusionner ou découper des PDF</li><li>compresser un PDF</li><li>numéroter les pages</li><li>faire tourner</li><li>déverrouiller</li><li>…</li></ul><p>Bon je vous ai fait suffisamment attendre.<br>Voici les deux sites qui vont changer votre vie avec les PDF : </p><ul><li><p><a href="https://www.ilovepdf.com/fr">I LOVE PDF</a> (The BEST)</p></li><li><p><a href="https://smallpdf.com/fr">SMALL PDF </a></p></li></ul><p>J’espère que cette petite info vous a intéressée. N’hésitez pas à faire tourner.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Les PDF sont très pratiques pour partager des documents sans problèmes de compatibilités. Les choses se compliquent lorsqu’on souhaite co</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
  </entry>
  
  <entry>
    <title>Deep Learning : créez vos images psychédéliques</title>
    <link href="https://outils-web.fr/deep-learning-creez-vos-images-psychedeliques/"/>
    <id>https://outils-web.fr/deep-learning-creez-vos-images-psychedeliques/</id>
    <published>2017-07-15T19:36:23.000Z</published>
    <updated>2022-06-13T22:31:43.310Z</updated>
    
    <content type="html"><![CDATA[<h2 id="L’intelligence-artificielle-avance-a-grand-pas-grace-au-Deep-Learning"><a href="#L’intelligence-artificielle-avance-a-grand-pas-grace-au-Deep-Learning" class="headerlink" title="L’intelligence artificielle avance à grand pas, grâce au Deep-Learning !"></a>L’intelligence artificielle avance à grand pas, grâce au Deep-Learning !</h2><img src="/uploads/2017/04/neurones-deep-learning-500.jpg" /><h3 id="Qu’est-ce-que-le-deep-learning"><a href="#Qu’est-ce-que-le-deep-learning" class="headerlink" title="Qu’est-ce que le deep-learning ?"></a>Qu’est-ce que le deep-learning ?</h3><p>Le deep Learning ou apprentissage profond, est une technique d’intelligence artificielle perfectionnée dans les années 2010.  Dans les systèmes d’intelligence artificielle basés sur les réseaux neuronaux artificiels, une limite semblait infranchissable en matière de nombre de neurones et d’apprentissage. En gros, pour imiter le cerveau humain, on a créé des réseaux neuronaux artificiels. Ne vous emballez pas, il s’agissait de quelques neurones sur 2 ou 3 couches se battant en duel. Après une période d’apprentissage, ces neurones avaient un comportement “intelligent” et étaient capables de prendre des décisions.</p><p>Pendant de nombreuses années, le nombre de neurones dans les réseaux neuronaux étaient limités par l’apprentissage. Mais, un français, Yann Le Cun, qui travaillait dans “l’ombre” sur es réseaux complexes, réussi en 2012 à battre tous les autres algorithmes de reconnaissance d’image lors d’un concours, grâce à un algorithme de deep learning. Depuis cet exploit, tous les grands du net et d’ailleurs, comme Google, Facebook ou Amazon se sont lancés dans le deep Learning, l’apprentissage profond des réseaux complexes.</p><p>D’ailleurs, vous et moi expérimentons chaque jour ces algorithmes de deep learning, chaque fois que nous surfons sur internet. Les suggestions de vidéos You Tube, les suggestions de publications Facebook ou les articles proposés par Amazon sont obtenus à partir de votre historique par des algorithmes de ce type là. Vous comprenez l’importance de ces algorithmes pour ces sociétés pour coller à vos envies et vos besoins. Ok, mais concrètement, comment je pourrais voir le résultat d’un algorithme de deep learing ?</p><h3 id="Le-generateur-de-reve-de-google"><a href="#Le-generateur-de-reve-de-google" class="headerlink" title="Le générateur de rêve de google."></a>Le générateur de rêve de google.</h3><p>Vous connaissez déjà les nombreuses <a href="https://outils-web.fr/google-comme-vous-ne-lavez-jamais-vu/">applications ludiques de Google</a>. Mais vous ne connaissez peut-être pas l’algorithme de deep learning ludique de reconnaissance d’image de Google. Celui-ci fonctionne un peu à l’inverse de la reconnaissance d’image. L’utilisateur propose une image à cet algorithme et celui-ci retranscrit sa perception de l’image tel qu’il la “voit” ou tel qu’il la “rêve” et lui applique des transformations.</p><p>L’algorithme en question se trouve sur le site <a href="https://deepdreamgenerator.com/"><strong>DEEP DREAM GENERATOR.</strong></a> Ce système de deep learning est gratuit et grand public. Il crée des images psychédéliques, comme si l’ordinateur rêvait. Je me suis amusé à l’utiliser. Voici 2 résultats.</p><p><strong>Exemple 1</strong> </p><img src="/uploads/2017/07/dream_2.jpg" /> <p><strong>Exemple 2</strong></p><img src="/uploads/2017/07/dream_1.jpg" /><p>Sur deep dream generator, vous trouverez d’autres images rêvées, créées par les utilisateurs, toutes plus belles les unes que les autres. Mais surtout, vous allez pouvoir vous lancer dans l’art psychédélique et épater la galerie.</p><p>Cet article vous a plu, alors n’hésitez pas à visiter d’autres pages.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;h2 id=&quot;L’intelligence-artificielle-avance-a-grand-pas-grace-au-Deep-Learning&quot;&gt;&lt;a href=&quot;#L’intelligence-artificielle-avance-a-grand-pas-grac</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="deep dream generator" scheme="https://outils-web.fr/tags/deep-dream-generator/"/>
    
    <category term="deep learning" scheme="https://outils-web.fr/tags/deep-learning/"/>
    
    <category term="images deep learning" scheme="https://outils-web.fr/tags/images-deep-learning/"/>
    
    <category term="images rêvées" scheme="https://outils-web.fr/tags/images-revees/"/>
    
  </entry>
  
  <entry>
    <title>Piskel : Créez des sprites animés professionnels en ligne</title>
    <link href="https://outils-web.fr/piskel-creez-des-sprites-animes-professionnels-en-ligne/"/>
    <id>https://outils-web.fr/piskel-creez-des-sprites-animes-professionnels-en-ligne/</id>
    <published>2016-12-21T14:02:20.000Z</published>
    <updated>2022-06-13T22:38:02.105Z</updated>
    
    <content type="html"><![CDATA[<p>Si vous voulez créer des <strong>sprites en pixel art</strong> pour vos jeux. Des <strong>sprites animés</strong> professionnels comme on en trouve dans Mario ou Zelda, alors le site que je vous propose va vous éblouir.</p><p>Habituellement, pour créer des sprites, il faut un logiciel de création de pixel art souvent cher ou alors gratuit, mais avec peu de fonctionnalités. Alors, si je vous dis qu’il existe des applications de pixel art en ligne, vous allez penser qu’il s’agit d’un outil peu performant pour les amateurs.</p><p>Et bien non. <strong><a href="https://www.piskelapp.com/">PisKel</a></strong> offre une palette d’Outils graphiques étonnants : calques (layers), outils de dessins, vitesse d’affichage des frames, transparence, etc.</p><img src="/uploads/2016/12/piskel-500-300x300.jpg" /><p>Avec <strong><a href="https://www.piskelapp.com/">PisKel</a></strong>, les résultats sont vraiment bluffants.</p><p>Il est inutile d’apprendre avec un long tuto pour pour maîtriser piskel. Si vous avez l’habitude des <a href="https://outils-web.fr/5-logiciels-de-dessin-gratuits/">logiciels de dessins</a>, vous vous approprierez très vite ce logiciel en ligne.</p><p>A présent, la seule différence entre vos sprites et les sprites des professionnels ne tiendra plus que dans le talent.</p><p>J’espère que cette application de pixel art vous aura autant séduite que moi. Si c’est le cas, n’hésitez pas à partager cet article ou a laisser un petit commentaire, avec peut-être vos créations.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Si vous voulez créer des &lt;strong&gt;sprites en pixel art&lt;/strong&gt; pour vos jeux. Des &lt;strong&gt;sprites animés&lt;/strong&gt; professionnels comme on</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="création sprite" scheme="https://outils-web.fr/tags/creation-sprite/"/>
    
    <category term="création sprite animé" scheme="https://outils-web.fr/tags/creation-sprite-anime/"/>
    
    <category term="création sprite animé en ligne" scheme="https://outils-web.fr/tags/creation-sprite-anime-en-ligne/"/>
    
    <category term="sprite" scheme="https://outils-web.fr/tags/sprite/"/>
    
    <category term="sprite en ligne" scheme="https://outils-web.fr/tags/sprite-en-ligne/"/>
    
  </entry>
  
  <entry>
    <title>Les logiciels portables : la solution pour votre ordinateur</title>
    <link href="https://outils-web.fr/les-logiciels-portables-la-solution-pour-votre-ordinateur/"/>
    <id>https://outils-web.fr/les-logiciels-portables-la-solution-pour-votre-ordinateur/</id>
    <published>2016-10-29T14:59:09.000Z</published>
    <updated>2022-06-13T22:36:11.845Z</updated>
    
    <content type="html"><![CDATA[<h3 id="Savez-vous-pourquoi-votre-ordinateur-est-lent"><a href="#Savez-vous-pourquoi-votre-ordinateur-est-lent" class="headerlink" title="Savez-vous pourquoi votre ordinateur est lent ?"></a>Savez-vous pourquoi votre ordinateur est lent ?</h3><p>Ce sont essentiellement les logiciels installés puis désinstallés. Chaque fois que vous désinstallez une application, elle laisse des fichiers sur votre ordinateur, comme des bibliothèques dll.<br>A la longue, ces fichiers parfois inutiles, ralentissent votre ordinateur au démarrage et lors de sont fonctionnement.<br>L’encombrement du disque dur est aussi une cause de lenteur. Lorsque le disque est trop rempli, le système d’exploitation finit par être dépassé et votre ordinateur devient poussif. Un autre problème avec l’installation de logiciels d’origine parfois inconnues est lié à la sécurité. Lors de l’installation d’une application, d’autres logiciels telles que des virus ou des malwares peuvent être installés à votre insu. Ou parfois, si vous ne décochez pas la petite case bien cachée lors du processus d’installation, un autre logiciel non demandé s’installe à son tour sur votre ordinateur. Ce logiciel ce rappelant à votre mauvais souvenir par des messages intempestifs et autres pop-up.<br><img src="/uploads/2016/10/logiciel-portable500-300x280.jpg" /><br>Si vous êtes comme moi et que vous souhaitez protéger votre ordinateur en installant le minimum de logiciels, voici la solution :<br><strong>les logiciels portables</strong>. Les logiciels portables sont identiques au logiciels originaux mais ont été modifiés pour fonctionner sur une clé USB. L’installation ne s’effectue plus sur votre disque dur, mais sur une mémoire flash d’une clé USB. De plus, une clé USB se transporte très facilement ce qui permet d’utiliser un logiciel portable sur de nombreux ordinateurs au bureau comme à la maison.</p><h3 id="Vous-aimeriez-telecharger-des-logiciels-portables"><a href="#Vous-aimeriez-telecharger-des-logiciels-portables" class="headerlink" title="Vous aimeriez télécharger des logiciels portables ?"></a>Vous aimeriez télécharger des logiciels portables ?</h3><p>Un des sites les plus connus et le plus côté en matière de logiciels portables est sans conteste <strong><a href="https://portableapps.com/apps">portableapps.com</a></strong> Vous trouverez des logiciels de dessin : Blender, Gimp, PhotoFiltre, XnView … des logiciels de développement : NotePad++, Geany, Xampp … des logiciels de gestion de sons : audcity, VLC … des logiciels e traitement de texte : Libre Office, Scribus et bien sûr des jeux. D’autres logiciels portables sont distribués séparément sur leur site dédié, c’est le cas de python potable, un indispensable pour les programmeurs python et les étudiants. L’ensemble comprend également de nombreuses librairies et éditeurs pour toutes les utilisations. J’espère que cet article aura répondu à vos attentes. N’hésitez pas à le partager ou à laisser un commentaire.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;h3 id=&quot;Savez-vous-pourquoi-votre-ordinateur-est-lent&quot;&gt;&lt;a href=&quot;#Savez-vous-pourquoi-votre-ordinateur-est-lent&quot; class=&quot;headerlink&quot; title=&quot;Sa</summary>
      
    
    
    
    <category term="Freewares" scheme="https://outils-web.fr/categories/Freewares/"/>
    
    
    <category term="application portable" scheme="https://outils-web.fr/tags/application-portable/"/>
    
    <category term="logiciel portable" scheme="https://outils-web.fr/tags/logiciel-portable/"/>
    
    <category term="télécharger logiciel portable" scheme="https://outils-web.fr/tags/telecharger-logiciel-portable/"/>
    
  </entry>
  
  <entry>
    <title>Des tooltips ou info-bulles en css3 : 3 méthodes simples</title>
    <link href="https://outils-web.fr/des-tooltips-info-bulles-en-css3-3-methodes-simples/"/>
    <id>https://outils-web.fr/des-tooltips-info-bulles-en-css3-3-methodes-simples/</id>
    <published>2016-01-03T13:49:10.000Z</published>
    <updated>2022-06-13T22:31:43.405Z</updated>
    
    <content type="html"><![CDATA[<p>Les Tooltips ou info-bulles sont de petites bulles informatives qui apparaissent au passage de la souris sur des liens ou des images.<br>En plus d’être très esthétiques, les tooltips sont aussi utiles pour informer l’utilisateur sans surcharger la page de texte informatif. Il existe une multitude de techniques pour réaliser des info-bulles, certaines utilisant JavaScript ou d’autres méthodes plus ou moins complexes. Dans cet article, nous nous concentrerons sur des tooltips réalisés uniquement en CSS3.</p><p><strong>Sommaire :</strong></p><p>1. Utilisation de l’attribut “title” dans le lien.</p><p>2. Utilisation d’une balise “span”.(le plus simple)</p><p>3. D’autres méthodes toutes faites.</p><img src="/uploads/2016/01/bulles.jpg" /><h2 id="1-Utilisation-de-l’attribut-“title”-dans-le-lien"><a href="#1-Utilisation-de-l’attribut-“title”-dans-le-lien" class="headerlink" title="1. Utilisation de l’attribut “title” dans le lien."></a>1. Utilisation de l’attribut “title” dans le lien.</h2><p>La première idée qui vient à l’esprit pour créer une infobulle est d’utiliser l’attribut title des balises &lt;a&gt; ou &lt;img &#x2F;&gt;.<br>Prenons l’exemple ci-dessous :</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">title</span>=<span class="string">&quot;Exemple de tooltips&quot;</span>&gt;</span>Info-bulle <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p><a title="Exemple de tooltips">Info-bulle</a></p><p>L’infobulle qui apparaît au passage de la souris est très simple, mais aussi très moche. On est donc tenté de d’utiliser la pseudo-classe hover, pour styliser l’attribut « titre ». </p><p>On peut modifier l’attribut “title” de la balise &lt;a&gt; au survol avec le code suivant :</p><p>Code HTML</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span> <span class="attr">title</span>=<span class="string">&quot;L&#x27;info-bulle + son double&quot;</span> <span class="attr">class</span>=<span class="string">&quot;tooltip&quot;</span>&gt;</span>Tooltip stylisé avec CSS3 + infobulle par défaut<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>CODE CSS3</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.tooltip</span>&#123;</span><br><span class="line"><span class="attribute">display</span>: inline;</span><br><span class="line"><span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tooltip</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:after</span>&#123;</span><br><span class="line"><span class="attribute">background</span>: <span class="number">#333</span>;</span><br><span class="line"><span class="attribute">background</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">8</span>);</span><br><span class="line"><span class="attribute">border-radius</span>: <span class="number">5px</span>;</span><br><span class="line"><span class="attribute">bottom</span>: <span class="number">26px</span>;</span><br><span class="line"><span class="attribute">color</span>: <span class="number">#fff</span>;</span><br><span class="line"><span class="attribute">content</span>: <span class="built_in">attr</span>(title);</span><br><span class="line"><span class="attribute">left</span>: <span class="number">20%</span>;</span><br><span class="line"><span class="attribute">padding</span>: <span class="number">5px</span> <span class="number">15px</span>;</span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">z-index</span>: <span class="number">98</span>;</span><br><span class="line"><span class="attribute">width</span>: <span class="number">220px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.tooltip</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">:before</span>&#123;</span><br><span class="line"><span class="attribute">border</span>: solid;</span><br><span class="line"><span class="attribute">border-color</span>: <span class="number">#333</span> transparent;</span><br><span class="line"><span class="attribute">border-width</span>: <span class="number">6px</span> <span class="number">6px</span> <span class="number">0</span> <span class="number">6px</span>;</span><br><span class="line"><span class="attribute">bottom</span>: <span class="number">20px</span>;</span><br><span class="line"><span class="attribute">content</span>: <span class="string">&quot;&quot;</span>;</span><br><span class="line"><span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">z-index</span>: <span class="number">99</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>Le résultat est le suivant :</p><p><a href="" title="L'info-bulle avec son double" class="tooltip-class">Tooltip stylisé avec CSS3 avec infobulle par défaut</a>  </p><p> Le problème de cette méthode, c’est que l’info-bulle de base s’affiche en même temps que l’info-bulle que l’on vient de créer.<br> Pour faire disparaître cette infobulle disgracieuse supplémentaire, il faut utiliser un second attibut “title”, par exemple dans une balise <em>span</em>, mais celui-ci sera vide.<br> Voici les nouvelles balises HTML à utiliser : </p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">&quot;&quot;</span> title=<span class="string">&quot;L&#x27;info-bulle finale&quot;</span> <span class="keyword">class</span>=<span class="string">&quot;tooltip&quot;</span>&gt;<span class="language-xml"><span class="tag">&lt;<span class="name">span</span> <span class="attr">title</span>=<span class="string">&quot;&quot;</span>&gt;</span>Tooltip CSS3 final<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span>&lt;/a&gt;</span><br></pre></td></tr></table></figure><h5 id="Voici-le-resultat-final"><a href="#Voici-le-resultat-final" class="headerlink" title="Voici le résultat final :"></a>Voici le résultat final :</h5><style>.tooltip-class{display: inline;position: relative;}.tooltip-class:hover:after{background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: 220px;}.tooltip-class:hover:before{border: solid;border-color: #333 transparent;border-width: 6px 6px 0 6px;bottom: 20px;content: "";left: 50%;position: absolute;z-index: 99;}</style><p><strong><a href="" title="L'info-bulle finale" class="tooltip-class"><span title="" >Tooltip CSS3 final</span></a></strong></p><h2 id="2-Utilisation-d’une-balise-“span”"><a href="#2-Utilisation-d’une-balise-“span”" class="headerlink" title="2. Utilisation d’une balise “span”."></a>2. Utilisation d’une balise “span”.</h2><p>La méthode est intéressante, mais on peut se poser la question de savoir s’il est intéressant d’utiliser l’attribut “title”, puisque par la suite, on cherche à l’éliminer avec une balise <em>span</em>. </p><p>La seconde idée sera donc de ne pas utiliser l’attribut “title”, mais de styliser directement une balise <em>span</em> dans le lien à infobulle.</p><p>Avec la propriété <em>display:none;</em> on cache la balise &lt;span&gt;, puis on la fait apparaître au passage sur le lien avec <em>a:hover span{ display:block; }</em>. </p><p>Voici le code du lien du tooltips : </p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Un tooltip gris<span class="tag">&lt;<span class="name">span</span>&gt;</span>Info-bulle gris<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Le code CSS3 pour faire apparaître et disparaître l’info-bulle <em>(à mettre entre les balises &lt;style&gt;&lt;&#x2F;style&gt;)</em> : </p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span> <span class="selector-tag">span</span>&#123;</span><br><span class="line"><span class="attribute">display</span>:none;</span><br><span class="line"><span class="attribute">color</span>:<span class="number">#fff</span>;</span><br><span class="line"><span class="attribute">background</span>:<span class="built_in">rgba</span>(<span class="number">51</span>,<span class="number">51</span>,<span class="number">51</span>,<span class="number">0.75</span>);</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">20px</span>;</span><br><span class="line"><span class="attribute">border-radius</span>:<span class="number">4px</span>;</span><br><span class="line">-moz-<span class="attribute">border-radius</span>:<span class="number">4px</span>;</span><br><span class="line">-webkit-<span class="attribute">border-radius</span>:<span class="number">4px</span>;</span><br><span class="line"><span class="attribute">width</span>:<span class="number">100px</span>;</span><br><span class="line"><span class="attribute">text-align</span>:center;</span><br><span class="line"><span class="attribute">position</span>: absolute;</span><br><span class="line"><span class="attribute">z-index</span>:<span class="number">10</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span> &#123; </span><br><span class="line"><span class="attribute">display</span>: inline-block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">span</span>&#123; </span><br><span class="line"><span class="attribute">display</span>:block; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><style>a span.second{    display:none;    color:#fff;    background:rgba(51,51,51,0.75);    padding:20px;    border-radius:4px;    -moz-border-radius:4px;    -webkit-border-radius:4px;    width:100px;    text-align:center;    position: absolute;    z-index:10;}a {     display: inline-block;}a:hover span.second{     display:block;     width: 150px;}</style><h5 id="Le-resultat-du-tooltip"><a href="#Le-resultat-du-tooltip" class="headerlink" title="Le résultat du tooltip"></a>Le résultat du tooltip</h5><p><a href="">Un tooltip gris<span class="second">Info-bulle gris</span></a></p><br/><br/>C'est étonnant de simplicité et d'efficacité. <p>Pour modifier la couleur, il suffit d’ajouter une classe à la balise &lt;span&gt; et de changer le background . </p><p>Voici un exemple avec un fond bleu : <br/></p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;&quot;</span>&gt;</span>Un tooltip bleu<span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;blue&quot;</span>&gt;</span>Info-bulle bleu<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure><p>Le CSS suivant doit être ajouté au codes css précédent : </p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span><span class="selector-class">.blue</span>&#123;</span><br><span class="line"><span class="attribute">background</span>:<span class="built_in">rgba</span>(<span class="number">41</span>,<span class="number">137</span>,<span class="number">216</span>, <span class="number">0.75</span>);</span><br><span class="line"><span class="attribute">border</span>:<span class="number">1px</span> solid <span class="number">#1E5799</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><style>a span.second{    display:none;    color:#fff;    background:rgba(51,51,51,0.75);    padding:20px;    border-radius:4px;    -moz-border-radius:4px;    -webkit-border-radius:4px;    width:100px;    text-align:center;    position: absolute;    z-index:10;}a {     display: inline-block;}a:hover span.second{     display:block;     width: 150px;}span.blue.second{    background:rgba(41,137,216, 0.75);    border:1px solid #1E5799;}</style><h5 id="Le-resultat-avec-un-tooltip-bleu"><a href="#Le-resultat-avec-un-tooltip-bleu" class="headerlink" title="Le résultat avec un tooltip bleu :"></a>Le résultat avec un tooltip bleu :</h5><p><a href="">Un tooltip bleu<span class="blue second">Info-bulle bleu</span></a><br><br/><br/></p><h2 id="3-D’autres-methodes-toutes-faites"><a href="#3-D’autres-methodes-toutes-faites" class="headerlink" title="3. D’autres méthodes toutes faites."></a>3. D’autres méthodes toutes faites.</h2><p>Il existe des méthodes simples, nécessitant moins de codes pour obtenir des info-bulles de compétition.</p><ul><li>Tout d’abord, le framework HTML et CSS <a href="https://v4-alpha.getbootstrap.com/components/tooltips/">Bootstrap</a> propose un ensemble de tooltips prédéfinis. Le seul problème vient de la taille des fichiers utilisés qui risquent de ralentir le chargement de votre page. Par ailleurs, vous aurez aussi besoin de jQuery pour que tout ceci fonctionne.</li><li><a href="https://kushagragour.in/lab/hint/">Hint-CSS</a> est une petite bibliothèque CSS qui donne simplement de jolies info-bulles sans  difficultés et avec de nombreuses options. A tester avant d’urgence.</li></ul>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Les Tooltips ou info-bulles sont de petites bulles informatives qui apparaissent au passage de la souris sur des liens ou des images.&lt;br&gt;</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="info-bulles en css" scheme="https://outils-web.fr/tags/info-bulles-en-css/"/>
    
    <category term="infobulle css" scheme="https://outils-web.fr/tags/infobulle-css/"/>
    
    <category term="infobulles" scheme="https://outils-web.fr/tags/infobulles/"/>
    
    <category term="tooltip css" scheme="https://outils-web.fr/tags/tooltip-css/"/>
    
    <category term="tootips" scheme="https://outils-web.fr/tags/tootips/"/>
    
  </entry>
  
  <entry>
    <title>7 conseils indispensables pour vos achats en ligne</title>
    <link href="https://outils-web.fr/7-conseils-indispensables-pour-vos-achats-en-ligne/"/>
    <id>https://outils-web.fr/7-conseils-indispensables-pour-vos-achats-en-ligne/</id>
    <published>2015-12-16T19:15:27.000Z</published>
    <updated>2022-06-03T12:12:37.918Z</updated>
    
    <content type="html"><![CDATA[<p>Noël approche et avec lui, ses nombreux cadeaux. Pendant cette période, la tentation de faire “clic - clic” sur les sites de ventes en ligne est grande et on comprend pourquoi.  Se noyer dans la foule qui envahit les magasins n’est pas pour tout le monde une partie de plaisir. Mais avant de vous lancer dans les achats compulsifs en ligne, quelques règles s’imposent. En voici 10, qui je l’espère vous aideront à cliquer en toute sérénité. </p><img src="/uploads/2015/12/credit-card-600.jpg" /> <h2 id="1-Ne-commandez-jamais-sur-des-sites-non-securises"><a href="#1-Ne-commandez-jamais-sur-des-sites-non-securises" class="headerlink" title="1- Ne commandez jamais sur des sites non sécurisés."></a>1- Ne commandez jamais sur des sites non sécurisés.</h2><p>Cette règle peut paraître évidente, mais de nombreuses personnes se font encore “avoir” en donnant leurs coordonnées bancaires sur des sites non sécurisés. Mais comment reconnaît-on un site sécurisé ? Pour reconnaître un site sécurisé, il faut vérifier que son adresse commence par <strong>https</strong> et non http. C’est le petit “s” qui fait toute la différence. En réalité, on devrait parler de sites cryptés plutôt que sécurisés, car dans une connexion https, les données sont cryptées, ce qui les rend inutilisables pour une personne qui tenterait de les intercepter illégalement. Souvent, un petit cadenas apparaît, mais là encore, il faut se méfier, car une image de cadenas sur la page ne signifie pas forcément qu’il est sécurisé.  </p><h2 id="2-Choisissez-le-bon-mode-de-paiement"><a href="#2-Choisissez-le-bon-mode-de-paiement" class="headerlink" title="2- Choisissez le bon mode de paiement."></a>2- Choisissez le bon mode de paiement.</h2><p>Lors de la finalisation de votre achat, tous les modes de paiement ne se valent pas. Les paiements par PayPal, sont simples et rapides, mais ce ne sont pas les plus sûres. Si vous utilisez un système de type PayPal, n’utilisez pas votre adresse mail principale. Moins votre adresse mail sera connue et moins il y aura de personnes tentées d’utiliser frauduleusement votre compte. Choisissez également un mot de passe en béton, si possible différent de celui que vous utilisez habituellement, avec des chiffres, lettres majuscules et minuscules. Essayez tout de même de vous en souvenir … PayPal peut aussi vous abonner à un prélèvement automatique mensuel, alors soyez vigilant et lisez bien ce que vous êtes entrain d’acheter. PayPal n’a pas que des mauvais côtés, en cas de litige, il offre une très bonne couverture et ne vous posera pas de problèmes, a priori, pour vous rembourser. Les cartes prépayées ou virtuelles proposées par certaines banques sont un moyen très sûr de paiement, mais hélas, trop peu de sites les acceptent sur internet. Le paiement direct en ligne, en passant par le système de paiement d’une banque est très sécurisé. La banque vous envoie souvent un code sur votre téléphone pour vérifier votre achat. La fraude est dans ce cas quasi impossible, mais certaines banques tarifient les transactions, ce qui renchérit le prix de vos achats en lignes. Enfin certains sites marchands, comme Amazon, conservent vos données bancaires. C’est par la suite très utile pour faire second achat, mais si le site se fait pirater, vos coordonnées bancaires risquent de tomber dans de mauvaises mains. Si on peut faire confiance à une grosse enseigne comme Amazon (quoi que…) il n’en est pas de même des petits sites qui n’ont pas les moyens d’assurer la sécurité des données. Cette façon de procéder est donc à réserver aux “gros sites”.  </p><h2 id="3-Donnez-seulement-les-informations-necessaires"><a href="#3-Donnez-seulement-les-informations-necessaires" class="headerlink" title="3- Donnez seulement les informations nécessaires."></a>3- Donnez seulement les informations nécessaires.</h2><p>Lors d’un paiement en ligne par carte bancaire, le site sera amener à vous demander votre <strong>numéro de carte</strong> bancaire, sa <strong>date d’expiration</strong>, le <strong>cryptogramme</strong> (3 derniers chiffres au dos) et éventuellement le <strong>nom</strong> du titulaire. Tout autre information relève de l’arnaque, en particulier, <strong>on ne doit jamais vous demander votre code secret</strong> à 4 chiffres que vous utilisez aux distributeurs de billets. Enfin, il faut savoir que les sites qui conservent vos coordonnées bancaires (c’est le cas d’Amazon), ne doivent jamais vous demander le cryptogramme.  </p><h2 id="4-Preferez-les-sites-francais-ou-europeens"><a href="#4-Preferez-les-sites-francais-ou-europeens" class="headerlink" title="4- Préférez les sites français ou européens."></a><strong>4- Préférez les sites français ou européens.</strong></h2><p>Ce n’est pas uniquement par préférence communautaire que je vous conseille d’acheter en France ou en Europe, car l’achat en dehors de la communauté européenne peut réserver de mauvaises surprises. Tout d’abord certaines extensions de domaines comme .ru ou . pl ont très mauvaises réputations. ça ne veut pas dire qu’il n’y a que des escrocs dans ces pays, mais il est vrai que certains pays de l’est renferment une communauté de pirates informatiques importante, donc méfiance. Il faut aussi compter en terme de transport. Plus un colis vient de loin et plus il a de chance de ne pas arriver et en plus ce n’est pas bon pour la planète :). Les produits commandés en Chine, à Taïwan ou Hong Kong sont souvent à des prix inégalables, mais ils n’arrivent pas toujours. Alors si vous commandez là-bas et que le colis arrive, tant mieux, sinon tant pis … Les frais de ports doivent aussi être pris en compte dans le coût de votre achat. La France n’est pas très compétitive en la matière et il est surprenant de constater que des objets venant de Chine ont des frais de ports, très en dessous du colissimo français, mais c’est peut-être aussi pour cela qu’ils n’arrivent pas toujours. La Grande Bretagne offre des services de livraison de colis très compétitif, quand à l’Allemagne est elle à peu près au niveau de la France, selon le type d’envoi. Enfin, des Pays comme les Etats-Unis d’Amériques ont des frais d’envoi très élevé et une douane particulièrement stricte. Les frais de ports sont alors élevé et le colis peut être retenu à la douane. Comme vous le constatez, le problème est complexe et il vaut mieux se restreindre à l’union européenne pour ses achats courants.  </p><h2 id="5-Scrutez-les-techniques-marketing-du-site"><a href="#5-Scrutez-les-techniques-marketing-du-site" class="headerlink" title="5- Scrutez les techniques marketing du site."></a>5- Scrutez les techniques marketing du site.</h2><p>Les techniques de ventes en ligne d’un site web vous donneront une idée générale sur l’honnêteté du vendeur. A force de parcourir internet, je me suis fait une opinion sur les différents commerces qui s’y pratiquent et leurs tenanciers. Et pour moi, il est évident que plus un site est commercialement agressif, moins on peut lui faire confiance. Plus il y des d’ombre dans sa démarche et plus il faut être vigilant. Par exemple, certains sites vous donnent avec votre panier les frais de ports. D’autres obligent le client à s’inscrire et ne donne les frais de ports qu’au moment de payer. Cette pratique contraint l’acheteur à donner beaucoup d’informations sur lui et le contraint presque à finaliser son achat, sinon il aura l’impression d’avoir fait tout ça pour “rien”. Ce sont des pratiques que je n’apprécient guère et j’évite ces sites. D’autres sites, cette fois vraiment malhonnête, vous inscrivent à un abonnement mensuel, lorsque vous payez avec PayPal. Vous pouvez vous retrouver débité d’une somme rondelette tous les mois, sans même vous en rendre compte. Alors croyez-moi, pour une bonne expérience de l’achat en ligne, choisissez les sites dont le marketing est raisonnable.  </p><h2 id="6-Comparez-les-prix"><a href="#6-Comparez-les-prix" class="headerlink" title="6- Comparez les prix."></a>6- Comparez les prix.</h2><p>Une des bases du commerce consiste à comparer les prix. Un prix barré n’est pas toujours synonyme de bonne affaire. Il est très facile pour un commerçant, en ligne ou pas, de gonfler ses prix pour proposer une réduction alléchante aux clients. Donc avant de cliquer, comparer les prix d’un même article sur différents sites. Les comparateurs de prix pourrait-être une solution, mais malheureusement, ils ne sont pas tous fiables et mettent en avant des liens sponsorisés… Finalement, pour bien acheter en ligne, il faudra quand même y consacrer un peu de temps.  </p><h2 id="7-Surveillez-son-compte"><a href="#7-Surveillez-son-compte" class="headerlink" title="7- Surveillez son compte."></a>7- Surveillez son compte.</h2><p>Si malgré toutes vos précautions, vous vous faites quand même pirater sur le web, rien n’est perdu. Commencez, par surveiller votre compte et repérez toutes les transactions suspectes, même les petites sommes qui n’éveillent pas a priori l’attention. Si vous pensez avoir été victime d’une fraude, faites immédiatement opposition. Tous les achats fait après l’opposition ne seront pas pris en compte et les fonds prélevés sur votre compte sont couverts à partir de 150 euros par votre banque. En pratique dès zéro euros, si vous n’avez pas été négligeant (si vous n’avez pas laissé traîné votre carte et que vous avez suivi les conseils ci dessus), vous serez remboursé par votre banquier. Des sites de paiements comme PayPal offrent aussi leurs propres garanties de remboursement en cas de fraude et plafonne les montants qui peuvent être prélevés.   Cette liste pour vous aider à faire vos achats en ligne est terminée. Pour conclure, je vous direz que pour ma part j’achète sur internet et je dors très bien la nuit. Ce n’est pas très rationnel, mais je pense qu’il ne faut pas être trop catastrophiste, cela attire les mauvaises choses. Alors faites-vous plaisir et joyeuses fêtes à tous.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Noël approche et avec lui, ses nombreux cadeaux. Pendant cette période, la tentation de faire “clic - clic” sur les sites de ventes en li</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="achat en ligne" scheme="https://outils-web.fr/tags/achat-en-ligne/"/>
    
    <category term="conseils achat en ligne" scheme="https://outils-web.fr/tags/conseils-achat-en-ligne/"/>
    
    <category term="secure online shopping" scheme="https://outils-web.fr/tags/secure-online-shopping/"/>
    
    <category term="sécurité achat en ligne" scheme="https://outils-web.fr/tags/securite-achat-en-ligne/"/>
    
  </entry>
  
  <entry>
    <title>Leek Wars : programmez l&#39;intelligence de vos poireaux pour gagner la bataille !</title>
    <link href="https://outils-web.fr/leek-wars-programmez-lintelligence-de-vos-poireaux-pour-gagner-la-bataille/"/>
    <id>https://outils-web.fr/leek-wars-programmez-lintelligence-de-vos-poireaux-pour-gagner-la-bataille/</id>
    <published>2015-10-10T12:20:20.000Z</published>
    <updated>2022-06-13T22:33:54.101Z</updated>
    
    <content type="html"><![CDATA[<p>Quels sont les points communs entre un poireau, l’intelligence artificielle et une bataille sanglante ? Pas d’idée? Eh bien, c’est Leek Wars, le jeu de batailles de poireaux !<br><img src="/uploads/2015/10/leek-war1.jpg" /></p><h2 id="1-Qu’est-ce-que-Leek-Wars"><a href="#1-Qu’est-ce-que-Leek-Wars" class="headerlink" title="1. Qu’est-ce que Leek Wars ?"></a>1. Qu’est-ce que Leek Wars ?</h2><p>Leek Wars est un jeu de combat de poireaux ou chaque joueur affronte les poireaux des autres joueurs. Comme dans tous les jeux de combats, les poireaux ont des points de vie, des points de force, d’agilité, mais avant toute chose, une intelligence artificielle. Il faut donc programmer son poireau pour l’engager dans des combats contre d’autres poireaux et tenter de remporter la victoire. Le combat se termine lorsque que votre poireau n’a plus de vie. Pour compliquer les choses, vous pouvez utiliser des puces qui vous soigneront, vous apporteront des protections ou produiront des dégâts sur votre adversaire. Leek War est un jeu fabuleux pour celui qui sait et aime programmer. Il n’est pas nécessaire d’être un crack en informatique pour jouer à leek war. Mais c’est un moyen facile et amusant pour apprendre les bases de la programmation. Les combats peuvent se faire en groupe ou en équipe, ou avec des invocations dont il faudra créer également l’IA. Il y a également un système de tournois très stimulant. Bref, de quoi devenir complètement accro à ce jeu.</p><h2 id="2-Quelques-conseils-aux-debutants"><a href="#2-Quelques-conseils-aux-debutants" class="headerlink" title="2. Quelques conseils aux débutants."></a>2. Quelques conseils aux débutants.</h2><p>Je ne vous donnerai pas de codes sources pour gagner, mais juste quelques petits conseils pour bien démarrer. A partir du code de base qui est fourni à la création de votre poireau, triplez la commande de tire avec l’arme, par un petit copié collé. Votre poireau tirera 3 fois au lieu de 1, ce qui vous donnera un avantage certain par rapport aux débutants qui ne le font pas (80% des joueurs débutants). Au niveau des points, privilégiez d’abord les points de vie puis la force. Utilisez les puces flammes, bandage et casque pour bien démarrer. Très vite, vous serez obligé de développer votre intelligence artificielle pour gagner les tournois. Mais ça, c’est pour plus tard.</p><h2 id="3-Conclusion"><a href="#3-Conclusion" class="headerlink" title="3. Conclusion"></a>3. Conclusion</h2><p>Leek War est un super jeu pour les Geeks. Il offre de nombreuses possibilités d’apprentissage. Un jeu passionnant que je ne peux que vous recommander. <strong><a href="https://leekwars.com/">Leek War</a></strong> Cet article vous a plu. </p><p>Pas mal comme site n’est-il pas ? Il y a de quoi perdre beaucoup de temps.<br>Hasta la vista baby !</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Quels sont les points communs entre un poireau, l’intelligence artificielle et une bataille sanglante ? Pas d’idée? Eh bien, c’est Leek W</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="jeu intelligence artificielle poireau" scheme="https://outils-web.fr/tags/jeu-intelligence-artificielle-poireau/"/>
    
    <category term="jeu programmation poireau" scheme="https://outils-web.fr/tags/jeu-programmation-poireau/"/>
    
    <category term="leek war" scheme="https://outils-web.fr/tags/leek-war/"/>
    
    <category term="poireau intelligent" scheme="https://outils-web.fr/tags/poireau-intelligent/"/>
    
  </entry>
  
  <entry>
    <title>Le meilleur logiciel pour créer des anaglyphes 3D</title>
    <link href="https://outils-web.fr/le-meilleur-logiciel-pour-creer-des-anaglyphes-3d/"/>
    <id>https://outils-web.fr/le-meilleur-logiciel-pour-creer-des-anaglyphes-3d/</id>
    <published>2015-05-04T19:36:37.000Z</published>
    <updated>2022-06-13T22:34:34.582Z</updated>
    
    <content type="html"><![CDATA[<p>Vous aimez la 3D et vous aimeriez créer des images en trois dimensions époustouflantes à regarder avec des lunettes. Vous êtes au bon endroit. Dans cet article, vous apprendrez à prendre une photo 3D et à la traiter grâce à un fantastique petit logiciel gratuit, pour obtenir une image stéréoscopique ou  anaglyphe 3D que vous pourrez contempler avec vos lunettes préférées.<br><br/><br><img src="/uploads/2015/05/tasse-3d.jpg" /></p><h2 id="1-Pourquoi-voit-on-en-trois-dimensions"><a href="#1-Pourquoi-voit-on-en-trois-dimensions" class="headerlink" title="1- Pourquoi voit-on en trois dimensions ?"></a>1- Pourquoi voit-on en trois dimensions ?</h2><p>Le principe de la vision 3D est basé sur le fait que nous avons deux yeux (Eh oui).  L’œil gauche et l’œil droit sont espacés de quelques centimètres et voient donc le monde chacun sous un angle légèrement différent. Les  images des deux yeux sont ensuite recombinées dans le cerveau pour donner une image en relief,  intégrant le volume des objets. Faites maintenant ce test. Fermez un œil, tendez les bras et cherchez à rapprocher vos indexes devant vous pour les faire se toucher. Il est fort à parier que vos doigts vont se manquer. Si vous refaites le test avec les deux yeux overts, vous réussirez à toucher vos indexes sans problème. Ainsi, avec un seul œil, vous perdez la vision en 3 dimensions.</p><h2 id="2-Pourquoi-faut-il-des-lunettes-pour-voir-en-3D"><a href="#2-Pourquoi-faut-il-des-lunettes-pour-voir-en-3D" class="headerlink" title="2- Pourquoi faut-il des lunettes pour voir en 3D ?"></a>2- Pourquoi faut-il des lunettes pour voir en 3D ?</h2><p>Pour reproduire la vision naturelle en trois dimensions, on porte habituellement des lunettes qui permettent à chaque œil de voir une image différente, celle que chaque œil verrait dans la réalité en 3 dimensions. Plusieurs techniques existent, mais la plus simple utilise des filtres colorés rouges et cyans (bleu clair). L’image rouge sera perçue par l’œil gauche et la cyan par l’œil droit. Utiliser le rouge et le cyan est intéressant, car ce sont des couleurs complémentaires en physique (pas en peinture). Si on superpose de la lumière rouge et de la lumière cyan, on obtient du blanc. Ainsi, ces deux couleurs permettront à l’image 3D de conserver une partie de ses couleurs initiales. Les images 3D formées d’une image rouge et d’une cyan sont souvent appelées anaglyphes et sont les plus simples à produire. D’autres techniques utilisent le polarisation de la lumière, mais c’est un peu plus complexe à comprendre.</p><h2 id="3-Comment-obtenir-un-anaglyphe-3D"><a href="#3-Comment-obtenir-un-anaglyphe-3D" class="headerlink" title="3- Comment obtenir un anaglyphe 3D ?"></a>3- Comment obtenir un anaglyphe 3D ?</h2><h3 id="3-1-Obtention-d’une-photo-3D"><a href="#3-1-Obtention-d’une-photo-3D" class="headerlink" title="3-1 Obtention d’une photo 3D."></a>3-1 Obtention d’une photo 3D.</h3><p>Pour prendre une photo 3D, il faut, soit un appareil spécial avec deux objectifs, soit avoir un appareil numérique possédant la fonction 3D. Allez vérifier sur le vôtre, il y a de fort à parier qu’il possède cette propriété, de plus en plus commune.</p><p>Lorsque vous êtes en prise de vue 3D avec un appareil numérique simple, vous devrez prendre 2 photos. La première, c’est vous qui la déclenchez, ce sera la photo de l’œil gauche. Puis, vous décaler horizontalement votre appareil vers la droite. Lorsque la nouvelle vue se superpose quasiment à la première, l’appareil se déclenche automatiquement et prend la deuxième photo, correspondant à l’œil droit. Les deux images sont enregistrées dans votre cliché, le plus souvent dans un fichier au format MPO.</p><h3 id="3-2-Comment-obtenir-un-anaglyphe-3D-a-partir-de-deux-photos"><a href="#3-2-Comment-obtenir-un-anaglyphe-3D-a-partir-de-deux-photos" class="headerlink" title="3-2 Comment obtenir un anaglyphe 3D à partir de deux photos ?"></a>3-2 Comment obtenir un anaglyphe 3D à partir de deux photos ?</h3><p>C’est bien beau de prendre des photos 3D, mais si on ne peut pas les regarder, ça n’a pas grand intérêt. C’est là qu’intervient le logiciel de traitement dont je souhaitais vous parler : <strong><a href="https://stereo.jpn.org/fra/index.html">Stéréo Photomaker</a></strong>.</p><p>Une fois installé, vous pouvez ouvrir les fichiers d’images 3D au format MPO. Ci-dessous, un exemple avec la photo 3D d’un petit bus cubique, ouverte avec Stéréo Photomaker.</p><img src="/uploads/2015/05/photo-3D.jpg" /> <p>Lorsque l’image MPO est ouverte, vous vous rendez compte qu’elle est composée de deux images. Pour obtenir un anaglyphe couleur ou image stéréoscopique, cliquez sur le bouton anaglyphe couleur comme indiqué. Plusieurs options sont disponibles. personnellement, j’aime assez l’anaglyphe Dubois. C’est à vous de tester avec vos lunettes colorées l’image stéréo qui vous offre le meilleur rendu 3D.</p><p>Il ne vous reste plus qu’à enregistrer votre résultat en allant dans <em>Fichier &gt; Enregistrer l’image Stéréo.</em></p><p>Voici ce que l’on obtient avec les deux images du dessus traitée par l’anaglyphe Dubois.</p><img src="/uploads/2015/05/bus-3d-900.jpg" /> <br>Voilà, vous avez toutes les cartes en main pour créer de magnifiques images stéréo 3D. Il ne vous reste plus qu'à passer à l'action et à partager sur les réseaux sociaux. <p>A bientôt.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Vous aimez la 3D et vous aimeriez créer des images en trois dimensions époustouflantes à regarder avec des lunettes. Vous êtes au bon end</summary>
      
    
    
    
    <category term="Freewares" scheme="https://outils-web.fr/categories/Freewares/"/>
    
    
    <category term="anaglyphe 3D" scheme="https://outils-web.fr/tags/anaglyphe-3D/"/>
    
    <category term="créer image 3D lunettes" scheme="https://outils-web.fr/tags/creer-image-3D-lunettes/"/>
    
    <category term="freeware anaglyphe 3D" scheme="https://outils-web.fr/tags/freeware-anaglyphe-3D/"/>
    
    <category term="image stéréoscopique 3D" scheme="https://outils-web.fr/tags/image-stereoscopique-3D/"/>
    
    <category term="logiciel gratuit image 3D" scheme="https://outils-web.fr/tags/logiciel-gratuit-image-3D/"/>
    
  </entry>
  
  <entry>
    <title>Les meilleurs frameworks PHP 2015</title>
    <link href="https://outils-web.fr/les-meilleurs-frameworks-php-2015/"/>
    <id>https://outils-web.fr/les-meilleurs-frameworks-php-2015/</id>
    <published>2015-02-22T17:15:37.000Z</published>
    <updated>2022-06-01T13:47:40.006Z</updated>
    
    <content type="html"><![CDATA[<p>Pour créer un site web performant, sécurisé en PHP, avec toutes les fonctionnalités des applications modernes, sans réinventer la roue, ni passer sa vie à taper du code, le mieux est d’utiliser un framework. Mais quel framework PHP utiliser ? Cette question, beaucoup de programmeurs se la posent. Avant de s’investir dans un long travail d’apprentissage, le programmeur doit savoir si ce travail d’appropriation du framework vaut la peine d’être entrepris. Dans cet article, je vous donnerai quelques pistes de réponses et de réflexions, basés sur des tests personnels réalisés sur différents frameworks, ainsi que sur des statistiques de recherches de google trend. Bien sûr, mon avis ne sera pas obligatoirement partagé par tous, mais il aura au moins le mérite de donner quelques bases pour votre choix et d’ouvrir le débat.</p><h2 id="1-Les-statistiques-de-recherches-sur-Google"><a href="#1-Les-statistiques-de-recherches-sur-Google" class="headerlink" title="1. Les statistiques de recherches sur Google"></a>1. Les statistiques de recherches sur Google</h2><p> </p><p><strong>Recherches sur Google, de 2004 à aujourd’hui, pour les 5 frameworks : Laravel, CodeIgniter, Symfony, Cakephp et Zend Framework.</strong></p><ul><li><strong>Recherches pour le monde entier</strong></li></ul><img src="/uploads/2015/02/recherche-frameworks-php-monde.jpg" /><ul><li> <strong>Recherches pour les Etats Unis</strong></li></ul><p><mg src="/uploads/2015/02/recherche-frameworks-php-states.jpg" />   </p><ul><li><strong>Recherches pour la France</strong></li></ul><p><img src="/uploads/2015/02/recherche-frameworks-php-france.jpg" />   </p><p>Si on regarde les statistiques à l’échelle mondiale, Laravel est le framework PHP du moment. Le petit dernier du groupe php vient de dépasser ses aînés et sa progression semble ne pas s’arrêter là. Le second framework qui tire son épingle du jeu est CodeIgniter. Il est dépassé au plan mondial par Laravel, mais alors que les autres frameworks sont en perte de vitesse, CodeIgniter se maintient et même poursuit sa progression. Par contre, au niveau de la France, le framework préféré des français reste largement notre framework franco-français, Symfony (2). Cette tendance en France et dans pas mal de pays européens semble établie sur le long terme.  </p><h2 id="2-Description-des-principaux-frameworks"><a href="#2-Description-des-principaux-frameworks" class="headerlink" title="2. Description des principaux frameworks"></a>2. Description des principaux frameworks</h2><h2 id="2-1-Laravel"><a href="#2-1-Laravel" class="headerlink" title="2.1. Laravel"></a>2.1. Laravel</h2><img src="/uploads/2015/02/laravel.jpg" /> <p>Comme nous l’avons vu, le frameworks PHP de 2015 est sans conteste Laravel. Sa progression dans le classement des recherches google trend est impressionnant. Mais qu’en est-il de la mécanique du leader lorsqu’on décortique sa cuirasse ? Ce que l’on trouve sous le capot de la bête est à la fois très intéressant et inquiétant. Un projet Laravel se crée à partir de composer. Il n’est donc pas possible de décompresser une archive pour créer un projet. Mais une fois composer installer, la création d’un projet Laravel est un jeu d’enfant. Comme tous les frameworks, Laravel est basé sur une structure MVC (modèle - vue - contrôleur), mais avec quelques curiosités. Tout d’abord, Laravel se fonde sur des méthodes statiques (appelée avec ::). Cette manière de fonctionner simplifie la programmation, mais complique un peu la création de ses propres classes et méthodes. La machinerie du cœur du framework est assez complexe avec un système d’injection de dépendances. Certaines bibliothèques sont empruntées à Symfony (Cocorico). On ne fait pas que des trucs nuls en France. La documentation est un point crucial pour l’apprentissage. Elle est globalement assez bien faite et en français, mais la manière d’aborder la programmation MVC dans la doc me paraît mal adaptée pour les débutants. La partie modèle possède un niveau d’abstraction élevé, grâce à l’ORM Eloquent. Avec Eloquent, fini les requêtes SQL de Grand Papa. Son niveau d’abstraction est assez proche de ce qui se fait dans Django (framework Python) pour ceux qui connaissent. La création des modèles peut se faire en lignes de commandes, ce qui apporte un gain de temps indéniable. La partie vue est également performante, avec blade, un système de templating qui permet l’héritage de templates etc. Bref, que des bonnes choses. Passons à ce qui pour moi pose problème. Laravel est particulièrement souple. Vous pouvez faire absolument tout ce que vous voulez. En particulier, le fameux fichier route.php dans lequel on devrait mettre les routes gérant les url, peut contenir à peu près tout. On pourrait créer un site complet en n’utilisant que le fichier route.php. Un autre point inquiétant vient de la documentation de Laravel. Le tuto commence en vous expliquant comment faire n’importe quoi avec ce fameux fichier route.php. Pour ma part, je pense que les bonnes pratiques en programmation, comme le respect du MVC résultent d’une longue expérience des programmeurs et devraient être suivies. Donc soit les concepteurs de Laravel sont des visionnaires, soit il faut se contraindre davantage que ce que ne propose le framework. En conclusion, Laravel est un bon framework, efficace, facile, plaisant à utiliser, rapide, avec une faible empreinte mémoire. Il faudra néanmoins faire attention à ne pas abuser de la liberté offerte.</p><h2 id="2-2-CodeIgniter"><a href="#2-2-CodeIgniter" class="headerlink" title="2.2. CodeIgniter"></a>2.2. CodeIgniter</h2><img src="/uploads/2015/02/CodeIgniter_logo.jpg" /> <p>En seconde position, CodeIgniter reste un framework très utilisé et à juste titre. C’est de très loin le framework qui requière le temps d’apprentissage le plus faible. En une ou deux heures d’apprentissage de codeigniter, le débutant maîtrise déjà l’essentiel du framework. Il faut dire que la documentation de CodeIgniter est exceptionnellement bien faite et traduite en français. Le framework est un des plus rapide des frameworks php existant, avec une empreinte mémoire faible. On reprochera à CodeIgniter d’être un peu trop verbeux. En effet, il nécessite un peu plus de lignes de codes que les autres, peut-être parce qu’il est plus proche du PHP brut. Le point positif est que l’intégration de vos propres classes ou bibliothèques se révèle particulièrement simple. Il existe un système de templating basique,  beaucoup moins sophistiqué que celui de laravel, mais qui permet quand même de décomposer votre page en envoyant plusieurs vues à la même page. Si vous débutez avec les frameworks PHP, il n’y a pas à hésiter, CodeIgniter est celui qui vous demandera le moins d’efforts et vous offrira une bonne initiation à la programmation MVC.</p><h2 id="2-3-Symfony-2"><a href="#2-3-Symfony-2" class="headerlink" title="2.3. Symfony 2"></a>2.3. Symfony 2</h2><img src="/uploads/2015/02/symfony_logo.jpg" /> <p>Symfony 2, le framework PHP français reconnu partout dans le monde, encore une fois cocorico !!! C’est également framework numéro un en France. Plus lourd et plus complexe à appréhender que CodeIgniter ou Laravel, il reste une valeur sûre parmi les frameworks PHP, surtout en France. Il est beaucoup plus contraignant que les frameworks précédents, mais ici c’est la rigueur qui est privilégiée. Symfony est conçu sur un le concept de Bundles. Toute application Web est un Bundle. Il faudra aussi être capable de manipuler les namespaces et d’autres caractéristiques de ce genre pour maîtriser Symfony. Enfin, le mode debug offre des renseignements intéressants lors de la création de votre application web. Si vous souhaitez travailler avec une agence française et que vous maîtrisez la programmation MVC, Symfony est probablement le framework qu’il vous faut, mais son apprentissage vous prendra peut-être une peu plus de temps.</p><h2 id="2-4-CakePHP"><a href="#2-4-CakePHP" class="headerlink" title="2.4. CakePHP"></a>2.4. CakePHP</h2><img src="/uploads/2015/02/cakephp_logo.jpg" />  <p>CakePHP tire son épingle du jeu depuis de nombreuses années. Ce framework offre un très bon compromis entre la rigueur et la flexibilité, entre les grosses applications et les petits sites. Le principe de la programmation MVC est bien respecté. Le framework permet de créer des projets de toutes tailles. Sa grande polyvalence est probablement son point fort. CakePHP possède lui aussi un système de templating qui offre pas mal de possibilités, mais pas d’héritage de templates. Si vous cherchez la rigueur sans trop de contraintes et une certaine polyvalence, CakePHP est pour vous.</p><h2 id="2-5-ZEND-Framework"><a href="#2-5-ZEND-Framework" class="headerlink" title="2.5. ZEND Framework"></a>2.5. ZEND Framework</h2><img src="/uploads/2015/02/Zend_Framework_logo.jpg" /> <p>Zend framework est très populaire en France. Il a eu son heure de gloire, mais semble sur le déclin depuis plusieurs années. Je n’en dirai guère plus sur ce framework, car c’est celui que je connais le moins et que j’ai écarté de ma liste.  </p><h2 id="2-6-Yii-Framework"><a href="#2-6-Yii-Framework" class="headerlink" title="2.6. Yii Framework"></a>2.6. Yii Framework</h2><img src="/uploads/2015/02/yii_logo.jpg" /> <p>Yii, yes it is, est un framework assez original qui mérite qu’on en dise quelques mots. Le début de la création d’un projet se fait en ligne de commandes. En quelques instructions, on se retrouve avec un site ou un blog déjà prêt à l’emploi. Les tables de la base de données sont crées en deux coups de cuillère à pot et un système de scafolding permet d’ajouter des entrées dans la table très facilement. A ce stade, Yii distance largement tous ses concurrents. On est déjà au stade du site opérationnel alors que pour les autres frameworks sont toujours au codage. Mais ensuite, si on souhaite modifier l’apparence la disposition des éléments, il faut rentrer dans le framework, apprendre les namespaces et la stuture de Yii. Donc au final, on n’est pas dispensé de l’apprentissage du framework.  Néanmoins, c’est un framework intéressant que je conseillerais si vous voulez sortir des sentiers battus et créer rapidement.   Il existe bien d’autres frameworks tous avec des caractéristiques intéressantes. Par exemple Phalcon php qui utilise une dll pour fonctionner. Il a paraît-il les meilleures performances parmi les framework PHP, mais pour ma part je n’ai pas réussi à l’utiliser. D’autres sont aussi prometteurs comme FuelPHP ou Kohana par un des fondateur de CodeIgniter, mais ils restent encore confidentiels et le recul manque pour donner un avis éclairé sur ceux-ci. Ce petit tour d’horizon des frameworks PHP est terminé. N’hésitez pas à réagir ou à partager sur les réseaux sociaux.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Pour créer un site web performant, sécurisé en PHP, avec toutes les fonctionnalités des applications modernes, sans réinventer la roue, n</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="cakephp" scheme="https://outils-web.fr/tags/cakephp/"/>
    
    <category term="codeigniter" scheme="https://outils-web.fr/tags/codeigniter/"/>
    
    <category term="framework php" scheme="https://outils-web.fr/tags/framework-php/"/>
    
    <category term="Laravel" scheme="https://outils-web.fr/tags/Laravel/"/>
    
    <category term="meilleur framework php" scheme="https://outils-web.fr/tags/meilleur-framework-php/"/>
    
    <category term="Symfony" scheme="https://outils-web.fr/tags/Symfony/"/>
    
    <category term="Yii" scheme="https://outils-web.fr/tags/Yii/"/>
    
    <category term="zend framework" scheme="https://outils-web.fr/tags/zend-framework/"/>
    
  </entry>
  
  <entry>
    <title>Le meilleur freeware pour créer  des animations image par image [Stop Motion]</title>
    <link href="https://outils-web.fr/le-meilleur-freeware-pour-creer-des-animations-image-par-image-stop-motion/"/>
    <id>https://outils-web.fr/le-meilleur-freeware-pour-creer-des-animations-image-par-image-stop-motion/</id>
    <published>2015-01-18T15:29:27.000Z</published>
    <updated>2022-06-13T22:34:05.841Z</updated>
    
    <content type="html"><![CDATA[<p>Créer son propre propre film d’animation image par image, c’est possible et même très simple grâce à un petit logiciel gratuit. En quelques minutes, vous devenez le Spielberg du film d’animation. Les oscars ne sont pas loin ou presque. Voici un petit exemple réalisé en 5 minutes à peine :</p><p>Dans cet article, nous allons découvrir <a href="https://monkeyjam.org/" title="monkey jam">MonkeyJam</a> ; pour moi, le meilleur logiciel d’animation image par image. </p><img src="/uploads/2015/01/animation-stop-motion.jpg" /> <h2 id="Comment-Realiser-votre-film-d’animation"><a href="#Comment-Realiser-votre-film-d’animation" class="headerlink" title="Comment Réaliser votre film d’animation ?"></a>Comment Réaliser votre film d’animation ?</h2><ul><li>Tout d’abord téléchargez et installez Monkey Jam. Le lien de téléchargement se trouve ci-dessus.</li><li>Cliquez ensuite sur l’icône en haut à gauche.</li></ul><img src="/uploads/2015/01/MonkeyJam-demarrer.jpg" /> <ul><li>Une fenêtre apparaît. Donner un nom à votre film et choisissez un emplacement sur votre disque dur pour stocker les images de votre future vidéo.</li></ul><img src="/uploads/2015/01/MonkeyJam-nom-du-layer.jpg" /> <ul><li>Cliquer ensuite sur l’icône représentant une caméra.</li></ul><img src="/uploads/2015/01/MonkeyJam-choix-webcam.jpg" /> <ul><li>Une nouvelle boite de dialogue apparaît. Sélectionnez la webcam que vous allez utiliser. Lorsque celle-ci est reconnue, une image apparaît dans le carré central. Il ne vous reste plus qu’à cliquer sur capture pour commencer votre animation image par image.</li></ul><img src="/uploads/2015/01/MonkeyJam-lancer-captures.jpg" /> <p>Vous pouvez supprimer des images ou modifier la durée d’affichage d’une image dans la vidéo.</p><ul><li>Lorsque vous souhaitez voir un aperçu de votre oeuvre, cliquez sur l’icône à droite de la caméra.</li><li>Enfin, lorsque vous pensez que votre film est prêt, allez dans le menu “file” puis cliquez sur “Export Avi”. Un film d’animation sera créé au format avi, à l’emplacement que vous aurez choisi.</li></ul><p>Ce tutoriel se termine. J’espère que vous aurez autant de plaisir que moi à faire des petites animations image par image avec ce logiciel. Si cet article vous à intéressé, n’hésitez pas à le partager ou à faire un lien. A bientôt.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Créer son propre propre film d’animation image par image, c’est possible et même très simple grâce à un petit logiciel gratuit. En quelqu</summary>
      
    
    
    
    <category term="Freewares" scheme="https://outils-web.fr/categories/Freewares/"/>
    
    
    <category term="animation image par image" scheme="https://outils-web.fr/tags/animation-image-par-image/"/>
    
    <category term="création animation" scheme="https://outils-web.fr/tags/creation-animation/"/>
    
    <category term="stop motion" scheme="https://outils-web.fr/tags/stop-motion/"/>
    
    <category term="tuto animation" scheme="https://outils-web.fr/tags/tuto-animation/"/>
    
    <category term="tuto monkeyjam" scheme="https://outils-web.fr/tags/tuto-monkeyjam/"/>
    
    <category term="tuto stop motion" scheme="https://outils-web.fr/tags/tuto-stop-motion/"/>
    
  </entry>
  
  <entry>
    <title>Ajouter des boutons pour vous suivre sur Twitter, Facebook, Google+ et YouTube [Tuto]</title>
    <link href="https://outils-web.fr/ajouter-des-boutons-pour-vous-suivre-sur-twitter-facebook-google-et-youtube-tuto/"/>
    <id>https://outils-web.fr/ajouter-des-boutons-pour-vous-suivre-sur-twitter-facebook-google-et-youtube-tuto/</id>
    <published>2014-11-17T21:17:54.000Z</published>
    <updated>2022-06-13T20:39:07.404Z</updated>
    
    <content type="html"><![CDATA[<p>Vous avez une <a href="/2012/11/27/comment-creer-une-fanpage-facebook/" title="Comment créer une Fanpage Facebook ?">page FaceBook</a> ou Google+, vous avez une chaîne YouTube ou un compte Twitter.<br>Vous souhaiteriez avoir des abonnés ou des followers, grâce aux boutons de suivi mais vous ne savez pas trop comment faire.<br>Pas de panique, il suffit juste de savoir ou aller et suive ces quelqies petites conseils. </p><img src="/uploads/2014/11/reseaux-sociaux.jpg" /> <p>Vous pouvez utiliser les boutons d’exemple ci-dessous, ils fonctionnent tous…</p><h2 id="1-Les-boutons-de-suivi-Twitter"><a href="#1-Les-boutons-de-suivi-Twitter" class="headerlink" title="1.      Les boutons de suivi Twitter."></a>1.      Les boutons de suivi Twitter.</h2><p>Commençons par Twitter, le plus simple à installer. Pour ajouter un bouton suivre Twitter, rendez-vous à l’adresse suivante : <a href="https://about.twitter.com/fr/resources/buttons#follow%20." title="creer bouton suivre twitter">Bouton suivre twitter</a><br>Vous arriverez sur cette page : <img src="/uploads/2014/11/Boutons-Twitter.jpg" /><br>Plusieurs types de boutons sont proposés. Choisissons par exemple le second, « suivre ». Renseignez votre nom d’utilisateur Twitter, puis le format et la langue. Enfin, récupérez le code à coller sur votre site web ou votre blog et voici ce que cela donne : <a href="https://twitter.com/OutilsWeb1">Follow @OutilsWeb1</a> </p><h2 id="2-Les-boutons-de-partage-pour-Facebook"><a href="#2-Les-boutons-de-partage-pour-Facebook" class="headerlink" title="2.       Les boutons de partage pour Facebook"></a>2.       Les boutons de partage pour Facebook</h2><p>Pour ajouter un bouton de partage ou un bouton j’aime FaceBook,  il faut d’abord <strong>se connecter à son compte facebook</strong>, puis se rendre sur la page développeur FaceBook :<br>bouton <a href="https://developers.facebook.com/docs/plugins/like-button" title="bouton share et like">Share et Like</a> .<br><mg src="/uploads/2014/11/Facebook-Like-Button.jpg" /><br>Commencez par placer dans “<strong>URL to like</strong>“ l’adresse de votre page FaceBook. Choisissez ensuite le type d’affichage que vous souhaitez (layout), la largeur (width) et le type d’action. Vous obtenez le code à inclure en cliquant sur « Get Code ». Si vous avez renseigné la bonne url votre page recevra ses likes.  </p><h2 id="3-Les-Badges-et-bouton-suivre-de-Google"><a href="#3-Les-Badges-et-bouton-suivre-de-Google" class="headerlink" title="3.       Les Badges et bouton suivre de Google+"></a>3.       Les Badges et bouton suivre de Google+</h2><p>Pour proposer un “badge suivre”, associé à votre page Google plus, Rendez-vous à l’adresse suivante : <a href="https://developers.google.com/+/web/badge/?hl=fr" title="badge google+">Badge Google plus</a> </p><p>Copiez le code ci-dessous en remplaçant {pageId} par l’ID ou le nom de votre page googleplus.</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;https://apis.google.com/js/plusone.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">g:plus</span> <span class="attr">href</span>=<span class="string">&quot;https://plus.google.com/&#123;pageId&#125;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">g:plus</span>&gt;</span></span></span><br></pre></td></tr></table></figure><p>Il existe une série d’attributs à ajouter à la balise  <strong>&lt;g : … &gt;&lt;&#x2F;g&gt;</strong>  pour personnaliser votre badge.<br>Parmi les attributs proposés, la largeur <strong>width</strong> est intéressante pour ajuster les dimensions au site. </p><p>Par exemple avec une largeur avec 280, on obtient :</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;https://apis.google.com/js/plusone.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">g:plus</span> <span class="attr">href</span>=<span class="string">&quot;https://plus.google.com/+Outils-webFr&quot;</span> <span class="attr">rel</span>=<span class="string">&quot;author&quot;</span> <span class="attr">width</span>=<span class="string">&quot;280&quot;</span>\&gt;</span><span class="tag">&lt;/<span class="name">g:plus</span>&gt;</span></span></span><br></pre></td></tr></table></figure><h2 id="4-Les-boutons-s’abonner-a-YouTube"><a href="#4-Les-boutons-s’abonner-a-YouTube" class="headerlink" title="4.       Les boutons s’abonner à YouTube"></a>4.       Les boutons s’abonner à YouTube</h2><p>Les boutons d’abonnement YouTube sont apparus récemment et on ne s’en plaindra pas.<br>Pour en installer un sur votre site, rendez-vous sur la page suivante : <a href="https://developers.google.com/youtube/youtube_subscribe_button" title="S-abonner-a-la-chaine-YouTube">Bouton s’abonner YouTube</a> <br>Un générateur de code est disponible. Indiquer le nom ou <a href="https://outils-web.fr/5-astuces-incontournables-pour-you-tube/">l’ID de la chaîne YouTube</a><br>Il ne reste plus qu’à renseigner quelques paramètres, que vous pouvez laisser à défault, pour ensuite récupérer le code à insérer. <a href="/uploads/2014/11/YouTube-Subscribe-Button.jpg"><img src="/uploads/2014/11/YouTube-Subscribe-Button.jpg" alt="YouTube Subscribe Button"></a>   </p><p>Si cet article t’a plu ! Partage-le sur les réseaux sociaux ou continue ta visite.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Vous avez une &lt;a href=&quot;/2012/11/27/comment-creer-une-fanpage-facebook/&quot; title=&quot;Comment créer une Fanpage Facebook ?&quot;&gt;page FaceBook&lt;/a&gt; ou</summary>
      
    
    
    
    <category term="Programmation" scheme="https://outils-web.fr/categories/Programmation/"/>
    
    
    <category term="badge google" scheme="https://outils-web.fr/tags/badge-google/"/>
    
    <category term="bouton abonner YouTube" scheme="https://outils-web.fr/tags/bouton-abonner-YouTube/"/>
    
    <category term="Bouton Google" scheme="https://outils-web.fr/tags/Bouton-Google/"/>
    
    <category term="bouton like facebook" scheme="https://outils-web.fr/tags/bouton-like-facebook/"/>
    
    <category term="bouton twitter" scheme="https://outils-web.fr/tags/bouton-twitter/"/>
    
  </entry>
  
  <entry>
    <title>Convertir ses fichiers vidéos mp4 en audios mp3</title>
    <link href="https://outils-web.fr/convertir-ses-fichiers-videos-mp4-en-audios-mp3/"/>
    <id>https://outils-web.fr/convertir-ses-fichiers-videos-mp4-en-audios-mp3/</id>
    <published>2014-10-30T11:03:15.000Z</published>
    <updated>2022-06-13T22:28:21.342Z</updated>
    
    <content type="html"><![CDATA[<p>Vous avez peut-être récupéré des fichiers vidéos<br>(je ne veux pas <a href="https://outils-web.fr/5-astuces-incontournables-pour-you-tube/" title="5 astuces incontournables pour You Tube">savoir où</a>) et vous aimeriez uniquement conserver le son, pour gagner de la place sur votre ordinateur ou pour l’écouter avec votre baladeur mp3 ?<br>Peut-être souhaitez-vous simplement compresser une musique au format mp3 ?<br>Ces opérations peuvent vous sembler compliquées et vous ne savez pas trop comment vous y prendre.<br>Heureusement, il existe une solution en ligne : <strong><a href="https://online-audio-converter.com/fr/" title="online convert audio">online-audio-converter.com</a></strong><br>Cette application web est très simple d’utilisation et très efficace. Voyons ceci ensemble. </p><img src="/uploads/2014/10/convert-video-audio-online.jpg" /> <br> La conversion video-audio est ultra simple avec cette application, pourvu que votre vidéo ne fasse pas plusieurs gigaoctets... <br><br> <p> <strong>1.</strong> Commencez par sélectionner le fichier vidéo à convertir. De nombreux formats sont disponibles dont les mp4. Et téléchargez la vidéo. </p><p> <strong>2.</strong> Choisissez ensuite le format de sortie et la qualité du son du fichier, s’il s’agit d’un format compressé comme mp3.<br> Plus la qualité est bonne et plus le fichier audio obtenu sera gros (en octets) </p><p> <strong>3.</strong> Enfin, cliquez sur convertir pour recevoir le fichier audio mp3 directement dans vos téléchargements.<br> Il faut noter aussi que ce convertisseur fonctionne aussi pour convertir de l’audio en audio.<br> Par exemple si vous souhaitez compresser un  morceau de musique en mp3, ça marche aussi.<br> Ce site de conversion et d’extraction d’audio est une très bonne alternative au logiciel à installer.<br> Je vous le recommande </p><p> Si cet article vous a été utile, n’hésitez pas à la partager.</p>]]></content>
    
    
      
      
    <summary type="html">&lt;p&gt;Vous avez peut-être récupéré des fichiers vidéos&lt;br&gt;(je ne veux pas &lt;a href=&quot;https://outils-web.fr/5-astuces-incontournables-pour-you-tub</summary>
      
    
    
    
    <category term="Outils du Web" scheme="https://outils-web.fr/categories/Outils-du-Web/"/>
    
    
    <category term="convertir mp4 en mp3" scheme="https://outils-web.fr/tags/convertir-mp4-en-mp3/"/>
    
    <category term="convertir mp4 en mp3 en ligne" scheme="https://outils-web.fr/tags/convertir-mp4-en-mp3-en-ligne/"/>
    
    <category term="extraire son mp4" scheme="https://outils-web.fr/tags/extraire-son-mp4/"/>
    
    <category term="transformer wma en mp3" scheme="https://outils-web.fr/tags/transformer-wma-en-mp3/"/>
    
  </entry>
  
</feed>
