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

 
(5 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>
−
 
−
 
−
<html>
 
 
<style type="text/css">
 
<style type="text/css">
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
 
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
Line 26: Line 24:
 
/**************************/
 
/**************************/
 
#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;}
 
#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;}
−
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; padding:50px; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
+
#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;}
 
#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;}
 
#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;}
−
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:16px; line-height:24px;}
+
#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;}
 
.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;}
  
Line 37: Line 35:
 
/* Section - Title */
 
/* Section - Title */
 
/**************************/
 
/**************************/
−
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
+
#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;}
 
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
  
 
/* Section - Block */
 
/* Section - Block */
 
/**************************/
 
/**************************/
−
#parallax-world-of-ugg .block {background: white; padding: 60px; width:820px; margin:0 auto; text-align:justify;}
+
#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 .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;}
 
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
Line 48: Line 46:
 
/* Section - Parallax */
 
/* 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/0/06/Bulb-in-the-sunset-light-hd-background.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-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-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;}
 
#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;}
Line 71: Line 69:
 
}
 
}
 
</style>
 
</style>
 +
 +
 +
  
 
<div id="parallax-world-of-ugg">
 
<div id="parallax-world-of-ugg">
Line 76: Line 77:
 
<section>
 
<section>
 
   <div class="title">
 
   <div class="title">
−
<br><br>
+
  <h1>PENN iGEM 2015</h1>
−
  <h1>HUMAN PRACTICES</h1>
+
<br>
 +
<br>
  
−
<style type="text/css">
+
 
−
#slider-wrapper{
+
  </div>
−
width: 940px;
+
</section>
−
height: 470px;
+
 
−
margin: 50px auto;
+
<section>
−
position: relative;
+
    <div class="parallax-one">
−
margin-bottom: 0px;
+
      <h2>HUMAN PRACTICES</h2>
−
background: rgba(0,0,0,0.5);
+
    </div>
−
overflow: hidden;
+
</section>
−
}
+
−
+
−
#s1{
+
−
padding: 6px;
+
−
background: #FFFFFF;
+
−
position: absolute;
+
−
left: 50%;
+
−
bottom: 25px;
+
−
margin-left: -36px;
+
−
border-radius: 20px;
+
−
opacity: 0.3;
+
−
cursor: pointer;
+
−
z-index: 999;
+
−
}
+
−
+
−
#s2{
+
−
padding: 6px;
+
−
background: #FFFFFF;
+
−
position: absolute;
+
−
left: 50%;
+
−
bottom: 25px;
+
−
margin-left: -12px;
+
−
border-radius: 20px;
+
−
opacity: 0.3;
+
−
cursor: pointer;
+
−
z-index: 999;
+
−
}
+
−
+
−
#s3{
+
−
padding: 6px;
+
−
background: #FFFFFF;
+
−
position: absolute;
+
−
left: 50%;
+
−
bottom: 25px;
+
−
margin-left: 12px;
+
−
border-radius: 20px;
+
−
opacity: 0.3;
+
−
cursor: pointer;
+
−
z-index: 999;
+
−
}
+
−
+
−
#s4{
+
−
padding: 6px;
+
−
background: #FFFFFF;
+
−
position: absolute;
+
−
left: 50%;
+
−
bottom: 25px;
+
−
margin-left: 36px;
+
−
border-radius: 20px;
+
−
opacity: 0.3;
+
−
cursor: pointer;
+
−
z-index: 999;
+
−
}
+
−
+
−
#s1:hover, #s2:hover, #s3:hover, #s4:hover{ opacity: 1;}
+
−
+
−
.inner-wrapper{
+
−
width: 940px;
+
−
height: 470px;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
margin-bottom: 0px;
+
−
overflow: hidden;
+
−
}
+
−
.control{ display: none;}
+
−
+
−
#Slide1:checked ~ .overflow-wrapper{ margin-left: 0%; }
+
−
#Slide2:checked ~ .overflow-wrapper{ margin-left: -100%; }
+
−
#Slide3:checked ~ .overflow-wrapper{ margin-left: -200%; }
+
−
#Slide4:checked ~ .overflow-wrapper{ margin-left: -300%; }
+
−
+
−
#Slide1:checked + #s1 { opacity: 1; }
+
−
#Slide2:checked + #s2 { opacity: 1; }
+
−
#Slide3:checked + #s3 { opacity: 1; }
+
−
#Slide4:checked + #s4 { opacity: 1; }
+
−
+
−
.overflow-wrapper{
+
−
width: 400%;
+
−
height: 100%;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
overflow-y: hidden;
+
−
z-index: 1;
+
−
-webkit-transition: all 0.3s ease-in-out;
+
−
-moz-transition: all 0.3s ease-in-out;
+
−
-o-transition: all 0.3s ease-in-out;
+
−
transition: all 0.3s ease-in-out;
+
−
}
+
−
+
−
.slide img{
+
−
width: 25%;
+
−
float: left;
+
−
}
+
−
+
−
</style>
+
−
<body>
+
−
<div id="slider-wrapper">
+
−
<div class="inner-wrapper">
+
−
<input checked type="radio" name="slide" class="control" id="Slide1"/>
+
−
<label for="Slide1" id="s1"></label>
+
−
<input type="radio" name="slide" class="control" id="Slide2"/>
+
−
<label for="Slide2" id="s2"></label>
+
−
<input type="radio" name="slide" class="control" id="Slide3"/>
+
−
<label for="Slide3" id="s3"></label>
+
−
<input type="radio" name="slide" class="control" id="Slide4"/>
+
−
<label for="Slide4" id="s4"></label>
+
−
<div class="overflow-wrapper">
+
−
<a class="slide" href=""><img src="https://static.igem.org/mediawiki/2015/f/f2/HUMANPRACTICESPENNIGEM2015.png"/></a>
+
−
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
−
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
−
<a class="slide" href=""><img src="http://i.imgur.com/hKju1EC.jpg"/></a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</body>
+
−
</div>
+
 
   <div class="block">
 
   <div class="block">
−
      <p>When the New York fashion community notices your brand, the world soon follows. The widespread love for UGG extended to Europe in the mid-2000's along with the stylish casual movement and demand for premium casual fashion. UGG boots and shoes were now seen walking the streets of London, Paris and Amsterdam with regularity. To meet the rising demand from new fans, UGG opened flagship stores in the UK and an additional location in Moscow. As the love spread farther East, concept stores were opened in Beijing, Shanghai and Tokyo. UGG Australia is now an international brand that is loved by all. This love is a result of a magical combination of the amazing functional benefits of sheepskin and the heightened emotional feeling you get when you slip them on your feet. In short, you just feel better all over when you wear UGG boots, slippers, and shoes.</p>
+
 
−
    <p class="margin-top-10">In 2011, UGG will go back to its roots and focus on bringing the active men that brought the brand to life back with new styles allowing them to love the brand again as well. Partnering with Super Bowl champion and NFL MVP Tom Brady, UGG will invite even more men to feel the love the rest of the world knows so well. UGG will also step into the world of high fashion with UGG Collection. The UGG Collection fuses the timeless craft of Italian shoemaking with the reliable magic of sheepskin, bringing the luxurious feel of UGG to high end fashion. As the love for UGG continues to spread across the world, we have continued to offer new and unexpected ways to experience the brand. The UGG journey continues on and the love for UGG continues to spread.</p>
+
<p class="margin-top-10"><br><b>SYNTHETIC BIOLOGY AND SOCIETY</b> </p>
 +
 
 +
<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>
 +
 
 +
<p class="margin-top-10"><br><b>SYNTHETIC BIOLOGY AND SOCIETY</b> </p>
 +
 
 +
<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>
 +
 
 +
<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>
 +
 
 +
<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>
 +
 
 
   </div>
 
   </div>
 
</section>
 
</section>

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.