Difference between revisions of "Team:Penn/Educational Toolbox"

 
(18 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 
<title>University of Pennsylvania iGEM</title>
 
<title>University of Pennsylvania iGEM</title>
−
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 
</head>
 
</head>
−
 
 
<style type="text/css">
 
<style type="text/css">
−
* {
+
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
−
  box-sizing: border-box;
+
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
−
  font-size: 14px;
+
−
  font-family: sans-serif;
+
−
}
+
  
−
#wrapper {
+
/* Override UGG site */
−
  margin: 0 auto;
+
#main {width: 100%; padding:0;}
−
  width: 600px;
+
.content-asset p {margin:0 auto;}
−
}
+
.breadcrumb {display:none;}
  
−
h1 {
+
/* Helpers */
−
  margin: 0;
+
/**************************/
−
  font-size: 1.5em;
+
.margin-top-10 {padding-top:10px;}
−
}
+
.margin-bot-10 {padding-bottom:10px;}
  
−
.slider {
+
/* Typography */
−
  position: relative;
+
/**************************/
−
  height: 420px;
+
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:10px; margin:0;}
−
  outline: 0 solid black;
+
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:light blue; padding:50px; font-weight:400; text-transform:uppercase; z-index:40; opacity:.8;}
−
  width: 600px;
+
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
−
  overflow: hidden;
+
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;}
 +
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
 +
 
 +
.sc {color: #3b8595;}
 +
.ny {color: #3d3c3a;}
 +
.atw {color: #c48660;}
 +
 
 +
/* Section - Title */
 +
/**************************/
 +
#parallax-world-of-ugg .title {background: white; padding: 60px; margin:0 auto; text-align:center;}
 +
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
 +
 
 +
/* Section - Block */
 +
/**************************/
 +
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;}
 +
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 +
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
 +
 
 +
/* Section - Parallax */
 +
/**************************/
 +
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/c/c9/Sparklers-1030x700.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
 +
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/0/07/Light.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
 +
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/d/df/Communciation.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
 +
 
 +
/* Extras */
 +
/**************************/
 +
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
 +
 
 +
/* Media Queries */
 +
/**************************/
 +
@media screen and (max-width: 959px) and (min-width: 768px) {
 +
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
 
}
 
}
−
.slides {
+
@media screen and (max-width: 767px) {
−
   transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
−
  width: 1000%;
+
   #parallax-world-of-ugg h2 {font-size:30px;}
 +
  #parallax-world-of-ugg .block {padding: 30px;}
 +
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
 
}
 
}
−
.slide {
+
@media screen and (max-width: 479px) {
−
   position: relative;
+
   #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
−
  float: left;
+
−
  height: 400px;
+
 
}
 
}
−
.slide .description {
+
</style>
−
  position: absolute;
+
 
−
  top: calc(100% - 30px);
+
−
  z-index: 3;
+
−
  opacity: 0;
+
−
  height: 30px;
+
−
  width: 600px;
+
−
  text-align: center;
+
−
  padding: 5px;
+
−
  background-color: black;
+
−
  color: white;
+
−
  transition: all 800ms ease;
+
−
}
+
−
.slide .description:hover {
+
−
  opacity: 0.7;
+
−
  transition: all 800ms ease;
+
−
}
+
−
input[type="radio"] {
+
−
  display: none;
+
−
}
+
−
.prev {
+
−
  position: absolute;
+
−
  cursor: pointer;
+
−
  z-index: 2;
+
−
  top: 0;
+
−
  left: 0;
+
−
  height: 400px;
+
−
  width: 50px;
+
−
  background-color: white;
+
−
  opacity: 0.1;
+
−
  transition: all 800ms ease;
+
−
}
+
−
.prev:hover {
+
−
  opacity: 0.5;
+
−
  transition: all 800ms ease;
+
−
}
+
−
.next {
+
−
  position: absolute;
+
−
  cursor: pointer;
+
−
  z-index: 2;
+
−
  top: 0;
+
−
  right: 0;
+
−
  height: 400px;
+
−
  width: 50px;
+
−
  background-color: white;
+
−
  opacity: 0.1;
+
−
  transition: all 800ms ease;
+
−
}
+
−
.next:hover {
+
−
  opacity: 0.5;
+
−
  transition: all 800ms ease;
+
−
}
+
−
.slider .nav {
+
−
  position: absolute;
+
−
  text-align: center;
+
−
  z-index: 3;
+
−
  top: 400px;
+
−
  width: 600px;
+
−
}
+
−
.paragraph {
+
−
  width: 600px;
+
−
  margin-bottom: 15px;
+
−
}
+
−
label.bottom {
+
−
  background: #cccccc;
+
−
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
  display: inline-block;
+
−
  cursor: pointer;
+
−
  width: 30px;
+
−
  height: 10px;
+
−
  border-radius: 5px;
+
−
}
+
−
#slide0:checked ~ .nav > label[for="slide0"],
+
−
#slide1:checked ~ .nav > label[for="slide1"],
+
−
#slide2:checked ~ .nav > label[for="slide2"],
+
−
#slide3:checked ~ .nav > label[for="slide3"],
+
−
#slide4:checked ~ .nav > label[for="slide4"],
+
−
#slide5:checked ~ .nav > label[for="slide5"],
+
−
#slide6:checked ~ .nav > label[for="slide6"],
+
−
#slide7:checked ~ .nav > label[for="slide7"],
+
−
#slide8:checked ~ .nav > label[for="slide8"],
+
−
#slide9:checked ~ .nav > label[for="slide9"] {
+
−
  background: #333333;
+
−
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
+
−
}
+
−
#slide0:checked ~ .slides { margin-left: 0; }
+
−
#slide1:checked ~ .slides { margin-left: -100%; }
+
−
#slide2:checked ~ .slides { margin-left: -200%; }
+
−
#slide3:checked ~ .slides { margin-left: -300%; }
+
−
#slide4:checked ~ .slides { margin-left: -400%; }
+
−
#slide5:checked ~ .slides { margin-left: -500%; }
+
−
#slide6:checked ~ .slides { margin-left: -600%; }
+
−
#slide7:checked ~ .slides { margin-left: -700%; }
+
−
#slide8:checked ~ .slides { margin-left: -800%; }
+
−
#slide9:checked ~ .slides { margin-left: -900%; }
+
  
−
</style>
+
 
−
<div id="wrapper">
+
 
−
   <div class="paragraph">
+
<div id="parallax-world-of-ugg">
 +
 
 +
<section>
 +
   <div class="title">
 +
  <h1>PENN iGEM 2015</h1>
 +
<br>
 +
<br>
 +
 
 +
 
 
   </div>
 
   </div>
−
  <div class="slider">
+
</section>
−
    <input checked="" type="radio" name="slider" id="slide0" selected="false">
+
−
    <input type="radio" name="slider" id="slide1" selected="false">
+
−
    <input type="radio" name="slider" id="slide2" selected="false">
+
−
    <div class="slides">
+
−
      <div class="slide">
+
−
        <img src="http://www.bln2014.de/assets/news_em_berlin.png">
+
−
        <label class="next" for="slide1"></label>
+
−
        <div class="description">Berlin, Molecular Man</div>
+
−
      </div>
+
−
      <div class="slide">
+
−
        <label class="prev" for="slide0"></label>
+
−
        <img src="http://www.prolog-berlin.de/img/berlin-schoeneberg.jpg">
+
−
        <label class="next" for="slide2"></label>
+
−
        <div class="description">Berlin, Sch&ouml;neberg</div>
+
−
      </div>
+
−
      <div class="slide">
+
−
        <label class="prev" for="slide1"></label>
+
−
        <img src="http://www.tagesspiegel.de/images/gemueseschlacht_dpa_10/8828298/2-format10.jpg">
+
−
        <div class="description">Berlin, Oberbaumbr&uuml;cke</div>
+
−
      </div>
+
−
    </div><!-- end slides -->
+
−
    <div class="nav">
+
−
      <label class="bottom" for="slide0"></label>
+
−
      <label class="bottom" for="slide1"></label>
+
−
      <label class="bottom" for="slide2"></label>
+
−
    </div><!-- end nav -->
+
−
  </div><!-- end slider -->
+
−
</div>
+
−
</body>
+
  
−
  <style type="text/css">
+
<section>
−
#wrap {
+
    <div class="parallax-one">
−
  position: absolute;
+
      <h2>HUMAN PRACTICES</h2>
−
  top: 1000;
+
    </div>
−
   left: 0;
+
</section>
−
  width: 100%;
+
   <div class="block">
−
  height: 205px;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  overflow: hidden;
+
−
}
+
  
−
#header {
+
<p class="margin-top-10"><br><b>SYNTHETIC BIOLOGY AND SOCIETY</b> </p>
−
  position: absolute;
+
−
  top: 1000;
+
−
  left: 0;
+
−
  width: 100%;
+
−
  height: 200px;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  animation: move 40s infinite linear;
+
−
}
+
  
−
@keyframes move {
+
<p><br>The advent of the relatively young field of synthetic biology has brought many incredible achievements but also a great deal of skepticism regarding the ethicality to the field (Gutman, 2011). The ability to create synthetic life is an uncomfortable concept to many, and the result of a 2011 Presidential Commission for the Study of Bioethical Issues requested by Obama has declared a state of “prudent vigilance” of advancements in synthetic biology (Gutmann, 2011). Given the current sentiment, we believe that educational modules in synthetic biology will galvanize interest in the promise of the field. </p>
−
  from {
+
−
    left: 0;
+
−
  }
+
−
  to {
+
−
    left: -2450px;
+
−
  }
+
−
}
+
  
−
#header > div {
+
<p class="margin-top-10"><br><b>SYNTHETIC BIOLOGY AND SOCIETY</b> </p>
−
  width: 600px;
+
−
  height: 200px;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  border-right: 2px solid black;
+
−
  background-position: center;
+
−
  background-size: 600px auto;
+
−
  display: block;
+
−
  position: inherit;
+
−
  border-bottom: 30px solid black;
+
−
}
+
  
−
#header > div.one {
+
<p><br>TThe Penn 2015 iGEM team has given several lectures to both high school students and undergraduate students on campus regarding the field of synthetic biology and how students could get involved through the iGEM competition. We showcased neat applications from previous competitions that highlight the capabilities of student researchers and created excitement about the potential of the field. <br /> </p>
−
background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Rho_Ophiuchi.jpg/611px-Rho_Ophiuchi.jpg);
+
−
  margin-left: 0;
+
−
}
+
  
−
#header > div.two {
+
<p><br>As iGEM members, we understand the power of learning by doing. We are contributing to a hands-on educational module that can be feasibly deployed at secondary schools, museums, and universities. Students can mathematically model the behavior of the engineered strains and quantify the relative differences in protein expression as a result of changing one or more of a combination of parameters. <br /> </p>
−
background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Dawn_at_swifts_creek_panorama.jpg/1280px-Dawn_at_swifts_creek_panorama.jpg);
+
−
  margin-left: 602px;
+
−
}
+
  
−
#header > div.three {
+
<p><br>We are designing and characterizing three genetic inverters, lacI, lambda, and tetR, that could be feasibly added to the toolbox. The genetic inverter adds another degree of control to the system as a fifth parameter that changes the bacteria’s response to the concentration of the AHL signaling molecule. The genetic inverter component completely inverts the signal such the “on” and “off” states of the system are switched (Andrianantoandro et al, 2006). We hope that the addition of the inverter switch component to the educational toolbox will give students a new perspective on the amount of control that engineering can impose on a biological system, and further extend the analogy between an electrical and biological circuit. <br /> </p>
−
  background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Mist_-_Ensay_region3.jpg/1024px-Mist_-_Ensay_region3.jpg);
+
−
  margin-left: 1204px;
+
−
}
+
  
−
#header > div.four {
+
  </div>
−
background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg/1280px-Lower_Manhattan_from_Staten_Island_Ferry_Jan_2006.jpg);
+
</section>
−
  margin-left: 1806px;
+
−
}
+
  
−
#header > div.five {
 
−
background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Mt_hotham_alpine_range_scenery.jpg/1024px-Mt_hotham_alpine_range_scenery.jpg);
 
−
  margin-left: 2408px;
 
−
}
 
  
−
#header > div.six {
 
−
background:  url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Sydney_Harbour_Bridge_night.jpg/1024px-Sydney_Harbour_Bridge_night.jpg);
 
−
  margin-left: 3010px;
 
−
}
 
−
</style>
 
−
<div id="wrap"><div id="header">
 
−
  <div class="one"></div>
 
−
  <div class="two"></div>
 
−
  <div class="three"></div>
 
−
  <div class="four"></div>
 
−
  <div class="five"></div>
 
−
  <div class="six"></div>
 
−
</div>
 
 
</html>
 
</html>

Latest revision as of 02:51, 19 September 2015

University of Pennsylvania iGEM

PENN iGEM 2015



HUMAN PRACTICES


SYNTHETIC BIOLOGY AND SOCIETY


The advent of the relatively young field of synthetic biology has brought many incredible achievements but also a great deal of skepticism regarding the ethicality to the field (Gutman, 2011). The ability to create synthetic life is an uncomfortable concept to many, and the result of a 2011 Presidential Commission for the Study of Bioethical Issues requested by Obama has declared a state of “prudent vigilance” of advancements in synthetic biology (Gutmann, 2011). Given the current sentiment, we believe that educational modules in synthetic biology will galvanize interest in the promise of the field.


SYNTHETIC BIOLOGY AND SOCIETY


TThe Penn 2015 iGEM team has given several lectures to both high school students and undergraduate students on campus regarding the field of synthetic biology and how students could get involved through the iGEM competition. We showcased neat applications from previous competitions that highlight the capabilities of student researchers and created excitement about the potential of the field.


As iGEM members, we understand the power of learning by doing. We are contributing to a hands-on educational module that can be feasibly deployed at secondary schools, museums, and universities. Students can mathematically model the behavior of the engineered strains and quantify the relative differences in protein expression as a result of changing one or more of a combination of parameters.


We are designing and characterizing three genetic inverters, lacI, lambda, and tetR, that could be feasibly added to the toolbox. The genetic inverter adds another degree of control to the system as a fifth parameter that changes the bacteria’s response to the concentration of the AHL signaling molecule. The genetic inverter component completely inverts the signal such the “on” and “off” states of the system are switched (Andrianantoandro et al, 2006). We hope that the addition of the inverter switch component to the educational toolbox will give students a new perspective on the amount of control that engineering can impose on a biological system, and further extend the analogy between an electrical and biological circuit.