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

 
(50 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{NAIT_Edmonton/CSS2}}
+
{{NAIT_Edmonton/CSS6}}
−
 
+
 
<html>
 
<html>
  
 
<head>
 
<head>
  
−
<script type="text/javascript">
 
  
−
document.createElement('header'); document.createElement('footer'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('nav');
+
<title>Team NAIT 2015</title>
−
 
+
−
</script>
+
  
 
<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>
+
 
  
−
<script type="text/javascript" charset="utf-8">
+
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
  
−
var $ = jQuery.noConflict();
 
−
  $(window).load(function() {
 
−
    $('.flexslider').flexslider({
 
−
          animation: "slide"
 
−
    });
 
−
  });
 
−
</script>
 
  
 
</head>
 
</head>
Line 30: Line 19:
 
<body>
 
<body>
  
 +
<div class="header">
 +
<div class="header_c">
 +
<a href="https://2015.igem.org/Team:NAIT_Edmonton"><img style="margin-top:15px;" src="https://static.igem.org/mediawiki/2015/2/2f/NAIT_Imagine.png" height="95px"></a>
 +
</div>
 +
</div>
  
  
 +
<div class="nav">
  
−
<div id="header">
 
−
<div class="header">
 
  
−
    <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
+
<div tabindex="0" class="onclick-menu">
−
            <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
+
    <ul class="onclick-menu-content" style="list-style:none;">
−
     </div>
+
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton">home</a></li>
−
    <div class="header_left">
+
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a></li>
−
        <ul>
+
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a></li>
−
                  
+
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a></li>
 +
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a></li>
 +
     </ul>
 +
</div>
 +
 
 +
<div class="navigation">
 +
<ul>
 +
 
 +
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton"><img
 +
                src="https://static.igem.org/mediawiki/2015/a/a9/NAIT_home.png" width="25px"></a></li>
 +
 
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
 
                     <ul>
 
                     <ul>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios">bios</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios">bios</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Attributions">attributions</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Attributions">attributions</a></li>
−
                       <li><a href="https://igem.org/Team.cgi">official team profile</a>
+
                       <li><a href="https://igem.org/Team.cgi?id=1787">official team profile</a>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
 
                     <ul>
 
                     <ul>
Line 57: Line 61:
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
−
            </ul>
+
 
−
    </div>
+
−
    <div class="header_right">
+
−
        <ul>
+
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
 
                 <ul>
 
                 <ul>
Line 66: Line 67:
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices">policy and practices</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices">policy and practices</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Collaborations">collaborations</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Collaborations">collaborations</a></li>
−
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Entrepreneurship">entrepreneurship</a></li>
+
                        
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
 
                 <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
 
                 <ul>
 
                 <ul>
Line 76: Line 78:
 
                 </ul>
 
                 </ul>
 
                 </li>
 
                 </li>
−
        </ul>
+
 
−
</div>
+
            </ul>
 +
 
 
</div>
 
</div>
  
 +
</div>
 +
 +
 +
 +
</style>
 +
 
 
<div id="wrap">
 
<div id="wrap">
  
−
<style type="text/css">
 
  
−
.header_mobile {
 
−
    display:none;
 
−
    position: absolute;
 
−
    background-color:transparent;
 
−
    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}
+
<style type="text/css">
−
.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;}
+
  
 +
.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;}
  
−
@media screen and (max-width:1000px){
+
.sectionleft {float:left;display:inline-block;width:450px;padding:20px;}
 +
.sectionright {float:left;display:inline-block;width:450px;padding:20px;}
  
−
.header_left{display:none;}
+
@media screen and (max-width:768px){
−
.header_right{display:none;}
+
 
−
.header_mobile{display:block;}
+
.sectionleft {float:center;display:inline-block;width:100%;padding:20px;margin: 0 auto;}
 +
.sectionright {float:center;display:inline-block;width:100%;padding:20px;margin 0 auto;}
  
 
}
 
}
Line 120: Line 109:
 
</style>
 
</style>
  
−
<style type="text/css">
+
<center><div class="top_slogan">Modeling</div></center>
  
−
.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;}
+
<div class="main_content">
  
−
</style>
+
<h2>We find that in science, it is hard to fully grasp a real life concept when it is shown to us only in two dimensions. We live in a three dimensional world! Why are we learning how things work only in 2D? We visualized our project with 3D models and made animations so that anyone of the general public could watch the videos, understand and get excited about the science behind our project.</h2>
  
−
<center><div class="top_slogan">Under Construction!</div></center>
+
<center><h2>If a picture is worth a thousand words, a video is worth a million. Take a gander through our 3D models and animations! </h2> </center>
  
−
<div class="main_content">
+
<center><img src="https://static.igem.org/mediawiki/2015/0/00/NAIT_Apoferritin.jpg"></center><br>
−
<center>
+
−
<h2> Please check back as we are continually updating our Team Wiki </h2>
+
  
−
<img src="https://static.igem.org/mediawiki/2015/4/46/NAIT_DNA_Animated.gif">
+
<h2>Above is a typical textbook representation of the protein, apoferritin. From this 2D representation, personally we find it difficult to gauge the actual structure and shape of the protein. Since the shape of the protein is essential to its function, why do we limit ourselves to such a primitive 2D drawing? </h2>
  
−
<style type="text/css">
+
<h2>Below is an interactive 3D model of apoferritin. Through 3D technology, you can gain a better appreciation of the shape, contours and therefore function of the protein. </h2><br>
−
.tg  {border-collapse:collapse;border-spacing:0;color:none}
+
−
.tg td{width:280px; border-style:none;border-width:0px;overflow:hidden;word-break:normal;text-align:center;}
+
−
.tg th{width:280px; padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;text-align:center}
+
  
 +
<center><object width="640" height="480" data="https://sketchfab.com/models/b46ac7c5a7a34ddcabb3cd091e100f4f/embed" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></object></center>
  
  
−
</style>
+
<br><Br><Br>
  
−
<table class="tg">
+
<center><h1>How Does SDS PAGE Work?</h1></center>
−
  <tr>
+
<br>
−
    <th class="tg-031e"><h2>Our Team</h2></th>
+
−
    <th class="tg-031e"><h2>iGEM 2015</h2></th>
+
−
    <th class="tg-031e"><h2>Contact Us!</h2></th>
+
−
  </tr>
+
−
  <tr>
+
  
−
<style type="text/css">
+
<h3>SDS PAGE is a technique used to separate proteins by their molecular weight. Within a sample, there are multiple different types of protein. If we wanted to study a specific one, we would have to separate the different types first and isolate our desired protein. </h3> <br>
  
−
.roundimg{width:180px;height:150px;display:block;border-radius:90px;-moz-border-radius:90px;-webkit-border-radius:90px;-khtml-border-radius:90px;margin:auto;background-color:#8BC5EB;text-align:center; padding:30px 0 0 0;}
+
<center><img src="https://static.igem.org/mediawiki/2015/7/74/NAIT_ProteinSample.png" width="500px"><font style="12px">Figure 1, A rendered visualization of what a protein sample may look like through SEM</font></center> <br><br>
−
.roundimg img{ margin:auto; display:block;}
+
−
h2.centered_title{ text-align:center;}
+
−
p.centered_text{ padding:10px 20px;}
+
−
.roundimg2{width:180px;height:150px;display:block;border-radius:90px;-moz-border-radius:90px;-webkit-border-radius:90px;-khtml-border-radius:90px;margin:auto;background:none;text-align:center; padding:30px 0 0 0;}
+
  
−
</style>
+
<div class="sectionleft">
  
  
−
    <td class="tg-031e"><div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios" title="Team Bios"><img src="https://static.igem.org/mediawiki/2015/7/73/NAIT_Icon_clients.png" alt="" title="" /></a></div></td>
+
<center><object width="100%" height="250px" data="http://sketchfab.com/models/1a59a35728ac4323aabc905c8363c619/embed" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></object></center>
−
    <td class="tg-031e"> <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="iGEM Official Site 2015" /></a></div></td>
+
−
    <td class="tg-031e"><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="Contact Us" /></a></div></td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td class="tg-031e"><p class="centered_text">
+
−
"Alone we can do so little, <strong>together we can do so much</strong>" - Helen Keller
+
−
        </p>
+
−
        </td>
+
−
    <td class="tg-031e"><p class="centered_text">
+
−
Learn about the exciting opportunities the iGEM foundation has to offer!
+
−
        </p>
+
−
        </td>
+
−
    <td class="tg-031e">        <p class="centered_text">
+
−
Please contact us if you want more information about our project or have any other questions or concerns.
+
−
        </p>
+
−
        </td>
+
−
  </tr>
+
−
  <tr>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Bios" class="more">read more</a></td>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org" class="more">read more</a></td>
+
−
    <td class="tg-031e"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a></td>
+
−
  </tr>
+
  
 +
<p><font style="12px">Source: apoferritin: complex with SDS, RCSB Protein Data Bank</font></p>
  
−
</table>
 
−
     
 
−
 
 
  
−
</center>
+
</div>
  
−
  </div>
+
<div class="sectionright">
−
  </div>
+
  
−
  <div class="clear"></div>  
+
<h3>As a quick overview, proteins are first denatured and linearized by SDS after being suspended in a protein sample loading buffer. Additionally, the SDS coats proteins with a negative charge. Immediately after denaturation, proteins are loaded into the wells of a polyacrylamide gel and an electric current is passed through it. The negatively charged proteins are pulled through the gel and migrate towards the electrode. The model you see here is an example of a binding site for SDS in mammalian apoferritin. SDS binds to multiple sites such as these and along with a heat treatment, plays a role in linearizing the proteins. Often, heat treatment is skipped all together and proteins are completely denatured using only the detergent, SDS.</h3> <br>
  
−
<div class="header_mobile">
+
 
−
  <ul>
+
−
        <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/MobileMenu">menu</a>
+
−
          <ul>
+
−
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
+
−
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
+
−
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
+
−
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
+
−
          </ul>
+
−
        </li>   
+
−
           
+
−
  </ul>
+
 
</div>
 
</div>
−
<div class="push"></div>  
+
 
 +
<div class="clear"></div>
 +
 
 +
<center><object width="999" height="562" data="http://www.youtube.com/embed/cLNwq9Ci9fk" frameborder="0" allowfullscreen></object></center>
 +
<font style="12px">Figure 2, An Autodesk Maya render of a protein linearizing and denaturing in the presence of SDS </font> <br><br>
 +
 
 +
<h3>Polyacrylamide gel acts like a mesh that strains and separates proteins based on size or molecular weight. Larger, bulkier proteins have a difficult time twisting and turning through the pores while smaller proteins slip through quite easily. Therefore, smaller proteins travel further down the gel within the specific time that the current is on while larger proteins stay closer to the top of the gel. </h3>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div class="clear"></div>
 +
 
 
    
 
    
 
</div>
 
</div>
  
−
        <div class="footer">
+
 
 +
 
 +
</div>
 +
 
 +
  <div class="clear"></div>
 +
 
 +
 
 +
 
 +
<div class="footer">
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 234: Line 198:
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
 +
          <div class="clear"></div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
  
−
 
−
<style type="text/css">
 
−
 
−
#footer {z-index:15;}
 
−
.footer {position: relative; padding:20px 0 40px 0; margin: -0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
 
−
.footer_content {margin:auto;width:1000px;}
 
−
.footer_left { float:left; padding:0 0 0 5px;}
 
−
.footer_right{ float:right; padding:0 5px 0 0;}
 
−
ul.social_icons { margin:0px; padding:0px; list-style:none;}
 
−
ul.social_icons li{ float:left;}
 
−
ul.social_icons li a{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#ADD3F0;text-align:center;}
 
−
ul.social_icons li a#top{width:30px;height:30px;display:block;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;-khtml-border-radius:15px;float:left;margin:0px 0 0px 5px;background-color:#ADD3F0;text-align:center;}
 
−
ul.social_icons li a:hover{ background-color:#5AB3E3;}
 
−
ul.social_icons li a img{ width:60%; display:block; margin:5px auto;}
 
−
 
−
ul.footer_menu{ padding:10px 0 0 0; margin:0px; list-style:none;}
 
−
ul.footer_menu li{ float:left; padding:0 15px 0 0;}
 
−
ul.footer_menu li a{ background:url(https://static.igem.org/mediawiki/2015/1/17/NAIT_Bullet.png) no-repeat left; padding:0 0 0 12px;}
 
−
.push {height:25px;}
 
−
.footer2 {position:absolute;bottom:-10px;background-color:#0D4D8C;width:100%;height:20px;}
 
−
 
−
 
−
</style>
 
  
 
</body>
 
</body>
−
 
−
<div class="footer2"></div>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 18:20, 2 November 2015

Team NAIT 2015

Modeling

We find that in science, it is hard to fully grasp a real life concept when it is shown to us only in two dimensions. We live in a three dimensional world! Why are we learning how things work only in 2D? We visualized our project with 3D models and made animations so that anyone of the general public could watch the videos, understand and get excited about the science behind our project.

If a picture is worth a thousand words, a video is worth a million. Take a gander through our 3D models and animations!


Above is a typical textbook representation of the protein, apoferritin. From this 2D representation, personally we find it difficult to gauge the actual structure and shape of the protein. Since the shape of the protein is essential to its function, why do we limit ourselves to such a primitive 2D drawing?

Below is an interactive 3D model of apoferritin. Through 3D technology, you can gain a better appreciation of the shape, contours and therefore function of the protein.





How Does SDS PAGE Work?


SDS PAGE is a technique used to separate proteins by their molecular weight. Within a sample, there are multiple different types of protein. If we wanted to study a specific one, we would have to separate the different types first and isolate our desired protein.


Figure 1, A rendered visualization of what a protein sample may look like through SEM


Source: apoferritin: complex with SDS, RCSB Protein Data Bank

As a quick overview, proteins are first denatured and linearized by SDS after being suspended in a protein sample loading buffer. Additionally, the SDS coats proteins with a negative charge. Immediately after denaturation, proteins are loaded into the wells of a polyacrylamide gel and an electric current is passed through it. The negatively charged proteins are pulled through the gel and migrate towards the electrode. The model you see here is an example of a binding site for SDS in mammalian apoferritin. SDS binds to multiple sites such as these and along with a heat treatment, plays a role in linearizing the proteins. Often, heat treatment is skipped all together and proteins are completely denatured using only the detergent, SDS.


Figure 2, An Autodesk Maya render of a protein linearizing and denaturing in the presence of SDS

Polyacrylamide gel acts like a mesh that strains and separates proteins based on size or molecular weight. Larger, bulkier proteins have a difficult time twisting and turning through the pores while smaller proteins slip through quite easily. Therefore, smaller proteins travel further down the gel within the specific time that the current is on while larger proteins stay closer to the top of the gel.