Team:Edinburgh/newinformatics(globetutorial)

From 2009.igem.org

(Difference between revisions)
 
(34 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:1050px;
+
height:1450px;
         width:795px;
         width:795px;
-
         font-size:11px;
+
         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>
<div id=menuitem >  <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29"> Introduction </a> </div>  
<div id=menuitem >  <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29"> Introduction </a> </div>  
-
<div id=menuitem >  <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conceptsandtechnology%29"> Concepts and Technology </a> </div>  
+
<div id=menuitem >  <a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29#concepts"> Concepts and Technology </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%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"> Conclusions </a> </div>  
+
<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 232: Line 257:
     <ul>
     <ul>
       <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29">Introduction</a></li>
       <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28introduction%29">Introduction</a></li>
-
      <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conceptsandtechnology%29">Concepts and Technologies</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%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">Conclusions</a></li>
+
       <li><a href="https://2009.igem.org/Team:Edinburgh/newinformatics%28conclusions%29">Blog Entry</a></li>
     </ul>
     </ul>
   </li>
   </li>
Line 261: 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 />
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nisi nec elit volutpat sollicitudin. Sed cursus venenatis egestas. In mollis vehicula dictum. Sed id lacus vitae tortor commodo pharetra porttitor ut purus. Nullam euismod urna at felis accumsan sit amet viverra leo fermentum. Phasellus ac molestie sapien. In in neque purus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo. Nam nunc nisl, euismod eu dignissim nec, eleifend ut augue. Phasellus tempor condimentum ipsum, ut molestie lorem suscipit vel. Nulla luctus turpis eget neque facilisis eget sodales ante tincidunt. Praesent congue lobortis mollis. Maecenas non augue id mi dignissim luctus. Donec quis volutpat lectus. Mauris condimentum sodales luctus.
+
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 />
-
Nulla nec mauris sapien, eget gravida quam. Fusce vulputate risus eget diam elementum vel mattis nisi sagittis. Vivamus eget enim a nisl imperdiet aliquet commodo eget turpis. Aliquam nec mi ac neque tincidunt facilisis fringilla at sapien. Praesent in justo vel turpis hendrerit suscipit. Nullam nec magna leo, sed vulputate quam. Aliquam sollicitudin hendrerit erat at eleifend. Vivamus tincidunt felis vitae metus suscipit non volutpat neque tempus. Phasellus sagittis accumsan tellus, vitae pharetra ligula rhoncus vitae.
+
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/3/3b/EdinburghParagraphMarker.jpg" style="margin-left:-5px;margin-top:20px;">
+
<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;">
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nisi nec elit volutpat sollicitudin. Sed cursus venenatis egestas. In mollis vehicula dictum. Sed id lacus vitae tortor commodo pharetra porttitor ut purus. Nullam euismod urna at felis accumsan sit amet viverra leo fermentum. Phasellus ac molestie sapien. In in neque purus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo. Nam nunc nisl, euismod eu dignissim nec, eleifend ut augue. Phasellus tempor condimentum ipsum, ut molestie lorem suscipit vel. Nulla luctus turpis eget neque facilisis eget sodales ante tincidunt. Praesent congue lobortis mollis. Maecenas non augue id mi dignissim luctus. Donec quis volutpat lectus. Mauris condimentum sodales luctus.
 
-
Nulla nec mauris sapien, eget gravida quam. Fusce vulputate risus eget diam elementum vel mattis nisi sagittis. Vivamus eget enim a nisl imperdiet aliquet commodo eget turpis. Aliquam nec mi ac neque tincidunt facilisis fringilla at sapien. Praesent in justo vel turpis hendrerit suscipit. Nullam nec magna leo, sed vulputate quam. Aliquam sollicitudin hendrerit erat at eleifend. Vivamus tincidunt felis vitae metus suscipit non volutpat neque tempus. Phasellus sagittis accumsan tellus, vitae pharetra ligula rhoncus vitae.
+
<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.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nisi nec elit volutpat sollicitudin. Sed cursus venenatis egestas. In mollis vehicula dictum. Sed id lacus vitae tortor commodo pharetra porttitor ut purus. Nullam euismod urna at felis accumsan sit amet viverra leo fermentum. Phasellus ac molestie sapien. In in neque purus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo. Nam nunc nisl, euismod eu dignissim nec, eleifend ut augue. Phasellus tempor condimentum ipsum, ut molestie lorem suscipit vel. Nulla luctus turpis eget neque facilisis eget sodales ante tincidunt. Praesent congue lobortis mollis. Maecenas non augue id mi dignissim luctus. Donec quis volutpat lectus. Mauris condimentum sodales luctus.
+
-
 
+
-
Nulla nec mauris sapien, eget gravida quam. Fusce vulputate risus eget diam elementum vel mattis nisi sagittis. Vivamus eget enim a nisl imperdiet aliquet commodo eget turpis. Aliquam nec mi ac neque tincidunt facilisis fringilla at sapien. Praesent in justo vel turpis hendrerit suscipit. Nullam nec magna leo, sed vulputate quam. Aliquam sollicitudin hendrerit erat at eleifend. Vivamus tincidunt felis vitae metus suscipit non volutpat neque tempus. Phasellus sagittis accumsan tellus, vitae pharetra ligula rhoncus vitae.
+
-
 
+
<br /><br />
<br /><br />
 +
<a href="https://static.igem.org/mediawiki/2009/4/4e/Globe.swf">Direct link to swf file</a>
-
<div id="left" style="width:50%">
 
-
Here lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec nisi nec elit volutpat sollicitudin. Sed cursus venenatis egestas. In mollis vehicula dictum. Sed id lacus vitae tortor commodo pharetra porttitor ut purus. Nullam euismod urna at felis accumsan sit amet viverra leo fermentum. Phasellus ac molestie sapien. In in neque purus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo. Nam nunc nisl, euismod eu dignissim nec, eleifend ut augue. Phasellus tempor condimentum ipsum, ut molestie lorem suscipit vel. Nulla luctus turpis eget neque facilisis eget sodales ante tincidunt. Praesent congue lobortis mollis. Maecenas non augue id mi dignissim luctus. Donec quis volutpat lectus. Mauris condimentum sodales luctus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo. Donec quis volutpat lectus. Mauris condimentum sodales luctus. Cras eget lorem arcu. Aliquam ornare tellus vel nisi commodo molestie. Aliquam aliquet magna nisl. Quisque velit nulla, adipiscing ut sagittis id, luctus viverra leo.
 
</div>
</div>
-
<div id="right" style="width:49%">
+
<img src="https://static.igem.org/mediawiki/2009/b/be/HowIsItDone.jpg" style="margin-left:-5px;margin-top:20px;">
-
<img src="http://www.scharfphoto.com/fine_art_prints/archives/199812-026-Staph-Bacteria.jpg" style="margin-left:10px;"width="370" height="300">
+
<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).
-
</div>
+
<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 id=bottomlinks align=right>
 
-
<div id=link><a href=#>next page</a></div>
 
-
<div id=link><a href=#>previous page</a></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!
New Informatics - Globe Tutorial
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


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!
Edinburgh University iGEM Team 2009

Retrieved from "http://2009.igem.org/Team:Edinburgh/newinformatics(globetutorial)"