Difference between revisions of "Team:Technion Israel/Design"

Line 1: Line 1:
 +
{{Team:Technion_Israel/navbar}}
 +
<html lang="en">
 +
   
 +
    <head>
 +
        <!-- Title for the page & metadata  -->       
 +
        <title>S.tar, by iGEM Technion 2016</title>
 +
    <meta charset="utf-8">
 +
    <meta name="navbar" content="width=device-width, initial-scale=1">
  
−
<html>
+
<style>/* inline page CSS */
 +
 +
body {
 +
}
  
 +
/* ==========Background and effects ========== */
 +
/*Make sure the div is unuiqe to each page*/
 +
.model_wrapper {
 +
position: relative;
 +
 +
background: white; /* For browsers that do not support gradients */
 +
background: -webkit-linear-gradient(white, #f8eee2, white); /* For Safari 5.1 to 6.0 */
 +
background: -o-linear-gradient(white, #f8eee2, white); /* For Opera 11.1 to 12.0 */
 +
background: -moz-linear-gradient(white, #f8eee2, white); /* For Firefox 3.6 to 15 */
 +
background: linear-gradient(white, #f8eee2, white); /* Standard syntax */
 +
/*background-image:url('addres');
 +
background-size:cover;
 +
filter: blur(5px) grayscale(80%) opacity(10%);*/
 +
}
 +
/* ========== END: and effects ========== */
  
 +
.referances {
 +
  font-size: 16px;
 +
outline: 1px solid black;
 +
padding: 20px;
 +
}
  
−
<h3>★  ALERT! </h3>
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes"> design special prize</a>. </p>
 
  
 +
/*
 +
Object in external CSS sheet:
  
 +
nav-tabs, cont_tabs:
 +
Open diffrent tabs, we uses imgs.
  
 +
back-to-top:
 +
go back to top. Apears only when going down the page.
  
 +
cont_box:
 +
The containers (box) which hold the texts and imgs in the page.
  
 +
img_cont:
 +
Every in-content-page img needs to have this class of img.
  
−
<div class="column full_size">
+
no-title-col:
 +
Every in-content-page img needs to have this class of col.
 +
*/
  
 +
/*canceling wiki bug (inlarge imgs stuck the page)*/
 +
.modal-backdrop {
 +
position: relative;
 +
}
  
−
<p>
 
−
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page.
 
−
</p>
 
  
 +
.cir_tabs{
 +
/*-webkit-filter: grayscale(0.75);*/
 +
cursor: pointer;
 +
transition: all .5s ease;
 +
margin: 0 auto;
 +
/* border: 2px solid #bbb;
 +
box-shadow: 5px 5px 3px grey;
 +
padding: 15px; */
 +
}
  
−
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
+
.cir_tabs:hover{
 +
-webkit-filter: grayscale(0);
 +
transform: scale(1.2,1.2);
 +
margin: 0 auto;
 +
/*border: 2px solid #000;
 +
box-shadow: 5px 5px 3px grey;*/
 +
}
  
−
<p>
+
</style>
−
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
−
</p>
+
  
  
−
<p>Teams who want to focus on art and design should be in the art and design special track. If you want to have a sub-project in this area, you should compete for this award.</p>
+
<script>
 +
 
 +
//up arrow:
 +
$(document).ready(function(){
 +
$(window).scroll(function () {
 +
if ($(this).scrollTop() > 350) {
 +
$('#back-to-top').fadeIn();
 +
} else {
 +
$('#back-to-top').fadeOut();
 +
}
 +
});
 +
// scroll body to 0px on click
 +
$('#back-to-top').click(function () {
 +
$('#back-to-top').tooltip('hide');
 +
$('body,html').animate({
 +
scrollTop: 0
 +
}, 800);
 +
return false;
 +
});
 +
 +
$('#back-to-top').tooltip('show');
 +
 
 +
});
 +
////////////////////////
 +
//Code: inlarge img on click:
 +
$(function() {
 +
$('.pop').on('click', function() {
 +
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
 +
$('#imagemodal').modal('show'); 
 +
});
 +
});
 +
//////////////////////
 +
///pop-ups:
 +
$(document).ready(function(){
 +
$('[data-toggle="popover"]').popover();
 +
});
 +
 
 +
$(function () {
 +
$('button').popover();
 +
});
 +
 
 +
</script>
 +
 
 +
</head>
 +
 
 +
 
 +
<body>
 +
 
 +
<header>
 +
</header>
 +
 +
<!-- ===== One overall container (wrapper) ===== -->
 +
<div class="model_wrapper">
 +
 
 +
 
 +
 +
<!-- ======== Cover photo: ======== -->
 +
<div class="row">
 +
<div class="col-xs-12">
 +
<img src="https://static.igem.org/mediawiki/2016/7/7b/T--Technion_Israel--Intein.jpg" class="img-responsive img-center cont_cover" width="100%">
 +
</div>
 +
</div>
 +
<!-- ===== END: Cover photo: ===== -->
 +
 
 +
 
 +
<br>
 +
 
 +
 
 +
<!-- ============ Tabs: ============ -->
 +
 
 +
<!-- =============== Tabs names: =============== -->
 +
<div class="row">
 +
<div class="col-md-12">
 +
 +
<ul class="nav nav-tabs" role="tablist">
 +
 
 +
<li role="presentation" class="col-sm-3 col-xs-6">
 +
<a href="#Peshawar" aria-controls="Peshawar" role="tab" data-toggle="tab">
 +
<img src="https://static.igem.org/mediawiki/2016/d/db/T--Technion_Israel--icon_intro.png" class="img-responsive img-center cir_tabs" width="75" height="75">
 +
<br><h4 class="text-center"><b>Introduction</b></h4>
 +
</a>
 +
</li>
 +
 
 +
<li role="presentation" class="col-sm-3 col-xs-6">
 +
<a href="#Aachen" aria-controls="Aachen" role="tab" data-toggle="tab">
 +
<img src="https://static.igem.org/mediawiki/2016/4/49/T--Technion_Israel--icon_lab.png" class="img-responsive img-center cir_tabs" width="75" height="75">
 +
<br><h4 class="text-center"><b>Design and implementation</b></h4>
 +
</a>
 +
</li>
 +
 
 +
<li role="presentation" class="col-sm-3 col-xs-6">
 +
<a href="#Results" aria-controls="Results" role="tab" data-toggle="tab">
 +
<img src="https://static.igem.org/mediawiki/2016/4/45/T--Technion_Israel--icon_results.png" class="img-responsive img-center cir_tabs" width="75" height="75">
 +
<br><h4 class="text-center"><b>Results</b></h4>
 +
</a>
 +
</li>
 +
 
 +
<li role="presentation" class="col-sm-3 col-xs-6">
 +
<a href="#outlook" aria-controls="outlook" role="tab" data-toggle="tab">
 +
<img src="https://static.igem.org/mediawiki/2016/4/47/T--Technion_Israel--icon_outlook.png" class="img-responsive img-center cir_tabs" width="75" height="75">
 +
<br><h4 class="text-center"><b>OutLook</b></h4>
 +
</a>
 +
</li>
 +
 
 +
</ul>
 +
</div>
 +
</div>
 +
<!-- ========== End: Tabs panel ========== -->
 +
 
 +
 
 +
<!-- =========== Tabs' content =========== -->
 +
<div class="tab-content">
 +
 
 +
<!-- =========== 1. Intro =========== -->
 +
<div role="tabpanel" class="tab-pane fade in active" id="Peshawar">
 +
<div class="row"> <!--Headline-->
 +
<div class="col-sm-12">
 +
<br>
 +
<h1 class="text-center"><u>FlashLab - Introduction</u></h1>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<!-- ========== Content ========== -->
 +
 
 +
 
 +
<div class="row"><!-- #1 row -->
 +
<div class="col-sm-10 col-sm-offset-1">
 +
<div class="cont_box">
 +
<div class="row">
 +
<div class="col-sm-12">
 +
<h2 class="">Introduction</h2>
 +
<p class="text-justify">
 +
FlashLab, a novel detection tool based on the chemotaxis system of <I>E. coli</I> bacteria <b>popup</b>
 +
It uses the chemotaxis system to concentrate colored bacteria, this in turn, creates a visible gradient
 +
in color – detection of target material. Using the S.tar technology, the FlashLab can detect verity of
 +
materials: hormones, amino acids, PCE etc.
 +
<br>
 +
</p>
 +
</div>
 +
 
 +
<div class="col-md-12">
 +
<a class="pop">
 +
<img src="https://static.igem.org/mediawiki/2016/7/74/T--Technion_Israel--fig1.JPG" class="img-responsive img-center img-cont" style="cursor: pointer;"><br>
 +
</a>
 +
<p class="text-center"><b>Figure 1:</b> Detection tool explanation</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div><!-- END: #1 row -->
 +
 
 +
<br>
 +
</div>
 +
<!-- =========== END: Intro =========== -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- =========== 2: conection to the project =========== -->
 +
<div role="tabpanel" class="tab-pane fade" id="Aachen">
 +
<div class="row"> <!--Headline-->
 +
<div class="col-sm-12">
 +
<br>
 +
<h1 class="text-center"><u>Design and implementation</u></h1>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<!-- ========== Content ========== -->
 +
 
 +
 
 +
<div class="row"><!-- #1 row -->
 +
<div class="col-sm-10 col-sm-offset-1">
 +
<div class="cont_box">
 +
<div class="row">
 +
 
 +
 
 +
<div class="col-sm-12">
 +
<h3>FlashLab parts:</h3>
 +
<p class="text-justify">
 +
The device is composed of a <a href="http://ibidi.com/xtproducts/en/ibidi-Labware/sticky-Slides/sticky-Slide-I-Luer" target="_blank">commercial fluidic chip</a>:
 +
</p>
 +
</div>
 +
 
 +
<div class="col-md-12">
 +
<a class="pop">
 +
<img src="https://static.igem.org/mediawiki/2016/8/82/T--Technion_Israel--fig2.jpg" class="img-responsive img-center img-cont" style="cursor: pointer;"><br>
 +
</a>
 +
<p class="text-center"><b>Figure 2:</b>The geometry of a commercial fluidic chip.</p>
 +
</div>
 +
 
 +
<div class="col-sm-12">
 +
<p class="text-justify">
 +
The chip is open on the button part and closed with a standard microscope cover glass (0.3[mm] thick).
 +
</p>
 +
</div>
 +
 
 +
<br>
 +
<br>
 +
 
 +
<div class="col-sm-12">
 +
<h3>FlashLab setup:</h3>
 +
<p class="text-justify">
 +
The setup of the device is composed of two parts, as shown below (Figure 3):
 +
</p>
 +
</div>
 +
 
 +
<div class="col-md-12">
 +
<a class="pop">
 +
<img src="https://static.igem.org/mediawiki/2016/thumb/c/c1/T--Technion_Israel--fig3.jpg/800px-T--Technion_Israel--fig3.jpg" class="img-responsive img-center img-cont" style="cursor: pointer;"><br>
 +
</a>
 +
<p class="text-center"><b>Figure 3: </b>The chip setup.</p>
 +
</div>
 +
 
 +
<div class="col-sm-12">
 +
<h3>FlashLab test</h3>
 +
<p class="text-justify">
 +
Once the sample is loaded, it diffuses into the channel. If the sample contains a repellent, the bacteria
 +
will react and move away from it as shown below:
 +
</p>
 +
</div>
 +
 
 +
<div class="col-md-12">
 +
<a class="pop">
 +
<img src="https://static.igem.org/mediawiki/2016/thumb/8/84/T--Technion_Israel--fig44.jpg/800px-T--Technion_Israel--fig44.jpg" class="img-responsive img-center img-cont" style="cursor: pointer;"><br>
 +
</a>
 +
<p class="text-center"><b>Figure 4: </b>Chemotaxis reaction in the chip.</p>
 +
</div>
 +
 
 +
<div class="col-sm-12">
 +
<p class="text-justify">
 +
This will cause changes in the bacteria concentration: very low concentration, where the repellent diffused
 +
to, next to a very high concentration, where the bacteria moved to (right picture, figure 1:4). Those changes
 +
will also be visible, as the higher concentration of colored bacteria manifests itself in a stronger color
 +
(blue gradient, figures 1:3 and 1:4).<br>
 +
If the sample does not contain target material, the bacteria will not react and no gradient will form.<br>
 +
<b>======(For more information see mathematical model)======</b>
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div><!-- END: #1 row -->
 +
</div>
 +
<!-- =========== END: 2 - conection to the project =========== -->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- ==================== 3: Resuls ==================== -->
 +
<div role="tabpanel" class="tab-pane fade" id="Results">
 +
<div class="row"> <!--Headline-->
 +
<div class="col-sm-12">
 +
<br>
 +
<h1 class="text-center"><u>Results:</u></h1>
 +
</div>
 +
</div>
 +
 
 +
<!-- ========== Content ========== -->
 +
 
 +
 
 +
<div class="row"><!-- #1 row -->
 +
<div class="col-sm-10 col-sm-offset-1">
 +
<div class="cont_box">
 +
<div class="row">
 +
 
 +
 
 +
<div class="col-sm-12">
 +
<h3>FlashLab parts:</h3>
 +
<p class="text-justify">
 +
The set up for the device is as shown in "Design and Implementation". The bacteria, <I>E.coli</I> strain
 +
<b>#$%^&@#$%^</b>, was taken from a petri dish and diluted in 180[µL] of motility buffer. The Chemo-repellent
 +
used was 30 [µL] of <b>#$%^&@#$%^</b> in concentration of α[M] while the control was motility buffer. The
 +
pictures were taken in differential of  apart.
 +
</p>
 +
</div>
 +
 
 +
<div class="col-md-12">
 +
<a class="pop">
 +
<img src="" class="img-responsive img-center img-cont" style="cursor: pointer;"><br>
 +
</a>
 +
<p class="text-center"><b>Figure XYZ:</b>ABC.</p>
 +
</div>
 +
 
 +
<div class="col-sm-12">
 +
<p class="text-justify">
 +
Following γ[min],  a noticeable gradient of blue color formed in the chip's channel. on the far left, a relatively
 +
light shade. Next to it, an area with a darker tone and from there up to the right end of the channel, the tone
 +
didn’t change at all. This lines up with the theory perfectly, as the lighter shade is caused by colored bacteria
 +
moving away from the repellent. The darker shade is the clustering of bacteria in the chemo-repellent diffusion
 +
limit. All other bacteria in the channel, were not exposed to the repellent and so didn’t react.<br>
 +
<br>
 +
<b>==========For more information see chip experiment protocol==========</b>
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div><!-- END: #1 row -->
 +
</div>
 +
<!-- ====================END: 3 Resuls ==================== -->
 +
 
 +
 
 +
 
 +
 
 +
<!-- ==================== 4: Outlook ==================== -->
 +
<div role="tabpanel" class="tab-pane fade" id="outlook">
 +
<div class="row"> <!--Headline-->
 +
<div class="col-sm-12">
 +
<br>
 +
<h1 class="text-center"><u>Outlook</u></h1>
 +
</div>
 +
</div>
 +
 
 +
<!-- ========== Content ========== -->
 +
 
 +
<div class="row"><!-- #1 row -->
 +
<div class="col-sm-10 col-sm-offset-1">
 +
<div class="cont_box">
 +
<div class="row">
 +
 
 +
 
 +
<div class="col-sm-12">
 +
<p class="text-justify">
 +
FlashLab has advatages as a detection tool:
 +
- <b>Cheap</b> The only major cost is the fluidic chip and one costs about 15$ and can be reuse multible times.<br>
 +
- <b>Fast</b>  as shown in the expermints, it takes about 30 minutes for detection. This is faster then most other bacterial detection (based on transecription and translation) and most laboratory tests (HPLC). <br>
 +
- <b>Verstile</b> The S.tar system enable this device to detect verity of materials: hormones, amino acids, PCE etc. <br>
 +
- <b>Senstive:</b> Bacteria can sense extrimly small traces of target material.<br>
 +
- <b>Easy to use:</b> The set up of the system is an easy, two parts process. To reuse the chip you only need to flush the channel with water and dry.<br>
 +
<br>
 +
<b>======(For Farther improvement see "Design and Devolpment")======</b>
 +
</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div><!-- ============ END: Tabs ============ -->
 +
 
 +
 
 +
<!--Code: Click on img to enlarge it-->
 +
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 +
  <div class="modal-dialog">
 +
    <div class="modal-content">             
 +
      <div class="modal-body">
 +
      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 +
        <img src="" class="imagepreview" style="width: 100%;" >
 +
      </div>
 +
    </div>
 +
 
 +
 
 +
</div>
 
</div>
 
</div>
  
 +
 +
<br>
 +
<br>
 +
 +
<div class="row">
 +
<div class="col-sm-10 col-sm-offset-1">
 +
<a href="#intein_referances" data-toggle="collapse">Referances</a>
 +
<div id="intein_referances" class="collapse">
 +
 +
<p class="referances">
 +
1. KELLER, Evelyn F.; SEGEL, Lee A. Model for chemotaxis. Journal of theoretical biology, 1971, 30.2: 225-234.‏‬ <br>
 +
</p>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 +
<br>
 +
<br>
  
  
 +
<a id="back-to-top" href="#" class="btn btn-lg back-to-top" role="button" title="Up" data-toggle="tooltip" data-placement="left"><img src="https://static.igem.org/mediawiki/2016/5/5a/T--Technion_Israel--up_arrow.png" alt=""></a>
  
  
 +
</body>
 
</html>
 
</html>
 +
{{:Team:Technion_Israel/supporters}}

Revision as of 17:33, 13 October 2016

S.tar, by iGEM Technion 2016

S.tar, by iGEM Technion 2016


FlashLab - Introduction

Introduction

FlashLab, a novel detection tool based on the chemotaxis system of E. coli bacteria popup It uses the chemotaxis system to concentrate colored bacteria, this in turn, creates a visible gradient in color – detection of target material. Using the S.tar technology, the FlashLab can detect verity of materials: hormones, amino acids, PCE etc.


Figure 1: Detection tool explanation



Design and implementation

FlashLab parts:

The device is composed of a commercial fluidic chip:


Figure 2:The geometry of a commercial fluidic chip.

The chip is open on the button part and closed with a standard microscope cover glass (0.3[mm] thick).



FlashLab setup:

The setup of the device is composed of two parts, as shown below (Figure 3):


Figure 3: The chip setup.

FlashLab test

Once the sample is loaded, it diffuses into the channel. If the sample contains a repellent, the bacteria will react and move away from it as shown below:


Figure 4: Chemotaxis reaction in the chip.

This will cause changes in the bacteria concentration: very low concentration, where the repellent diffused to, next to a very high concentration, where the bacteria moved to (right picture, figure 1:4). Those changes will also be visible, as the higher concentration of colored bacteria manifests itself in a stronger color (blue gradient, figures 1:3 and 1:4).
If the sample does not contain target material, the bacteria will not react and no gradient will form.
======(For more information see mathematical model)======


Results:

FlashLab parts:

The set up for the device is as shown in "Design and Implementation". The bacteria, E.coli strain #$%^&@#$%^, was taken from a petri dish and diluted in 180[µL] of motility buffer. The Chemo-repellent used was 30 [µL] of #$%^&@#$%^ in concentration of α[M] while the control was motility buffer. The pictures were taken in differential of apart.


Figure XYZ:ABC.

Following γ[min], a noticeable gradient of blue color formed in the chip's channel. on the far left, a relatively light shade. Next to it, an area with a darker tone and from there up to the right end of the channel, the tone didn’t change at all. This lines up with the theory perfectly, as the lighter shade is caused by colored bacteria moving away from the repellent. The darker shade is the clustering of bacteria in the chemo-repellent diffusion limit. All other bacteria in the channel, were not exposed to the repellent and so didn’t react.

==========For more information see chip experiment protocol==========


Outlook

FlashLab has advatages as a detection tool: - Cheap The only major cost is the fluidic chip and one costs about 15$ and can be reuse multible times.
- Fast as shown in the expermints, it takes about 30 minutes for detection. This is faster then most other bacterial detection (based on transecription and translation) and most laboratory tests (HPLC).
- Verstile The S.tar system enable this device to detect verity of materials: hormones, amino acids, PCE etc.
- Senstive: Bacteria can sense extrimly small traces of target material.
- Easy to use: The set up of the system is an easy, two parts process. To reuse the chip you only need to flush the channel with water and dry.

======(For Farther improvement see "Design and Devolpment")======



Referances

1. KELLER, Evelyn F.; SEGEL, Lee A. Model for chemotaxis. Journal of theoretical biology, 1971, 30.2: 225-234.‏‬



S.tar, by iGEM Technion 2016