OWW-LabMaker:Projects/Horizontal Navigator
Making A Good-looking OWW Lab Without a PhD. in Wikification
We have a number of new labs being created on OWW. To make life a bit easier, OWW now has a MediaWiki extension that will take care of many of the problems people have had with both creating consistent pages and navigation to go between them.
Inspiration
Based on work we did with the MIT BioMicroCenter, OWW now has a relatively clear, if not simple, way to assist in creating a new lab and add new pages. This can be used with existing labs as well.
Parser Extensions
For those of you not familiar with MediaWiki extensions, one particular type of component that we can add to OWW is called a "parser tag". This tag looks like a built-in html or xml tag. But the 'innards' of the call, what happens when the tag is entered onto a page, are handled by OWW using code we create and run on our server.
To boldly go...
Anyone who wants to experiment with it as we figure out what this tag needs to do that it currently does not do should get in touch with Bill Flanagan. Despite looking for more input, the tag does work right now. We'll use the explanation below to build the demo. As we find problems, the progress will be recorded within OWW. Use this page for information
The OWW Menu Tag
The tag used is "<owwmenu>". The tag is inserted in any OWW page. When present, it will add a menu specified by a set of definitions that are defined by anyone who wants to use it.
What Needs to Be Specified in The Tag
Using this tag, this is what's needed to create horizontal menu:
- A header image loaded into OWW (or one somewhere else for now!),
- Some information about the colors you choose to display
- The font to be displayed
- A name for your lab
- A list of pages and names you want to identify the pages with
The Template Tag: Shorthand for the Menu Definition
To insert this into a page, the actual tag and set of parameters can be enclosed in a single location. In OWW, pages called 'Templates' can be used as a shortcut for long sets of repeating steps that take up space and make it hard to change things once you have completed your lab site.
Example: Bishop Lab
Let's use the Bishop Lab at Harvard as an example. A template that would allow you to drop a horizontal menu into your lab pages would look like this:
{{BishopMenu}}
In other words, a single tag is all that would be needed to render the full menu, with an embedded graphic, into your pages.
Creating the Tag
The definition for the BishopMenu menu would be entered into a template page. You can see the page here:
This definition is only entered once. If you change it, all of the pages it is included in will be updated. This makes adding a new page a lot easier than it has been.
Syntax
The content of the owwmenu tag looks like this:
<owwmenu>
font|arial, helvetica, sans-serif||
bold|1||
color|black||
bgColor|white||
hoverColor| black ||
bgHoverColor|grey||
topFontSize|10||
fontSize|8||
pageWidth|750||
image|http://openwetware.org/images/b/b4/Bishop.jpg%7C%7C
lab|Bishop||
col|Home=Lab-Home ||
col|Lab Members=People ||
col|Research=#,Ongoing=Ongoing Research, Government=Government Sponsored ||
col|Protocols=#, Human=Protocols/Human, Bovine=Protocols/Bovine ||
col|Equipment=#, Scanners=Equipment#Scanners, Detectors=Equipment#Scanners ||
col|Notebooks=#, Retinal Scan=Notebook/Retinal_Image_Scanner||
col|Links=#, Sponsors=http://www.shadowyagency.gov, Friends=http://openwetware.org%7C%7C
</owwmenu>
Description of the Tag
This long-winded tag definition is used to set the following:
| font | arial, helvetica, sans-serif|| | The font for the menu would be set to the "family" of "arial, helvetica, sans-serif". More than one may be needed since the same font can occasionally have a different name on different computers. |
| bold | 1 || | Set all top-row entries to use the font in 'bold'. |
| color | black || | The color for the letters displayed will be black. |
| bgColor | white || | The color for the background for entries will be white. |
| hoverColor | black || | When someone moves the mouse over an item, this is the color the text changes to. |
| bgHoverColor | grey || | When someone moves the mouse over an item, this is the color the background changes to. |
| topFontSize | 10 || | This is the font size used for the top-level entries. |
| fontSize | 8 || | This is the font sized used for the drop-down list entries. |
| pageWidth | 750 || | This is the screen width that the image and horizontal menu will be displayed with. |
| image|http://openwetware.org/images/b/b4/Bishop.jpg|| | This is the image that will be displayed on top of the menu. The width is set using the 'pageWidth' setting. |
| lab|Bishop|| | This is the name of the lab. 'Bishop:' will be added to the beginning of each page entered below. |
| col | Home=Lab-Home || | The first column will contain the home page for the lab. The exact text (between the '|' and the '||' chartacters) will be added to all of the wiki page names. |
| col | Lab Members=People || | The column will display the label "Lab Members'. When clicked, it will send the user to the page "Bishop:People". |
| col|Research=#,Ongoing=Ongoing Research, Government=Government Sponsored|| | This will create a drop-down menu. The top entry, by using a pound sign (#) rather than a label, will only drop down a list and not lead to a specific page. The next entry, "Ongoing", would lead to a page named "Bishop:Ongoing". The final entry, Government, would lead to the page "Bishop:Government Sponsored". |
| col|Protocols=#, Human=Protocols/Human, Bovine=Protocols/Bovine || | This entry would create a drop-down list, "Protocols", that had two options. In OWW, page names can include the colon character and slash characters. In most cases, these are considered "just another character". But there can be exceptions that we may discuss in a subsequent posting. |
| col|Equipment=#, Scanners=Equipment#Scanners, Detectors=Equipment#Scanners || | In this case, a single page, "Equipment", can have multiple links to it as long as sections are inserted correctly. For this page to work, the page "Equipment" would include ==Scanners== and ==Detectors== specified as section headers. |
| col|Notebooks=#, Retinal Scan=Notebook/Retinal Image Scanner|| | When you create a notebook with the OpenWetWare "One-Click" icon, a new 'base' page called 'Notebooks' is created if it's not already there. Just add the Notebook entry into the menu definition to pull it in. We're looking into how to make this automatic for a later revision. |
| col|Links=#, Sponsors=#http://www.shadowyagency.gov, Friends=http://openwetware.org|| | One other option is to add a link to an external page. To do this, simply put the entire url into the page link and you're good to go. |
This information is subject to change as more folks ask for things the current structure does not support. But we're at least committing to the current level of complexity as a start. One nice-to-have feature may be a form to build-a-tag for new people rather than have to deal with the complexity the current version introduces. Despite the seemingly daunting syntax, this is nothing compared to the time it takes folks to make things look and work professional within OWW. We're committed to making it easier going forward.
To see the evolving version of this page in OWW, take a look here.
