|
||
Web Tool Design Guide
IntroductionA web site administrator/designer must initially design a framework so that clients and users can use Web Tool to edit web pages. This process is just creating and modifying the HTML templates to the look-and-feel of other pages on the web site to assure the visual presentation of sample text that a user might add. In this set-up process, the adminstrator will be using both the web interface (running webtool.cgi from your web browser) and also editing the HTML template files (using, for example, FTP and a local page editor). This document describes some of the details of this process.
Images are placed within web pages using the HTML < IMG > tag, which specifies the URL of the image file. In Web Tool, these image tag URL addresses must be absolute in order to work properly. This applies both to image tags withing template files and image tags that a user may place inside the editor text body. The HTML tag for images, for example, < IMG SRC="/myDir/images/myDog.jpg" > will not work correctly in a finished static HTML page created by Web Tool. For this image to appear properly, you must specify: < IMG SRC= "http://mySite.com/dogs/myDir/images/myDog.jpg" >. If you are using a WYSIWYG web page editor such as Dreamweaver, you may need to manually edit your finished HTML page, converting relative URL tags to full URLs; often this can be done using the global search-and-replace feature of a text editor. Where Are The Templates?Users select HTML templates in the pull-down menu on the top right side of the editor screen. That list of available templates is the same for all web pages. The list is simply a listing of all files that end in either .html or .htm in the www/WebTool/Templates/user directory. Regardless of where the finished pages may exist on a web site, the Web Tool template will always need to be placed in this directory. The impact of this approach is that 1) the templates should be named descriptively, 2) the user needs to understand the template selection process, and 3) there is no way to force certain templates to be used for certain pages. A user can always decide to use the 'wrong' template for a web page. The Default TemplateWhen a new web page is created, Web Tool assigns it the template named 'default.html'. If you only have one template for all pages, you should name it 'default.html'. If you have multiple templates in the www/WebTool/Templates/user directory, then you should name your most common template 'default.html', or copy it to 'default.html'. Naming HTML TemplatesVisual and design aspects of a web page can be controlled via the templates by offering the user slight variations on the same page, for example, pages that are visually identical except for the header graphics, or pages with or without a search form. These page variations must then be named appropriately so the user can see what they are selecting from the menu, eg, 'withSearchForm.html' and 'withoutSearchForm.html'. Note that the template name itself will never appear in the finished web pages; web pages are named by the title (link name) that a user provides, except for the base page. The Static HTML FilesThe base directory where the finished web pages is specified by the CONTENT_DIR and CONTENT_URL variables set-up during the installation and can be edited in the cgi-bin/WebTool/Config/wtConfig.pm file. Regardless of what a user names their links, Web Tool can only write static files into the CONTENT_DIR directory; thus, Web Tool can be safely deployed on a web server without fear of overwriting or malicously editing other web pages. The adminstrator/site designer must decide what static HTML pages will link into the pages created by Web Tool; once this is decided, it is just a matter of creating HTTP links into the CONTENT_DIR directory and pointing to the appropriate HTML file. Static Page NamesOther than the base page (see below), all static HTML pages created by the user are named after the 'Page Title/Link Name' supplied by the user. Web Tool removes spaces and adds the .html suffix automatically to the user-supplied name. So the page titled 'This is A test' will become 'ThisisAtest.html' in the CONTENT_DIR directory (when the user ends the edit session). As a continuation of this naming logic, sub-pages created off of an upper-level page will be placed within a sub-directory in the CONTENT_DIR. So if a user creates a 'About Us' link, and then adds additional pages on the 'About Us' page, such as 'location', and 'contact us', then the static HTML pages will exist at the URLs http://mySite.com/wt/AboutUs/location.html and http://mySite.com/wt/AboutUs/contactus.html, respectively. The above description is for administration/site design purposes; the key to Web Tool is that the user never needs to worry about where the static files actually are; the links they create within the Web Tool editor will always point to the correct page. There is no way they can improperly link pages if they only use the web interface. The Base PageIf you think of the web pages that Web Tool creates as a tree structure that grows downward, then the page at the very top is what is referred to as the base page. Unlike all other web pages (which are named by the user-supplied link name), this base page is titled by the BASE_TITLE in wtConfig.pm. So, for example, if your CONTENT_URL is 'http://mySite.com/wt/' and your BASE_TITLE is 'My Dogs', the static HTML base page created by Web Tool will be found at 'http://mySite.com/wt/MyDogs.html'. Customizing The Link ListThe Web Tool template tag < !-- INSERT_TEXT=link_list -- > inserts the dynamically created list of sub-pages into the current HTML page. Because the contents of this tag are based on changing user data, the application must write them based on the internal database. A site designer may want to change the font size or formatting of this link information to match the web page template. The HTML formatting for this text has been encapsulated into the file cgi-bin/WebTool/WebTool/Customize.pm. The source code in Customize.pm has general instructions and examples. This is a Perl language module, be careful to save backup copies if you edit it. Note that the < BR > tag is removeable, and thus it is possible to display the link list in a horizontal format. Customizing The Text FilterSimilar to above, within cgi-bin/WebTool/WebTool/Customize.pm is a Perl function TextFilter(). This receives the user supplied text string as a parameter. Any edits, regular expressions or filters will be applied to the text that a user submits (anytime the user presses 'Save and Preview') before it is saved to the database. TextFilter() currently implments the default function of replacing newlines with HTML < BR > tags. This can cause alignment problems for pages if the user adds large amounts of HTML formatting. You can thus disable the line break feature here. Rearranging Page Link OrderThere is no way to rearrange the page order through the editor interface. I realized this is an issue and future versions will provide an up and down arrow alongside each page entry to push it down the list or raise it up. This will be a no-cost upgrade for those who buy the 1.xx Site License. Here is the 'hard' way to do it (it's not really that hard): download your database file (cgi-bin/WebTool/Data/[your BASE TITLE].pm) and open it up in a text editor. There are a bunch of nested data structures that represent the data, and you just need to find the "link_order1" array that represent your top page and rearrange the order:
"link_order1" => [
"Off Leash Areas",
"Dog Friendly Accomadations",
"Forums",
"Contact Us"
],
By rearranging the order of the entries in this array, that will change the
order as they appear on the editor page (and on the finished static web page).
Be sure to save a backup file of the original before you edit it, you'll get
a Perl syntax error if there are problems. Upload the file back to your server
and that should do it.
Copyright 2002 Chico Digital Engineering contact: support@chicodigital.com |
||