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

 
(41 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
−
<script type="text/javascript" src="https://2015.igem.org/index.php?title=
+
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&amp;ctype=text/javascript"></script>
−
Template:NAIT_Edmonton/js/jquery.flexslider"></script>
+
 
 +
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
  
 
<script type="text/javascript" charset="utf-8">
 
<script type="text/javascript" charset="utf-8">
Line 17: Line 18:
 
   $(window).load(function() {
 
   $(window).load(function() {
 
     $('.flexslider').flexslider({
 
     $('.flexslider').flexslider({
−
           animation: "slide"
+
           animation: "fade"
 
     });
 
     });
 
   });
 
   });
−
</script>
 
−
 
−
<script type="text/javascript">
 
−
 
−
jQuery(document).ready(function() {
 
−
function close_accordion_section() {
 
−
jQuery('.accordion .accordion-section-title').removeClass('active');
 
−
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
 
−
}
 
−
 
−
jQuery('.accordion-section-title').click(function(e) {
 
−
// Grab current anchor value
 
−
var currentAttrValue = jQuery(this).attr('href');
 
−
 
−
if(jQuery(e.target).is('.active')) {
 
−
close_accordion_section();
 
−
}else {
 
−
close_accordion_section();
 
−
 
−
// Add active class to section title
 
−
jQuery(this).addClass('active');
 
−
// Open up the hidden content panel
 
−
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
 
−
}
 
−
 
−
e.preventDefault();
 
−
});
 
−
});
 
−
 
 
</script>
 
</script>
  
Line 60: Line 32:
 
<div class="header">
 
<div class="header">
  
−
<style type="text/css">
+
  <!--  <div class="logo">
  
−
.header_mobile {
+
<a href="https://2015.igem.org/Team:NAIT_Edmonton">
−
    display:none;
+
<img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px">
−
    position: absolute;
+
</a>
−
    background-color:transparent;
+
</div> --->
−
    width:65px;
+
−
    top: 90px;
+
−
    left:50px;
+
−
    height:65px;
+
−
    z-index:999;
+
−
    position:fixed;}
+
  
−
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
 
−
.header_mobile ul * {margin:0; padding:0;}
 
−
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
 
−
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
 
−
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
 
−
.header_mobile li.current-menu-item {background:#5AB3E3}
 
−
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 
−
.header_mobile ul ul li:hover{background:#159CD8}
 
−
.header_mobile ul ul li{float:none; width:120px}
 
−
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 
−
.header_mobile ul ul ul {top:0; left:200%}
 
−
.header_mobile ul li.selected a{color:#8BC5EB}
 
−
.header_mobile ul li:hover > ul{display:block;}
 
  
−
 
−
@media screen and (max-width:1000px){
 
−
 
−
.header_left{display:none;}
 
−
.header_right{display:none;}
 
−
.header_mobile{display:block;}
 
−
 
−
}
 
−
 
−
</style>
 
−
 
−
    <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
 
−
            <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
 
−
    </div>
 
 
     <div class="header_left">
 
     <div class="header_left">
 
         <ul>
 
         <ul>
Line 141: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
 
−
 
−
  <div id="wrap">
 
  
 
<style type="text/css">
 
<style type="text/css">
  
−
.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;}
+
.header_mobile {
 +
    display:none;
 +
    position: absolute;
 +
    background-color:transparent;
 +
    width:65px;
 +
    top: 90px;
 +
    left:50px;
 +
    height:65px;
 +
    z-index:999;
 +
    position:fixed;}
  
−
/*----- Accordion -----*/
+
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
−
.accordion, .accordion * {
+
.header_mobile ul * {margin:0; padding:0;}
−
-webkit-box-sizing:border-box;  
+
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
−
-moz-box-sizing:border-box;  
+
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
−
box-sizing:border-box;
+
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
−
}
+
.header_mobile li.current-menu-item {background:#5AB3E3}
 +
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 +
.header_mobile ul ul li:hover{background:#159CD8}
 +
.header_mobile ul ul li{float:none; width:120px}
 +
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 +
.header_mobile ul ul ul {top:0; left:200%}
 +
.header_mobile ul li.selected a{color:#8BC5EB}
 +
.header_mobile ul li:hover > ul{display:block;}
  
−
.accordion {
 
−
overflow:hidden;
 
−
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
 
−
border-radius:3px;
 
−
background:#f7f7f7;
 
−
}
 
  
−
/*----- Section Titles -----*/
+
@media screen and (max-width:1000px){
−
.accordion-section-title {
+
−
width:100%;
+
−
padding:15px;
+
−
display:inline-block;
+
−
border-bottom:1px solid #1a1a1a;
+
−
background:#333;
+
−
transition:all linear 0.15s;
+
  
−
/* Type */
+
.header_left{display:none;}
−
font-size:1.200em;
+
.header_right{display:none;}
−
text-shadow:0px 1px 0px #1a1a1a;
+
.header_mobile{display:block;}
−
color:#fff;
+
−
        text-align:center;
+
−
}
+
  
−
.accordion-section-title.active, .accordion-section-title:hover {
 
−
background:#4c4c4c;
 
−
/* Type */
 
−
text-decoration:none;
 
 
}
 
}
  
−
.accordion-section:last-child .accordion-section-title {
+
</style>
−
border-bottom:none;
+
 
−
}
+
<div id="wrap2">
  
−
/*----- Section Content -----*/
+
  <div class="slider">
−
.accordion-section-content {
+
−
padding:15px;
+
−
display:none;
+
−
}
+
  
 +
<style type="text/css">
 +
.slider{width:100%; margin:0; clear:both; position:relative; top:-48px;}
 +
.flex-container a:active,
 +
.flexslider a:active {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
.flexslider {width: 100%; margin: 0; padding: 0 0 0 0;}
 +
.flexslider .slides > li {display: none;}
 +
.flexslider .slides img {width:100%; height:auto; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
.no-js .slides > li:first-child {display: block;}
 +
.flexslider {position: relative; zoom: 1; overflow:hidden;} <!---height:500px--->
 +
.flexslider .slides {zoom: 1;}
 +
.flexslider .slides > li {position: relative;}
 +
.flex-container {zoom: 1; position: relative;}
 +
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
 +
.flex-direction-nav li a.next {background:url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png) no-repeat center; right:0px;}
 +
.flex-direction-nav li a.prev {background:url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat center;right:65px;}
 +
.flex-direction-nav li a.next:hover {background:url(https://static.igem.org/mediawiki/2015/b/ba/NAIT_Next_a.png) no-repeat center;}
 +
.flex-direction-nav li a.prev:hover {background:url(https://static.igem.org/mediawiki/2015/c/c4/NAIT_Prev_a.png) no-repeat center;}
 +
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 +
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
.flex-caption{position: absolute;left:auto;right:auto; top:150px; width:100%;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 +
.flex-caption h0{font-size:30px; color:#FFFFFF}
 +
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:2px 4px 2px #000000}
 +
.flex-caption p{ text-align:center; padding:0 200px;}
 +
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
 
</style>
 
</style>
  
−
<center><div class="top_slogan">The Project</div></center>
+
<div class="flexslider">
 +
    <ul class="slides">
 +
    <li><a href=""><img src="https://static.igem.org/mediawiki/2015/6/62/NAIT_Slide_Pedway.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p><strong><a href=""></a></strong></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Desc"><img src="https://static.igem.org/mediawiki/2015/5/56/NAIT_Slide_1_Project.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices"><img src="https://static.igem.org/mediawiki/2015/d/db/NAIT_Slide_2_Whiteboard.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                   
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Modeling"><img src="https://static.igem.org/mediawiki/2015/5/57/NAIT_Slide_3_3D.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
    </ul>
 +
  </div>
 +
  </div>
  
 +
<div id="wrap5">
  
−
<h2>Sodium Dodecyl Sulphide Polyacrylamide Gel Electrophoresis (SDS PAGE) is one of the most prominent techniques used in protein research. However, one of its limitations, more specifically the loss of an accurate point of reference post staining, is attributed to inefficiency and the wasting of time during the research process. From past observations, some proteins inherently produce certain colours post-silver staining. We hypothesized that certain configurations of amino acids produces specific colours when reacting with the reagents of silver staining. In the hopes of creating a new molecular weight ladder, our team designed sequences to code for novel proteins that produce colour. Coloured proteins can also pave the way for new types of colorimetric assays and a less expensive and more accessible counterpart to antibody tags in the future.</h2> <br>
+
  <div class="section_one_three">
 +
        <h2 class="centered_title">Achievements</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" title=""><img src="https://static.igem.org/mediawiki/2015/5/50/NAIT_Medal_Icon.png" width="125px" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Despite the time constraints, our team achieved a lot this summer and we are proud of what we have accomplished.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" class="more">read more</a>
 +
        </div>
 +
       
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">iGEM 2015</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org" title=""><img src="https://static.igem.org/mediawiki/2015/0/05/NAIT_Icon_services.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Learn about the exciting opportunities the iGEM foundation has to offer! The experience was incredible!
 +
        </p>
 +
        <a href="https://2015.igem.org" class="more">read more</a>
 +
        </div>
  
−
<div class="accordion">
+
  <div class="section_one_three">
−
<div class="accordion-section">
+
        <h2 class="centered_title">Contact Us!</h2>
−
<a class="accordion-section-title" href="#accordion-1">Background</a>
+
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" title=""><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" alt="" title="" /></a></div>
−
<div id="accordion-1" class="accordion-section-content">
+
        <p class="centered_text">
−
The structural and functional study of the proteins expressed by a genome is
+
Please contact our team if you want more information about our project or have any other questions or concerns.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a>
 +
        </div>
 +
 
 +
</div>
  
−
called proteomics. This relatively novel science uses different methodologies in order to
 
  
−
separate and identify specific proteins of interest. Among these techniques, SDS-PAGE
+
  <div class="clear"></div>
 +
 
 +
 
 +
</div>
  
−
plays an essential role due to its high sensitivity, low sample volume requirement, and
 
  
−
high popularity. Negatively charged proteins migrate towards the positive electrode
 
−
 
−
according to their size and charge. Smaller proteins migrate further in a given amount of
 
−
 
−
time. As proteins are separated in this manner, users load molecular weight standards
 
−
 
−
to estimate the size (in kDa) of the proteins present in their sample. Once the proteins of
 
−
 
−
a single sample have been isolated and are embedded in the polyacrylamide (PA) gel
 
−
 
−
matrix, staining procedures are used to visualize them.</p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://upload.wikimedia.org/wikipedia/commons/4/46/SDS-PAGE_Electrophoresis.png" width="750px"></center>
 
−
 
−
<br>
 
−
 
−
<p style="font-size:15;">Organic dyes, such as Coomassie blue, can be used for this purpose;
 
−
 
−
nevertheless, their low sensitivity and a detection range that goes from 1 to 50 ng can
 
−
 
−
be a challenge for detecting low abundance proteins (Jin, Huang, Yoo, & Choi, 2006). A
 
−
 
−
higher sensitivity can be achieved by fluorescent staining techniques (from 0.1 to 10
 
−
 
−
ng.); however, UV instruments are necessary in order to read the data (Jin et al., 2006).
 
−
 
−
The most sensitive method up to date is radiolabeling, but the requirement of hazardous
 
−
 
−
isotopes and their complex management makes it a complicated procedure (Jin et al.,
 
−
 
−
2006). Silver staining is a method that offers great sensitivity and an easy to handle
 
−
 
−
protocol, thus making it one of the most commonly used staining methods. </p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://www.bio-rad.com/webroot/web/images/lsr/products/electrophoresis/product_overlay_content/global/lsr_biosafe_coomasie_gel.jpg"></center>
 
−
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
 
−
<div class="accordion-section">
 
−
<a class="accordion-section-title" href="#accordion-2">The Problem</a>
 
−
<div id="accordion-2" class="accordion-section-content">
 
−
<p>Difficulties with silver staining arise when the molecular weight markers are re-
 
−
 
−
colored golden-brown in the staining process. Markers offer evenly distributed proteins
 
−
 
−
that show bands of equal intensity and known size. Researchers can compare these
 
−
 
−
bands with their sample and identify the protein they are looking for based on its size. A
 
−
 
−
subset of these markers has color-coded standard proteins to facilitate the identification
 
−
 
−
of each band. Post-silver staining, the users lose the ability to use the color code as a
 
−
 
−
reference.</p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://labs.mmg.pitt.edu/gjoerup/silver_stain.jpg" width="750px"></center>
 
−
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
 
−
<div class="accordion-section">
 
−
<a class="accordion-section-title" href="#accordion-3">Our Goal</a>
 
−
<div id="accordion-3" class="accordion-section-content">
 
−
<p>Our goal is to develop a marker that, when interacting with the reagents used in
 
−
 
−
the staining protocol, will develop colour bands in specific positions so as to help in the
 
−
 
−
identification of the protein(s) of interest post-staining. In order to do so, investigation of
 
−
 
−
how specific amino acids react with silver staining reagents is underway by our team.
 
−
 
−
This will have as an outcome the creation of novel proteins that contain an excess of a
 
−
 
−
particular amino acid and/or chemical modifications that will generate a specific colour
 
−
 
−
after treating it with silver staining reagents. To obtain such proteins, the introduction of
 
−
 
−
novel nucleotide sequences into a plasmid would be done first by in vitro transcription
 
−
 
−
translation and later by transforming E. coli cells with expression vectors.</p>
 
−
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
</div><!--end .accordion-->
 
−
 
−
     
 
−
  </div>
 
−
 
−
  <div class="clear"></div>
 
  
 +
</div>
  
 
<div class="header_mobile">
 
<div class="header_mobile">
Line 325: Line 246:
 
   </ul>
 
   </ul>
 
</div>
 
</div>
 +
 +
  <div class="clear"></div>
 +
 
 
    
 
    
−
 
 
−
</div>
 
−
 
−
 
  
−
        <div class="footer">
+
<div class="footer">
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 347: Line 267:
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 +
                <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs"><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" width="20px" alt="" title="" /></a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 352: Line 273:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
+
.footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
Line 376: Line 296:
  
 
</body>
 
</body>
−
 
−
<!----------
 
−
 
−
                          _ __  _
 
−
                        ;'  '',)
 
−
                        /;6 , ;/
 
−
                        (Y)_:., |
 
−
                        `-', :; \
 
−
                          |;  ,.:\
 
−
                          /:.;  ;;)
 
−
                        |:;,.'|  :/
 
−
                        / |:  / ; /
 
−
                      /:;\ `| "//
 
−
                      /_,: | |./,|
 
−
                    _/: \.'|,|/| |
 
−
                  /:.,:.|,|"| |:|
 
−
                  /:;:|:,/;|:| |'|
 
−
        eduardo  |',:| \_ \ |_|;\_
 
−
                /;\_ /\_)) \_))\_))
 
−
                (;(________
 
−
                '''''`'''~`
 
−
 
−
------------------>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 20:44, 6 August 2015

Team NAIT 2015