Difference between revisions of "Team:Michigan Software/Design"

m
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
+
{{Michigan_Software}}
 
<html>
 
<html>
 +
<head>
 +
 +
<link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'>
 +
 +
<style>
  
 +
.blue-border{
 +
border-radius: 5px;
 +
            border-color: #00274c;
 +
border-style: solid;
 +
padding: 50px;
 +
}
  
−
<div class="column full_size judges-will-not-evaluate">
+
.p-font{
−
<h3>★  ALERT! </h3>
+
                        /*color: #00274c;*/
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes"> design special prize</a>. </p>
+
                        font-family: 'Comfortaa', cursive !important;
 +
                        font-weight:400;
 +
font-size: 12pt !important;
 +
                }
 +
.grey-text{
 +
color: #4d4d4d;
 +
}
 +
.heading-weight{
 +
font-weight:700;
 +
}
  
  
−
<p> Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions"> Instructions for Pages for awards</a>.</p>
+
</style>
−
</div>
+
  
 +
</head>
 +
<body>
  
 +
<div class="container">
 +
       
 +
        <div class="row">
 +
        <div class="col-xs-12 col-md-9 blue-border">
  
−
<div class="column full_size">
+
<div class="row" style="border-bottom:thin solid;">
 +
            <div class="col-xs-12" style="font-family: 'Comfortaa', cursive; color:#00274c !important; padding-bottom:30px">
 +
                <h1>Michigan Software Team<br>ProtoCat 3.0 - Project Design</h1>
 +
            </div>
 +
      </div>
 +
 +
<br>
  
 +
<div>
 +
<h3>Overview</h3>
 +
<p class="p-font grey-text">The design of ProtoCat this year maintains the same basic structure as last year's version but with a more dynamic underlying structure to support our new features. Therefore, in addition to the protocol and user tables, we have added many more (protocol steps, reagents, user info, instances of reagents, categories, comments, and ratings). Our software uses Django to combine all of this stored information and then return it to the user through the templating engine.</p>
  
−
<p>
 
−
By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page.
 
−
</p>
 
  
 +
<h3>Frontend</h3>
 +
<p class="p-font grey-text">For the frontend, our software uses the JavaScript library jQuery to manipulate the webpage to make it more dynamic. To make the HTML layout dynamic to the size of the user page, we use Bootstrap, which has the added benefit of cleaning up the design of our webpages.</p>
  
−
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
 
  
−
<p>
+
<h3>Backend</h3>
−
If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.
+
<p class="p-font grey-text">On the backend, we used the Django framework and MySQL (SQLite on development computers) to respond to web requests and store the information. The reason we use Django is that it is very simple to do the basic features required of a website, such as authentication and storing to any major database software. It also has a built-in templating engine for sending the data we have stored to the user.</p>
−
</p>
+
  
  
−
<p>Teams who want to focus on art and design should be in the art and design special track. If you want to have a sub-project in this area, you should compete for this award.</p>
+
−
</div>
+
  
 +
</div>
  
 +
        </div>
 +
        </div>
  
  
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 01:33, 19 October 2016

Michigan Software Team
ProtoCat 3.0 - Project Design


Overview

The design of ProtoCat this year maintains the same basic structure as last year's version but with a more dynamic underlying structure to support our new features. Therefore, in addition to the protocol and user tables, we have added many more (protocol steps, reagents, user info, instances of reagents, categories, comments, and ratings). Our software uses Django to combine all of this stored information and then return it to the user through the templating engine.

Frontend

For the frontend, our software uses the JavaScript library jQuery to manipulate the webpage to make it more dynamic. To make the HTML layout dynamic to the size of the user page, we use Bootstrap, which has the added benefit of cleaning up the design of our webpages.

Backend

On the backend, we used the Django framework and MySQL (SQLite on development computers) to respond to web requests and store the information. The reason we use Django is that it is very simple to do the basic features required of a website, such as authentication and storing to any major database software. It also has a built-in templating engine for sending the data we have stored to the user.