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

 
(24 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
             background: #f7f5e6;
 
             background: #f7f5e6;
 
         }
 
         }
         .image-container{
+
 
 +
         .image-container {
 
             display: inline-block;
 
             display: inline-block;
 
         }
 
         }
         .img-disc{
+
 
 +
         .img-disc {
 
             margin-top: 30px;
 
             margin-top: 30px;
 
             margin-bottom: 30px;
 
             margin-bottom: 30px;
 
             font-size: 18px;
 
             font-size: 18px;
 +
        }
 +
 +
        .image {
 +
            box-shadow: 0px 3px 19px #ddd;
 +
            border-radius: 20px;
 
         }
 
         }
 
     </style>
 
     </style>
Line 163: Line 170:
  
 
     <!-- <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:90px;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">
Line 183: Line 190:
  
  
     <div style="margin-top: 90px;font-family: Light;">
+
     <div style="margin-top: 90px;font-family: good;">
 
         <b>
 
         <b>
             <font color="#333" size="6px">
+
             <font color="#6f7c91" size="6px">
 
                 <br>User Interface</font>
 
                 <br>User Interface</font>
 
         </b>
 
         </b>
Line 199: Line 206:
 
             the trash can of the design page is also changed satisfy the harmony of the whole page.
 
             the trash can of the design page is also changed satisfy the harmony of the whole page.
 
             <br>
 
             <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;
 
             <br> &nbsp;&nbsp;&nbsp;&nbsp;
 
         </div>
 
         </div>
 
     </div>
 
     </div>
  
    <div class="image-container">
 
        <img style="width:500px; " src="https://static.igem.org/mediawiki/2017/b/b2/UIOld.png" alt="">
 
        <div class="img-disc">Before</div>         
 
    </div>
 
    <div class="image-container">
 
        <img style="width:500px; margin-left:40px;" src="https://static.igem.org/mediawiki/2017/8/80/UINew.png" alt="">       
 
        <div class="img-disc">After</div>
 
    </div>
 
  
    <div class="image-container">
 
        <img src="https://static.igem.org/mediawiki/2017/c/cc/XianOld.png" alt="">
 
        <div class="img-disc">Before</div>
 
    </div>
 
    <div class="image-container">
 
        <img style="width:500px; margin-left:40px;" src="https://static.igem.org/mediawiki/2017/3/30/XianNew.png" alt="">       
 
        <div class="img-disc">After</div>
 
    </div>
 
  
     <div class="image-container">
+
     <table style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;text-align:center;">
         <img src="https://static.igem.org/mediawiki/2017/8/80/LajitongNew.png" alt="">
+
        <tr style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
         <div class="img-disc">Before</div>
+
<td style="background:#f7f5e6;bordercolor:#f7f5e6;border:3px solid #f7f5e6;cellpadding:0;">
    </div>
+
 
    <div class="image-container">
+
<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"
         <img style="width:500px; margin-left:40px;" src="https://static.igem.org/mediawiki/2017/b/b3/LajitongOld.png" alt="">      
+
            alt="">
         <div class="img-disc">After</div>
+
         <div class="img-disc" style="font-family:good;">Before</div>
    </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: Light;">
+
     <div style="margin-top: 90px;font-family: good;">
 
         <b>
 
         <b>
             <font color="#333" size="6px">Function</font>
+
             <font color="#6f7c91" size="6px">Function</font>
 
         </b>
 
         </b>
 
     </div>
 
     </div>
Line 263: Line 290:
 
     </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="p">
 
         <div class="q" style="line-height: 2.5;">
 
         <div class="q" style="line-height: 2.5;">
Line 273: Line 316:
 
         <div class="q">
 
         <div class="q">
 
             <a href="http://bio.measurex.top" target="blank" style=" text-decoration:none;">
 
             <a href="http://bio.measurex.top" target="blank" style=" text-decoration:none;">
                 <font color="#555555">
+
                 <font color="#555555 ">
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
 
                     <br>
                     <b>Click &nbsp;
+
                     <b>Click
                         <font color="#0089a7" style="background:#f7f5e6;border-radius:6px;border: 2px solid #0089a7;padding:2px;">
+
                         <span style="border-radius:6px;border: 2px solid #0089a7;padding:2px 10px 4px 10px; margin:0 8px; color:#0089a7; text-align: center">here</span>
                            here
+
                        to use our software ~ :p</b>
                        </font> &nbsp;to use our software ~ :p</b>
+
 
                 </font>
 
                 </font>
 
             </a>
 
             </a>
Line 288: Line 330:
 
     </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 ">
+
             <a href="http://bio.measurex.top " target="blank "  style="width:66px;">
                 <img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png " class="icon ">
+
                 <img src="https://static.igem.org/mediawiki/2017/f/fb/Bio.png
            </a>
+
                 " class="icon ">
            <a href=" ">
+
                 <img src="https://static.igem.org/mediawiki/2017/5/51/Fb.png " class="icon ">
+
 
             </a>
 
             </a>
             <a href=" ">
+
             <!--<a href=" ">
                 <img src="https://static.igem.org/mediawiki/2017/d/da/Emial.png " class="icon ">
+
                 <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>
             <a href=" ">
+
             <a href="https://github.com/APTX-4869-MDZZ/HFUT-China" target="blank " style="width:66px;">
                 <img src="https://static.igem.org/mediawiki/2017/5/51/Git.png " class="icon ">
+
                 <img src="https://static.igem.org/mediawiki/2017/b/bf/Hfutdegit.png " class="icon ">
 
             </a>
 
             </a>
 
         </div>
 
         </div>

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?