No Description

offcanvas_1488035468.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  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. <blockquote>
  62. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  63. <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
  64. </blockquote>
  65. <!--/.col-xs-6.col-lg-4-->
  66. <!--/.col-xs-6.col-lg-4-->
  67. <!--/.col-xs-6.col-lg-4-->
  68. <!--/.col-xs-6.col-lg-4-->
  69. <!--/.col-xs-6.col-lg-4-->
  70. <!--/.col-xs-6.col-lg-4-->
  71. </div>
  72. <div class="col-md-4">
  73. <img src="img/DowseIntro.png" width="300" />
  74. </div>
  75. <div class="row">
  76. <div class="col-xs-6 col-lg-4">
  77. <h2></h2>
  78. <h5><b>Bring your network traffic to your senses!</b></h5>
  79. <p class="p1"><span class="s1">In 2016 you must be able to manner your devices behaviour.</span></p>
  80. <p class="p1"><span class="s1">And first you need to be aware of what they do!</span></p>
  81. <p></p>
  82. <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>
  83. <p></p>
  84. </div>
  85. <div class="col-xs-6 col-lg-4">
  86. <h2></h2>
  87. <h5><b><p class="p1"><span class="s1">List of Workshops and shows 2016/2017</span></p></b></h5>
  88. <p class="p1"></p>
  89. <ul>
  90. <li class="li1">
  91. <span class="s2"><a href="https://transmediale.de/content/off-the-cloud-zone">TRANSMEDIALE “off the clowd” Berlin January 2016</a></span>
  92. </li>
  93. <li class="li1">
  94. <span class="s3"></span>
  95. <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>
  96. </li>
  97. <li class="li1">
  98. <span class="s3"></span>
  99. <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>
  100. </li>
  101. <li class="li1">
  102. <span class="s3"></span>
  103. <span class="s2"><a href="http://wemake.cc/tag/dowse/">Milan @wemake January 2017</a></span>
  104. </li>
  105. <li class="li1">
  106. <span class="s3"></span>
  107. <span class="s2"><a href="http://www.ddw.nl/evenement/667">Dutch Design Week - Sensemaker 2016&nbsp;</a></span>
  108. </li>
  109. <li class="li1">
  110. <span class="s3"></span>
  111. <span class="s2"><a href="https://www.thingscon.nl/schedule/">Things Conn Amsterdam 2016&nbsp;</a></span>
  112. </li>
  113. </ul>
  114. <p class="p1"><span class="s1"></span></p>
  115. <p></p>
  116. <p class="p1"><span class="s1"></span></p>
  117. <p></p>
  118. </div>
  119. <!--/.col-xs-6.col-lg-4-->
  120. <!--/.col-xs-6.col-lg-4-->
  121. <!--/.col-xs-6.col-lg-4-->
  122. <!--/.col-xs-6.col-lg-4-->
  123. <!--/.col-xs-6.col-lg-4-->
  124. <!--/.col-xs-6.col-lg-4-->
  125. </div>
  126. <div class="row">
  127. <div class="col-xs-6 col-lg-4">
  128. <h2></h2>
  129. <h5><b>SET DOWSE IN YOUR HOME</b>,</h5>
  130. <p class="p1"><span class="s1">With a dowse box you can sense and switch off any unwanted network activity.</span></p>
  131. <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>
  132. <p class="p1"><span class="s1">ways to bring to your attention events interfacing with it.</span></p>
  133. <p class="p1"><span class="s1"><b></b></span></p>
  134. <p>more info:&nbsp; <a href="http://www.dowse.eu">www.dowse.eu</a></p>
  135. </div>
  136. <div class="col-md-4">
  137. <h3>Dyne.org labs</h3>
  138. <img src="img/cafudda.png" width="300" />
  139. <i>DOWSE is developed by dyne.org, your favorite free-software Think&amp;do Tank</i>
  140. </div>
  141. <div class="col-xs-6 col-lg-4">
  142. <h2></h2>
  143. <h5><b>THE DOWSE WORKSHOP</b>&nbsp;</h5>
  144. <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 ASK);, Raspi 3 included, MAX 20 people (10:00 → 17:00)</span></p>
  145. <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>
  146. </div>
  147. </div>
  148. <hr>
  149. <div class="row">
  150. <div class="col-xs-6 col-lg-4">
  151. <h2><p class="p1"><span class="s1"><b></b></span></p></h2>
  152. <h5><b>DOWSE IS GREAT FOR MAKERS</b></h5>
  153. <p></p>
  154. <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>
  155. <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>
  156. </div>
  157. <div class="col-xs-6 col-lg-4">
  158. <h2></h2>
  159. <h5></h5>
  160. <p class="p1"><span class="s1"><b>WHAD DO I LEARN?</b></span></p>
  161. <ul>
  162. <li class="li1">
  163. <span class="s2"></span>
  164. <span class="s1">to install and configure DOWSE</span>
  165. </li>
  166. <li class="li1">
  167. <span class="s2"></span>
  168. <span class="s1">Basic Dowsing techniques using gource and netdata.</span>
  169. </li>
  170. <li class="li1">
  171. <span class="s2"></span>
  172. <span class="s1">To analyse situations were to use Dowse and think about user cases</span>
  173. </li>
  174. <li class="li1">
  175. <span class="s2"></span>
  176. <span class="s1">To use MQTT to easily design complex interaction through NODE RED or Pure data</span>
  177. </li>
  178. <li class="li1">
  179. <span class="s2"></span>
  180. <span class="s1">To create objects that respond to network events found by Dowse as alarms, sensors, lights, etc.</span>
  181. </li>
  182. <li class="li1">
  183. <span class="s2"></span>
  184. <span class="s1">To send home traffic related events to social networks (Twitter, Irc, FB, Telegram)&nbsp;</span>
  185. </li>
  186. </ul>
  187. <p></p>
  188. </div>
  189. <div class="col-sm-6 col-md-4">
  190. <div class="thumbnail">
  191. <img alt="" src="img/wemakeWS.png">
  192. <div class="caption">
  193. <h3>Share Your Dowse Projects</h3>
  194. <p class="p1">www.dowse.eu/projects&nbsp; <br></p>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. <!--/row-->
  200. <hr>
  201. <footer>
  202. <p>© dyne.org 2017</p>
  203. </footer>
  204. </div>
  205. <!--/.container-->
  206. <!-- Bootstrap core JavaScript
  207. ================================================== -->
  208. <!-- Placed at the end of the document so the pages load faster -->
  209. <script src="assets/js/jquery.min.js"></script>
  210. <script src="bootstrap/js/bootstrap.min.js"></script>
  211. <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  212. <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  213. <script>
  214. $(document).ready(function () {
  215. $('[data-toggle="offcanvas"]').click(function () {
  216. $('.row-offcanvas').toggleClass('active')
  217. });
  218. });
  219. </script>
  220. </body>
  221. </html>