Difference between revisions of "Team:NAIT Edmonton/Practices"

Line 14: Line 14:
 
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
 
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
  
−
 
−
<script type="text/javascript">
 
−
$(document).ready(function() {
 
−
// grab the initial top offset of the navigation
 
−
  var stickyNavTop = $('.nav').offset().top;
 
−
 
 
−
  // our function that decides weather the navigation bar should have "fixed" css position or not.
 
−
  var stickyNav = function(){
 
−
    var scrollTop = $(window).scrollTop(); // our current vertical position from the top
 
−
       
 
−
    // if we've scrolled more than the navigation, change its position to fixed to stick to top,
 
−
    // otherwise change it back to relative
 
−
    if (scrollTop > stickyNavTop) {
 
−
        $('.nav').addClass('sticky');
 
−
    } else {
 
−
        $('.nav').removeClass('sticky');
 
−
    }
 
−
};
 
−
 
−
stickyNav();
 
−
// and run it again every time you scroll
 
−
$(window).scroll(function() {
 
−
stickyNav();
 
−
});
 
−
});
 
−
</script>
 
−
 
−
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/StickyMenu?action=raw&amp;ctype=text/javascript"></script>
 
  
  
Line 115: Line 87:
  
 
.top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
 
.top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
 +
 +
#flowchart {
 +
    width: 580px;
 +
    text-align: center;
 +
    font-family: Arial, Helvetica sans-serif;
 +
    font-size: 1.0em;
 +
    margin: auto;
 +
}
 +
 +
.line1 {
 +
    width: 1px;
 +
    height: 20px;
 +
    background-color: #000;
 +
    margin: 0 auto;
 +
}
 +
.clear {
 +
    clear:both;
 +
} 
 +
 +
}
 +
 +
/*----- Accordion -----*/
 +
.accordion, .accordion * {
 +
-webkit-box-sizing:border-box;
 +
-moz-box-sizing:border-box;
 +
box-sizing:border-box;
 +
 +
}
 +
 +
.accordion {
 +
overflow:hidden;
 +
background:#FFFFFF;
 +
}
 +
 +
/*----- Section Titles -----*/
 +
.accordion-section-title {
 +
width:100%;
 +
display:inline-block;
 +
transition:all linear 0.15s;
 +
        padding:15px;
 +
        margin-right:auto;
 +
        margin-left:auto;
 +
border-bottom:8px solid #ffffff;
 +
 +
 +
/* Type */
 +
font-size:1.8000em;
 +
color:#fff;
 +
        text-align:center;
 +
        font-weight: 600;
 +
        font-family:'Source Sans Pro', sans-serif;
 +
}
 +
 +
.accordion-section-title.active, .accordion-section-title:hover {
 +
background:#9BD1EE;
 +
 +
 +
/* Type */
 +
text-decoration:none;
 +
        color:#0D4D8C;
 +
}
 +
 +
 +
.accordion-section:last-child .accordion-section-title {
 +
border-bottom:none;
 +
}
 +
 +
/*----- Section Content -----*/
 +
.accordion-section-content {
 +
padding:20px 80px 20px 80px;
 +
display:none;
 +
        font-size:18px;
 +
}
 +
 +
.protocol {background-color:#6087c2; width:390px;margin:0 auto;    -webkit-border-radius: 5px;
 +
-moz-border-radius:5px; -ms-border-radius:5px; -0-border-radius:5px;
 +
border-radius: 5px;padding:15px;}
 +
.protocol:hover {background-color:#56aacc; width:390px;margin:0 auto;    -webkit-border-radius: 5px;
 +
-moz-border-radius:5px; -ms-border-radius:5px; -0-border-radius:5px;
 +
border-radius: 5px;padding:15px;}
  
 
</style>
 
</style>
Line 125: Line 177:
 
</center>
 
</center>
 
    
 
    
 +
 +
 +
 +
<div class="accordion">
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" style="background-color:#f96040" href="#accordion-1">Theorizing our Sequences</a>
 +
<div id="accordion-1" class="accordion-section-content">
 +
<div id="flowchart">
 +
 +
    <div class="protocol"><font color="#FFFFFF">Literature has shown certain proteins   
 +
    inherently stain in colour.</font></div>
 +
 +
    <div class="line1"></div>
 +
 +
    <div class="protocol"><font color="#FFFFFF">Looked up characteristics of said proteins</font></div>
 +
 +
    <div class="line1"></div>
 +
 +
    <div class="protocol"><font color="White">Isolated and identified the unique characteristics of said proteins so that we can
 +
    manually write our own sequences and generate custom proteins.</font></div>
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" style="background-color:#FBB252" href="#accordion-2">Writing our Sequences</a>
 +
<div id="accordion-2" class="accordion-section-content">
 +
 +
<div id="flowchart">
 +
 +
    <div class="protocol"><font color="#FFFFFF">Went down to base pair level and wrote out our
 +
    sequences with the defining characteristics identified in literature. </font></div>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="IDT"><div class="protocol"><font color="#FFFFFF">Ordered custom gBlocks from Integrated DNA Technologies (IDT).</font></div></label>
 +
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" style="background-color: #f7e133" href="#accordion-3">PCR</a>
 +
<div id="accordion-3" class="accordion-section-content">
 +
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="MasterMix"><div class="protocol"><font color="#FFFFFF">Make a PCR Master Mix</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="IndividualRxn"><div class="protocol"><font color="#FFFFFF">Set up individual reactions</font></div>   
 +
    </label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="PCR"><div class="protocol"><font color="white">Run PCR <br> (click for specific conditions)</font>
 +
    </div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="AgaroseConfirmation"><div class="protocol"><font color="white">Run agarose gel electrophoresis to confirm that PCR was successful</font>
 +
    </div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="PCRPurification"><div class="protocol"><font color="white">QIAquick PCR Purification</font>
 +
    </div></label>
 +
 +
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" href="#accordion-4" style="background-color:#afcf64">Digestion and Ligation</a>
 +
<div id="accordion-4" class="accordion-section-content">
 +
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Literature has shown certain proteins   
 +
    inherently stain in colour.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Step 1:
 +
    Blah blah blah, do this.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol">Step 1:
 +
    Blah blah blah, do this.</div></label>
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" href="#accordion-5" style="background-color:#89cdb6">Transforming Bacteria</a>
 +
<div id="accordion-5" class="accordion-section-content">
 +
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Literature has shown certain proteins   
 +
    inherently stain in colour.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Step 1:
 +
    Blah blah blah, do this.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol">Step 1:
 +
    Blah blah blah, do this.</div></label>
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" href="#accordion-6" style="background-color:#56aacc">Validating the Transformation</a>
 +
<div id="accordion-6" class="accordion-section-content">
 +
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Literature has shown certain proteins   
 +
    inherently stain in colour.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Step 1:
 +
    Blah blah blah, do this.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol">Step 1:
 +
    Blah blah blah, do this.</div></label>
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" href="#accordion-7" style="background-color:#6087c2">Protein Isolation and Purification</a>
 +
<div id="accordion-7" class="accordion-section-content">
 +
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Literature has shown certain proteins   
 +
    inherently stain in colour.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol"><font color="#FFFFFF">Step 1:
 +
    Blah blah blah, do this.</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="modal-1"><div class="protocol">Step 1:
 +
    Blah blah blah, do this.</div></label>
 +
 +
</div>
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
<div class="accordion-section">
 +
<a class="accordion-section-title" href="#accordion-8" style="background-color:#9b73af">SDS PAGE and Silver Staining</a>
 +
<div id="accordion-8" class="accordion-section-content">
 +
 +
<div id="flowchart">
 +
 +
    <label class="btn" for="PAGel"><div class="protocol"><font color="#FFFFFF">Make PA Gel</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="SDSPAGE"><div class="protocol"><font color="#FFFFFF">Run Electrophoresis</font></div></label>
 +
 +
    <div class="line1"></div>
 +
 +
    <label class="btn" for="SILVER"><div class="protocol"><font color="#FFFFFF">Silver Stain Plus</font></div></label>
 +
 +
</div>
 +
 +
 +
 +
</div><!--end .accordion-section-content-->
 +
</div><!--end .accordion-section-->
 +
 +
</div><!--end .accordion-->
 +
 +
 +
 +
 +
 
</div>
 
</div>
  

Revision as of 22:46, 31 August 2015

Team NAIT 2015

Human Practices

What type of work does it take to get to the Jamboree? What do you need to know? We reached out to teams across the world to get their perspective on their iGEM journey and compiled the information so that future teams can draw from our collective experiences and learn!

Theorizing our Sequences
Literature has shown certain proteins inherently stain in colour.
Looked up characteristics of said proteins
Isolated and identified the unique characteristics of said proteins so that we can manually write our own sequences and generate custom proteins.
Writing our Sequences
Went down to base pair level and wrote out our sequences with the defining characteristics identified in literature.
PCR
Digestion and Ligation
Transforming Bacteria
Validating the Transformation
Protein Isolation and Purification
SDS PAGE and Silver Staining