Team:Wellesley Desyne

From 2013.igem.org

(Difference between revisions)
 
(195 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Wellesley_Desyne/css/wp_app.css}}
<html>
<html>
<head>
<head>
<title>Wellesley HCI iGEM Team: Welcome</title>  
<title>Wellesley HCI iGEM Team: Welcome</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
+
<meta charset="utf-8">
 +
<meta name="viewport" content="width=device-width">
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
<script src="//code.jquery.com/jquery-latest.min.js"></script>
 +
<script src="//unslider.com/unslider.min.js"></script>
<style type="text/css">
<style type="text/css">
 +
.banner { position: relative; overflow: auto; }
 +
    .banner li { list-style: none; }
 +
        .banner ul li { float: left; }
 +
        .banner ul li img {max-width: 970px;}
-
#bodyContent {border:none;}
 
-
 
-
/*actual content styles*/
 
-
body {width: 900px; margin:auto;}
 
-
 
-
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
 
-
/*#bu-wellesley_wiki_content a {color:#69d01d;}*/
 
-
#bu-wellesley_wiki_content a:hover {text-decoration:none; color:#3d3f3c;}
 
-
 
-
.navbar li {color: #transparent;}
 
-
.navbar li a {color: #ffffff;}
 
-
.navbar li a:hover {background:#D99C45; color: #ffffff;}
 
-
 
-
/*only use for current page content header (i.e. Team, G-nomeSurferPro, etc)*/
 
-
H6 {
 
-
      font-family: Helvetica;
 
-
      font-size:32pt;
 
-
      text-transform: uppercase;
 
-
      text-decoration: none;
 
-
      /*text-align: center;*/
 
-
      color: #272829;
 
-
      margin:0 !important;
 
-
      padding-top:5px !important;
 
-
    }
 
-
 
-
H3 {
 
-
      font-family: Helvetica;
 
-
      text-decoration: none;
 
-
      text-align: left;
 
-
          line-height:120%;
 
-
      /*color: #870203;*/
 
-
      font-size: 10pt;
 
-
      font-weight:normal;
 
-
    }
 
-
 
-
/*Page content styles (e.g. welcome, project images)*/
 
-
#comp {
 
-
    float:left;
 
-
    width:400px;
 
-
    height:275px;
 
-
}
 
-
#compimg {
 
-
    float:left;
 
-
    width:470px;
 
-
    margin:0 30px 0 0;
 
-
    background-color:#ebebeb;
 
-
}
 
-
 
-
/*Project images with rollover*/
 
-
.project {
 
-
background-color:#e5e3e7;
 
-
width:290px; height:180px;
 
-
overflow:hidden;
 
-
float:left;
 
-
margin:20px 15px 0 0;
 
-
position:relative;
 
-
}
 
-
.projectBar { width:100%; height:60px; position:absolute; color:white; overflow:hidden;}
 
-
.projectName { text-align:right; padding:15px 20px; }
 
-
.projectName img { width:auto; height:16px; display:inline-block; }
 
-
.projectAbout {
 
-
background-image:url('http://cs.wellesley.edu/~hcilab/iGEM2012/images/arrow.png');
 
-
background-repeat:no-repeat;
 
-
background-position:left center;
 
-
background-color:rgba(0,0,0,0.5);
 
-
background-clip:border-box;
 
-
font-size:12px;
 
-
height:auto;
 
-
margin-top:-50px;
 
-
padding:5px 5px 5px 50px; /*50px padding makes room for arrow on left*/
 
-
-webkit-transition-duration:0.5s; -moz-transition-duration:0.5s;
 
-
}
 
-
.project:hover .projectAbout { margin-top:10px; }
 
-
.projectBar > a:link, .projectBar > a:visited, .projectBar > a:hover { color:inherit; }
 
</style>
</style>
-
 
+
<body>
-
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
+
<nav class="top-bar" style="padding-top: 0px; margin-top: 0px;">
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+
<ul class="title-area">
-
 
+
<!-- Title Area -->
-
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
+
<li class="name">
-
 
+
<h1><a href="#">WHCI</a></h1>
-
</head>
+
</li>
-
<body class="basiclayout">
+
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
-
<div id="bu-wellesley_wiki_content">
+
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
-
 
+
</ul>
-
<a href="https://2012.igem.org/Team:Wellesley_HCI"><img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" width="300px" style="display:block; float:left;"></a>
+
<section class="top-bar-section">
-
 
+
<!-- Left Nav Section -->
-
 
+
<ul class="left">
-
<!--Start NavBar-->
+
<li class="divider"></li>
-
<ul id="nav">  
+
<li class="has-dropdown"><a href="#">TEAM</a>
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team</a>
+
<ul class="dropdown">
-
                <ul>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team Members</a></li>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>  
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>
-
                    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>  
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips and Tricks</a></li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Tips_Tricks">Tips & Tricks</a></li>  
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
+
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">PROJECT</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
 +
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">HUMAN PRACTICES</a>
 +
<ul class="dropdown">
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li>
 +
</ul>
 +
</li>
 +
<li class="divider"></li>
 +
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">MEDAL FULFILLMENT</a></li>
</ul>
</ul>
-
        </li>  
+
<!-- Right Nav Section -->
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project</a>
+
<ul class="right">
-
                <ul>
+
<li class="divider hide-for-small"></li>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li>  
+
<li><a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2013/e/e0/Whci_igem_logo.png"></a>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/SynBio_Search">SynBio Search</a></li>
+
</li>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/MoClo_Planner">MoClo Planner</a></li>
+
<li class="divider"></li>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/SynFlo">SynFlo</a></li>  
+
-
                    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>  
+
</ul>
</ul>
-
</li>  
+
</section>
-
+
</nav>
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">Human Practices</a>  
+
<header>
-
<ul>  
+
<div id="header-container">
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>  
+
<div class="row">
-
                    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>  
+
<div class="large-12 columns">
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>  
+
<a href="https://2013.igem.org/Team:Wellesley_Desyne" class="header-link"><h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2></a>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_HCI/Outreach">Outreach</a></li>
+
</div>
-
</ul>
+
</div>
-
</li>
+
</div>
-
<li><a href="https://2013.igem.org/Team:Wellesley_HCI/Gold">Medal Fulfillment</a></li>  
+
</header>
-
+
<div class="row">
-
</ul>
+
<div class="large-12 columns">
-
<!--End NavBar--> 
+
        <div class="banner">
 +
            <ul>
 +
                <li><img src="https://static.igem.org/mediawiki/2013/d/d7/Wellesley_slideshow_iGEM.jpg" /></li>
 +
                <li><img src="https://static.igem.org/mediawiki/2013/e/ee/Wellesley_slideshow_presentation.jpg" /></li>
 +
                <li><img src="https://static.igem.org/mediawiki/2013/9/9f/Wellesley_slideshow_Eugenie.jpg" /></li>
 +
                <li><img src="https://static.igem.org/mediawiki/2013/e/ee/Wellesley_slideshow_BACv2.jpg" /></li>
 +
                <li><img src="https://static.igem.org/mediawiki/2013/b/be/Wellesley_slideshow_zTree.jpg" /></li>
 +
            </ul>
-
 
+
        </div>
-
<br><br>
+
</div>
-
 
+
-
<div id="compimg">
+
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="The Team" style="width:470px;">
+
</div>
</div>
-
 
+
<div class="row">
-
<div id="comp" class="team_box">
+
<div class="large-12 columns">
-
<h6>Welcome!</h6>
+
<div class="main-container">
-
<br>
+
<div id="text-container">
-
 
+
<h4>Synthetic biology requires a multidisciplinary, collaborative design environment to engineer
-
<div class="intro_greeting">Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.
+
the complex biological systems of the future.</h4>
-
<br>
+
<p>Our team created a collection of software tools which
-
 
+
address specific technical synthetic biology challenges while simultaneously advancing the way in
-
<br></div>
+
which users interact with computing environments. Our software will support the workflow of the
-
</div>
+
scientific process by supporting various steps: research, brainstorming, building, testing, troubleshooting,
-
 
+
iteration, and analysis. The combination of human computer interaction, bio-design automation, and
-
<div class="project">
+
experimental design makes our effort unique in the iGEM experience and closes the loop on the
-
<a href="https://2012.igem.org/Team:Wellesley_HCI/SynBio_Search"><div class="projectBar">
+
design-build-test methodology.
-
<div><div class="projectAbout">
+
</p>
-
A synthetic-biology search engine that aggregates biological -data from multiple databases for the research process.
+
<hr>
-
</div></div>
+
                                <img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
-
<div class="projectName">
+
</div>
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="SynBio Search">
+
</div>
</div>
</div>
-
</div></a>
+
</div>
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="SynBio Search for \"diabetes\"" style="width:500px; margin:20px 0 0 0;">
+
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
-
</div>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<div class="project">
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
-
<a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"><div class="projectBar">
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<div class="projectAbout">
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
-
A multi-touch large-scale interface for collaborative design and construction of complex biological constructs.
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
-
</div>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
-
<div class="projectName">
+
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="MoClo Planner">
+
-
</div>
+
-
</div></a>
+
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="MoClo Planner"
+
-
style="width:500px; margin:-20px 0 0 -150px;">
+
-
</div>
+
-
<div class="project" style="margin-right:0px">
+
-
<a href="https://2012.igem.org/Team:Wellesley_HCI/SynFlo"><div class="projectBar">
+
-
<div class="projectAbout">
+
-
An interactive installation that illustrates core concepts of synthetic biology through playful tangible interaction.
+
-
</div>
+
-
<div class="projectName">
+
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="SynFlo">
+
-
</div>
+
-
</div></a>
+
-
<img src="http://www.evidence4action.net/wp-content/uploads/2012/09/placeholder.jpg" alt="SynFlo in action"
+
-
style="width:350px; margin:-20px 0 0 -50px;">
+
-
</div>
+
-
<div style="text-align:center; float:left; width:100%; margin-top:20px;">
+
<script>
-
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/agilentlogo-home.png" width="200px">
+
$(function() {
-
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/HHMILogo.jpg" width="100px">
+
$('.banner').unslider({
-
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/NSFLogo.png" width="100px">
+
speed: 500,              // The speed to animate each slide (in milliseconds)
-
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/WellesleyLogo.png" width="100px">
+
delay: 3000,              // The delay between slide animations (in milliseconds)
-
</div>
+
complete: function() {},  // A function that gets called after every slide animation
 +
keys: true,              // Enable keyboard (left, right) arrow shortcuts
 +
dots: true,              // Display dot navigation
 +
fluid: false              // Support responsive design. May break non-responsive designs
 +
});
 +
});
 +
  var unslider = $('.banner').unslider();
 +
   
 +
    $('.unslider-arrow').click(function() {
 +
        var fn = this.className.split(' ')[1];
 +
       
 +
        // Either do unslider.data('unslider').next() or .prev() depending on the className
 +
        unslider.data('unslider')[fn]();
 +
    });
 +
$(document).foundation();
 +
</script>
-
<br><br><br><br><br>
 
-
</div><!--end wellesley_wiki_content div-->
 
-
</div>
 
</body>
</body>
</html>
</html>

Latest revision as of 15:25, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Synthetic biology requires a multidisciplinary, collaborative design environment to engineer the complex biological systems of the future.

Our team created a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the workflow of the scientific process by supporting various steps: research, brainstorming, building, testing, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.

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