Team:UCLondon/Templates/Content-Slide

From 2012e.igem.org

(Difference between revisions)
 
(203 intermediate revisions not shown)
Line 20: Line 20:
<a href="#" title="This could be the elevator we pitch to you in" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-2.jpg" width="815" height="365" alt="Slide 2"></a>
<a href="#" title="This could be the elevator we pitch to you in" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-2.jpg" width="815" height="365" alt="Slide 2"></a>
<div class="caption">
<div class="caption">
-
<p>Watch the elevator pitch</p>
 
                                                         <div class="interact" style="display:block;">  
                                                         <div class="interact" style="display:block;">  
<div style="width:90%; margin-right:auto; margin-left:auto;">
<div style="width:90%; margin-right:auto; margin-left:auto;">
-
<div style="width:40%; float:left;"><p 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.</p></div>
 
-
<div style="width:40%; float:right; margin:auto;"><span class="play button">PLAY​</span></div>
 
-
<div style="clear:both; width:99% height:1px;"></div>
 
-
</div>
 
-
                                                         </div>
+
<table border="0" style="background-color: rgba(0,0,0,0); color:white;">
-
</div>
+
<tr>
-
</div>
+
<th>Elevator Pitch<br/></th>
 +
<th>Tutorials<br/></th>
 +
<th>Slide Deck<br/></th>
 +
</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 commercialize it using the open source platform.</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 commercialize it using the open source platform</td>
 +
</tr>
 +
<tr>
 +
<td align="center"><br/><br/><span class="play blue-but">Draft Pitch</span></td>
 +
<td align="center"><br/><br/><span class="playTuts red-but">Tutorials</span></td>
 +
<td align="center"><br/><br/><span class="run-slides green-but">Slideshow</span></td>
 +
</tr>
 +
</table>
 +
 
 +
 
 +
 
 +
</div><!-- width -->
 +
 
 +
                                                         </div><!-- interact-->
 +
</div><!-- caption-->
 +
</div><!-- slide -->
<div class="slide">
<div class="slide">
<a href="#" title="Use and Contribute to CUO" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-3.jpg" width="815" height="365" alt="Slide 3"></a>
<a href="#" title="Use and Contribute to CUO" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-3.jpg" width="815" height="365" alt="Slide 3"></a>
Line 41: 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 62: 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!
 +
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.</p>
 +
 
 +
<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 109: Line 148:
<div id="box-content2" style="width:95%; height:95%; margin:auto;">
<div id="box-content2" style="width:95%; height:95%; margin:auto;">
 +
<div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
 +
</div>
 +
</div>
 +
 +
 +
 +
<div id="shadow4" style="display:none;" >
 +
<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" 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 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 119: 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 174: Line 229:
 +
/* e-pitch box */
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 188: Line 244:
       $(this).children('#box-content2').html(loading);  
       $(this).children('#box-content2').html(loading);  
   });
   });
 +
}
 +
 +
 +
/* 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 */
 +
var started = false;
 +
var openBox4 = function () {
 +
  $('#shadow4').center();
 +
 +
  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() {
 +
    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;
 +
}
 +
 +
var closeBox4 = function() {
 +
 +
  var d = document;
 +
  if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){
 +
      (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen();
 +
      (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen();
 +
      (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen();
 +
  }
 +
 +
 +
  $('#shadow4').toggle('slow', function() {
 +
      //$(this).children('#box-content4').html(loading);
 +
  });
 +
}
 +
 +
 +
 +
/* fullscreen functions */
 +
 +
 +
 +
var fstoggle = function() {
 +
    var d = document;
 +
 +
  if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){
 +
        //$('#shadow4').children('#box-content4').html(loading);
 +
      (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen();
 +
      (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen();
 +
      (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen();
 +
  }
 +
  else {
 +
    var e = document.getElementById('shadow4');
 +
    (e.requestFullScreen == undefined) ? "" : e.requestFullScreen();
 +
    (e.webkitRequestFullScreen == undefined) ? "" : e.webkitRequestFullScreen();
 +
    (e.mozRequestFullScreen == undefined) ? "" : e.mozRequestFullScreen();
 +
 +
   
 +
 +
 
 +
  }
}
}
Line 199: 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);
 +
 +
 +
    /* slide deck box */
 +
  $('body').off('click', '.run-slides', openBox4);
 +
  $('body').on('click', '.run-slides', openBox4);
 +
 +
  $('body').off('click', '#close-box4', closeBox4);
 +
  $('body').on('click', '#close-box4', closeBox4);
 +
 +
  /* fullscreen mode */
 +
  $('body').off('click', '#fullscreen',fstoggle);
 +
  $('body').on('click', '#fullscreen', fstoggle);
 +
 +
 +
  $("#box-content4").click(function(event){
 +
        $('#jmpress').jmpress('next');
 +
      return false;
 +
    })
 +
 
        
        
});
});
 +
 +
 +
Line 230: Line 407:
-
.button {
+
 
 +
#shadow4 {
 +
 +
          background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
 +
          background-image:  -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -moz-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -ms-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -o-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-color:  rgb(255,255,255);
 +
         
 +
 
 +
          box-shadow: 1px 2px 5px 5px #888;
 +
          border-radius: 5px;
 +
 
 +
              position:fixed;
 +
              height: 440px;
 +
              width:720px;
 +
              margin:auto;
 +
              z-index: 999999;
 +
  }
 +
 
 +
 
 +
#shadow4:-webkit-full-screen  { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } 
 +
#shadow4:-moz-full-screen    { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } 
 +
#shadow4:-ms-full-screen      { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } 
 +
#shadow4:-o-full-screen      { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } 
 +
#shadow4: full-screen          { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } 
 +
 
 +
/*
 +
#box-content4:-webkit-full-screen  { width: 100% } 
 +
#box-content4:-moz-full-screen    { width: 100% } 
 +
#box-content4:-ms-full-screen      { width: 100% } 
 +
#box-content4:-o-full-screen      { width: 100% } 
 +
#box-content4: full-screen          { width: 100% }
 +
*/
 +
 
 +
 
 +
.blue-but {
   cursor: pointer;
   cursor: pointer;
   border: 1px solid #0a3c59;
   border: 1px solid #0a3c59;
Line 254: Line 469:
   vertical-align: middle;
   vertical-align: middle;
   }
   }
-
.button:hover {
+
 
-
   border: 1px solid #0a3c59;
+
.red-but {
 +
  cursor: pointer;
 +
  border: 1px solid #800000;
 +
  background: #ff0000;
 +
  background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#ff0000));
 +
  background: -webkit-linear-gradient(top, #ff6666, #ff0000);
 +
  background: -moz-linear-gradient(top, #ff6666, #ff0000);
 +
  background: -ms-linear-gradient(top, #ff6666, #ff0000);
 +
  background: -o-linear-gradient(top, #ff6666, #ff0000);
 +
  background-image: -ms-linear-gradient(top, #ff6666 0%, #ff0000 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: #800000;
 +
  font-size: 14px;
 +
  font-family: helvetica, serif;
 +
  text-decoration: none;
 +
  vertical-align: middle;
 +
  }
 +
 
 +
.green-but {
 +
  cursor: pointer;
 +
   border: 1px solid #008040;
 +
  background: #00b700;
 +
  background: -webkit-gradient(linear, left top, left bottom, from(#80ff00), to(#00b700));
 +
  background: -webkit-linear-gradient(top, #80ff00, #00b700);
 +
  background: -moz-linear-gradient(top, #80ff00, #00b700);
 +
  background: -ms-linear-gradient(top, #80ff00, #00b700);
 +
  background: -o-linear-gradient(top, #80ff00, #00b700);
 +
  background-image: -ms-linear-gradient(top, #80ff00 0%, #00b700 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: #008040;
 +
  font-size: 14px;
 +
  font-family: helvetica, serif;
 +
  text-decoration: none;
 +
  vertical-align: middle;
 +
  }
 +
 
 +
</style>
 +
 
 +
 
 +
<style>
 +
 
 +
.red-but:active {
   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;
-
   }
+
}
-
.button:active {
+
 
 +
 
 +
.green-but:active {
 +
   text-shadow: #1e4158 0 1px 0;
 +
  border: 1px solid #008040;
 +
  background: #80ff00;
 +
  background: -webkit-gradient(linear, left top, left bottom, from(#00b700), to(#80ff00));
 +
  background: -webkit-linear-gradient(top, #00b700, #80ff00);
 +
  background: -moz-linear-gradient(top, #00b700, #80ff00);
 +
  background: -ms-linear-gradient(top, #00b700, #80ff00);
 +
  background: -o-linear-gradient(top, #00b700, #80ff00);
 +
  background-image: -ms-linear-gradient(top, #00b700 0%, #80ff00 100%);
 +
  color: #fff;
 +
}
 +
 
 +
 
 +
.blue-but:active {
   text-shadow: #1e4158 0 1px 0;
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   border: 1px solid #0a3c59;
Line 278: Line 565:
   color: #fff;
   color: #fff;
}​
}​
 +
 +
</style>
 +
 +
<style>
 +
</style>
</style>
</html>
</html>

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"