User:Macowell/podcasts redesign

From 2007.igem.org

< User:Macowell(Difference between revisions)
(first template up! whoo hoo!)
m
 
(27 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style type="text/css">
<style type="text/css">
 +
.column {
 +
width:  400px;
 +
position: relative;
 +
display: block;
 +
float: left;
 +
clear: none;
 +
margin-right: 20px;
 +
}
.podcast{
.podcast{
-
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Tahoma, Arial, sans-serif;
 
-
font-size: 12px;
 
-
line-height: 16px;
 
position: relative;
position: relative;
float: none;
float: none;
border: 1px dotted #c7cbce;
border: 1px dotted #c7cbce;
-
width: 430px;
+
height: 110px;
-
height: 150px;
+
background-color: #f1f1f1;
-
padding: 4px;
+
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{
.podcast h3{
color: #3d3d3d;
color: #3d3d3d;
font-family: Verdana, sans-serif;
font-family: Verdana, sans-serif;
-
margin-top: .2em;
+
margin: .2em 0 .5em;
-
margin-bottom: .5em;
+
padding: 0 0 0 4px;
}
}
.podcast a:link, .podcast a:visited{
.podcast a:link, .podcast a:visited{
text-decoration: none;
text-decoration: none;
 +
color: #3d3d3d;
 +
}
 +
.podcast a:hover {
 +
color: #aaaaff;
 +
}
 +
a:hover.screenshot {
}
}
.podcast .screenshot {
.podcast .screenshot {
float: left;
float: left;
position: relative;
position: relative;
-
height: 106px;
 
-
width: 139px;
 
clear: none;
clear: none;
display: block;
display: block;
Line 37: Line 50:
.podcast .screenshot span {
.podcast .screenshot span {
position: absolute;
position: absolute;
-
bottom: 0px;
+
bottom:0px;
right: 1px;
right: 1px;
-
padding: 3px 20px 0px 26px;
+
padding: 4px 20px 4px 26px;
-
background: url(https://static.igem.org/mediawiki/2007/0/09/Podcast-download-bg.gif) no-repeat 0px 0pt;
+
background: url(https://static.igem.org/mediawiki/2007/0/09/Podcast-download-bg.gif) no-repeat;
-
font-size: 0.85em;
+
font-size: 0.8em;
line-height: 1;
line-height: 1;
}
}
Line 47: Line 60:
padding: 0 0 0 0.5em;
padding: 0 0 0 0.5em;
}
}
-
 
.podcast .description {
.podcast .description {
display: block;
display: block;
position: relative;
position: relative;
float: left;
float: left;
-
width: 250px;
+
width: 220px;
margin-left: 3px;
margin-left: 3px;
padding-left: 1.2em;
padding-left: 1.2em;
 +
}
 +
.screenshot img:hover {
 +
border: 1px solid #aaaaff;
 +
}
}
</style></html>
</style></html>
<html>
<html>
-
<div class="podcast">
+
<div class="column">
-
<h3>
+
 
 +
<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
Drew Endy: Defining Synthetic Biology
-
</h3>
+
</a></h3>
<div class="screenshot">
<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="" />  
<img src="https://static.igem.org/mediawiki/2007/6/6d/IGEMExplainer_EndyQA1_DefineSB_screenshot.jpg" width="133" height="100" alt="" />  
 +
</a>
<span class="download">
<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-iGEMExplainer01DrewEndyDefiningSyntheticBiology399.mov">screen</a>
Line 71: Line 91:
</div>
</div>
<div class="description">
<div class="description">
-
"Make it easier to build things. Define the things you are building with by using standards. Hide biological complexity with abstraction." Drew explains Synthetic Biology from the ground up; from the foundations of genetic engineering laid in the 1970's.
+
"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>
 +
<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>
 +
 +
<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>
</html>

Latest revision as of 02:36, 21 June 2007

Drew Endy: Defining Synthetic Biology

screen ipod
"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

screen ipod
"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?

screen ipod
"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

screen ipod
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

screen ipod
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

screen ipod
Learn how to locate and review a part you (or any other team) has designed on the Registry. Follow along at tutorial 4.3.

Retrieved from "http://2007.igem.org/wiki/index.php/User:Macowell/podcasts_redesign"