Difference between revisions of "Team:Erlangen Nuremberg"

 
(42 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 +
{{Erlangen_Nuremberg}}
 
<html>
 
<html>
 +
<style>
 +
.navbar-default, .navbar-brand {
 +
transition: all 0.5s;
 +
}
  
−
<head>
+
nav.navbar.navbar-default.navbar-fixed-top.transparent {
−
    <meta charset="utf-8">
+
background-color: rgba(0, 0, 0, 0);
−
    <title>iGEM Erlangen Würzburg</title>
+
}
  
 +
.transparent .navbar-brand {
 +
background-image: url('/wiki/images/1/19/T--Erlangen_Nuremberg--Logo_inverted.png')
 +
}
  
−
        <!--CSS-->
+
@media (max-width: 1024px) {
−
        <link rel="stylesheet" type="text/css" href="/igemwebsite/css/style.css">
+
div#navbar {
 +
background-color: rgba(255, 255, 255, 0.95);
 +
}
 +
}
  
−
        <!-- Latest compiled and minified CSS -->
+
.parallax {
−
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
height: 90vh;
 +
/*background: url("images/T--Erlangen_Nuremberg--DNA_String.png.jpeg") no-repeat fixed center;*/
 +
background-color: #000;
 +
background-size: cover;
 +
position: relative;
 +
margin-top: -100px;
 +
}
  
−
        <!-- Optional theme -->
+
.parallax-heading {
−
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
+
top: 40%;
 +
position: absolute;
 +
}
  
 +
.parallax h1 {
 +
margin: 0 8.5%;
 +
color: white;
 +
font-weight: 100 !important;
 +
font-size: 2.5em;
 +
background: none;
 +
padding: 10px;
  
−
        <!-- Latest compiled and minified JavaScript -->
+
}
−
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+
  
−
        <!-- scrolling animation -->
+
p:first-child {
−
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
margin: 0;
−
        <script>
+
}
  
−
        $(document).ready(function(){
+
/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */
−
          // Add smooth scrolling to all links
+
@media (max-width: 768px) {
−
          $("a").on('click', function(event) {
+
.parallax {
 +
background-attachment: scroll;
 +
}
  
−
            // Make sure this.hash has a value before overriding default behavior
+
.parallax h1 {
−
            if (this.hash !== "") {
+
font-size: 180%;
 +
font-weight: 100;
 +
}
 +
}
  
−
              // Store hash
+
    .light{
−
              var hash = this.hash;
+
        text-align: center;
 +
    }
  
−
              // Using jQuery's animate() method to add smooth page scroll
+
.light p {
−
              // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
+
margin-left: 20%;
−
              $('html, body').animate({
+
margin-right: 20%;
−
                scrollTop: $(hash).offset().top
+
color: #333230;
−
              }, 800, function(){
+
letter-spacing: 0.5px;
 +
}
  
−
                // Add hash (#) to URL when done scrolling (default click behavior)
+
.light h2 {
−
                window.location.hash = hash;
+
font-weight: 100;
−
              });
+
        letter-spacing: 2px;
−
            } // End if
+
−
          });
+
−
        });
+
−
        </script>
+
−
   
+
−
        <style>
+
−
            * {
+
−
    border-sizing: border-box;
+
−
    /* makes boxes visible */
+
−
    /* border: 1px solid rgba(0,0,0,0.3); */
+
  
−
}
+
}
  
−
html, body {
+
</style>
−
    margin: 0;
+
−
    padding: 0;
+
−
    height: 100%;
+
−
}
+
  
−
#sideMenu, #home_logo, #top_title {
 
−
    display: none;
 
−
}
 
  
−
/*removes underlines/color from links */
+
<div class="parallax">
−
a {
+
<canvas style="width: 100%; height: 100%; z-index: -1;"></canvas>
−
    text-decoration: none;
+
<div class="parallax-heading"><h1> Development of Novel Biocompatible Tissue for the Application as Artificial
−
    color: transparent;
+
Muscles in
−
}
+
Robotics and
 +
Medicine </h1>
 +
</div>
 +
</div>
  
−
/* Navbar Dropdown */
+
<div class="light">
−
.sidebar-nav {
+
<h2>Abstract</h2>
−
    padding: -9px 0;
+
<p>
−
}
+
The development of artificial muscles attracts wide interest for industrial and medical
−
 
+
applications. Regarding manufacturing, robotic devices with synthetic muscles are able to
−
.navbar {
+
handle softer materials more precisely. Moreover, artificial musculatures in medical
−
    margin-top: 20px;
+
prostheses can improve the wearing comfort while conveying a rather natural feeling.
−
    background:
+
Currently, muscle-like contractions can be obtained by capacitor systems or by molecular
−
}
+
machines incorporating tissue. This project aims to replace the common materials in both
−
 
+
branches by biological tissue. While increasing ecological friendliness and the compatibility
−
.nav li a {
+
with human tissue, those fabricated compositions can compete with human biological
−
    position:relative;
+
material. <br> <br>
−
    display:block;
+
Like a capacitor, the dielectric elastomer actuator (DEA) comprises two lightweight and
−
    border-radius: 0px 10px 10px 10px;
+
flexible electrodes separated by an insulating elastomeric layer. In a first set of experiments,
−
 
+
the elastomer layers in the capacitor-based muscle need to be replaced by appropriate protein
−
    background-color: rgba(110,14,26,1);
+
structures. P-Pili with their excellent elastic properties and proteins with high amounts of
−
    text-transform: uppercase;
+
helical secondary architecture are to be tested for this approach. In a next step, the currently
−
    letter-spacing: 1.5px;
+
used light weighted graphene or carbon nanotube layers need to be replaced by the Pili to
−
    margin-left: 20px;
+
provide conductivity and flexibility comparable to the carbon nanotubes. Both fibril types can
−
    border: 1px solid rgba(110,14,26,1);
+
be easily expressed in Geobacter sulflurreducens and Escherichia coli in a large scale, which
−
 
+
makes the overall system extremely feasible since one organism can provide the whole
−
}
+
material. <br> <br>
−
 
+
Another tissue with muscle-like contractions will be fabricated through polymers with
−
.nav li a:hover {
+
integrated molecular machines. Herein, the latter are based on azo dyes capable of having
−
    color: rgba(110,14,26,1);
+
their entire network contracted by light irradiation. The biopolymer matrix is fabricated by
−
 
+
Escherichia coli and consists of catcher-tag systems modified with a biotin-accepting anchor.
−
}
+
The molecular machines attach to the biopolymer tissue via biotin and biotin acceptor
−
.nav li a {
+
interactions. Due to the crosslinking of the single protein strains the stiffness of the resulting
−
    color:white;
+
tissue can be adjusted accurately. <br> <br>
−
}
+
In both cases, the achieved tissues are cell-free and can immediately be adapted to the system.
−
 
+
Within the scope of the project, the construction of a DEA-prototype is planned, since the
−
.dropdown .dropdown-menu li a{
+
realization of electrical stimuli is more feasible than through photo-induced signals.
−
    color: white;
+
</p>
−
}
+
</div>
−
.dropdown .dropdown-menu li a:hover{
+
<script type="text/javascript" src="https://2017.igem.org/Template:Erlangen_Nuremberg/Javascript?
−
    color: rgba(110,14,26,1);
+
action=raw&ctype=text/javascript"></script>
−
}
+
<script>
−
 
+
/* NAVIGATION STYLING */
−
.dropdown:hover .dropdown-menu {
+
$(document).ready(function() {
−
    display: inline-block;
+
var navbar = $($(".navbar")[0]);
−
 
+
navbar.addClass("transparent");
−
}
+
$(window).scroll(function() {
−
 
+
var parallax = $($(".parallax")[0]);
−
.dropdown .dropdown-menu {
+
var parallaxBottom = parallax.offset().top + parallax.height();
−
    background-color: transparent;
+
var navbarBottom = $(window).scrollTop() + navbar.height() + 15;
−
    box-shadow: none;
+
if (navbarBottom < parallaxBottom) {
−
    border:none;
+
navbar.addClass("transparent");
−
}
+
} else {
−
 
+
navbar.removeClass("transparent");
−
.navbar-brand img {
+
}
−
    margin-top: -15px;
+
})
−
    height:50px;
+
})
−
}
+
</script>
−
 
+
−
 
+
−
 
+
−
.dropdown-menu li{
+
−
    margin-top: 5px;
+
−
    margin-right: 15px;
+
−
}
+
−
/*navbar Ende */
+
−
 
+
−
/*team*/
+
−
.team-banner img{
+
−
    margin-top: 50px;
+
−
    width:100%;
+
−
    height:500px;
+
−
 
+
−
}
+
−
 
+
−
.background .team-banner img {
+
−
    margin-top: 100px;
+
−
    width:100%;
+
−
}
+
−
 
+
−
.teammembers1 img {
+
−
    width: 20%;
+
−
    margin-left: 5%;
+
−
    margin-top: 50px;
+
−
    margin-bottom:50px;
+
−
    float:left;
+
−
}
+
−
 
+
−
.teammembers1 p{
+
−
    margin-left: 40%;
+
−
    margin-right:20%;
+
−
    margin-top: 5%;
+
−
    color: gainsboro;
+
−
 
+
−
 
+
−
}
+
−
 
+
−
.teammembers2 img {
+
−
    width:20%;
+
−
    margin-right: 5%;
+
−
    margin-top: 50px;
+
−
    margin-bottom: 50px;
+
−
    float:right;
+
−
}
+
−
 
+
−
.teammembers2 p{
+
−
    margin-left: 20%;
+
−
    margin-right: 40%;
+
−
    margin-top: 5%;
+
−
    color: rgba(110,14,26,1);
+
−
 
+
−
}
+
−
 
+
−
.teammembers1 {
+
−
    margin-left:22%;
+
−
    margin-top: 30px;
+
−
    margin-bottom: 20px;
+
−
    margin-right: 30%;
+
−
    border-radius: 0px 10px 10px 10px;
+
−
    background-color: rgba(110,14,26,1) ;
+
−
    box-shadow: 10px 10px 26px 0px rgba(150,150,150,1);
+
−
}
+
−
 
+
−
.teammembers2{
+
−
    margin-left:30%;
+
−
    margin-top: 30px;
+
−
    margin-bottom: 20px;
+
−
    margin-right: 22%;
+
−
    border-radius: 10px 0px 10px 10px;
+
−
    background-color: gainsboro;
+
−
  box-shadow: -10px 10px 26px 0px rgba(150,150,150,1);
+
−
}
+
−
 
+
−
 
+
−
h2 {
+
−
    text-align: center;
+
−
}
+
−
 
+
−
 
+
−
.content {
+
−
    position: relative;
+
−
    top: 50px;
+
−
    width: 60%;
+
−
    border-radius: 10px 10px 10px 10px;
+
−
    margin: 0 auto;
+
−
    padding: 20px 20px;
+
−
 
+
−
}
+
−
 
+
−
.content img{
+
−
    float:left;
+
−
}
+
−
 
+
−
.background {
+
−
    height: 100%;
+
−
    width: 100%;
+
−
}
+
−
 
+
−
/* adds invisible element for right scrolling position */
+
−
.jumptarget:before {
+
−
    display: block;
+
−
    content: "";
+
−
    margin-top: -200px;
+
−
    height: 200px;
+
−
    visibility: hidden;
+
−
 
+
−
}
+
−
 
+
−
/* back to the top icon */
+
−
.backtop {
+
−
    position: fixed;
+
−
 
+
−
    left: 50%;
+
−
 
+
−
    margin-top: 90%;
+
−
    margin-bottom: 10%;
+
−
 
+
−
    z-index: 16;
+
−
 
+
−
    font-size: 50px;
+
−
 
+
−
    border: 2px solid rgba(110,14,26,1);
+
−
    border-radius: 50%;
+
−
 
+
−
    background-color:rgba(126,40,51,1);
+
−
 
+
−
    box-shadow:  4px 7px 40px -2px rgba(0,0,0,0.5);
+
−
}
+
−
 
+
−
.choose_timeline {
+
−
    position: relative;
+
−
    width: 60%;
+
−
    margin: 0 auto;
+
−
    margin-top: 10%;
+
−
}
+
−
 
+
−
#erlangen_timeline a, #wuerzburg_timeline a {
+
−
    text-decoration: none;
+
−
    color: black;
+
−
}
+
−
 
+
−
#erlangen_timeline {
+
−
    position: relative;
+
−
    float: left;
+
−
 
+
−
    background-color:rgba(126,40,51,1);
+
−
}
+
−
 
+
−
#erlangen_timeline h2, #wuerzburg_timeline h2 {
+
−
    color: white;
+
−
    font-size: 1.8em;
+
−
}
+
−
 
+
−
#erlangen_timeline, #wuerzburg_timeline {
+
−
    position: relative;
+
−
 
+
−
    background-color:rgba(126,40,51,1);
+
−
    color: white;
+
−
 
+
−
    display:inline-block;
+
−
    border-radius: 0px 10px 10px 10px;
+
−
 
+
−
    background-color: rgba(110,14,26,1);
+
−
 
+
−
    text-transform: uppercase;
+
−
    letter-spacing: 1.5px;
+
−
 
+
−
    margin-left: 20px;
+
−
    border: 1px solid rgba(110,14,26,1);
+
−
 
+
−
    box-shadow:  4px 7px 40px -2px rgba(0,0,0,0.5);
+
−
 
+
−
    padding: 0.1% 2%;
+
−
}
+
−
 
+
−
#erlangen_timeline {
+
−
    float: left;
+
−
}
+
−
 
+
−
#wuerzburg_timeline {
+
−
    float: right;
+
−
}
+
−
 
+
−
 
+
−
        </style>
+
−
 
+
−
</head>
+
−
    <body>
+
−
        <nav class="navbar navbar navbar-fixed-top">
+
−
 
+
−
            <div class="container-fluid">
+
−
                <div class="navbar-header">
+
−
                    <a class="navbar-brand pull-left" href="/html/home.html">
+
−
                        <div class="logo">
+
−
                            <img src="/igemwebsite/images/logo.png" alt="iGEM Logo"/>
+
−
                        </div>
+
−
                    </a>
+
−
                </div>
+
−
 
+
−
                <ul class="nav navbar-nav navbar-right collapse navbar-collapse" data-hover="dropdown" data-animations="zoomIn">
+
−
                    <li class="home active"><a href="/igemwebsite/html/home.html"S>Home</a></li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="notebook.html">Notebook</a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="/igemwebsite/html/notebook/timeline_erlangen.html">Erlangen</a></li>
+
−
                            <li><a href="/igemwebsite/html/notebook/timeline_wuerzburg.html">Würzburg</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="project.html">Project</a>
+
−
 
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="project.html#project1">Project 1</a></li>
+
−
                            <li><a href="project.html#project2">Project 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="parts.html">Parts</a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="parts.html#parts1">Parts 1</a></li>
+
−
                            <li><a href="parts.html#parts2">Parts 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="human_practices.html">Human Practices</a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="human_practices.html#practices1">Practices 1</a></li>
+
−
                            <li><a href="human_practices.html#practices2">Practices 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="safety.html">Safety</a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="safety.html#safety1">Safety 1</a></li>
+
−
                            <li><a href="safety.html#safety2">Safety 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="team.html">Team</a>
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="team.html#team1">Team 1</a></li>
+
−
                            <li><a href="team.html#team2">Team 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
 
+
−
                    <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="awards.html">Awards</a>
+
−
 
+
−
                        <ul class="dropdown-menu">
+
−
                            <li><a href="awards.html#awards1">Awards 1</a></li>
+
−
                            <li><a href="awards.html#awards2">Awards 2</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                </ul>
+
−
            </div>
+
−
        </nav>
+
−
        <div class="background" >
+
−
            <div class ="content">
+
−
                <h2 class="jumptarget" id="home1">Our Project</h2>
+
−
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
−
                </p>
+
−
            </div>
+
−
        </div>
+
−
 
+
−
        <a class="jumptarget" href="home.html#home1">
+
−
                <span class="backtop glyphicon glyphicon-menu-up" style="color:white"></span>
+
−
        </a>
+
−
 
+
−
        <div id="impressum">
+
−
        </div>
+
−
 
+
−
    </body>
+
 
</html>
 
</html>
 +
{{Erlangen_Nuremberg/Footer}}

Latest revision as of 11:50, 10 July 2017

Development of Novel Biocompatible Tissue for the Application as Artificial Muscles in Robotics and Medicine

Abstract

The development of artificial muscles attracts wide interest for industrial and medical applications. Regarding manufacturing, robotic devices with synthetic muscles are able to handle softer materials more precisely. Moreover, artificial musculatures in medical prostheses can improve the wearing comfort while conveying a rather natural feeling. Currently, muscle-like contractions can be obtained by capacitor systems or by molecular machines incorporating tissue. This project aims to replace the common materials in both branches by biological tissue. While increasing ecological friendliness and the compatibility with human tissue, those fabricated compositions can compete with human biological material.

Like a capacitor, the dielectric elastomer actuator (DEA) comprises two lightweight and flexible electrodes separated by an insulating elastomeric layer. In a first set of experiments, the elastomer layers in the capacitor-based muscle need to be replaced by appropriate protein structures. P-Pili with their excellent elastic properties and proteins with high amounts of helical secondary architecture are to be tested for this approach. In a next step, the currently used light weighted graphene or carbon nanotube layers need to be replaced by the Pili to provide conductivity and flexibility comparable to the carbon nanotubes. Both fibril types can be easily expressed in Geobacter sulflurreducens and Escherichia coli in a large scale, which makes the overall system extremely feasible since one organism can provide the whole material.

Another tissue with muscle-like contractions will be fabricated through polymers with integrated molecular machines. Herein, the latter are based on azo dyes capable of having their entire network contracted by light irradiation. The biopolymer matrix is fabricated by Escherichia coli and consists of catcher-tag systems modified with a biotin-accepting anchor. The molecular machines attach to the biopolymer tissue via biotin and biotin acceptor interactions. Due to the crosslinking of the single protein strains the stiffness of the resulting tissue can be adjusted accurately.

In both cases, the achieved tissues are cell-free and can immediately be adapted to the system. Within the scope of the project, the construction of a DEA-prototype is planned, since the realization of electrical stimuli is more feasible than through photo-induced signals.

Sponsors

Foundations