index.html 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  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. <title>Marie Otsuka</title>
  7. <meta name="author" content="Radical Networks">
  8. <!-- Enable responsive viewport -->
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <meta property="og:url" content="http://radicalnetworks.org" />
  11. <meta property="og:title" content="Radical Networks 2018" />
  12. <meta property="og:description" content="October 19-21, 2018 in Berlin, Germany" />
  13. <meta property="og:site_name" content="Radical Networks"/>
  14. <meta property="og:image" content="https://radicalnetworks.org/assets/themes/images/radnets_logo_larger.png"/>
  15. <!-- Bootstrap styles -->
  16. <link href="/assets/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  17. <!-- Optional theme -->
  18. <link href="/assets/themes/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
  19. <!-- Sticky Footer -->
  20. <link href="/assets/themes/bootstrap/css/bs-sticky-footer.css" rel="stylesheet">
  21. <!-- Custom styles and fonts -->
  22. <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
  23. <link href="/assets/themes/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
  24. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  25. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  26. <!--[if lt IE 9]>
  27. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  28. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  29. <![endif]-->
  30. </head>
  31. <body>
  32. <div id="wrap">
  33. <div class="container">
  34. <nav class="row navbar" role="navigation">
  35. <!-- Brand and toggle get grouped for better mobile display -->
  36. <div class="navbar-header">
  37. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#jb-navbar-collapse">
  38. <span class="sr-only">Toggle navigation</span>
  39. <span class="icon-bar"></span>
  40. <span class="icon-spacer"></span>
  41. <span class="icon-bar"></span>
  42. <span class="icon-spacer"></span>
  43. <span class="icon-bar"></span>
  44. <span class="icon-spacer"></span>
  45. <br/>
  46. </button>
  47. </div>
  48. <!-- Collect the nav links, forms, and other content for toggling -->
  49. <div class="collapse navbar-collapse" id="jb-navbar-collapse">
  50. <ul class="nav navbar-nav">
  51. <li><a href="/archives/2018/about/">About</a></li>
  52. <li><a href="/archives/2018/participants/">Participants</a></li>
  53. <li><a href="/archives/2018/program/">Program</a></li>
  54. <li><a href="/archives/2018/gallery/">Gallery</a></li>
  55. <li><a href="/archives/2018/sponsors/">Sponsors</a></li>
  56. <li><a href="/archives/2018/location/">Location</a></li>
  57. <li><a href="/archives/2018/team/">Team</a></li>
  58. <li><a href="/archives/2018/policies/">Policies</a></li>
  59. </ul>
  60. </div><!-- /.navbar-collapse -->
  61. </nav>
  62. <header>
  63. <div class="row">
  64. <a href="/archives/2018/">
  65. <img class="logo" src="/assets/themes/images/radnets_logo.png" width="500" height="76" />
  66. </a>
  67. <h2>October 19-21, 2018<br/>Berlin, Germany</h2>
  68. <div class="social">
  69. <a href="https://www.twitter.com/radnetworks" target="_blank"><img src="/assets/themes//images/twitter_logo.png" width="37" height="37" /></a>
  70. <a href="mailto:info@radicalnetworks.org"><img src="/assets/themes//images/email.png" width="37" height="37" /></a>
  71. <a href="http://list.weise7.org/listinfo/radnets" target="_blank"><img src="/assets/themes//images/mailing-list.png" alt="mailing list" width="37" height="37" /></a>
  72. <!-- <a class="press" href="/assets/themes//pdf/radical_networks_2017_press_kit.pdf">2017 Press Kit</a> -->
  73. </div>
  74. </div>
  75. </header>
  76. <div class="row">
  77. <div class="col-md-8 content">
  78. <div class="row">
  79. <div class="col-xs-12">
  80. <h3>Marie Otsuka</h3>
  81. <!-- <img src="" width="256px" /> -->
  82. <p><a href="http://motsuka.com/" target="_blank">Website</a></p>
  83. <p>Marie Otsuka is a type / graphic designer. Covering both print and web, her work involves reshaping given tools for communication. She designs platforms that highlight medium-specific processes, both in production and use. Marie holds an MFA from the Rhode Island School of Design, where she has taught classes in web programming, and a BA in Interdisciplinary Studies from the University of Chicago.</p>
  84. <hr />
  85. <h2>Presenting with <a href="/archives/2018/participants/roel-roscam-abbing/">Roel Roscam Abbing</a></h2>
  86. <h3>Low-Tech Magazine</h3>
  87. <p>Often the editors of Low-Tech Magazine get asked: "If you're so low-tech, then why do you have a website?" This question reveals a fundamental misunderstanding of what 'low tech' is and can be. However it also spurred the idea to undertake a redesign of lowtechmagazine.com to try to answer that question.</p>
  88. <p>In this talk we present <a href="https://solar.lowtechmagazine.com" target="_blank">https://solar.lowtechmagazine.com</a>, a redesign of the blog that is self-hosted on a solar-powered server. The website is built in such a way that it is as light as possible in order to be self-hosted from a home connection using a solar powered single board computer. The talk will focus on how web design, in the wide sense, can use low tech methodologies. The advantage of which is to improve speed, accessibility, archiveability while minimizing the environmental impact and still looking great.</p>
  89. <h3>About Low Tech Magazine</h3>
  90. <p>Low-tech Magazine refuses to assume that every problem has a high-tech solution. A simple, sensible, but nevertheless controversial message; high-tech has become the idol of our society.</p>
  91. <p>Instead, Low-tech Magazine talks about the potential of past and often forgotten knowledge and technologies when it comes to designing a sustainable society. Sometimes, these low-tech solutions can be copied without any changes.</p>
  92. <p>More often, interesting possibilities arise when you combine old technology with new knowledge and new materials, or when you apply old concepts and traditional knowledge to modern technology.</p>
  93. <p>
  94. <a href="https://lowtechmagazine.com" target="_blank">Website</a>
  95. </p>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="col-md-4 sidebar">
  100. <div>
  101. <!-- Download our <a href="/assets/themes//pdf/radical_networks_2018_press_kit.pdf">2018 Press Kit</a>
  102. </div> -->
  103. <div>
  104. <span class="tickets">Tickets SOLD OUT!</span>
  105. </div>
  106. <div>Hosted by<br/>
  107. <a class="host" href="https://spektrumberlin.de/" target="_blank">
  108. <img src="https://spektrumberlin.de/typo3conf/ext/wb_spektrum/Resources/Public/assets/cube-spektrum-100px.png" width="50" /><span class="spektrum">SPEKTRUM</span>
  109. </a>
  110. <p style="padding-top: 8px">Bürknerstraße 12<br/>12047 Berlin Germany</p>
  111. </div>
  112. <!-- <div class="bigger">Live stream provided by<br/>
  113. <img src="/assets/themes//images/isoclogo.png" width="300" />
  114. <br/><a href="https://livestream.com/internetsociety/radnets17" target="_blank">Main Stage Archive</a>
  115. <br/>
  116. <a href="https://livestream.com/accounts/9197973/radnets17" target="_blank">Workshops Archive</a>
  117. </div> -->
  118. <div class="social">Contact<br/>
  119. <a href="https://www.twitter.com/radnetworks" target="_blank"><img src="/assets/themes//images/twitter_logo.png" width="37" height="37" alt="twitter" /></a>
  120. <a href="mailto:info@radicalnetworks.org"><img src="/assets/themes//images/email.png" width="37" height="37" alt="email" /></a>
  121. <a href="http://list.weise7.org/listinfo/radnets" target="_blank"><img src="/assets/themes//images/mailing-list.png" alt="mailing list" width="37" height="37" /></a>
  122. </div>
  123. <div>
  124. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
  125. <input type="hidden" name="cmd" value="_s-xclick">
  126. <input type="hidden" name="hosted_button_id" value="5AA3EA93WNFP2">
  127. <input type="image" src="https://radicalnetworks.org/assets/themes/images/donate_button.png" width="150px" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  128. <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
  129. </form>
  130. </div>
  131. <div>Psssst...<br/>
  132. We're on the <a href="dat://c0965105755be00cafd7d176c6ccdce467b896c7284b4915733a83e6f2f78231/" target="_blank">dat network</a>, too.
  133. </div>
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <div id="footer">
  139. <div class="container">
  140. <p>
  141. &copy; 2018 Radical Networks &bull; Maintained by <a href="https://github.com/chootka">chootka</a>
  142. </p>
  143. </div>
  144. </div>
  145. <!-- Latest compiled and minified JavaScript, requires jQuery 1.x (2.x not supported in IE8) -->
  146. <!-- Placed at the end of the document so the pages load faster -->
  147. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  148. <script src="/assets/themes//bootstrap/js/bootstrap.min.js"></script>
  149. <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
  150. </body>
  151. </html>