(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | {{ | + | {{BU17_template_global}} |
+ | {{BU17_template_menubar}} | ||
<html> | <html> | ||
− | < | + | <head> |
− | + | <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> | |
− | < | + | <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet"> |
− | <p> | + | <style> |
+ | #top_menu_inside ul li > a { /* RECOLORS IGEM MENU */ | ||
+ | color: #a9a9a9 !important; | ||
+ | } | ||
+ | .menu-type { | ||
+ | font-family: 'Roboto Condensed', sans-serif; | ||
+ | letter-spacing: 5 pt !important; | ||
+ | font-size: 14pt !important; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 700; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .wide-heading-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 24pt !important; | ||
+ | letter-spacing: 5pt !important; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: bold; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .body-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 16pt !important; | ||
+ | text-decoration: none !important; | ||
+ | line-height: 2; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .caption-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 18pt !important; | ||
+ | text-decoration: none !important; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .inline-heading-type { | ||
+ | font-family: 'Roboto', sans-serif !important; | ||
+ | font-size: 20pt !important; | ||
+ | font-weight: bold !important; | ||
+ | text-decoration: none !important; | ||
+ | line-height: 2 pt !important; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .float-left { | ||
+ | float: left !important; | ||
+ | } | ||
+ | .float-right { | ||
+ | float: right !important; | ||
+ | } | ||
+ | .align-right { | ||
+ | text-align: right !important; | ||
+ | } | ||
+ | .align-center { | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | .indented { | ||
+ | text-indent: 80px; | ||
+ | } | ||
+ | .mainwrap { | ||
+ | width: 90%; | ||
+ | max-width: 960px; | ||
+ | min-width: 360px; | ||
+ | margin: 0 auto; | ||
+ | top:0; | ||
+ | display: none; | ||
+ | } | ||
+ | body { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2017/c/c1/T--BostonU--seaport.png"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
+ | } | ||
+ | #backgroundimage1 { | ||
+ | margin-top: -85px; | ||
+ | background-image: url("#"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: cover; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
+ | height: 360px; | ||
+ | width: 100%; | ||
+ | align-content:center; | ||
+ | text-align:center | ||
+ | vertical-align:middle; | ||
+ | } | ||
+ | #backgroundimage1 p { | ||
+ | top: 40%; | ||
+ | color: #8C181B; | ||
+ | position: relative; | ||
+ | } | ||
+ | .background-gradient-down { | ||
+ | height: 360px; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(239,239,238,0) 0%, rgba(239,239,238,1) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .background-gradient-up { | ||
+ | height: 360px; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .background-gradient-both { | ||
+ | height: 360px; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+50,efefee+100&1+0,0+50,1+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 50%, rgba(239,239,238,1) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | #panel1 { | ||
+ | background: #EFEFEE; | ||
+ | width: 100%; | ||
+ | color: #1d1d1d; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #backgroundimage2 { | ||
+ | background-image: url("#"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: cover; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
+ | height: 360px; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | #backgroundimage2 p { | ||
+ | top: 40%; | ||
+ | color: #8C181B; | ||
+ | } | ||
+ | #protocol-accordion .ui-accordion-content { | ||
+ | background: #FFFFFF; | ||
+ | color: #A9A9A9; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | #protocol-accordion .ui-accordion-content > * { | ||
+ | margin: 0; | ||
+ | padding: 40px; | ||
+ | } | ||
+ | .link-slideup { | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .link-slideup a { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | outline: none; | ||
+ | color: #D45B5C; | ||
+ | vertical-align: bottom; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .link-slideup a::before, .link-slideup a::after { | ||
+ | pointer-events: none; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .link-slideup a { | ||
+ | overflow: hidden; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | .link-slideup a::before { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: -1; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #A9A9A9; | ||
+ | opacity: 1; | ||
+ | content: ''; | ||
+ | -webkit-transition: -webkit-transform 0.2s; | ||
+ | transition: transform 0.2s; | ||
+ | -webkit-transform: translateY(95%); | ||
+ | transform: translateY(95%); | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | .link-slideup a:hover::before, .link-slideup a:focus::before { | ||
+ | -webkit-transform: translateY(0); | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="backgroundimage1"><div class="background-gradient-down"> | ||
+ | <p class="wide-heading-type mainwrap align-center">INTEGRATED HUMAN PRACTICES</p> | ||
+ | </div></div> | ||
+ | <div id="panel1" class="link-slideup"> | ||
+ | <p class="inline-heading-type mainwrap">Dr. Zaman: Finding our Project's Place</p> | ||
+ | <p class="body-type mainwrap indented">We decided to talk to a Boston University professor involved in cancer and global health research, hoping to gain insight on the feasibility of our intended future applications of the project as we had no experience in those fields. Dr. Muhammad Zaman shared with us his perspective on our project and its potential contribution to human health development.</p> | ||
+ | <p class="body-type mainwrap indented">Going into the meeting our goal for the project was to work towards a low-cost portable diagnostic device that would test for various disease-indicative mRNAs to be used in low-resource areas. Dr. Zaman provided us with a more realistic perspective of the actual application of our technology. | ||
+ | Dr. Zaman covered two major topics in our discussion with him: accessibility and robustness.</p> | ||
+ | <p class="body-type mainwrap indented">Accessibility, in that our device should be able to be used successfully by local people, who have little to no experience with disease diagnostics. He said that we need to take into account that there might be no trained professionals in the area or that these professionals might introduce methods and techniques to the locals and then leave. The locals need to be able to continue with applying these methods. In addition, even integrating a new technology into the workflow of a medical professional can be difficult. When designing new technologies, it is important that they fit easily into the current structure so that they can be adapted with ease.</p> | ||
+ | <p class="body-type mainwrap indented">With regards to robustness, Dr. Zaman brought up a number of technical difficulties our technology might encountered when utilized outside of the lab. One issue when working with RNAs are RNase proteins that degrade RNA. These proteins are present virtually everywhere, and could easily contaminate the device or patient samples outside of a sterile environment, disrupting the diagnostic process. The possibility of there being sterile locations in these low-resource areas is little to none. Our device must be able to work perfectly in homes or on the street at a fair.</p> | ||
+ | <p class="body-type mainwrap indented">When talking to Dr. Zaman about the existing toehold paper-based cell free experiment used by the Collins lab for Detecting Zika Virus, he said that no global health organization has yet to adapt a paper-based diagnostic test. An interesting point he mentioned was that it is unrealistic for global health organizations like Medecins sans frontieres to be willing to take the extra time to train employees when the public might not accept that a paper based design would work. He said the same could be said of a microfluidic device.</p> | ||
+ | <p class="body-type mainwrap indented">Dr. Zaman finished his discussion with us by saying we need to choose whether we want work towards a quality diagnostic device or to make our project a foundational advance in molecular biology. If we decided to pursue a diagnostic device, our direction would need to be very focused on making the device ideal for the detection of a single disease. After this conversation with Dr. Zaman we decided to officially make our project a foundational advance, focused on improving the underlying principles of the proposed diagnostic device so that downstream public health applications can be more dependable.</p> | ||
</div> | </div> | ||
− | <div | + | <div id="backgroundimage2"><div class="background-gradient-up"> |
− | + | </div></div> | |
− | <div class=" | + | <script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */ |
− | + | $(document).ready(function () { | |
− | + | $('.mainwrap').fadeIn(1000); | |
− | + | }); | |
− | + | </script> | |
− | + | </body> | |
− | + | ||
− | + | ||
− | </div | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</html> | </html> |
Revision as of 14:59, 21 October 2017
INTEGRATED HUMAN PRACTICES