Difference between revisions of "Team:HFUT-China/Improve"

 
(39 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
   
+
 
−
    <head>
+
<head>
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
   
+
 
−
      <title>Team:HFUT-China</title>
+
    <title>Team:HFUT-China</title>
−
   
+
 
−
     <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/headerCss?action=raw&ctype=text/css" rel="stylesheet"/>
+
     <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/headerCss?action=raw&ctype=text/css" rel="stylesheet" />
−
     <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/stylewikiCss?action=raw&ctype=text/css" rel="stylesheet"/>
+
     <link href="https://2017.igem.org/Template:HFUT-China/Safety/css/stylewikiCss?action=raw&ctype=text/css" rel="stylesheet"
 +
    />
 
     <link href="https://2017.igem.org/Template:HFUT-China/MainPage/css/styleCss?action=raw&ctype=text/css" rel="stylesheet" />
 
     <link href="https://2017.igem.org/Template:HFUT-China/MainPage/css/styleCss?action=raw&ctype=text/css" rel="stylesheet" />
 
     <style>
 
     <style>
−
    body{background:#f7f5e6;}
+
        body {
 +
            background: #f7f5e6;
 +
        }
 +
 
 +
        .image-container {
 +
            display: inline-block;
 +
        }
 +
 
 +
        .img-disc {
 +
            margin-top: 30px;
 +
            margin-bottom: 30px;
 +
            font-size: 18px;
 +
        }
 +
 
 +
        .image {
 +
            box-shadow: 0px 3px 19px #ddd;
 +
            border-radius: 20px;
 +
        }
 
     </style>
 
     </style>
−
    </head>
+
</head>
−
   
+
 
−
    <center>
+
<center>
−
<div class="header" style="z-index:999;position:absolute">
+
    <div class="header" style="z-index:999; position:fixed;left:0px;top:16px;">
−
  <ul class="nav">
+
        <ul class="nav">
−
    <li><a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a></li>
+
            <li>
−
    <li><a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                <a href="https://2017.igem.org/Team:HFUT-China">&nbsp;&nbsp;Main page&nbsp;&nbsp;</a>
−
            <ul>
+
            </li>
−
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Description"><font class="hef">Description</font></a></li>
+
            <li>
−
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Design"><font class="hef">Design</font></a></li>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Description">&nbsp;&nbsp;Project&nbsp;
−
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Contribution"><font class="hef">Contribution</font></a></li>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
−
          <li class="selfnav hef"><a href="https://2017.igem.org/Team:HFUT-China/Demonstrate"><font class="hef">Demonstrate</font></a></li>
+
                <ul>
−
      </ul>
+
                    <li class="selfnav hef">
−
    </li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Description">
−
    <li><a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                            <font class="hef">Description</font>
−
        <ul>
+
                        </a>
−
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Software"><font class="hef" color="#000">Software</font></a></li>
+
                    </li>
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Model"><font class="hef" color="#000">Model</font></a></li>
+
                    <li class="selfnav hef">
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Improve"><font class="hef" color="#000">Improve</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Design">
−
        </ul>
+
                            <font class="hef">Design</font>
−
    </li>
+
                        </a>
−
    <li><a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                    </li>
−
        <ul>
+
                    <li class="selfnav hef">
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Notebook"><font class="hef" color="#000">Notebook</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Contribution">
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Medals"><font class="hef" color="#000">Medals</font></a></li>
+
                            <font class="hef">Contribution</font>
−
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Safety"><font class="hef" color="#000">Safety</font></a></li>
+
                        </a>
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/User_guide"><font class="hef" color="#000">User guide</font></a></li>
+
                    </li>
−
        </ul>
+
                    <li class="selfnav hef">
−
    </li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Demonstrate">
−
    <li><a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";></a>
+
                            <font class="hef">Demonstrate</font>
−
        <ul>
+
                        </a>
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Team"><font class="hef" color="#000">Members</font></a></li>
+
                    </li>
−
<li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Attributions"><font class="hef" color="#000">Attributions</font></a></li>
+
                </ul>
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/Collaborations"><font class="hef" color="#000">Collaborations</font></a></li>
+
            </li>
−
     
+
            <li>
−
        </ul>
+
                <a href="https://2017.igem.org/Team:HFUT-China/Software">&nbsp;&nbsp;Software&nbsp;
−
    </li>
+
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
−
    <li><a href="#">&nbsp;&nbsp;Human practice&nbsp;<img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px";>&nbsp;&nbsp;</a>
+
                <ul>
−
<ul>
+
                    <li class="selfnav">
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Silver"><font class="hef" color="#000">Silver HP</font></a></li>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Software">
−
        <li class="selfnav"><a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated"><font class="hef" color="#000">Integrated<br>and Gold</font></a></li>
+
                            <font class="hef" color="#000">Software</font>
−
        </ul>
+
                        </a>
−
    </li><li><a href="https://igem.org/2017_Judging_Form?id=2466" target="blank">&nbsp;&nbsp;Judging Form&nbsp;&nbsp;</a></li>
+
                    </li>
−
  </ul>
+
                    <li class="selfnav">
−
</div>
+
                        <a href="https://2017.igem.org/Team:HFUT-China/Model">
−
   
+
                            <font class="hef" color="#000">Model</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Improve">
 +
                            <font class="hef" color="#000">Improve</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Unit_Test">
 +
                            <font class="hef" color="#000">Unit Test</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/Notebook">&nbsp;&nbsp;Documents&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Notebook">
 +
                            <font class="hef" color="#000">Notebook</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Medals">
 +
                            <font class="hef" color="#000">Medals</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Safety">
 +
                            <font class="hef" color="#000">Safety</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/User_guide">
 +
                            <font class="hef" color="#000">User guide</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/Team">Team&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>
 +
                </a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Team">
 +
                            <font class="hef" color="#000">Members</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Attributions">
 +
                            <font class="hef" color="#000">Attributions</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/Collaborations">
 +
                            <font class="hef" color="#000">Collaborations</font>
 +
                        </a>
 +
                    </li>
 +
 
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">&nbsp;&nbsp;Human practice&nbsp;
 +
                    <img src="https://static.igem.org/mediawiki/2017/5/53/Xia.png" width="12px" ;>&nbsp;&nbsp;</a>
 +
                <ul>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Silver">
 +
                            <font class="hef" color="#000">Silver HP</font>
 +
                        </a>
 +
                    </li>
 +
                    <li class="selfnav">
 +
                        <a href="https://2017.igem.org/Team:HFUT-China/HP/Gold_Integrated">
 +
                            <font class="hef" color="#000">Integrated
 +
                                <br>and Gold</font>
 +
                        </a>
 +
                    </li>
 +
                </ul>
 +
            </li>
 +
            <li>
 +
                <a href="https://igem.org/2017_Judging_Form?id=2466" target="blank">&nbsp;&nbsp;Judging Form&nbsp;&nbsp;</a>
 +
            </li>
 +
        </ul>
 +
    </div>
 +
 
 
     <div style="height:160px"></div>
 
     <div style="height:160px"></div>
−
     <div class="title"><b><font color="#555555">Improvement</font></div>
+
     <div class="title">
 +
        <b>
 +
            <font color="#555555">Improvement</font>
 +
    </div>
  
  
 
     <!-- <div class="subtitle"><a href="http://47.93.11.157" target="blank" style=" text-decoration:none;"><font color="#555555"><br><br><br>Click <font color="#0089a7"><b>here</b></font> to use our software ~ :p</font></a></div>  -->
 
     <!-- <div class="subtitle"><a href="http://47.93.11.157" target="blank" style=" text-decoration:none;"><font color="#555555"><br><br><br>Click <font color="#0089a7"><b>here</b></font> to use our software ~ :p</font></a></div>  -->
−
     <!-- <div style="margin-top: 90px;font-family: Light;"><b><font color="#333" size="6px" ><br>SEARCH</font></b></div> -->
+
     <!-- <div style="margin-top: 90px;font-family: good;"><b><font color="#6f7c91" size="6px" ><br>SEARCH</font></b></div> -->
−
<img src="https://static.igem.org/mediawiki/2017/a/a4/Improve.png" width="29%" style="margin-top:66px;margin-bottom:0px;">
+
    <img src="https://static.igem.org/mediawiki/2017/a/a4/Improve.png" width="29%" style="margin-top:90px;margin-bottom:0px;">
 
     <div class="p">
 
     <div class="p">
−
      <div class="q" style="line-height: 2.5;">
+
        <div class="q" style="line-height: 2.5;">
−
      <br> <br>It is a great honor to attend the 2017 iGEM competition, and this is the fourth time that HFUT-Software attend the competition. On the one hand, based on the project from last year’s work, we maintained the advantages of it, and further perfected its user interface and function. On the other hand, to fulfill the variety needs of users and to provide better services, we added a searching section to the original system, in which users can search for detailed information and wiki of past teams, and it is also the highlight of our system this year.
+
            <br>
−
      <br><br>First, let’s see the improvement of the previous system. It will be introduced as two parts—User Interface (UI) and Function.
+
            <br>It is a great honor to attend the 2017 iGEM competition, and this is the fourth time that HFUT-Software attend
−
      <br><br></div>
+
            the competition. On the one hand, based on the project from last year’s work, we maintained the advantages of
−
      <!-- <img src="https://static.igem.org/mediawiki/2017/a/ae/Index.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:30px;border-radius:20px;"> -->
+
            it, and further perfected its user interface and function. On the other hand, to fulfill the variety needs of
 +
            users and to provide better services, we added a searching section to the original system, in which users can
 +
            search for detailed information and wiki of past teams, and it is also the highlight of our system this year.
 +
            <br>
 +
            <br>First, let’s see the improvement of the previous system. It will be introduced as two parts—User Interface (UI)
 +
            and Function.
 +
            <br>
 +
            <br>
 +
        </div>
 +
        <!-- <img src="https://static.igem.org/mediawiki/2017/a/ae/Index.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:30px;border-radius:20px;"> -->
 
     </div>
 
     </div>
−
   
+
 
−
   
+
 
−
     <div style="margin-top: 90px;font-family: Light;"><b><font color="#333" size="6px" ><br>User Interface</font></b></div>
+
     <div style="margin-top: 90px;font-family: good;">
−
   
+
        <b>
−
    <div class="p">
+
            <font color="#6f7c91" size="6px">
−
      <div class="q" style="line-height: 2.5;">
+
                <br>User Interface</font>
−
      <br>Primarily, we modified the layout of some pages according to the feedbacks from users, in order to offer better services. For instance, we replaced the former login page, which is unmatched with the basic style of the system, with a simpler but suitable one. As for the reorganization of the design page, we not only beatify it, but modified some interactive details. For example, we improved the smoothness of the dragging effect when adding a part to the gene chain, and we appended “delete” at the menu when the right button of the mouse is pressed. Furthermore, the trash can of the design page is also changed satisfy the harmony of the whole page.
+
        </b>
−
      <br> <br> &nbsp;&nbsp;&nbsp;&nbsp;
+
−
      </div>
+
 
     </div>
 
     </div>
−
   
+
 
−
   
+
−
    <div style="margin-top: 90px;font-family: Light;"><b><font color="#333" size="6px" >Function</font></b></div>
+
−
   
+
 
     <div class="p">
 
     <div class="p">
−
      <div class="q" style="line-height: 2.5;">
+
        <div class="q" style="line-height: 2.5;">
−
      <br>Secondly, the function of the former system is further perfected. We updated the parts recommendation function to make it more reasonable. To be specific, suppose we have a gene chain, biobrick A→biobrick B→biobrick C→biobrick D, and if the biobrick C is chosen, we can get recommended biobricks by clicking the corresponding option which lies in the menu of the right button. “Recommend→front” means to recommend a part ahead of biobrick C, “recommend→back” means to recommend a part behind biobrick C, “recommend→middle-front” means to recommend a part in the middle of biobrick B and biobrick C, and “recommend→middle-back” means to recommend a part in the middle of biobrick C and biobrick D.
+
            <br>Primarily, we modified the layout of some pages according to the feedbacks from users, in order to offer better
−
    <!-- <center><img src="https://static.igem.org/mediawiki/2017/0/07/Gene.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:60px;border-radius:20px;"></center>  -->
+
            services. For instance, we replaced the former login page, which is unmatched with the basic style of the system,
−
      <br><br>Moreover, a novel function is added to the system—the wiki information retrieval function. Based on the idea to let participants get familiar with iGEM competition faster, we integrated the team information from 2004 to 2016, and transformed it into the same format. In comparison with the information from the official resources, users can obtain much more convenient services from our system, while the official information is complex and might cause confusion to users. And the wiki of each team is of different style, which is hard for other participants to search for interested information. Thus, it is not only convenience but also great efficiency that our system can bring to users. What’s more, despite the listed searching results, we also present recommended teams which are similar to the wanted team. <br><br>
+
            with a simpler but suitable one. As for the reorganization of the design page, we not only beatify it, but modified
 +
            some interactive details. For example, we improved the smoothness of the dragging effect when adding a part to
 +
            the gene chain, and we appended “delete” at the menu when the right button of the mouse is pressed. Furthermore,
 +
            the trash can of the design page is also changed satisfy the harmony of the whole page.
 +
            <br>
 +
            <br>What's more, in BioDesigner Coral, all of the funcitons require users to login first. But in BioDesigner Dolphin, except for "Project", the other three allow users to use without login.
 +
            <br> &nbsp;&nbsp;&nbsp;&nbsp;
 +
        </div>
 
     </div>
 
     </div>
 +
 +
 +
 +
    <table style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;text-align:center;">
 +
        <tr style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
 +
<img class="image" style="width:600px; box-shadow: 0px 3px 19px #ddd;border-radius:20px;" src="https://static.igem.org/mediawiki/2017/b/b2/UIOld.png"
 +
            alt="">
 +
        <div class="img-disc" style="font-family:good;">Before</div>
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<img class="image" style="width:600px; box-shadow: 0px 3px 19px #ddd;border-radius:20px;" src="https://static.igem.org/mediawiki/2017/8/80/UINew.png"
 +
            alt="">
 +
        <div class="img-disc" style="font-family:good;">After</div>
 +
         
 +
</td>
 +
 +
</tr>
 +
<tr style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
 +
<img class="image" src="https://static.igem.org/mediawiki/2017/c/cc/XianOld.png" alt="" style="box-shadow: 0px 3px 19px #ddd;border-radius:20px;">
 +
        <div class="img-disc" style="font-family:good;">Before</div>
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<img class="image" style="width:600px; " src="https://static.igem.org/mediawiki/2017/3/30/XianNew.png" alt=""
 +
            style="box-shadow: 0px 3px 19px #ddd;border-radius:20px;">
 +
        <div class="img-disc" style="font-family:good;">After</div>
 +
         
 +
</td>
 +
 +
</tr>
 +
</table>
 +
 +
 
 +
 +
    <!--  <div>
 +
                        <div class="image-container" style="width:500px;">
 +
                            <img class="image" src="https://static.igem.org/mediawiki/2017/8/80/LajitongNew.png" alt="">
 +
                            <div class="img-disc" style="font-family:good;">Before</div>
 +
                        </div>
 +
                        <div class="image-container" style="width:500px;">
 +
                            <img class="image" style="margin-left:40px;" src="https://static.igem.org/mediawiki/2017/b/b3/LajitongOld.png" alt="">
 +
                            <div class="img-disc" style="font-family:good;">After</div>
 +
                        </div>
 +
                    </div>
 +
               
 +
               
 +
                -->
 +
 +
 +
    <div style="margin-top: 90px;font-family: good;">
 +
        <b>
 +
            <font color="#6f7c91" size="6px">Function</font>
 +
        </b>
 
     </div>
 
     </div>
−
   
+
 
−
       
+
 
     <div class="p">
 
     <div class="p">
−
      <div class="q" style="line-height: 2.5;">
+
        <div class="q" style="line-height: 2.5;">
−
      <br>Having read the introduction of our system, are you now having a strong will to try it? So what are you waiting for?
+
            <br>Secondly, the function of the former system is further perfected. We updated the parts recommendation function
−
      <!-- <center><img src="https://static.igem.org/mediawiki/2017/4/41/Tags.png" width="43%" style="box-shadow: 0px 3px 19px #ddd;margin-top:60px;border-radius:20px;"></center>  -->
+
            to make it more reasonable. To be specific, suppose we have a gene chain, biobrick A→biobrick B→biobrick C→biobrick
−
    <br><br></div>
+
            D, and if the biobrick C is chosen, we can get recommended biobricks by clicking the corresponding option which
 +
            lies in the menu of the right button. “Recommend→front” means to recommend a part ahead of biobrick C, “recommend→back”
 +
            means to recommend a part behind biobrick C, “recommend→middle-front” means to recommend a part in the middle
 +
            of biobrick B and biobrick C, and “recommend→middle-back” means to recommend a part in the middle of biobrick
 +
            C and biobrick D.
 +
            <!-- <center><img src="https://static.igem.org/mediawiki/2017/0/07/Gene.png" width="79%" style="box-shadow: 0px 3px 19px #ddd;margin-top:60px;border-radius:20px;"></center>  -->
 +
            <br>
 +
            <br>Moreover, a novel function is added to the system—the wiki information retrieval function. Based on the idea
 +
            to let participants get familiar with iGEM competition faster, we integrated the team information from 2004 to
 +
            2016, and transformed it into the same format. In comparison with the information from the official resources,
 +
            users can obtain much more convenient services from our system, while the official information is complex and
 +
            might cause confusion to users. And the wiki of each team is of different style, which is hard for other participants
 +
            to search for interested information. Thus, it is not only convenience but also great efficiency that our system
 +
            can bring to users. What’s more, despite the listed searching results, we also present recommended teams which
 +
            are similar to the wanted team.
 +
            <br>
 +
            <br>
 +
        </div>
 
     </div>
 
     </div>
−
      
+
 
 +
<table style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;text-align:center;">
 +
        <tr style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
 
 +
<img class="image" style="height:160px; box-shadow: 0px 3px 19px #ddd;border-radius:20px;" src="https://static.igem.org/mediawiki/2017/0/0a/Beforerec1.png"
 +
            alt="">
 +
        <div class="img-disc" style="font-family:good;">Before</div>
 +
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
 +
<img class="image" style="height:160px; box-shadow: 0px 3px 19px #ddd;border-radius:20px;" src="https://static.igem.org/mediawiki/2017/b/b8/Beforerec2.png"
 +
            alt="">
 +
        <div class="img-disc" style="font-family:good;">After</div>
 +
         
 +
</td>
 +
 
 +
</tr>
 +
 
 +
</table>
 +
     <div class="p">
 +
        <div class="q" style="line-height: 2.5;">
 +
            <br>Having read the introduction of our system, are you now having a strong will to try it? So what are you waiting
 +
            for?
 +
            <br>
 +
            <br>
 +
        </div>
 +
        <div class="q">
 +
            <a href="http://bio.measurex.top" target="blank" style=" text-decoration:none;">
 +
                <font color="#555555 ">
 +
                    <br>
 +
                    <br>
 +
                    <br>
 +
                    <b>Click
 +
                        <span style="border-radius:6px;border: 2px solid #0089a7;padding:2px 10px 4px 10px; margin:0 8px; color:#0089a7; text-align: center">here</span>
 +
                        to use our software ~ :p</b>
 +
                </font>
 +
            </a>
 +
        </div>
 +
    </div>
 +
 
 
     </div>
 
     </div>
 
     <div style="height:20%;"></div>
 
     <div style="height:20%;"></div>
−
     <div class="footer"">  
+
     <div class="footer ">
−
      <div class="foot-icon">
+
        <div class="foot-icon ">
−
<a href="http://bio.measurex.top" target="blank"><img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png" class="icon"></a>
+
            <a href="http://bio.measurex.top " target="blank "  style="width:66px;">
−
        <a href=""><img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png" class="icon"></a>
+
                <img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png
−
        <a href=""><img src="https://static.igem.org/mediawiki/2017/d/da/Emial.png" class="icon"></a>
+
                " class="icon ">
−
        <a href=""><img src="https://static.igem.org/mediawiki/2017/5/51/Git.png" class="icon"></a>
+
            </a>
−
      </div>
+
            <!--<a href=" ">
 +
                <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon " style="width:66px;">
 +
            </a>-->
 +
            <a href="mailto:591689118@qq.com" target="blank ">
 +
                <img src="https://static.igem.org/mediawiki/2017/b/ba/Hfutdeemail.png" class="icon " style="width:66px;">
 +
            </a>
 +
            <a href="https://github.com/APTX-4869-MDZZ/HFUT-China" target="blank " style="width:66px;">
 +
                <img src="https://static.igem.org/mediawiki/2017/b/bf/Hfutdegit.png " class="icon ">
 +
            </a>
 +
        </div>
 
     </div>
 
     </div>
−
    </center>
+
</center>
−
     
+
 
−
   
+
 
−
    </html>
+
</html>

Latest revision as of 01:09, 2 November 2017

Team:HFUT-China

Improvement


It is a great honor to attend the 2017 iGEM competition, and this is the fourth time that HFUT-Software attend the competition. On the one hand, based on the project from last year’s work, we maintained the advantages of it, and further perfected its user interface and function. On the other hand, to fulfill the variety needs of users and to provide better services, we added a searching section to the original system, in which users can search for detailed information and wiki of past teams, and it is also the highlight of our system this year.

First, let’s see the improvement of the previous system. It will be introduced as two parts—User Interface (UI) and Function.


User Interface

Primarily, we modified the layout of some pages according to the feedbacks from users, in order to offer better services. For instance, we replaced the former login page, which is unmatched with the basic style of the system, with a simpler but suitable one. As for the reorganization of the design page, we not only beatify it, but modified some interactive details. For example, we improved the smoothness of the dragging effect when adding a part to the gene chain, and we appended “delete” at the menu when the right button of the mouse is pressed. Furthermore, the trash can of the design page is also changed satisfy the harmony of the whole page.

What's more, in BioDesigner Coral, all of the funcitons require users to login first. But in BioDesigner Dolphin, except for "Project", the other three allow users to use without login.
    
Before
After
Before
After
Function

Secondly, the function of the former system is further perfected. We updated the parts recommendation function to make it more reasonable. To be specific, suppose we have a gene chain, biobrick A→biobrick B→biobrick C→biobrick D, and if the biobrick C is chosen, we can get recommended biobricks by clicking the corresponding option which lies in the menu of the right button. “Recommend→front” means to recommend a part ahead of biobrick C, “recommend→back” means to recommend a part behind biobrick C, “recommend→middle-front” means to recommend a part in the middle of biobrick B and biobrick C, and “recommend→middle-back” means to recommend a part in the middle of biobrick C and biobrick D.

Moreover, a novel function is added to the system—the wiki information retrieval function. Based on the idea to let participants get familiar with iGEM competition faster, we integrated the team information from 2004 to 2016, and transformed it into the same format. In comparison with the information from the official resources, users can obtain much more convenient services from our system, while the official information is complex and might cause confusion to users. And the wiki of each team is of different style, which is hard for other participants to search for interested information. Thus, it is not only convenience but also great efficiency that our system can bring to users. What’s more, despite the listed searching results, we also present recommended teams which are similar to the wanted team.

Before
After

Having read the introduction of our system, are you now having a strong will to try it? So what are you waiting for?




Click here to use our software ~ :p