Biomod/2012/TU Dresden/Nanosaurs: Difference between revisions

From OpenWetWare
Jump to navigationJump to search
No edit summary
No edit summary
 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<html>
{{Biomod/2012/TU Dresden/Nanosaurs/Header}}
 
<html>
<!--Define meta tag content and encoding-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.tweet.js"></script> <!-- tweet import -->
 
<!--Start of javascripts, import jquery libraries-->
<script type"text/javascript">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
$(document).ready(function(){
<script type"text/javascript">
window.scrollTo(0, 155);
 
$(".tweet").tweet({
// Main function that waits for the browser to be ready
  count: 6,
$(document).ready(function(){
  query: "from:nanosaurs",
 
  loading_text: "searching twitter..."
    // Define hover function on the submenues
});
    $('ul#top-menu li a').hover(function(){
   
     });
        // Define slide down function for the submenues
</script>
        $(this).parent().find("ul.sub-menu").slideDown('fast').show();
   
    // Hover function
    $(this).parent().hover(function(){
    }, function(){
       
        // Set the submenu to slide up when hovering out
        $(this).parent().find("ul.sub-menu").slideUp('slow');
      });
  });
});
</script>
 
 
 
<!--Loading jquery scripts for sliding panel(slideViewer)-->
 
<script src"http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>
<script src"http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/jquery.slideviewer.1.2.js" type="text/javascript"></script>
 
 
 
<!--Javascript for the slideViewer
 
<script type="text/javascript">
 
$(window).bind("load",function(){
          $("div#image-panel").slideView()
}
);
 
</script>
 
 
 
<!--Start of CSS modifications to base homepage given by Harvard/Wyss Institute -->
<style type="text/css">
 
body{background-color: white;}
 
#p-personal{display:none;}
 
#sidebar-main{
              display:none;
              widtht: 0px;
              left: 0px;
}
 
h1.firstHeading{
                display: none;
 
}
 
 
#content{       
       
        margin: 35px 15% 0px 15%;
        padding: 10px 10px 10px 10px;       
        background-color: #C0C0C0;
}
 
#p-cactions{position: absolute;
          top: 10px;
          left: 0px;
          font-size: 14px;         
}
 
#footer{  position: relative;
          bottom: 0px;
}
 
 
#contentSub{
                position: absolute;
                font-size:20px;
left: -20%;
top: 0px;
                z-index: 5;
  }
 
</style>
<!-- End of modifications to base homepage -->
 
<!-- Start of our CSS -->
<style type="text/css">
 
/*Specs for Dresden pic in the header*/
#dresden-pic{                 
            position: absolute;
            top: 0px;
            right: 0px;
            width: 70%;
            height: 250px;
}
 
/*Team logo specs*/
#team-logo{
            position: absolute;
            top: 0px;
            left: 0px; 
            width: 30%;
            height: 250px;
            font-size: 44px;
            color: #0066CC;   
            background: #0066CC;      
}
 
/*General menu bar specs*/
ul#top-menu{ 
            position: absolute;
            top: 250px;
            left: 0px;
            list-style: none;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;           
            width: 100%;
            background: #3D3D3D;
            float: left;
            font-size: 22px; 
            /*background: url(exports-hal/users/studenthome/gscanon/Downloads/MgCl2ConcGel.png) repeat-x;*/ /*Optionalimage*/         
}
 
/*Particular specs for the list comprised in the menu*/
ul#top-menu li{
            margin: 0px;
            padding: 0px 0px 0px 0px;
            float: left;
            position: relative;
}
 
/*Specs for the links in the menu*/
ul#top-menu li a{
            padding: 5px 20px 5px 20px;
            color: #fff;
            display: block;
            float: left; 
            text-decoration: none;         
}
 
/*Hover effect for the links in the menu*/
ul#top-menu li a:hover{         
            /*background: url(Downloads/JQueryDropdownMenu/topnav_hover.gif) repeat-x;*/ /*Optional image*/ 
            background: #4ECC63;           
}
 
 
/*Specs for the submenues*/
ul#top-menu li ul.sub-menu{
            list-style: none;
            position: absolute;
            top: 40px; left: 0px;
            background: #3D3D3D;
            margin: 0; padding: 0;
            display: none;
            float: left;
            width: 170px;
            border: 1px solid #111;           
}
 
/*Specs for the list in the submenu*/
ul#top-menu li ul.sub-menu li{
            margin: 0; padding: 0;
            border-top: 1px solid #252525;
            border-bottom: 1px solid #444;
            clear: both;
            width: 170px;             
{
 
/*Specs for the links in the submenues*/
ul#top-menu li ul.sub-menu li a{
            color: #fff;
            float: left;
            width: 145px;
            padding-left: 20px;           
}
 
/*Hover effect for the submenues*/
ul#top-menu li ul.submenu li a{
            background: #4ECC63;
}
 
</style>
<!-- End of our CSS -->
 
 
<!--Basic CSS for slideViewer-->
 
/*preload classes*/
.svw {width: 50px; height: 20px; background: #fff  ;}
.svw ul {position: relative; left: -999em;}
 
/*core classes*/
.stripViewer {
position: relative;
overflow: hidden;
border: 5px solid #ff0000  ; 
margin: 0 0 1px 0;
}
.stripViewer ul { /* this is your UL of images */
margin: 0;
padding: 0;
position: relative;
left: 0;
top: 0;
width: 1%;
list-style-type: none;
}
.stripViewer ul li {
float:left;
}
.stripTransmitter {
overflow: auto;
width: 1%;
}
.stripTransmitter ul {
margin: 0;
padding: 0;
position: relative;
list-style-type: none;
}
.stripTransmitter ul li{
width: 20px;
float:left;
margin: 0 1px 1px 0;
}
.stripTransmitter a{
font: bold 10px Verdana, Arial;
text-align: center;
line-height: 22px;
background: #ff0000;
color: #fff;
text-decoration: none;
display: block;
}
.stripTransmitter a:hover, a.current{
background: #fff;
color: #ff0000  ;
}
 
/*tooltips formatting*/
.tooltip
{
padding: 0.5em;
background: #fff;
color: #000;
border: 5px solid #dedede  ;
}
 
<!--End of basic CSS for slideViewer-->
 
<head>
 
 
</head>
<body>
<body>


<div id="dresden-pic">
<div id="main_saurs">
<img src="http://openwetware.org/images/3/39/DresdenNight.png" alt="Panorama of Dresden at night" width="100%" height="100%" />
</div>
 
<div id="team-logo">
<p> TEAM  LOGO </p>
<p> :)  :)  :)  :) :) :)</p>
<p> :)  :)  :)  :) :) :)</p>
</div>
 
 
<ul id="top-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Project</a>
    <ul class="sub-menu">
        <li><a href="#">Idea</a></li>
        <li><a href="#">Description</a></li>
        <li><a href="#">Theory</a></li>
        <li><a href="#">Results</a></li>
        <li><a href="#">References</a></li>
    </ul>   
</li>
<li><a href="#">Notebook</a>
    <ul class="sub-menu">
        <li><a href="#">Meetings</a></li>
        <li><a href="#">Lab Protocols</a></li>       
    </ul>
</li>
<li><a href="#">Outreach</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Sponsors</a></li>
</ul>
 
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>Welcome</h1>
<!--Unordered list containing the pictures to be displayed in slideViewer-->
 
<div id="image-panel" class="svw">


<ul>
<h2>Welcome</h2>
<li><img src="http://openwetware.org/images/0/07/TUDPic.png" alt="TUD Hörsaalzentrum"/></li>
<p>We, the Dresden Nanosaurs from Germany, invite you to a ride through our quest to design a stunning nano-biomolecular system for the <a href="http://biomod.net/">BIOMOD</a> competition 2012. We propose a novel biological tethering system based on the technologies of DNA origami and vesicular transport. The illustration below describes the principle of our system.
<li><img src="http://openwetware.org/images/c/c1/BiotecPic.png" alt="Biotechnology center"/></li>
</p>
<li><img src="http://openwetware.org/images/b/b2/BCUBEPic.png" alt="B CUBE lab picture"/></li>
<h2>Signal-driven tethering system</h2>
</ul>
<div class="big_img"><a rel="lightbox" href="http://openwetware.org/images/7/7b/BM12_nanosaurs_Comic_all.jpg">
<img src="http://openwetware.org/images/b/bd/BM12_nanosaurs_Comic_all_m.jpg"></a>
<div id="mini_pics">
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/DNA%20origami"><img src="http://openwetware.org/images/d/dd/BM12_nanosaursOrigami.png"></a>
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/DNA%20origami"><img src="http://openwetware.org/images/4/47/BM12_nanosaursReceiver-strands.png"></a>
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Aptamer_lock"><img src="http://openwetware.org/images/1/1c/BM12_nanosaursLock.png"></a>
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Aptamer_lock"><img src="http://openwetware.org/images/5/5b/BM12_nanosaursKey.png"></a>
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Vesicles"><img src="http://openwetware.org/images/e/e0/BM12_nanosaursCatcher-strands.png"></a>
<a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Vesicles"><img src="http://openwetware.org/images/d/d7/BM12_nanosaursGUV.png"></a>
</div>
</div>
<p>
On a central giant vesicle, illustrated as a large yellow sphere, switchable DNA origami boxes are attached on its surface. In the presence of certain signal proteins, the closed DNA origami boxes get unlocked and open up. DNA single strands that were shielded before are now accessible. Therefore they can specifically hybridize with complementary strands on smaller vesicles. Hence multiple smaller vesicles can be specifically attracted to the central giant vesicle.<br/>
To better understand the different components, you may click on the images below the panel.
</p>
        <h2>Highlights</h2>
        <p>Below you can see some of our most appealing results: an image of the tethering of vesicles taken with LSM (Laser Scanning Microscopy) and an AFM (Atomic Force Microscopy) image of the correct folding of the open DNA origami structure.
        </p>


</div>
<div class="big_img"><a rel="lightbox" href="http://openwetware.org/images/0/02/BM12_nanosaurs_Main_Page_Result_Picture_Final.jpg">
</body>
<img src="http://openwetware.org/images/0/02/BM12_nanosaurs_Main_Page_Result_Picture_Final.jpg"></a>
</html>
</div>
</div>
<div id="video"><iframe width="200" height="200" src="http://www.youtube.com/embed/HcMopZIc1Mg" frameborder="0" allowfullscreen></iframe></div>
<div id="twitter">
<div id="follow"><a href="http://twitter.com/nanosaurs">follow us<img id="logo_twitter" src="http://openwetware.org/images/6/6b/BM12_nanosaurs_Twitter.png"></a></div>
<div class="tweet"></div>
</div>
<div id="share"><div class="addthis_toolbox addthis_default_style"><a class="addthis_button_facebook"><img src="http://openwetware.org/images/a/a7/BM12_nanosaurs_Facebook.png"></a><a class="addthis_button_google_plusone_share"><img src="http://openwetware.org/images/c/c9/BM12_nanosaurs_Google.png"></a><a class="addthis_button_compact"><img src="http://openwetware.org/images/1/14/BM12_nanosaurs_Plus.png"></a></div></div>
<div class="clear"></div>
</body>
</html>

Latest revision as of 21:52, 27 October 2012

<html> <!--import jquery libraries--> <script src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery-1.8.2.min.js"></script> <script src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery-ui-1.9.1.custom.min.js"></script> <script src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.smooth-scroll.min.js"></script> <script src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/lightbox.js"></script> <script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.queryloader2.js"></script> <!-- progress preloading--> <script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/superfish.js"></script> <!-- menu bar--> <script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.hoverIntent.minified.js"></script> <!-- replaces hover for navigation--> <script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.scrollTo-1.4.3.1-min.js"></script> <script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.localscroll-1.2.7-min.js"></script> <!--import webfonts--> <link href='http://fonts.googleapis.com/css?family=Merriweather:400,700' rel='stylesheet' type='text/css'> <link href='http://biomod-dresden-2012.googlecode.com/svn/trunk/css/superfish.css' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://biomod-dresden-2012.googlecode.com/svn/trunk/css/lightbox.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> <script type"text/javascript"> // Main function that waits for the browser to be ready $(document).ready(function(){ //make css accesible, please change the alter_css to chnage the style var alter_css = $("#alter_css").html(); $("style").remove(); $('head').append('<link rel="stylesheet" href="/skins/monobook/shared.css?164" type="text/css" />'); $('head').append('<link rel="stylesheet" href="http://biomod-dresden-2012.googlecode.com/svn/trunk/nanos.css" type="text/css" />'); //additional divs $(".firstHeading").wrap('<div id="header"></div>'); $(".firstHeading").wrap('<div id="inner_header"></div>'); $(".firstHeading").wrap('<div id="title_con"></div>'); var nav = $("#nav").html(); $('#inner_header').append(nav); $('#inner_header').append('<div class="clear"></div>'); //clean up wiki framework $("#sidebar-main").remove(); $(".portlet").remove(); //fix breadcrumbs $('#contentSub').remove(); //fix heading var h1 = $(".firstHeading").text().split("/"); $(".firstHeading").text(h1[h1.length-1]); //start plugins for navigation $("ul.sf-menu").superfish({ delay: 800, // one second delay on mouseout animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation speed: 'normal', // faster animation speed }); $('#main_saurs').localScroll(); $("tr:odd").addClass("odd");

}); </script>

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35720700-1']); _gaq.push(['_trackPageview']);

(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript">var addthis_config = {"data_track_addressbar":false};</script> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508414b242f27ceb"></script> <script id="nav"> <div id="nav"> <ul id="nav" class="sf-menu"> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs">home</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Team">team</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project">project</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project">overview</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/DNA origami">dna origami</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Vesicles">vesicles</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Aptamer_lock">aptamer lock</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Future_work">future work</a></li> </ul> </li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Lab_book">lab book</a> <ul> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Lab_book#recipes">recipes</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Lab_book#protocols">protocols</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Lab_book#downloads">downloads</a></li> </ul> </li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Gallery">gallery</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Sponsors">sponsors</a></li> </ul> </div> </script>

</html> <html>

<script type="text/javascript" src="http://biomod-dresden-2012.googlecode.com/svn/trunk/js/jquery.tweet.js"></script> <!-- tweet import -->

<script type"text/javascript"> $(document).ready(function(){ window.scrollTo(0, 155); $(".tweet").tweet({ count: 6, query: "from:nanosaurs", loading_text: "searching twitter..." });

   });

</script>

<body>

<div id="main_saurs">

<h2>Welcome</h2> <p>We, the Dresden Nanosaurs from Germany, invite you to a ride through our quest to design a stunning nano-biomolecular system for the <a href="http://biomod.net/">BIOMOD</a> competition 2012. We propose a novel biological tethering system based on the technologies of DNA origami and vesicular transport. The illustration below describes the principle of our system. </p> <h2>Signal-driven tethering system</h2> <div class="big_img"><a rel="lightbox" href="http://openwetware.org/images/7/7b/BM12_nanosaurs_Comic_all.jpg"> <img src="http://openwetware.org/images/b/bd/BM12_nanosaurs_Comic_all_m.jpg"></a> <div id="mini_pics"> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/DNA%20origami"><img src="http://openwetware.org/images/d/dd/BM12_nanosaursOrigami.png"></a> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/DNA%20origami"><img src="http://openwetware.org/images/4/47/BM12_nanosaursReceiver-strands.png"></a> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Aptamer_lock"><img src="http://openwetware.org/images/1/1c/BM12_nanosaursLock.png"></a> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Aptamer_lock"><img src="http://openwetware.org/images/5/5b/BM12_nanosaursKey.png"></a> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Vesicles"><img src="http://openwetware.org/images/e/e0/BM12_nanosaursCatcher-strands.png"></a> <a href="http://openwetware.org/wiki/Biomod/2012/TU_Dresden/Nanosaurs/Project/Vesicles"><img src="http://openwetware.org/images/d/d7/BM12_nanosaursGUV.png"></a> </div> </div>

<p> On a central giant vesicle, illustrated as a large yellow sphere, switchable DNA origami boxes are attached on its surface. In the presence of certain signal proteins, the closed DNA origami boxes get unlocked and open up. DNA single strands that were shielded before are now accessible. Therefore they can specifically hybridize with complementary strands on smaller vesicles. Hence multiple smaller vesicles can be specifically attracted to the central giant vesicle.<br/> To better understand the different components, you may click on the images below the panel. </p>

       <h2>Highlights</h2>
       <p>Below you can see some of our most appealing results: an image of the tethering of vesicles taken with LSM (Laser Scanning Microscopy) and an AFM (Atomic Force Microscopy) image of the correct folding of the open DNA origami structure.
       </p>

<div class="big_img"><a rel="lightbox" href="http://openwetware.org/images/0/02/BM12_nanosaurs_Main_Page_Result_Picture_Final.jpg"> <img src="http://openwetware.org/images/0/02/BM12_nanosaurs_Main_Page_Result_Picture_Final.jpg"></a> </div> </div> <div id="video"><iframe width="200" height="200" src="http://www.youtube.com/embed/HcMopZIc1Mg" frameborder="0" allowfullscreen></iframe></div> <div id="twitter"> <div id="follow"><a href="http://twitter.com/nanosaurs">follow us<img id="logo_twitter" src="http://openwetware.org/images/6/6b/BM12_nanosaurs_Twitter.png"></a></div> <div class="tweet"></div> </div> <div id="share"><div class="addthis_toolbox addthis_default_style"><a class="addthis_button_facebook"><img src="http://openwetware.org/images/a/a7/BM12_nanosaurs_Facebook.png"></a><a class="addthis_button_google_plusone_share"><img src="http://openwetware.org/images/c/c9/BM12_nanosaurs_Google.png"></a><a class="addthis_button_compact"><img src="http://openwetware.org/images/1/14/BM12_nanosaurs_Plus.png"></a></div></div> <div class="clear"></div> </body> </html>