Team:Dundee/HumanPractice/Comic

From 2013.igem.org

(Difference between revisions)
Line 5: Line 5:
<head>
<head>
-
<title>iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk</title>
+
  <title>iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk</title>
-
<meta name="description" content="A simple motion comic using a jQuery plugin to slide through details of an image.">
+
  <meta name="description" content="A simple motion comic using a jQuery plugin to slide through details of an image.">
-
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
+
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
-
+
 
-
<!-- Including jQuery -->
+
  <!-- Including jQuery -->
-
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
+
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
-
+
 
-
<!-- Optional plugins -->
+
  <!-- Optional plugins -->
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.hotkeys.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.hotkeys.js"></script>
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.easing.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/jquery/optional/jquery.easing.js"></script>  
-
+
 
-
<!-- Including the main plugin file -->
+
  <!-- Including the main plugin file -->
-
<script src="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/jquery.imgplayer.js"></script>
+
  <script src="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/jquery.imgplayer.js"></script>
-
+
 
-
+
 
-
<!-- Config for this demo -->
+
  <!-- Config for this demo -->
-
+
 
-
<script>
+
  <script>
-
+
 
-
$(document).ready(function() {  
+
  $(document).ready(function() {  
-
+
   
-
var windowWidth  = $(window).width,
+
    var windowWidth  = $(window).width,
-
    windowHeight = $(window).height;
+
        windowHeight = $(window).height;
-
+
   
-
$('img#comicpage').imgplayer({
+
    $('img#comicpage').imgplayer({
-
frames: [
+
      frames: [
-
// 10th Frame
+
        // 10th Frame
-
[0,0,1300,1838,{
+
        [0,0,1300,1838,{
-
onStart: function(){  
+
          onStart: function(){  
-
darkStyle();
+
            darkStyle();
-
}
+
          }
-
}]
+
        }]
-
],
+
      ],
-
debug: false,
+
      debug: false,    
-
});
+
    });
-
+
     
-
/* Keyboard Hotkeys */
+
    /* Keyboard Hotkeys */
-
+
   
-
$(document).bind('keyup', 'right', incrementComicCounter());
+
    $(document).bind('keyup', 'right', incrementComicCounter());
-
$(document).bind('keyup', 'left' , decrementComicCounter());
+
    $(document).bind('keyup', 'left' , decrementComicCounter());
-
document.getElementById("comicpage").style.height="100%";
+
    document.getElementById("comicpage").style.height="100%";
-
document.getElementById("comicpage").style.width="100%";
+
    document.getElementById("comicpage").style.width="100%";
-
});
+
  });
-
+
 
-
/* This functions are just examples and used in the callbacks */
+
    /* This functions are just examples and used in the callbacks */
-
+
   
-
function changeBGColor(color) {
+
    function changeBGColor(color) {
-
$('body').stop().animate({
+
      $('body').stop().animate({
-
backgroundColor: color
+
        backgroundColor: color
-
});
+
      });
-
}
+
    }
-
+
   
-
function greenStyle(){
+
    function greenStyle(){
-
changeBGColor('#029B86');  
+
      changeBGColor('#029B86');  
-
$('#wrapper #text').css('color','#73F4E1');
+
      $('#wrapper #text').css('color','#73F4E1');
-
$('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#73F4E1');
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
+
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#73F4E1');
-
}
+
    }
-
+
   
-
function darkStyle(){
+
    function darkStyle(){
-
changeBGColor('#111');
+
      changeBGColor('#111');
-
$('#wrapper #text').css('color','#444');  
+
      $('#wrapper #text').css('color','#444');  
-
$('#wrapper strong').css('color','#666');  
+
      $('#wrapper strong').css('color','#666');  
-
$('#wrapper .imgplayer-frame').css('border-color', '#333');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#333');
-
//$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
+
      //$('#wrapper .imagewalk-navi a.button').css('background-color', '#222');
-
}
+
    }
-
+
 
-
function lightgreyStyle(){
+
    function lightgreyStyle(){
-
changeBGColor('#333');
+
      changeBGColor('#333');
-
$('#wrapper #text').css('color','#666');  
+
      $('#wrapper #text').css('color','#666');  
-
$('#wrapper .imgplayer-frame').css('border-color', '#555');
+
      $('#wrapper .imgplayer-frame').css('border-color', '#555');
-
}
+
    }
-
+
 
-
+
 
-
</script>
+
  </script>
-
     <link href="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/imgplayer.css" rel="stylesheet" type="text/css" media="screen" />
+
     <link href="http://www.kyleharrison.co.uk/igem/Comic/imgplayer/imgplayer.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
<script type="text/javascript">
Line 93: Line 93:
function incrementComicCounter(){
function incrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter>=comicPages){
+
  if(counter>=comicPages){
-
counter=0;
+
    counter=0;
-
} else {
+
  } else {
-
counter++;
+
    counter++;
-
}
+
  }
-
comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
+
  comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
-
document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
-
document.getElementById("comicpage").style.height="100%";
+
      document.getElementById("comicpage").style.height="100%";
-
document.getElementById("comicpage").style.width="100%";
+
      document.getElementById("comicpage").style.width="100%";
-
}
+
  }
function decrementComicCounter(){
function decrementComicCounter(){
-
var comicpage = document.getElementById("comicpage");
+
  var comicpage = document.getElementById("comicpage");
-
if(counter<=0){
+
  if(counter<=0){
-
counter=comicPages;
+
    counter=comicPages;
-
} else {
+
  } else {
-
counter--;
+
    counter--;
-
}
+
  }
-
comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
+
  comicpage.setAttribute("src", "http://www.kyleharrison.co.uk/igem/Comic/demo/page-"+counter+".jpg");
-
document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
+
  document.getElementById("currentPage").innerHTML = "Viewing Page : "+(counter+1);
-
}
+
  }
</script>
</script>
Line 135: Line 135:
-
<div id="wrapper" style="margin-top:-35px;">
+
  <div id="wrapper" style="margin-top:-35px;">
-
+
     
-
<img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
+
    <img id="comicpage" src="http://www.kyleharrison.co.uk/igem/Comic/demo/page-0.jpg" width="1300" height="1838">
-
<center>
+
    <center>
-
    <button class="btn btn-primary btn-large" style="margin-right:15px;margin-top:10px;" onclick="decrementComicCounter()">Previous Page</button>
+
        <button class="btn btn-primary btn-large" style="margin-right:15px;margin-top:10px;" onclick="decrementComicCounter()">Previous Page</button>
-
<button class ="btn btn-primary btn-large" style="margin-top:10px;" onclick="incrementComicCounter()">Next Page</button>
+
      <button class ="btn btn-primary btn-large" style="margin-top:10px;" onclick="incrementComicCounter()">Next Page</button>
-
<div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
+
      <div id="currentPage" style="margin-top:15px;padding-bottom:15px;"> <p><strong>Viewing Page : 1</strong> </p></div>
-
</center>
+
    </center>
-
</div>
+
  </div>
-
<div class="row">
+
    <div class="row">
-
<div class="span12">
+
    <div class="span12">
-
<h2>Download Our Comic Now!</h2>
+
      <h2>Dr Chris Murray<h2>
-
<p> Our comic is available for download, free of charge. <a href="https://static.igem.org/mediawiki/2013/1/13/Dundee_iGEM_2013_Comic.pdf">Download</a> a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.</p>
+
        <strong>- Lecturer in Comic Studies at the University of Dundee </strong>
-
</div>
+
      <p> “Comics are an extremely versatile medium for telling all kinds of stories, and have an appeal that spans all ages. This is demonstrated by Toximop, a comic created by the University of Dundee's iGEM team. The team approached Avril Smart to draw the comic based on their work. With tongue in cheek and a playful style the comic tells the story of how the citizens of Biofilm City combat the evil algae that has contaminated their lake. The University of Dundee's rector, Brian Cox, guest stars as the town major, leading the battle, with the help of a detective straight out of CSI, and Conan the Bacterium, but it falls to a lowly janitor to save the city with his trusty mop, and a strain of engineered <i>E. coli</i> which binds to the toxin in the aglae, rendering it harmless. This simple but engaging story communicates the science in a way that makes it fun and comprehensible to the average reader, and especially younger ones, which is a commendable goal. The iGEM team, and Avril Smart, have done a great job bringing together science and comics in this publication. I hope to see other publications like this emerging through collaborations with Life Sciences and the Humanities. As C.P. Snow argued, these two cultures (pun intended) have much to gain from one another.”</p>
-
</div>
+
      </div>
 +
  </div>
 +
 
 +
  <div class="row">
 +
    <div class="span12">
 +
 
 +
      <h2>Download Our Comic Now!</h2>
 +
      <p> Our comic is available for download, free of charge. <a href="https://static.igem.org/mediawiki/2013/1/13/Dundee_iGEM_2013_Comic.pdf">Download</a> a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.</p>
 +
      </div>
 +
  </div>
       <div id="push"></div>
       <div id="push"></div>

Revision as of 11:33, 4 October 2013

iGEM Dundee 2013 · ToxiMop

Dundee 2013

iGEM Dundee Motion Comic | Demo at KyleHarrison.co.uk

University of Dundee 2013 iGEM team presents...

Viewing Page : 1

Dr Chris Murray

- Lecturer in Comic Studies at the University of Dundee

“Comics are an extremely versatile medium for telling all kinds of stories, and have an appeal that spans all ages. This is demonstrated by Toximop, a comic created by the University of Dundee's iGEM team. The team approached Avril Smart to draw the comic based on their work. With tongue in cheek and a playful style the comic tells the story of how the citizens of Biofilm City combat the evil algae that has contaminated their lake. The University of Dundee's rector, Brian Cox, guest stars as the town major, leading the battle, with the help of a detective straight out of CSI, and Conan the Bacterium, but it falls to a lowly janitor to save the city with his trusty mop, and a strain of engineered E. coli which binds to the toxin in the aglae, rendering it harmless. This simple but engaging story communicates the science in a way that makes it fun and comprehensible to the average reader, and especially younger ones, which is a commendable goal. The iGEM team, and Avril Smart, have done a great job bringing together science and comics in this publication. I hope to see other publications like this emerging through collaborations with Life Sciences and the Humanities. As C.P. Snow argued, these two cultures (pun intended) have much to gain from one another.”

Download Our Comic Now!

Our comic is available for download, free of charge. Download a copy of our PDF down by opening this link and selecting download in Acrobat Reader. Afterwards you can read it on your computer, tablet device, or even mobile phone.

a

Retrieved from "http://2013.igem.org/Team:Dundee/HumanPractice/Comic"