Team:Edinburgh/newinformatics(igemwikhacks)
From 2009.igem.org
(Difference between revisions)
Clonerohin (Talk | contribs) |
|||
(3 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 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 336: | Line 361: | ||
This problem is solved by adding to description of your Flash object next parameters: <br /> | This problem is solved by adding to description of your Flash object next parameters: <br /> | ||
For IE: <param name="wmode" value="opaque"><br /> | For IE: <param name="wmode" value="opaque"><br /> | ||
- | For Firefox just add wmode="opaque" into your embed tags. | + | 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!
* 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!
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
"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:
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.
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;
}
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.
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