Team:Alberta

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<html>
 +
  <head>
 +
  <style type="text/css">
 +
    .titlebar {
 +
      height:130px;
 +
      width:100%;
 +
    }
 +
    .bin {
 +
      background:url('/wiki/images/thumb/2/26/Background.png/541px-Background.png');
 +
      background-size:100% auto;
 +
      padding-top:20px;
 +
    }
 +
    .nav-icon {
 +
      background-image:url('/wiki/images/6/69/Nav-icon.png');
 +
      display:inline-block;
 +
      position:fixed;
 +
      width:23px;
 +
      height:37px;
 +
      margin-top:-17px;
 +
      margin-left:-20px;
 +
    }
 +
    .block {
 +
      background-color:white;
 +
      border:1px grey solid;
 +
      padding:10px;
 +
      margin:10px;
 +
      border-radius:5px;
 +
      box-shadow: 0px 0px 30px #444444;
 +
    }
 +
    .titlebar {
 +
      position:fixed;
 +
      top:0px;
 +
      height:130px;
 +
      margin-left:-5px;
 +
      width:975px;
 +
      z-index:2;
 +
      background-color:#FFF;
 +
    }
 +
    .titlebar h3, h4 {
 +
      text-align:center;
 +
    }
 +
    .sidebar {
 +
      position:fixed;
 +
      top:190px;
 +
      float:left;
 +
      z-index:3;
 +
      padding: 0 0px 0px 40px;
 +
    }
 +
    .main {
 +
      position:relative;
 +
      float:right;
 +
      width:720px;
 +
    }
 +
    .clear {
 +
      clear:both;
 +
    }
 +
  .ualberta-logo {
 +
      position:relative;
 +
      margin-left:-410px;
 +
      margin-top:-100px;
 +
      left:50%;
 +
      width:180px;
 +
    }
 +
    .igem-logo {
 +
      position:relative;
 +
      left:50%;
 +
      margin-left:420px;
 +
      margin-top:-90px;
 +
      width: 150px;
 +
    }
 +
    .igem-bar {
 +
      position:relative;
 +
      left:340px;
 +
    }
 +
    .igem-bar a {
 +
      padding:0 !important;
 +
    }
 +
    .igem-bar img {
 +
      height:38px;
 +
    }
 +
    .tooltip {
 +
      width:100%;
 +
    }
 +
    .tooltip .saying {
 +
      background: #EEE;
 +
      color: #444;
 +
      left: 100px;
 +
      margin-bottom: 15px;
 +
      opacity: 0;
 +
      padding: 20px;
 +
      position: absolute;
 +
      visibility: hidden;
 +
      min-width:200px;
 +
      max-width:500px;
 +
      -webkit-transform: translateX(10px);
 +
        -moz-transform: translateX(10px);
 +
          -ms-transform: translateX(10px);
 +
          -o-transform: translateX(10px);
 +
              transform: translateX(10px);
 +
      -webkit-transition: all .25s ease-out;
 +
        -moz-transition: all .25s ease-out;
 +
          -ms-transition: all .25s ease-out;
 +
            -o-transition: all .25s ease-out;
 +
              transition: all .25s ease-out;
 +
      -webkit-border-radius:6px;
 +
        -moz-border-radius:6px;
 +
          -ms-border-radius:6px;
 +
            -o-border-radius:6px;
 +
              border-radius:6px;
 +
      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 +
        -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 +
          -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 +
            -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 +
              box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
 +
    }
 +
    .tooltip .saying {
 +
      content: " ";
 +
      top:100px;
 +
      display:block;
 +
      left: 200px;
 +
      max-height:1000px;
 +
      position: absolute;
 +
    } 
 +
    .tooltip .saying:after {
 +
      border-bottom: solid transparent 10px;
 +
      border-top: solid transparent 10px;
 +
      border-right: solid #EEE 10px;
 +
      left: 10px;
 +
      top:10px;
 +
      content: "";
 +
      margin-left:-16px;
 +
      position: absolute;
 +
      width: 0;
 +
      max-height:1000px;
 +
      display:block;
 +
    }
 +
    .tooltip:hover .saying {
 +
      opacity: 1;
 +
      visibility: visible;
 +
      -webkit-transform: translateX(0px);
 +
        -moz-transform: translateX(0px);
 +
          -ms-transform: translateX(0px);
 +
            -o-transform: translateX(0px);
 +
              transform: translateX(0px);
 +
    }
 +
    .active {
 +
      color:#04acec !important;
 +
    }
 +
    .navbar, .navbar ul {
 +
      margin:0;
 +
      padding:0;
 +
      list-style:none;
 +
    }
 +
    .navbar {
 +
      width:963px;
 +
      margin:60px auto;
 +
      position:fixed;
 +
      top:70px;
 +
      z-index:4;
 +
      border: 1px solid #DDD;
 +
      background-color:#FFF;
 +
      background-image: -moz-linear-gradient(#FFF, #DDD);
 +
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
 +
      background-image: -webkit-linear-gradient(#FFF, #DDD);
 +
      background-image: -ms-linear-gradient(#FFF, #DDD);
 +
      background-image: linear-gradient(#FFF, #DDD);
 +
      -moz-box-shadow: 0 1px 1px #444, 0 1px 0 #444;
 +
      -webkit-box-shadow: 0 1px 1px #444, 0 1px 0 #444;
 +
      box-shadow: 0 1px 1px #444, 0 1px 0 #444;
 +
      zoom:1;
 +
    }
 +
    .navbar:before, .navbar:after {
 +
      content: "";
 +
      display: table;
 +
    }
 +
    .navbar:after {
 +
      clear:both;
 +
    }
 +
    .navbar li {
 +
      float:left;
 +
      border-right:1px solid #CCC;
 +
      -moz-box-shadow:1px 0 0 #EEE;
 +
      -webkit-box-shadow: 1px 0 0 #EEE;
 +
      box-shadow: 1px 0 0 #EEE;
 +
      position: relative;
 +
    }
 +
    .navbar a {
 +
      float: left;
 +
      padding: 12px 30px;
 +
      color: #444;
 +
      font: bold 12px Arial, Helvetica;
 +
      text-decoration:none;
 +
      /*text-shadow: 0 1px 0 #333;*/
 +
    }
 +
    .navbar li:hover > a {
 +
      color:#BBB;
 +
    }
 +
    .navbar li a:hover { /* IE6 only */
 +
      color:#BBB;
 +
    }
 +
    .navbar ul {
 +
      margin:20px 0 0 0;
 +
      _margin: 0; /* IE6 only */
 +
      opacity: 0;
 +
      visibility: hidden;
 +
      position:absolute;
 +
      top:38px;
 +
      left:0;
 +
      z-index:1;
 +
      background:#FFF;
 +
      background: -moz-linear-gradient(#FFF, #CCC);
 +
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
 +
      background: -webkit-linear-gradient(#FFF, #CCC);
 +
      background: -o-linear-gradient(#FFF, #CCC);
 +
      background: -ms-linear-gradient(#FFF, #CCC);
 +
      background: linear-gradient(#FFF, #CCC);
 +
      -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
 +
      -webkit-box-shadow: 0 -1px rgba(255,255,255,.3);
 +
      -box-shadow:0 -1px 0 rgba(255,255,255,.3);
 +
      -moz-border-radius: 3px;
 +
      -webkit-border-radius: 3px;
 +
      border-radius: 3px;
 +
      -webkit-transition: all .2s ease-in-out;
 +
      -moz-transition: all .2s ease-in-out;
 +
      -ms-transition: all .2s ease-in-out;
 +
      -o-transition: all .2s ease-in-out;
 +
      transition: all .2s ease-in-out;
 +
    }
 +
    .navbar li:hover > ul {
 +
      opacity: 1;
 +
      visibility: visible;
 +
      margin:0;
 +
    }
 +
    .navbar ul ul {
 +
      top:0;
 +
      left:150px;
 +
      margin:0 0 0 20px;
 +
      _margin:0;/*IE6 only*/
 +
      -moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);
 +
      -webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);
 +
      box-shadow:-1px 0 0 rgba(255,255,255,.3);
 +
    }
 +
    .navbar ul li {
 +
      float:none;
 +
      display:block;
 +
      border:0;
 +
      _line-height:0; /*IE6 only*/
 +
      -moz-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
 +
      -webkit-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
 +
      box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
 +
    }
 +
    .navbar ul li:last-child {
 +
      -moz-box-shadow:none;
 +
      -webkit-box-shadow:none;
 +
      box-shadow:none;
 +
    }
 +
    .navbar ul a {
 +
      padding:10px;
 +
      width:130px;
 +
      _height:10px;/*IE6 only*/
 +
      display:block;
 +
      white-space:nowrap;
 +
      float:none;
 +
      text-transform:none;
 +
    }
 +
    .navbar ul a:hover {
 +
      background-color:#0186ba;
 +
      background-image: -moz-linear-gradient(#04acec, #0186ba);
 +
      background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 +
      background-image: -webkit-linear-gradient(#04acec, #0186ba);
 +
      background-image: -ms-linear-gradient(#04acec, #0186ba);
 +
      background-image: linear-gradient(#04acec, #0186ba);
 +
    }
 +
    .navbar ul li:first-child > a {
 +
      -moz-border-radius: 3px 3px 0 0;
 +
      -webkit-border-radius: 3px 3px 0 0;
 +
      border-radius: 3px 3px 0 0;
 +
    }
 +
    .navbar ul li:first-child > a:after {
 +
      content:'';
 +
      position:absolute;
 +
      left:40px;
 +
      top:-6px;
 +
      border-left:6px solid transparent;
 +
      border-right:6px solid transparent;
 +
      border-bottom:6px solid #FFF;
 +
    }
 +
    .navbar ul ul li:first-child a:after {
 +
      left:-6px;
 +
      top:50%;
 +
      margin-top:-6px;
 +
      border-left:0;
 +
      border-bottom:6px solid transparent;
 +
      border-top: 6px solid transparent;
 +
      border-right:6px solid #3b3b3b;
 +
    }
 +
    .navbar ul li:first-child a:hover:after {
 +
      border-bottom-color: #04acec;
 +
    }
 +
    .navbar ul ul li:first-child a:hover:after {
 +
      border-right-color: #0299d3;
 +
      border-bottom-color:transparent;
 +
    }
 +
    .navbar ul li:last-child > a {
 +
      -moz-border-radius: 0 0 3px 3px;
 +
      -webkit-border-radius: 0 0 3px 3px;
 +
      border-radius: 0 0 3px 3px;
 +
    }
 +
    .centered {
 +
      text-align:center;
 +
    }
 +
    .centered-well {
 +
      text-align:center;
 +
      width:80%;
 +
      margin:0 auto;
 +
      padding:5px;
 +
      background-color:#CCC;
 +
      border-radius:6px;
 +
      -moz-border-radius:6px;
 +
      -o-border-radius:6px;
 +
      -webkit-border-radius:6px;
 +
    }
 +
    .thumbnails {
 +
      padding: 35px;
 +
    }
 +
    .thumbnail {
 +
      float:left;
 +
      position:relative;
 +
    }
 +
    .thumbnail img{
 +
      /* ... */
 +
      height:100px;
 +
      position:relative;
 +
      -webkit-transition: all .25s ease-out;
 +
        -moz-transition: all .25s ease-out;
 +
          -ms-transition: all .25s ease-out;
 +
            -o-transition: all .25s ease-out;
 +
              transition: all .25s ease-out;
 +
    }   
 +
    .thumbnail img:hover {
 +
      transform:scale(4,4);
 +
      -webkit-transform:scale(4,4);
 +
        -moz-transform:scale(4,4);
 +
        -ms-transform:scale(4,4);
 +
          -0-transform:scale(4,4);
 +
      transform-origin:0,0;
 +
      -webkit-transform-origin:0,0;
 +
        -moz-transform-origin:0,0;
 +
        -ms-transform-origin:0,0;
 +
          -0-transform-origin:0,0;
 +
      //position:fixed;
 +
      //left:50%;
 +
      //top:50%;
 +
      //height:auto;
 +
      z-index:999;
 +
      background-color:white;
 +
      border:solid 2px #CCC;
 +
      border-radius:1px;
 +
      -moz-border-radius:1px;
 +
      -o-border-radius:1px;
 +
      -webkit-border-radius:1px;
 +
      -moz-box-shadow: 0px 0px 30px #000;
 +
      -o-box-shadow: 0px 0px 30px #000;
 +
      -webkit-box-shadow: 0px 0px 30px #000;
 +
      box-shadow: 0px 0px 30px #000;
 +
     
 +
    }
 +
  </style>
 +
  </head>
 +
  <body>
 +
    <div class="titlebar">
 +
      <h3>The Littlest Mapmaker</h1>
 +
      <h4>"Exploration into the world of <a href="#">DNA Computing</a>"<br/>
 +
        Team Alberta: University of Alberta</h4>
 +
      <a href><img src="/wiki/images/b/b3/Ualberta-logo.png" class="ualberta-logo"></img></a>
 +
      <a href><img src="/wiki/images/a/ad/IGem-logo.png" class="igem-logo"></img></a>
 +
    </div>
 +
    <div class="bin">
 +
      <ul class="navbar">
 +
        <li><a  href="home.html" class="active">Home</a></li>
 +
        <li><a id="project" href="#">Project</a>
 +
          <ul>
 +
            <li><a href=>Overview</a></li>
 +
            <li><a href="methodology.html">Methodology</a></li>
 +
            <li><a href=>Applications</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a id="notebook" href="#">Notebook</a>
 +
          <ul>
 +
            <li><a href>Timeline</a></li>
 +
            <li><a href>Results</a></li>
 +
            <li><a href>BioBricks</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a id="team" href>Team</a>
 +
          <ul>
 +
            <li><a href>Roster</a></li>
 +
            <li><a href>Sponsers</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a id="humanpractices" href>Human Practices</a>
 +
          <ul>
 +
            <li><a href>Safety</a></li>
 +
            <li><a href\>Community</a></li>
 +
          </ul>
 +
        </li>
 +
      <div class="igem-bar"><a href="#"><img src="/wiki/images/a/ad/IGem-logo.png"></img></a></div>
 +
      </ul>
 +
      <div class="sidebar">
 +
        <div href class="tooltip"><img src="/wiki/images/7/7d/SideChar.png"></img>
 +
          <span class="saying">Welcome to the Team Alberta Wiki!
 +
            <div id="box" style="width: 450px; padding: 5px; border: 3px solid #000; background-color: #000000;">
 +
            <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
 +
              For visitors: this site is currently under construction. Please contact our Student Liason, Dawson at                  daocun@ualberta.ca, for more information on our current project and how to support us!
 +
            </div>
 +
            </div>
 +
          </span>
 +
        </div>
 +
      </div>
 +
      <div class="main">
 +
      <!--div class="block">
 +
        <img src="/wiki/images/e/e8/Mapmaker-banner.jpg"></img>
 +
      </div-->
 +
      <div class="block">
 +
        <img src="/wiki/images/thumb/3/3a/Alberta_logo.png/500px-Alberta_logo.png"
 +
          style="width:100%;"></img>
 +
        <h3 class="centered">
 +
          Team Alberta represents the University of Alberta, from Edmonton.
 +
          Our project, "The Littlest Mapmakers", is an attempt to create a biological
 +
          computer capable of solving the Traveling Salesman Problem
 +
        </h3>
 +
      </div>
 +
      <div class="block">
 +
      <p>
 +
        The traveling salesman problem is a mathematical optimization problem that was
 +
        first formally described in 1930, and has been intensively studied in the computer
 +
        sciences as a benchmark for optimization algorithms. The problem asks:
 +
      </p>
 +
      <p class="centered-well">
 +
        Given a set of cities (or other destinations), and a list of the distances
 +
        (or the travel time, fuel consumption, et cetera) between each pair of those cities,
 +
        what is the shortest possible route that travels to every city exactly once, and
 +
        then returns to the origin city?
 +
      </p>
 +
      <p>
 +
        In our project, we use DNA to compute solutions by converting all of the elements
 +
        of the problem into representative sequences of DNA: cities become selectable marker
 +
        genes (specifically, antibiotic resistance genes), paths between the cities become
 +
        short, sticky-ended linkers (each of which is only able to ligate to two specific
 +
        “city” strands), and the distance of a given path is represented by the concentration
 +
        of the corresponding linker in solution. These pieces of DNA are successively ligated
 +
        together to produce plasmids that signify “routes”, where the order in which the genes
 +
        appear in the plasmid indicates the order in which the cities are visited.
 +
      </p>
 +
      <div class="thumbnails">
 +
        <div class="thumbnail">
 +
          <img src="/wiki/images/thumb/c/c7/Sample_product.png/300px-Sample_product.png"></img>
 +
        </div>
 +
        <div class="thumbnail">
 +
          <img src="/wiki/images/thumb/4/45/Sample_route.png/650px-Sample_route.png"></img>
 +
        </div>
 +
      </div>
 +
      <div class="clear"></div>
 +
      <p>
 +
        The resulting plasmids are transformed into a bacterial culture, so that we can select
 +
        for only those plasmids that include every city in the list. Then, plasmid DNA is
 +
        extracted from the surviving bacterial colonies and analyzed to determine which plasmid
 +
        (and thus which route) occurred the most frequently. This route, the one most favoured
 +
        by the ligation reactions, is the optimal route!
 +
      </p>
 +
      </div>
 +
      <div class="block">
 +
      <p>
 +
        <a class="twitter-timeline" href="https://twitter.com/iGEMAlberta" data-widget-id="368908364702437377">Tweets by @iGEMAlberta</a>
 +
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 +
      </p>
 +
      </div>
 +
      </div>
 +
      <div class="clear"></div>
 +
    </div>
 +
  </body>
 +
</html>
 +
<!--
 +
--------
 +
<html>
<html>
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #000000;">
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #000000;">
Line 48: Line 533:
<html><a class="twitter-timeline" href="https://twitter.com/iGEMAlberta" data-widget-id="368908364702437377">Tweets by @iGEMAlberta</a>
<html><a class="twitter-timeline" href="https://twitter.com/iGEMAlberta" data-widget-id="368908364702437377">Tweets by @iGEMAlberta</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></html>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></html>
 +
 +
-->

Revision as of 04:27, 31 August 2013

The Littlest Mapmaker

"Exploration into the world of DNA Computing"
Team Alberta: University of Alberta

Welcome to the Team Alberta Wiki!
For visitors: this site is currently under construction. Please contact our Student Liason, Dawson at daocun@ualberta.ca, for more information on our current project and how to support us!

Team Alberta represents the University of Alberta, from Edmonton. Our project, "The Littlest Mapmakers", is an attempt to create a biological computer capable of solving the Traveling Salesman Problem

The traveling salesman problem is a mathematical optimization problem that was first formally described in 1930, and has been intensively studied in the computer sciences as a benchmark for optimization algorithms. The problem asks:

Given a set of cities (or other destinations), and a list of the distances (or the travel time, fuel consumption, et cetera) between each pair of those cities, what is the shortest possible route that travels to every city exactly once, and then returns to the origin city?

In our project, we use DNA to compute solutions by converting all of the elements of the problem into representative sequences of DNA: cities become selectable marker genes (specifically, antibiotic resistance genes), paths between the cities become short, sticky-ended linkers (each of which is only able to ligate to two specific “city” strands), and the distance of a given path is represented by the concentration of the corresponding linker in solution. These pieces of DNA are successively ligated together to produce plasmids that signify “routes”, where the order in which the genes appear in the plasmid indicates the order in which the cities are visited.

The resulting plasmids are transformed into a bacterial culture, so that we can select for only those plasmids that include every city in the list. Then, plasmid DNA is extracted from the surviving bacterial colonies and analyzed to determine which plasmid (and thus which route) occurred the most frequently. This route, the one most favoured by the ligation reactions, is the optimal route!

Retrieved from "http://2013.igem.org/Team:Alberta"