Outils pour utilisateurs

Outils du site


accueil

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
accueil [2022/04/07 20:05]
mediarbx
accueil [2022/04/12 22:04] (Version actuelle)
mediarbx
Ligne 1: Ligne 1:
-~~NOTOC~~ <html> <style> .body { +~~NOTOC~~ 
- +<html> 
-<code> +<style> 
-  font-family: sans-serif; +.body { 
-  background-color: #1b1b1b; +    font-family: sans-serif; 
- +    background-color: #1b1b1b;
-</code> +
 } }
  
 .grid-layout { .grid-layout {
- +    display: grid; 
-<code> +    grid-template-columns: repeat(auto-fill, minmax(25, 1fr)); 
-  display: grid; +    grid-gap: 10px; 
-  grid-template-columns: repeat(auto-fill, minmax(25, 1fr)); +    grid-auto-rows: minmax(20px, auto); 
-  grid-gap: 10px; +    grid-auto-flow: dense; 
-  grid-auto-rows: minmax(20px, auto); +    padding: 10px;
-  grid-auto-flow: dense; +
-  padding: 10px; +
- +
-</code> +
 } }
  
 .grid-item { .grid-item {
- +    border-style: solid; 
-<code> + padding: 14px; 
-  border-style: solid; + border-width: 3px; 
-padding: 14px; +    font-size: 13px; 
-border-width: 3px; +    border-radius: 25px; 
-  font-size: 13px; +    #font-weight: bold; 
-  border-radius: 25px; +    #text-transform: uppercase; 
-  #font-weight: bold; +    color: black;
-  #text-transform: uppercase; +
-  color: black; +
- +
-</code> +
 box-shadow: 5px 5px 2px #888888; box-shadow: 5px 5px 2px #888888;
- + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); 
-<code> + background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); 
-background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); +    vertical-align: top; 
-background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); + text-align: center; 
-  vertical-align: top; +} 
-text-align: center; +.span-2 { 
- +    grid-column-end: span 2; 
-</code> +    grid-row-end: span 2;
- +
-.span-2 { +
- +
-<code> +
-  grid-column-end: span 2; +
-  grid-row-end: span 2; +
- +
-</code> +
 } }
  
 .span-3 { .span-3 {
- +    grid-column-end: span 3; 
-<code> +    grid-row-end: span 4;
-  grid-column-end: span 3; +
-  grid-row-end: span 4; +
- +
-</code> +
 } }
  
 .tile { .tile {
- + border-style: solid; 
-<code> + padding: 14px; 
-border-style: solid; + border-width: 3px; 
-padding: 14px; + color: black; 
-border-width: 3px; + display: inline-block; 
-color: black; + height: 130px; 
-display: inline-block; + list-style-type: none; 
-height: 130px; + margin: 10px 40px 10px 20px; 
-list-style-type: none; + position: relative; 
-margin: 10px 40px 10px 20px; + text-align: center; 
-position: relative; + width: 33%; 
-text-align: center; + border-radius: 25px; 
-width: 33%; + box-shadow: 10px 10px 5px #888888; 
-border-radius: 25px; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); 
-box-shadow: 10px 10px 5px #888888; + background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); 
-background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCF11B), color-stop(1, #3874FF)); +    vertical-align: top; 
-background-image: linear-gradient(-28deg, #CCF11B 0%, #3874FF 100%); + text-align: center;
-  vertical-align: top; +
-text-align: center; +
- +
-</code> +
 } }
  
 .tile_description { .tile_description {
- + color: white; 
-<code> + font-size: 1.3em; 
-color: white; + font-style: italic; 
-font-size: 1.3em; +} 
-font-style: italic; +</style>
- +
-</code> +
- +
-</style>+
  
 <div class="grid-layout"> <div class="grid-layout">
- +    <div class="grid-item span-3 grid-item-3"><img src="_media/ethiqueantetechinque.png" alt="Technique et éthique ?" width=62%/><br/ ><big>Dans le monde numérique, les outils iso-fonctionnels sont innombrables et pourtant une grande majorité des utilisateurs utilisent un même logiciel : Word et Excel pour la bureautique, Chrome pour la navigation ... sans même avoir pris le temps de les choisir. Ces utilisateurs connaissent pourtant souvent les "vices" de ces outils mais ils ne savent comment s'en passer : leurs choix techniques précédent alors leurs choix éthiques !</big></div> 
-<code> +    <div class="grid-item grid-item-1"><a href="/dokuwiki/doku.php?id=clicsetdeclics"><img src="_media/clicsetdeclics:clicsetdeclics:supports-clics.png" alt="des tutos par thématique" /><strong>Tutoriels thématiques</strong></a></div> 
-  <div class="grid-item span-3 grid-item-3"><img src="_media/ethiqueantetechinque.png" alt="Technique et éthique ?" width=62%/><br/><big>Dans le monde numérique, les outils iso-fonctionnels sont innombrables et pourtant une grande majorité des utilisateurs utilisent un même logiciel : Word et Excel pour la bureautique, Chrome pour la navigation ... sans même avoir pris le temps de les choisir. Ces utilisateurs connaissent pourtant souvent les "vices" de ces outils mais ils ne savent comment s'en passer : leurs choix techniques précédent alors leurs choix éthiques !</big></div> +    <div class="grid-item grid-item-2"><a href="/dokuwiki/doku.php?id=Debutants"><img src="_media/clicsetdeclics:clicsetdeclics:debutants.png" alt="Exercice débutants" /><strong>Les supports pour débutants</strong></a></div> 
-  <div class="grid-item grid-item-1"><a href="/dokuwiki/doku.php?id=clicsetdeclics"><img src="_media/clicsetdeclics:clicsetdeclics:supports-clics.png" alt="des tutos par thématique" /><strong>Tutoriels thématiques</strong></a></div> +    <div class="grid-item grid-item-4"><a href="/dokuwiki/doku.php?id=unlogiciel"><img src="_media/clicsetdeclics:clicsetdeclics:unlogicielpour.png" alt="Un logiciel pour ..." /><strong>Un logiciel pour ...</strong></a></div> 
-  <div class="grid-item grid-item-2"><a href="/dokuwiki/doku.php?id=Debutants"><img src="_media/clicsetdeclics:clicsetdeclics:debutants.png" alt="Exercice débutants" /><strong>Les supports pour débutants</strong></a></div> +    <div class="grid-item grid-item-8"><a href="/dokuwiki/doku.php?id=ateliersCV"><img src="_media/clicsetdeclics:clicsetdeclics:ateliersCV.png" alt="Ateliers CV" /><strong>Ateliers CV</strong></a></div> 
-  <div class="grid-item grid-item-4"><a href="/dokuwiki/doku.php?id=unlogiciel"><img src="_media/clicsetdeclics:clicsetdeclics:unlogicielpour.png" alt="Un logiciel pour ..." /><strong>Un logiciel pour ...</strong></a></div> +    <div class="grid-item grid-item-9"><a href="/dokuwiki/doku.php?id=ateliersCodage"><img src="_media/clicsetdeclics:clicsetdeclics:ateliersCodage.png" alt="Ateliers Codage" /><strong>Ateliers de Codage</strong></a></div> 
-  <div class="grid-item grid-item-8"><a href="/dokuwiki/doku.php?id=ateliersCV"><img src="_media/clicsetdeclics:clicsetdeclics:ateliersCV.png" alt="Ateliers CV" /><strong>Ateliers CV</strong></a></div> +    <div class="grid-item grid-item-11"><a href="/dokuwiki/doku.php?id=ateliersFaireSoiMeme"><img src="_media/clicsetdeclics:clicsetdeclics:diy-install.png" alt="Ateliers Faire Soi-Même" /><strong>Faire Soi-Même</strong></a></div> 
-  <div class="grid-item grid-item-9"><a href="/dokuwiki/doku.php?id=ateliersCodage"><img src="_media/clicsetdeclics:clicsetdeclics:ateliersCodage.png" alt="Ateliers Codage" /><strong>Ateliers de Codage</strong></a></div> +    <!--- div class="grid-item span-2 grid-item-5">Sites ressources<br /> 
-  <div class="grid-item grid-item-11"><a href="/dokuwiki/doku.php?id=ateliersFaireSoiMeme"><img src="_media/clicsetdeclics:clicsetdeclics:diy-install.png" alt="Ateliers Faire Soi-Même" /><strong>Faire Soi-Même</strong></a></div> +    <a href="https://controle-tes-donnees.net/">Contrôle tes données</a></div> 
-  <div class="grid-item span-2 grid-item-5">Sites ressources<br /> +    <div class="grid-item grid-item-6">item 6</div> 
-  <a href="https://controle-tes-donnees.net/">Contrôle tes données</a></div> +    <div class="grid-item grid-item-7">item 7</div ---
-  <div class="grid-item grid-item-6">item 6</div> +    <div class="grid-item span-3 grid-item-17"><big>Il n'y a pas que l'informatique dans la vie !</big><br />Il y a aussi :</div> 
-  <div class="grid-item grid-item-7">item 7</div> +    <div class="grid-item grid-item-18"><a href="/dokuwiki/doku.php?id=fermentationlactique"><img src="_media/fermentation:fermentation.png" alt="tutoriel pour réussir la fermation lactique" /><strong>La fermentation lactique !</strong></a></div> 
-  <div class="grid-item span-3 grid-item-17">item 17</div> +    <div class="grid-item grid-item-19">item 7</div> 
- <div class="grid-item grid-item-8">item 6</div> +</div
- <div class="grid-item grid-item-9">item 7</div> +</html>
- +
-</code> +
- +
-</div> </html> +
 {{tag>Ethique technique informatique logicielslibres}} {{tag>Ethique technique informatique logicielslibres}}
  
  
accueil.1649354717.txt.gz · Dernière modification: 2022/04/07 20:05 de mediarbx