Difference between revisions of "Team:IONIS Paris/Description"
(Prototype team page) |
|||
(51 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | {{ | + | {{IONIS_Paris/JS}} |
− | + | {{IONIS_Paris-testcss}} | |
− | < | + | <html lang="en"> |
+ | <head> | ||
+ | <meta charset="UTF-8" /> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
+ | <title >IONIS Paris</title> | ||
− | < | + | <!-- Google fonts --> |
− | < | + | <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'> |
− | < | + | <!-- font awesome --> |
− | < | + | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <!-- favicon --> | ||
+ | <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> | ||
+ | <link rel="icon" href="images/favicon.ico" type="image/x-icon"> | ||
+ | </head> | ||
− | < | + | <body> |
− | < | + | <div class="topbar animated fadeInLeftBig"></div> |
− | < | + | <!-- Header Starts --> |
− | + | ||
− | + | ||
− | < | + | <div class="banner row" id="banner" style="width:101%;height: 100vh; "> |
− | + | <div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/3/34/Wii.jpg); " > | |
− | </ | + | <div class="parallax-pattern-overlay " style="height: 100vh; "> |
+ | <div class="container text-center" style="height:650px;padding-top:200px;" > | ||
+ | <h1 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s" style="font-family:sans-serif; color:#B00000 " >Our project</h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- INTRODUCTION --> | ||
+ | |||
+ | <div id="about" class="container spacer about"> | ||
+ | <h2 class="text-center wowload fadeInUp" style="color:#ff0000">Popularization of Synthetic Biology</h2> | ||
+ | <h3 class="text-center wowload fadeInUp">By 2 different approaches</h3> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-6 wowload fadeInLeft"> | ||
+ | <h4><i class="fa fa-gamepad" style="color:#b22222"></i> Design of a real synthetic biology game: the Bio-Console </h4> | ||
+ | <p align="justify">It is based on the control of engineered bacteria in a microfluidic chip connected to a computer interface. Our game is dependent on: <br> | ||
+ | <ul style="list-style:none"> | ||
+ | <li> | ||
+ | <i class="fa fa-angle-right"></i><font style="color:#66cdaa"> optogenetic signals</font> leading to either the fluorescence of our bacteria in order to visualize it, or the death of our bacteria. The latter allows us to control our system leading to an efficient kill switch. | ||
+ | </li> | ||
+ | <li> | ||
+ | <i class="fa fa-angle-right"></i><font style="color:#66cdaa"> luciferin</font> if the vizualisation of bacteria is made by bioluminescence | ||
+ | </li> | ||
+ | </ul> | ||
+ | </p> | ||
+ | <h4><i class="fa fa-mobile" style="color:#b22222"></i> The mobile application: Biology, Synthetic Biology & Safety! </h4> | ||
+ | <p align="justify"> Our team wants to<font style="color:#66cdaa"> promote Synthetic Biology</font> using an original point of view. The goal is to make this field accessible to everyone by using a playful & entertaining tool..</p> | ||
+ | </div> | ||
+ | <div class="col-sm-6 wowload fadeInRight"> | ||
+ | <p align="right"><img src="https://static.igem.org/mediawiki/2015/a/a6/0cae0046396704c3436562c784c63f50_original.jpg" alt="Mobile Application" width="400" height=auto style="overflow: hidden"></p> | ||
+ | </div> | ||
+ | <br> | ||
+ | <br> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <!-- VIDEO --> |
− | < | + | <div class="highlight-info"> |
− | < | + | <div class="overlay spacer"> |
+ | <div class="container" > | ||
+ | <div class="row text-center"> | ||
+ | <h2 class="text-center">What do we do exactly?</h2> | ||
+ | <CENTER> | ||
+ | <video width="500" height="281.25" style="width:40vw" poster="https://static.igem.org/mediawiki/2015/e/ec/11416803_10206427913838537_603212525_o.jpg" controls> | ||
+ | <source src="https://static.igem.org/mediawiki/2015/5/5d/BACTMan_le_heros_de_la_BIO-Console.mp4" type='video/mp4'/> | ||
+ | <source src="https://static.igem.org/mediawiki/2015/9/90/BACTMan_le_heros_de_la_BIO-Console.ogg" type='video/ogg; codecs="theora, vorbis"'/> | ||
+ | <source src="https://static.igem.org/mediawiki/2015/7/70/BACTMan_le_heros_de_la_BIO-Console.webm" type='video/webm; codecs="vp8, vorbis"'/> | ||
+ | <a href="https://www.youtube.com/watch?v=gVtXKnW4zD0"><img border="0" src="https://static.igem.org/mediawiki/2015/e/ec/11416803_10206427913838537_603212525_o.jpg" alt="Click to view on Youtube" width="500" height="281.25"></a> | ||
+ | <p style="font-style:italic;color:red;border-style:solid;border-width:2px;border-color:red">Your browser either does not support HTML5 or cannot handle MediaWiki open video formats. Please consider upgrading your browser, installing the appropriate plugin or switching to a Firefox or Chrome install.</p> | ||
+ | </video> | ||
+ | </CENTER> | ||
+ | <br> | ||
+ | <br> | ||
+ | </div> | ||
+ | <center> | ||
+ | <a class="myButton" href="https://www.youtube.com/watch?v=gVtXKnW4zD0" style="color:#b0000f;background-color: #FFFFFF;">Subtitled version</a> | ||
+ | </center> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | |||
− | |||
− | < | + | <!-- DESCRIPTION --> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
+ | <div id="about" class="container spacer about"> | ||
+ | <h2 class="text-center wowload fadeInUp" style="color:#ff0000">The Bio-Console </h2> | ||
+ | <div class="row"> | ||
+ | |||
+ | <div class="col-sm-6 wowload fadeInLeft" > | ||
+ | <p align="left" ><img src="https://static.igem.org/mediawiki/2015/e/e9/SCHEMA_ANGLAIS.png" alt="Project" width="500" height=auto ></p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="col-sm-6 wowload fadeInRight"> | ||
+ | <h4><i class="fa fa-gamepad" style="color:#b22222"></i> How will work our Bio-Console ? </h4> | ||
+ | <p align="justify"> | ||
+ | To begin, we need our bacteria to be visible to the player. That's why we added the genes responsible for bacteria fluorescence or bioluminescence. | ||
+ | Our genetic constructions will allow us to <font style="color:#66cdaa">induce bacteria fluorescence through light signals or bioluminescence.</font> | ||
+ | In this way, we can make each group of bacteria directly visible before starting of the game. | ||
+ | Then, the bacteria will be introduced in an aqueous <font style="color:#66cdaa">medium</font> having the same density as the water. | ||
+ | In this environment, the bacteria will have all the molecules that allow them to survive in the game. | ||
+ | There will be as well some liposomes (small capsules where the internal environment is separated by membranes from the external environment). | ||
+ | Inside of these liposomes, bacteria destructive toxins will be present, and this is where the <font style="color:#66cdaa">gameplay</font> of our game relies. Once the bacteria are visible, we will introduce the aqueous medium in our microfluidic chip. | ||
+ | This chip will be placed beforehand under an optical microscope itself connected to the computer screen. The aqueous medium then forms a sort of bubble containing <font style="color:#66cdaa">BactMan</font> and toxins trapped in the vesicle. | ||
+ | This bubble will be directly controlled by the player by flows through the joystick as it is related to the computer. | ||
+ | </p> | ||
+ | |||
+ | <h4><i class="fa fa-mobile" style="color:#b22222"></i> The goal of the game !</h4> | ||
+ | <p align="justify"> The goal is simple: to allow <font style="color:#66cdaa">BactMan</font> to survive as long as possible. | ||
+ | Stop him from getting in contact with the virtual lasers that will appear faster and faster as the game goes on. | ||
+ | If <font style="color:#66cdaa">BactMan</font> were to be touched, a bright flash will appear at the microscope and will activate the liposomes opening. | ||
+ | The toxins will eliminate our hero that will lose his fluorescence ... <font style="color:#66cdaa"><b><a href="https://2015.igem.org/Team:IONIS_Paris/Project/Game_Over">GAME OVER</a></b></font> | ||
+ | </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!--div boxes --> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- DESCRIPTION --> | ||
+ | |||
+ | |||
+ | <div id="about" class="container spacer about"> | ||
+ | <h2 class="text-center wowload fadeInUp" style="color:#ff0000">The Mobile application</h2> | ||
+ | <div class="row"> | ||
+ | |||
+ | |||
+ | <div class="col-sm-6 wowload fadeInLeft"> | ||
+ | <h4><i class="fa fa-gamepad" style="color:#b22222"></i> Popularization of Biology, Synthetic Biology and Safety</h4> | ||
+ | <p align="justify"> | ||
+ | |||
+ | The mobile application that IONIS iGEM designed is available on all Android mobile phones. We designed this application in order to communicate and popularize Synthetic Biology. | ||
+ | |||
+ | BactMan Adventures is a mobile application popularizing science through educative mini-games around the life of a bacteria. With it, you can discover key notions of biology through several mini-games in two distinct environments: the intestines and the iGEM laboratories. | ||
+ | Apart front the mini-games, the application offers information about our team, the iGEM, and synthetic biology : introduction of iGEM and of the BioBricks, presentation of the IONIS iGEM team and of our Bioconsole project, glossary of technical terms... | ||
+ | |||
+ | </p> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="col-sm-6 wowload fadeInRight" > | ||
+ | <p align="left" ><img src="https://static.igem.org/mediawiki/2015/3/34/Fond_banner_appli_jo_marwa.png" alt="Project" width="500" height=auto ></p> | ||
+ | <!--img src="https://static.igem.org/mediawiki/2015/8/88/Schema_IONIS.png"--> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!--div boxes --> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!--BOXES --> | ||
+ | <div id="works" class=" clearfix grid"> | ||
+ | |||
+ | |||
+ | |||
+ | <figure class="effect-oscar"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/thumb/b/b1/Optogenetics.jpg/800px-Optogenetics.jpg" alt="team"/> | ||
+ | <a href="https://2015.igem.org/Team:IONIS_Paris/Project/Optogenetics" ><figcaption> | ||
+ | <h2>OPTOGENETICS</h2> | ||
+ | <p>Our scientific core of the project<br> | ||
+ | </p> | ||
+ | </figcaption></a> | ||
+ | </figure> | ||
+ | |||
+ | <figure class="effect-oscar"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/1/18/GRID.jpg" alt="team"/> | ||
+ | <a href="https://2015.igem.org/Team:IONIS_Paris/Project/Microfluidics"><figcaption> | ||
+ | <h2>MICROFLUIDICS</h2> | ||
+ | <p>Our challenge in achieving the Bio-Console<br> | ||
+ | </p> | ||
+ | </figcaption></a> | ||
+ | </figure> | ||
+ | |||
+ | <figure class="effect-oscar"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/thumb/1/18/Brick-wall.png/800px-Brick-wall.png" alt="team"/> | ||
+ | <a href="https://2015.igem.org/Team:IONIS_Paris/Biobricks" ><figcaption> | ||
+ | <h2>BIOBRICKS</h2> | ||
+ | <p>Our parts of DNA<br> | ||
+ | </p> | ||
+ | </figcaption></a> | ||
+ | </figure> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- div suplementaire --> | ||
+ | </div> | ||
+ | |||
+ | <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body --> | ||
+ | <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> | ||
+ | <!-- The container for the modal slides --> | ||
+ | <div class="slides"></div> | ||
+ | <!-- Controls for the borderless lightbox --> | ||
+ | <h3 class="title">Title</h3> | ||
+ | <a class="prev">‹</a> | ||
+ | <a class="next">›</a> | ||
+ | <a class="close">×</a> | ||
+ | <!-- The modal dialog, which will be used to wrap the lightbox content --> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- UP TOP --> | ||
+ | |||
+ | <a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up fa-3x"></i></a> | ||
+ | |||
+ | |||
+ | |||
+ | </body> | ||
</html> | </html> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | {{IONIS_Paris-menu}} | ||
+ | {{IONIS_Paris/FootPage}} |
Latest revision as of 20:18, 18 September 2015
Popularization of Synthetic Biology
By 2 different approaches
Design of a real synthetic biology game: the Bio-Console
It is based on the control of engineered bacteria in a microfluidic chip connected to a computer interface. Our game is dependent on:
- optogenetic signals leading to either the fluorescence of our bacteria in order to visualize it, or the death of our bacteria. The latter allows us to control our system leading to an efficient kill switch.
- luciferin if the vizualisation of bacteria is made by bioluminescence
The mobile application: Biology, Synthetic Biology & Safety!
Our team wants to promote Synthetic Biology using an original point of view. The goal is to make this field accessible to everyone by using a playful & entertaining tool..
The Bio-Console
How will work our Bio-Console ?
To begin, we need our bacteria to be visible to the player. That's why we added the genes responsible for bacteria fluorescence or bioluminescence. Our genetic constructions will allow us to induce bacteria fluorescence through light signals or bioluminescence. In this way, we can make each group of bacteria directly visible before starting of the game. Then, the bacteria will be introduced in an aqueous medium having the same density as the water. In this environment, the bacteria will have all the molecules that allow them to survive in the game. There will be as well some liposomes (small capsules where the internal environment is separated by membranes from the external environment). Inside of these liposomes, bacteria destructive toxins will be present, and this is where the gameplay of our game relies. Once the bacteria are visible, we will introduce the aqueous medium in our microfluidic chip. This chip will be placed beforehand under an optical microscope itself connected to the computer screen. The aqueous medium then forms a sort of bubble containing BactMan and toxins trapped in the vesicle. This bubble will be directly controlled by the player by flows through the joystick as it is related to the computer.
The goal of the game !
The goal is simple: to allow BactMan to survive as long as possible. Stop him from getting in contact with the virtual lasers that will appear faster and faster as the game goes on. If BactMan were to be touched, a bright flash will appear at the microscope and will activate the liposomes opening. The toxins will eliminate our hero that will lose his fluorescence ... GAME OVER
The Mobile application
Popularization of Biology, Synthetic Biology and Safety
The mobile application that IONIS iGEM designed is available on all Android mobile phones. We designed this application in order to communicate and popularize Synthetic Biology. BactMan Adventures is a mobile application popularizing science through educative mini-games around the life of a bacteria. With it, you can discover key notions of biology through several mini-games in two distinct environments: the intestines and the iGEM laboratories. Apart front the mini-games, the application offers information about our team, the iGEM, and synthetic biology : introduction of iGEM and of the BioBricks, presentation of the IONIS iGEM team and of our Bioconsole project, glossary of technical terms...