No Description

offcanvas_1488284035.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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="">
  8. <meta name="author" content="">
  9. <title>Off Canvas Template for Bootstrap</title>
  10. <!-- Bootstrap core CSS -->
  11. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  12. <!-- Custom styles for this template -->
  13. <link href="offcanvas.css" rel="stylesheet">
  14. <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  15. <!--[if lt IE 9]>
  16. <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  17. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  18. <![endif]-->
  19. </head>
  20. <body>
  21. <nav class="navbar navbar-fixed-top navbar-inverse">
  22. <div class="container">
  23. <div class="navbar-header">
  24. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  25. <span class="sr-only">Toggle navigation</span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. <span class="icon-bar"></span>
  29. </button>
  30. <a class="navbar-brand" href="#">Dowse Workshops</a>
  31. </div>
  32. <div id="navbar" class="collapse navbar-collapse">
  33. <ul class="nav navbar-nav">
  34. <li class="active">
  35. <a href="#">Home</a>
  36. </li>
  37. <li>
  38. <a href="#about">About</a>
  39. </li>
  40. <li>
  41. <a href="#contact">Contact</a>
  42. </li>
  43. </ul>
  44. </div>
  45. <!-- /.nav-collapse -->
  46. </div>
  47. <!-- /.container -->
  48. </nav>
  49. <!-- /.navbar -->
  50. <div class="container">
  51. <div class="row row-offcanvas row-offcanvas-right">
  52. <!--/.col-xs-12.col-sm-9-->
  53. <!--/.sidebar-offcanvas-->
  54. </div>
  55. <div class="jumbotron">
  56. <h1><p class="p1"><span class="s1"><b>THE DOWSE WORKSHOP</b>&nbsp;</span></p><p class="p1"><span class="s1">is a 3 day intensive design workshop dedicated to set up, explore and reflect on the notion of private network, shared resources, net awareness through dowse.&nbsp;</span></p></h1>
  57. </div>
  58. <div class="row">
  59. <div class="row">
  60. </div>
  61. <!--/.col-xs-6.col-lg-4-->
  62. <!--/.col-xs-6.col-lg-4-->
  63. <!--/.col-xs-6.col-lg-4-->
  64. <!--/.col-xs-6.col-lg-4-->
  65. <!--/.col-xs-6.col-lg-4-->
  66. <!--/.col-xs-6.col-lg-4-->
  67. </div>
  68. <div class="col-md-4">
  69. <img src="img/DowseIntro.png" width="380" />
  70. </div>
  71. <div class="row">
  72. <div class="col-xs-6 col-lg-4 pull-right">
  73. <h2></h2>
  74. <h5><b>Bring your network traffic to your senses!</b></h5>
  75. <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
  76. <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
  77. <p></p>
  78. <p class="p1"><span class="s1">We have created an instrument that allows you to “sense” the activity of your own network, take care of its doing, light heartedly share your resources with your friends or neighbours and protect your home-LAN.</span></p>
  79. <p></p>
  80. </div>
  81. <div class="col-xs-6 col-lg-4 pull-right">
  82. <h2></h2>
  83. <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
  84. <p class="p1"></p>
  85. <ul>
  86. <li class="li1">
  87. <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
  88. </li>
  89. <li class="li1">
  90. <span class="s3"></span>
  91. <a href=" https://liveperformersmeeting.net/editions/2016-amsterdam/artists/dyne/performances/dowse-digital-network-appliance-for-home-based-lan/"><span class="s2">LPM - Live Performers Meeting, Amsterdam May 2016&nbsp;</span></a>
  92. </li>
  93. <li class="li1">
  94. <span class="s3"></span>
  95. <a href="https://hackersanddesigners.nl/#/HDSA_2016._If_you_are_so_smart_why_are_you_so_poor"><span class="s2">Hackers and Founders Amsterdam July 2016&nbsp;</span></a>
  96. </li>
  97. <li class="li1">
  98. <span class="s3"></span>
  99. <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
  100. </li>
  101. <li class="li1">
  102. <span class="s3"></span>
  103. <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
  104. </li>
  105. <li class="li1">
  106. <span class="s3"></span>
  107. <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
  108. </li>
  109. </ul>
  110. <p class="p1"><span class="s1"></span></p>
  111. <p></p>
  112. <p class="p1"><span class="s1"></span></p>
  113. <p></p>
  114. </div>
  115. <div class="col-xs-6 col-lg-4 pull-right">
  116. <h2></h2>
  117. <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
  118. <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
  119. <p class="p1"><span class="s1">dyne.org hackers and artists will guide you through in making your own dowse box to bring home and in inventing</span></p>
  120. <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
  121. <p class="p1"><span class="s1"><b></b></span></p>
  122. <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
  123. </div>
  124. <!--/.col-xs-6.col-lg-4-->
  125. <!--/.col-xs-6.col-lg-4-->
  126. <!--/.col-xs-6.col-lg-4-->
  127. <!--/.col-xs-6.col-lg-4-->
  128. <!--/.col-xs-6.col-lg-4-->
  129. <!--/.col-xs-6.col-lg-4-->
  130. </div>
  131. <div class="row">
  132. <div class="col-md-4">
  133. <img src="img/dowsebox.png" width="300" class="img-rounded pull-right" />
  134. <h3><p>&nbsp;</p></h3>
  135. <img src="img/Dyne_Labs.png" width="300" />
  136. <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i>
  137. </div>
  138. <div class="col-xs-6 col-lg-4">
  139. <h2></h2>
  140. <h2><b>THE DOWSE WORKSHOP</b>&nbsp;</h2>
  141. <p class="p1"><span class="s1"><b>WORKSHOP COST/TIME:</b> <b>150€</b> euros/person/day (<b>300€</b> if B-to-B, and for educational event or hackmeeting ASK our hackers);, <br>Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
  142. <p><b style="line-height: 1.42857143;">WHAT YOU GET HOME WITH YOU: </b>A fully functioning dowse 0.9 box, knowledge on how customise it and some awareness about internet flows and the controller you build.&nbsp;</p>
  143. </div>
  144. <div class="col-sm-6 col-md-4">
  145. <div class="thumbnail">
  146. <div class="caption">
  147. <h3>Hack Your Own Dowse&nbsp;</h3>
  148. <p>Dowse can be installed on many hardware combination. We tested with Devuan minimal linux distro.</p>
  149. <p>If you want to share your experience check out our group on irc://irc.dyne.org #dowse</p>
  150. <img src="img/devuanLogo.png" width="200" />
  151. <p><br></p>
  152. <p> </p>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <hr>
  158. <div class="row">
  159. <div class="thumbnail">
  160. <img alt="" src="img/wemakeWS.png" width="640">
  161. <div class="caption">
  162. <h3>Share Your Dowse Projects</h3>
  163. <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
  164. </div>
  165. </div>
  166. <div class="col-xs-6 col-lg-4">
  167. <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
  168. <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
  169. <p></p>
  170. <p class="p1"><span class="s1"><b>Dowse</b> allows you to practice the art of “dowsing the net” wile at the same time you create your own smart meters, your responsive environments or objects. <br><br></span></p>
  171. <p>The dowse device talks to you using Websockets MQTT and OSC so interfaces with anything that uses open standards and protocols, allowing you to create the interface you want and inventing new ones.</p>
  172. </div>
  173. <div class="col-xs-6 col-lg-4">
  174. <h2></h2>
  175. <h5></h5>
  176. <p class="p1"><span class="s1"><b>WHAT DO I LEARN?</b></span></p>
  177. <ul>
  178. <li class="li1">
  179. <span class="s2"></span>
  180. <span class="s1">to install and configure DOWSE</span>
  181. </li>
  182. <li class="li1">
  183. <span class="s2"></span>
  184. <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
  185. </li>
  186. <li class="li1">
  187. <span class="s2"></span>
  188. <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
  189. </li>
  190. <li class="li1">
  191. <span class="s2"></span>
  192. <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
  193. </li>
  194. <li class="li1">
  195. <span class="s2"></span>
  196. <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
  197. </li>
  198. <li class="li1">
  199. <span class="s2"></span>
  200. <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
  201. </li>
  202. </ul>
  203. <p></p>
  204. </div>
  205. <img src="img/Logos_supported.png" width="400" class="pull-right" />
  206. <div class="col-md-4">
  207. <h3>Mailing List</h3>
  208. <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  209. <form role="form">
  210. <div class="form-group">
  211. <label class="control-label" for="exampleInputEmail1">Email address</label>
  212. <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  213. </div>
  214. <div class="form-group">
  215. </div>
  216. <div class="checkbox">
  217. <label class="control-label">
  218. <input type="checkbox"> Check me out
  219. </label>
  220. </div>
  221. <button type="submit" class="btn">Subscribe</button>
  222. </form>
  223. </div>
  224. <div class="col-sm-6 col-md-4">
  225. </div>
  226. </div>
  227. <!--/row-->
  228. <hr>
  229. <footer>
  230. <p>© dyne.org 2017</p>
  231. </footer>
  232. </div>
  233. <!--/.container-->
  234. <!-- Bootstrap core JavaScript
  235. ================================================== -->
  236. <!-- Placed at the end of the document so the pages load faster -->
  237. <script src="assets/js/jquery.min.js"></script>
  238. <script src="bootstrap/js/bootstrap.min.js"></script>
  239. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  240. <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  241. <script>
  242. $(document).ready(function () {
  243. $('[data-toggle="offcanvas"]').click(function () {
  244. $('.row-offcanvas').toggleClass('active')
  245. });
  246. });
  247. </script>
  248. </body>
  249. </html>