Difference between revisions of "Team:CHINA CD UESTC/hp education"

Line 8: Line 8:
 
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
 
</head>
 
</head>
−
<style type="text/css">
+
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>  
 
/*************************************************
 
/*************************************************
 
whole right section
 
whole right section
Line 77: Line 77:
  
 
/*****************************/
 
/*****************************/
 +
/********gallery2************/
  
 +
#slideshow{
 +
background-color:#F5F5F5;
 +
border:1px solid #FFFFFF;
 +
height:340px;
 +
margin:150px auto 0;
 +
position:relative;
 +
width:640px;
 +
 +
-moz-box-shadow:0 0 22px #111;
 +
-webkit-box-shadow:0 0 22px #111;
 +
box-shadow:0 0 22px #111;
 +
}
 +
 +
#slideshow ul{
 +
height:320px;
 +
left:10px;
 +
list-style:none outside none;
 +
overflow:hidden;
 +
position:absolute;
 +
top:10px;
 +
width:620px;
 +
}
 +
 +
#slideshow li{
 +
position:absolute;
 +
display:none;
 +
z-index:10;
 +
}
 +
 +
#slideshow li:first-child{
 +
display:block;
 +
z-index:1000;
 +
}
 +
 +
#slideshow .slideActive{
 +
z-index:1000;
 +
}
 +
 +
#slideshow canvas{
 +
display:none;
 +
position:absolute;
 +
z-index:100;
 +
}
 +
 +
#slideshow .arrow{
 +
height:86px;
 +
width:60px;
 +
position:absolute;
 +
background:url('img/arrows.png') no-repeat;
 +
top:50%;
 +
margin-top:-43px;
 +
cursor:pointer;
 +
z-index:5000;
 +
}
 +
 +
#slideshow .previous{ background-position:left top;left:0;}
 +
#slideshow .previous:hover{ background-position:left bottom;}
 +
 +
#slideshow .next{ background-position:right top;right:0;}
 +
#slideshow .next:hover{ background-position:right bottom;}
 +
 +
 +
/* The following styles are only used for the styling of the demo page */
 +
 +
p.tzine{
 +
text-align:center;
 +
font-size:12px;
 +
margin:50px;
 +
}
 +
 +
p.credit{
 +
text-align:center;
 +
color:#888;
 +
font-size:10px;
 +
}
 +
 +
p.credit a,
 +
p.credit a:visited{
 +
color:#ccc;
 +
border-bottom-color:#aaa;
 +
}
 +
 +
p.credit a:hover{
 +
border-bottom-color:transparent;
 +
}
 +
 +
a, a:visited {
 +
text-decoration:none;
 +
outline:none;
 +
border-bottom:1px dotted #97cae6;
 +
color:#97cae6;
 +
}
 +
 +
a:hover{
 +
border-bottom:1px dashed transparent;
 +
}
 +
 +
.clear{
 +
clear:both;
 +
}
 +
/***********************/
 
</style>
 
</style>
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
Line 249: Line 351:
 
}
 
}
 
init();
 
init();
 +
</script>
 +
<script>
 +
$(window).load(function(){
 +
 +
// We are listening to the window.load event, so we can be sure
 +
// that the images in the slideshow are loaded properly.
 +
 +
 +
// Testing wether the current browser supports the canvas element:
 +
var supportCanvas = 'getContext' in document.createElement('canvas');
 +
 +
// The canvas manipulations of the images are CPU intensive,
 +
// this is why we are using setTimeout to make them asynchronous
 +
// and improve the responsiveness of the page.
 +
 +
var slides = $('#slideshow li'),
 +
current = 0,
 +
slideshow = {width:0,height:0};
 +
 +
setTimeout(function(){
 +
 +
window.console && window.console.time && console.time('Generated In');
 +
 +
if(supportCanvas){
 +
$('#slideshow img').each(function(){
 +
 +
if(!slideshow.width){
 +
// Taking the dimensions of the first image:
 +
slideshow.width = this.width;
 +
slideshow.height = this.height;
 +
}
 +
 +
// Rendering the modified versions of the images:
 +
createCanvasOverlay(this);
 +
});
 +
}
 +
 +
window.console && window.console.timeEnd && console.timeEnd('Generated In');
 +
 +
$('#slideshow .arrow').click(function(){
 +
var li = slides.eq(current),
 +
canvas = li.find('canvas'),
 +
nextIndex = 0;
 +
 +
// Depending on whether this is the next or previous
 +
// arrow, calculate the index of the next slide accordingly.
 +
 +
if($(this).hasClass('next')){
 +
nextIndex = current >= slides.length-1 ? 0 : current+1;
 +
}
 +
else {
 +
nextIndex = current <= 0 ? slides.length-1 : current-1;
 +
}
 +
 +
var next = slides.eq(nextIndex);
 +
 +
if(supportCanvas){
 +
 +
// This browser supports canvas, fade it into view:
 +
 +
canvas.fadeIn(function(){
 +
 +
// Show the next slide below the current one:
 +
next.show();
 +
current = nextIndex;
 +
 +
// Fade the current slide out of view:
 +
li.fadeOut(function(){
 +
li.removeClass('slideActive');
 +
canvas.hide();
 +
next.addClass('slideActive');
 +
});
 +
});
 +
}
 +
else {
 +
 +
// This browser does not support canvas.
 +
// Use the plain version of the slideshow.
 +
 +
current=nextIndex;
 +
next.addClass('slideActive').show();
 +
li.removeClass('slideActive').hide();
 +
}
 +
});
 +
 +
},100);
 +
 +
// This function takes an image and renders
 +
// a version of it similar to the Overlay blending
 +
// mode in Photoshop.
 +
 +
function createCanvasOverlay(image){
 +
 +
var canvas = document.createElement('canvas'),
 +
canvasContext = canvas.getContext("2d");
 +
 +
// Make it the same size as the image
 +
canvas.width = slideshow.width;
 +
canvas.height = slideshow.height;
 +
 +
// Drawing the default version of the image on the canvas:
 +
canvasContext.drawImage(image,0,0);
 +
 +
 +
// Taking the image data and storing it in the imageData array:
 +
var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height),
 +
data = imageData.data;
 +
 +
// Loop through all the pixels in the imageData array, and modify
 +
// the red, green, and blue color values.
 +
 +
for(var i = 0,z=data.length;i<z;i++){
 +
 +
// The values for red, green and blue are consecutive elements
 +
// in the imageData array. We modify the three of them at once:
 +
 +
data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
 +
 +
// After the RGB elements is the alpha value, but we leave it the same.
 +
++i;
 +
}
 +
 +
// Putting the modified imageData back to the canvas.
 +
canvasContext.putImageData(imageData,0,0);
 +
 +
// Inserting the canvas in the DOM, before the image:
 +
image.parentNode.insertBefore(canvas,image);
 +
}
 +
 +
});
 +
 
</script>
 
</script>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 07:58, 21 August 2015

<!DOCTYPE html> /************************************************* whole right section ***********************************************/ #RightSection { position: fixed; left: 260px; top: 0; right: 0; height:100%; background:#F0F0F0; background-image:url("https://static.igem.org/mediawiki/2015/3/34/CHINA_CD_UESTC_HPbg.jpg"); overflow-y: scroll; background-repeat: repeat; background-size: 180px; transition: all 200ms ease-out; transform: translate3d(0, 0, 0); z-index:1; } /***************gallery***/ #demo1{ position: relative; margin: 50px auto; width: 700px; border:1px solid #ccc; } #demo1 .img_list{overflow: hidden; position: relative; height: 260px;} /* 根据图片的张数来设定ul的宽度 */ .img_list ul{ width: 3500px; position: absolute; height: 260px; left: 0px;} .img_list li{ float: left; width: 700px;} .img_list img{ margin: 1px; width: 698px; height: 258px;} /* 图片对应的按钮样式 */ .btn_list ul{ position: absolute; right: 20px; bottom: 35px; } .btn_list li{ float: left; margin-right: 10px; color: #999; border: 1px solid #ccc; } .btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;} .btn_list li img{ width: 30px; height: 15px; display: block;} /* 图片对应的说明*/ .img_intro{ position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; } .img_intro .img_intro_bg,.img_intro .text{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .img_intro .img_intro_bg{ background: #000; opacity: .3; z-index: 999; } .img_intro .text{ padding: 5px 10px; z-index: 1000; color: #999; } /*****************************/ /********gallery2************/ #slideshow{ background-color:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box-shadow:0 0 22px #111; } #slideshow ul{ height:320px; left:10px; list-style:none outside none; overflow:hidden; position:absolute; top:10px; width:620px; } #slideshow li{ position:absolute; display:none; z-index:10; } #slideshow li:first-child{ display:block; z-index:1000; } #slideshow .slideActive{ z-index:1000; } #slideshow canvas{ display:none; position:absolute; z-index:100; } #slideshow .arrow{ height:86px; width:60px; position:absolute; background:url('img/arrows.png') no-repeat; top:50%; margin-top:-43px; cursor:pointer; z-index:5000; } #slideshow .previous{ background-position:left top;left:0;} #slideshow .previous:hover{ background-position:left bottom;} #slideshow .next{ background-position:right top;right:0;} #slideshow .next:hover{ background-position:right bottom;} /* The following styles are only used for the styling of the demo page */ p.tzine{ text-align:center; font-size:12px; margin:50px; } p.credit{ text-align:center; color:#888; font-size:10px; } p.credit a, p.credit a:visited{ color:#ccc; border-bottom-color:#aaa; } p.credit a:hover{ border-bottom-color:transparent; } a, a:visited { text-decoration:none; outline:none; border-bottom:1px dotted #97cae6; color:#97cae6; } a:hover{ border-bottom:1px dashed transparent; } .clear{ clear:both; } /***********************/

EDUCATION

  We conducted interviews with the professor of the Hong Kong University Medicine School. Professor Zhaoyi Hu gave us many precious advice from the perspective of the safety.In the end, our members also get the chance to learn the general processes of sample treatment in medical research as well as separation and preservation methods of some bacteria strains.

iGEM and biology promogation

Purpose:

As we were alarmed to learn that most of Chinese believe that synthetic biology is harmful to human health. To combat this problem, we developed a dual-focus, comprehensive educational program targeting students. We thought that educate students is the most effective way to correct people’s conceptions. The team planned and carried out a series of iGEM educational lectures for aged 5-13 years old as part of the University of Electronic Science and Technology’s Education programs event.

1: we went to kindergarten to teach the children some biological knowledge by way of science course.
2: we held an interesting biology lecture on the experimental primary school of UESTC.
3: we extended iGEM to the village schools in order to spread iGEM to remote areas which is low-education. We wanted to teach them more things they do not understand. Viewed from another aspect, we would like to propagation iGEM to wherever our capacity allows.




On May 8th 2015




Members of the Hong Kong University Medicine School visited UESTC Life Science and Technology School. We iGEM experiment team took the opportunity to talk about our project with Professor Zhaoyi Hu. Knowing the main processes of our project, Prof.Hu said, "It seems that the competition not only requires you players have a certain professional basis and innovation capability, but also is a test of students' learning and thinking comprehensive ability." Then he put forward his concerns especially in biosafety aspects, namely, whether the bacteria source itself is safe or pathogenic, and if gene modified organisms are safe.


In the aspect of biosafety, our project have achieved three aspects as following:
1. The safety of bacteria source: DH5α and BL21 (DE3) we use are common bacterial strains;
2. The safety of transgenosis: The genes we will transfer are nonpathogenic and nonpolluting. There are little adverse impacts on environment and rare probability of transgene escape.
3. The safety of experimental operation: We players have formed a strict operation habit, such as sterilization of transgenosis bacterias, protection of experimenters.


In the end, Prof.Hu told us the general processes of sample treatment in medical research as well as separation and preservation methods of some bacteria strains.




Professor Zhaoyi Hu is head of Microbiology Department of Hong Kong University Medicine School, Infection and Immunity Joint Research Center of Hong Kong University. Their results research have a broad impact on international academic circles, especially the medical community .