Team:Wellesley Desyne/Eugenie

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{Team:Wellesley_Desyne/css/wp_app.css}}
<html>
<html>
<head>
<head>
-
<title>Wellesley HCI iGEM Team: Notebooks</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">
-
<meta charset="utf-8">
+
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width">
+
<meta name="viewport" content="width=device-width">
-
 
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
-
<style type="text/css">
+
-
 
+
-
/* Hiding predefined html elements */
+
-
/***********************************/
+
-
#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;}
+
-
#search-controls {display:none;}
+
-
#menubar a {color:#000000; background-color:transparent;}
+
-
#menubar a:hover{text-decoration:none; color:#0090FF; background-color:transparent;}
+
-
.left-menu a:hover{background-color:transparent; margin:5px 0px 0px 0px; padding:0; background: transparent;}
+
-
.left-menu li a:hover{background-color:transparent; margin:0; padding:0; background: transparent;}
+
-
.right-menu ul li a {background-color:transparent; background: transparent;}
+
-
.printfooter {display:none; background-color:transparent;}
+
-
a:hover {text-decoration: none;}
+
-
#footer-box {border:none; background-color:transparent;}
+
-
#catlinks {display:none; background-color:transparent;}
+
-
.firstHeading {display:none; background-color:transparent;}
+
-
#content {width: 100%; border:none; background-color:transparent;}
+
-
h1, h2, h3, h4, h5, h6 {
+
-
font-size: 100%;
+
-
padding-top: 0;
+
-
padding-bottom: 0;
+
-
border-bottom: 0px;
+
-
}
+
-
 
+
-
html {margin: 0;}
+
-
ul {
+
-
list-style-type: none;
+
-
list-style-image: none;
+
-
}
+
-
 
+
-
</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>
+
-
 
+
<body>
<body>
<nav class="top-bar">
<nav class="top-bar">
Line 100: Line 55:
<ul class="right">
<ul class="right">
<li class="divider hide-for-small"></li>
<li class="divider hide-for-small"></li>
-
<li class="has-dropdown"><a href="#">Main Item 4</a>
+
<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>
</li>
<li class="divider"></li>
<li class="divider"></li>
Line 124: Line 79:
<!--Start content-->
<!--Start content-->
-
<h1>Eugenie</h1>
+
<h3>Eugenie</h3>
<br>  
<br>  
-
<h1>Overview</h1>
+
<h4>Overview</h4>
<p>
<p>
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.  
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.  
Line 148: Line 103:
</ul>
</ul>
 +
<div class="row">
 +
<hr>
 +
<img src="https://static.igem.org/mediawiki/2013/6/62/Whci_sponsor_logos.png">
 +
</div>
 +
</div>
</div>
</div>
<!--End content-->
<!--End content-->
-
<html>
+
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.abide.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.alerts.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.alerts.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.clearing.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.placeholder.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.cookie.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.tooltips.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script>
+
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.forms.js"></script>
+
<script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.interchange.js"></script>
+
$(document).foundation();
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.joyride.js"></script>
+
</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 20:10, 18 September 2013

Wellesley HCI iGEM Team: Welcome

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"