Dowse UX and website development repository

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="Dowse: a new IoT awareness design">
  8. <meta name="author" content="dyne.org crew">
  9. <meta http-equiv="Cache-Control" content="max-age=200" />
  10. <title>Dowse</title>
  11. <!-- Bootstrap Core CSS -->
  12. <link href="css/bootstrap.min.css" rel="stylesheet">
  13. <!-- Custom CSS -->
  14. <link href="css/modern-business.css" rel="stylesheet">
  15. <!-- Custom Fonts -->
  16. <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  17. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  18. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  19. <!--[if lt IE 9]>
  20. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  21. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  22. <![endif]-->
  23. <link href="css/dowse.css" rel="stylesheet" type="text/css">
  24. </head>
  25. <body ('body').flowtype({ minimum : 380, maximum : 1200, minfont : 9, maxfont : 40, fontratio : 30 });>
  26. <!-- Navigation -->
  27. <nav class="navbar navbar-fixed-top" role="navigation">
  28. <div class="container">
  29. <!-- Brand and toggle get grouped for better mobile display -->
  30. <div class="navbar-header">
  31. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  32. <span class="sr-only">Toggle navigation</span>
  33. <span class="icon-bar"></span>
  34. <span class="icon-bar"></span>
  35. <span class="icon-bar"></span>
  36. </button>
  37. <a class="navbar-brand" href="index.html">Dowse.eu</a>
  38. </div>
  39. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  40. <ul class="nav navbar-nav navbar-right">
  41. <li>
  42. <a href="about.html" class="dowser">About Dowse</a>
  43. </li>
  44. <li>
  45. <a href="download.html">Downloads</a>
  46. </li>
  47. <li>
  48. </li>
  49. <li>
  50. <a href="faq.html">FAQ</a>
  51. </li>
  52. <li class="dropdown">
  53. <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
  54. <ul class="dropdown-menu">
  55. <li>
  56. <a href="https://github.com/dyne/dowse">Github Project page</a>
  57. </li>
  58. <li>
  59. <a href="https://github.com/dyne/dowse/wiki">Wiki</a>
  60. </li>
  61. <li>
  62. <a href="https://crowd.dowse.eu">Crowdfunding page</a>
  63. </li>
  64. </ul>
  65. </li>
  66. <li>
  67. </li>
  68. <li>
  69. <a href="past-events.html">Events</a>
  70. </li>
  71. <li>
  72. <a href="workshops.html">Workshops</a>
  73. </li>
  74. <li>
  75. <a href="contact.html">Contact</a>
  76. </li>
  77. </ul>
  78. </div>
  79. <!-- Collect the nav links, forms, and other content for toggling -->
  80. <!-- /.navbar-collapse -->
  81. </div>
  82. <!-- /.container -->
  83. </nav>
  84. <div class="container-fluid">
  85. <div class="well annunciazio">Dowse 1.0 beta is out!</div>
  86. <div class="jumbotron">
  87. <div class="col-xs-6 col-md-3">
  88. </div>
  89. <h1>Awareness&nbsp;</h1>
  90. <p><div class="col-xs-6 col-md-3">
  91. <a href="#">
  92. <img src="images/logos/dowselogo.svg" alt="" style="margin-right: -1px;padding-right: 9px;width: 160px;height: 120px;">
  93. </a>
  94. </div>Dowse is a curtain to keep your lan private, a lock to close the door to spyware, and a mirror, to monitor your home network behaviour and enforce politeness, between users and machines alike.<span style="color: inherit;">&nbsp;</span></p>
  95. <p></p>
  96. <p><a class="btn btn-primary btn-lg" role="button" href="about.html">Learn more</a></p>
  97. </div>
  98. <div class="row">
  99. <div class="col-md-4">
  100. <div class="panel panel-default">
  101. <div class="panel-heading">
  102. <h4><i class="fa fa-fw fa-key fa-2x"></i> IoT missing On-OFF button</h4>
  103. </div>
  104. <div class="panel-body">
  105. The IoT (internet of things) hype loves to generate buzz about things that
  106. will be allowed to connect to the internet and talk to other things. This buzz requires attention.
  107. Things like home appliances have clear behaviour and a simple switch to put them off.
  108. <br>
  109. Dowse puts this switch back to any device in your LAN.
  110. </div>
  111. </div>
  112. </div>
  113. <div class="col-md-4">
  114. <div class="panel panel-default">
  115. <div class="panel-heading">
  116. <h4><i class="fa fa-fw fa-check-circle-o fa-2x" aria-hidden="true"></i> Design for awareness</h4>
  117. </div>
  118. <div class="panel-body">
  119. <p>Dowse keeps your private network
  120. private and let you understand what is
  121. trying to talk with what.</p>
  122. <p>If necessary Dowse can mute things: it can switch them off with a button, simple and clear.</p>
  123. <p>Dowse is a open source project as well. Experts can look at how is done and it is built to last and to be used by anyone.</p>
  124. <!--<a href="#" class="btn btn-dowse">Learn More</a>-->
  125. </div>
  126. </div>
  127. </div>
  128. <div class="col-md-4">
  129. <div class="panel panel-default">
  130. <div class="panel-heading">
  131. <h4><i class="fa fa-puzzle-piece fa-2x"></i> Experiment</h4>
  132. </div>
  133. <div class="panel-body">
  134. <p>Dowse talks. In open standards: MQTT, Websockets, Open Sound Control... So many types of devices can
  135. treasure the messages that Dowse publishes. A good start for hobbyists and makers to create
  136. amazing network-aware effects and interfaces. We try to help a community of dowsers to
  137. explore this possibility.</p>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. <div class="row">
  143. <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
  144. <div class="thumbnail">
  145. <img src="images/DOWSE-RASP.png" alt="">
  146. <div class="caption">
  147. <h3>Download the beta!</h3>
  148. <p>Beta images optimised for Raspberry Pi 2 and newer</p>
  149. <p><a href="https://files.dyne.org/dowse/sdcard/" class="btn btn-dowse" role="button">Download</a> </p>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
  154. <div class="thumbnail">
  155. <img src="images/GenericArm.png" alt="">
  156. <div class="caption">
  157. <h3>Download the beta!</h3>
  158. <p>Generic ARM Image: no bootloader or kernel</p>
  159. <p><a href="https://files.dyne.org/dowse/sdcard/" class="btn btn-dowse" role="button">Download</a> </p>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="col-sm-6 col-md-4 col-lg-4 col-xs-4">
  164. <div class="thumbnail">
  165. <img src="images/Git-ddowse.png" alt="">
  166. <div class="caption">
  167. <h3>Download the beta!</h3>
  168. <p>Code of the Dowse Project. You can compile it on your own platform. Documentation inside.<br><a href="Http://github.com/dyne/dowse" class="btn btn-dowse" role="button">Build from source</a> </p>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="container-fluid">
  175. <!-- Marketing Icons Section -->
  176. <div class="row">
  177. <div class="col-lg-12">
  178. <h1 class="page-header">Better be aware :^)&nbsp;</h1>
  179. </div>
  180. <div class="col-md-6 col-xs-12 col-sm-6 col-lg-6">
  181. <h3>Dowse visualisation with Gource</h3>
  182. <p><a href="http://gource.io/">Gource is a open source
  183. project</a> that allow visualisation in real time of activity on graphs. It's been developed for git and svn repositories.
  184. We have adapted Dowse to use it to visualise the flow of information in the network. Small "agents" show
  185. activities in the network and to which server your machines (the chess-like pawns) are trying to connect to in real time.</p>
  186. <p>
  187. This is just one of the many ways you can be aware of your network activity in real time using Dowse.</p>
  188. </div>
  189. <div class="col-md-6 col-sm-6 col-xs-12 col-lg-6">
  190. <h3>Dowse 1.0 Beta</h3>
  191. <ul>
  192. <li>Network awareness</li>
  193. <li>DNSCrypt encrypts your metadata</li>
  194. <li>Captive portal</li>
  195. <li>Optimized for running on Devuan GNU+Linux</li>
  196. <li>Talks and listen to OSC/MQTT/Websockets </li>
  197. <li>Filters out known malware</li>
  198. </ul>
  199. </div>
  200. </div>
  201. <div class="row">
  202. <div class="col-lg-12">
  203. <h1 class="page-header">What is Dowse...</h1>
  204. <div class="row">
  205. <div class="col-xs-12 col-sm-12 col-md-12">
  206. <p>To develop Dowse we must develop a community. In a community there are no users and developers, but adopters, thinkerers, hackers, designers and aunts, mothers, friends... There is place for everyone.</p>
  207. <iframe width="720" height="480" src="https://www.youtube.com/embed/wDLyYk_TQtI" frameborder="0" allowfullscreen=""></iframe>
  208. <h3>and how it is made</h3>
  209. </div>
  210. <div class="col-md-8 col-lg-8 col-sm-4 col-xs-4 hidden-xs">
  211. </div>
  212. </div>
  213. <h1 class="page-header">How to Dowse...</h1>
  214. </div>
  215. <div class="col-sm-6 col-md-6">
  216. <div class="thumbnail">
  217. <img src="images/2016_07_H&amp;D/hd3.jpg" alt="">
  218. <div class="caption">
  219. <h3><a href="install.html">Install and Configure</a></h3>
  220. <p>To install and configure Dowse from scratch. A tutorial to show you that is actually pretty easy.</p>
  221. <p> </p>
  222. </div>
  223. </div>
  224. </div>
  225. <div class="col-sm-6 col-md-6">
  226. <div class="thumbnail">
  227. <img src="images/tutorials/random_nodered_screenshot.png" alt="">
  228. <div class="caption">
  229. <h3>Node red first steps</h3>
  230. <p>Node-red is a easy to use tool to interect with IoT devices via the MQTT protocol. <br>
  231. Learn more on how you can integrate Dowse with node-red and design interesting awareness and control flows.<br><a href="node-red.html">
  232. A short tutorial is here --&gt;</a></p>
  233. <p> </p>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. <div class="col-lg-12">
  239. <h1>Dowse related events</h1>
  240. </div>
  241. <div class="row">
  242. <div class="col-md-4 col-sm-6">
  243. <a href="portfolio-item.html">
  244. <img class="img-responsive img-portfolio img-hover" src="images/2015_08_ev_ccc/lowres/ccc6.jpeg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
  245. </a>
  246. </div>
  247. <div class="col-md-4 col-sm-6">
  248. <a href="portfolio-item.html">
  249. <img class="img-responsive img-portfolio img-hover" src="images/2015_09_mt_orwl/lowres/Orwl_unpack2.jpeg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
  250. </a>
  251. </div>
  252. <div class="col-md-4 col-sm-6">
  253. <a href="portfolio-item.html">
  254. <img class="img-responsive img-portfolio img-hover" src="images/2016_01_ev_transmediale/transmediale4.jpg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
  255. </a>
  256. </div>
  257. </div>
  258. <div class="row">
  259. <div class="col-md-4 col-sm-6">
  260. <a href="portfolio-item.html">
  261. <img class="img-responsive img-portfolio img-hover" src="images/2016_05_ws_LPM/lowres/20160514_155615.jpeg" alt="">
  262. </a>
  263. </div>
  264. <div class="col-md-4 col-sm-6">
  265. <a href="portfolio-item.html">
  266. <img class="img-responsive img-portfolio img-hover" src="images/2016_12_ev_ISOCprize/DSC06144.jpeg" alt="" style="background-image:url('images/2016_12_ev_ISOCprize/DSC06144.jpeg');">
  267. </a>
  268. </div>
  269. <div class="col-md-4 col-sm-6">
  270. <a href="portfolio-item.html">
  271. <img class="img-responsive img-portfolio img-hover" src="images/2016_07_H&amp;D/hd8.1.jpg" alt="" style="background-image:url('images/2015_08_ev_ccc/lowres/ccc7.jpeg');">
  272. </a>
  273. </div>
  274. </div>
  275. <!-- /.row -->
  276. <!-- Portfolio Section -->
  277. <!-- /.row -->
  278. <!-- Features Section -->
  279. <div class="row">
  280. <div class="col-lg-12">
  281. <h1 class="page-header">What is Dowse?</h1>
  282. </div>
  283. <div class="col-md-6">
  284. <p><strong>DOWSE</strong> The Dowse box gives you back control. Dowse is free and open source software.
  285. There is no big company behind it. By installing the Dowse box you will get insight down to the network
  286. layer of what is actually going on in your home. Who is talking to whom, what, where and when?
  287. You can see which device connects to which company and you
  288. can turn that communication off, or allow it.</p>
  289. <p> We call it an Awareness Box. You will be aware of the invisible world surrounding you and your famlly.
  290. To us, this is the first step. Dowse is building a community of developers who will create modules
  291. allowing you to safely and securely share your data with whomever you want.
  292. After all there are a lot of pros about getting insight into your own behavior, your family’s
  293. and your home as a companion. Yet the control should stay with you. You will share if you know what you
  294. are really sharing.</p>
  295. <p>In short is a device that is designed to do well some things:</p>
  296. <ul>
  297. <li>
  298. <strong>Opacize your network</strong>; External services will not be able
  299. to capture your metadata and/or your data through Domain Name System Translation.
  300. </li>
  301. <li>
  302. <strong>Makes you aware of your traffic </strong>and all activities of your users without spying on them.
  303. It is a bit like sharing the same room.
  304. </li>
  305. <li>
  306. <strong>Allows you to swich off</strong> devices and machine network connection in case they wish to "call home"
  307. because they have been infected by malware, or they have been ill conceived to
  308. serve some commercial spyware purpose.
  309. </li>
  310. <li>Open Sound control</li>
  311. <li>Hardware Hacking with ESP8266 and Arduino</li>
  312. <li>... and MORE! check:
  313. <br>
  314. <a href="workshops.html">the workshops page!</a>
  315. </li>
  316. </ul>
  317. </div>
  318. <div class="col-md-6">
  319. <img class="img-responsive" src="images/2016_07_H&amp;D/hd2.jpg" alt="">
  320. <iframe width="560" height="315" src="https://www.youtube.com/embed/vquh3IXcduc" frameborder="0" allowfullscreen=""></iframe>
  321. </div>
  322. </div>
  323. <div class="row">
  324. <div class="col-lg-12">
  325. <h1 class="page-header">How to Dowse: Educational Workshops</h1>
  326. </div>
  327. <div class="col-md-6">
  328. <p><strong>THE DOWSE WORKSHOP</strong> is a day dedicated to set up, explore and reflect on the notion of
  329. private network, shared resources, net awareness through Dowse. You will be helped by
  330. dyne.org hackers and artists to make your own box. Or you can get one immediately and work connecting your own ideas and devices to link network events with leds, sounds and other software. &nbsp;&nbsp;</p>
  331. <ul>
  332. <li>
  333. <strong>Install and configure Dowse</strong> on a Raspberry Pi
  334. </li>
  335. <li>Design Dowse interaction</li>
  336. <li>MQTT/websocket</li>
  337. <li>Open Sound control</li>
  338. <li>Hardware Hacking with ESP8266 and Arduino</li>
  339. <li>... and MORE! check:
  340. <br>
  341. <a href="workshops.html">the workshops page!</a>
  342. </li>
  343. </ul>
  344. </div>
  345. <div class="col-md-6">
  346. <img class="img-responsive" src="images/2016_07_H&amp;D/h10.jpg" alt="">
  347. </div>
  348. </div>
  349. <hr>
  350. <div class="well">
  351. </div>
  352. <div class="well-lg well">
  353. <div class="col-lg-12">
  354. </div>
  355. <div class="row">
  356. <div class="col-md-6">
  357. <h3>Crowdfunding</h3>
  358. <b>First Crowdfunding is over<br>Some merchandising will
  359. be there soon as well.<br><a class="btn btn-lg btn-dowse btn-block bigButton" href="crowd.dowse.eu">Donate!</a></b>
  360. </div>
  361. </div>
  362. <div class="row">
  363. <div class="col-md-3 col-lg-2 col-xs-3 col-sm-3" style="margin-right: 30px;">
  364. <h3>Project by</h3>
  365. <a href="www.dyne.org" class="thumbnail">
  366. <img src="images/logos/tinified/dyne.png" alt="dyne think and do tank">
  367. </a>
  368. </div>
  369. <div class="col-md-3 col-lg-2 col-xs-3 col-sm-3" style="margin-right: 30px;">
  370. <h3>Thanks to:</h3>
  371. <a href="http://waag.org" class="thumbnail">
  372. <img src="images/logos/tinified/waag_logo.png" alt="waag-logo" class="logosmall">
  373. </a>
  374. <a href="http://www.devuan.org" class="thumbnail">
  375. <img src="images/logos/tinified/devuan.png" alt="devuan-logo">
  376. </a>
  377. <a href="http://www.design-shift.com" class="thumbnail">
  378. <img src="images/logos/tinified/design-shift.png" alt="design-shift" class="logosmall">
  379. </a>
  380. </div>
  381. <div class="col-md-3 col-lg-4 col-xs-3 col-sm-3">
  382. <h3>Made possible by fundings from:</h3>
  383. <img src="images/logos/tinified/sidnfonds-logo.png" alt="SIDN fonds Logo" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="140%">
  384. <img src="images/logos/tinified/nlnet-logo.png" alt="" class="logosmall visible-xs-block visible-sm-block visible-md-block visible-lg-block" width="100%">
  385. </div>
  386. </div>
  387. </div>
  388. <!-- /.row -->
  389. <!-- Call to Action Section -->
  390. <!-- Footer -->
  391. <footer>
  392. <div class="container">
  393. <div class="row">
  394. <div class="col-md-4">
  395. <div>Dowse is a project by dyne.org
  396. <br>Haparandadam 7/A1, 1013 AK,
  397. <br>Amsterdam, The Nederlands
  398. <br>
  399. </div>
  400. </div>
  401. <div class="col-md-4">
  402. <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">
  403. <img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png">
  404. </a>
  405. <br>
  406. <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
  407. </div>
  408. <div class="col-md-4">
  409. <a mailto:info@dowse.eu="">info@dowse.eu</a>
  410. <div> dyne.org 2017
  411. <br>
  412. made with &lt;3 in Europa
  413. </div> .
  414. </div>
  415. </div>
  416. </div>
  417. </footer>
  418. </div>
  419. <!-- Header Carousel -->
  420. <!-- Page Content -->
  421. </footer>
  422. </div>
  423. <script src="js/jquery.js"></script>
  424. <script src="js/flowtype.js"></script>
  425. <!-- /.container -->
  426. <!-- jQuery -->
  427. <!-- Bootstrap Core JavaScript -->
  428. <script src="js/bootstrap.min.js"></script>
  429. <!-- Script to Activate the Carousel -->
  430. <script>
  431. $('.carousel').carousel({
  432. interval: 8000 //changes the speed
  433. })
  434. </script>