index.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. <!DOCTYPE html>
  2. <html lang="fr-fr">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>sans-nuage.fr, serveur libre communautaire ! | sans-nuage.fr, serveur libre communautaire !</title>
  7. <meta name="HandheldFriendly" content="True">
  8. <meta name="MobileOptimized" content="320">
  9. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  10. <meta name="generator" content="Hugo 0.30.2" />
  11. <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
  12. <link rel="stylesheet" href="css/bootstrap-4-0-0-beta.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  13. <link rel="stylesheet" href="icon/open-iconic-master/font/css/open-iconic-bootstrap.css">
  14. <link rel="stylesheet" href="icon/Fork-Awesome-1.1.5/css/fork-awesome.min.css" integrity="sha256-P64qV9gULPHiZTdrS1nM59toStkgjM0dsf5mK/UwBV4=">
  15. <link href="css/anton.css" id="link-webfont" rel="stylesheet">
  16. <link href='css/main.css' rel='stylesheet' type="text/css" />
  17. <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
  18. <link href="./index.xml" rel="alternate" type="application/rss+xml" title="sans-nuage.fr, serveur libre communautaire !" />
  19. <link href="./index.xml" rel="feed" type="application/rss+xml" title="sans-nuage.fr, serveur libre communautaire !" />
  20. <script src="js/jquery-3.2.1.min.js"></script>
  21. <script src="js/popper-1-12-6.min.js" crossorigin="anonymous"></script>
  22. <script src="js/bootstrap-4-0-0-beta.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  23. </head>
  24. <body data-spy="scroll" data-target="#menu" data-offset="50" class="">
  25. <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" role="navigation" id="menu">
  26. <a class="navbar-brand" href="#home">
  27. <img src="img/logo-sans-nuage.png" class="d-inline-block align-top" alt="sans-nuage.fr, serveur libre et communautaire" width="50"> Sans-nuage.fr
  28. </a>
  29. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  30. <span class="navbar-toggler-icon"></span>
  31. </button>
  32. <div class="collapse navbar-collapse " id="navbarNav">
  33. <ul class="navbar-nav ml-auto">
  34. <li class="nav-item"><a href="#home" class="nav-link active"><i class='material-icons'>home</i> </a></li>
  35. <li class="nav-item"><a href="#about" class="nav-link"> À propos</a></li>
  36. <li class="nav-item"><a href="#services" class="nav-link"> Services</a></li>
  37. <li class="nav-item d-none d-lg-inline-block"><a href="#register" class="nav-link btn btn-success"> S&#39;inscrire</a></li>
  38. <li class="nav-item d-lg-none"><a href="#register" class="nav-link">S'inscrire</a></li>
  39. </ul>
  40. </div>
  41. </nav>
  42. <header class="container-fluid rl-bg-color-1" id="home">
  43. <div class="row justify-content-end h-100">
  44. <div class="col-lg-6 my-auto">
  45. <span class="mt-5"><span id="home-feature">sans-nuage.fr, des services en ligne alternatifs,<br />
  46. </span>
  47. sur un serveur libre et communautaire&nbsp;!</span>
  48. <div class="mt-5 text-center">
  49. <a href="https://sans-nuage.fr/yunohost/sso/" class="btn btn-lg btn-outline-light">Se connecter</a>
  50. <a href="#about" class="btn btn-lg btn-dark">En savoir plus</a>
  51. </div>
  52. </div>
  53. <div id="home-illustration" class="col-lg-6 order-lg-first d-none d-sm-block">
  54. </div>
  55. </div>
  56. </header>
  57. <section class="container-fluid rl-bg-color-2" id="about">
  58. <div class="container">
  59. <div class="row">
  60. <div class="col-md-6">
  61. <h3><i class="material-icons">cached</i>&nbsp;Des&nbsp;services alternatifs</h3>
  62. <p>L'association Alsace Réseau Neutre propose à travers le serveur sans-nuage.fr des services en ligne alternatifs à ceux des géants du net.</p>
  63. <p>Cette initiative s'inscrit dans la dynamique du Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires qui vise à créer un Internet plus respectueux de ses usagers.</p>
  64. </div>
  65. <div class="col-md-6">
  66. <h3><i class="material-icons">cloud_off</i>&nbsp;Pourquoi "sans&nbsp;nuage"</h3>
  67. <p>Parce que le Cloud c'est l'ordinateur d'un autre, on ne sait où, géré par on ne sait qui&nbsp;! A l'inverse, sans-nuage.fr vous propose de devenir membre de l'association et ainsi d'avoir une part de contrôle sur le serveur que vous utilisez.</p>
  68. <p>Avec sans-nuage.fr, vous savez où se trouve exactement vos données, quelles sont les personnes ayant des accès administrateur et vous avez la possibilité de participer à l'amélioration des services proposés.</p>
  69. </div>
  70. </div>
  71. <div class="row">
  72. <div class="col-sm-12">
  73. <img src="img/about/arn.png" class="rounded-circle float-left mr-3" style="width:150px"/>
  74. <h3>Alsace Réseau Neutre</h3>
  75. <p>L'association Alsace Réseau Neutre est un Fournisseur d'Accès à Internet associatif qui vise entre autre à&nbsp;: sensibiliser le public aux enjeux du numérique, permettre de se réapproprier l'outil informatique, notamment les réseaux et proposer des alternatives gérées par et pour des citoyens.</p>
  76. <p>C'est dans ce cadre, qu'ARN a décidé de l'ouverture du service sans-nuage.fr à destination de ses adhérent⋅e⋅s. Cependant, il n'est pas exclu, selon l'implication des membres pour ce projet, qu'à terme sans-nuage.fr devienne une association à part entière afin entre autre d'éviter de mélanger le rôle de Fournisseur d'Accès avec celui de Fournisseur de Service.</p>
  77. </div>
  78. </div>
  79. </div>
  80. </section>
  81. <section class="container-fluid" id="services">
  82. <div class="container">
  83. <h2>Les services</h2>
  84. <p>Sans-nuage.fr propose aux adhérent⋅e⋅s d'Alsace Réseau Neutre un compte permettant d'accéder au services suivants:</p>
  85. <div class="card-columns">
  86. <div class="card">
  87. <div class="card-body">
  88. <span class="fa fa-envelope" aria-hidden="true"></span>
  89. <h5 class="card-title">Une boite mail en @sans-nuage.fr</h5>
  90. <p class="card-text">Vos mails sur un serveur qui respecte votre vie privée !</p>
  91. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-1" aria-expanded="false" aria-controls="service-details-1">En savoir plus</a>
  92. </div>
  93. <ul class="list-group list-group-flush collapse service-details-1">
  94. <li class="list-group-item h-double">✓ 1Go</li>
  95. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Webmail" data-content="Un webmail est une interface accessible avec votre navigateur internet qui vous permet de consulter et d'envoyer vos mails">Webmail</a> RoundCube</li>
  96. <li class="list-group-item">✓ Antispam</li>
  97. <li class="list-group-item">✓ Support <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Pop3 et IMAP" data-content="Ces 2 protocoles vous permettent de vous connecter à votre adresse mail via un client mail comme Thunderbird ou une app smartphone">Pop3 et IMAP</a></li>
  98. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Alias mail" data-content="Un alias est une adresse électronique qui redirige vers une autre préexistante. Les messages envoyés à l'alias sont directement transférés, sans passer par une boîte de courrier électronique. Les alias sont utiles pour trier vos mails et éviter de donner votre adresse principale aux sites qui demandent une inscription et risquent de vous spammer."> Alias mails</a> illimité</li>
  99. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Sélecteur mail" data-content="Le sélecteur + permet de personnaliser votre adresse mail par exemple sam@sans-nuage.fr en sam+pro@sans-nuage.fr. Il n'y a rien à faire si ce n'est communiquer votre adresse mail avec ce + et le qualificatif choisis. Cette astuce peut être utilisé pour détecter les entreprises qui revendent vos données.">Sélecteur "+"</a> possible</li>
  100. </ul>
  101. </div>
  102. <div class="card">
  103. <div class="card-body">
  104. <span class="fa fa-xmpp" aria-hidden="true"></span>
  105. <h5 class="card-title">Un compte XMPP</h5>
  106. <p class="card-text">Discutez en temps réels et accèder au réseau social Movim grâce à ce compte XMPP</p>
  107. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-3" aria-expanded="false" aria-controls="service-details-3">En savoir plus</a>
  108. </div>
  109. <ul class="list-group list-group-flush collapse service-details-3">
  110. <li class="list-group-item h-double">✓ Tchat temps réel</li>
  111. <li class="list-group-item">✓ Micro Blogging</li>
  112. <li class="list-group-item">✓ Salon de discussion</li>
  113. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="App smartphone XMPP" data-content="Par exemple avec l'app Conversation">Compatible smartphone</a></li>
  114. </ul>
  115. </div>
  116. <div class="card">
  117. <div class="card-body">
  118. <span class="fa fa-rss" aria-hidden="true"></span>
  119. <h5 class="card-title">TTRSS, lecteur de flux RSS</h5>
  120. <p class="card-text">Abonnez vous aux flux RSS de vos sites web préférés et suivez ainsi sur une même page les nouveaux articles publiés</p>
  121. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-5" aria-expanded="false" aria-controls="service-details-5">En savoir plus</a>
  122. </div>
  123. <ul class="list-group list-group-flush collapse service-details-5">
  124. <li class="list-group-item h-double">✓ Tris en catégorie</li>
  125. <li class="list-group-item">✓ Usage de filtres</li>
  126. <li class="list-group-item">✓ Republication</li>
  127. <li class="list-group-item">✓ Compatible smartphone</li>
  128. </ul>
  129. </div>
  130. <div class="card">
  131. <div class="card-body">
  132. <span class="fa fa-image" aria-hidden="true"></span>
  133. <h5 class="card-title">Strut, création de présentation</h5>
  134. <p class="card-text">Strut est un éditeur de présentation qui permet de faire des transitions originales</p>
  135. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-7" aria-expanded="false" aria-controls="service-details-7">En savoir plus</a>
  136. </div>
  137. <ul class="list-group list-group-flush collapse service-details-7">
  138. <li class="list-group-item h-double">✓ Inclusion de photo</li>
  139. <li class="list-group-item">✓ Inclusion de vidéo</li>
  140. <li class="list-group-item">✓ Intégrable dans un site web</li>
  141. </ul>
  142. </div>
  143. <div class="card">
  144. <div class="card-body">
  145. <span class="fa fa-tasks" aria-hidden="true"></span>
  146. <h5 class="card-title">Wekan, gestion de tâche</h5>
  147. <p class="card-text">Définissez et organisez vos tâches grâce à la méthode kanban</p>
  148. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-2" aria-expanded="false" aria-controls="service-details-2">En savoir plus</a>
  149. </div>
  150. <ul class="list-group list-group-flush collapse service-details-2">
  151. <li class="list-group-item h-double">✓ Création de tableaux kanban</li>
  152. <li class="list-group-item">✓ Edition de tâches rapides</li>
  153. <li class="list-group-item">✓ Tris, filtre...</li>
  154. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Invitation" data-content="Lorsque vous créez un tableau Kanban, vous pouvez inviter quelques membres de votre association ou groupe qui ne sont pas membre d'ARN. Toutefois, les associations déclarées faisant usages de wekan avec leurs membres sont invitées à adhérer à Alsace Réseau Neutre, afin qu'il y ai une représentation correcte des usagers de sans-nuage.fr, pour les groupes informels, au moins une personne du groupe doit être membre d'ARN.">Invitation de personnes non-membre</a></li>
  155. </ul>
  156. </div>
  157. <div class="card">
  158. <div class="card-body">
  159. <span class="fa fa-file-text" aria-hidden="true"></span>
  160. <h5 class="card-title">Etherpad & Libreto, édition collaborative</h5>
  161. <p class="card-text">Créez vos documents en ligne, discutez, modifiez les à plusieurs et regroupez-les</p>
  162. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-4" aria-expanded="false" aria-controls="service-details-4">En savoir plus</a>
  163. </div>
  164. <ul class="list-group list-group-flush collapse service-details-4">
  165. <li class="list-group-item h-double">✓ Une couleur par personne</li>
  166. <li class="list-group-item">✓ Adapté pour une prise de note</li>
  167. <li class="list-group-item">✓ Mode lecture seule</li>
  168. <li class="list-group-item">✓ Libreto: wiki de pads</li>
  169. </ul>
  170. </div>
  171. <div class="card">
  172. <div class="card-body">
  173. <span class="fa fa-address-card" aria-hidden="true"></span>
  174. <h5 class="card-title">Nextcloud, synchronisation d'équipements</h5>
  175. <p class="card-text">Le Nextcloud de sans-nuage.fr ne permet pas la synchronisation de fichier mais vous permet de synchroniser vos contacts et calendriers</p>
  176. <a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-6" aria-expanded="false" aria-controls="service-details-6">En savoir plus</a>
  177. </div>
  178. <ul class="list-group list-group-flush collapse service-details-6">
  179. <li class="list-group-item h-double">✓ Synchro de contacts</li>
  180. <li class="list-group-item">✓ Synchro de calendriers</li>
  181. <li class="list-group-item">✓ <a role="button" tabindex="0" data-toggle="popover" data-trigger="focus" title="Groupe" data-content="Il est possible de nous demander la création d'un groupe privé dans Nextcloud afin de partager vos contacts et calendriers par exemple entre quelques les membres de votre association.">Groupe privé (sur demande)</a></li>
  182. </ul>
  183. </div>
  184. <div class="card">
  185. <div class="card-body">
  186. <span class="fa fa-calendar-check-o" aria-hidden="true"></span>
  187. <h5 class="card-title">OpenSondage, vote et choix de dates</h5>
  188. <p class="card-text">Créez des petits sondages pour prendre rendez-vous facilement.</p>
  189. <!--<a href="#" class="card-link" data-toggle="collapse" data-target=".service-details-8" aria-expanded="false" aria-controls="service-details-8">En savoir plus</a>-->
  190. </div>
  191. <ul class="list-group list-group-flush collapse service-details-8">
  192. </ul>
  193. </div>
  194. </div>
  195. <div class="alert alert-warning" role="alert">
  196. Concernant Wekan, lorsque vous créez un tableau Kanban, vous pouvez inviter quelques membres de votre association ou groupe non-membre d'ARN. Toutefois, les associations déclarées faisant usage de wekan avec leurs membres sont invitées à adhérer à Alsace Réseau Neutre, afin qu'il y ai une représentation correcte des usagers de sans-nuage.fr, pour les groupes informels, au moins une personne du groupe doit être membre.
  197. <hr>
  198. Concernant Nextcloud, il est possible de nous demander la création d'un groupe vous permetant d'inviter d'autres personnes de la même façon.</div>
  199. <div class="alert alert-info" role="alert">
  200. Le serveur virtuel sans-nuage.fr se trouve dans la demi-baie d'Alsace Réseau Neutre dans le datacenter de Schiltigheim. Il dispose de 100Go pour l'ensemble de ses usagers. Une sauvegarde chiffrée quotidienne est réalisée chez un adhérent (non loin de Colmar) la clé de déchiffrement n'est pas présente chez cet adhérent. Pour connaître, la liste des personnes ayant un accès administrateur, le mieux est de nous rencontrer lors d'un apéro ARN ou de demander par mail...</div>
  201. </div>
  202. </section>
  203. <section class="container-fluid rl-bg-color-3" id="register">
  204. <div class="container">
  205. <h2>S'inscrire</h2>
  206. <div class="row">
  207. <div class="col-md-6">
  208. <p>Les services sans-nuage.fr sont réservés aux adhérent⋅e⋅s d'Alsace Réseau Neutre.</p>
  209. <p>Si vous n'êtes pas encore adhérent⋅e, il convient donc de:<ul>
  210. <li>Lire les <a href="https://wiki.arn-fai.net/administratif:statuts" target="_BLANK">statuts de l'association</a></li>
  211. <li>S'enregistrer sur l'<a href="https://adherents.arn-fai.net" target="_BLANK">espace adhérent</a></li>
  212. <li>Régler la cotisation annuelle de 15€</li>
  213. </ul>
  214. </p>
  215. <p>Il est ensuite possible de remplir ce formulaire pour demander un compte sans-nuage.fr.</p>
  216. </div>
  217. <div class="col-md-6">
  218. <form id="contact-form">
  219. <div class="form-group">
  220. <label for="contact-input-name">Pseudo</label>
  221. <input type="text" required class="form-control" id="contact-input-name" name="contact-input-name" placeholder="Pseudo">
  222. <small id="emailHelp" class="form-text text-muted">Identifiant utilisé pour se connecter sur l'espace adhérent.</small>
  223. </div>
  224. <div class="form-group">
  225. <label for="contact-input-message">Votre message</label>
  226. <textarea class="form-control" required id="contact-input-message" name="contact-input-message" rows="7">Bonjour,
  227. Je souhaite créer mon compte sans-nuage.fr.
  228. Merci</textarea>
  229. </div>
  230. <button type="submit" class="btn btn-primary">Envoyer</button><span id="contact-sent" class="ml-2"></span>
  231. </form>
  232. </div>
  233. </div>
  234. </section>
  235. <script>
  236. $(document).ready(function($) {
  237. $("#contact-form").submit(function (e) {
  238. e.preventDefault();
  239. var form=$("#contact-form");
  240. if ($('#contact-input-name').is(":valid")) {
  241. $('#contact-sent').text('');
  242. $.post( "mail.php", form.serialize())
  243. .done(function( data ) {
  244. $('#contact-sent').text('Votre message a bien été envoyé. Merci !');
  245. form[0].reset();
  246. })
  247. .fail(function() {
  248. $('#contact-sent').text('Une erreur est survenue lors de l\'envoi.');
  249. });
  250. }
  251. else {
  252. $('#contact-sent').text('');
  253. }
  254. });
  255. });
  256. </script>
  257. <footer>
  258. <div class="container text-center">
  259. <a href="#legal" data-toggle="collapse" aria-expanded="false" aria-controls="legal">Mentions légales</a>
  260. <div id="legal" class="collapse text-left">
  261. <p>Le présent site web est un service de communication au public en ligne édité à titre non professionnel au sens de l’article 6, III, 2° de la loi 2004-575 du 21 juin 2004 par l'association de droit alsacien-mosellan Alsace Réseau Neutre inscrite au registre des associations du tribunal de Strasbourg.</p>
  262. <h4>Contact</h4>
  263. <p>En cas de réclamation ou de remarque sur le contenu de ce site web, plusieurs moyens sont à votre disposition pour <a href="https://arn-fai.net/contact">contacter l'éditeur</a> du présent site web.</p>
  264. <h4>Hébergeur</h4>
  265. <p>L'hébergeur de ce site web est l'association elle-même dont le siège social est situé à l'adresse suivante :<address>Alsace Réseau Neutre
  266. 18 rue Frédéric
  267. 67100 STRASBOURG</address></p>
  268. <p>Néanmoins, nous nous permettons de rappeler à votre mémoire l'article 6, I, 4° de la loi 2004-575 du 21 juin 2004 qui dispose ce qui suit : "Le fait, pour toute personne, de présenter aux [hébergeurs du site] un contenu ou une activité comme étant illicite dans le but d’en obtenir le retrait ou d’en faire cesser la diffusion, alors qu’elle sait cette information inexacte, est puni d’une peine d’un an d’emprisonnement et de 15 000 EUR d’amende."</p>
  269. </div>
  270. </div>
  271. </footer>
  272. <script>
  273. $(document).on('click', 'a[href^="#"]', function (event) {
  274. event.preventDefault();
  275. $('html, body').animate({
  276. scrollTop: $($.attr(this, 'href')).offset().top - 50
  277. }, 500);
  278. $(function () {
  279. $('[data-toggle="popover"]').popover();
  280. });
  281. });
  282. </script>
  283. </body>
  284. </html>