OWW-LabMaker:Projects/Horizontal Navigator/version 2: Difference between revisions
| (5 intermediate revisions by 2 users not shown) | |||
| Line 12: | Line 12: | ||
===The OWW Menu Tag=== | ===The OWW Menu Tag=== | ||
The tag used is "<nowiki><owwmenu></nowiki>". The tag is inserted in any OWW page. When present, a menu is displayed, linking a lab's set of wiki pages | The tag used is "<nowiki><owwmenu></nowiki>". The tag is inserted in any OWW page. When present, a menu is displayed, linking a lab's set of wiki pages together. | ||
===What Needs to Be Specified in The Tag=== | ===What Needs to Be Specified in The Tag=== | ||
| Line 24: | Line 24: | ||
=== The Template Tag: Shorthand for the Menu Definition=== | === 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. | 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=== | ===Example: Bishop Lab=== | ||
| Line 45: | Line 45: | ||
'''<nowiki><owwmenu </nowiki>font="arial, helvetica, sans-serif" bold="1" '''<br /> | '''<nowiki><owwmenu </nowiki>font="arial, helvetica, sans-serif" bold="1" '''<br /> | ||
'''<html> </html>color="black" bgcolor="white" hovercolor="black"'''<br /> | '''<html> </html>color="black" bgcolor="white" hovercolor="black"'''<br /> | ||
'''<html> </html>bghovercolor="gray" topfontsize="10" fontSize="8" pagewidth | '''<html> </html>bghovercolor="gray" topfontsize="10" fontSize="8" pagewidth="750"'''<br /> | ||
'''<html> </html>image="<nowiki> | '''<html> </html>image="<nowiki>Bishop.jpg</nowiki>" lab="Bishop"<nowiki>></nowiki><br /> | ||
'''<html> </html>Home=Lab-Home'''<br /> | '''<html> </html>Home=Lab-Home'''<br /> | ||
'''<html> </html>Lab Members=People'''<br /> | '''<html> </html>Lab Members=People'''<br /> | ||
| Line 87: | Line 87: | ||
|This is the screen width that the image and horizontal menu will be displayed with. | |This is the screen width that the image and horizontal menu will be displayed with. | ||
|- | |- | ||
|'''image="<nowiki> | |'''image="<nowiki>Bishop.jpg</nowiki>"''' | ||
|This is the image that will be displayed on top of the menu. The width is set using the 'pageWidth' setting. | |This is the image that will be displayed on top of the menu. The width is set using the 'pageWidth' setting. | ||
|- | |- | ||
| Line 111: | Line 111: | ||
|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. | |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. | ||
|- | |- | ||
|'''Links=#, Sponsors=#http://www.agency.gov, Friends=http://openwetware.org''' | |'''Links=#, Sponsors=#<nowiki>http://www.agency.gov</nowiki>, Friends=<nowiki>http://openwetware.org</nowiki>''' | ||
|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. | |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. | ||
|} | |} | ||
To see the evolving version of this page in OWW, click [[Bishop:Lab-Home | here]]. | To see the evolving version of this page in OWW, click [[Bishop:Lab-Home | here]]. | ||
Revision as of 07:26, 16 August 2010
Making A Good-looking OWW Lab Without a PhD. in Wikification: Update.
The original extension worked well. But the syntax left a LOT to be desired. The use of the pipe (|) characters and the other parameters was consistent and did provide the basis for reimplementing most menus already used for labs in OpenWetWare. All non-repeating parameters have now been moved into attribute tags within the <owwmenu> tag.
This means that the only content enclosed by the tag itself is the items that make up the contents of a horizontal menu.
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.
Motivation
The original version met the goal of providing a way to use a complex but useful CSS-dropdown navigation within OWW without exposing the details to teams who use the site. The syntax looked a bit formidable. The new version is functionally equivalent to the orignal. However, it achieves this with a much cleaner syntax.
The OWW Menu Tag
The tag used is "<owwmenu>". The tag is inserted in any OWW page. When present, a menu is displayed, linking a lab's set of wiki pages together.
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"
<html> </html>color="black" bgcolor="white" hovercolor="black"
<html> </html>bghovercolor="gray" topfontsize="10" fontSize="8" pagewidth="750"
<html> </html>image="Bishop.jpg" lab="Bishop">
<html> </html>Home=Lab-Home
<html> </html>Lab Members=People
<html> </html>Research=#,Ongoing=Ongoing Research, Government=Government Sponsored
<html> </html>Protocols=#, Human=Protocols/Human, Bovine=Protocols/Bovine
<html> </html>Equipment=#, Scanners=Equipment#Scanners, Detectors=Equipment#Scanners
<html> </html>Notebooks=#, Retinal Scan=Notebook/Retinal_Image_Scanner
<html> </html>Links=#, Sponsors=http://www.agency.gov, Friends=http://openwetware.org
</owwmenu>
Description of the Revised Tag
This tag 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="gray" | 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="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. |
| 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. |
| Lab Members=People | The column will display the label "Lab Members'. When clicked, it will send the user to the page "Bishop:People". |
| 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". |
| 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. |
| 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. |
| 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. |
| Links=#, Sponsors=#http://www.agency.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. |
To see the evolving version of this page in OWW, click here.
