Team:UCLondon/Templates/Content-Slide

From 2012e.igem.org

(Difference between revisions)
 
(326 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
+
<link rel="stylesheet" href="http://dl.dropbox.com/u/3703109/igeme/global.css">
-
  <link rel="stylesheet" href="http://dl.dropbox.com/u/3703109/igeme/global.css">
+
-
  <style type="text/css">
+
-
  </style>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
+
-
  <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.jquery.js"></script>
+
-
  <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script>
+
-
  <script type="text/javascript">
+
-
+
-
$(function(){
+
-
$('#slides').slides({
+
-
preload: true,
+
-
preloadImage: 'img/loading.gif',
+
-
play: 5000,
+
-
pause: 2500,
+
-
hoverPause: true,
+
-
animationStart: function(current){
+
-
$('.caption').animate({
+
-
bottom:-35
+
-
},100);
+
-
if (window.console && console.log) {
+
-
// example return of current slide number
+
-
console.log('animationStart on slide: ', current);
+
-
};
+
-
},
+
-
animationComplete: function(current){
+
-
$('.caption').animate({
+
-
bottom:0
+
-
},200);
+
-
if (window.console && console.log) {
+
-
// example return of current slide number
+
-
console.log('animationComplete on slide: ', current);
+
-
};
+
-
},
+
-
slidesLoaded: function() {
+
-
$('.caption').animate({
+
-
bottom:0
+
-
},200);
+
-
}
+
-
});
+
-
});
+
-
 
+
-
 
+
-
  </script>
+
<div id="container">
<div id="container">
<div id="example">
<div id="example">
-
<img src="http://dl.dropbox.com/u/3703109/igeme/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
 
<div id="slides">
<div id="slides">
<div class="slides_container">
<div class="slides_container">
<div class="slide">
<div class="slide">
-
<a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
+
<a href="#" title="Introducing The Codon Usage Optimizer" target="_blank"><img src="http://dl.dropbox.com/u/3703109/igeme/slide-1.jpg" width="815" height="365" alt="Slide 1"></a>
<div class="caption" style="bottom:0">
<div class="caption" style="bottom:0">
-
<p>Happy Bokeh Thursday!</p>
+
<p>Advancing Protein Expression</p>
 +
<div class="interact" style="display:block;">
 +
 
 +
<p style="font-size:11pt; width:90%; margin:auto;">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 <em>Chlamydomonas reinhardtii</em> 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 <em>C.reinhardtii genome</em>, it can also be used to optimize genes into other hosts as well. Since <em>E.coli</em> and <em>S.cerevisiae</em> are popular candidates of biotechnological exploitation, they will be CUO's next shift of focus in its development.</p>
 +
                                                      </div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide">
-
<a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="570" height="270" 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>Taxi</p>
+
                                                        <div class="interact" style="display:block;">  
-
</div>
+
<div style="width:90%; margin-right:auto; margin-left:auto;">
-
</div>
+
 
 +
<table border="0" style="background-color: rgba(0,0,0,0); color:white;">
 +
<tr>
 +
<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="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="570" height="270" 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>
<div class="caption">
<div class="caption">
-
<p>Happy Bokeh raining Day</p>
+
<p>Get the latest version of CUO!</p>
-
</div>
+
 
-
</div>
+
<!--interact start-->
-
<div class="slide">
+
<div class="interact" style="display:block;">
-
<a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"></a>
+
<div >
-
<div class="caption">
+
<p>Download</p>
-
<p>We Eat Light</p>
+
 
-
</div>
+
<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;">
-
</div>
+
<tbody>
-
<div class="slide">
+
<tr>
-
<a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="&ldquo;I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.&rdquo; | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"></a>
+
<td>
-
<div class="caption">
+
<p>
-
<p>&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;</p>
+
            <form><input type="button" value="Beta 0.92" onClick="window.location.href='http://codonusageoptimizer.org/downloads/CUObeta0.92.zip'">
-
</div>
+
            </form><br>
-
</div>
+
            Last Modified: 14.10.2012<br>
-
<div class="slide">
+
          </p>
-
<a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"></a>
+
</td>
-
<div class="caption">
+
</tr>
-
<p>twelve.inch</p>
+
<tr>
-
</div>
+
<td>
-
</div>
+
<p>
-
<div class="slide">
+
            Kasuza Table parser added<br>
-
<a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"></a>
+
            Edit Table function added<br>
-
<div class="caption">
+
            View Table function added<br>
-
<p>Save my love for loneliness</p>
+
            Translator added<br>
 +
            Plot graph function in Moptimzier<br>
 +
            Operation Panel improved<br>
 +
            Tutorials added<br>
 +
</p>
 +
</td>
 +
</tr>
 +
</tbody>
 +
</table>
 +
 +
<!--<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>
 +
<tr>
 +
  <td align="center" style="line-height:0.8pt;">
 +
            <h3>release notes</h3>
 +
    </td>
 +
</tr>
 +
 
 +
<tr>
 +
  <td>
 +
  <div style="height:203px; overflow-y:scroll; width:100%;">
 +
    <div style="float:left"><img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" /></div>
 +
    <div style="float:left;"><div style="color:green;">CUO</div> beta0.92 released!</div>
 +
    <div style="clear:both; height:1px;"></div>
 +
          <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>
 +
</tbody>
 +
</table>
 +
 
 +
</div>
 +
</div> <!-- end interact-->
</div>
</div>
</div>
</div>
Line 102: Line 136:
</div>
</div>
<img src="http://dl.dropbox.com/u/3703109/igeme/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
<img src="http://dl.dropbox.com/u/3703109/igeme/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
-
</div>
 
-
<div id="footer">
 
-
<p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
 
-
<p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
 
-
<p>&copy; 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
 
</div>
</div>
</div>
</div>
 +
 +
 +
 +
 +
 +
<div id="shadow2" style="display:none;" >
 +
<div id="close-box2" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div>
 +
 +
<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>
 +
</div>
 +
 +
 +
 +
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.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="https://dl.dropbox.com/u/3703109/igeme/js/jmpress.js"></script>
 +
 +
<script type="text/javascript">
 +
 +
 +
$('.slide a').click(function() {
 +
/*
 +
    var hiddenDiv = $(this).parent().children('.caption').children('.interact');
 +
        var dispVal = hiddenDiv.css('display');
 +
 +
if (dispVal == 'none'){
 +
 +
$(this).parent().children('.caption').animate({
 +
height: 300
 +
  }, 500, function() {
 +
// Animation complete.
 +
  });
 +
 +
hiddenDiv.css('display', 'block');
 +
 +
} else {
 +
$(this).parent().children('.caption').animate({
 +
height: 30
 +
  }, 500, function() {
 +
// Animation complete.
 +
  });
 +
 +
 +
 +
hiddenDiv.css('display', 'none');
 +
 +
}
 +
 +
*/
 +
    return false;
 +
    });
 +
 +
 +
var loading = "";
 +
 +
 +
jQuery.fn.center = function () {
 +
  var w = $(window);
 +
  var b = $('body');
 +
  var mt = w.scrollTop() + (w.height() > b.height()) ? 0: (  -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2  );
 +
  this.css({
 +
    'position':'fixed',
 +
    'left':  '50%',
 +
    'margin-left': 0 - (this.width() / 2),
 +
    'top': '50%',
 +
    'margin-top':  (0 - (this.height() / 2))
 +
  });
 +
  return this;
 +
}
 +
 +
 +
/* e-pitch box */
 +
var openBox2 = function () {
 +
  $('#shadow2').center();
 +
  var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/f9jEuo7HSvA" frameborder="0" allowfullscreen></iframe>';
 +
 +
$('#shadow2').toggle('slow', function() {
 +
      $(this).children('#box-content2').html(input);
 +
    });
 +
return false;
 +
}
 +
 +
var closeBox2 = function() {
 +
  $('#shadow2').toggle('slow', function() {
 +
      $(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();
 +
 +
   
 +
 +
 
 +
  }
 +
}
 +
 +
 +
$(document).ready(function(event) {
 +
  loading = $('#load2').parent().html();
 +
 
 +
  $('body').off('click', '.play', openBox2);
 +
  $('body').on('click', '.play', openBox2);
 +
 +
  $('body').off('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;
 +
    })
 +
 
 +
     
 +
});
 +
 +
 +
 +
 +
 +
   
 +
</script>
 +
 +
<style>
 +
 +
#shadow2 {
 +
 +
          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: 380px;
 +
              width:600px;
 +
              margin:auto;
 +
              z-index: 999999;
 +
  }
 +
 +
 +
 +
#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;
 +
  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;
 +
  }
 +
 +
.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;
 +
  border: 1px solid #800000;
 +
  background: #ff6666;
 +
  background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff6666));
 +
  background: -webkit-linear-gradient(top, #ff0000, #ff6666);
 +
  background: -moz-linear-gradient(top, #ff0000, #ff6666);
 +
  background: -ms-linear-gradient(top, #ff0000, #ff6666);
 +
  background: -o-linear-gradient(top, #ff0000, #ff6666);
 +
  background-image: -ms-linear-gradient(top, #ff0000 0%, #ff6666 100%);
 +
  color: #fff;
 +
}
 +
 +
 +
.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;
 +
  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;
 +
}​
 +
 +
</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"