Team:Wellesley Desyne

From 2013.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<head>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
<title>Wellesley HCI iGEM Team: Welcome</title>
-
This is a template page. READ THESE INSTRUCTIONS.
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
</div>
+
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script>
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
<style type="text/css">
-
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
/*hide default igem banner and reformat style into blank slate*/
 +
#globalWrapper {width: 100%;}
 +
#top-section {width: 100%; height:30px; border:none;}
 +
#p-logo {display:none;}
 +
#search-controls {display:none;}
 +
#menubar a {color:#000000; background-color:transparent;}
 +
#menubar a:hover{text-decoration:none; color:#6B5A3A; 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*/
 +
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:#D99C45; 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; }
 +
</style>
 +
 
 +
<link rel="stylesheet" type="text/css" href="http://cs.wellesley.edu/~hcilab/iGEM2012/css/Team.css">
 +
<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://2012.igem.org/Team:Wellesley_HCI"><img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/titleimage.png" width="300px" style="display:block; float:left;"></a>
 +
 
 +
<!--Start NavBar-->
 +
<ul id="nav">
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Team">Team</a>
 +
                <ul>
 +
                <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Team">Team Members</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Notebook">Notebook</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Acknowledgement">Acknowledgement</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Tips_Tricks">Tips & Tricks</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Social">Fun</a></li>
 +
</ul>
 +
        </li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Project_Overview">Project</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Project_Overview">Project Overview</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynBio_Search">SynBio Search</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner">MoClo Planner</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/SynFlo">SynFlo</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Downloads_Tutorials">Downloads & Tutorials</a></li>
 +
</ul>
 +
</li>
 +
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Human_Practices">Human Practices</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Human_Practices">User Research</a></li>
 +
                        <li><a href="https://2012.igem.org/Team:Wellesley_HCI/Methodology">Methodology</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Safety">Safety</a></li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Outreach">Outreach</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Wellesley_HCI/Gold">Medal Fulfillment</a></li>
 +
 +
</ul>
 +
<!--End NavBar--> 
 +
 
 +
<br><br>
 +
 
 +
<div id="compimg">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/fun/wellesleyhciteam.jpg" alt="The Team" style="width:470px;">
</div>
</div>
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
 
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
 
-
</div>
 
-
</div>
 
-
</html>
 
-
<!-- *** End of the alert box *** -->
+
<div id="comp" class="team_box">
 +
<h6>Welcome!</h6>
 +
<br>
 +
<div class="intro_greeting">Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.
 +
<br>
 +
<br></div>
 +
</div>
-
{|align="justify"
+
<div class="project">
-
|You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.
+
<a href="https://2012.igem.org/Team:Wellesley_HCI/SynBio_Search"><div class="projectBar">
-
|[[Image:Wellesley_Desyne_logo.png|200px|right|frame]]
+
<div><div class="projectAbout">
-
|-
+
A synthetic-biology search engine that aggregates biological -data from multiple databases for the research process.
-
|
+
</div></div>
-
''Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)''
+
<div class="projectName">
-
|[[Image:Wellesley_Desyne_team.png|right|frame|Your team picture]]
+
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/synbio.png" alt="SynBio Search">
-
|-
+
</div>
-
|
+
</div></a>
-
|align="center"|[[Team:Wellesley_Desyne | Team Wellesley_Desyne]]
+
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/synbiosearch/searchKeyword.png" alt="SynBio Search for \"diabetes\"" style="width:500px; margin:20px 0 0 0;">
-
|}
+
</div>
 +
<div class="project">
 +
<a href="https://2012.igem.org/Team:Wellesley_HCI/MoClo_Planner"><div class="projectBar">
 +
<div class="projectAbout">
 +
A multi-touch large-scale interface for collaborative design and construction of complex biological constructs.
 +
</div>
 +
<div class="projectName">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo.png" alt="MoClo Planner">
 +
</div>
 +
</div></a>
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/moclo/moclo2withhands.png" alt="MoClo Planner"
 +
style="width:500px; margin:-20px 0 0 -150px;">
 +
</div>
 +
<div class="project" style="margin-right:0px">
 +
<a href="https://2012.igem.org/Team:Wellesley_HCI/SynFlo"><div class="projectBar">
 +
<div class="projectAbout">
 +
An interactive installation that illustrates core concepts of synthetic biology through playful tangible interaction.
 +
</div>
 +
<div class="projectName">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/synflo.png" alt="SynFlo">
 +
</div>
 +
</div></a>
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/vortex.jpg" alt="SynFlo in action"
 +
style="width:350px; margin:-20px 0 0 -50px;">
 +
</div>
-
<!--- The Mission, Experiments --->
+
<div style="text-align:center; float:left; width:100%; margin-top:20px;">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/agilentlogo-home.png" width="200px">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/HHMILogo.jpg" width="100px">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/NSFLogo.png" width="100px">
 +
<img src="http://cs.wellesley.edu/~hcilab/iGEM2012/images/WellesleyLogo.png" width="100px">
 +
</div>
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
<br><br><br><br><br>
-
!align="center"|[[Team:Wellesley_Desyne|Home]]
+
</div><!--end wellesley_wiki_content div-->
-
!align="center"|[[Team:Wellesley_Desyne/Team|Team]]
+
</div>
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Wellesley_Desyne Official Team Profile]
+
</body>
-
!align="center"|[[Team:Wellesley_Desyne/Project|Project]]
+
</html>
-
!align="center"|[[Team:Wellesley_Desyne/Parts|Parts Submitted to the Registry]]
+
-
!align="center"|[[Team:Wellesley_Desyne/Modeling|Modeling]]
+
-
!align="center"|[[Team:Wellesley_Desyne/Notebook|Notebook]]
+
-
!align="center"|[[Team:Wellesley_Desyne/Safety|Safety]]
+
-
!align="center"|[[Team:Wellesley_Desyne/Attributions|Attributions]]
+
-
|}
+

Revision as of 15:08, 17 May 2013

Wellesley HCI iGEM Team: Welcome



The Team
Welcome!

Synthetic biology will require a multidisciplinary, collaborative design environment in order to engineer the complex biological systems of the future. Our team will create a collection of software tools which address specific technical synthetic biology challenges while simultaneously advancing the way in which users interact with computing environments. Our software will support the scientific workflow process by supporting each step: research, brainstorming, building, test, troubleshooting, iteration, and analysis. The combination of human computer interaction, bio-design automation, and experimental design makes our effort unique in the iGEM experience and closes the loop on the design-build-test methodology.

A synthetic-biology search engine that aggregates biological -data from multiple databases for the research process.
SynBio Search
SynBio Search for \
A multi-touch large-scale interface for collaborative design and construction of complex biological constructs.
MoClo Planner
MoClo Planner
An interactive installation that illustrates core concepts of synthetic biology through playful tangible interaction.
SynFlo
SynFlo in action





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