Team:Wellesley Desyne/Project Overview

From 2013.igem.org

(Difference between revisions)
 
(52 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'>
-
/*hide default igem banner and reformat style into blank slate*/
+
<body>
-
#globalWrapper {width: 100%;}
+
<nav class="top-bar">
-
#top-section {width: 100%; height:30px; border:none;}
+
<ul class="title-area">
-
#p-logo {display:none;}
+
<!-- Title Area -->
-
#search-controls {display:none;}
+
<li class="name">
-
#menubar a {color:#000000; background-color:transparent;}
+
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
-
#menubar a:hover{text-decoration:none; color:#0090FF; background-color:transparent;}
+
</li>
-
.left-menu a:hover{background-color:transparent; margin:5px 0px 0px 0px; padding:0; background: transparent;}
+
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
-
.left-menu li a:hover{background-color:transparent; margin:0; padding:0; background: transparent;}
+
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
-
.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*/
+
-
body {width: 900px; margin:auto;}
+
-
 
+
-
#bu-wellesley_wiki_content {height:auto; line-height:100%;}
+
-
/*#bu-wellesley_wiki_content a {color:#69d01d;}*/
+
-
#bu-wellesley_wiki_content a:hover {text-decoration:none; color:#3d3f3c;}
+
-
 
+
-
.navbar li {color: #transparent;}
+
-
.navbar li a {color: #ffffff;}
+
-
.navbar li a:hover {background:#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 */
+
-
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 {
+
-
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;
+
-
}
+
-
 
+
-
#projectImgs {
+
-
    margin-top: 50px;
+
-
    text-align: center;
+
-
}
+
-
 
+
-
</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>
</ul>
-
    </li>
+
<section class="top-bar-section">
-
    <li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Gold">Medal Fulfillment</a></li>
+
<!-- Left Nav Section -->
-
</ul>
+
<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>
<!--End NavBar-->   
<!--End NavBar-->   
 +
<div class="row">
 +
<div class="large-12 columns">
 +
<div class="main-container">
 +
<div id="text-container">
-
 
+
<!--Start content-->
-
<br><br>
+
<!--Actual content-->
<!--Actual content-->
-
<h6>Project Description</h6>
+
<h3>Project Description</h3>
<p>
<p>
-
Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. Eugenie is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. zMol and zTree make use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing abstract data. While zMol focuses on the 3D representation of molecules, zTree focuses on representing hierarchical data in an intuitive and interactive manner. Finally, Bac to the Future is an interactive web application that aims to communicate core concepts of synthetic biology to those who are nonscientists. As a human-computer interactions lab, our team tackles the challenges that synthetic biologists face while simultaneously applying human-computer interaction techniques to create intuitive tools and foster a more collaborative design environment.
+
Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. <a href="https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> makes use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing large data collections. <a href="https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a> focuses on representing hierarchical data in an intuitive and interactive manner. Finally, <a href="https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a> is an interactive web application that aims to communicate core concepts of synthetic biology to nonscientists.  
 +
 
 +
<p>As a human-computer interaction (HCI) lab, our team applies a user-centered design process to tackle the challenges that synthetic biologists face while simultaneously applying HCI techniques to create intuitive tools and foster a more collaborative design environment.
</p>
</p>
-
<br>
 
-
<div id = "projectImgs">
 
-
<img src="https://static.igem.org/mediawiki/2013/0/05/Eugenie_poster.png" alt="Eugenie" style="width:295px; height: 200px;">
 
-
<img src="https://static.igem.org/mediawiki/2013/8/81/ZMolScreenShot.png" alt="zMol" style="width:295px; height: 200px; margin-left:2px;">
 
-
<img src="https://static.igem.org/mediawiki/2013/e/ea/Bttf.png" alt="Bac to the Future" style="width:295px; height: 200px; margin-left:2px;">
 
-
</div>
 
 +
<div class="row">
 +
<div class="row">
 +
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">
 +
<img src = "https://static.igem.org/mediawiki/2013/a/af/Wellesley_eugenie_overview.jpg">
 +
</a></div>
 +
<div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/zTree">
 +
<img src = "https://static.igem.org/mediawiki/2013/5/5e/Wellesley_zTree_overview.jpg">
 +
</a></div>
 +
                        <div class="large-4 columns"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/BAC">
 +
<img src = "https://static.igem.org/mediawiki/2013/5/55/Wellesley_bac_overview.jpg">
 +
</a></div>
 +
</div>
 +
                        <div class="large-4 columns"><h4 style="text-align:center;"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/Eugenie">Eugenie</a> <img src="https://static.igem.org/mediawiki/2013/8/8a/Eugenie_logo_xsmallv2.png"></h5></div>
 +
<div class="large-4 columns"><h4 style="text-align:center;"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/zTree">zTree</a><img src="https://static.igem.org/mediawiki/2013/8/8b/Wellesley_ztree_logo_xsmallv2.png"></h5></div>
 +
                        <div class="large-4 columns"><h4 style="text-align:center;"><a href = "https://2013.igem.org/Team:Wellesley_Desyne/BAC">Bac to the Future</a><img src="https://static.igem.org/mediawiki/2013/d/d8/Bac_logo_xsmall.png"></h5></div>
 +
</div>
 +
 +
 +
<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-->
 
-
<br><br><br><br><br>
+
<!--End content-->
-
</div><!--end wellesley_wiki_content div-->
+
 
-
</div>
+
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_zepto.js"></script>
-
</body>
+
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.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.topbar.js"></script>
 +
<script>
 +
$(document).foundation();
 +
</script>
</html>
</html>

Latest revision as of 15:50, 27 September 2013

Wellesley HCI iGEM Team: Welcome

Project Description

Synthetic biology is a multi-disciplinary field that requires a collaborative environment in order to engineer the complex biological systems of the future. To help create that environment, our team is designing software tools – tools that address specific technical synthetic biology challenges in order to ease synthetic biology research and increase its learnability. In addition, since synthetic biology is a new and emerging field, it is important to pay attention to how the public perceives such research. Careful attention is given to this as we create our applications. Eugenie is a multi-touch application that allows synthetic biologists to use the programming language Eugene without actually having to code. zTree makes use of zSpace, a holographic computing machine, to aid scientists in navigating and visualizing large data collections. zTree focuses on representing hierarchical data in an intuitive and interactive manner. Finally, Bac to the Future is an interactive web application that aims to communicate core concepts of synthetic biology to nonscientists.

As a human-computer interaction (HCI) lab, our team applies a user-centered design process to tackle the challenges that synthetic biologists face while simultaneously applying HCI techniques to create intuitive tools and foster a more collaborative design environment.

Eugenie

zTree

Bac to the Future

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