Skip to content
GitLab
Commit 423fce39 authored by Herdir's avatar Herdir
Browse files

website

parent d14941bf
Expand all Hide whitespace changes
Inline Side-by-side
img/log.png 0 → 100644
View file @ 423fce39
img/log.png

1023 Bytes

img/main.css 0 → 100644
View file @ 423fce39
/* A faire : adapter pour Safari et smartphone
bleu-vert: #003948
/*Général*/
body, div, h1, h2, h3, a, bouton, p {
font-family:Verdana, Arial, "Arial Black", "Times New Roman", serif;
font-size:1em;
line-height:1.24em;
color:#003948;
margin:0;
padding:0;
}
body {background-color:white;}
em {font-style:normal;}
bouton {cursor:pointer;}
a {text-decoration:none;}
.color0 p a, .color1 p a, #tutoriel a, .color2 b {text-decoration:underline;}
@media only screen and (max-device-width:980px) {
body {font-size:120%; width:100%;}
}
/* ----------------------------------------------------- */
/* Bande haut --------------------*/
#stripeTop {
width:100%;
height:2em;
background-color: #497ED5;
}
/* Chapeau ------------------------*/
header {
background:url(Illu1.jpg);
background-size:93%;
background-repeat:no-repeat;
background-position: bottom center;
margin:1em auto 0em;
height: 550px;
/* margin-bottom:-20px; */
width:80%;
} @media only screen and (min-width:1000px) {header {width: 800px;}}
header h1 {
text-align:left;
float:left;
font-size:2em;
color:#003948;
line-height:1.1em;
margin-bottom:.1em;
}
header bouton {
float:right;
margin:.2em 0 0 0;
background:url(Illu0.png);
background-size:100%;
background-repeat:no-repeat;
padding:1em 1em 1.3em 3em;
}
header bouton:hover {
opacity:.9;
}
header bouton p {
font-size:1.4em;
line-height:.8em;
float:right;
text-align:center;
margin-right:.2em;
font-weight:bold;
color:#fff;
}
header bouton p span {
font-size:.8em;
}
header h2{
clear:both;
font-size:1em;
color:#497ED5;
font-weight:normal;
}
@media only screen and (max-device-width:980px) {
header {
width:95%;
margin-left: auto;
margin-right: auto;
height:400px;
}
header h1 {
float:none;
font-size: 1.8em;
}
header bouton {
display:none;
}
header h2 {
margin-top:.6em;
}
#header-img {
width:80%
}
}
#textIntro, #Act {
background-color:#497ED5;
padding: 2em;
}
#textIntro p, #textIntro b {
margin:0 auto;
line-height : 1.4em;
width:80%;
font-size:1em;
color:white;
white-space:normal;
} @media only screen and (min-width:1000px) {#textIntro p {width: 800px;}}
#textIntro h1, #Act h1 {
color:white;
line-height : 1em;
text-align:center;
font-size:1.4em;
}
/* ------------------------------------------------------------- */
/*Main --------------------------------------------------------- */
#main, #main2 {
margin: 2em auto 3em;
width:100%;
clear:both;
}@media only screen and (min-width:1000px) {#main {width: 1000px;}#main2 {width: 1000px;}}
@media only screen and (max-device-width:980px) {
#main, #main2 {width:95%; margin:.2em auto;}}
#main p, #main2 p {
text-align:justify;
font-size: .9em;
}
#main ul {
font-size: .9em;
}
/* Intro ---------------------*/
table {
border-collapse:collapse;
margin:0 auto;
}
td {
width : 20em;
padding : 0 2em;
vertical-align:top;
text-align:center;
}
tr td:first-of-type + td {
border-left: 1px solid #e0a63a;
border-right: 1px solid #e0a63a;
}
#intros bouton, #main2 bouton {
font-size:.9em;
padding:.5em 1.5em;
color: #fff;
}
/*Titres*/
#main .titres td {
vertical-align:bottom;
padding-bottom:1em;
transition: border-bottom 0.6s, top 0.3s;
}
#main .titres td:hover {
position:relative;
top:-5px;
cursor:pointer;
transition: border-bottom 0.6s, top 0.3s, opacity 0.3s;
}
.titres h1 {font-size: 1.3em;text-align:center;}
.titres img {width:95%;}
@media only screen and (max-device-width:980px) {
#intros {display:none;}
#main .titres td { width:33%; padding:0; vertical-align:top;}
#main .titres h1 {font-size:.9em; font-weight:normal; padding:.2em; vertical-align:top;}
}
.titreOn {opacity : 1;border-bottom: 1px solid #fff;}
.titreOff {opacity: 0.7;border-bottom: 1px solid #e0a63a;}
.titreOff:hover {opacity:1;}
/* Visibles */
.visible, .hidden {overflow: hidden;}
.visible {visibility: visible; opacity: 1; transition: visibility 0s 0.2s, opacity 0.2s 0.2s linear;}
.pageContent .visible {transition: visibility 0s, opacity 0.2s linear;}
.visible td p, .visible .pageContent {transition: margin-top 0s 0.2s;}
.pageContent .visible p, .visble .pageSection {transition: margin-top 0s;}
.hidden {visibility: hidden;opacity: 0;transition: visibility 0s 0.2s, opacity 0.2s linear;}
.hidden td p, .hidden .pageContent, .pageContent .hidden p, .hidden .pageSection {margin-top: -10000em;transition: margin-top 0s 0.2s;}
/*Couleurs*/
h1.color0, .color0 h1, .color0 h2, .color0 bouton, .color0 b, .color0 em {color: #497ED5;}
#intros .color0 bouton, .color0.pageContent h1, #main2 table .color0 bouton {background-color:#497ED5;}
#intros .color0 bouton:hover, #main2 table .color0 bouton:hover {background-color:#4170bd;}
h1.color1, .color1 h1, .color1 h2, .color1 bouton, .color b, .color1 em{color: #d99923;}
#intros .color1 bouton, .color1.pageContent h1, #main2 table .color1 bouton {background-color:#d99923;}
#intros .color1 bouton:hover, #main2 table .color1 bouton:hover {background-color:#bf871f;}
h1.color2, .color2 h1, .color2 h2, .color2 bouton, .color2 b, .color2 em{color: #D45B35;}
#intros .color2 bouton, .color2.pageContent h1, #main2 table .color2 bouton {background-color:#D45B35;}
#intros .color2 bouton:hover, #main2 table .color2 bouton:hover {background-color:#ba502f;}
/*Pages*/
.pageContent {
width:60%;
margin:2em auto 0;
} @media only screen and (min-width:1000px) {.pageContent {width:600px;}}
.pageContent h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
}
.pageContent p {
padding:0 3em;
white-space:pre-line;
}
.pageContent bouton {
display:block;
font-size:.9em;
text-align:center;
}
.pageSection {
margin: 2em 0;
padding:1em 2em;
background-color:#eee;
}
.pageSection h2 {
font-size: 1.1em;
text-align:justify;
}
.pageSection p {
padding:0 1em;
}
.pageSection ul {
padding-right:1em;
}
.pageSection bouton{
text-align:left;
margin:0;
}
.pageSection p bouton {
font-size:1em;
display:inline;
}
@media only screen and (max-device-width:980px) {
.pageContent {width:100%;}
.pageSection {margin:1em 0; padding: 1em .4em;}
.pageSection p {padding: 0 .4em;}
#main h2 {text-align:left; font-size:1em;}
#imgBan img {display:none;}
}
/*Table loi*/
#tLoi td, div.tL{border:solid 1px #bbb;padding:1em 1em;margin:0; white-space:pre-line;}
#tLoi td {line-height : 1.2em;cursor:pointer; text-align:left;font-size:.8em;}
div.tL {text-align:justify; font-size:.85em; padding: 2em;}
.tL a {text-decoration:underline;}
#main div.tL ul {font-size:1em; padding:0 2em;}
#tLoi td:hover, div.tL {background:#fff;}
@media only screen and (max-device-width:980px) {
#tLoi td {display:block; white-space:pre-line; font-size:.7em; line-height : 1em;}
div.tL {font-size:.8em; padding: .4em;}
}
/* Tuto */
/*#fondTuto {
background-color:#ccc;
z-index:10;
height:100%;
opacity : .5;
width:100%;
position:fixed;
}
.tuto {
position:relative;
z-index:20;
background-color:white;
padding: 2em 4em;
margin:2em auto 2em;
border-radius : 2em;
-moz-box-shadow: 0px 0px 20px 10px #bbb;
-webkit-box-shadow: 0px 0px 20px 10px #bbb;
-o-box-shadow: 0px 0px 20px 10px #bbb;
box-shadow: 0px 0px 20px 10px #bbb;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#bbb, Direction=NaN, Strength=20);
}*/
/*Main2*/
@media only screen and (max-device-width:980px) {
#main2 .titres td {display:block; width:90%; padding:0; margin:0 auto; border:none;}
#main2 td img {width:70%; display:block; margin:0 auto;}
#main2 bouton {display:block; margin:0 2em;}
}
/* Footer */
footer {
margin-top:1em;
background-color: #497ED5;
padding:1.5em 0 3em;
}
footer p {
color:#fff;
margin: 0 auto;
} @media only screen and (min-width:1000px) {footer p {width: 1000px;}}
footer img {width:8em; border:.7em solid #fff; margin:0em 2em; float:left;}
@media only screen and (max-device-width:980px) {footer img{float:none; display:block; margin:0 auto 1em;} footer p {padding: 0 1em;}}
/* Tutoriel ------------------------------------------------------------------ */
#tutoriel {
margin: 0 auto;
padding: 2em 0;
width:60%;
}@media only screen and (min-width:1000px) {#tutoriel {width: 600px;}}
@media only screen and (max-device-width:980px) {
#tutoriel {width:95%; margin:.2em auto;}}
#tutoriel h1 {
padding:.5em;
color:#fff;
font-size:1.3em;
font-weight:bold;
text-align:center;
background-color:#D45B35;
}
#tutoriel h2, #tutoriel h3 {
font-size:1.2em; display:inline;
}
#tutoriel h3 {
font-weight:normal;
}
#tutoriel div {
margin: 2em auto;
padding:1em 3em;
background-color:#eee;
font-size:.9em;
text-align:justify;
white-space:pre-line;
}
#tutoriel ul, ol {
white-space: normal;
line-height : 1.4em;
}
#tutoriel b {line-height : 2em;}
#tutoriel div img {margin:0 auto; border:1px solid black; display:block; max-width:100%;}
#tutoriel em, .retourTuto, #tutoriel h2, #tutoriel h3 {color:#D45B35;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:-1em; text-decoration:none;}
#tutoriel #retourSite {margin-left:-4em;font-size:1.2em; color:#fff; text-decoration:none; font-weight:bold; background-color:#d99923; padding: .4em .8em;}
@media only screen and (max-device-width:980px) {
#tutoriel div {padding : .4em;}
#tutoriel #retourSite {margin-left:0em;}
#tutoriel .retourTuto, #tutoriel h2 {margin-left:0;}
}
\ No newline at end of file
index.html 0 → 100644
View file @ 423fce39
This diff is collapsed.
outils/Firefox.html 0 → 100644
View file @ 423fce39
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Firefox&nbsp;: choisissez un navigateur libre</title>
<link rel="shortcut icon" href="../img/log.png">
<link rel="stylesheet" href="../img/main.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width" />
<script>xmlhttp=new XMLHttpRequest();xmlhttp.open("GET","../compteur.php?timer=4",true); xmlhttp.send(null);</script>
</head>
<div id="stripeTop"></div>
<header style="background:none; height:auto">
<h1>REPRENEZ LE CONTRÔLE<br/>DE VOS DONNÉES</h1>
<a href="..#Act"><bouton><p>Contactez<br/><span>vos députés</span></p></bouton></a>
<h2>Notre vie privée est en danger&nbsp;: agissons maintenant !</h2>
</header>
<div id="tutoriel">
<br/>
<a id="retourSite" href="..">Retour au site</a><br/><br/>
<br/>
<h1>Utilisez et configurez un navigateur libre</h1>
<br/>
<br/>
<img src="../img/Firefox_logo.png" style="display:block; margin:0 auto;">
<br/>
<ol><b>Menu</b>
<li><a href="#1">Qu'est-ce-qu'un navigateur libre&nbsp;?</a></li>
<li><a href="#2">Pourquoi utiliser un navigateur libre&nbsp;?</a></li>
<li><a href="#3">Installer Firefox</a></li>
<li><a href="#4">Paramétrer la gestion de mes cookies</a></li>
<li><a href="#5">Ne pas transmettre de référant</a></li>
</ol>
<div id="1">
<h2>1. Qu'est-ce-qu'un navigateur libre&nbsp;?</h2>
Un navigateur est un logiciel qui permet d'accéder à des sites Internet&nbsp;: vous en utilisez un pour lire ces lignes.
Un logiciel est libre quand son code source peut être librement lu, modifié et partagé par tout le monde.
Le code source d'un logiciel est la liste de toutes les instructions qu'il utilise pour fonctionner. Un code source est généralement la seule chose dont un logiciel a besoin pour exister, en plus d'éventuels éléments lui conférant son aspect visuel et/ou sonore.
En livrant son code source, un logiciel libre se met donc entièrement à nu. Tout le monde peut exactement savoir comment il fonctionne et ce qu'il permet de réaliser, puis le reproduire ou l'améliorer.
Firefox est un navigateur et un logiciel libre.
Contrairement aux autres navigateurs les plus populaires (Google Chrome, Safari et Internet Explorer), l'intégralité de son code source peut être <a href="https://developer.mozilla.org/fr/docs/T%C3%A9l%C3%A9chargement_du_code_source_de_Mozilla#Versions_distribu.C3.A9es_(releases)">téléchargé</a> sur le site de Mozilla - les personnent qui le développent. N'importe qui peut alors librement étudié ce code et le transformer en une nouvelle alternative de Firefox, que tout le monde pourrait utiliser.
<a href="#tutoriel" class="retourTuto">Retour</a>
</div>
<div id="2">
<h2>2. Pourquoi utiliser un navigateur libre&nbsp;?</h2>
En étant libre, Firefox a pu être étudié par des milliers d'informaticiens bénévoles et indépendants depuis une dizaine d'années. Ces personnes ont depuis continuellement veillé à rechercher et réparer les failles de sécurité que le navigateur contiendrait.
Cela confère à Firefox une garantie de sécurité qu'aucun de ses concurrents les plus populaires ne pourrait offrir. En effet, les codes sources de Google Chrome, de Safari ou d'Internet Explorer ne peuvent être étudiés dans leur intégralité que par les quelques informaticiens employés pour les développer. Et ces employés seront toujours beaucoup moins nombreux que les personnes pouvant étudier et modifier le code de Firefox.
Ces différences de sécurité entre logiciels libres et non libres se retrouvent évidemment pour tout autre type de logiciel. Pour ces raisons, l'ensemble des outils que nous vous présentons sur ce site sont libres.
<a href="#tutoriel" class="retourTuto">Retour</a>
</div>
<div id="3">
<h2>3. Installer Firefox</h2>
Vous pouvez <a href="https://www.mozilla.org/fr/firefox/new/">télécharger Firefox</a> sur le site de Mozilla. Son installation est parfaitement classique, et nous vous laissons le soin de la mener à bien.
Les sections suivantes vous expliqueront comment le configurer pour qu'il vous permette de maîtriser au mieux les traces que vous laissez en naviguant sur Internet.
<a href="#tutoriel" class="retourTuto">Retour</a>
</div>
<div id="4">
<h2>4. Paramétrer la gestion de mes cookies</h2>
Lorsque vous visitez un site Internet, ce site peut vous proposer de télécharger sur votre ordinateur un cookie. En principe, votre navigateur le télécharge automatiquement.
<h3>Qu'est-ce-qu'un cookie&nbsp;?</h3>
Un cookie est un petit fichier envoyé par un site Internet que vous visitez. Ce fichier contient une poignée d'informations que ce site souhaite pouvoir réutiliser au cours de votre visite actuelle, ou lors de vos prochaines visites.
Ces informations peuvent être un identifiant unique que le site vous donne afin de vous fournir des services personnalisés. Par exemple, cela peut lui permettre d'enregistrer des choix que vous y avez faits tel que votre panier d'achat sur un site marchand. Un cookie peut aussi simplement contenir le nom avec lequel vous avez l'habitude de vous connecter à un site. Mais un cookie peut aussi être utilisés pour vous «&nbsp;marquer&nbsp;» et suivre votre comportement aux quatre coins d'Internet.
De nombreuses fonctionnalités utiles et respectant votre vie privée sont possibles grâce aux cookies, et il ne s'agit donc sûrement pas d'en bannir l'utilisation. Il faut seulement empêcher que celle-ci n'échappe à notre contrôle.
<h3>Comment Firefox peut m'éviter d'être «&nbsp;marqué&nbsp;» par des cookies&nbsp;?</h3>
Vous pourriez demander à Firefox de complètement arrêter de télécharger les cookie que lui proposent les sites que vous visitez. Mais, comme nous l'avons dit, ce serait vous priver de nombreuses fonctionnalités utiles et légitimes. À la place, vous pouvez lui demander de faire deux autres choses, qui seront largement suffisantes.
Premièrement, chaque fois que vous le fermez, Firefox peut effacer automatiquement tous les cookies qu'il a téléchargés au cours de votre navigation. Ceci permet d'empêcher un site Internet de se souvenir et d'étudier tout ce que vous y avez fait au cours de vos différentes visites, et de pouvoir alors en dresser un portrait de votre comportement&nbsp;;
Secondement, Firefox peut n'enregistrer sur votre ordinateur que les cookies proposés par les sites exacts que vous visitez. Ceci permet d'empêcher des sites tiers, auxquels vous accédez indirectement et sans vous en rendre compte, d'utiliser des cookies pour vous tracer partout où ils vous trouveront.
Concrètement, lorsque vous voyez une publicité affichée sur un site Internet, c'est en réalité souvent un autre site qui vous la montre&nbsp;: grâce à cette publicité, cet autre site peut vous faire télécharger un cookie lui permettant de vous suivre sur tous les autres sites où vous verrez une autres de ses publicités.
Pour faire ces deux choses&nbsp;:<ul>
<li>Si vous êtes sous Windows, depuis la barre de menu, allez dans <em>Firefox > Options > Options</em>&nbsp;;</ul>
<img src="../img/Firefox_3.png">
<ul><li>Si vous êtes sous Mac OS X, depuis la barre de menu, allez dans <em>Firefox > Préférences</em>&nbsp;;</li>
<li>Si vous êtes sous GNU/Linux, allez dans <em>Éditions > Préférences</em>&nbsp;;</li>
<li>Sur la fenêtre ouverte, cliquez sur l'onglet <em>Vie privée</em>&nbsp;;</li>
<li>Sous <em>Historique</em>, indiquez comme règles de conservation <em>utiliser les paramètres personnalisés pour l'historique</em>&nbsp;;</li>
<li>Un peu plus bas, laissez coché <em>Accepter les cookies</em>&nbsp;;</li>
<li>Pour <em>Accepter les cookies tiers</em>, indiquez <em>jamais</em>&nbsp;;</li>
<li>Pour <em>Les conserver jusqu'à</em>, indiquez <em>la fermeture de Firefox</em>&nbsp;;</li>
<li>C'est fait. Vous pouvez fermer.</li></ul>
<img src="../img/Firefox_1.png">
<a href="#tutoriel" class="retourTuto">Retour</a>
</div>
<div id="5">
<h2>5. Ne pas transmettre de référant</h2>
Lorsque vous accédez à un site Internet en cliquant sur un lien, votre navigateur envoie au site d'arrivée l'adresse du site depuis lequel vous êtes parti.
Cette information est appelée «&nbsp;référant&nbsp;».
Firefox peut être configuré afin de fausser ce référant et de cacher de telles informations aux sites que vous visitez. En effet, ces informations peuvent être utilisées à votre insu pour faire une liste de vos déplacements sur Internet.
Pour ce faire&nbsp;:<ul>
<li>Ouvrez un nouvel onglet dans Firefox et tapez dans la barre d'adresse <em>about:config</em>, afin d'accéder aux configurations avancées du navigateur&nbsp;;</li>
<li>Acceptez le message d'avertissement&nbsp;;</li>
<li>Dans la barre de recherche, entrez <em>referer</em>&nbsp;;</li>
<li>Double-cliquez sur <em>network.http.sendRefererHeader</em>&nbsp;;</li>
<li>Dans la nouvelle fenêtre, remplacez la valeur présente par <em>0</em> puis validez&nbsp;;</li>
<li>C'est fait. Vous pouvez fermer l'onglet.</li></ul>
<img src="../img/Firefox_2.png">
<a href="#tutoriel" class="retourTuto">Retour</a>
</div>
<a id="retourSite" href="..">Retour au site</a><br/>
</div>
<footer>
<p>
<img src="http://www.laquadrature.net/files/logo_laquadrature-net_titre_carre_moyen.png">
<br/>
Ce site site a été développé par des bénévoles, avec le soutien de <b>La Quadrature du Net</b>.<br/>
<br/>
La Quadrature du Net est une association défendant les <b>droits et libertés sur Internet</b> <br/>
des citoyens en agissant auprès des législateurs français et européens.<br/>
<br/>
Visitez <b><a href="https://www.laquadrature.net/fr" target="_blank" style="color:#fff; text-decoration:underline;">son site</a></b> pour découvrir ses autres actions et y prendre part.
<br/><br/>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/deed.fr"><img alt="Licence Creative Commons" style="border-width:0; width:6em; float:right;" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a><div style="font-size:.9em; width:80%; text-align:right;">Écrivez-nous à contact[at]controle-tes-donnees.net<div>
</p>
</footer>
</body>
</html>
\ No newline at end of file
outils/GNU_Linux.html 0 → 100644
View file @ 423fce39
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>GNU/Linux&nbsp;: devenez libre !</title>
<link rel="shortcut icon" href="../img/log.png">
<link rel="stylesheet" href="../img/main.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width" />
<script>xmlhttp=new XMLHttpRequest();xmlhttp.open("GET","../compteur.php?timer=11",true); xmlhttp.send(null);</script>