Team:Edinburgh/newinformatics(globetutorial)

 a:link { color: #1b4a22; text-decoration:none; } a:visited { color: #1b4a22; text-decoration:none; } a:active { color: #1b4a22; text-decoration:none; } a:hover { color: #1b4a22; text-decoration:none; } body { margin:0; padding:0; background: #868eb1; }

background: #868eb1; border-left: 0px; border-right: 0px; }
 * 1) content {

height:98px; }
 * 1) top-section {


 * 1) menubar {}

display:none; }
 * 1) contentSub {

display:none; }
 * 1) siteSub {

display:none; }
 * 1) search-controls {

.firstHeading { display:none; }

margin-top:30px; }
 * 1) search-controls {

display:none; border: 0px; background-color: #dae7b4; width:950px; }
 * 1) footer-box {

float:left; height:100%; width:0%; }
 * 1) leftspace {

float:left; width:150px; margin-top:75px; border-top:6px solid #CA9A38; border-bottom:6px solid #CA9A38; }
 * 1) mainmenu {

background-color:#dae7b4; float:left; width:150px; margin-top:320px; border-top:6px solid #CA9A38; border-bottom:6px solid #CA9A38; font-size:11px; font-family:Arial; color:#556B2F; }
 * 1) Upgradebox {

padding:5%; }
 * 1) Upgradenote {

float:left; height:100%; width:70%; }
 * 1) Edinburghcontainer {

margin-bottom:30px; margin-left:251px; text-decoration: none }
 * 1) contentmenu {

padding-top:30px; padding-right:20px; margin-bottom:2px; background-color: #e5e7e2; height:1450px; width:795px; font-size:12px; text-align:justify; }
 * 1) Edinburghcontent {

float:left; text-align:justify; }
 * 1) Edinburghcontent #left {

float:right; text-align:justify; }
 * 1) Edinburghcontent #right {

height:30px; background-color:#252833; width:815px; }
 * 1) bottombox {

font-family: sans-serif; font-size:12px; background-color:#474b5b; height:20px; width:150px; margin-top:2px; margin-bottom:2px; padding-top:5px; text-align:center; }
 * 1) menuitem {

width: 750px; }
 * 1) nav {

text-decoration:none; color:white; }
 * 1) menuitem a {

padding-top:5px; text-decoration:none; color:white; }
 * 1) bottomboxtext {

bottom:0px; height:30px; float:right; margin-top:15px; }
 * 1) bottomlinks {

float:right; margin-left:20px; }
 * 1) link {

text-decoration:none; color:#875a0c; font-size:11px; font-weight:bold; }
 * 1) link a {

Our WIKI is best viewed with (click title):

* Internet Explorer 8

* Firefox 3

* Adobe Flash Player 10

If you encounter any visual problems please upgrade your browser to the latest version in order to get the most out of our WIKI. Thank you!  Introduction   Concepts and Technology   Globe Tutorial   iGem WIKI Hacks   Blog Entry</a> <ul id="nav" class="dropdown dropdown-horizontal"> <li>Home</a></li>

<li>Biology</a> <ul> <li>Overall Description and Design</a></li> <li>TNT-Sensing Pathway</a></li> <li>Nitrite/Nitrate-Sensing Pathway</a></li> <li>Biobrick Parts</a></li> <li>Results</a></li> <li>Problem Solving and Tips</a></li> <li>Materials and Methods</a></li> <li>References</a></li> </ul> </li>

<li>Modelling</a> <ul> <li>Overall Description</a></li> <li>Gene Regulatory Network</a></li> <li>Real Life Modelling</a></li> <li>Scale Up</a></li> <li>Results</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/modelling%28references%29">References</a></li> </ul> </li>

<li><a href="http://2009.igem.org/Team:Edinburgh/ethics%28publicperception%29" class="dir">Underlying Philosophy</a> <ul> <li><a href="http://2009.igem.org/Team:Edinburgh/ethics%28publicperception%29">Public Perception</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/ethics%28legislationissues%29">Legislation issues</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/ethics%28biosafety%29">Biosafety</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/ethics%28summary%29">DEMOCS Card Game</a></li> </ul> </li>

<li><a href="http://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29" class="dir">Informatics</a> <ul> <li><a href="http://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29">Introduction</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/newinformatics%28globetutorial%29">Globe Tutorial</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/newinformatics%28igemwikhacks%29">iGEM WIKI Hacks</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29">Blog Entry</a></li> </ul> </li>

<li><a href="http://2009.igem.org/Team:Edinburgh/Notebook">Notebook</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28teammembers%29" class="dir">Team</a> <ul> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28teammembers%29">Team Members</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28advisors%29">Advisors</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28supervisors%29">Supervisors</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28gallery%29">Gallery</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28contacts%29">Contacts</a></li> <li><a href="http://2009.igem.org/Team:Edinburgh/team%28acknowledgements%29">Acknowledgements</a></li> </ul> </li> </ul> <font color="#323131" style="font-size:14px;float:left;margin-left:20px;margin-top:20px;">New Informatics - Globe Tutorial

<img src="http://2009.igem.org/wiki/images/6/68/EdinburghPagemarker.jpg" style="margin-left:766px;">

<div id="abstarct" style="background-color:#e4f5ca;border:1px solid #595151;width:755px;height:220px;margin-top:10px;margin-left:20px;font-size:11px;text-align:justify;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;">  Abstract 

It takes time to write interactive elements. So, if it is possible to find the ready one or buy the ready one and then adapt it to your needs - it is much smarter way of doing. It might take one person several weeks of work to implement very small interactive piece which can be easily bought in Internet for 10$ with very flexible copyrights.

However to be able to adapt ready source codes for your needs you should have understanding of how those thing are built from scratch. I will show you tutorial explaining how you can built interactive globe which can be used for representing dozens types of different data. This globe is the very basic version but this version is absolutely ready for any extra developemnts you might only imagine.

<font color="green" style="float:right"> JD

<img src="http://2009.igem.org/wiki/images/0/06/GlobeTutorialGoal.jpg" style="margin-left:-5px;margin-top:20px;">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="775px" height="775px"> <param name="movie" value="http://2009.igem.org/wiki/images/4/4e/Globe.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <embed src="http://2009.igem.org/wiki/images/4/4e/Globe.swf" quality="high" bgcolor="black" width="775px" height="750px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

Our goal is very simple. We want to get info about each country in somewhat interactive way. In this globe you can change covering maps. This globe is fully spinable and you can zoom it by mouse wheel if your mouse pointer is somewhere on the globe. This globe als has an action set to it. If you double click somwhere in North Africa globe will become very small. To bring it back to the needed size use the mouse wheel.

<a href="http://2009.igem.org/wiki/images/4/4e/Globe.swf">Direct link to swf file</a>

<img src="http://2009.igem.org/wiki/images/b/be/HowIsItDone.jpg" style="margin-left:-5px;margin-top:20px;">

Unfortunately, due to real lack of time I am not able to give detailed explanations, that is why I will just give you the sources and links. I am really sorry about that, but anyway it is better than nothing. Everything in source codes is very straightforward, so you can easily use it and adapt as you wish. If you need any help I would be happy to help. Just send me an email (you can find one in Team Members section and I am JD).

Amazing globe tutorial with explanations can be found here: <a href="http://www.adobe.com/newsletters/edge/june2008/articles/article2/">Adobe Edge Tutorial </a>.

Flex project of given globe can be downloaded here:

<a href="http://rapidshare.com/files/296029090/Globe.rar.html">Globe sources</a>

Good luck with your experiments and ideas!

Edinburgh University iGEM Team 2009