Team:Wellesley Desyne/BAC

From 2013.igem.org

(Difference between revisions)
 
(67 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>
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu est ullamcorper, laoreet felis vel, interdum lacus. Phasellus imperdiet commodo purus non luctus. Phasellus non sem sapien. Etiam vel metus vitae urna commodo pellentesque. Nunc aliquam augue sed ante ornare, et tincidunt ante ultrices. Phasellus ut massa quis diam facilisis tincidunt in ut nulla. Pellentesque quis rhoncus est. Praesent adipiscing et felis et scelerisque. Nam posuere urna quis dolor tristique lacinia. Sed suscipit posuere nulla vitae accumsan. Nulla eget leo eget lorem pulvinar dignissim. Duis non dolor sollicitudin, mattis tellus ut, imperdiet dolor. Cras suscipit orci in nunc feugiat varius. Pellentesque tristique pretium ligula in laoreet. Praesent tempus, metus et pellentesque interdum, lacus mi aliquet eros, ullamcorper vestibulum urna lectus et lorem. Nullam eu massa vel est porttitor egestas non at enim.  
+
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>
</p>
-
<h1>Results</h1>
+
 
 +
<h4>Results</h4>
 +
<div style="float: right; padding: 20px; width: 450px;">
 +
<img src="https://static.igem.org/mediawiki/2013/4/49/Blah.png">
 +
<div class="panel" style="margin-top:10px;">
 +
<figcaption style="font-size: 14px; line-height: 16px;"><strong>FIGURE. </strong>Results showing positive user engagement</figcaption>
 +
</div>
 +
</div>
<p>
<p>
-
Integer risus eros, ornare vitae nulla non, viverra vestibulum felis. Vivamus a volutpat augue. Curabitur aliquam, ipsum a tincidunt venenatis, purus neque gravida justo, non congue metus est vel eros. Morbi blandit nisl eget enim cursus, nec placerat arcu sodales. Etiam ac nisi sapien. Aenean vel purus nulla. Curabitur dapibus massa non felis condimentum, sed tristique dolor facilisis. Donec placerat, turpis ac tincidunt blandit, diam magna ultrices risus, faucibus blandit orci arcu quis eros. Ut porta facilisis risus, sed tincidunt metus elementum ac. Cras convallis diam quis fermentum suscipit. Etiam pharetra, lorem eu pharetra gravida, tellus augue feugiat elit, id mattis neque lorem non enim. Duis malesuada tincidunt egestas.  
+
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;">
-
     <li>Etiam bibendum lorem ut eros eleifend, vehicula ultricies dolor fringilla.</li>
+
<iframe width="640" height="360" src="//www.youtube.com/embed/SEONZKrYcrM" frameborder="0" allowfullscreen></iframe>
-
     <li>Nunc elementum nisi sit amet nunc varius mattis.</li>
+
</div><br>
-
     <li>Nullam sed tellus ornare, scelerisque est sed, adipiscing ligula.</li>
+
 
 +
<h4>Future Work</h4>
 +
<ul class="list_default">
 +
     <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>Continue to study the effectiveness of the application in facilitating the learning experience</li>
</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"