Difference between revisions of "Team:BioIQS-Barcelona/Description"

 
(15 intermediate revisions by the same user not shown)
Line 41: Line 41:
 
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
 
     <link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
−
     <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
+
     <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">    
−
 
+
    <!-- Importing fonts awesome, it doesnt work from allmin.css because of url('undefined'), needed to upload manually -->   
 +
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  
 
     <link rel="stylesheet" href="https://2018.igem.org/Template:BioIQS-Barcelona/css/new-age?action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/Template:BioIQS-Barcelona/css/new-age?action=raw&ctype=text/css">
Line 48: Line 49:
 
     <link rel="stylesheet" href="https://2018.igem.org/Template:BioIQS-Barcelona/css/adaptwiki?action=raw&ctype=text/css">
 
     <link rel="stylesheet" href="https://2018.igem.org/Template:BioIQS-Barcelona/css/adaptwiki?action=raw&ctype=text/css">
  
 +
    <style>
 +
    #cuttheword {
 +
            /* To cut the long names of the images */
 +
            /* These are technically the same, but use both */
 +
            overflow-wrap: break-word;
 +
            word-wrap: break-word;
 +
           
 +
            -ms-word-break: break-all;
 +
            /* Instead use this non-standard one: */
 +
            word-break: break-word;
 +
           
 +
            /* Adds a hyphen where the word breaks, if supported (No Blink) */
 +
            -ms-hyphens: auto;
 +
            -moz-hyphens: auto;
 +
            -webkit-hyphens: auto;
 +
            hyphens: auto;
 +
            }
 +
    </style>
  
 
     <!--Added MathJax hack to make inline equations work-->
 
     <!--Added MathJax hack to make inline equations work-->
Line 64: Line 83:
 
     <navigationbar></navigationbar>
 
     <navigationbar></navigationbar>
  
 +
    <button id="myBtn" class="js-scroll-trigger" title="Go to top">Top</button>
 +
   
 
     <header class="masthead little">
 
     <header class="masthead little">
 
         <div class="container h-100">
 
         <div class="container h-100">
Line 70: Line 91:
 
                     <div class="header-content">
 
                     <div class="header-content">
 
                         <h1 class="mb-5">Project | Overview</h1>
 
                         <h1 class="mb-5">Project | Overview</h1>
−
                         <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Description#download" class="btn btn-outline btn-xl js-scroll-trigger">Have a look!</a>
+
                         <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Description#cl-description" class="btn btn-outline btn-xl js-scroll-trigger">Have a look!</a>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
Line 76: Line 97:
 
         </div>
 
         </div>
 
     </header>
 
     </header>
−
 
+
     <section class="st-description block-desc" id="cl-description">
−
     <section class="project text-center" id="project">
+
 
         <div class="container">
 
         <div class="container">
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-md-9 mx-auto">
+
                 <div class="col-md-12 mx-auto">
−
                     <h2 class="section-heading orange">Project description</h2>
+
                     <div class="row justify-content-center">
−
                    <h3 class="orange">We would like to present you a brief description of our project on celiac disease:</h3>
+
                        <h2 class="section-heading orange">Human Practices</h2>
−
 
+
                        <div class="col-md-8 right fletxa-d-l">
−
                    <div class="col-md-auto">
+
                            <div class="row block-sept">
−
                        <p class="book orange">Our project is based on the design of a <b>personalized gluten sensor</b> by using the common tools of synthetic biology. There are already several sensors that are able to detect gluten in the food. However, there are milestones that still have not been overcome. We propose a robust model in which the HLA molecule of a patient is expressed and used as a sensor to detect specific reactive gluten epitopes.</p>
+
                                <div class="col-md-12">
 +
                                    <p class="book orange-medium">Our project aims to offer a real-world solution to ease celiac patient's life. Consequently, we engaged with the celiac community in an integrative way. See how <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Human_Practices">the necessities of the celiac community</a> shaped our project.</p>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
−
                    <a class="js-scroll-trigger a-arrow" href="https://2018.igem.org/Team:BioIQS-Barcelona/Description#t-project"><span class="arrow down"></span></a>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 93: Line 116:
 
     </section>
 
     </section>
  
−
     <section class="t-project" id="t-project">
+
     <section class="st-description block-desc b-orange-intense" id="collaborate">
 
         <div class="container">
 
         <div class="container">
−
             <div class="row justify-content-center cnt">
+
             <div class="row">
−
                 <div class="col-md-5 image">
+
                 <div class="col-md-12 mx-auto">
−
                    <img src="https://static.igem.org/mediawiki/2018/2/26/T--BioIQS-Barcelona--2018_t-cell.png">
+
−
                </div>
+
−
                <div class="col-md-7 text-description lines">
+
 
                     <div class="row justify-content-center">
 
                     <div class="row justify-content-center">
−
                         <div class="col-md-11 col-lg-7">
+
                        <h2 class="section-heading white" style="/*Activar per tallar paraula massa llarga overflow-wrap: break-word; word-wrap: break-word;*/ overflow: hidden; word-break:break-all; /*Activar per ficar 3 puntets white-space: nowrap; text-overflow: ellipsis*/;">PCR standardization</h2>
−
                             <p class="text-b"><b>Coeliac disease (CD)</b> is an autoimmune disorder that is closely related with HLA (Human leukocyte antigen), a type of receptor that are located in the surface of almost every cell of a human tissue, including white blood cells.</p>
+
                         <div class="col-md-8 right fletxa-d-l">
 +
                             <div class="row block-sept">
 +
                                <div class="col-md-12">
 +
                                    <p class="book white">The personalized gluten sensor is based on the same molecule used by the human immune system cells to detect the presence of gluten, the <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Celiac_disease.thml">HLA-DQ protein</a>. </p>
 +
                                    <p class="book white">Different variants of this protein detect different gluten epitopes. Therefore, the sensor can be personalized if it incorporates the genetic variant of the HLA-DQ protein of each patient. However, personalization often comes at a higher cost. Our team designed and characterized a <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Basic_Part">standard PCR protocol</a> that could be used to obtain the genetic variant of each user to make the personalization of the sensor feasible.</p>
 +
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <div class="row cnt block-desc">
+
        </div>
−
              <div class="col-mx-auto relative microscopi">
+
    </section>
−
                <div class="col-md-7 ">
+
−
                    <p class="apart fletxa">These molecules are responsible for the correct discrimination between what is self and foreign proteins, guaranteeing the correct immune response against foreign agents that can cause infections.
+
−
                    </p>
+
−
                </div>
+
−
                 
+
−
              </div>
+
−
               
+
  
−
            </div>
+
    <section class="st-description block-desc" id="cl-description">
−
 
+
        <div class="container">
−
             <div class="row cnt">
+
             <div class="row">
−
                 <div class="col-md-6 text-description">
+
                 <div class="col-md-12 mx-auto">
−
                     <p class="text-b fletxa-d">
+
                     <div class="row justify-content-center">
−
                        Within the HLA protein family there are the highly polymorphic HLA-DQ, which means that
+
                         <div class="col-md-8">
−
                         <b>there are a lot of existing genetic variants of these molecules</b>. Some of these HLA-DQ variants are able to recognize different gluten epitopes (aminoacid sequence of a protein) and present them to the T cells. More specifically, 25% of the general population carry the HLA-DQ that can recognize gluten derived epitopes, but only 1% of the population suffer from coeliac disease.
+
                            <div class="row justify-content-center">
−
                    </p>
+
                                <h2 class="section-heading orange">Expression system</h2>
−
 
+
                            </div>
−
                </div>
+
                        </div>
−
                <div class="col-md-6 end">
+
                        <div class="col-md-8 right fletxa-d-l">
−
                    <p class="apart yellow">The reason of such fact is that the inflammatory reaction is triggered by some T cells that can sense the gluten epitope presented by the HLA-DQ.</p>
+
                            <div class="row block-sept">
−
                    <!--                    <img src="styles/img/hla-solo.png">-->
+
                                <div class="col-md-12">
−
                </div>
+
                                    <p class="book orange-medium">Since our sensor is based on a human protein, the expression system of it needs to be thoroughly designed. Our team carefully studied different approaches to make possible the HLA-DQ protein expression in <i>E. coli</i>. Additionally, other expression hosts that can carry post-transductional modifications, such as <i>P. pastoris</i>, have been also considered.</p>
−
 
+
                                    <p class="book orange-medium">We have tested and characterized these expression systems to choose which one would be used to create our sensor. See more in our <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Composite_Part">composite parts</a> page.</p>
−
            </div>
+
                                </div>
−
 
+
                            </div>
−
            <div class="row justify-content-center cnt block-desc">
+
−
                <div class="col-md-4 image">
+
−
                    <img src="https://static.igem.org/mediawiki/2018/1/1e/T--BioIQS-Barcelona--2018_hla-solo.png">
+
−
                </div>
+
−
                <div class="col-md-7 text-description">
+
−
                    <div class="row justify-content-center prov">
+
−
                        <div class="col-sm-9">
+
−
                            <p class="text-b">Understanding why the inflammatory response is triggered by a certain type of T cells upon epitope presentation by HLA-DQ molecules is essential to uncover the mechanism of CD. Since the first step for the immune response activation is the recognition and binding of the gluten epitope to the HLA-DQ receptor. </p>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
−
                </div>
 
−
                <div class="col-md-8 end cnt block-desc-t">
 
−
                    <p class="apart yellow">The development of a personalized sensor to determine reactive epitopes could help to better understand the disease and would also allow the screening of those foods that could potentially trigger an immune response to the patient.</p>
 
−
                </div>
 
−
 
−
            </div>
 
−
            <div class="row justify-content-center">
 
−
                <div class="col-sm-3 button">
 
−
                    <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Description#objectiv" class="text-transform js-scroll-trigger">Look our objectives!</a>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 158: Line 160:
 
     </section>
 
     </section>
  
−
 
+
     <section class="st-description block-desc b-orange-intense" id="collaborate">
−
     <section class="objectiv text-center" id="objectiv">
+
 
         <div class="container">
 
         <div class="container">
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-md-8 mx-auto">
+
                 <div class="col-md-12 mx-auto">
−
                     <h2 class="section-heading orange">Objectives</h2>
+
                     <div class="row justify-content-center">
−
                    <h3 class="orange">Here there are:</h3>
+
                        <div class="col-md-8">
−
 
+
                            <div class="row justify-content-center">
−
                    <div class="col-md-auto orange">
+
                                <h2 class="section-heading white">Detection system</h2>
−
                        <p class="book">In our iGEM Project we will design a
+
                            </div>
−
                            <b>personalized gluten sensor</b> through a synthetic biology approach. To do so, we decided to build a model based on the HLA expression of the patient which will be coupled to a sensor, allowing the detection of reactive epitopes. The main specificities of our sensor are described as follows:</p>
+
                        </div>
 +
                        <div class="col-md-8 right fletxa-d-l">
 +
                            <div class="row block-sept">
 +
                                <div class="col-md-12">
 +
                                    <p class="book white">We believe in the inner beauty of every project. Therefore, we are aware that the experimental work is essential, but nothing could be developed without a solid model. Our team designed a theoretical model of the sensor, which studies the detection system of our sensor. See more in our <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Model">modeling page</a>.</p>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
−
                    <a class="js-scroll-trigger a-arrow" href="https://2018.igem.org/Team:BioIQS-Barcelona/Description#t-objectives"><span class="arrow down"></span></a>
 
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 176: Line 183:
 
     </section>
 
     </section>
  
−
     <section class="t-objectives" id="t-objectives">
+
     <section class="st-description block-desc" id="cl-description">
 
         <div class="container">
 
         <div class="container">
 
             <div class="row">
 
             <div class="row">
−
                 <div class="col-md-6 right">
+
                 <div class="col-md-12 mx-auto">
−
                     <div class="row">
+
                     <div class="row justify-content-center">
−
                         <div class="col-md-12">
+
                         <div class="col-md-8">
−
                             <p class="apart big">first</p>
+
                             <div class="row justify-content-center">
−
                                    <p class="text-b">Since our sensor will be built <b>according to the patient HLA</b>, it will allow the detection of specific reactive epitopes independently of the food source.</p>
+
                                <h2 class="section-heading orange" id="cuttheword">Collaborations</h2>
 +
                            </div>
 
                         </div>
 
                         </div>
−
                          
+
                         <div class="col-md-8 right">
−
                       
+
                            <div class="row block-sept">
−
                    </div>
+
                                <div class="col-md-12">
−
                </div>
+
                                    <p class="book orange-medium">One of the most exciting things of being part of the iGEM community is the possibility to build relations with other teams from all around the world. When it comes to research, it is essential to establish collaborations. In the iGEM competition, there are several ways to share, communicate and set up a network with the community. See how we engaged with other teams in our <a href="https://2018.igem.org/Team:BioIQS-Barcelona/Collaborations">collaborations page</a>.</p>
−
                <div class="col-md-6 left">
+
                                </div>
−
                    <div class="row">
+
                            </div>
−
                        <div class="col-md-12">
+
−
                            <p class="apart big">second</p>
+
−
                            <p class="text-b">Additionally, our sensor will be able to detect reactive epitopes even in
+
−
                                <b>fermented foods.</b></p>
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
            <div class="row separation">
 
−
                <div class="col-md-6 right">
 
−
                    <div class="justify-content-center">
 
−
                        <p class="apart big">third</p>
 
−
                        <p class="text-b">The methodology implemented in our sensor could be used for the <b>identification of new reactive epitopes</b> and unknown allelic variants.</p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-md-6 left">
 
−
                    <p class="apart big">fourth</p>
 
−
                    <p class="text-b">Our design requires<b> only a DNA sample of the patient.</b> Therefore, the methodology and application of our sensor could be extended for the detection of other HLA related disorders.</p>
 
−
                </div>
 
−
            </div>
 
−
 
 
         </div>
 
         </div>
 
     </section>
 
     </section>
Line 217: Line 208:
 
     <footer></footer>
 
     <footer></footer>
  
−
     <!-- Copio tots a la carpeta scripts. No fico les versions .min sino les completes pq sigui el programa qho faci min -->
+
 
 +
     <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/wiki?action=raw&ctype=text/javascript"></script> <!-- calling all minified scripts -->
  
−
    <!-- Bootstrap core JavaScript -->
 
−
    <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/jquery?action=raw&ctype=text/javascript"></script>
 
−
    <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/bootstrapbundle?action=raw&ctype=text/javascript"></script>
 
−
 
−
    <!-- Plugin JavaScript -->
 
−
    <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/jqueryeasing?action=raw&ctype=text/javascript"></script>
 
−
 
−
    <!-- Custom scripts for this template -->
 
−
    <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/new-age?action=raw&ctype=text/javascript"></script>
 
−
 
−
    <script src="https://2018.igem.org/Template:BioIQS-Barcelona/js/scrollsensitive?action=raw&ctype=text/javascript"></script>
 
−
 
−
    <script type="text/javascript">
 
−
        $(document).ready(function(){   
 
−
            //Check if the current URL contains '#'
 
−
            if(document.URL.indexOf("#")==-1){
 
−
                // Set the URL to whatever it was plus "#".
 
−
                url = document.URL+"#";
 
−
                location = "#";
 
−
       
 
−
                //Reload the page
 
−
                location.reload(true);
 
−
            }
 
−
        });
 
−
        </script>
 
  
  
  
 
</html>
 
</html>

Latest revision as of 18:56, 17 December 2018

BIO IQS

Project | Overview

Have a look!

Human Practices

Our project aims to offer a real-world solution to ease celiac patient's life. Consequently, we engaged with the celiac community in an integrative way. See how the necessities of the celiac community shaped our project.

PCR standardization

The personalized gluten sensor is based on the same molecule used by the human immune system cells to detect the presence of gluten, the HLA-DQ protein.

Different variants of this protein detect different gluten epitopes. Therefore, the sensor can be personalized if it incorporates the genetic variant of the HLA-DQ protein of each patient. However, personalization often comes at a higher cost. Our team designed and characterized a standard PCR protocol that could be used to obtain the genetic variant of each user to make the personalization of the sensor feasible.

Expression system

Since our sensor is based on a human protein, the expression system of it needs to be thoroughly designed. Our team carefully studied different approaches to make possible the HLA-DQ protein expression in E. coli. Additionally, other expression hosts that can carry post-transductional modifications, such as P. pastoris, have been also considered.

We have tested and characterized these expression systems to choose which one would be used to create our sensor. See more in our composite parts page.

Detection system

We believe in the inner beauty of every project. Therefore, we are aware that the experimental work is essential, but nothing could be developed without a solid model. Our team designed a theoretical model of the sensor, which studies the detection system of our sensor. See more in our modeling page.

Collaborations

One of the most exciting things of being part of the iGEM community is the possibility to build relations with other teams from all around the world. When it comes to research, it is essential to establish collaborations. In the iGEM competition, there are several ways to share, communicate and set up a network with the community. See how we engaged with other teams in our collaborations page.