Difference between revisions of "Team:Toulouse/Practices"

Line 1: Line 1:
−
{{Template:Toulouse/fontsome}}
+
{{Toulouse}}
−
{{Template:Toulouse/framework}}
+
 
<html>
 
<html>
−
<p></p>
+
<head>
−
<style>
+
<meta charset="utf-8">
−
@charset "utf-8";
+
<title>iGEM Toulouse 2015</title>
−
#mainav li li a, #mainav li li .drop
+
<link rel="icon" href="https://static.igem.org/mediawiki/2015/2/2e/TLSE_ApiColi.png" type="image/png" style="width:10%;"/>
−
address, article, aside, figcaption, figure, footer, header, main, nav, section{display:block; margin:0; padding:0;}
+
−
html, body{
+
−
overflow-x: hidden;
+
−
    overflow-y: scroll;
+
−
}
+
−
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo{
+
−
    display:none;}
+
−
#top-section {
+
−
    border: none;
+
−
    height: 0px;}
+
−
#content {
+
−
    border: none;
+
−
    padding: 0px 0px 0px 0px;
+
−
background-color: #817E8B; ;
+
−
}
+
−
#globalWrapper {
+
−
    font-size: 78%;
+
−
    position:absolute;
+
−
}
+
  
−
#content {
+
</head>
−
    width:100%;
+
<body id="top">
−
}
+
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
  
−
h1, h2, h3, h4, h5, h6 { border-bottom: 0px transparent;  
+
<script>
 +
var myurl = "https://2015.igem.org/Team:Toulouse/Practice";
 +
var elementId = "humanp";
 +
</script>
  
−
margin-bottom: none;
+
</html>{{Toulouse/nav}}<html>
−
}
+
−
h3 {color:#90A83E;}
+
−
@charset "utf-8";
+
−
/*
+
−
Template Name: Fertile
+
−
Author: <a href="http://www.os-templates.com/">OS Templates</a>
+
−
Author URI: http://www.os-templates.com/
+
−
Licence: Free to use under our free template licence terms
+
−
Licence URI: http://www.os-templates.com/template-terms
+
−
File: Layout CSS
+
−
*/
+
  
−
@import url("fontawesome-4.2.0.min.css");
+
−
@import url("framework.css");
+
  
 +
 +
    <!-- ################################################################################################
 +
<div class="wrapper row2 bgded" style="background-image:url('https://static.igem.org/mediawiki/2015/0/03/TLSE_bakcground.png');">
 +
    <div id="pageintro">
 +
<div class="title">
 +
      <h2>Context</h2>
  
−
/* Rows
+
    </div>
−
---------------------------------------------------------------------------------------------------------------*/
+
−
.row0{border-bottom:0px solid; margin-top:5px;}
+
    <div id="breadcrumb" class="clear">
−
.row1, .row1 a{}
+
      <ul>
−
.row2, .row2 a{}
+
        <li><a href="#domBee">1- Domestic bees</a></li>
−
.row3, .row3 a{}
+
        <li><a href="#CCD">2- Collapse of Bees</a></li>
−
.row4, .row4 a{}
+
        <li><a href="#varroa"><i>3- Varroa destructor</i></a></li>
−
.row5, .row5 a{}
+
        <li><a href="#outB">4- Outbreak of Varroa</a></li>
−
.row6{border-top:1px solid;}
+
<li><a href="#fight">5- Means to fight Varroa</a></li>
 +
      </ul>
 +
    </div>
 +
</div>
 +
</div>
 +
    <!-- ################################################################################################ -->
 +
 
  
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<div class="wrapper row0 bgded" style="background-image:url('https://static.igem.org/mediawiki/2015/0/03/TLSE_bakcground.png')">
 +
 
  
−
/* Header
+
 
−
---------------------------------------------------------------------------------------------------------------*/
+
 
−
#header{text-transform:uppercase; font-size:13px;}
+
  <div class="shout">
−
#header *{margin:0;}
+
   
−
#header #logo{margin-top:-20px; margin-left:-10px; margin-top:15px;}
+
    <div class="shout-content clear">
−
#header #logo h1{    text-transform:capitalize; font-variant:small-caps;}
+
      <div class="title">
−
#header #logo h1::first-letter{}
+
    <center> <h3>Practices</h3> </center>
 +
    </div>
 +
  <center><img src="https://static.igem.org/mediawiki/2015/7/70/TLSE_context_BG.png"></center>
 +
 
 +
</div>
  
 +
  </div>
 +
 
 +
 +
 +
</div>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
  
−
/* Shout - Call To Action
+
<div class="wrapper row3">
−
---------------------------------------------------------------------------------------------------------------*/
+
−
.shout{padding:650px 0 0 0; text-transform:uppercase;}
+
−
.shout.inner{padding-top:100px;}
+
−
.shout p{margin:0; padding:0;}
+
−
.shout p:first-of-type{/*margin-top:10px;*/ text-transform:none;}
+
−
.shout-content img{
+
−
max-height:160px;
+
−
}
+
−
.shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem; margin:auto;}
+
−
.row0 .shout .shout-content{padding:15px 30px; border-radius:50px 50px 5px 5px; font-size:1.2rem;margin-top:-250px;}
+
−
/* Page Header
+
−
--------------------------------------------------------------------------------------------------------------- */
+
−
#pageintro{padding:180px 0 0 0;}
+
−
#pageintro .title{margin:0 0 50px 0;}
+
−
#pageintro .title :first-of-type{font-size:32px;}
+
  
 +
<br>
  
−
/* Latest
+
  <main class="container clear">
−
---------------------------------------------------------------------------------------------------------------*/
+
−
.latest{display:block; width:100%; min-width:978px; max-width:2000px; margin:0 auto;}
+
−
.latest *{margin:0; padding:0;}
+
−
.latest ul, .latest ul li{border:solid; margin-bottom:15px;}
+
−
.latest ul{border:solid; border-width:1px 0;}
+
−
.latest ul li{display:block; float:left; width:20%; border-width:0 0 0 1px; box-sizing:border-box;}
+
−
.latest ul li:first-child{border-left:none;}
+
−
.latest ul li:first-child, .latest ul li:nth-child(5n+1){clear:left;}
+
−
.latest ul li *{width:100%; box-sizing:border-box;}
+
  
 +
<div class="group center">
 +
<p align="justify" style="font-size:15px;">
 +
The iGEM competition is not all about wet lab and finding sponsors. To breath life into a project
 +
public contact is paramout.
 +
When we first started to reach out to the public we realised that the decline in bee population was
 +
a well known issue, in spite of this, most of the people interviewed weren't aware of the <i>Varroa destructor</i> influence.
 +
</p>
 +
</div>
 +
<div class="group center">
 +
<div class="one quarter first">
 +
<div class="subtitle" style="margin-bottom:0px;">  
 +
<h3>ExpoSciences Midi-Pyrénées
 +
</h3>
 +
</div>
 +
<a href="#"><img src="https://static.igem.org/mediawiki/2015/5/57/TLSE_Attract_BG.png" style="width:100%;" /></a>
 +
</div>
  
−
/* Clients
 
−
---------------------------------------------------------------------------------------------------------------*/
 
−
.clients{padding:30px 0;}
 
−
.clients *{margin:0; padding:0;}
 
−
.clients ul li{display:block; float:left; width:20%; padding:0 15px; box-sizing:border-box;}
 
−
.clients ul li:first-child, .clients ul li:nth-child(5n+1){clear:left;}
 
−
.clients ul li *{width:100%; opacity:.5;}
 
−
.clients ul li *:hover{opacity:1;}
 
  
 +
<div class="one quarter">
 +
<div class="subtitle" style="margin-bottom:0px;">  
 +
<h3>Communication in high school
 +
</h3>
 +
</div>
  
−
/* Content Area
+
<a href="#"><img src="https://static.igem.org/mediawiki/2015/5/57/TLSE_Attract_BG.png" style="width:100%;" /></a>
−
---------------------------------------------------------------------------------------------------------------*/
+
</div>
−
.container{padding:30px;padding-bottom:50px;}
+
  
−
/* Content */
 
−
.container #content{}
 
  
−
.boxedicon{display:inline-block; width:70px; height:70px; line-height:70px; margin-bottom:50px; text-align:center;}
+
<div class="one quarter">
−
.boxedicon a{display:block; width:100%; height:100%; border:2px solid;}
+
<div class="subtitle" style="margin-bottom:0px;">  
−
.boxedicon a i{line-height:inherit;}
+
<h3>ExpoSciences International
 +
</h3>
 +
</div>
  
−
.testimonial em{display:block; margin:0; padding:0; font-style:normal; font-size:.8rem;}
+
<a href="#"><img src="https://static.igem.org/mediawiki/2015/5/57/TLSE_Attract_BG.png" style="width:100%;" /></a>
 +
</div>
  
−
/* Comments */
 
−
#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}
 
−
#comments li{margin:0 0 10px 0; padding:15px;}
 
−
#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}
 
−
#comments address{font-weight:bold;}
 
−
#comments time{font-size:smaller;}
 
−
#comments .comcont{display:block; margin:0; padding:0;}
 
−
#comments .comcont p{margin:10px 5px 10px 0; padding:0;}
 
  
−
/* Sidebar */
+
<div class="one quarter">
−
.container .sidebar{}
+
<div class="subtitle" style="margin-bottom:0px;">  
 +
<h3>Looking forward
 +
</h3>
 +
</div>
  
−
.sidebar .sdb_holder{margin-bottom:50px;}
+
<a href="#"><img src="https://static.igem.org/mediawiki/2015/5/57/TLSE_Attract_BG.png" style="width:100%;" /></a>
−
.sidebar .sdb_holder:last-child{margin-bottom:0;}
+
</div>
  
  
−
/* Footer
+
</div>
−
---------------------------------------------------------------------------------------------------------------*/
+
−
#footer{padding:0 0 80px 0; color:white;}
+
  
−
#footer .shout{margin:0 0 80px 0; padding:0;}
 
−
#footer .shout .shout-content{border-radius:0 0 50px 50px;}
 
  
−
#footer .title{margin:0 0 30px 0; padding:0 0 8px 0; border-bottom:1px solid; font-size:16px; text-transform:uppercase;}
 
  
−
#footer .linklist li {margin-bottom:10px;}
+
<center><div class="subtitle" >  
−
#footer .linklist li:last-child{margin-bottom:0;}
+
<h3>ExpoSciences Midi-Pyrénées</h3>
−
#footer .linklist li a{color:white;/*font-size: 12px*/}
+
</div></center>
  
−
#footer .smallfont{font-size:.8em; margin:0;}
+
<div class="group center">
  
−
#footer input, #footer button{border:none; border-radius:5px;}
 
−
#footer input{display:block; width:100%; padding:8px;}
 
−
#footer button{padding:6px 12px; font-weight:bold; text-transform:uppercase; cursor:pointer;}
 
  
 +
<p align="justify" style="font-size:15px;">
 +
Our team took part to regional ExpoSciences in Toulouse.
 +
This event brings together scientists of all ages and levels
 +
who want to share scientific knowledges. It’s a good exercise
 +
which enables to explain what’s synthetic biology.
 +
Given that DNA is our main work tool, we decided to let the children try out banana
 +
DNA extraction, with ethanol and dishwashing soap.
 +
The stand having drawn everybody’s attention,
 +
our intervention has been broadcasted on a local TV (TLT),
 +
and we also have been selected to take part to International ExpoSciences.
 +
</p>
 +
</div>
  
 +
<div class="subtitle" style="margin-bottom: 0px;">  
 +
<h3 style="font-size:20px;">Recipe for a successful banana DNA extraction!</h3>
 +
</div>
  
−
/* Copyright
+
<table class="df">
−
---------------------------------------------------------------------------------------------------------------*/
+
−
#copyright{padding:30px 0;}
+
−
#copyright p{margin:0; padding:0;}
+
  
 +
<tr>
 +
    <td>
  
−
/* Back to Top
+
<ul style="font-size:15px;margin-bottom:10px;">
−
---------------------------------------------------------------------------------------------------------------*/
+
<li>
 +
A ripe banana (Brownish)
 +
</li>
 +
<li>
 +
50 ml of water (About a half cup)
 +
</li>
 +
<li>
 +
2 teaspoon of salt
 +
</li>
 +
<li>
 +
2 teaspoon Dishwashing soap or detergent
 +
</li>
 +
<li>
 +
Rubbing alcohol (cold)
 +
</li>
 +
<li>
 +
Coffee filter
 +
</li>
 +
<li>
 +
A test tube (or narrow glass)
 +
</li>
 +
<li>
 +
Narrow wooden stirrer
 +
</li>
 +
</ul>
  
 +
</td>
 +
<td>
  
−
/* Transition Fade
+
<ul style="font-size:15px;margin-bottom:10px;">
−
--------------------------------------------------------------------------------------------------------------- */
+
<li>
−
.row0, .faico a, #mainav *, .shout-content, .overlay ::before, .overlay ::after, .boxedicon a, .clients ul li *, }
+
Peel and smash half of the Banana into a pulp
 +
</li>
 +
<li>
 +
Add the 50ml of water(must be at ambient temperature), the salt and the Dishwashing soap
 +
</li>
 +
<li>
 +
Stir until a soft foam starts to appear
 +
</li>
 +
<li>
 +
Let the mix pour through the coffee filter (about five minutes)
 +
</li>
 +
<li>
 +
Throw out the coffee filter and its content, keep the liquid
 +
</li>
  
 +
<li>
 +
Take a 2ml sample and pour it in the test tube
 +
</li>
  
−
/*-------------------------------------------------------------------------------------------------------------*/
+
<li>
−
/*-------------------------------------------------------------------------------------------------------------*/
+
Add 4ml of alcohol, two layer should form in the test tube
−
/*-------------------------------------------------------------------------------------------------------------*/
+
</li>
−
/*-------------------------------------------------------------------------------------------------------------*/
+
−
/*-------------------------------------------------------------------------------------------------------------*/
+
  
 +
<li>
 +
In the alcohol layer, a white cloud with bubbles should appear, this cloud is DNA!
 +
</li>
 +
</ul>
  
−
/* Navigation
+
<br>
−
---------------------------------------------------------------------------------------------------------------*/
+
</td>
−
nav ul, nav ol{margin:0; padding:0; list-style:none;}
+
<td>
  
−
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:50px; line-height:10px;}
+
<img src="https://static.igem.org/mediawiki/2015/4/40/TLSE_Practices_pic1.png" style="width:400px;"/>
  
−
/* Top Navigation */
+
</td>
−
#mainav{margin-bottom:-1px; }
+
</tr>
−
#mainav ul{text-transform:uppercase;margin-top:-1px;}
+
</table>
−
#mainav ul ul{z-index:9999; position:absolute; width:160px; text-align:left; text-transform:none;}
+
<center><hr style="width:66%;height:1px;border:none;color:#90A83E;background-color:#90A83E;"></center>
−
#mainav ul ul ul{left:150px; top:0;}
+
−
#mainav li{display:inline-block; position:relative; margin:0 10px 0 0; padding:0;}
+
−
#mainav li:last-child{margin-right:0;}
+
−
#mainav li li{width:100%; margin:0;}
+
−
#mainav li a{display:block; padding:25px 10px;}
+
−
#mainav li li a{border:solid; border-width:0 0 1px 0;font-size:12px;}
+
−
#mainav .drop{padding-left:15px; margin-top:20px;}
+
−
#mainav li li a, #mainav li li .drop{display:block; margin:0px; padding:10px 15px;}
+
−
#mainav .drop::after, #mainav li li .drop::after{content:"";}
+
−
#mainav .drop::after{top:30px; left:5px;}
+
−
#mainav li li .drop::after{top:15px; left:5px;}
+
−
#mainav ul ul{visibility:hidden; opacity:0;}
+
−
#mainav ul li:hover > ul{visibility:visible; opacity:1;}
+
  
−
/* Breadcrumb */
+
<p align="justify" style="font-size:15px;">
−
#breadcrumb{display:block; padding:15px 20px; border-radius:5px 5px 0 0;}
+
This simple, yet interesting experience helped us attract children to our stand. It was a great starting point
−
#breadcrumb ul{margin:0; padding:0; list-style:none;}
+
for us we managed to start some indepth conversation with them about what they knew of DNA and what could be done with it.
−
#breadcrumb li{display:inline-block; margin:0 6px 0 0; padding:0;}
+
Some of them weren't aware that banana had DNA at all and some teacher told us that our demonstration was very well though up and
−
#breadcrumb li a{display:block; position:relative; margin:0; padding:0 12px 0 0; font-size:13px;color:rgba(29, 5, 79, 1);}
+
easy to understand without distorting the truth.<br>
−
#breadcrumb li a::after{top:5px; right:0; content:"";}
+
−
#breadcrumb li:last-child a{margin:0; padding:0;}
+
−
#breadcrumb li:last-child a::after{display:none;}
+
  
−
/* Sidebar Navigation */
+
We were the first most visited stand in the expo (thanks to the pungent smell of smashed banana) and
−
.sidebar nav{display:block; width:100%;}
+
our intervention has even been broadcasted on a local TV (TLT[1]).
−
.sidebar nav li{margin:0 0 3px 0; padding:0;}
+
our success had us selected to take part to the <b>International ExpoSciences</b> in Brussel!.
−
.sidebar nav a{display:block; position:relative; margin:0; padding:5px 10px 5px 15px; text-decoration:none; border:solid; border-width:0 0 1px 0;}
+
</p>
−
.sidebar nav a::after{top:9px; left:5px; content:"";}
+
−
.sidebar nav ul ul a{padding-left:35px;}
+
−
.sidebar nav ul ul a::after{left:25px;}
+
−
.sidebar nav ul ul ul a{padding-left:55px;}
+
−
.sidebar nav ul ul ul a::after{left:45px;}
+
  
−
/* Pagination */
 
−
.pagination{display:block; width:100%; text-align:center; clear:both;}
 
−
.pagination li{display:inline-block; margin:0 3px 0 0;}
 
−
.pagination li:last-child{margin-right:0;}
 
−
.pagination a, .pagination strong{display:block; padding:8px 11px; border:1px solid; font-weight:normal;}
 
  
  
−
/* Forms
+
<center><div class="subtitle" >  
−
---------------------------------------------------------------------------------------------------------------*/
+
<h3>Communication in junior high school</h3>
−
form, fieldset, legend{margin:0; padding:0; border:none;}
+
</div></center>
−
legend{display:none;}
+
−
label, input, textarea, select{display:block; resize:none; font-size:inherit; box-sizing:border-box;}
+
−
label{margin-bottom:5px;}
+
  
−
/* Comment Area */
+
<div class="group center">
−
#comments form{display:block; width:100%;}
+
<p align="justify" style="font-size:15px;">
−
#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}
+
To carry on our education vibe, we met with the science teacher from the Leonard de Vinci junior high school of Tournefeuille to
−
#comments textarea{overflow:auto;}
+
meet with the students. The plan? Bees, Varroas, an introduction to synthetic biology and, of course, the banana DNA extraction!
−
#comments div{margin-bottom:15px;}
+
</p>
−
#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}
+
</div>
  
  
−
/* Tables
+
<center><img src="https://static.igem.org/mediawiki/2015/7/73/TLSE_Practices_pic2.JPG" style="width:80%;"/></center>
−
---------------------------------------------------------------------------------------------------------------*/
+
−
table.df th td{border:1px solid; border-collapse:collapse; vertical-align:top; box-sizing:border-box;}
+
−
table.df th{table-layout:auto;}
+
−
table.df{width:100%; margin-bottom:15px;}
+
−
table.df th td{padding:5px 8px;}
+
−
table.df td{border-width:0 1px;}
+
  
 +
<div class="group center">
 +
<div class="one_half first">
 +
<div class="subtitle" style="margin-bottom: 0px;">  
 +
<h3 style="font-size:15px;">Teatching about varroas and bees</h3>
 +
</div>
 +
<p align="justify" style="font-size:15px;">
 +
We prepared a short presentation on varroa and organised a question and answer with the pupils about the disappearance of bees,
 +
pesticides, chemical treatments and varroa. The presentation was followed by a Q and A session where student were able to interact with us and
 +
each other about varroa and synthetic biology. With the help of the teacher we were able to explain the basics of synthetic biology, the idea of biobricks
 +
and spark a quick debate on GMO use. Most of the children were not antagonized by the use of a modified bacterium as long as it were confined in our Trapicoli,
 +
but we felt that the biological knowledge needed to fully understand synthetic biology was a little foreign for them, so we switched our lecture to be
 +
more about bees and the colony collapse disorder.<br>
 +
</p>
 +
</div>
 +
<div class="one_half">
 +
<div class="subtitle" style="margin-bottom: 0px;">  
 +
<h3 style="font-size:15px;">An unexpected advice</h3>
 +
</div>
  
−
/* Gallery
+
<p align="justify" style="font-size:15px;">
−
---------------------------------------------------------------------------------------------------------------*/
+
During the Q and A, we were asked about our studies and what kind of diploma we had. Question led to another
−
#gallery{display:block; width:100%; margin-bottom:50px;}
+
and without realising we where already doing a full guidance lecture about the choices these children will have to do in the following years (which school to
−
#gallery figure figcaption{display:block; width:100%; clear:both;}
+
attend too and why, why should I study science? etc...). The point of view from students who had to go through those choices not so long ago helped them
−
#gallery li{margin-bottom:30px;}
+
gain assurance and ease their fear about their future studies. <br>
 +
<br>
 +
We hope that we helped create a few scientific vocations during this talks (or maybe a future iGEMer!)
 +
</p>
  
−
.overlay ul li a{display:block; position:relative;}
 
−
.overlay ul li a::before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:"";}
 
−
.overlay ul li a::after{display:block; position:absolute; top:50%; left:50%; width:40px; height:40px; line-height:40px; margin:-18px 0 0 -18px; padding:0; border-radius:50%; font-family:"FontAwesome"; content:""; font-size:18px; text-align:center;}
 
−
.overlay ul li a::before, .overlay ul li a::after{opacity:0;}
 
−
.overlay ul li a:hover::before, .overlay ul li a:hover::after{opacity:1;}
 
  
 +
</div>
  
−
/* Font Awesome Social Icons
 
−
---------------------------------------------------------------------------------------------------------------*/
 
−
.faico{margin:40px; padding:0; list-style:none;}
 
−
.faico li{display:inline-block; margin:0 2px 0 0; padding:0; line-height:normal;}
 
−
.faico li:last-child{margin-right:0;}
 
−
.faico a{display:inline-block; width:30px; height:30px; line-height:30px; border-radius:5px; font-size:16px; text-align:center;}
 
  
−
.faico a{color:inherit; }
 
−
.faico a:hover{color:#FFFFFF;}
 
  
−
.faicon-facebook:hover{background-color:#3B5998;}
+
</div>
−
.faicon-google-plus:hover{background-color:#DB4A39;}
+
−
.faicon-instagram:hover{background-color:#3F729B;}
+
<div class="group center">
−
.faicon-linkedin:hover{background-color:#0E76A8;}
+
<p align="justify" style="font-size:15px;">
−
.faicon-tumblr:hover{background-color:#34526F;}
+
The main aim of this intervention was to teach children about varroa and synthetic biology while creating interest for science in general.  
−
.faicon-twitter:hover{background-color:#00ACEE;}
+
But for us it taught us how to adapt our speech too younger audience, we had to stop taking for granted notions such as genes and even DNA. The experience
 +
we acquired here was them reused and we became able to switch from a full science explanation to a simpler overview of our project without getting boring.  
 +
</p>
 +
</div>
  
 +
<center><div class="subtitle" >  
 +
<h3>Giant Jamboree training: International Exposciences in Brussels</h3>
 +
</div></center>
  
−
/*-------------------------------------------------------------------------------------------------------------*/
+
<div class="group center">
−
/*-------------------------------------------------------------------------------------------------------------*/
+
<p align="justify" style="font-size:15px;">
−
/*-------------------------------------------------------------------------------------------------------------*/
+
The team had the wonderful opportunity to take part the International ExpoSciences in Brussels,
−
/*-------------------------------------------------------------------------------------------------------------*/
+
during this science fair we had the chance to meet people from all around the world to exchange
−
/*-------------------------------------------------------------------------------------------------------------*/
+
knowledge and ideas. In the middle our summer our project had matured a lot and the expo was
 +
the occasion for us to test it in the real world exchanging with scientist. <br>
 +
We also spent our time explaining the iGEM competition to visitors and participant alike
 +
bringing light unto the synthetic biology field, still quite unknown.<br>
 +
We also took the opportunity of being in belgium and organised a quick meetup with KU Leuven iGEM team.
 +
This communication is fully integrated into the Apicoli project enhancing its exposure and credibility toward people.
 +
Besides this experience enabled us to meet his Excellency mister Bernard Valero,
 +
the ambassador of France in Belgium, and mister Jean-Claude Guiraudon, CIRASTI President and MILSET Honorary President, both of them
 +
wished us luck on our endeavours.
 +
</p>
 +
</div>
  
 +
<div class="group center">
 +
<p align="justify" style="font-size:15px;">
 +
Overall this experience in Brussels was quite intense, we met so many people interested in science and it was refreshing to be able to get out the lab
 +
and develop our project on the field. We hope to feel the same engagement this September in Boston.
 +
</p>
 +
</div>
  
−
/* Colours
+
<center><div class="subtitle" >  
−
---------------------------------------------------------------------------------------------------------------*/
+
<h3>Looking forward!</h3>
−
body{color:black; background-color:#817E8B;}
+
</div></center>
  
−
hr, .borderedbox{border-color:#EDEDED;}
+
<div class="group center">
−
label span{color:#FF0000; background-color:inherit;}
+
<p align="justify" style="font-size:15px;">
−
.btn{color:#FFFFFF;}
+
With august looming over us, we had trouble organizing any education event. But iGEM does not stop the 28th of september, we have everything planned to
−
.font_xxl:after{color:inherit; background-color:rgba(9, 181, 31, 0.32);}
+
keep our project alive outside of the competition:
 +
</p>
 +
</div>
 +
<ul style="font-size:15px;margin-bottom:10px;">
 +
<li>
 +
Semaine de l’étudiant : October 9-18 in Toulouse<br>
 +
The "Student's week" occuring in several towns in the Midi-Pyrénées region facilitate
 +
the integration of new student in Toulouse allowing them to participate in free event organized by
 +
associations.
 +
</li>
 +
<li>
 +
Scientilivre : October 17-18 <br>
 +
Taking place in Toulouse Scientilivre ("Science book") is here to present both books and science
 +
to the public. We plan to present our project Apicoli with posters and some playful experimentations for families.
 +
</li>
 +
</ul>
  
 +
</div><!-- END OF ROW3-->
 +
</main>
 +
<!-- ################################################################################################ -->
 +
<!-- ################################################################################################ -->
 +
<!-- #######################        FOOTER        ######################################################################### -->
  
−
/* Rows */
+
</html>{{Toulouse/footer}}<html>
−
/* Structure des rows, le row0 est la barre de nav */
+
−
.row0{color:#101132; background-color:rgba(245, 245, 245, 1); border-color:rgba(29, 5, 79, 0.81); max-height:630px}
+
−
.row0:hover{background-color:rgba(245, 245, 245, 1);}
+
−
.row1, .row1 a{color:#FFFFFF; background-color:#000000;}
+
−
.row2, .row2 a{color:#FFFFFF; background-color:#000000;}
+
−
.row3{color:#888888; background-color:white;}
+
−
.row4, .row4 a{color:#B4B4B4; background-color:#EDEDED;}
+
−
.row5{color:white; background-color:#817E8B;}
+
−
.row6, .row6 a{color:#B4B4B4; background-color:#817E8B;}
+
−
.row6{border-color:#3C3C3C;}
+
  
  
−
/* Header */
 
−
#header #logo h1 a{color:inherit;}
 
  
−
 
+
</body>
−
/* Shout */
+
−
.shout .shout-content{color:inherit; background-color:rgba(251, 255, 245, 0.53);max-width:800px;max-height:300px;}
+
−
.shout .shout-content:hover{background-color:rgba(247, 244, 255, 0.48);}
+
−
 
+
−
 
+
−
/* Latest Work */
+
−
.latest ul, .latest ul li{border-color:#EDEDED;}
+
−
 
+
−
 
+
−
/* Content */
+
−
.boxedicon a{color:#56AED4; }
+
−
.boxedicon a:hover{color:#FFFFFF;}
+
−
 
+
−
 
+
−
/* Footer */
+
−
/* Couleur de la barre du footer */
+
−
#footer .shout .shout-content, #footer .shout .shout-content:hover{color:rgba(8, 44, 47, 0.82); background-color:#EDEDED; border-bottom: 7px solid rgba(46, 29, 89, 0.88);}
+
−
#footer .title{color:#FFFFFF; border-color:#3C3C3C;} /* Couleur des textes */
+
−
#footer input{color:#FFFFFF; background-color:#3C3C3C;}
+
−
#footer button{color:#FFFFFF;}
+
−
e-block;}
+
−
 
+
−
/*Back to Top*/
+
−
 
+
−
 
+
−
/* Navigation */
+
−
 
+
−
#mainav li a{color:inherit;} /* Couleur des textes de la barre nav */
+
−
#mainav.active a, #mainav a:hover, #mainav li:hover > a{; background-color:inherit;} /* Couleur de fond lors d'un mouseover du texte */
+
−
#mainav li li a, #mainav .active li a{color:black; background-color:rgba(236, 255, 226, 0.9); border-color:rgba(236, 255, 226, 0.6);} /* Gestion de la couleur des onglets */
+
−
#mainav li li:hover > a, #mainav .active .active > a{color:#FFFFFF; background-color:rgba(29, 5, 79, 0.81);border-color:rgba(29, 5, 79, 0.81);font-size:12px;}/* Gestion couleur des onglets lors d'un mouseover */
+
−
#mainav li a.set{color:#90A83E;font-size:15px;} /*classe active qui s'appelle pas active parceque active ?a marchait pas */
+
−
/* J'ai toujours pas trop compris */
+
−
#breadcrumb{color:inherit; background-color:rgba(255, 255, 255, 0.7);}
+
−
#breadcrumb a{background-color:inherit;}
+
−
 
+
−
.container .sidebar nav a{color:inherit; border-color:#EDEDED;}
+
−
.container .sidebar nav a:hover{color:#56AED4;}
+
−
 
+
−
.pagination a, .pagination strong{border-color:#EDEDED;}
+
−
.pagination .current{color:#B9D94A;}
+
−
 
+
−
/*ALL TABLE ATTRIBUTES*/
+
−
/* Tables + Comments
+
−
df for default style table*/
+
−
table.df th td, #comments .avatar, #comments input, #comments textarea{border-color:#EDEDED;}
+
−
table.df th{color:#FFFFFF; background-color:#373737;}
+
−
table.df tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
+
−
table.df tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
+
−
table.df a, #comments a{background-color:inherit;}
+
−
 
+
−
 
+
−
/* Gallery */
+
−
.overlay ul li a::before{background-color:rgba(236, 255, 226, 0.6);}
+
−
.overlay ul li a::after{color:#FFFFFF; }
+
−
 
+
−
/* */
+
−
a:link {color: rgba(29, 5, 79, 0.81);}
+
−
a:visited {color: rgba(29, 5, 79, 0.81);}
+
−
a:hover {color:rgba(22, 19, 29, 0.95);}
+
−
a:active {color:rgba(29, 5, 79, 0.81);}
+
−
img
+
−
{
+
−
    filter: type(value);
+
−
}
+
−
img
+
−
{
+
−
    filter: type(value);
+
−
    -webkit-filter: type(value);
+
−
    -moz-filter: type(value);
+
−
    -ms-filter: type(value);
+
−
    -o-filter: type(value);
+
−
}
+
−
.grayscale img:hover
+
−
{
+
−
        filter: grayscale(0);
+
−
        -webkit-filter: grayscale(0);
+
−
        -moz-filter: grayscale(0);
+
−
        -o-filter: grayscale(0);
+
−
        -ms-filter: grayscale(0);
+
−
}
+
−
.grayscale img
+
−
{
+
−
        filter: grayscale(1);
+
−
        -webkit-filter: grayscale(1);
+
−
        -moz-filter: grayscale(1);
+
−
        -o-filter: grayscale(1);
+
−
        -ms-filter: grayscale(1);
+
−
}
+
−
 
+
−
.subtitle{
+
−
right: 5px;
+
−
margin-top:30px;
+
−
margin-bottom:-40px;
+
−
}
+
−
 
+
−
.title h3{
+
−
color:rgba(29, 5, 79, 1);
+
−
font-size:25px;
+
−
}
+
−
 
+
−
.subtitle h3{
+
−
color:#90A83E;
+
−
font-size:25px;
+
−
}
+
−
 
+
−
 
+
−
.title{
+
−
font-size:25px;
+
−
color:rgba(29, 5, 79, 0.81);
+
−
}
+
−
 
+
−
.maintitle{
+
−
 
+
−
font-size:30px;
+
−
color:rgba(29, 5, 79, 0.81);
+
−
}
+
−
 
+
−
p.legend{
+
−
font-size:78%;
+
−
margin-bottom:20px;
+
−
padding-bottom:10px;
+
−
}
+
−
 
+
−
 
+
−
table.team{
+
−
text-align:center;
+
−
background-color:rgb(0,0,0,0); /*transparent*/
+
−
 
+
−
}
+
−
 
+
−
table.team td {
+
−
padding-top: 15px;
+
−
padding-bottom: 15px;
+
−
width:472px;
+
−
height:327px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
table.team td img{
+
−
width:472px;
+
−
height:327px;
+
−
}
+
−
 
+
−
.anchor {
+
−
    height: 30px;
+
−
    position: fixed;
+
−
    bottom: 30px;
+
−
    right: 30px;
+
−
    z-index: 1000;
+
−
    cursor: pointer;
+
−
    -webkit-transition: all ease 0.4s;
+
−
    -moz-transition: all ease 0.4s;
+
−
    -ms-transition: all ease 0.4s;
+
−
    -o-transition: all ease 0.4s;
+
−
    transition: all ease 0.4s;
+
−
}
+
−
/* SLIDESHOW */
+
−
 
+
−
    .contener_slideshow
+
−
    {
+
−
      width:800px;
+
−
      height:600px;
+
−
      overflow: hidden;
+
−
      position: relative;
+
−
      background-image: url(YOUR-URL-IMAGE.png);
+
−
    }
+
−
    .slid_1, .slid_2, .slid_3
+
−
    {
+
−
      position: absolute;
+
−
      width:800px;
+
−
      height:600px;
+
−
    }
+
−
    .slid_1{left: 0;}
+
−
    .slid_2{left: 800px;}
+
−
    .slid_3{left: 1600px;}
+
−
    .contener_slide
+
−
    {
+
−
      width: 2400px;
+
−
      height: 600px;
+
−
      left:0px;
+
−
      position: absolute;
+
−
      -webkit-animation-duration: 10s;
+
−
      -webkit-animation-iteration-count:infinite;
+
−
      -webkit-animation-name: anim_slide;
+
−
      -moz-animation-duration: 10s;
+
−
      -moz-animation-iteration-count:infinite;
+
−
      -moz-animation-name: anim_slide;
+
−
      -ms-animation-duration: 10s;
+
−
      -ms-animation-iteration-count:infinite;
+
−
      -ms-animation-name: anim_slide;
+
−
      animation-duration: 10s;
+
−
      animation-iteration-count:infinite;
+
−
      animation-name: anim_slide;
+
−
    }
+
−
    @-webkit-keyframes anim_slide
+
−
    {
+
−
      0% {left:0px;}
+
−
      22% {left:0px;}
+
−
      33% {left:-800px;}
+
−
      45% {left:-800px;}
+
−
      66% {left:-1600px;}
+
−
      90% {left:-1600px;}
+
−
    }
+
−
    @-moz-keyframes anim_slide
+
−
    {
+
−
      0% {left:0px;}
+
−
      22% {left:0px;}
+
−
      33% {left:-800px;}
+
−
      45% {left:-800px;}
+
−
      66% {left:-1600px;}
+
−
      90% {left:-1600px;}
+
−
    }
+
−
    @-ms-keyframes anim_slide
+
−
    {
+
−
      0% {left:0px;}
+
−
      22% {left:0px;}
+
−
      33% {left:-800px;}
+
−
      45% {left:-800px;}
+
−
      66% {left:-1600px;}
+
−
      90% {left:-1600px;}
+
−
    }
+
−
    @keyframes anim_slide
+
−
    {
+
−
      0% {left:0px;}
+
−
      22% {left:0px;}
+
−
      33% {left:-800px;}
+
−
      45% {left:-800px;}
+
−
      66% {left:-1600px;}
+
−
      90% {left:-1600px;}
+
−
    }
+
−
 
+
−
</style>
+
 
</html>
 
</html>

Revision as of 12:28, 31 August 2015

iGEM Toulouse 2015

Practices


The iGEM competition is not all about wet lab and finding sponsors. To breath life into a project public contact is paramout. When we first started to reach out to the public we realised that the decline in bee population was a well known issue, in spite of this, most of the people interviewed weren't aware of the Varroa destructor influence.

ExpoSciences Midi-Pyrénées

Communication in high school

ExpoSciences International

Looking forward

ExpoSciences Midi-Pyrénées

Our team took part to regional ExpoSciences in Toulouse. This event brings together scientists of all ages and levels who want to share scientific knowledges. It’s a good exercise which enables to explain what’s synthetic biology. Given that DNA is our main work tool, we decided to let the children try out banana DNA extraction, with ethanol and dishwashing soap. The stand having drawn everybody’s attention, our intervention has been broadcasted on a local TV (TLT), and we also have been selected to take part to International ExpoSciences.

Recipe for a successful banana DNA extraction!

  • A ripe banana (Brownish)
  • 50 ml of water (About a half cup)
  • 2 teaspoon of salt
  • 2 teaspoon Dishwashing soap or detergent
  • Rubbing alcohol (cold)
  • Coffee filter
  • A test tube (or narrow glass)
  • Narrow wooden stirrer
  • Peel and smash half of the Banana into a pulp
  • Add the 50ml of water(must be at ambient temperature), the salt and the Dishwashing soap
  • Stir until a soft foam starts to appear
  • Let the mix pour through the coffee filter (about five minutes)
  • Throw out the coffee filter and its content, keep the liquid
  • Take a 2ml sample and pour it in the test tube
  • Add 4ml of alcohol, two layer should form in the test tube
  • In the alcohol layer, a white cloud with bubbles should appear, this cloud is DNA!

This simple, yet interesting experience helped us attract children to our stand. It was a great starting point for us we managed to start some indepth conversation with them about what they knew of DNA and what could be done with it. Some of them weren't aware that banana had DNA at all and some teacher told us that our demonstration was very well though up and easy to understand without distorting the truth.
We were the first most visited stand in the expo (thanks to the pungent smell of smashed banana) and our intervention has even been broadcasted on a local TV (TLT[1]). our success had us selected to take part to the International ExpoSciences in Brussel!.

Communication in junior high school

To carry on our education vibe, we met with the science teacher from the Leonard de Vinci junior high school of Tournefeuille to meet with the students. The plan? Bees, Varroas, an introduction to synthetic biology and, of course, the banana DNA extraction!

Teatching about varroas and bees

We prepared a short presentation on varroa and organised a question and answer with the pupils about the disappearance of bees, pesticides, chemical treatments and varroa. The presentation was followed by a Q and A session where student were able to interact with us and each other about varroa and synthetic biology. With the help of the teacher we were able to explain the basics of synthetic biology, the idea of biobricks and spark a quick debate on GMO use. Most of the children were not antagonized by the use of a modified bacterium as long as it were confined in our Trapicoli, but we felt that the biological knowledge needed to fully understand synthetic biology was a little foreign for them, so we switched our lecture to be more about bees and the colony collapse disorder.

An unexpected advice

During the Q and A, we were asked about our studies and what kind of diploma we had. Question led to another and without realising we where already doing a full guidance lecture about the choices these children will have to do in the following years (which school to attend too and why, why should I study science? etc...). The point of view from students who had to go through those choices not so long ago helped them gain assurance and ease their fear about their future studies.

We hope that we helped create a few scientific vocations during this talks (or maybe a future iGEMer!)

The main aim of this intervention was to teach children about varroa and synthetic biology while creating interest for science in general. But for us it taught us how to adapt our speech too younger audience, we had to stop taking for granted notions such as genes and even DNA. The experience we acquired here was them reused and we became able to switch from a full science explanation to a simpler overview of our project without getting boring.

Giant Jamboree training: International Exposciences in Brussels

The team had the wonderful opportunity to take part the International ExpoSciences in Brussels, during this science fair we had the chance to meet people from all around the world to exchange knowledge and ideas. In the middle our summer our project had matured a lot and the expo was the occasion for us to test it in the real world exchanging with scientist.
We also spent our time explaining the iGEM competition to visitors and participant alike bringing light unto the synthetic biology field, still quite unknown.
We also took the opportunity of being in belgium and organised a quick meetup with KU Leuven iGEM team. This communication is fully integrated into the Apicoli project enhancing its exposure and credibility toward people. Besides this experience enabled us to meet his Excellency mister Bernard Valero, the ambassador of France in Belgium, and mister Jean-Claude Guiraudon, CIRASTI President and MILSET Honorary President, both of them wished us luck on our endeavours.

Overall this experience in Brussels was quite intense, we met so many people interested in science and it was refreshing to be able to get out the lab and develop our project on the field. We hope to feel the same engagement this September in Boston.

Looking forward!

With august looming over us, we had trouble organizing any education event. But iGEM does not stop the 28th of september, we have everything planned to keep our project alive outside of the competition:

  • Semaine de l’étudiant : October 9-18 in Toulouse
    The "Student's week" occuring in several towns in the Midi-Pyrénées region facilitate the integration of new student in Toulouse allowing them to participate in free event organized by associations.
  • Scientilivre : October 17-18
    Taking place in Toulouse Scientilivre ("Science book") is here to present both books and science to the public. We plan to present our project Apicoli with posters and some playful experimentations for families.