Team:UCLondon/Templates/Content-Slide

From 2012e.igem.org

(Difference between revisions)
 
(132 intermediate revisions not shown)
Line 30: Line 30:
</tr>
</tr>
<tr>
<tr>
-
<td style="font-size:11pt;">In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will commercialise using the open source platform.</td>
+
<td style="font-size:11pt;">In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform.</td>
-
<td style="font-size:11pt;">These tutorials demonstrate the key features of CUO and help new users unleash the awesome power of CUO.</td>
+
<td style="font-size:11pt;">These tutorials demonstrate key features of CUO and help new users unleash its the awesome power.</td>
-
<td style="font-size:11pt;">In the slide deck we describe the unique selling point of CUO and detail our plans on how we will commercialise using the open source platform</td>
+
<td style="font-size:11pt;">In the slide deck we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform</td>
</tr>
</tr>
<tr>
<tr>
-
<td><br/><br/><span class="play blue-but">Pitch</span></td>
+
<td align="center"><br/><br/><span class="play blue-but">Draft Pitch</span></td>
-
<td><br/><br/><span class="play red-but">Tutorials</span></td>
+
<td align="center"><br/><br/><span class="playTuts red-but">Tutorials</span></td>
-
<td><br/><br/><span class="run-slides green-but">Slideshow</span></td>
+
<td align="center"><br/><br/><span class="run-slides green-but">Slideshow</span></td>
</tr>
</tr>
</table>
</table>
Line 58: Line 58:
<p>Download</p>
<p>Download</p>
-
<table width="200 border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4);">
+
<table width="200" border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4); margin-left:10px; padding-left:20px; border 1px solid;">
<tbody>
<tbody>
<tr>
<tr>
Line 79: Line 79:
             Operation Panel improved<br>
             Operation Panel improved<br>
             Tutorials added<br>
             Tutorials added<br>
 +
</p>
 +
</td>
</tr>
</tr>
</tbody>
</tbody>
</table>
</table>
-
<table width="200 border="0" align="left"  style="font-size:10px; background-color:rgba(249, 249, 249, 0.4);">
+
<!--<img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" />-->
 +
 
 +
 
 +
<table width="550" border="0" align="right"  style="font-size:10px; background-color:rgba(249, 249, 249, 0.9); margin-right:43px; position:relative; top:-23px;">
<tbody>
<tbody>
<tr>
<tr>
-
<td>
+
  <td align="center" style="line-height:0.8pt;">
-
<p>
+
            <h3>release notes</h3>
-
            <form><input type="button" value="Beta 0.91" onClick="window.location.href='http://codonusageoptimizer.org/downloads/CUObeta0.91.zip'">
+
    </td>
-
            </form><br>
+
-
            Last Modified: 04.08.2012<br>
+
-
          </p>
+
-
</td>
+
</tr>
</tr>
 +
<tr>
<tr>
-
<td>
+
  <td>
-
<p>
+
  <div style="height:203px; overflow-y:scroll; width:100%;">
-
            Updater added<br>
+
    <div style="float:left"><img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" /></div>
-
            Processor added<br>
+
    <div style="float:left;"><div style="color:green;">CUO</div> beta0.92 released!</div>
-
            MultiFasta(.mfa) added<br>
+
    <div style="clear:both; height:1px;"></div>
-
            Operation panel improved<br>
+
          <p>I am delighted to announce the release of CUO beta0.92!
-
            <br>
+
This release humbly marks the new era of CUO. The team had grown and sprouted like never before. With the recent recruitment of four professional bioinformaticians and a web developer into the dev team, the program is entering an accelerated development phase that was previously impossible. We even have a public engagement officer on board now to make the software more interactive from all aspects (check out our social networks :D ).
-
            <br>
+
Many thanks again to all the people supporting, building and using CUO. The result presented here is an accumulation of efforts and help from everyone.</p>
-
            <br>
+
 
 +
<h3>Featuring:</h3>
 +
<ul style="list-style-type:circle !important; list-style-image: none !important">
 +
<li>Kasuza Table parser in Processor, A new tool to parse and save tables from Kasuza Database at breeze.</li>
 +
<li>Edit Table in Processor, Open up and edit any table you like, even make your own.</li>
 +
<li>View Table in Processor, View multiple tables within split seconds.</li>
 +
<li>Translator, New tool to translate, transcribe and get complementary strain of a sequence, no more alt+tab.</li>
 +
<li>Graph in Motpimizer, CAI and CPI in Moptimizer now comes in graph forms, call it with the new little white button beside the overall CAI and CPI.</li>
 +
<li>Improved Operation Panel, Project indea is integrated, we can now save/open a canvas, drag and drop fragments from browserpanel to the canvas.</li>
 +
<li>Video Tutorials, Access the crash courses from Help in menubar or visit our youtube channel.</li>
 +
<li>Restructured folders hierachy, The program folders is now even tidier and visually smoothing to navigate.</li>
 +
<li>Launch of facebook page, twitter, youtube channel.</li>
 +
</ul>
 +
 
 +
 
 +
  </div>
 +
         
 +
  </td>
</tr>
</tr>
</tbody>
</tbody>
Line 138: Line 157:
<div id="close-box4" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:left;"></div>
<div id="close-box4" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:left;"></div>
-
<div id="fullscreen" style="background:url(https://dl.dropbox.com/u/3703109/igeme/fullscreenButton.png) no-repeat 0 0; height:35px; width:35px;  cursor:pointer;  float:right;"></div>
+
<div id="fullscreen" class="tooltip" style="background:url(https://dl.dropbox.com/u/3703109/igeme/fullscreenButton.png) no-repeat 0 0; height:35px; width:35px;  cursor:pointer;  float:right;" udit="fullscreen"></div>
<div style="clear:both; width:99% height:1px;"></div>
<div style="clear:both; width:99% height:1px;"></div>
-
<div id="box-content4" style="width:95%; height:95%; margin:auto;">
+
<div id="box-content4" style="width:95%; height:95%; margin:auto; overflow:hidden;">
 +
 
<div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
<div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
</div>
</div>
Line 153: Line 173:
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script>
 +
<script type="text/javascript" src="https://dl.dropbox.com/u/3703109/igeme/js/jmpress.js"></script>
<script type="text/javascript">
<script type="text/javascript">
Line 211: Line 232:
var openBox2 = function () {  
var openBox2 = function () {  
   $('#shadow2').center();
   $('#shadow2').center();
-
   var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/3yHRsiGN1rY" frameborder="0" allowfullscreen></iframe>';
+
   var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/f9jEuo7HSvA" frameborder="0" allowfullscreen></iframe>';
$('#shadow2').toggle('slow', function() {
$('#shadow2').toggle('slow', function() {
Line 225: Line 246:
}
}
 +
 +
/* TUTS */
 +
var openBox3 = function () {
 +
  $('#shadow2').center();
 +
  var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/4xG939EeKns?list=PLtGCURRfxampHgpkl-tUkzSeZhItvY3_u&amp;hl=en_US" frameborder="0" allowfullscreen></iframe>';
 +
 +
$('#shadow2').toggle('slow', function() {
 +
      $(this).children('#box-content2').html(input);
 +
    });
 +
return false;
 +
}
-
/* slide show box */
+
/* SLIDE show box */
 +
var started = false;
var openBox4 = function () {  
var openBox4 = function () {  
   $('#shadow4').center();
   $('#shadow4').center();
-
   var input = '<div id="impress">Coming Soon</div><script type="text/javascript" src="http://1stwebdesigner.com/demos/Visualization/js/impress.js"></script>';
+
  if (! started){
 +
 
 +
   var slide = document.createElement("div");
 +
  slide.setAttribute("id", "jmpress");
 +
  slide.setAttribute("style", "width: 100%; height:100%; margin:auto;");
 +
 
 +
  $(slide).append('</html>{{:Team:UCLondon/content/slide1}}<html>');
 +
 +
 
 +
  var input = slide;
 +
 
 +
}
$('#shadow4').toggle('slow', function() {
$('#shadow4').toggle('slow', function() {
-
      $(this).children('#box-content4').html(input);  
+
    if (! started){
 +
    $(this).children('#box-content4').html(input);  
 +
        $('#jmpress').jmpress( {
 +
           
 +
              fullscreen : false,
 +
              viewPort: {
 +
height: 800
 +
,width: 800
 +
,maxScale: 1 // do not scale up
 +
}
 +
              //,hash: { use: false }
 +
 
 +
        });
 +
        started = true;
 +
    }
 +
    $('#jmpress').focus();
 +
 
 +
 
     });
     });
return false;
return false;
Line 250: Line 311:
   $('#shadow4').toggle('slow', function() {
   $('#shadow4').toggle('slow', function() {
-
       $(this).children('#box-content4').html(loading);  
+
       //$(this).children('#box-content4').html(loading);  
   });
   });
}
}
Line 290: Line 351:
   $('body').off('click', '#close-box2', closeBox2);
   $('body').off('click', '#close-box2', closeBox2);
   $('body').on('click', '#close-box2', closeBox2);
   $('body').on('click', '#close-box2', closeBox2);
 +
 +
  $('body').off('click', '.playTuts', openBox3);
 +
  $('body').on('click', '.playTuts', openBox3);
Line 302: Line 366:
   $('body').off('click', '#fullscreen',fstoggle);
   $('body').off('click', '#fullscreen',fstoggle);
   $('body').on('click', '#fullscreen', fstoggle);
   $('body').on('click', '#fullscreen', fstoggle);
 +
 +
 +
  $("#box-content4").click(function(event){
 +
        $('#jmpress').jmpress('next');
 +
      return false;
 +
    })
    
    
        
        
Line 402: Line 472:
.red-but {
.red-but {
   cursor: pointer;
   cursor: pointer;
-
   border: 1px solid #0a3c59;
+
   border: 1px solid #800000;
-
   background: #3e779d;
+
   background: #ff0000;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
   background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#ff0000));
-
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-linear-gradient(top, #ff6666, #ff0000);
-
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -moz-linear-gradient(top, #ff6666, #ff0000);
-
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -ms-linear-gradient(top, #ff6666, #ff0000);
-
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -o-linear-gradient(top, #ff6666, #ff0000);
-
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
   background-image: -ms-linear-gradient(top, #ff6666 0%, #ff0000 100%);
   padding: 10.5px 21px;
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -webkit-border-radius: 6px;
Line 418: Line 488:
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
-
   color: #06426c;
+
   color: #800000;
   font-size: 14px;
   font-size: 14px;
   font-family: helvetica, serif;
   font-family: helvetica, serif;
Line 427: Line 497:
.green-but {
.green-but {
   cursor: pointer;
   cursor: pointer;
-
   border: 1px solid #0a3c59;
+
   border: 1px solid #008040;
-
   background: #3e779d;
+
   background: #00b700;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
   background: -webkit-gradient(linear, left top, left bottom, from(#80ff00), to(#00b700));
-
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-linear-gradient(top, #80ff00, #00b700);
-
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -moz-linear-gradient(top, #80ff00, #00b700);
-
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -ms-linear-gradient(top, #80ff00, #00b700);
-
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -o-linear-gradient(top, #80ff00, #00b700);
-
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
   background-image: -ms-linear-gradient(top, #80ff00 0%, #00b700 100%);
   padding: 10.5px 21px;
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -webkit-border-radius: 6px;
Line 443: Line 513:
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
-
   color: #06426c;
+
   color: #008040;
   font-size: 14px;
   font-size: 14px;
   font-family: helvetica, serif;
   font-family: helvetica, serif;
Line 450: Line 520:
   }
   }
 +
</style>
 +
<style>
-
.blue-but:hover {
+
.red-but:active {
-
  border: 1px solid #0a3c59;
+
   text-shadow: #1e4158 0 1px 0;
   text-shadow: #1e4158 0 1px 0;
-
   background: #3e779d;
+
  border: 1px solid #800000;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
   background: #ff6666;
-
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff6666));
-
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-linear-gradient(top, #ff0000, #ff6666);
-
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -moz-linear-gradient(top, #ff0000, #ff6666);
-
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -ms-linear-gradient(top, #ff0000, #ff6666);
-
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
   background: -o-linear-gradient(top, #ff0000, #ff6666);
 +
   background-image: -ms-linear-gradient(top, #ff0000 0%, #ff6666 100%);
   color: #fff;
   color: #fff;
-
  }
+
}
-
.blue-but:active {
+
-
  text-shadow: #1e4158 0 1px 0;
+
-
  border: 1px solid #0a3c59;
+
-
  background: #65a9d7;
+
-
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
+
-
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
+
-
  color: #fff;
+
-
}​
+
-
 
+
.green-but:active {
-
 
+
-
 
+
-
 
+
-
.red-but:hover {
+
-
  border: 1px solid #0a3c59;
+
   text-shadow: #1e4158 0 1px 0;
   text-shadow: #1e4158 0 1px 0;
-
   background: #3e779d;
+
  border: 1px solid #008040;
-
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
   background: #80ff00;
-
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-gradient(linear, left top, left bottom, from(#00b700), to(#80ff00));
-
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -webkit-linear-gradient(top, #00b700, #80ff00);
-
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -moz-linear-gradient(top, #00b700, #80ff00);
-
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
   background: -ms-linear-gradient(top, #00b700, #80ff00);
-
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
   background: -o-linear-gradient(top, #00b700, #80ff00);
 +
   background-image: -ms-linear-gradient(top, #00b700 0%, #80ff00 100%);
   color: #fff;
   color: #fff;
-
  }
+
}
-
.red-but:active {
+
-
  text-shadow: #1e4158 0 1px 0;
+
-
  border: 1px solid #0a3c59;
+
-
  background: #65a9d7;
+
-
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
+
-
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
+
-
  background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
+
-
  color: #fff;
+
-
}​
+
-
 
+
.blue-but:active {
-
 
+
-
 
+
-
.green-but {
+
-
  cursor: pointer;
+
-
  border: 1px solid #0a3c59;
+
-
  background: #3e779d;
+
-
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
-
  background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
-
  padding: 10.5px 21px;
+
-
  -webkit-border-radius: 6px;
+
-
  -moz-border-radius: 6px;
+
-
  border-radius: 6px;
+
-
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
+
-
  -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
+
-
  box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0;
+
-
  text-shadow: #7ea4bd 0 1px 0;
+
-
  color: #06426c;
+
-
  font-size: 14px;
+
-
  font-family: helvetica, serif;
+
-
  text-decoration: none;
+
-
  vertical-align: middle;
+
-
  }
+
-
.green-but:hover {
+
-
  border: 1px solid #0a3c59;
+
-
  text-shadow: #1e4158 0 1px 0;
+
-
  background: #3e779d;
+
-
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
+
-
  background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -moz-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -ms-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background: -o-linear-gradient(top, #65a9d7, #3e779d);
+
-
  background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
+
-
  color: #fff;
+
-
  }
+
-
.green-but:active {
+
   text-shadow: #1e4158 0 1px 0;
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   border: 1px solid #0a3c59;
Line 561: Line 566:
}​
}​
 +
</style>
 +
 +
<style>

Latest revision as of 15:47, 20 January 2013

Slide 1

Advancing Protein Expression

Codon Usage Optimizer (CUO) is a GUI-based multiplatform software written in Java. The main function of the software is to optimize genes to be transformed into the Chlamydomonas reinhardtii chloroplast genome using an original set of algorithms for calculation, data processing and automated reasoning. Furthermore, it can be used as an electronic drawboard for gene sequence analysis and design. While the software focuses on the C.reinhardtii genome, it can also be used to optimize genes into other hosts as well. Since E.coli and S.cerevisiae are popular candidates of biotechnological exploitation, they will be CUO's next shift of focus in its development.

Slide 2
Elevator Pitch
 Tutorials
 Slide Deck
In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform. These tutorials demonstrate key features of CUO and help new users unleash its the awesome power. In the slide deck we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform


Draft Pitch

Tutorials

Slideshow
Slide 3

Get the latest version of CUO!

Download


Last Modified: 14.10.2012

Kasuza Table parser added
Edit Table function added
View Table function added
Translator added
Plot graph function in Moptimzier
Operation Panel improved
Tutorials added

release notes
CUO
beta0.92 released!

I am delighted to announce the release of CUO beta0.92! This release humbly marks the new era of CUO. The team had grown and sprouted like never before. With the recent recruitment of four professional bioinformaticians and a web developer into the dev team, the program is entering an accelerated development phase that was previously impossible. We even have a public engagement officer on board now to make the software more interactive from all aspects (check out our social networks :D ). Many thanks again to all the people supporting, building and using CUO. The result presented here is an accumulation of efforts and help from everyone.

Featuring:

  • Kasuza Table parser in Processor, A new tool to parse and save tables from Kasuza Database at breeze.
  • Edit Table in Processor, Open up and edit any table you like, even make your own.
  • View Table in Processor, View multiple tables within split seconds.
  • Translator, New tool to translate, transcribe and get complementary strain of a sequence, no more alt+tab.
  • Graph in Motpimizer, CAI and CPI in Moptimizer now comes in graph forms, call it with the new little white button beside the overall CAI and CPI.
  • Improved Operation Panel, Project indea is integrated, we can now save/open a canvas, drag and drop fragments from browserpanel to the canvas.
  • Video Tutorials, Access the crash courses from Help in menubar or visit our youtube channel.
  • Restructured folders hierachy, The program folders is now even tidier and visually smoothing to navigate.
  • Launch of facebook page, twitter, youtube channel.
Example Frame

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/Content-Slide"