Difference between revisions of "Team:TEC-Costa Rica/Human Practice/Synbiothon"

 
(42 intermediate revisions by the same user not shown)
Line 20: Line 20:
 
vertical-align: middle;
 
vertical-align: middle;
 
background-color: rgba(0, 0, 0, 0.2);
 
background-color: rgba(0, 0, 0, 0.2);
−
}
 
−
.jumbotron span {
 
−
font-size: 40px;
 
−
}
 
−
.parallax {
 
−
perspective: 1px;
 
−
overflow-x: hidden;
 
−
overflow-y: auto;
 
 
}
 
}
−
.concept {
 
−
display: block;
 
−
text-align: center;
 
−
margin: 10px auto 0 auto;
 
−
width: 80%
 
−
}
 
 
#synbiothon-details { margin-top: 20px; }
 
#synbiothon-details { margin-top: 20px; }
 
#synbiothon-details .row { margin-top: 10px; }
 
#synbiothon-details .row { margin-top: 10px; }
−
#synbiothon-details .row .col-sm-4 { height: 350px; }
+
#synbiothon-details .row .col-sm-3 {  
 +
height: 350px;  
 +
margin-bottom: 20px;
 +
}
 
.panel {
 
.panel {
−
    border: 1px solid gray;
+
    border-radius: 0 !important;
−
    border-radius:0 !important;
+
 
    transition: box-shadow 0.5s;
 
    transition: box-shadow 0.5s;
 
    height: 100%;
 
    height: 100%;
Line 53: Line 41:
 
.panel-heading {
 
.panel-heading {
 
    color: #fff !important;
 
    color: #fff !important;
−
    background-color: gray !important;
 
 
    padding: 25px;
 
    padding: 25px;
 
    border-bottom: 1px solid transparent;
 
    border-bottom: 1px solid transparent;
Line 60: Line 47:
 
    border-bottom-left-radius: 0px;
 
    border-bottom-left-radius: 0px;
 
    border-bottom-right-radius: 0px;
 
    border-bottom-right-radius: 0px;
 +
    height: 125px;
 
}
 
}
 +
.panel-body { height: 125px; }
 
.panel-body p { text-align: center; }
 
.panel-body p { text-align: center; }
 
.panel-footer { background-color: white !important; }
 
.panel-footer { background-color: white !important; }
Line 70: Line 59:
 
.panel-footer .btn {
 
.panel-footer .btn {
 
    margin: 15px 0;
 
    margin: 15px 0;
−
    background-color: gray;
 
 
    color: #fff;
 
    color: #fff;
 
}
 
}
−
.winners { display: block; }
+
#syn-video h1 { text-align: center; }
−
.winners-description { padding: 20px; }
+
#syn-video video {  
−
#myCarousel p {
+
display: block;
−
text-align: center;
+
margin: 0 auto;
−
}
+
width: 800px;
−
.carousel {  height: 350px; }
+
height: 450px;
−
.carousel {
+
−
height: 350px;
+
−
margin-bottom: 60px;
+
 
}
 
}
−
.carousel-caption { z-index: 10; }
+
#synbiothon-details .row {
−
.carousel .item {
+
padding-top: 20px;
−
height: 350px;
+
border-top: 1px solid #d3d3d3;
−
background-color: #777;
+
−
}
+
−
.carousel-inner > .item > img {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
min-width: 100%;
+
−
height: 350px;
+
−
}
+
−
.carousel-indicators, .mw-content-ltr ol {
+
−
position: absolute;
+
−
bottom: 10px;
+
−
left: 50%;
+
−
z-index: 15;
+
−
width: 60%;
+
−
padding-left: 0;
+
−
margin-left: -30%;
+
−
text-align: center;
+
−
list-style: none;
+
−
}
+
−
@media (min-width: 768px) {
+
−
.carousel-caption p {
+
−
margin-bottom: 20px;
+
−
font-size: 21px;
+
−
line-height: 1.4;
+
−
}
+
 
}
 
}
 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
Line 122: Line 81:
 
.panel { height: auto; }
 
.panel { height: auto; }
 
.panel-body { height: auto; }
 
.panel-body { height: auto; }
 +
.panel-heading { height: auto; }
 
}
 
}
 
@media screen and (max-width: 480px) {
 
@media screen and (max-width: 480px) {
 
.panel { height: auto; }
 
.panel { height: auto; }
 
.panel-body { height: auto; }
 
.panel-body { height: auto; }
−
} }
+
.panel-heading { height: auto; }
 +
}
 
@media screen and (max-width: 480px) {
 
@media screen and (max-width: 480px) {
 
}
 
}
Line 133: Line 94:
 
<main class="synbiothon well">
 
<main class="synbiothon well">
 
<div class="jumbotron text-center parallax">    
 
<div class="jumbotron text-center parallax">    
−
<h1 style="font-size: 50px;">SynBioThon 2016<br><span>Rewriting the code</span></h1>
+
<h1 style="font-size: 50px;">SynBioThon 2016<br><span>Rewriting the code</span></h1>
 
</div>
 
</div>
 
<div class="concept">
 
<div class="concept">
−
<p style="text-align: center;">SynBioThon 2016 (SBT16) is a Synthetic Biology competition, in which teams of students work for a weekend to create an in silico genetic device that can solve some kind of problem.
+
<p style="text-align: center;">SynBioThon 2016 (SBT16) is a Synthetic Biology competition, in which teams of students work for a weekend to create an <em>in silico</em> genetic device that can solve some kind of problem. SBT16 was organized not only as a mean to promote Synthetic Biology within the community but also to make aware about the importance of the application of Synthetic Biology as a high potential tool that allows technological development in Costa Rica. As an iGEM team, we wanted to improve innovation, creativity, and teamwork among participants; we worked to generate a space for student’s active participation in science.</p>
−
<br><br>SBT16 was organized not only as a mean to promote Synthetic Biology within the community but also to make aware about the importance of the application of Synthetic Biology as a high potential tool that allows technological development in Costa Rica.<br><br>As an iGEM team, we wanted to improve innovation, creativity, and teamwork among participants; we worked to generate a space for student’s active participation in science.</p>
+
 
</div>
 
</div>
−
<h2>Reach</h2>
+
<div id="syn-video" class="container-fluid">
−
<p>For SBT16, we had diverse talks in different classes and universities, trying to reach the most diverse participants. In our college (TEC), we spoke with people of different majors (Biotechnology Engineering, Material Science, Agricultural Engineering, and others). We also went to two other public universities: University of Costa Rica (UCR), where we spoke with people of Biology, Microbiology and Pharmacy, and the National University (UNA), where we talked to students of Biology. We also gave talks in private universities such as UCIMED (Medical School), LEAD University (Business Management), and others.<br><br>Prior to the event, we had preparatory workshops with students so they could get a grasp of genetics, molecular biology, and bioinformatics if they weren’t familiar with them. We had three workshops at UCR, one at UNA, and four at TEC. We had about 80 students overall in a full-day session. We had a theoric section where we explained the basics of genetics and molecular biology, and then an activity to test the concepts, and after lunch a demonstrative session of bioinformatics, centered in databases and benchling, which was followed by work.<br><br>These workshops encouraged students to participate in SBT16, so once the inscription closed we had 76 students from three different universities, willing to participate in our 54 hour SynBio competition. </p>
+
<h1>Take a look at SynBioThon 2016!</h1>
−
<div id="synbiothon-details" class="container-fluid">
+
<video controls poster="https://static.igem.org/mediawiki/2016/1/1e/T--TEC-Costa_Rica--prostal_human_practice_synbio.png">
−
  <div class="row slideanim">
+
  <source src="https://static.igem.org/mediawiki/2016/0/0e/T--TEC-Costa_Rica--Video_SBT.mp4" type="video/mp4">
−
    <div class="col-sm-4 col-xs-12">
+
  Your browser does not support HTML5 video.
 +
</video>
 +
</div>
 +
<div id="reach" class="container-fluid slideanim">
 +
<h1>Reach</h1>
 +
<img src="https://static.igem.org/mediawiki/2016/9/97/T--TEC-Costa_Rica--prostal_hp_reach.png" class="img-responsive" alt="Prostal Reach">
 +
<p>For SBT16, we had diverse talks in different classes and universities, trying to reach the most diverse participants for our event but also for promoting Synthetic Biology within students. In our university (TEC), we spoke with people of different majors (Biotechnology Engineering, Material Science, Agricultural Engineering, and others). We also went to University of Costa Rica (UCR), where we spoke with people of Biology, Microbiology, and Pharmacy, and to the National University (UNA), where we talked to students of Biology. We also gave talks in other universities such as UCIMED (Medical School), and LEAD University (Business Management).</p>
 +
<br>
 +
<p>Prior to the event, we had preparatory workshops with students so they could get a grasp of genetics, molecular biology, and bioinformatics if they weren’t familiar with them. A total of eight workshops were imparted at UCR, UNA, and TEC. We had about 80 students overall in a full-day session. We had a theoric section, and then an activity to test the concepts, and after lunch a demonstrative session of bioinformatics, centered in databases and Benchling, which was followed by work.</p>
 +
<p>These workshops encouraged students to participate in SBT16, so once the inscription closed we had 78 students from three different universities, willing to participate in our 54-hour SynBio competition.</p>
 +
</div>
 +
<div id="synbiothon-details" class="container-fluid slideanim">
 +
  <div class="row">
 +
    <div class="col-sm-3">
 +
      <div class="panel panel-default text-center">
 +
        <div class="panel-heading">
 +
          <h1>Biohacker's Journal</h1>
 +
        </div>
 +
        <div class="panel-body">
 +
          <p style="text-align: center;">What really happened at SBT16!</p>
 +
        </div>
 +
        <div class="panel-footer">
 +
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Biohacker_Journal"><button class="btn btn-lg">Read More</button></a>
 +
        </div>
 +
      </div>     
 +
    </div> 
 +
    <div class="col-sm-3">
 
      <div class="panel panel-default text-center">
 
      <div class="panel panel-default text-center">
 
        <div class="panel-heading">
 
        <div class="panel-heading">
Line 149: Line 135:
 
        </div>
 
        </div>
 
        <div class="panel-body">
 
        <div class="panel-body">
−
          <p style="text-align: center;">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
          <p style="text-align: center;">Here you can read about the 15 projects that were generated at SBT16.</p>
 
        </div>
 
        </div>
 
        <div class="panel-footer">
 
        <div class="panel-footer">
−
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Projects"><button class="btn btn-lg">More</button></a>
+
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Projects"><button class="btn btn-lg">Read More</button></a>
 
        </div>
 
        </div>
 
      </div>       
 
      </div>       
 
    </div>     
 
    </div>     
−
    <div class="col-sm-4 col-xs-12">
+
    <div class="col-sm-3">
 
      <div class="panel panel-default text-center">
 
      <div class="panel panel-default text-center">
 
        <div class="panel-heading">
 
        <div class="panel-heading">
−
          <h1>Mentors and Judges</h1>
+
          <h1>Mentors & Judges</h1>
 
        </div>
 
        </div>
 
        <div class="panel-body">
 
        <div class="panel-body">
−
          <p style="text-align: center;">Molecular and Synthetic Biology experts were invited to join SBT16 as mentors, so they could guide and advise participants throughout the design and development of their projects.</p>
+
          <p style="text-align: center;">Molecular and Synthetic Biology experts were invited to join SBT16. Check them out!</p>
 
        </div>
 
        </div>
 
        <div class="panel-footer">
 
        <div class="panel-footer">
−
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Mentors_Judges"><button class="btn btn-lg">More</button></a>          
+
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Mentors_Judges"><button class="btn btn-lg">Read More</button></a>          
 
        </div>
 
        </div>
 
      </div>       
 
      </div>       
 
    </div>       
 
    </div>       
−
    <div class="col-sm-4 col-xs-12">
+
    <div class="col-sm-3">
 
      <div class="panel panel-default text-center">
 
      <div class="panel panel-default text-center">
 
        <div class="panel-heading">
 
        <div class="panel-heading">
−
          <h1>Evaluation</h1>
+
          <h1>Evaluation & Winners</h1>
 
        </div>
 
        </div>
 
        <div class="panel-body">
 
        <div class="panel-body">
−
          <p style="text-align: center;">ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+
          <p style="text-align: center;">How were the winners selected? Take a look here!</p>
 
        </div>
 
        </div>
 
        <div class="panel-footer">
 
        <div class="panel-footer">
−
        <a href=""><button class="btn btn-lg">More</button></a>
+
        <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Human_Practice/Synbiothon/Evaluation_Winners"><button class="btn btn-lg">Read More</button></a>
 
        </div>
 
        </div>
 
      </div>       
 
      </div>       
Line 184: Line 170:
 
  </div>
 
  </div>
 
</div>
 
</div>
−
<div class="container-fluid">
+
<!--
−
<div class="row">
+
<div class="comments container-fluid">
−
<h2>The winners</h2>
+
<div class="row slideanim">
−
<div class="col-sm-5">
+
<img class="img-responsive" src="https://static.igem.org/mediawiki/2016/3/3c/T--TEC-Costa_Rica--prostal_hp_projects_commet1.jpg" alt="Comment 1">
−
<div id="myCarousel" class="carousel slide" data-ride="carousel">
+
</div>
−
  <ol class="carousel-indicators">
+
−
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+
−
    <li data-target="#myCarousel" data-slide-to="1"></li>
+
−
    <li data-target="#myCarousel" data-slide-to="2"></li>
+
−
  </ol>
+
−
  <div class="carousel-inner" role="listbox">
+
−
    <div class="item active">
+
−
      <img class="first-slide img-responsive" src="https://static.igem.org/mediawiki/2016/b/b1/T--TEC-Costa_Rica--prostal_human_practice_firstplace.jpg" alt="First place Hemoalgae">
+
−
      <div class="container">
+
−
        <div class="carousel-caption">
+
−
          <h1 style="margin-bottom: 0;">Hemoalgae</h1>
+
−
          <p>Heparin (anticoagulant) synthesis in microalgae to provide a lower cost product.</p>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
    <div class="item">
+
−
      <img class="second-slide img-responsive" src="https://static.igem.org/mediawiki/2016/c/cc/T--TEC-Costa_Rica--prostal_human_practice_secondplace.jpg" alt="Second place Bet PRO">
+
−
      <div class="container">
+
−
        <div class="carousel-caption">
+
−
          <h1 style="margin-bottom: 0;">Bet PRO</h1>
+
−
          <p>Genetic modification of a yeast so it can produce Betaine from tyrosine.</p>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
    <div class="item">
+
−
      <img class="third-slide img-responsive" src="https://static.igem.org/mediawiki/2016/7/76/T--TEC-Costa_Rica--prostal_human_practice_thirdplace.jpg" alt="Third place PAP-aleve">
+
−
      <div class="container">
+
−
        <div class="carousel-caption">
+
−
          <h1 style="margin-bottom: 0;">PAP-aleve</h1>
+
−
          <p>Production of a fosfatase with higher analgesic effect than morphine and no side effects.<p>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
+
−
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
+
−
    <span class="sr-only">Previous</span>
+
−
  </a>
+
−
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
+
−
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
+
−
    <span class="sr-only">Next</span>
+
−
  </a>
+
−
</div>
+
−
</div>
+
−
<div class="col-sm-7 winners-description">
+
−
<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+
−
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+
−
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+
−
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+
−
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+
−
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
−
</div>
+
−
</div>
+
 
</div>
 
</div>
 +
-->
 
</main>
 
</main>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
var nav = document.getElementById('nav-human_practice');
 
var nav = document.getElementById('nav-human_practice');
 
nav.className += " active";
 
nav.className += " active";
 +
 +
var panels = document.querySelectorAll(".panel");
 +
var panelsFooter = document.querySelectorAll(".panel-footer");
 +
var panelsHeading = document.querySelectorAll(".panel-heading");
 +
var panelsFooterBtn = document.querySelectorAll(".panel-footer .btn");
 +
var colors = ["#0091d7", "#eb7f00"];
 +
for (var i = 0; i < panelsFooter.length; i++) {
 +
var color = colors[i % 2];
 +
panels[i].style.border = "1px solid " + color;
 +
panelsFooter[i].style.backgroundColor = color;
 +
panelsHeading[i].style.backgroundColor = color;
 +
panelsFooterBtn[i].style.backgroundColor = color;
 +
}
 
</script>
 
</script>
 
</body>
 
</body>

Latest revision as of 17:24, 19 October 2016

SynBioThon 2016
Rewriting the code

SynBioThon 2016 (SBT16) is a Synthetic Biology competition, in which teams of students work for a weekend to create an in silico genetic device that can solve some kind of problem. SBT16 was organized not only as a mean to promote Synthetic Biology within the community but also to make aware about the importance of the application of Synthetic Biology as a high potential tool that allows technological development in Costa Rica. As an iGEM team, we wanted to improve innovation, creativity, and teamwork among participants; we worked to generate a space for student’s active participation in science.

Take a look at SynBioThon 2016!

Reach

Prostal Reach

For SBT16, we had diverse talks in different classes and universities, trying to reach the most diverse participants for our event but also for promoting Synthetic Biology within students. In our university (TEC), we spoke with people of different majors (Biotechnology Engineering, Material Science, Agricultural Engineering, and others). We also went to University of Costa Rica (UCR), where we spoke with people of Biology, Microbiology, and Pharmacy, and to the National University (UNA), where we talked to students of Biology. We also gave talks in other universities such as UCIMED (Medical School), and LEAD University (Business Management).


Prior to the event, we had preparatory workshops with students so they could get a grasp of genetics, molecular biology, and bioinformatics if they weren’t familiar with them. A total of eight workshops were imparted at UCR, UNA, and TEC. We had about 80 students overall in a full-day session. We had a theoric section, and then an activity to test the concepts, and after lunch a demonstrative session of bioinformatics, centered in databases and Benchling, which was followed by work.

These workshops encouraged students to participate in SBT16, so once the inscription closed we had 78 students from three different universities, willing to participate in our 54-hour SynBio competition.

Biohacker's Journal

What really happened at SBT16!

Projects

Here you can read about the 15 projects that were generated at SBT16.

Mentors & Judges

Molecular and Synthetic Biology experts were invited to join SBT16. Check them out!

Evaluation & Winners

How were the winners selected? Take a look here!

iGEM TEC Costa Rica

Tecnológico de Costa Rica
Biotechnology Investigation Center
Cartago, Costa Rica
prostaltec@gmail.com

Follow Us