"
Team:Edinburgh/newinformatics(globetutorial)
From 2009.igem.org
(Difference between revisions)
Clonerohin (Talk | contribs) |
|||
| (32 intermediate revisions not shown) | |||
| Line 88: | Line 88: | ||
border-top:6px solid #CA9A38; | border-top:6px solid #CA9A38; | ||
border-bottom:6px solid #CA9A38; | border-bottom:6px solid #CA9A38; | ||
| + | } | ||
| + | |||
| + | #Upgradebox { | ||
| + | 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; | ||
| + | } | ||
| + | |||
| + | #Upgradenote { | ||
| + | padding:5%; | ||
} | } | ||
| Line 107: | Line 123: | ||
margin-bottom:2px; | margin-bottom:2px; | ||
background-color: #e5e7e2; | background-color: #e5e7e2; | ||
| - | height: | + | height:1450px; |
width:795px; | width:795px; | ||
| - | font-size: | + | font-size:12px; |
text-align:justify; | text-align:justify; | ||
} | } | ||
| Line 183: | Line 199: | ||
<div id=main> | <div id=main> | ||
<div id=leftspace> | <div id=leftspace> | ||
| + | <div id="Upgradebox"> | ||
| + | <div id="Upgradenote" align="left"> | ||
| + | Our WIKI is best viewed with (click title):<br /><br /> | ||
| + | * <a target="_blank" style="color:#00008B;text-decoration:underline;" href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer 8</a> <br /> | ||
| + | * <a target="_blank" style="color:#00008B;text-decoration:underline;" href="http://www.mozilla.com/en-US/">Firefox 3</a><br /> | ||
| + | * <a target="_blank" style="color:#00008B;text-decoration:underline;" href="http://get.adobe.com/flashplayer/">Adobe Flash Player 10</a> <br /><br /> | ||
| + | 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! | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
<div id=mainmenu> | <div id=mainmenu> | ||
| Line 189: | Line 214: | ||
<div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28globetutorial%29"> Globe Tutorial </a> </div> | <div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28globetutorial%29"> Globe Tutorial </a> </div> | ||
<div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28igemwikhacks%29"> iGem WIKI Hacks </a> </div> | <div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28igemwikhacks%29"> iGem WIKI Hacks </a> </div> | ||
| - | <div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29"> | + | <div id=menuitem > <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29"> Blog Entry</a> </div> |
</div> | </div> | ||
<div id=Edinburghcontainer> | <div id=Edinburghcontainer> | ||
| Line 234: | Line 259: | ||
<li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28globetutorial%29">Globe Tutorial</a></li> | <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28globetutorial%29">Globe Tutorial</a></li> | ||
<li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28igemwikhacks%29">iGEM WIKI Hacks</a></li> | <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28igemwikhacks%29">iGEM WIKI Hacks</a></li> | ||
| - | <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29"> | + | <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29">Blog Entry</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
| Line 260: | Line 285: | ||
<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;"> | <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;"> | ||
<b> Abstract </b> <br /><br /> | <b> Abstract </b> <br /><br /> | ||
| - | + | 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. | |
| - | + | <br /><br /> | |
| - | + | 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. | |
| + | <br /><br /> | ||
| + | <font color="green" style="float:right"> JD </font> | ||
</div> | </div> | ||
| - | <img src="https://static.igem.org/mediawiki/2009/ | + | <img src="https://static.igem.org/mediawiki/2009/0/06/GlobeTutorialGoal.jpg" style="margin-left:-5px;margin-top:20px;"> |
<div id="text" style="margin-left:20px;margin-top:10px;padding-bottom:15px;"> | <div id="text" style="margin-left:20px;margin-top:10px;padding-bottom:15px;"> | ||
| - | |||
| - | + | <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="https://static.igem.org/mediawiki/2009/4/4e/Globe.swf" /> | ||
| + | <param name="quality" value="high" /> | ||
| + | <param name="bgcolor" value="#ffffff" /> | ||
| + | <embed src="https://static.igem.org/mediawiki/2009/4/4e/Globe.swf" quality="high" bgcolor="black" width="775px" height="750px" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> | ||
| + | </object> | ||
<br /><br /> | <br /><br /> | ||
| - | + | 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. | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
<br /><br /> | <br /><br /> | ||
| + | <a href="https://static.igem.org/mediawiki/2009/4/4e/Globe.swf">Direct link to swf file</a> | ||
| - | |||
| - | |||
</div> | </div> | ||
| - | < | + | <img src="https://static.igem.org/mediawiki/2009/b/be/HowIsItDone.jpg" style="margin-left:-5px;margin-top:20px;"> |
| - | < | + | <div id="text" style="margin-left:20px;margin-top:10px;padding-bottom:15px;"> |
| + | 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). | ||
| - | </ | + | <br /><br /> |
| + | Amazing globe tutorial with explanations can be found here: <a href="http://www.adobe.com/newsletters/edge/june2008/articles/article2/">Adobe Edge Tutorial </a>. | ||
| + | |||
| + | <br /><br /> | ||
| + | Flex project of given globe can be downloaded here: <br /> | ||
| + | <a href="http://rapidshare.com/files/296029090/Globe.rar.html">Globe sources</a><br /> | ||
| + | |||
| + | Good luck with your experiments and ideas! | ||
</div> | </div> | ||
| - | |||
| - | |||
| - | |||
| - | |||
</div> | </div> | ||
<div id=bottombox> | <div id=bottombox> | ||
Latest revision as of 23:08, 21 October 2009
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!
* 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!
New Informatics - Globe Tutorial
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.
Direct link to swf file
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.
JD
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.
JD
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.
Direct link to swf file
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: Adobe Edge Tutorial .
Flex project of given globe can be downloaded here:
Globe sources
Good luck with your experiments and ideas!
Amazing globe tutorial with explanations can be found here: Adobe Edge Tutorial .
Flex project of given globe can be downloaded here:
Globe sources
Good luck with your experiments and ideas!
Edinburgh University iGEM Team 2009
