Current page: Information->Website->Guidelines for Web Authors

GUIDELINES FOR WEB AUTHORS

The ECVision website is configured as a menu hierarchy - or menu tree - with internal nodes on the tree representing menus and leaf nodes representing web pages.


The site is navigated by series of drop-down menus that directly reflect this hierarchical structure.


It is designed this way so as to make it easy to extend and to add content by growing the menu tree. Thus, to add a page, all you need to do is to specify the menu item and provide the HTML file. To add a new menu, all you need to do is specify a new leaf in the present tree (i.e. a new menu item) and provide the the new menu (sub-)tree together with the HTML for all the leaf nodes.

For example, let's assume that the menu sub-tree for the 'Education and Training' menu item is as follows (this is effectively a depth-first traversal of the menu sub-tree): 

Education and Training
	Curricula for Cognitive Computer Vision
		Model Curricula
		Survey of taught topics worldwide
	Educational Resources
		Courseware
		Code
		Development Environment
		Draft Textbook
This is in fact a partial specification of the actual 'Education and Training' menu on this page; we'll see how to extend it to the full specification in a moment.

In this example, the 'Education and Training' item invokes a menu with two items:

  1. Curricula for Cognitive Computer Vision
  2. Educational Resources

In turn, both of these items invoke a menu. In the case of 'Educational Resources', it invokes a menu with four items:

  1. Courseware
  2. Code
  3. Development Environment
  4. Draft Textbook

All four of these are leaf nodes in the menu tree and, therefore, they correspond to browsable web pages (and not navigation menus). As such, some HTML code has to be provided to represent the content of these pages.

Now here we come to the first of several important points.

The only HTML that a contributor to the ECVision website has to provide is the actual content of the page: all the HTML associated with the banners and menu-bar, i.e. all the wrapping for the page, is taken care of automatically AS LONG AS THE CONTRIBUTOR SPECIFIES THE MENU SUB-TREE HIERARCHY.

To simplify the management of the site, we impose some strict rules on the manner in which you specify the menu sub-tree (i.e. the way you want to extend the menu system) and the way you provide your data. These are as follows:

  • Leaf node menu items are represented by any alphanumeric string
    • spaces are allowed
    • pathname characters such as '/', '\', '.' are not allowed
    • Upper and lower case characters are encouraged to improve menu readability
    • Example: My New Menu Item
  • Each leaf node menu item must have a corresponding text file with the HTML for that page:
    • the filename must be exactly the same as the string describing the menu item, with spaces replaced by the underscore character "_", and respecting the case of each character
    • the filename extension must be .txt (e.g. My_New_Menu_Item.txt)
    • the file must be placed in a subdirectory/folder: the name of this folder should be the name of the author (e.g. BobFisher or bobfisher)
  • When specifying the leaf node menu item in the menu sub-tree, prefix the menu item string with the subdirectory/folder name (e.g. BobFisher/My_New_Menu_Item)
  • When specifying the level of the menu and menu items in the menu tree, use a tab character for each level descended.
So, for example, let's assume we want to really implement the 'Education and Training' menu, then the menu sub-tree will look like this 

Education and Training
	Curricula for Cognitive Computer Vision
		BobFisher/Model Curricula
		BobFisher/Survey of taught topics worldwide
	Educational Resources
		BobFisher/Courseware
		BobFisher/Code
		BobFisher/Development Environment
		WolfgangFoerstner/Draft Textbook

You can see immediately that the HTML for the 'Model Curricula' and the 'Survey of taught topics worldwide' will be held in a folder called 'BobFisher'. Similarly, the HTML for the 'Draft Textbook' will be in sub-directory 'WolfgangFoerstner'.

To complete the picture, then, we need six HTML files for each of these six (2+4) items. These files MUST be named: 

Model_Curricula.txt
Survey_of_taught_topics_worldwide.txt
Courseware.txt
Code.txt
Develoment_Environment.txt
Draft_Textbook.txt

The first five files will be in a folder/sub-directory called 'BobFisher' and the last will be in a folder/sub-directory called 'WolfgangFoerstner'.

Note well that these files have .txt extension. This is because they will be automatically copied and inserted into the full web page file, including the wrapping (banners, menus, etc.).

If we wished to extend the 'Education and Training' menu, all we need to do is identify a new extended menu tree and provide the *.txt files with the HTML for each leaf node (* represents the leaf node menu item label with spaces replaced by underscores).

For example, here is the full menu tree for the 'Education and Training' menu, as presently implemented on the ECVision site. 

Education and Training
	Curricula for Cognitive Computer Vision
		BobFisher/Model Curricula
		BobFisher/Survey of taught topics worldwide
	Educational Resources
		BobFisher/Courseware
		BobFisher/Code
		BobFisher/Development Environment
		WolfgangFoerstner/Draft Textbook
	Research Opportunities
		BobFisher/Ideas to work on
		BobFisher/Positions Available
		BobFisher/People Available
	Educational Opportunities
		WolfgangFoerstner/Summer School Schedule
		WolfgangFoerstner/Forthcoming Tutorials
	Prizes for best dissertations in Europe
		WolfgangFoerstner/PhD theses
In addition to this menu tree, the authors should also provide the following files: 

Subdirectory/Folder:  BobFisher

BobFisher/Model_Curricula.txt
BobFisher/Survey_of_taught_topics_worldwide.txt
BobFisher/Courseware.txt
BobFisher/Code.txt
BobFisher/Development_Environment.txt
BobFisher/Ideas_to_work_on.txt
BobFisher/Positions_Available.txt
BobFisher/People_Available.txt


Subdirectory/Folder:  WolfgangFoerstner

WolfgangFoerstner/Draft Textbook.txt
WolfgangFoerstner/Summer_School_Schedule.txt
WolfgangFoerstner/Forthcoming_Tutorials.txt
WolfgangFoerstner/PhD_theses.txt

Finally,there are a few style rules:

  • Remember to design for 800 pixel width screen (actually, it's better to design for a 760 pixel width screen to allow for the scroll bar at the side of the browswer).
  • Design for reasonably modern browsers (IE4+ or NS4+) but not the very latest browser.
  • Put all .txt, .htm, and other resources such as jpeg or gif images in a unique directory (e.g. BobFisher)
  • Use .txt extension (the .htm file will be generated automatically for your and will include the banners, menu, context)
  • Use underscore instead of spaces in filenames
  • Don’t use sub-directories
  • Don’t use frames
  • Use relative links - use: 

    <A href=“../BobFisher/Model_Curricula.htm"> View </A>

    not: 

    <A href="http://www.ecvision.org/BobFisher/Model_Curricula.htm"> View </A>


Site generated on Friday, 06 January 2006