Podcasts
From 2007.igem.org
(Difference between revisions)
m (added dotted underling and hover styles to links in description area) |
|||
(22 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | <html> | |
- | + | <!-- START CSS: the following css needs to be on the page to style the podcast divs properly. Diagonal span background based on www.mezzoblue.com/zengarden/alldesigns/ --> | |
+ | <style type="text/css"> | ||
+ | .column { | ||
+ | width: 400px; | ||
+ | position: relative; | ||
+ | display: block; | ||
+ | float: left; | ||
+ | clear: none; | ||
+ | margin-right: 20px; | ||
+ | } | ||
+ | .podcast{ | ||
+ | position: relative; | ||
+ | float: none; | ||
+ | border: 1px dotted #c7cbce; | ||
+ | height: 110px; | ||
+ | background-color: #f1f1f1; | ||
+ | clear: both; | ||
+ | margin-bottom: 42px; | ||
+ | font: 12px/1.4em "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif; | ||
+ | padding: 0; | ||
+ | width: 400px; | ||
+ | } | ||
+ | .podcast h3{ | ||
+ | color: #3d3d3d; | ||
+ | margin: .2em 0 .5em; | ||
+ | padding: 0 0 0 4px; | ||
+ | font-family: Verdana, sans-serif; | ||
+ | font-size: 100%; | ||
+ | } | ||
+ | .podcast a:link, .podcast a:visited{ | ||
+ | text-decoration: none; | ||
+ | color: #3d3d3d; | ||
+ | } | ||
+ | .podcast a:hover { | ||
+ | color: #aaaaff; | ||
+ | } | ||
+ | a:hover.screenshot { | ||
+ | } | ||
+ | .podcast .screenshot { | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | clear: none; | ||
+ | display: block; | ||
+ | margin: 0px 0px 0px 16px; | ||
+ | } | ||
+ | .podcast .screenshot img { | ||
+ | background: #ffffff; | ||
+ | border: 1px solid #c7cbce; | ||
+ | padding: 4px; | ||
+ | } | ||
+ | .podcast .screenshot span { | ||
+ | position: absolute; | ||
+ | bottom:0px; | ||
+ | right: 1px; | ||
+ | padding: 4px 20px 4px 26px; | ||
+ | background: url(https://static.igem.org/mediawiki/2007/0/09/Podcast-download-bg.gif) no-repeat; | ||
+ | font-size: 0.8em; | ||
+ | line-height: 1; | ||
+ | } | ||
+ | .podcast .screenshot span a{ | ||
+ | padding: 0 0 0 0.5em; | ||
+ | } | ||
+ | .podcast .description { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | width: 220px; | ||
+ | margin-left: 3px; | ||
+ | padding-left: 1.2em; | ||
+ | } | ||
+ | .podcast .description a{ | ||
+ | border-bottom: 1px dotted #aaaaff; | ||
+ | } | ||
+ | .podcast .description a:hover{ | ||
+ | border-bottom: 1px dotted #aaaaff; | ||
+ | } | ||
+ | .screenshot img:hover { | ||
+ | border: 1px solid #aaaaff; | ||
+ | } | ||
+ | </style></html> | ||
- | + | <html> | |
- | + | <!-- PODCAST HTML: the following html structures the information for each podcast. Each podcast entry is contained in its own podcast div, which are arranged into two columns by two column divs. The last column must be cleared.--> | |
+ | <div class="column"> | ||
- | + | <div class="podcast"> | |
- | + | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer01DrewEndyDefiningSyntheticBiology399.flv" onclick="window.popup_player_258600 = window.open('http://blip.tv/file/254077/?skin=popup&file_type=flv','post_258600','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | |
- | + | Drew Endy: Defining Synthetic Biology | |
- | + | </a></h3> | |
- | + | <div class="screenshot"> | |
- | + | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer01DrewEndyDefiningSyntheticBiology399.flv" onclick="window.popup_player_258600 = window.open('http://blip.tv/file/254077/?skin=popup&file_type=flv','post_258600','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | |
- | + | <img src="https://static.igem.org/mediawiki/2007/6/6d/IGEMExplainer_EndyQA1_DefineSB_screenshot.jpg" width="133" height="100" alt="" /> | |
- | + | </a> | |
- | + | <span class="download"> | |
- | + | <a href="http://igem.blip.tv/file/get/IgemLabs-iGEMExplainer01DrewEndyDefiningSyntheticBiology399.mov">screen</a> | |
- | + | <a href="http://igem.blip.tv/file/get/IgemLabs-iGEMExplainer01DrewEndyDefiningSyntheticBiology948.mp4">ipod</a> | |
- | + | </span> | |
- | + | </div> | |
- | + | <div class="description"> | |
- | + | "Make it easier to build things. Define the things you are building with by using standards. Hide biological complexity with abstraction." </div> | |
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="podcast"> | ||
+ | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer02DrewEndyBelieveInSyntheticBiology355.flv" onclick="window.popup_player_258502 = window.open('http://blip.tv/file/253979/?skin=popup&file_type=flv','post_258502','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | Drew Endy: Believe in Synthetic Biology | ||
+ | </a></h3> | ||
+ | <div class="screenshot"> | ||
+ | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer02DrewEndyBelieveInSyntheticBiology355.flv" onclick="window.popup_player_258502 = window.open('http://blip.tv/file/253979/?skin=popup&file_type=flv','post_258502','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2007/e/e1/IGEMExplainer_EndyQA2_believer_screenshot.jpg" width="133" height="100" alt="" /> | ||
+ | </a> | ||
+ | <span class="download"> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-iGEMExplainer02DrewEndyBelieveInSyntheticBiology355.mov">screen</a> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-iGEMExplainer02DrewEndyBelieveInSyntheticBiology361.mp4">ipod</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="description"> | ||
+ | "Why should you consider changing how you engineer biological systems from doing ad-hoc research to something that's a more scalable engineering framework?" </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="podcast"> | ||
+ | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer03DrewEndyWhatIsAStandardBiologicalPart197.flv" onclick="window.popup_player_258904 = window.open('http://blip.tv/file/254379/?skin=popup&file_type=flv','post_258904','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | Drew Endy: What is a Standard Biological Part? | ||
+ | </a></h3> | ||
+ | <div class="screenshot"> | ||
+ | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-iGEMExplainer03DrewEndyWhatIsAStandardBiologicalPart197.flv" onclick="window.popup_player_258904 = window.open('http://blip.tv/file/254379/?skin=popup&file_type=flv','post_258904','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2007/5/57/IGEMExplainer_EndyQA3_StandardBiologicalPart_screenshot.jpg" width="133" height="100" alt="" /> | ||
+ | </a> | ||
+ | <span class="download"> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-iGEMExplainer03DrewEndyWhatIsAStandardBiologicalPart197.mov">screen</a> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-iGEMExplainer03DrewEndyWhatIsAStandardBiologicalPart485.mp4">ipod</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="description"> | ||
+ | "What does it mean to have a Standard Biological Part - for example, a BioBrick-standard biological part? Well, why would something like that be important?" </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | |||
+ | <div class="podcast"> | ||
+ | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-Tutorial41AddingAndDocumentingABasicPart403.flv" onclick="window.popup_player_269439 = window.open('http://blip.tv/file/264878/?skin=popup&file_type=flv','post_269439','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | 4.1 - Adding and Documenting a Basic Part | ||
+ | </a></h3> | ||
+ | <div class="screenshot"> | ||
+ | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-Tutorial41AddingAndDocumentingABasicPart403.flv" onclick="window.popup_player_269439 = window.open('http://blip.tv/file/264878/?skin=popup&file_type=flv','post_269439','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2007/9/95/Vodcasts_Tutorial-4-basicpart1.jpg" width="133" height="100" alt="" /> | ||
+ | </a> | ||
+ | <span class="download"> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-Tutorial41AddingAndDocumentingABasicPart403.mov">screen</a> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-Tutorial41AddingAndDocumentingABasicPart607.mp4">ipod</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="description"> | ||
+ | In this screencast Reshma Shetty adds a basic part to the registry. Follow along at <a href="http://partsregistry.org/Help:Team_experience_tutorial#Make_a_part">section 4.1 of the team experience tutorial</a>.</div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="podcast"> | ||
+ | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-Tutorial42EnteringPartSequenceAndFeatures835.flv" onclick="window.popup_player_269484 = window.open('http://blip.tv/file/264923/?skin=popup&file_type=flv','post_269484','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | 4.2 - Entering Part Sequence and Features | ||
+ | </a></h3> | ||
+ | <div class="screenshot"> | ||
+ | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-Tutorial42EnteringPartSequenceAndFeatures835.flv" onclick="window.popup_player_269484 = window.open('http://blip.tv/file/264923/?skin=popup&file_type=flv','post_269484','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2007/5/52/Vodcasts_Tutorial-4-basicpart2.jpg" width="133" height="100" alt="" /> | ||
+ | </a> | ||
+ | <span class="download"> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-Tutorial42EnteringPartSequenceAndFeatures835.mov">screen</a> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-Tutorial42EnteringPartSequenceAndFeatures343.mp4">ipod</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="description"> | ||
+ | Add the sequence and annotate several features,to finish entering the basic part in the registry. Follow along at <a href="http://partsregistry.org/Help:Team_experience_tutorial#Make_a_part">tutorial 4.2</a>.</div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="podcast"> | ||
+ | <h3><a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-tutorial43ReviewingYourPart564.flv" onclick="window.popup_player_269487 = window.open('http://blip.tv/file/264926/?skin=popup&file_type=flv','post_269487','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | 4.3 - Reviewing Your Part | ||
+ | </a></h3> | ||
+ | <div class="screenshot"> | ||
+ | <a rel="enclosure" href="http://blip.tv/file/get/IgemLabs-tutorial43ReviewingYourPart564.flv" onclick="window.popup_player_269487 = window.open('http://blip.tv/file/264926/?skin=popup&file_type=flv','post_269487','toolbar=no,scrollbars=no,directories=no,resizable=yes,width=360,height=305,top=20,left=20,location=no,menubar=no,status=yes,'); return false;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2007/1/1c/Vodcasts_Tutorial-4-basicpart3.jpg" width="133" height="100" alt="" /> | ||
+ | </a> | ||
+ | <span class="download"> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-tutorial43ReviewingYourPart564.mov">screen</a> | ||
+ | <a href="http://blip.tv/file/get/IgemLabs-tutorial43ReviewingYourPart279.mp4">ipod</a> | ||
+ | </span> | ||
+ | </div> | ||
+ | <div class="description"> | ||
+ | Learn how to locate and review a part you (or any other team) has designed on the Registry. Follow along at <a href="http://partsregistry.org/Help:Team_experience_tutorial#Make_a_part">tutorial 4.3</a>.</div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div style="clear:both"></div> | ||
+ | </html> |
Latest revision as of 03:21, 21 June 2007
Drew Endy: Defining Synthetic Biology
"Make it easier to build things. Define the things you are building with by using standards. Hide biological complexity with abstraction."
Drew Endy: Believe in Synthetic Biology
"Why should you consider changing how you engineer biological systems from doing ad-hoc research to something that's a more scalable engineering framework?"
Drew Endy: What is a Standard Biological Part?
"What does it mean to have a Standard Biological Part - for example, a BioBrick-standard biological part? Well, why would something like that be important?"
4.1 - Adding and Documenting a Basic Part
In this screencast Reshma Shetty adds a basic part to the registry. Follow along at section 4.1 of the team experience tutorial.
4.2 - Entering Part Sequence and Features
Add the sequence and annotate several features,to finish entering the basic part in the registry. Follow along at tutorial 4.2.
4.3 - Reviewing Your Part
Learn how to locate and review a part you (or any other team) has designed on the Registry. Follow along at tutorial 4.3.