Team:Wellesley Desyne/Project Overview

From 2013.igem.org

(Difference between revisions)
 
(48 intermediate revisions not shown)
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 57: Line 12:
<!-- Title Area -->
<!-- Title Area -->
<li class="name">
<li class="name">
-
<h1><a href="#">WHCI</a></h1>
+
<h1><a href="https://2013.igem.org/Team:Wellesley_Desyne">WHCI</a></h1>
</li>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
Line 80: Line 35:
<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/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/Eugenie">Eugenie</a></li>
-
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/zMol_zTree">zTree & zMol</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/BAC">Bac to the Future</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
<li><a href="https://2013.igem.org/Team:Wellesley_Desyne/Downloads_Tutorials">Downloads & Tutorials</a></li>
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 110: Line 65:
<div class="row">
<div class="row">
<div class="large-12 columns">
<div class="large-12 columns">
-
<h2><img src="https://static.igem.org/mediawiki/2013/0/03/Wellesley_logo.png">Wellesley HCI iGEM 2013</h2>
+
<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>
</div>
Line 125: Line 80:
<!--Actual content-->
<!--Actual content-->
-
<h1>Project Description</h1>
+
<h3>Project Description</h3>
-
<br><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>
-
<div id = "projectImgs">
+
 
-
<img src="https://static.igem.org/mediawiki/2013/7/76/Eugenie_ScreenShot1.png" alt="Eugenie" style="width:295px; height: 200px;">
+
<div class="row">
-
<img src="https://static.igem.org/mediawiki/2013/8/81/ZMolScreenShot.png" alt="zMol" style="width:295px; height: 200px; margin-left:2px;">
+
<div class="row">
-
<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 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 content-->
<!--End content-->
-
<html>
+
 
 +
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_zepto.js"></script>
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script>
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.abide.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.alerts.js"></script>
+
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.clearing.js"></script>
+
<script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.cookie.js"></script>
+
$(document).foundation();
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.dropdown.js"></script>
+
</script>
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.forms.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.interchange.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.joyride.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.magellan.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.orbit.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.placeholder.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.reveal.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.section.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.tooltips.js"></script>
+
-
<script src="http://cs.wellesley.edu/~hcilab/igem2013/whci_foundation.topbar.js"></script>
+
-
  <script>
+
-
    $(document).foundation();
+
-
  </script>
+
</html>
</html>

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"