Team:Wellesley Desyne/BAC

From 2013.igem.org

(Difference between revisions)
 
(65 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">
-
<style type="text/css">
+
<meta name="viewport" content="width=device-width">
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
<body>
 +
<nav class="top-bar">
 +
<ul class="title-area">
 +
<!-- Title Area -->
 +
<li class="name">
 +
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
 +
</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>
 +
</ul>
 +
<section class="top-bar-section">
 +
<!-- Left Nav Section -->
 +
<ul class="left">
 +
<li class="divider"></li>
 +
<li class="has-dropdown"><a href="#">TEAM</a>
 +
<ul class="dropdown">
 +
<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 and Tricks</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>
 +
<!-- Right Nav Section -->
 +
<ul class="right">
 +
<li class="divider hide-for-small"></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>
 +
<li class="divider"></li>
 +
</ul>
 +
</section>
 +
</nav>
 +
<header>
 +
<div id="header-container">
 +
<div class="row">
 +
<div class="large-12 columns">
 +
<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>
 +
</div>
 +
</div>
 +
</div>
 +
</header>
-
/*hide default igem banner and reformat style into blank slate*/
+
<!--End NavBar--> 
-
#globalWrapper {width: 100%;}
+
<div class="row">
-
#top-section {width: 100%; height:30px; border:none;}
+
<div class="large-12 columns">
-
#p-logo {display:none;}
+
<div class="main-container">
-
#search-controls {display:none;}
+
<div id="text-container">
-
#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;}
+
-
#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;}
+
-
#bodyContent {border:none;}
+
-
/*actual content styles*/
+
<!--Start content-->
-
body {width: 900px; margin:auto;}
+
-
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
+
<h3>Bac to the Future</h3>
-
/*#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)*/
+
<div class="panel">
-
H6 {
+
<h4>TOOL OVERVIEW</h4>
-
      font-family: Helvetica;
+
<br>
-
      font-size:32pt;
+
<div style="float:right;"><img src="https://static.igem.org/mediawiki/2013/7/7c/Wellesley_bac_logo2.png"></div>
-
      text-transform: uppercase;
+
<p>
-
      text-decoration: none;
+
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select tweets with the hashtag #iGEM2013, encode these tweets into DNA, and insert their encoded messages into digital E. coli bacteria. </p>
-
      /*text-align: center;*/
+
-
      color: #272829;
+
-
      margin:0 !important;
+
-
      padding-top:5px !important;
+
-
    }
+
-
H3 {
+
<p>At the <a href="http://cs.wellesley.edu/~hcilab/">Wellesley College Human-Computer Interaction lab</a>, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. </p>
-
      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)*/
+
<p>Our project was inspired by an experiment conducted by the <a href="http://newsfeed.time.com/2012/08/20/the-first-book-to-be-encoded-in-dna/">Church Lab at Harvard Medical School</a>, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool. </p>
-
#comp {
+
-
    float:left;
+
-
    width:400px;
+
-
    height:275px;
+
-
}
+
-
#compimg {
+
-
    float:left;
+
-
    width:470px;
+
-
    margin:0 30px 0 0;
+
-
    background-color:#ebebeb;
+
-
}
+
-
/*Project images with rollover*/
+
<p> Go to the Application: <br>
-
.project {
+
<a href = "http://www.bac-tothefuture.appspot.com">www.bac-tothefuture.appspot.com</a>
-
background-color:#e5e3e7;
+
</p>
-
width:290px; height:180px;
+
</div>
-
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 */
 
-
a{
 
-
color:#870203;
 
-
-webkit-transition-duration:0.3s;
 
-
-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 {
+
<h4>Design</h4>
-
height: 1%;
+
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.
-
}
+
-
/* pinterest like photo grid for social page*/
+
<p>Users interact with the application by executing the following protocol: </p>
 +
<ol class="list_default">
 +
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li>
 +
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li>
 +
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li>
 +
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li>
 +
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li>
 +
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li>
 +
</ol>
-
/*
 
-
body {
 
-
background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
 
-
}
 
-
*/
 
-
#wrapper {
+
<table width="900" align="center">
-
width: 90%;
+
-
max-width: 1100px;
+
-
min-width: 800px;
+
-
margin: 50px auto;
+
-
}
+
-
#columns {
+
<tr>
-
-webkit-column-count: 3;
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/b/b2/Wellesley_Bttf_scrnshot1.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Experience first hand the translation process and watch as a message is encoded into DNA. </figcaption></div></td>
-
-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 {
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/8/84/Wellesley_Bttf_scrnshot2.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Simulate the protocol of inserting encoded DNA into bacteria.</figcaption></div></td>
-
display: inline-block;
+
</tr>
-
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 {
+
<tr>
-
width: 100%;
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/d/d5/Wellesley_Bttf_scrnshot4.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Place the bacteria back into the tank and watch a backwards translation of the encoded message.</figcaption></div></td>
-
border-bottom: 1px solid #ccc;
+
-
padding-bottom: 15px;
+
-
margin-bottom: 5px;
+
-
}
+
-
.pin p {
+
<td align="center"><img src="https://static.igem.org/mediawiki/2013/6/65/Wellesley_Bttf_scrnshot7.png" width="400" height="250"><br><br><div style="width: 300px"><figcaption width="300">Click on highlighted terms to see more in depth definitions.</figcaption></div></td>
-
font: 12px/18px Arial, sans-serif;
+
</tr>
-
color: #333;
+
-
margin: 0;
+
-
}
+
-
@media (min-width: 960px) {
+
</table>
-
#columns {
+
-
-webkit-column-count: 4;
+
-
-moz-column-count: 4;
+
-
column-count: 4;
+
-
}
+
-
}
+
-
@media (min-width: 1100px) {
+
<h4>Implementation</h4>
-
#columns {
+
-
-webkit-column-count: 5;
+
-
-moz-column-count: 5;
+
-
column-count: 5;
+
-
}
+
-
}
+
-
 
+
-
#columns:hover .pin:not(:hover) {
+
-
opacity: 0.4;
+
-
}
+
-
 
+
-
 
+
-
 
+
-
</style>
+
-
 
+
-
 
+
-
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
+
-
 
+
-
<style type="text/css">@import "http://cs.wellesley.edu/~hcilab/iGEM_wiki/css/videobox.css";</style>
+
-
 
+
-
</head>
+
-
<body class="basiclayout">
+
-
<div id="bu-wellesley_wiki_content">
+
-
 
+
-
 
+
-
<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>
+
-
    </li>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project</a>
+
-
        <ul>
+
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Project_Overview">Project 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/zMol_zTree">zMol_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><a href="https://2013.igem.org/Team:Wellesley_Desyne/Human_Practices">Human Practices</a>
+
-
<ul>
+
-
    <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><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">Medal Fulfillment</a></li>
+
-
</ul>
+
-
 
+
-
<!--End NavBar--> 
+
-
 
+
-
 
+
-
<br><br>
+
-
 
+
-
<!--Actual content-->
+
-
<h6>Bac to the Future</h6>
+
-
<br>
+
-
 
+
-
<h1>Overview</h1>
+
<p>
<p>
-
Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. At the Wellesley College Human-Computer Interactions lab, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes. Our project was inspired by an experiment conducted by the Church Lab at Harvard Medical School, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool.
+
Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.
 +
</p>
-
 
-
<h6>Concept</h6>
 
-
<br>
 
-
 
-
<p>The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.<br><br>
 
-
 
+
<h4>Results</h4>
-
+
<div style="float: right; padding: 20px; width: 450px;">
-
Users interact with the application by executing the following protocol: </p>
+
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png">
-
<ol>
+
<div class="panel" style="margin-top:10px;">
-
<li>Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.</li>
+
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption>
-
<li>Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.</li>
+
</div>
-
<li>Begin the lab protocol by inserting the encoded DNA into the plasmid.</li>
+
</div>
-
<li>Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.</li>
+
-
<li>Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.</li>
+
-
<li>Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.</li>
+
-
</ol>
+
-
 
+
-
</p>
+
-
 
+
-
<h1>Results</h1>
+
<p>
<p>
-
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the Upward Bound program, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. We observed that in general, the students picked up the application quickly and found the overall experience to be engaging, interactive, and fun. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.
+
To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the <a href="http://mitpsc.mit.edu/outreach/program/view/75/search">MIT-Wellesley Upward Bound program</a>, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. Through our user study, we observed that twelve in fifteen students found the the experience to be very fun, and ten in fifteen students felt involved and engaged in the activity. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.
</p>
</p>
-
<h1>Demo</h1>
+
<h4>Demo</h4>
-
<h1>Future Work</h1>
+
<div style = "margin-left:auto;
-
<ul>
+
margin-right:auto; width:640px;">
 +
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe>
 +
</div><br>
 +
 
 +
<h4>Future Work</h4>
 +
<ul class="list_default">
     <li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li>
     <li>Implement an interactive installation, integrating use of gesture-recognition and tangible interface</li>
     <li>Distribute the web application and explore potential educational uses</li>
     <li>Distribute the web application and explore potential educational uses</li>
Line 532: Line 160:
</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 Actual content-->
+
<script src="http://eastmaninteractive.com/igem/whci_zepto.js"></script>
 +
<script src="http://eastmaninteractive.com/igem/whci_foundation.js"></script>
 +
<script src="http://eastmaninteractive.com/igem/whci_foundation.dropdown.js"></script>
 +
<script src="http://eastmaninteractive.com/igem/whci_foundation.topbar.js"></script>
 +
<script>
 +
$(document).foundation();
 +
</script>
 +
 
-
<br><br><br><br><br>
 
-
</div><!--end wellesley_wiki_content div-->
 
-
</div>
 
</body>
</body>
</html>
</html>

Latest revision as of 17:42, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Bac to the Future

TOOL OVERVIEW


Bac to the Future is an art installation and web application that aims to communicate core concepts of synthetic biology to non-scientists by engaging users in a fun and interactive environment. Specifically, our team focused on how an interactive and user-friendly application could demonstrate the significance of DNA as a powerful encoding language, as well as the potential for bacteria to be used as archival data storage. By visiting our application's virtual lab bench and following a step-by-step protocol, users can select tweets with the hashtag #iGEM2013, encode these tweets into DNA, and insert their encoded messages into digital E. coli bacteria.

At the Wellesley College Human-Computer Interaction lab, we are interested in exploring how next-generation technology could facilitate the learning of complex scientific concepts and promote educational outreach. With this goal in mind, we chose to deploy both a web application for wider distribution and greater accessibility, as well as an interactive art installation for exhibition purposes.

Our project was inspired by an experiment conducted by the Church Lab at Harvard Medical School, which used bacteria DNA to store encoded book citations. In designing the user experience, we integrated relevant and familiar components such as dictionaries, and simplified the experimental protocol to promote intuitive understanding. In addition, we incorporated user feedback to assist in the conveyance of fundamental concepts while minimizing confusion. In the future, we plan to continue improving the user experience through further user testing, and hope to distribute the web application as an educational tool.

Go to the Application:
www.bac-tothefuture.appspot.com

Design

The interface is divided into a workspace where the protocol is executed and a virtual tank containing bacteria with various messages encoded into their DNA. There is also a panel on the left containing a Twitter feed of messages that have been tweeted to the future, and a panel on the right containing the lab protocol for the user to follow.

Users interact with the application by executing the following protocol:

  1. Pick a message from the queue to encode by clicking on it, or users can search for their own message to encode by clicking on the "Pick up your message" button.
  2. Initiate the translation process by clicking on the "Encode" button and watch as the chosen message is synthesized into DNA, using the Codon Dictionary.
  3. Begin the lab protocol by inserting the encoded DNA into the plasmid.
  4. Pick an E-Coli from the tank and drag it onto the workspace to act as a means of storage.
  5. Insert the plasmid containing the encoded DNA into the chosen bacteria, and return it back to the tank.
  6. Throughout the process, users can click on the various bacteria to see the database of encoded messages contained within each bacteria displayed in the ticker, including the users’ own message.


Experience first hand the translation process and watch as a message is encoded into DNA.


Simulate the protocol of inserting encoded DNA into bacteria.


Place the bacteria back into the tank and watch a backwards translation of the encoded message.

Click on highlighted terms to see more in depth definitions.

Implementation

Bac to the Future was implemented as a web application using HTML5, Javacript, JQuery, and CSS for the interface. It is hosted on Google App Engine using the Python run-time environment. Finally, the Twitter API was used to create the feed of messages.

Results

FIGURE. Results showing positive user engagement

To test Bac to the Future, our team conducted preliminary user studies involving the observation of 15 high school students in the MIT-Wellesley Upward Bound program, students who had some exposure to science but were mostly unfamiliar with synthetic biology. In our study, the students were given a brief, 10-minute presentation of synthetic biology, followed by a demo of Bac to the Future. Afterwards, the students were given a chance to interact freely with our application. Through our user study, we observed that twelve in fifteen students found the the experience to be very fun, and ten in fifteen students felt involved and engaged in the activity. In addition, the students felt more comfortable with their knowledge of synthetic biology after the study.

Demo


Future Work

  • Implement an interactive installation, integrating use of gesture-recognition and tangible interface
  • Distribute the web application and explore potential educational uses
  • Continue to study the effectiveness of the application in facilitating the learning experience

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