Team:Edinburgh/newinformatics(igemwikhacks)

From 2009.igem.org

(Difference between revisions)
 
(28 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:2450px;
         width:795px;
         width:795px;
         font-size:12px;
         font-size:12px;
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"> 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 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">Conclusions</a></li>
+
       <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:100px;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:100px;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> Personal note </b> <br /><br />
<b> Personal note </b> <br /><br />
-
"And the huge fight with the iGEM WIKI began..." - JD's personal diary, 15th of June, 2009.
+
"And the huge fight with the iGEM WIKI began... Who will win? We will see the result on 21 of October 2009" - JD's personal diary, 15th of June, 2009. <br />
 +
"Who won the fight? Well, actually no fight happened. It was knowledge exchange" - JD's personal diary, 14th of October, 2009.
<br />
<br />
<font color="green" style="float:right">JD</font>
<font color="green" style="float:right">JD</font>
Line 279: Line 305:
This finding was really great. Actually, this thing is clearly documented on MediaWiki documentation page but it was hard to find it, since I didn't know what I was looking for. My problem was, that when you work with Flash objects and if you want data to be dynamicaly loaded you can do it by either using any of the script languages, say PHP, or Java or, what is much more convenient if the amount of data is not too big, XML. You can easily add xml data to the wiki page, for example, https://2009.igem.org/Team:Edinburgh/mapxmlaustria - page with info for map (mentioned earlier) about Austria. Everything is great, but it turns out that your XML data is wraped by thousands of HTML tags and Flash can't recognize it.
This finding was really great. Actually, this thing is clearly documented on MediaWiki documentation page but it was hard to find it, since I didn't know what I was looking for. My problem was, that when you work with Flash objects and if you want data to be dynamicaly loaded you can do it by either using any of the script languages, say PHP, or Java or, what is much more convenient if the amount of data is not too big, XML. You can easily add xml data to the wiki page, for example, https://2009.igem.org/Team:Edinburgh/mapxmlaustria - page with info for map (mentioned earlier) about Austria. Everything is great, but it turns out that your XML data is wraped by thousands of HTML tags and Flash can't recognize it.
<br /><br />
<br /><br />
-
You won't believe it, but I started to write small parser on ActionScript, so I could get out my XML data from, say https://2009.igem.org/Team:Edinburgh/mapxmlaustria. And I finished this parser for about 85% when I discovered this cool features. If you will pass action parameter to your page with raw value, you will get clear data of the page without any additional WIKI encoding. Check it: https://2009.igem.org/Team:Edinburgh/mapxmlaustria?action=raw
+
You won't believe it, but I started to write small parser on ActionScript, so I could get out my XML data from, say <a href="https://2009.igem.org/Team:Edinburgh/mapxmlaustria">https://2009.igem.org/Team:Edinburgh/mapxmlaustria</a>. And I finished this parser for about 85% when I discovered this cool features. If you will pass action parameter to your page with raw value, you will get clear data of the page without any additional WIKI encoding. Check it: <a href="https://2009.igem.org/Team:Edinburgh/mapxmlaustria?action=raw">ttp://2009.igem.org/Team:Edinburgh/mapxmlaustria?action=raw</a>
<br /><br />
<br /><br />
This is absolutely amasing finding. For example, it also allows you to add such things as <br /><br />
This is absolutely amasing finding. For example, it also allows you to add such things as <br /><br />
Line 293: Line 319:
If you want to remove iGEM elements from your page u can use next CSS code: <br /><br />
If you want to remove iGEM elements from your page u can use next CSS code: <br /><br />
-
<div id="abstarct" style="background-color:#e4f5ca;border:1px solid #595151;width:755px;height:20px;width:150px;margin-top:10px;font-size:11px;text-align:justify;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;">
+
<center>
-
#top-section {
+
<div id="abstarct" style="background-color:#e4f5ca;border:1px solid #595151;width:755px;height:450px;width:150px;margin-top:10px;font-size:11px;text-align:justify;padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;">
-
         display:none;
+
#contentSub {<br />
 +
        display:none;<br />
 +
}<br /><br />
 +
 
 +
#siteSub {<br />
 +
        display:none;<br />
 +
}<br /><br />
 +
 
 +
#search-controls {<br />
 +
         display:none;<br />
 +
}<br /><br />
 +
 
 +
.firstHeading {<br />
 +
    display:none;<br />
 +
}<br /><br />
 +
 
 +
#search-controls {<br />
 +
    margin-top:30px;<br />
 +
}<br /><br />
 +
 
 +
#footer-box {<br />
 +
    display:none;<br />
}
}
</div>
</div>
-
removes top banner
+
</center>
 +
 
 +
<br /><br />
 +
All those elements also react on all other types of CSS coding. You can find all the CSS codes of the standard WIKI layout you can easily find in the sources of any WIKI page (Right Click and something like View Page Sources);
 +
 
 +
<br /><br />
 +
<b>Hack 3: HTML over Flash element</b>
 +
<br /><br />
 +
Not really hack concerning WikiMedia system, but took me sometime to sort out. If you will go to our Notebook page you wills, that out Notebook is a Flash element. Now try to get your mouse to, say, Biology section of our menu. Without this hack you will see float menu only until the start of Flash object. <br /><br />
 +
<center><img src="https://static.igem.org/mediawiki/2009/4/45/EdinburghHack1.jpg"></center>
 +
<center><i>Problem</i></center><br /><br />
 +
<center><img src="https://static.igem.org/mediawiki/2009/5/51/EdinburghHack2.jpg"></center>
 +
<center><i>How it should be</i></center>
 +
<br /><br />
 +
This problem is solved by adding to description of your Flash object next parameters: <br />
 +
For IE: &lt;param name="wmode" value="opaque"&gt;<br />
 +
For Firefox just add wmode="opaque" into your embed tags.<br /><br />
 +
Unfortunately, not all browsers' versions (especially Firefox) support this parameter. In this cas there is no straightforward solution.
</div>
</div>

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 - iGEM WIKI Hacks
Personal note

"And the huge fight with the iGEM WIKI began... Who will win? We will see the result on 21 of October 2009" - JD's personal diary, 15th of June, 2009.
"Who won the fight? Well, actually no fight happened. It was knowledge exchange" - JD's personal diary, 14th of October, 2009.
JD
iGEM WIKI is great system but only if you try to do things which are meant to be done. Everything you want to do what is conventional on proper hosting with, for example access to Apache/MySql/FTP of the server, is really hard to implement on current WIKI system. First 8 weeks of my work with iGEM WIKI I totally hated it but right now I think that it was a good and worthн fight. Current WIKI system gave me a chance to prove that I am able to find solutions to unconventional problems.

I don't really remember all the small hacks I found during my work with WIKI, that is why list of hacks won't be too long and maybe will be updated later.

Hack 1: action=raw hack

This finding was really great. Actually, this thing is clearly documented on MediaWiki documentation page but it was hard to find it, since I didn't know what I was looking for. My problem was, that when you work with Flash objects and if you want data to be dynamicaly loaded you can do it by either using any of the script languages, say PHP, or Java or, what is much more convenient if the amount of data is not too big, XML. You can easily add xml data to the wiki page, for example, https://2009.igem.org/Team:Edinburgh/mapxmlaustria - page with info for map (mentioned earlier) about Austria. Everything is great, but it turns out that your XML data is wraped by thousands of HTML tags and Flash can't recognize it.

You won't believe it, but I started to write small parser on ActionScript, so I could get out my XML data from, say https://2009.igem.org/Team:Edinburgh/mapxmlaustria. And I finished this parser for about 85% when I discovered this cool features. If you will pass action parameter to your page with raw value, you will get clear data of the page without any additional WIKI encoding. Check it: ttp://2009.igem.org/Team:Edinburgh/mapxmlaustria?action=raw

This is absolutely amasing finding. For example, it also allows you to add such things as

<script type="text/javascript" src="https://2009.igem.org/Team:MyUni/myjsfilewithverylongdatainside"></script>. This is convenient way which I like much more then using proposed by iGEM style of including files.

Action parameter has lots of other values, for example, render which might be useful in certain situations.

Hack 2: I don't like the iGEM elements in my WIKI

If you will look at our main page you see that from standart iGEM layout there is only the top banner. All other elements are gone. I really appreciate that iGEM didn't restrict us in such possibility.

If you want to remove iGEM elements from your page u can use next CSS code:

#contentSub {
display:none;
}

#siteSub {
display:none;
}

#search-controls {
display:none;
}

.firstHeading {
display:none;
}

#search-controls {
margin-top:30px;
}

#footer-box {
display:none;
}


All those elements also react on all other types of CSS coding. You can find all the CSS codes of the standard WIKI layout you can easily find in the sources of any WIKI page (Right Click and something like View Page Sources);

Hack 3: HTML over Flash element

Not really hack concerning WikiMedia system, but took me sometime to sort out. If you will go to our Notebook page you wills, that out Notebook is a Flash element. Now try to get your mouse to, say, Biology section of our menu. Without this hack you will see float menu only until the start of Flash object.

Problem


How it should be


This problem is solved by adding to description of your Flash object next parameters:
For IE: <param name="wmode" value="opaque">
For Firefox just add wmode="opaque" into your embed tags.

Unfortunately, not all browsers' versions (especially Firefox) support this parameter. In this cas there is no straightforward solution.
Edinburgh University iGEM Team 2009