Difference between revisions of "Team:BostonU HW/Experiments"

 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{BUHW2016}}
+
{{Template:BUHW2016_NavBar}}
 +
 
 +
 
 +
{{Template:BUHW2016_Bootstrap}}
 
<html>
 
<html>
 +
<head>
 +
<style>
 +
 +
 +
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 +
 +
  #sideMenu, #top_title {display:none;}
 +
  #content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 +
  body {background-color:white; }
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 +
 +
 +
@font-face {
 +
    font-family: openSans;
 +
    src: url(https://static.igem.org/mediawiki/2016/1/1e/T--BostonU_HW--openSansLight_rcwolf.ttf);
 +
}
 +
 +
 +
html,body
 +
{
 +
    width: 100%;
 +
    min-width: 100%;
 +
    height: 100%;
 +
    margin: 0px;
 +
    padding: 0px;
 +
    overflow-x: hidden;
 +
}
 +
 +
 +
body{
 +
background-color: white;
 +
}
 +
 +
* {
 +
font-family: openSans !important;
 +
}
 +
 +
 +
.navbar {
 +
  background-color: black;
 +
  border-color: black;
 +
margin-top: 10px;
 +
 
 +
}
 +
 +
 +
 +
.navbar-default .navbar-header .navbar-brand,
 +
.navbar-default .navbar-header .navbar-brand:hover,
 +
.navbar-default .navbar-header .navbar-brand:focus {
 +
      color: white;
 +
  }
 +
  .navbar-default .nav > li > a,
 +
  .navbar-default .nav > li > a:focus {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default .nav > li > a:hover,
 +
  .navbar-default .nav > li > a:focus:hover {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default.affix {
 +
      background-color: white;
 +
      border-color: white;
 +
  }
 +
 +
 +
  /*  Animated Underlining For Menu Items  */
 +
.dropbtn {
 +
  display: inline-block;
 +
  position: relative;
 +
  padding-bottom: 3px;
 +
}
 +
.dropbtn:after {
 +
  content: '';
 +
  display: block;
 +
  margin: auto;
 +
  height: 2px;
 +
  width: 0px;
 +
  background: transparent;
 +
  transition: width .5s ease, background-color .5s ease;
 +
}
 +
.sliding-middle-out:hover > .dropbtn:after {
 +
  width: 100%;
 +
  background: white;
 +
}
 +
 +
 +
 +
 +
 +
/*  Dropdown Menu Functionality  */
 +
/* Style The Dropdown Button */
 +
.dropbtn {
 +
    color: white;
 +
    border: none;
 +
    cursor: pointer;
 +
}
 +
 +
/* The container <div> - needed to position the dropdown content */
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
 +
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: rgba(249,249,249,0.4);
 +
    min-width: 160px;
 +
}
 +
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: black;
 +
    font-size: 15px;
 +
    padding: 10px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
 +
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #f1f1f1}
 +
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
 +
 +
.paddedNav{
 +
padding-left: 23px;
 +
padding-right: 23px;
 +
padding-bottom: 5px;
 +
}
 +
 +
 +
 +
 +
 +
 +
</style>
 +
 +
 +
</head>
 +
 +
 +
 +
 +
 +
 +
  
  
 
<body>
 
<body>
−
<div class="services bg-primary">
 
−
<div class="row text-center">
 
−
          <div class="col-lg-10 col-lg-offset-1">
 
−
        <div class="text-vertical-center" style="color: white;">
 
−
            <h1>Experiments</h1>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<br><br/>
 
  
−
<div class="column full_size">
+
<header id="top" class="header">
  
 +
<nav class="navbar navbar-default navbar-fixed-top" style="max-height: 70px !important;">
 +
  <div class="container-fluid paddedNav">
 +
    <!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
        <span class="sr-only">Toggle navigation</span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
     
 +
      <a class="navbar-brand" href="https://2016.igem.org/Team:BostonU_HW"><img src="https://static.igem.org/mediawiki/2016/9/97/T--BostonU_HW--NeptuneLogo_rcwolf.png" height="38" width="55" style="display: inline-block; padding-right: 17px; ">BU HW 2016</a>
 +
    </div>
 +
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse " >
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">TEAM </a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Team">Meet the Team </a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Collaborations">Collaborations</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">PROJECT</a>
 +
           
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Demonstration</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Proof</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Design">Design</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Parts">Parts</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">NOTEBOOK</a>
 +
            <img src="https://static.igem.org/mediawiki/2016/5/58/T--BostonU_HW--indexTriangle_rcwolf.png" width="36" height="18" style="margin-bottom: 0 !important; margin-top: 0; padding-bottom: 0 !important; border: none; display: block; margin: 0 auto;">
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Notebook">Timeline</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Experiments">Experiments</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="https://2016.igem.org/Team:BostonU_HW/Human_Practices" class="dropbtn">HUMAN PRACTICES</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Gold">Gold</a>
 +
 +
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">AWARDS</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">MEDAL CRITERIA </a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Bronze">Bronze</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Gold">Gold</a>
 +
 +
            </div>
 +
        </li>
 +
       
 +
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
  
−
<p>Describe the experiments, research and protocols you used in your iGEM project.</p>
 
  
 
</div>
 
</div>
  
−
<div class="column half_size">
 
−
<h5>What should this page contain?</h5>
 
−
<ul>
 
−
<li> Protocols </li>
 
−
<li> Experiments </li>
 
−
<li>Documentation of the development of your project </li>
 
−
</ul>
 
  
 +
 +
</body>
 +
 +
 +
 +
<html>
 +
 +
 +
 +
 +
 +
 +
<html>
 +
 +
<style>
 +
 +
  html {
 +
    background-color: #D2D2D2;
 +
  }
 +
  body {
 +
    background-color: #D2D2D2;
 +
  }
 +
 
 +
  #greyWrapper {
 +
    padding-top: 30px;
 +
    background-color: #D2D2D2;
 +
    margin: 0px 0px 40px 0px;
 +
    min-height: 1000px;
 +
  }
 +
  #pageTitle {
 +
    margin-left: 25px;
 +
    padding-bottom: 16px;
 +
  }
 +
  .pageBanner {
 +
    position: fixed;
 +
    color:black;
 +
    background-color:white;
 +
    width:100%;
 +
    top:70px;
 +
    z-index: 1;
 +
  }
 +
  .densmoreCard {
 +
    background-color: white;
 +
    padding:0;
 +
  }
 +
  .advisorCard {
 +
    background-color: white;
 +
  }
 +
  .miniBio {
 +
    padding-left: 20px;
 +
    padding-right:20px;
 +
    padding-bottom:30px;
 +
  }
 +
  .bioIcon {
 +
    border: none;
 +
    display: block;
 +
    margin-top: -24px;
 +
    margin-bottom: -20px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
  }
 +
 +
 +
 +
 +
 +
.btn {
 +
    padding: 14px 24px;
 +
    border: 0 none;
 +
    border-radius: 0;
 +
    font-weight: 700;
 +
    font-size: 15px;
 +
    letter-spacing: 0.5px;
 +
    text-transform: uppercase;
 +
    -webkit-box-shadow: 5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    -moz-box-shadow:    5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    box-shadow:        5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    outline: #545454 solid 2px;
 +
   
 +
}
 +
 +
.btn:focus, .btn:active:focus, .btn.active:focus {
 +
    outline: 0 none;
 +
}
 +
 +
.btn-primary {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
.btn-primary:active, .btn-primary.active {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
 +
 +
.btn-primary:focus {
 +
    background: #ffffff;
 +
    color: #000000;
 +
}
 +
 +
 +
.btn:active:focus {
 +
    background: #545454 !important;
 +
    color: white;
 +
    box-shadow: none;
 +
}
 +
.btn-primary:hover{
 +
    background: #545454;
 +
    color: white;
 +
}
 +
 +
 +
</style>
 +
 +
 +
 +
<body>
 +
<!-- PAGE TITLE BANNER -->
 +
  <div id="greyWrapper">   
 +
    <div class="pageBanner">
 +
      <h3 id="pageTitle">EXPERIMENTS</h3>
 +
    </div>
 +
    <br><br><br><br>
 +
   
 +
   
 +
 +
 +
<div class="row" style="padding-top:100px; padding-bottom:100px;">
 +
  <div class="col-md-1"></div>
 +
  <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">
 +
    <div class="row">
 +
      <div class="col-md-1"></div>
 +
      <div class="col-md-10">
 +
        <div style="font-size: 2em; line-height: 150%; color:#355E62;"> Protocols</div>
 +
        <br><br>
 +
 +
<div class="row" style="padding-top:20px; padding-bottom:20px;">
 +
      <div class="col-md-1"></div>
 +
      <div class="col-md-10">
 +
        <video width="100%" controls>
 +
        <source src="https://static.igem.org/mediawiki/2016/3/34/T--BostonU_HW--SoftwareVideo_rcwolf.mp4" type="video/mp4">
 +
        Your browser does not support the video tag.
 +
      </video>
 +
      </div>
 +
      <div class="col-md-1"></div>
 +
    </div>
 +
<br><br>
 +
 +
        <div>
 +
          The protocols for fabricating microfluidic devices with the Neptune workflow are as follows:
 +
 +
Specify: <br>
 +
1.) Come up with a microfluidic chip idea! <br>
 +
2.) Write the idea out in terms of Liquid Flow Relations using the provided library of microfluidic components in the form of the User Constraints File. <br>
 +
[**optional**] Adjust the parameters of microfluidic components the UCF to fit the needs of the experiment. This enables rapid prototyping in that if one component needs to be edited, a change in one number can adjust all instances of a component on all subsequent designs!<br>
 +
3.) Let μShroomMapper convert the LFR to the more descriptive microfluidic language, MINT. <br><br>
 +
 +
Design: <br>
 +
[**optional**] If necessary, make any precise edits to the MINT file (similar to editing parameters on the UCF, this is a method of rapidly prototyping designs; changing one number here will change the specifications of one specific instance of the microfluidic component of the design) <br>
 +
1.) Let Fluigi convert the MINT to the blueprint files depicting your microfluidic chip! <br><br>
 +
 +
Build: <br>
 +
1.) Specify the volume you'd like to pull/push fluids with your controlling servo-syringe pumps <br>
 +
2.) Specify the precision with which you'd like to pull/push fluids with your controlling servo-syringe pumps <br>
 +
3.) Select and map which provided combinations of servos and syringe go to the pumps on your microfluidic design <br>
 +
4.) Use the provided ordering list to order the parts required to build the control infrastructure <br><br>
 +
 +
Assembly: <br>
 +
1.) Follow the instructions on the Assembly user interface page to assemble the control infrastructure of your microfluidic device, using a 3D printer <br>
 +
2.) Follow the instructions on the Assembly user interface page to assemble your microfluidic device, using a CNC mill <br>
 +
3.) Follow the instructions on the Assembly user interface page to connect the control infrastructure to your microfluidic device <br><br>
 +
 +
Control: <br>
 +
1.) Input commands following your microfluidic experimental protocol (opening/closing valves, dispensing liquids, pulling liquids using negative pressure) <br><br>
 +
 +
Capture and record results! <br><br> 
 +
        </div>
 +
      </div>
 +
      <div class="col-md-1"></div>
 +
    </div>
 +
  </div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
−
<div class="column half_size">
+
<div class="row" style="padding-top:100px; padding-bottom:100px;">
−
<h5>Inspiration</h5>
+
  <div class="col-md-1"></div>
−
<ul>
+
  <div class="col-md-10" style="background-color: white; padding-top:50px; padding-bottom:50px;">  
−
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
    <div class="row">
−
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
      <div class="col-md-1"></div>
−
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
      <div class="col-md-10">
−
</ul>
+
        <div style="font-size: 2em; line-height: 150%; color:#355E62;">Experiments and Development</div>
 +
        <br><br>
 +
        <div>
 +
        Three example experiments, two in collaboration with the MIT iGEM team with regards to culturing mammalian cells on a microfluidic device, and one covering a fictitious synthetic biologist's test case of characterizing a genetic part with how it reacts to variable levels of inducer, can be found on the on the proof page. <br><br>
 +
 
 +
For more information on the development of Neptune, see the timeline page.
 +
        </div>
 +
      </div>
 +
      <div class="col-md-1"></div>
 +
    </div>
 +
  </div>
 +
  <div class="col-md-1"></div>
 
</div>
 
</div>
  
  
−
<div class="clear"></div>
 
  
 +
<br><br>
  
−
<div class="column half_size">
 
  
  
  
−
</div>
 
  
  
−
</body>
 
  
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</body>
 
</html>
 
</html>

Latest revision as of 03:33, 20 October 2016


EXPERIMENTS





Protocols




The protocols for fabricating microfluidic devices with the Neptune workflow are as follows: Specify:
1.) Come up with a microfluidic chip idea!
2.) Write the idea out in terms of Liquid Flow Relations using the provided library of microfluidic components in the form of the User Constraints File.
[**optional**] Adjust the parameters of microfluidic components the UCF to fit the needs of the experiment. This enables rapid prototyping in that if one component needs to be edited, a change in one number can adjust all instances of a component on all subsequent designs!
3.) Let μShroomMapper convert the LFR to the more descriptive microfluidic language, MINT.

Design:
[**optional**] If necessary, make any precise edits to the MINT file (similar to editing parameters on the UCF, this is a method of rapidly prototyping designs; changing one number here will change the specifications of one specific instance of the microfluidic component of the design)
1.) Let Fluigi convert the MINT to the blueprint files depicting your microfluidic chip!

Build:
1.) Specify the volume you'd like to pull/push fluids with your controlling servo-syringe pumps
2.) Specify the precision with which you'd like to pull/push fluids with your controlling servo-syringe pumps
3.) Select and map which provided combinations of servos and syringe go to the pumps on your microfluidic design
4.) Use the provided ordering list to order the parts required to build the control infrastructure

Assembly:
1.) Follow the instructions on the Assembly user interface page to assemble the control infrastructure of your microfluidic device, using a 3D printer
2.) Follow the instructions on the Assembly user interface page to assemble your microfluidic device, using a CNC mill
3.) Follow the instructions on the Assembly user interface page to connect the control infrastructure to your microfluidic device

Control:
1.) Input commands following your microfluidic experimental protocol (opening/closing valves, dispensing liquids, pulling liquids using negative pressure)

Capture and record results!

Experiments and Development


Three example experiments, two in collaboration with the MIT iGEM team with regards to culturing mammalian cells on a microfluidic device, and one covering a fictitious synthetic biologist's test case of characterizing a genetic part with how it reacts to variable levels of inducer, can be found on the on the proof page.

For more information on the development of Neptune, see the timeline page.