Difference between revisions of "Team:Penn"

 
(280 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Penn}}
+
{{Team:Penn/CSS}}
−
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */
+
<html>
−
;(function(window, document) {
+
<head>
 +
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 +
<title>University of Pennsylvania iGEM</title>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 +
</head>
  
−
  /** Preset options */
+
<style type="text/css">
−
  var options = window.html5 || {};
+
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
 +
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
  
−
  /** Used to skip problem elements */
+
/* Override UGG site */
−
  var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
+
#main {width: 100%; padding:0;}
 +
.content-asset p {margin:0 auto;}
 +
.breadcrumb {display:none;}
  
−
  /** Not all elements can be cloned in IE (this list can be shortend) **/
+
/* Helpers */
−
  var saveClones = /^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i;
+
/**************************/
 +
.margin-top-10 {padding-top:10px;}
 +
.margin-bot-10 {padding-bottom:10px;}
  
−
  /** Detect whether the browser supports default html5 styles */
+
/* Typography */
−
  var supportsHtml5Styles;
+
/**************************/
 +
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:100px; font-weight:600; 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; font-weight:400; text-transform:uppercase; z-index:10; 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 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;}
  
−
  /** Name of the expando, to work with multiple documents or to re-shiv one document */
+
.sc {color: #3b8595;}
−
  var expando = '_html5shiv';
+
.ny {color: #3d3c3a;}
 +
.atw {color: #c48660;}
  
−
  /** The id for the the documents expando */
+
/* Section - Title */
−
  var expanID = 0;
+
/**************************/
 +
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
 +
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
  
−
  /** Cached data for each document */
+
/* Section - Block */
−
  var expandoData = {};
+
/**************************/
 +
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1200px; 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;}
  
−
  /** Detect whether the browser supports unknown elements */
+
/* Section - Block2 */
−
  var supportsUnknownElements;
+
/**************************/
 +
#parallax-world-of-ugg .block2 {background: white; padding: 60px; width:800px; margin:0 auto; text-align:justify;}
 +
#parallax-world-of-ugg .block2-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;}
  
−
  (function() {
+
/* Section - Parallax */
−
    var a = document.createElement('a');
+
/**************************/
 +
#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-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;}
  
−
    a.innerHTML = '<xyz></xyz>';
+
/* Extras */
 +
/**************************/
 +
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
  
−
    //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
+
/* Media Queries */
−
    supportsHtml5Styles = ('hidden' in a);
+
/**************************/
 +
@media screen and (max-width: 959px) and (min-width: 768px) {
 +
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
 +
}
 +
@media screen and (max-width: 767px) {
 +
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
 +
  #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;}
 +
}
 +
@media screen and (max-width: 479px) {
 +
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 +
}
 +
</style>
  
−
    supportsUnknownElements = a.childNodes.length == 1 || (function() {
+
<div id="parallax-world-of-ugg">
−
      // assign a false positive if unable to shiv
+
<div class="boxed">
−
      try {
+
−
        (document.createElement)('a');
+
−
      } catch(e) {
+
−
        return true;
+
−
      }
+
−
      var frag = document.createDocumentFragment();
+
−
      return (
+
−
        typeof frag.cloneNode == 'undefined' ||
+
−
        typeof frag.createDocumentFragment == 'undefined' ||
+
−
        typeof frag.createElement == 'undefined'
+
−
      );
+
−
    }());
+
  
−
  }());
+
<div><img src="https://static.igem.org/mediawiki/2015/d/d4/Pennigem_mainbanner_15_%281%29.png" width="100%" alt></div>
  
−
  /*--------------------------------------------------------------------------*/
+
<section>
 +
<div class="title">
 +
<h1>OUR PROJECT</h1>
 +
</div>
 +
</section>
  
−
  /**
+
<table align="center">
−
  * Creates a style sheet with the given CSS text and adds it to the document.
+
−
  * @private
+
−
  * @param {Document} ownerDocument The document.
+
−
  * @param {String} cssText The CSS text.
+
−
  * @returns {StyleSheet} The style element.
+
−
  */
+
−
  function addStyleSheet(ownerDocument, cssText) {
+
−
    var p = ownerDocument.createElement('p'),
+
−
        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
+
  
−
    p.innerHTML = 'x<style>' + cssText + '</style>';
+
<tr>
−
    return parent.insertBefore(p.lastChild, parent.firstChild);
+
<td>
−
  }
+
<img src="https://static.igem.org/mediawiki/2015/9/9d/Photocoupler2015Penn.png" alt />
 +
</td>
  
−
  /**
+
<td>
−
  * Returns the value of `html5.elements` as an array.
+
<div class="block2">
−
  * @private
+
      <p> Communication between cells is instrumental in coordinating population-level activity. In a process known as "quorum sensing," bacteria both secrete and sense autoinducer signaling molecules to enable synchronization of group gene expression paradigms. The synthetic biology community has rapidly adopted these quorum signaling pathways for use in programmed circuitry. However, chemical signals must diffuse between sender and receiver cells, limiting such communication to a common environment. In electronics, when electrical signals must be transferred between two circuits operating at incompatible voltages, electrical engineers use optocouplers, components that transfer information between isolated circuits via light. The 2015 Penn iGEM team presents a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell generates light via bioluminesence and a "receiver" cell expresses photoreceptors to enable light-dependent physiological responses. We show that light elicits a response in light-sensitive receivers and illuminated potential applications for this alternative form of cell communication.</p>
−
  * @returns {Array} An array of shived element node names.
+
</div>
−
  */
+
</td>
−
  function getElements() {
+
</tr>
−
    var elements = html5.elements;
+
−
    return typeof elements == 'string' ? elements.split(' ') : elements;
+
−
  }
+
−
 
+
−
    /**
+
−
  * Returns the data associated to the given document
+
−
  * @private
+
−
  * @param {Document} ownerDocument The document.
+
−
  * @returns {Object} An object of data.
+
−
  */
+
−
  function getExpandoData(ownerDocument) {
+
−
    var data = expandoData[ownerDocument[expando]];
+
−
    if (!data) {
+
−
        data = {};
+
−
        expanID++;
+
−
        ownerDocument[expando] = expanID;
+
−
        expandoData[expanID] = data;
+
−
    }
+
−
    return data;
+
−
  }
+
  
−
  /**
+
</table>
−
  * returns a shived element for the given nodeName and document
+
−
  * @memberOf html5
+
−
  * @param {String} nodeName name of the element
+
−
  * @param {Document} ownerDocument The context document.
+
−
  * @returns {Object} The shived element.
+
−
  */
+
−
  function createElement(nodeName, ownerDocument, data){
+
−
    if (!ownerDocument) {
+
−
        ownerDocument = document;
+
−
    }
+
−
    if(supportsUnknownElements){
+
−
        return ownerDocument.createElement(nodeName);
+
−
    }
+
−
    data = data || getExpandoData(ownerDocument);
+
−
    var node;
+
  
−
    if (data.cache[nodeName]) {
 
−
        node = data.cache[nodeName].cloneNode();
 
−
    } else if (saveClones.test(nodeName)) {
 
−
        node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
 
−
    } else {
 
−
        node = data.createElem(nodeName);
 
−
    }
 
  
−
    // Avoid adding some elements to fragments in IE < 9 because
 
−
    // * Attributes like `name` or `type` cannot be set/changed once an element
 
−
    //  is inserted into a document/fragment
 
−
    // * Link elements with `src` attributes that are inaccessible, as with
 
−
    //  a 403 response, will cause the tab/window to crash
 
−
    // * Script elements appended to fragments will execute when their `src`
 
−
    //  or `text` property is set
 
−
    return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
 
−
  }
 
  
−
  /**
 
−
  * returns a shived DocumentFragment for the given document
 
−
  * @memberOf html5
 
−
  * @param {Document} ownerDocument The context document.
 
−
  * @returns {Object} The shived DocumentFragment.
 
−
  */
 
−
  function createDocumentFragment(ownerDocument, data){
 
−
    if (!ownerDocument) {
 
−
        ownerDocument = document;
 
−
    }
 
−
    if(supportsUnknownElements){
 
−
        return ownerDocument.createDocumentFragment();
 
−
    }
 
−
    data = data || getExpandoData(ownerDocument);
 
−
    var clone = data.frag.cloneNode(),
 
−
        i = 0,
 
−
        elems = getElements(),
 
−
        l = elems.length;
 
−
    for(;i<l;i++){
 
−
        clone.createElement(elems[i]);
 
−
    }
 
−
    return clone;
 
−
  }
 
  
−
  /**
 
−
  * Shivs the `createElement` and `createDocumentFragment` methods of the document.
 
−
  * @private
 
−
  * @param {Document|DocumentFragment} ownerDocument The document.
 
−
  * @param {Object} data of the document.
 
−
  */
 
−
  function shivMethods(ownerDocument, data) {
 
−
    if (!data.cache) {
 
−
        data.cache = {};
 
−
        data.createElem = ownerDocument.createElement;
 
−
        data.createFrag = ownerDocument.createDocumentFragment;
 
−
        data.frag = data.createFrag();
 
−
    }
 
  
 +
<section>
 +
<div class="title">
 +
<h1>BREAKDOWN</h1>
 +
</div>
 +
</section>
  
−
    ownerDocument.createElement = function(nodeName) {
+
<table align = "center">
−
      //abort shiv
+
<tr>
−
      if (!html5.shivMethods) {
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Sender"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/4/4b/Pennigem_sender_15.png" height="85%" width="85%"></a></td>
−
          return data.createElem(nodeName);
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Receiver"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/c/c0/Pennigem_receiver_15.png" height="85%" width="85%"></a></td>
−
      }
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Communication"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/f/fc/Pennigem_comm_15.png" height="85%" width="85%"></a></td>
−
      return createElement(nodeName);
+
</tr>
−
    };
+
</table>
 +
<br><br>
  
−
    ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
 
−
      'var n=f.cloneNode(),c=n.createElement;' +
 
−
      'h.shivMethods&&(' +
 
−
        // unroll the `createElement` calls
 
−
        getElements().join().replace(/\w+/g, function(nodeName) {
 
−
          data.createElem(nodeName);
 
−
          data.frag.createElement(nodeName);
 
−
          return 'c("' + nodeName + '")';
 
−
        }) +
 
−
      ');return n}'
 
−
    )(html5, data.frag);
 
−
  }
 
  
−
  /*--------------------------------------------------------------------------*/
 
  
−
  /**
 
−
  * Shivs the given document.
 
−
  * @memberOf html5
 
−
  * @param {Document} ownerDocument The document to shiv.
 
−
  * @returns {Document} The shived document.
 
−
  */
 
−
  function shivDocument(ownerDocument) {
 
−
    if (!ownerDocument) {
 
−
        ownerDocument = document;
 
−
    }
 
−
    var data = getExpandoData(ownerDocument);
 
  
−
    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
 
−
      data.hasCSS = !!addStyleSheet(ownerDocument,
 
−
        // corrects block display not defined in IE6/7/8/9
 
−
        'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}' +
 
−
        // adds styling not present in IE6/7/8/9
 
−
        'mark{background:#FF0;color:#000}'
 
−
      );
 
−
    }
 
−
    if (!supportsUnknownElements) {
 
−
      shivMethods(ownerDocument, data);
 
−
    }
 
−
    return ownerDocument;
 
−
  }
 
  
−
  /*--------------------------------------------------------------------------*/
 
  
−
  /**
+
<section>
−
  * The `html5` object is exposed so that more elements can be shived and
+
<div class="title">
−
  * existing shiving can be detected on iframes.
+
<h1>HUMAN PRACTICES</h1>
−
  * @type Object
+
</div>
−
  * @example
+
</section>
−
  *
+
−
  * // options can be changed before the script is included
+
−
  * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
+
−
  */
+
−
  var html5 = {
+
  
−
    /**
+
<table align="center">
−
    * An array or space separated string of node names of the elements to shiv.
+
<tr>
−
    * @memberOf html5
+
<td>
−
    * @type Array|String
+
<a href="https://2015.igem.org/Team:Penn/Educational_Toolbox"><img src="https://static.igem.org/mediawiki/2015/c/c3/Whatwillstandasatransferfunctionfornow3.png"></a></td>
−
    */
+
<td>
−
    'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',
+
<div class="block2">
 +
      <p> Analagous to  our project goals, the Penn iGEM 2015 team has worked to further illuminate the parallels between genetic circuits and electrical circuits with the addition of the PennTunes Toolbox. Just as there is a distinct change in response when replacing an electric circuit component, the various genetic parts included in this toolbox clearly demonstrate the divergence in expression level due to a change in genetic part (promoter, RBS, etc). As an example, we have characterized one of the inverter strains in the toolbox that exhibits the relationship in the figure to the right.  
 +
</p>
  
−
    /**
+
<p>Our aim is to increase the reach of synthetic biology by providing the tools and infrastructure that will make biotechnology more accessible in educational settings. Find out more about our vision of the future for synthetic biology and biotechnology tools by clicking on the graph! </p>
−
    * A flag to indicate that the HTML5 style sheet should be inserted.
+
</div>
−
    * @memberOf html5
+
</td>
−
    * @type Boolean
+
</tr>
−
    */
+
</table>
−
    'shivCSS': !(options.shivCSS === false),
+
  
−
    /**
 
−
    * Is equal to true if a browser supports creating unknown/HTML5 elements
 
−
    * @memberOf html5
 
−
    * @type boolean
 
−
    */
 
−
    'supportsUnknownElements': supportsUnknownElements,
 
  
−
    /**
 
−
    * A flag to indicate that the document's `createElement` and `createDocumentFragment`
 
−
    * methods should be overwritten.
 
−
    * @memberOf html5
 
−
    * @type Boolean
 
−
    */
 
−
    'shivMethods': !(options.shivMethods === false),
 
  
−
    /**
 
−
    * A string to describe the type of `html5` object ("default" or "default print").
 
−
    * @memberOf html5
 
−
    * @type String
 
−
    */
 
−
    'type': 'default',
 
  
−
    // shivs the document according to the specified `html5` object options
 
−
    'shivDocument': shivDocument,
 
  
−
    //creates a shived element
 
−
    createElement: createElement,
 
  
−
    //creates a shived documentFragment
+
<style type="text/css">
−
    createDocumentFragment: createDocumentFragment
+
body { margin: 0;}
−
   };
+
header {
 +
   padding: .5vw;
 +
  font-size: 0;
 +
  display: -ms-flexbox;
 +
  -ms-flex-wrap: wrap;
 +
  -ms-flex-direction: column;
 +
  -webkit-flex-flow: row wrap;
 +
  flex-flow: row wrap;
 +
  display: -webkit-box;
 +
  display: flex;
 +
}
 +
header div {
 +
  -webkit-box-flex: auto;
 +
  -ms-flex: auto;
 +
  flex: auto;
 +
  width: 200px;
 +
  margin: .5vw;
 +
}
 +
header div img {
 +
  width: 100%;
 +
  height: auto;
 +
}
 +
@media screen and (max-width: 400px) {
 +
  header div { margin: 0; }
 +
  header { padding: 0; }
 +
}
 +
</style>
  
−
  /*--------------------------------------------------------------------------*/
+
<section>
 +
<div class="title">
 +
<h1>Our Team</h1>
 +
</div>
 +
</section>
  
−
  // expose html5
+
<header>
−
  window.html5 = html5;
+
<div><img src="https://static.igem.org/mediawiki/2015/4/48/NikitaFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/8/86/HannahFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/a/a7/JaneFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/1/16/ShriramFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/e/e5/KarolFrontPage.png" alt></div>
 +
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
 +
</header>
  
−
  // shiv the document
 
−
  shivDocument(document);
 
  
−
}(this, document));
+
</div>
 +
</div>
 +
 
 +
<div style = "background: url('https://static.igem.org/mediawiki/2015/e/e0/Footer.png'); position:inherit; height:250px; background-size: 100%; background-repeat: no-repeat; background-position:center top;">
 +
</html>

Latest revision as of 19:40, 16 September 2015

University of Pennsylvania iGEM

OUR PROJECT

Communication between cells is instrumental in coordinating population-level activity. In a process known as "quorum sensing," bacteria both secrete and sense autoinducer signaling molecules to enable synchronization of group gene expression paradigms. The synthetic biology community has rapidly adopted these quorum signaling pathways for use in programmed circuitry. However, chemical signals must diffuse between sender and receiver cells, limiting such communication to a common environment. In electronics, when electrical signals must be transferred between two circuits operating at incompatible voltages, electrical engineers use optocouplers, components that transfer information between isolated circuits via light. The 2015 Penn iGEM team presents a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell generates light via bioluminesence and a "receiver" cell expresses photoreceptors to enable light-dependent physiological responses. We show that light elicits a response in light-sensitive receivers and illuminated potential applications for this alternative form of cell communication.

BREAKDOWN



HUMAN PRACTICES

Analagous to our project goals, the Penn iGEM 2015 team has worked to further illuminate the parallels between genetic circuits and electrical circuits with the addition of the PennTunes Toolbox. Just as there is a distinct change in response when replacing an electric circuit component, the various genetic parts included in this toolbox clearly demonstrate the divergence in expression level due to a change in genetic part (promoter, RBS, etc). As an example, we have characterized one of the inverter strains in the toolbox that exhibits the relationship in the figure to the right.

Our aim is to increase the reach of synthetic biology by providing the tools and infrastructure that will make biotechnology more accessible in educational settings. Find out more about our vision of the future for synthetic biology and biotechnology tools by clicking on the graph!

Our Team