Team:Buenos Aires/ objetive

From 2013.igem.org

(Difference between revisions)
(Created page with "<html lang="en"> <head> <title>iGem Buenos Aires</title> <meta charset=utf-8> <meta name="description" content="iGem Buenos Aires" /> <meta name="ke...")
 
(43 intermediate revisions not shown)
Line 1: Line 1:
-
<html lang="en">
+
<div id="external">
-
    <head>
+
= Objetives =
-
        <title>iGem Buenos Aires</title>
+
The project will focus on the development of a specific water biosensor, but with a modular and scalable approach. Thereby you could easily afford multiple measurements with the very same device.
-
<meta charset=utf-8>
+
-
        <meta name="description" content="iGem Buenos Aires" />
+
-
        <meta name="keywords" content="biosensing, igem, buenos aires, UBA, arsenic"/>
+
-
<link rel="stylesheet" type="text/css" rel="stylesheet" href="https://2013.igem.org/Team:Buenos_Aires/css/style.css?action=raw&ctype=text/css" />
+
-
<link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" />
+
The device will be designed in a way that its collected data will be easily accessible via a web interface, and later it could be transferred to the relevant agencies upon request.
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.css?action=raw&ctype=text/css" />
+
 +
At the end of this project we expect to have a prototype of measuring device and a diagram of a system for the distribution, collection and centralization of data. 
-
<style type ='text/css'>
+
The project will focus on the measurement of a primary pollutant: arsenic. However, its modular and scalable design provides an easy way to incorporate various contaminants already identified, such as nitrate / nitrite, lead and hydrocarbons.
-
/* Wiki Hacks - START */
+
-
/* Author: Pieter van Boheemen */
+
-
/* Team: TU Delft */
+
-
#globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
+
-
#content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: scroll; height:100%;overflow:hidden;}
+
-
#bodyContent {background-color:transparent; border: none; padding:0; margin:0; width:100%; height:100%;}
+
-
#top-section {width:100%;background-color:transparent; height: 15px; margin: 10px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important;
+
-
padding:0; border: none; font-size: 10px;}
+
-
#p-logo { height:1px; overflow:scroll; display: none;}
+
-
#search-controls { overflow:hidden; display:block; background: none; position: absolute; top: 100px; right: 40px;}
+
-
#footer-box {position:relative; width: 99%; margin: -10px auto 0 auto; padding: 20px 0;}
+
-
.visualClear { display: none; }
+
-
#footer { border: none; width: 100%; margin: 0 auto; padding: 0;}
+
-
.firstHeading { display: none;}
+
-
#f-list a { color: #333; font-size: 10px;}
+
-
#f-list a:hover { color: #666;}
+
-
.printfooter { display: none; }
+
-
#footer ul { margin: 0; padding: 0;}
+
-
#footer ul li { margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0;}
+
-
#search-controls { display:none; }
+
-
h3#siteSub { display: none;}
+
-
#contentSub {display: none;}
+
-
p:first-child { display: none;}
+
-
/* Wiki Hacks - END */
+
-
 
+
-
 
+
-
li{
+
-
color:#FFF;
+
-
}
+
-
 
+
-
h1{
+
-
color:#FFF;
+
-
border:none;
+
-
}
+
-
 
+
-
#texto{
+
-
background:#111;
+
-
position:relative;
+
-
text-align:justify;
+
-
font-size:18px;
+
-
text-transform:none;
+
-
border-bottom:1px dotted #333;
+
-
padding:1&nbsp;30px 10px 0 10px;
+
-
text-indent:20px;
+
-
margin-bottom:15px;
+
-
margin-left:20%;
+
-
margin-right:20%;
+
-
opacity:0.8;
+
-
}
+
-
 
+
-
H1{
+
-
font-size:35px;
+
-
text-align:center;
+
-
}
+
-
 
+
-
.ac_bgimage{
+
-
background:#656500;
+
-
}
+
-
 
+
-
</style>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
    </head>
+
-
    <body>
+
-
 
+
-
<div id="contenedor">
+
-
 
+
-
<div id="ac_background" class="ac_background">
+
-
<img class="ac_bgimage" src="https://static.igem.org/mediawiki/2013/9/91/Pattern.png" alt="Background"/>
+
-
<div class="ac_overlay"></div>
+
-
<div class="ac_loading"></div>
+
-
</div>
+
-
 
+
-
<div id="texto">
+
-
 
+
-
<H1><img align="middle" src="https://static.igem.org/mediawiki/2013/0/01/Logo-igem-project.png"> <p>Objectives</p> </H1> <a class="volver" href="javascript:$.pageslide.close()"> (Back) </a>
+
-
<p> The project will focus on the <b>development of a specific water biosensor </b>, but with a modular and scalable approach. Thereby you could easily afford multiple measurements with the very same device.</p>
+
-
 
+
-
<p>The device will be designed in a way that its collected data will be easily accessible via a web interface, and later it could be transferred to the relevant agencies upon request. </p>
+
-
 
+
-
<p> At the end of this project we expect to have a prototype of measuring device and a diagram of a system for the distribution, collection and centralization of data. </p>
+
-
 
+
-
<p> The project will focus on the measurement of a primary pollutant: <b> arsenic </b>. However, its <b>modular and scalable design</b> provides an easy way for incorporate various contaminants already identified, such as nitrate / nitrite, lead and hydrocarbons. </p>
+
-
+
-
<p>With the data collected is expected that <b>any user with minimal training</b> (image-based Instruction) can easily and quickly determine the <b>presence and level of the contaminant</b> on his water consumption. Also with the systematic use of this tool by the enforcement authorities, can implement specific public policies based on current and reliable information.</p>
+
-
<p> <a class="volver" href="javascript:$.pageslide.close()"> (Back) </ a> </ p>
+
-
 
+
 +
With the data collected is expected that any user with minimal training (with an image-based Instruction) could easily and quickly determine the presence and level of the contaminant on his water consumption. Also with the systematic use of this tool by the enforcement authorities, specific public policies could be implemented based on current and reliable information.
</div>
</div>
-
 
-
<!-- The JavaScript -->
 
-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
 
-
<script type="text/javascript" src="http://jquery-swip.googlecode.com/svn-history/r4/trunk/jquery.easing.1.3.js"></script>
 
-
 
-
    <script src="https://2013.igem.org/Team:Buenos_Aires/css/jquery.pageslide.js?action=raw&ctype=text/js"></script>
 
-
  <script>
 
-
        /* Default pageslide, moves to the right */
 
-
        $(".first").pageslide();
 
-
       
 
-
        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
 
-
        $(".second").pageslide({ direction: "left", modal: true });
 
-
    </script>
 
-
 
-
 
-
<script type="text/javascript">
 
-
$(function() {
 
-
var $ac_background = $('#ac_background'),
 
-
$ac_bgimage = $ac_background.find('.ac_bgimage'),
 
-
$ac_loading = $ac_background.find('.ac_loading'),
 
-
 
-
$ac_content = $('#ac_content'),
 
-
$title = $ac_content.find('h1'),
 
-
$menu = $ac_content.find('.ac_menu'),
 
-
$mainNav = $menu.find('ul:first'),
 
-
$menuItems = $mainNav.children('li'),
 
-
totalItems = $menuItems.length,
 
-
$ItemImages = new Array();
 
-
 
-
/*
 
-
for this menu, we will preload all the images.
 
-
let's add all the image sources to an array,
 
-
including the bg image
 
-
*/
 
-
$menuItems.each(function(i) {
 
-
$ItemImages.push($(this).children('a:first').attr('href'));
 
-
});
 
-
$ItemImages.push($ac_bgimage.attr('src'));
 
-
 
 
-
 
-
var Menu = (function(){
 
-
var init = function() {
 
-
loadPage();
 
-
initWindowEvent();
 
-
},
 
-
loadPage = function() {
 
-
/*
 
-
1- loads the bg image and all the item images;
 
-
2- shows the bg image;
 
-
3- shows / slides out the menu;
 
-
4- shows the menu items;
 
-
5- initializes the menu items events
 
-
*/
 
-
$ac_loading.show();//show loading status image
 
-
$.when(loadImages()).done(function(){
 
-
$.when(showBGImage()).done(function(){
 
-
//hide the loading status image
 
-
$ac_loading.hide();
 
-
$.when(slideOutMenu()).done(function(){
 
-
$.when(toggleMenuItems('up')).done(function(){
 
-
initEventsSubMenu();
 
-
});
 
-
});
 
-
});
 
-
});
 
-
},
 
-
showBGImage = function() {
 
-
return $.Deferred(
 
-
function(dfd) {
 
-
//adjusts the dimensions of the image to fit the screen
 
-
adjustImageSize($ac_bgimage);
 
-
$ac_bgimage.fadeIn(1000, dfd.resolve);
 
-
}
 
-
).promise();
 
-
},
 
-
slideOutMenu = function() {
 
-
/* calculate new width for the menu */
 
-
var new_w = $(window).width() - $title.outerWidth(true);
 
-
return $.Deferred(
 
-
function(dfd) {
 
-
//slides out the menu
 
-
$menu.stop()
 
-
.animate({
 
-
width : new_w + 'px'
 
-
}, 700, dfd.resolve);
 
-
}
 
-
).promise();
 
-
},
 
-
/* shows / hides the menu items */
 
-
toggleMenuItems = function(dir) {
 
-
return $.Deferred(
 
-
function(dfd) {
 
-
/*
 
-
slides in / out the items.
 
-
different animation time for each one.
 
-
*/
 
-
$menuItems.each(function(i) {
 
-
var $el_title = $(this).children('a:first'),
 
-
marginTop, opacity, easing;
 
-
if(dir === 'up'){
 
-
marginTop = '0px';
 
-
opacity = 1;
 
-
easing = 'easeOutBack';
 
-
}
 
-
else if(dir === 'down'){
 
-
marginTop = '60px';
 
-
opacity = 0;
 
-
easing = 'easeInBack';
 
-
}
 
-
$el_title.stop()
 
-
.animate({
 
-
marginTop : marginTop,
 
-
opacity : opacity
 
-
}, 200 + i * 200 , easing, function(){
 
-
if(i === totalItems - 1)
 
-
dfd.resolve();
 
-
});
 
-
});
 
-
}
 
-
).promise();
 
-
},
 
-
initEventsSubMenu = function() {
 
-
$menuItems.each(function(i) {
 
-
var $item = $(this), // the <li>
 
-
$el_title = $item.children('a:first'),
 
-
el_image = $el_title.attr('href'),
 
-
$sub_menu = $item.find('.ac_subitem'),
 
-
$ac_close = $sub_menu.find('.ac_close');
 
-
 
-
/* user clicks one item : appetizers | main course | desserts | wines | specials */
 
-
$el_title.bind('click.Menu', function(e) {
 
-
$.when(toggleMenuItems('down')).done(function(){
 
-
openSubMenu($item, $sub_menu, el_image);
 
-
});
 
-
return false;
 
-
});
 
-
/* closes the submenu */
 
-
$ac_close.bind('click.Menu', function(e) {
 
-
$.pageslide.close();
 
-
toggleMenuItems('up');
 
-
$(".ac_subitem").css("height", "0px");
 
-
return false;
 
-
});
 
-
});
 
-
},
 
-
openSubMenu = function($item, $sub_menu, el_image) {
 
-
$sub_menu.stop()
 
-
.animate({
 
-
height : '400px',
 
-
marginTop : '-200px'
 
-
}, 400, function() {
 
-
//the bg image changes
 
-
showItemImage(el_image);
 
-
});
 
-
},
 
-
/* changes the background image */
 
-
showItemImage = function(source) {
 
-
//if its the current one return
 
-
if($ac_bgimage.attr('src') === source)
 
-
return false;
 
-
 
-
var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
 
-
$itemImage.insertBefore($ac_bgimage);
 
-
adjustImageSize($itemImage);
 
-
$ac_bgimage.fadeOut(1500, function() {
 
-
$(this).remove();
 
-
$ac_bgimage = $itemImage;
 
-
});
 
-
$itemImage.fadeIn(1500);
 
-
},
 
-
/*
 
-
on window resize, ajust the bg image dimentions,
 
-
and recalculate the menus width
 
-
*/
 
-
initWindowEvent = function() {
 
-
/* on window resize set the width for the menu */
 
-
$(window).bind('resize.Menu' , function(e) {
 
-
adjustImageSize($ac_bgimage);
 
-
/* calculate new width for the menu */
 
-
var new_w = $(window).width() - $title.outerWidth(true);
 
-
$menu.css('width', new_w + 'px');
 
-
});
 
-
},
 
-
/* makes an image "fullscreen" and centered */
 
-
adjustImageSize = function($img) {
 
-
var w_w = $(window).width(),
 
-
w_h = $(window).height(),
 
-
r_w = w_h / w_w,
 
-
i_w = $img.width(),
 
-
i_h = $img.height(),
 
-
r_i = i_h / i_w,
 
-
new_w,new_h,
 
-
new_left,new_top;
 
-
 
-
if(r_w > r_i){
 
-
new_h = w_h;
 
-
new_w = w_h / r_i;
 
-
}
 
-
else{
 
-
new_h = w_w * r_i;
 
-
new_w = w_w;
 
-
}
 
-
 
-
$img.css({
 
-
width : new_w + 'px',
 
-
height : new_h + 'px',
 
-
 
-
});
 
-
},
 
-
/* preloads a set of images */
 
-
loadImages = function() {
 
-
return $.Deferred(
 
-
function(dfd) {
 
-
var total_images = $ItemImages.length,
 
-
loaded = 0;
 
-
for(var i = 0; i < total_images; ++i){
 
-
$('<img/>').load(function() {
 
-
++loaded;
 
-
if(loaded === total_images)
 
-
dfd.resolve();
 
-
}).attr('src' , $ItemImages[i]);
 
-
}
 
-
}
 
-
).promise();
 
-
};
 
-
 
-
return {
 
-
init : init
 
-
};
 
-
})();
 
-
 
-
/*
 
-
call the init method of Menu
 
-
*/
 
-
Menu.init();
 
-
});
 
-
</script>
 
-
    </body>
 
-
</html>
 

Latest revision as of 18:43, 11 July 2013

Objetives

The project will focus on the development of a specific water biosensor, but with a modular and scalable approach. Thereby you could easily afford multiple measurements with the very same device.

The device will be designed in a way that its collected data will be easily accessible via a web interface, and later it could be transferred to the relevant agencies upon request.

At the end of this project we expect to have a prototype of measuring device and a diagram of a system for the distribution, collection and centralization of data.

The project will focus on the measurement of a primary pollutant: arsenic. However, its modular and scalable design provides an easy way to incorporate various contaminants already identified, such as nitrate / nitrite, lead and hydrocarbons.

With the data collected is expected that any user with minimal training (with an image-based Instruction) could easily and quickly determine the presence and level of the contaminant on his water consumption. Also with the systematic use of this tool by the enforcement authorities, specific public policies could be implemented based on current and reliable information.

Retrieved from "http://2013.igem.org/Team:Buenos_Aires/_objetive"