Team:Wellesley Desyne/Eugenie

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
-
<title>Wellesley HCI iGEM Team: Welcome</title>  
+
<title>Wellesley HCI iGEM Team: Notebooks</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">
 +
 
<style type="text/css">
<style type="text/css">
-
/*hide default igem banner and reformat style into blank slate*/
+
/* Hiding predefined html elements */
-
#globalWrapper {width: 100%;}
+
/***********************************/
-
#top-section {width: 100%; height:30px; border:none;}
+
#contentSub, #search-controls, #catlinks, #p-logo, .firstHeading {
 +
display:none;
 +
padding:0px;
 +
margin:0px;
 +
}
 +
#bodyContent {border:none;}
 +
#content {width: 100%; padding:0px; border-left: 0px; border-right: 0px;}
 +
#globalWrapper {width: 100%; font-size: 100%; position: static;}
 +
#top-section {width: 100%; height:10px; border:none;}
#p-logo {display:none;}
#p-logo {display:none;}
#search-controls {display:none;}
#search-controls {display:none;}
Line 17: Line 27:
.right-menu ul li a {background-color:transparent; background: transparent;}
.right-menu ul li a {background-color:transparent; background: transparent;}
.printfooter {display:none; background-color:transparent;}
.printfooter {display:none; background-color:transparent;}
 +
a:hover {text-decoration: none;}
#footer-box {border:none; background-color:transparent;}
#footer-box {border:none; background-color:transparent;}
#catlinks {display:none; background-color:transparent;}
#catlinks {display:none; background-color:transparent;}
.firstHeading {display:none; background-color:transparent;}
.firstHeading {display:none; background-color:transparent;}
#content {width: 100%; border:none; background-color:transparent;}
#content {width: 100%; border:none; background-color:transparent;}
-
#bodyContent {border:none;}
+
h1, h2, h3, h4, h5, h6 {  
-
 
+
font-size: 100%;  
-
/*actual content styles*/
+
padding-top: 0;
-
body {width: 900px; margin:auto;}
+
padding-bottom: 0;
-
 
+
border-bottom: 0px;
-
#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:#0090FF; 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; }
 
-
 
-
/*<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
-
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
-
<html xmlns="http://www.w3.org/1999/xhtml">*/
 
-
 
-
/* NON-WEBSAFE FONTS */
 
-
/*@font-face {
 
-
font-family: 'Caviar Dreams';
 
-
src: url('../fonts/CaviarDreams.ttf') format('truetype');
 
-
}*/
 
-
/* MAIN STYLE DEFINITIONS */
+
html {margin: 0;}
-
a{
+
ul {
-
color:#870203;
+
list-style-type: none;
-
-webkit-transition-duration:0.3s;
+
list-style-image: none;
-
-moz-transition-duration:0.3s;
+
-
-o-transition-duration:0.3s;
+
}
}
-
 
-
a:hover {
 
-
color:#0090FF;
 
-
}
 
-
 
-
a:visited{
 
-
color:#870203;
 
-
}
 
-
 
-
td
 
-
{
 
-
font-family: Helvetica;
 
-
font-size: 10pt;
 
-
vertical-align: top;
 
-
text-align: left;
 
-
padding-right: 10px;
 
-
}
 
-
 
-
tr
 
-
{
 
-
vertical-align: top;
 
-
}
 
-
 
-
H1 {
 
-
    font-family: Helvetica;
 
-
    text-transform: uppercase;
 
-
    color: #3d3f3c;
 
-
    text-align: left;
 
-
    }
 
-
 
-
 
 
-
H4 {
 
-
    font-family: Helvetica;
 
-
    text-transform: uppercase;
 
-
    color: #3d3f3c;
 
-
    text-align: left;
 
-
    }
 
-
 
-
/* CONTENT HEADING STYLES - overrides some main.css styling */
 
-
 
-
H6 {
 
-
font-family:'Caviar Dreams';
 
-
font-size:30px;
 
-
font-weight:500;
 
-
text-align:left;
 
-
text-transform:uppercase;
 
-
color: #3d3f3c;
 
-
border-bottom:1px solid #0090FF;
 
-
padding-bottom:10px;
 
-
margin:15px 0;
 
-
}
 
-
 
-
H1, H3 {
 
-
font-family:'Source Sans Pro';
 
-
font-weight:600;
 
-
text-transform:uppercase;
 
-
}
 
-
 
-
H1 {
 
-
font-size:20px;
 
-
border:none;
 
-
}
 
-
 
-
img.headshot {
 
-
width: 100px;
 
-
height: auto;
 
-
vertical-align: text-top;
 
-
}
 
-
 
-
 
-
 
-
body {
 
-
background:#F1F4F7;
 
-
font-family: Helvetica;
 
-
}
 
-
 
-
content {
 
-
background: transparent;
 
-
}
 
-
 
-
#tracking_nav
 
-
{
 
-
margin: 0px 0px 0px 950px;
 
-
position: fixed;
 
-
color:#bababa;
 
-
border: 1px solid #3d3f3c;
 
-
background:#3d3f3c;
 
-
font-size: 16pt;
 
-
padding: 5px;
 
-
line-height: 120%;
 
-
}
 
-
 
-
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
 
-
#tracking_nav a:hover {background:#bababa;}
 
-
 
-
#parts_table
 
-
{
 
-
border: 1px solid #870203;
 
-
border-collapse: collapse;
 
-
width: 70%;
 
-
margin: auto;
 
-
}
 
-
 
-
#parts_table td
 
-
{
 
-
text-align: center;
 
-
margin: 5px;
 
-
border: 1px solid #870203;
 
-
 
-
}
 
-
 
-
#parts_table th
 
-
{
 
-
background-color: #bababa;
 
-
border: 1px solid #870203;
 
-
color: #ffffff;
 
-
}
 
-
 
-
.table_part
 
-
{
 
-
vertical-align: middle;
 
-
}
 
-
 
-
/* HEADER STYLES: banner, navbar, etc. */
 
-
#banner { width:300px; display:block; float:left; }
 
-
#banner img { width:100%; }
 
-
 
-
ul#nav {
 
-
width:675px;
 
-
margin:0 0 0 325px;
 
-
position:relative;
 
-
}
 
-
 
-
#nav li {
 
-
color: #bbb;
 
-
background-color:none;
 
-
margin: 0 50px 0 0;
 
-
float: left;
 
-
position: relative;
 
-
list-style: none;
 
-
text-transform:uppercase;
 
-
}
 
-
#nav li:last-child { margin:0; }
 
-
 
-
/* main level link */
 
-
#nav a {
 
-
font-family:'Source Sans Pro', sans-serif;
 
-
font-size:10pt;
 
-
font-weight:500;
 
-
line-height:110%;
 
-
color: inherit;
 
-
text-decoration: none;
 
-
display: block;
 
-
padding: 0 0 0 5px;
 
-
margin: 0;
 
-
}
 
-
 
-
ul#nav > li > a {
 
-
line-height:12px;
 
-
border-left:solid 2px #0090FF;
 
-
padding:0 0 0 3px;
 
-
}
 
-
 
-
#nav a:hover {
 
-
/*background-color: #0090FF;
 
-
color: #ffffff;*/
 
-
}
 
-
 
-
/* main level link hover */
 
-
#nav .current a, #nav li:hover > a {
 
-
color: #000;
 
-
border-color:#0090FF;
 
-
}
 
-
 
-
/* sub levels link hover */
 
-
#nav ul li:hover a, #nav li:hover li a {
 
-
border: none;
 
-
/*background-color: #FA9D1C;*/
 
-
color:#000;
 
-
}
 
-
 
-
#nav ul a:hover {
 
-
color: #0090FF !important;
 
-
/*background: #fff url(img/gradient.png) repeat-x 0 -100px !important;
 
-
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
 
-
}
 
-
 
-
 
-
/* dropdown */
 
-
#nav li:hover > ul {
 
-
/*display: block;*/
 
-
opacity:1;
 
-
margin:0;
 
-
background-color: none;
 
-
z-index:0;
 
-
}
 
-
 
-
/* level 2 list */
 
-
#nav ul {
 
-
/*display: none;*/
 
-
opacity:0;
 
-
margin: 20px 0 0 0;
 
-
padding: 7px 0 0 0;
 
-
width: 205px;
 
-
position: absolute;
 
-
left: 0;
 
-
z-index:-1;
 
-
-webkit-transition-duration:0.5s;
 
-
-moz-transition-duration:0.5s;
 
-
-o-transition-duration:0.5s;
 
-
}
 
-
#nav ul li {
 
-
float: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
 
-
#nav ul a {
 
-
font-weight: normal;
 
-
/*text-shadow: 0 1px 0 #fff;*/
 
-
}
 
-
 
-
/* clearfix */
 
-
#nav:after {
 
-
content: ".";
 
-
display: block;
 
-
clear: both;
 
-
visibility: hidden;
 
-
line-height: 0;
 
-
height: 0;
 
-
}
 
-
#nav {
 
-
display: inline-block;
 
-
}
 
-
html[xmlns] #nav {
 
-
display: block;
 
-
}
 
-
 
-
* html #nav {
 
-
height: 1%;
 
-
}
 
-
 
-
/* pinterest like photo grid for social page*/
 
-
 
-
/*
 
-
body {
 
-
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
 
-
}
 
-
*/
 
-
 
-
#wrapper {
 
-
width: 90%;
 
-
max-width: 1100px;
 
-
min-width: 800px;
 
-
margin: 50px auto;
 
-
}
 
-
 
-
#columns {
 
-
-webkit-column-count: 3;
 
-
-webkit-column-gap: 10px;
 
-
-webkit-column-fill: auto;
 
-
-moz-column-count: 3;
 
-
-moz-column-gap: 10px;
 
-
-moz-column-fill: auto;
 
-
column-count: 3;
 
-
column-gap: 15px;
 
-
column-fill: auto;
 
-
}
 
-
 
-
.pin {
 
-
display: inline-block;
 
-
background: #FEFEFE;
 
-
border: 2px solid #FAFAFA;
 
-
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 
-
margin: 0 2px 15px;
 
-
-webkit-column-break-inside: avoid;
 
-
-moz-column-break-inside: avoid;
 
-
column-break-inside: avoid;
 
-
padding: 15px;
 
-
padding-bottom: 5px;
 
-
background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
 
-
opacity: 1;
 
-
 
-
-webkit-transition: all .2s ease;
 
-
-moz-transition: all .2s ease;
 
-
-o-transition: all .2s ease;
 
-
transition: all .2s ease;
 
-
}
 
-
 
-
.pin img {
 
-
width: 100%;
 
-
border-bottom: 1px solid #ccc;
 
-
padding-bottom: 15px;
 
-
margin-bottom: 5px;
 
-
}
 
-
 
-
.pin p {
 
-
font: 12px/18px Arial, sans-serif;
 
-
color: #333;
 
-
margin: 0;
 
-
}
 
-
 
-
@media (min-width: 960px) {
 
-
#columns {
 
-
-webkit-column-count: 4;
 
-
-moz-column-count: 4;
 
-
column-count: 4;
 
-
}
 
-
}
 
-
 
-
@media (min-width: 1100px) {
 
-
#columns {
 
-
-webkit-column-count: 5;
 
-
-moz-column-count: 5;
 
-
column-count: 5;
 
-
}
 
-
}
 
-
 
-
#columns:hover .pin:not(:hover) {
 
-
opacity: 0.4;
 
-
}
 
-
 
-
 
</style>
</style>
 +
<link rel="stylesheet" href="http://cs.wellesley.edu/~hcilab/igem2013/whci_app.css">
 +
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_jquery.js"></script>
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+
<body>
-
 
+
<nav class="top-bar">
-
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
+
<ul class="title-area">
-
 
+
<!-- Title Area -->
-
</head>
+
<li class="name">
-
<body class="basiclayout">
+
<h1><a href="#">WHCI</a></h1>
-
<div id="bu-wellesley_wiki_content">
+
</li>
-
 
+
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
-
 
+
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
-
<a href="https://2013.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/5/50/2013iGEM_logo.png" width="75px" style="display:block; float:left;"></a>
+
-
 
+
-
<a href="https://2013.igem.org/Team:Wellesley_Desyne"><img src="https://static.igem.org/mediawiki/igem.org/4/49/Titleimage.png" width="200px" style="display:block; float:left;"></a>
+
-
 
+
-
 
+
-
<!--Start NavBar-->
+
-
<ul id="nav">  
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Team">Team</a>
+
-
        <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/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/Tips_Tricks">Tips & Tricks</a></li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
+
</ul>
</ul>
-
    </li>  
+
<section class="top-bar-section">
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project</a>
+
<!-- Left Nav Section -->
-
        <ul>  
+
<ul class="left">
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project Overview</a></li>  
+
<li class="divider"></li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a></li>  
+
<li class="has-dropdown"><a href="#">TEAM</a>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zMol_zTree</a></li>  
+
<ul class="dropdown">
-
            <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/Team">Team Members</a></li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>  
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Notebook">Notebook</a></li>
-
        </ul>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Acknowledgement">Acknowledgement</a></li>
-
    </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/Human_Practices">Human Practices</a>  
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Social">Fun</a></li>
-
<ul>  
+
</ul>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">User Research</a></li>  
+
</li>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Methodology">Methodology</a></li>  
+
<li class="divider"></li>
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Safety">Safety</a></li>  
+
<li class="has-dropdown"><a href="#">PROJECT</a>
-
            <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Outreach">Outreach</a></li>
+
<ul class="dropdown">
-
</ul>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Overview</a></li>
-
    </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/Gold">Medal Fulfillment</a></li>
+
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree & zMol</a></li>
-
</ul>
+
<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>
 +
<!-- Right Nav Section -->
 +
<ul class="right">
 +
<li class="divider hide-for-small"></li>
 +
<li class="has-dropdown"><a href="#">Main Item 4</a>
 +
</li>
 +
<li class="divider"></li>
 +
</ul>
 +
</section>
 +
</nav>
 +
<header>
 +
<div id="header-container">
 +
<div class="row">
 +
<div class="large-12 columns">
 +
<h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2>
 +
</div>
 +
</div>
 +
</div>
 +
</header>
<!--End NavBar-->   
<!--End NavBar-->   
 +
<div class="row">
 +
<div class="large-12 columns">
 +
<div class="main-container">
 +
<div id="text-container">
 +
<!--Start content-->
-
<br><br>
+
<h1>Eugenie</h1>
-
 
+
-
<!--Actual content-->
+
-
<h6>Eugenie</h6>
+
<br>  
<br>  
Line 515: Line 148:
</div>
</div>
-
<!--END Actual content-->
 
-
<br><br><br><br><br>
+
<!--End content-->
-
</div><!--end wellesley_wiki_content div-->
+
<html>
-
</div>
+
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script>
-
</body>
+
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.abide.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.alerts.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.clearing.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.cookie.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.forms.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.interchange.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.joyride.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.magellan.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.orbit.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.placeholder.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.reveal.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.section.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.tooltips.js"></script>
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script>
 +
  <script>
 +
    $(document).foundation();
 +
  </script>
</html>
</html>

Revision as of 00:54, 9 September 2013

Wellesley HCI iGEM Team: Notebooks

Wellesley HCI iGEM 2013

Eugenie


Overview

Eugenie is a multi touch application which allows synthetic biologists to utilize the programming language Eugene without having to write Eugene code and to create biological circuits. The application consists of three representations of the circuit: “Treeview,” “FlowView,” and “EugeneView.” The user can search through the Clotho and iGEM databases to find the biological parts desired and can drag them to the workspace, edit behavior and properties, and view live-updating Eugene code for the circuit. After the user is finished creating a circuit, they can then view the search results which display the permutations of the circuit. This process is meant to be iterative, so users can go back and add more properties and behavior specifications if they would like to reduce the number of results.

Results

We conducted user-testing with Eugenie with members of the BU and MIT iGem teams as well as Wellesley College students. In our study, students were given a brief explanation of synthetic biology, Eugene, the visual language we had created and the Eugenie user interface, and our project goals, and were then tasked with first interpreting genetic devices from our visual language and then translating genetic devices represented in SBOL visualization into our visual language. Then, participants were tasked with using our program to create one of the genetic devices they had translated. We asked participants to rate the ease of understanding the visual language and using the program. We also asked participants for their feedback on how the program could be improved. Overall response was positive, with many testers believing that Eugenie can become a great tool to help other young synthetic biologists with their research work.

Demo

Future Work

  • Supplement part information with additional information from previous iGEM projects and other synthetic biology databases
  • Allow users to access more parts from other synthetic biology databases
  • Expedite the process for synthetic biologists to create genetic circuits

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