|
|
(75 intermediate revisions not shown) |
Line 5: |
Line 5: |
| body { | | body { |
| width : 100%; | | width : 100%; |
| + | min-width: 1200px; |
| text-align: justify; | | text-align: justify; |
| } | | } |
| + | body img { border : none; } |
| #topHeader { | | #topHeader { |
| width : 100%; | | width : 100%; |
| height : 300px; | | height : 300px; |
| margin-top : 40px; | | margin-top : 40px; |
- | margin-bottom : 50px;
| + | |
- | background-image : url("https://static.igem.org/mediawiki/2014/b/b4/Smellgame.png"); | + | background-image : url("https://static.igem.org/mediawiki/2014/6/68/PBsmellegamebanner.png"); |
| background-size : cover; | | background-size : cover; |
| } | | } |
Line 30: |
Line 32: |
| display: inline-block; | | display: inline-block; |
| vertical-align: top; | | vertical-align: top; |
- | width : 45%; | + | width : 44%; |
| margin-right: 4%; | | margin-right: 4%; |
| font-size : 15px; | | font-size : 15px; |
| margin-bottom : 40px; | | margin-bottom : 40px; |
| } | | } |
| + | .cell2 { |
| + | float : right; |
| + | width : 43%; |
| + | margin-right : 4%; |
| + | font-size : 15px; |
| + | vertical-align: top; |
| + | font-size : 15px; |
| + | margin-bottom : 40px; |
| + | } |
| + | |
| .cell h6 { | | .cell h6 { |
| font-family : Arial; | | font-family : Arial; |
Line 40: |
Line 52: |
| font-weight : bold; | | font-weight : bold; |
| } | | } |
| + | .cell img { |
| + | width : 100%; |
| + | } |
| #description { | | #description { |
| width: 100%; | | width: 100%; |
- | height: 472px; | + | margin-top: 62px; |
| + | margin-bottom: 20px; |
| } | | } |
| #description p { | | #description p { |
| width: 90%; | | width: 90%; |
- | height: 150px; | + | height: 220px; |
| margin: none; | | margin: none; |
| + | margin-bottom: 5px; |
| background: #FF0063; | | background: #FF0063; |
| padding: 5%; | | padding: 5%; |
Line 54: |
Line 71: |
| } | | } |
| #description .portait { | | #description .portait { |
| + | vertical-align: top; |
| width: 120px; | | width: 120px; |
| height: 130px; | | height: 130px; |
| margin: none; | | margin: none; |
| + | background-size: 120px 130px; |
| } | | } |
| + | #arnaud, #florian, #jean, #lucas, #nathan { display: inline-block; } |
| | | |
| + | #arnaudTextDescrip, #florianTextDescrip, #jeanTextDescrip, #lucasTextDescrip, #nathanTextDescrip { display: none; } |
| | | |
| + | #arnaud { background-image: url('https://static.igem.org/mediawiki/2014/c/ce/ArnaudBpb.jpg'); } |
| + | #florian { background-image: url('https://static.igem.org/mediawiki/2014/c/c4/FlorianBpb.jpg'); } |
| + | #jean { background-image: url('https://static.igem.org/mediawiki/2014/d/da/JeanBpb.jpg'); } |
| + | #lucas { background-image: url('https://static.igem.org/mediawiki/2014/4/46/LucasBpb.jpg'); } |
| + | #nathan { background-image: url('https://static.igem.org/mediawiki/2014/c/c9/NathanBpb.jpg'); } |
| + | |
| + | #arnaud:hover { background-image: url('https://static.igem.org/mediawiki/2014/5/5c/ArnaudApb.jpg'); } |
| + | #florian:hover { background-image: url('https://static.igem.org/mediawiki/2014/9/99/FlorianApb.jpg'); } |
| + | #jean:hover { background-image: url('https://static.igem.org/mediawiki/2014/e/ed/JeanApb.jpg'); } |
| + | #lucas:hover { background-image: url('https://static.igem.org/mediawiki/2014/2/28/LucasApb.jpg'); } |
| + | #nathan:hover { background-image: url('https://static.igem.org/mediawiki/2014/8/82/NathanApb.jpg'); } |
| | | |
| #igemLogo { | | #igemLogo { |
Line 65: |
Line 97: |
| height: 140px; | | height: 140px; |
| margin: none; | | margin: none; |
| + | vertical-align: top; |
| } | | } |
| iframe { | | iframe { |
| width : 90%; | | width : 90%; |
| height : 700px; | | height : 700px; |
- | min-width: 1100px; | + | min-width: 1200px; |
| margin-left : 5%; | | margin-left : 5%; |
| + | margin-top : 50px; |
| } | | } |
| + | #pleinepage { |
| + | width : 90%; |
| + | margin-left : 5%; |
| + | margin-top : 50px; |
| + | } |
| + | #headtable { |
| + | width : 92.5%; |
| + | height : 300px; |
| + | background : rgb(255,0,99); |
| + | margin-right : 3.75%; |
| + | margin-left : 3.75%; |
| + | } |
| + | #headtable tr td { |
| + | width : 50%; |
| + | heigth : 100%; |
| + | color : rgb(255,255,255); |
| + | font-size : 14px; |
| + | align : justify; |
| + | } |
| + | #fond { |
| + | width : 100% |
| + | height : 300px; |
| + | background : rgb(255,0,99); |
| + | } |
| + | #headtable tr td b { |
| + | font-size : 18px; |
| + | } |
| + | .text1 { |
| + | text-align : justify; |
| + | margin-left : 5%; |
| + | margin-right : 5%; |
| + | } |
| + | #image1 { |
| + | width : 30%; |
| + | margin-left : 57.5%; |
| + | margin-top : -400px; |
| + | } |
| </style> | | </style> |
| + | |
| + | <script> |
| + | $(document).ready(function(){ |
| + | $('#arnaud').mouseover(function() { |
| + | $('#arnaudTextDescrip').css('display','block'); |
| + | $('#defaultTextDescrip').css('display','none'); |
| + | }).mouseout(function(){ |
| + | $('#arnaudTextDescrip').css('display','none'); |
| + | $('#defaultTextDescrip').css('display','block'); |
| + | }); |
| + | |
| + | $('#florian').mouseover(function() { |
| + | $('#florianTextDescrip').css('display','block'); |
| + | $('#defaultTextDescrip').css('display','none'); |
| + | }).mouseout(function(){ |
| + | $('#florianTextDescrip').css('display','none'); |
| + | $('#defaultTextDescrip').css('display','block'); |
| + | }); |
| + | |
| + | $('#jean').mouseover(function() { |
| + | $('#jeanTextDescrip').css('display','block'); |
| + | $('#defaultTextDescrip').css('display','none'); |
| + | }).mouseout(function(){ |
| + | $('#jeanTextDescrip').css('display','none'); |
| + | $('#defaultTextDescrip').css('display','block'); |
| + | }); |
| + | |
| + | $('#lucas').mouseover(function() { |
| + | $('#lucasTextDescrip').css('display','block'); |
| + | $('#defaultTextDescrip').css('display','none'); |
| + | }).mouseout(function(){ |
| + | $('#lucasTextDescrip').css('display','none'); |
| + | $('#defaultTextDescrip').css('display','block'); |
| + | }); |
| + | |
| + | $('#nathan').mouseover(function() { |
| + | $('#nathanTextDescrip').css('display','block'); |
| + | $('#defaultTextDescrip').css('display','none'); |
| + | }).mouseout(function(){ |
| + | $('#nathanTextDescrip').css('display','none'); |
| + | $('#defaultTextDescrip').css('display','block'); |
| + | }); |
| + | |
| + | }); |
| + | </script> |
| | | |
| <body> | | <body> |
Line 78: |
Line 194: |
| <img src="https://static.igem.org/mediawiki/2014/b/b4/PB14thesmellgame.png" /> | | <img src="https://static.igem.org/mediawiki/2014/b/b4/PB14thesmellgame.png" /> |
| </div> | | </div> |
- | | + | <div id=fond> |
| + | <table id=headtable> |
| + | <tr> |
| + | <td><b><center>AIMS</center></b></br><br> |
| + | <p class=text1>This platform has three concrete aims: to Develop a game for people to characterize smell samples (sweat or artificial odor) with respect to intensity and pleasantness, to create a database that stores the results from game and connects those smell results to the pertinent information from people who give a sample of their own sweat.and to generate graphical results from all precedent data, updated dynamically from the database.</p></td> |
| + | <td><b><center>ACHIEVEMENTS</center></b></br><br> |
| + | <p class=text1><left> <p>The web platform continues to evolve, mostly thanks to the people who give their samples and play the game. At this time, users can give a sample of his own sweat, play with the samples of others and then obtain a position of their smell.The SmellGame project relies on a web platform available here : <br> |
| + | <a target="blank" href='http://smellofus.synbio4all.org/'>http://smellofus.synbio4all.org</a>.</br>Join us and play!</left></li></ul></p></td> |
| + | </tr> |
| + | </table> |
| + | </div> |
| <div id="contentCell"> | | <div id="contentCell"> |
| <div class="cell"> | | <div class="cell"> |
- | <h6>Introduction</h6><br/> | + | <br><br><br><h6>Introduction</h6><br/> |
- | <p>This year, five students from the MSc of BioInformatics & Genomics of the University of Rennes 1 tried to inaugurate the first iGEM team from their university. However, being the first is always fraught with challenges and ultimately, they were not able have their own team this year. The Rennes University students wanted to participate in iGEM to learn about synthetic biology. The team viewed synthetic biology as a scientific discipline with a lot of potential, but still in the nascent stage of development. So they were still determined still participate! These five students asked us (iGEM Paris-Bettencourt team) for advice and found that the Rennes students had computational skills that we lacked. Thus began a mutually beneficial collaboration, which lead to the development of the online program "SmellGame".</p> | + | <p>This year, five students from the MSc of BioInformatics & Genomics of the University of Rennes 1 tried to inaugurate the first iGEM team from their university. However, being the first is always fraught with challenges and ultimately, they were not able have their own team this year. The Rennes University students wanted to participate in iGEM to learn about synthetic biology. The team viewed synthetic biology as a scientific discipline with a lot of potential, but still in the nascent stage of development. So they were still determined still participate! These five students asked us (iGEM Paris-Bettencourt team) for advice and found that the Rennes students had computational skills that we lacked. Thus began a mutually beneficial collaboration, which lead to the development of the online program "SmellGame" within the <a href="https://2014.igem.org/Team:Paris_Bettencourt/Citizen_Science">Citizen Science</a> part of Human Practices of iGEM Bettencourt.</p> |
- | <br />
| + | </div> |
- | <h6>Motivation</h6><br /> | + | <div class=cell> |
- | <p>The Rennes team was motivated to create a web platform to generate, store, and analyze data for the following reasons: | + | <br><br><br><h6>Motivation</h6><br/> |
- | <ul>
| + | <p>The Rennes team was motivated to create a web platform to generate, store, and analyze data for the following reasons: </br> |
- | <li>The project idea is at the intersection of citizen science and big data: it is a perfect case study in the context of the current concerns in Bioinformatics.</li>
| + | - The project idea is at the intersection of citizen science and big data: it is a perfect case study in the context of the current concerns in Bioinformatics.</br> |
- | <li>Enhanced the teams ability to develop web platforms.</li> | + | - Enhanced the teams ability to develop web platforms.</br> |
- | <li>Opportunity to learn new web development tools and professional competancies (Python & Django, Git/GitHub, …).</li> | + | - Opportunity to learn new web development tools and professional competencies (Python & Django, JavaScript, Git/GitHub, …).</br> |
- | <li>The ability to create web tools to analyze data that are fully embedded in the project.</li> | + | - The ability to create web tools to analyze data that are fully embedded in the project.</br> |
- | </ul>
| + | |
| </p> | | </p> |
| </div> | | </div> |
- |
| |
| <div class="cell"> | | <div class="cell"> |
- | <div id="description"> | + | <h6>Design of the Platform</h6><br /> |
- | <p>The Smell Game was developped, with the Paris-Bettencourt team, by a team from Rennes. This team includes three computational biologists ( Florian Thonier, Lucas Le Lann and Nathan Foulquier ), and two bio-informaticians ( Arnaud Ferre and Jean Coquet ).They started this project two month ago after several meeting with the Paris-Bettencourt team. They build this team because of their interest in synthetic biology.</p>
| + | <p>We designed an app for analyzing body odor samples from the public.<br><br> |
- | <img id="igemLogo" src="https://static.igem.org/mediawiki/2014/c/c5/Igem_Logo_NRpb_.png" /><!--
| + | The body odor wheel was the starting point of our design. It references the main note of the different types of body odors. We worked on the interface to make the test user-friendly. It is based on analogies: "if this odor was a … what would it be?". After entering their age and gender, testers have to judge the intensity of the odor, attribute a humor, a note, a name, a title, and finally their appreciation of it. We wanted the results to be both digital and visual. Digital so it is usable data for scientist, visual so it is directly understandable for testers. At the end of each analysis the tester can see what other people thought of the odor they just judged. </li> |
- | --><img class="portait" id="arnaudB" src="https://static.igem.org/mediawiki/2014/8/83/MargueriteBpb.jpg" /><!--
| + | |
- | --><img class="portait" id="arnaudA" src="https://static.igem.org/mediawiki/2014/8/83/MargueriteApb.jpg" hidden/><!--
| + | |
- | --><img class="portait" id="florianB" src="https://static.igem.org/mediawiki/2014/2/26/ArielBpb.jpg" /><!--
| + | |
- | --><img class="portait" id="florianA" src="https://static.igem.org/mediawiki/2014/2/26/ArielApb.jpg" hidden/><!--
| + | |
- | --><img class="portait" id="jeanB" src="https://static.igem.org/mediawiki/2014/3/36/IanBpb.jpg" /><!--
| + | |
- | --><img class="portait" id="jeanA" src="https://static.igem.org/mediawiki/2014/3/36/IanApb.jpg" hidden/><!--
| + | |
- | --><img class="portait" id="lucasB" src="https://static.igem.org/mediawiki/2014/7/72/ZoranBpb.jpg" /><!--
| + | |
- | --><img class="portait" id="lucasA" src="https://static.igem.org/mediawiki/2014/7/72/ZoranApb.jpg" hidden/><!--
| + | |
- | --><img class="portait" id="nathanB" src="https://static.igem.org/mediawiki/2014/d/d0/JakeBpb.jpg" /><!--
| + | |
- | --><img class="portait" id="nathanA" src="https://static.igem.org/mediawiki/2014/d/d0/JakeApb.jpg" hidden/>
| + | |
- | </div>
| + | |
- | </div>
| + | |
- | | + | |
- | <div class="cell">
| + | |
- | <h6>Aims</h6><br />
| + | |
- | <p>This platform has three concrete aims:
| + | |
- | <ul>
| + | |
- | <li> Develop a game for people to characterize smell samples (sweat or artificial odor) with respect to intensity and pleasantness.</li>
| + | |
- | <li> To create a database that stores the results from game and connects those smell results to the pertinent information from people who give a sample of their own sweat.</li>
| + | |
- | <li> Opportunity to learn new web development tools and professional competancies (Python & Django, Git/GitHub, …).</li>
| + | |
- | <li> To generate graphical results from all precedent data, updated dynamically from the database.</li>
| + | |
| </ul> | | </ul> |
| </p> | | </p> |
| </div> | | </div> |
- |
| + | </br> |
| <div class="cell"> | | <div class="cell"> |
- | <h6>Results</h6><br/> | + | <p> |
- | <p>The web platform continues to evolve, in part thank to people who give and play with it. The SmellGame project relies on a web platform available <a href='http://smellofus.synbio4all.org/'>here</a>.<br/> | + | <a target="blank" href='http://smellofus.synbio4all.org/'>http://smellofus.synbio4all.org</a>.</br>Join us and play! |
- | <<< Link to our part in HUMAN PRACTICE ? >>></p> | + | </p> |
| </div> | | </div> |
| + | <img id=image1 src="https://static.igem.org/mediawiki/2014/0/00/BO_WHEEL.png"> |
| </div> | | </div> |
- | | + | <img id=pleinepage src="https://static.igem.org/mediawiki/2014/4/4f/KITcds.png"> |
| <iframe id=website src="http://smellofus.synbio4all.org/smellguess/home/"></iframe> | | <iframe id=website src="http://smellofus.synbio4all.org/smellguess/home/"></iframe> |
| <br/><br/> | | <br/><br/> |
| + | <img id=pleinepage src="https://static.igem.org/mediawiki/2014/9/9a/RENNES.png"><br><br><br><br><br> |
| + | |
| | | |
| </body> | | </body> |
| </html> | | </html> |
| {{:Team:Paris_Bettencourt/Footer}} | | {{:Team:Paris_Bettencourt/Footer}} |
Introduction
This year, five students from the MSc of BioInformatics & Genomics of the University of Rennes 1 tried to inaugurate the first iGEM team from their university. However, being the first is always fraught with challenges and ultimately, they were not able have their own team this year. The Rennes University students wanted to participate in iGEM to learn about synthetic biology. The team viewed synthetic biology as a scientific discipline with a lot of potential, but still in the nascent stage of development. So they were still determined still participate! These five students asked us (iGEM Paris-Bettencourt team) for advice and found that the Rennes students had computational skills that we lacked. Thus began a mutually beneficial collaboration, which lead to the development of the online program "SmellGame" within the Citizen Science part of Human Practices of iGEM Bettencourt.
Motivation
The Rennes team was motivated to create a web platform to generate, store, and analyze data for the following reasons:
- The project idea is at the intersection of citizen science and big data: it is a perfect case study in the context of the current concerns in Bioinformatics.
- Enhanced the teams ability to develop web platforms.
- Opportunity to learn new web development tools and professional competencies (Python & Django, JavaScript, Git/GitHub, …).
- The ability to create web tools to analyze data that are fully embedded in the project.
Design of the Platform
We designed an app for analyzing body odor samples from the public.
The body odor wheel was the starting point of our design. It references the main note of the different types of body odors. We worked on the interface to make the test user-friendly. It is based on analogies: "if this odor was a … what would it be?". After entering their age and gender, testers have to judge the intensity of the odor, attribute a humor, a note, a name, a title, and finally their appreciation of it. We wanted the results to be both digital and visual. Digital so it is usable data for scientist, visual so it is directly understandable for testers. At the end of each analysis the tester can see what other people thought of the odor they just judged.