website

img/main.css

+
+/* 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

outils/Ixquick.html

+<!DOCTYPE html>
+<html lang="fr">
+
+	<head>
+		<meta charset="utf-8">
+		<title>Moteurs de recherche respectant votre vie privée</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=5",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 un moteur de recherche <br/>qui ne vous surveille pas</h1>
+			<br/>
+			<br/>
+			<img src="../img/Ixquick_logo.gif" style="display:block; margin:0 auto;">
+			<br/>
+			<ol><b>Menu</b>
+			<li><a href="#1">Pourquoi ne pas utiliser Google, Bing ou Yahoo&nbsp;?</a></li>
+			<li><a href="#2">Les alternatives décentralisées</a></li>
+			<li><a href="#3">Les alternatives centralisées</a></li>
+			<li><a href="#4">Intégrer Ixquick à Firefox</a></li>
+			</ol>
+
+			<div id="1">
+				<h2>1. Pourquoi ne pas utiliser Google, Bing ou Yahoo&nbsp;?</h2>
+
+					Les moteurs de recherche les plus populaires gagnent de l'argent en proposant de la publicité sur leur page ou leurs autres services.
+
+					Or, l'une des façons de proposer la publicité la plus efficace est justement d'analyser les recherches que les personnes font sur Internet. Cela révèle leurs besoins et leurs préoccupations et permet ainsi de prédire ce qu'ils auront envie d'acheter. Ces moteurs analysent alors naturellement les recherches faites par leurs utilisateurs afin d'en dresser le portrait le plus détaillé. Les risques liés à l'existence d'un tel portrait sont trop grands pour que nous les laissions faire.
+
+					Nous vous invitons à consulter <a href="http://www.aolstalker.com">AOL Stalker</a> (en anglais seulement). de l'année 2006. Chaque entrée est associée au numéro «&nbsp;anonyme&nbsp;» de son auteur&nbsp;: vous pouvez alors consulter toutes les recherches réalisées par chacune de ces personnes au cours des ces trois mois.
+
+					Vous réaliserez combien l'anonymat que les moteurs de recherche prétendent s'imposer est factice. Puis combien nos recherches en disent long sur nous quand elles sont observées dans leur ensemble. Vous en trouverez les exemples les plus flagrants dans la section «&nbsp;Popular users&nbsp;».
+
+					<a href="#tutoriel" class="retourTuto">Retour</a>
+
+				</div>
+
+				<div id="2">
+					<h2>2. Les alternatives décentralisées</h2>
+
+					Certains développeurs tentent de créer des moteurs de recherche libres et décentralisés.
+
+					Un service décentralisé repose sur la collaboration de plusieurs personnes indépendantes les unes des autres.
+
+					Ces personnes n'ont aucun chef qui décide de ce qu'elles doivent faire et n'importe qui peut les rejoindre pour participer au fonctionnement du service.
+
+					Si un moteur de recherche est décentralisé, les requêtes que lui font ses utilisateur ne sont donc pas traitées par une seule personne. Elles le sont par l'ensemble des personnes qui participent à son fonctionnement. Ainsi, aucune de ces personne ne peut s'approprier le moteur pour le transformer en un outil de surveillance.
+
+					De plus, si ce moteur est libre, chacun peut étudier son fonctionnement. On peut ainsi s'assurer que le moteur ne permet pas aux personnes qui le font fonctionner d'en surveiller les utilisateurs.
+
+
+					<img src="../img/Seeks_logo.png">
+					Parmi ces projets, nous vous conseillons de vous intéresser au projet <a href="http://www.seeks-project.info/site/">Seeks</a>. Ce moteur, en plus de ses autres caractéristiques, est décentralisé, et peut donc être utilisé à partir de différents points du réseau, appelés «&nbsp;nœuds&nbsp;». Vous pouvez essayer ce moteur à partir de <a href="http://www.seeks.fr/">ce nœud-ci</a>.
+
+					Seeks n'est hélas pas assez abouti pour que vous puissiez l'utiliser comme une alternative totale aux moteurs dont vous avez l'habitude. Mais il est un exemple encourageant de la direction que nous devons prendre et mérite pour cela votre attention.
+
+					<a href="#tutoriel" class="retourTuto">Retour</a>
+
+				</div>
+
+				<div id="3">
+				<h2>3. Les alternatives centralisées</h2>
+
+					Des moteurs tout aussi centralisés que Google ou Bing peuvent aussi tenter de concurrencer ces derniers en axant leur politique sur les questions de vie privée.
+
+					Pour ce faire, ces moteurs assurent ne pas enregistrer ni analyser les recherches envoyées par leurs utilisateurs. La pertinence de ces alternatives dépend donc de la confiance qu'on peut placer dans une telle promesse.
+
+
+				<h3>DuckDuckGo</h3>
+
+					L'un de ces moteurs est <a href="https://duckduckgo.com/">DuckDuckGo</a>. Il cherche ses résultats auprès d'une cinquantaines de sources, dont Wikipédia, Yahoo et Bing. Il recherche ces résultats «&nbsp;à la place&nbsp;» de ses utilisateurs. Cela permet à ces derniers de bénéficier de Yahoo ou de Bing sans avoir à s'y exposer personnellement et y être analysés.
+
+					Hélas, le siège social de DuckDuckGo se trouve aux États-Unis, et le gouvernement de ce pays dispose de pouvoirs démesurés sur les entreprises qui s'y trouvent. Si DuckDuckGo nous assurait que le gouvernement américain ne pourrait jamais utiliser son moteur afin d'en surveiller les utilisateurs, nous ne pourrions malheureusement pas le croire sur parole, en dépit de toute sa bonne foi.
+
+
+				<h3>Ixquick</h3>
+
+					<a href="https://ixquick.com/">Ixquick</a> fonctionne globalement de la même façon que DuckDuckGo. Il va chercher ses résultats sur dix autres moteurs et sites Internet, dont AOL, Bing, Google et Wikipédia.
+