INTRODUCTION TO SITE BUILDING AND MAINTENANCE USING CASM ======================================================== by Laszlo Gerencser casm@mailbox.hu http://casm.portologic.hu Updated on 2003.03.04 This document describes why, when and how you should use CASM in WEB/WAP site building and maintenance to be productive, efficient and happy. SITE DESIGN ----------- Site design generally begins with pen and paper. You design functionality, data content, layout, and so on. After some iterations, you have a concept on what your site will present in which structure, and how users will interact with it. You may have a layout draft also. This is the time when you are ready to create some prototype pages of your site. You make graphics, HTML/WML/XML pages with dummy data on them, to see, how your site will look like. You refine your prototype pages, and finally, you have a ready-to-build site design. CASM will not help you up to this point. You are fine with the copy-paste feature of your text editor, or templating mechanism of your WYSIWYG HTML stuff. But after the site design period, a very redundant, annoying and ineffective work comes in the picture: the site building. SITE BUILDING ------------- Ok. You, or the webdesigner team made a good job, the prototype pages are great. It's time to build the whole site. Almost every site has redundant parts, even the smaller ones have. Headers, footers, menus, design elements, font properties are identical in a lot of pages. If you build your site without CASM or a similar tool, you have to copy these common parts from page to page. And change them a little bit, from page to page, because you have to display current page title, mark the current menu item, insert the current page content into the layout, and so on. This practice has the following drawbacks: - You can easily make mistakes. You will waste unnecessary effort on find and correct them. - You lose a lot of efficiency on dealing with same display properties on multiple pages. - If you have to change something in the redundant parts (maybe you want to modify a color setting or a font size in your design) you have to do it in each of every page of the site. You waste a lot of effort again. - This makes you feel yourself inproductive and disappointed. It is an annoying, repetititve task, without the sense of creativity. We have to find a good solution to this problem. That is why CASM is created. With CASM, you can separate display properties and other redundant parts from the content which is changing page by page. You can handle and modify them separately wihout those unwanted, ugly side-effects. So it is the time to get CASM into work. How to do it? It's easy. - First of all, create the base template of your site. Put all common parts into it. Refer to the page content with CAL variables or recordsets. (You can create second and third level templates upon the needs of your site structure also. Templates can use lower level templates.) - Put your main menu into a base menu file. Use this menu file everywhere. (You can create multiple menu files, or multilevel menu files if you like.) - Move other redundant parts into separate files. Think on separators, shadow boxes, news sections and other ocasionally used design and content elements. You can include them anywhere with a single CAL command. - Now, create content files using your templates, menu files, and other previously created files. - And be happy, site building is only a command for you. You can freely modify anything, just recompile your site, and your modifications will take place everywhere. HOW CASM WORKS -------------- CASM compiles your site source to a ready-to-upload site. CASM can optimize your HTML/WML/XML/CSS files also - if you want. Additionally, CASM can invoke HTML Tidy to validate your HTML files. When you compile a site, you specify the content source files to compile. For example: # ./casm -RCH s:./Source/*.html.cal t:./Upload/*.html; means, that - all *.html.cal files (content source files) in Source directory will be compiled into the Upload directory. (-C switch) - CASM will look for content source files recursively, and will build the appropriate file structure in the Upload directory automatically. (-R switch) - CASM will optimize all HTML files after compilation (-H flag) You should think CASM compilation as a content-driven process. You specify content source files to compile. Content source files use template files, menu files and other includable files (the redundant part of your site). CASM will use these to compile your content files. To give you the feeling, I include a "screenshot" here: ------------------------------------------------------------------------------- $ ./casm -RCHV s:./Source/*.html.cal t:./Upload/*.html; CASM ver. 0.2.6s (the_saver) by Laszlo Gerencser (casm@mailbox.hu) SETTINGS: - compile CAL commands: [YES] - optimize content: [YES] - check with HTML Tidy: [NO] - file search mode: [RECURSE] - delete old target files: [NO] - verbose mode: [YES] - test mode: [NO] - source directory: [/home/lacus/1/Work/casm/casm_website/Source] - source mask: [*.html.cal] - target directory: [/home/lacus/1/Work/casm/casm_website/Upload] - target mask: [*.html] Searching source files ... - 4 files found. Checking target directory structure ... - [/home] ... Ok. - [/home/lacus] ... Ok. - [/home/lacus/1] ... Ok. - [/home/lacus/1/Work] ... Ok. - [/home/lacus/1/Work/casm] ... Ok. - [/home/lacus/1/Work/casm/casm_website] ... Ok. - [/home/lacus/1/Work/casm/casm_website/Upload] ... Ok. - [/home/lacus/1/Work/casm/casm_website/Upload/htdocs] ... creating ... Ok. Compiling ... - Src: [/home/lacus/1/Work/casm/casm_website/Source/htdocs/about.html.cal] Trg: [/home/lacus/1/Work/casm/casm_website/Upload/htdocs/about.html] Read... compile CAL... optimize HTML... write... Done. - Src: [/home/lacus/1/Work/casm/casm_website/Source/htdocs/download.html.cal] Trg: [/home/lacus/1/Work/casm/casm_website/Upload/htdocs/download.html] Read... compile CAL... optimize HTML... write... Done. - Src: [/home/lacus/1/Work/casm/casm_website/Source/htdocs/feedback.html.cal] Trg: [/home/lacus/1/Work/casm/casm_website/Upload/htdocs/feedback.html] Read... compile CAL... optimize HTML... write... Done. - Src: [/home/lacus/1/Work/casm/casm_website/Source/htdocs/index.html.cal] Trg: [/home/lacus/1/Work/casm/casm_website/Upload/htdocs/index.html] Read... compile CAL... optimize HTML... write... Done. CASM finished. ------------------------------------------------------------------------------- FILE STRUCTURE -------------- To make your site clean and your life easy, you should build a site file structure like this: ./SITE_DIR/ - this will contain the whole site source, archives and the compiled, ready-to-upload site stuff in the following subdirectories ./SITE_DIR/Source/ - this will contain the CAL source of your site ./SITE_DIR/Source/~cal_files/ - templates, menu files and other reusable stuff will go here ./SITE_DIR/Source/htdocs/ - content files, pictures, style sheets will go here (basically anything that you want to upload after compilation) ./SITE_DIR/Upload/ - CASM will put your compiled site here ./SITE_DIR/_archive/ - this is the place of the archives of your site source For example, CASM website directory has the following content: # ls -l drwxrwxr-x 4096 Source/ drwxrwxr-x 4096 Upload/ drwxrwxr-x 4096 _archive/ -rwxr-xr-x 153107 casm -rwxr-xr-x 1075 makesite -rwxr-xr-x 864 savesite The last three files need some further description. - The first one is CASM itself. I put it in each site directory to make sure that I archive the right version of CASM with the site source. You don't have to follow my method in this case. Put CASM into /usr/bin, or whatever directory you like. - The second file is a site builder script. It invokes CASM to compile the site source, and copies all non-compilable files (images, etc.) into the Upload directory also. I include an example script here for technically interested people only. You can skip it if you like. ----------------------------------------------------------------------------- #!/bin/bash -v ############################### MAKESITE STARTED ############################ # This script builds the whole site with CASM ##################### DELETING Upload DIRECTORY rm -r ./Upload; # removes the result of previous compilation ##################### COPYING ALL FILES FROM Source TO Upload cp -rp ./Source ./Upload; ##################### DELETING ~cal_files DIRECTORY FROM Upload rm -r ./Upload/~cal_files; # we don't need it in the Upload dir. ##################### DELETING source CAL FILES FROM Upload # Content files have .cal extension. They should be deleted from here. find ./Upload -name '*.cal' -exec rm {} \; ; # Now Upload directory contains everything we need except the compiled files # Let's compile them. ##################### OPTIMIZING css FILES # I use CASM to optimize CSS files and put them in the right place ./casm -RH s:./Source/*.css t:./Upload/*; ##################### COMPILING html.cal FILES # These are the content files. CASM will compile and optimize them, and # put them in the right place. ./casm -RCH s:./Source/*.html.cal t:./Upload/*.html; ############################### MAKESITE FINISHED ########################### ----------------------------------------------------------------------------- - The third file, archivesite, is a simple shell script that archives the whole site into the _archive directory. It is basically a parameterized tar command. But very handy, when you modify your site and you need a previous version of it from some reason ;-) Well, let's continue with our example. The Source directory of CASM website contains someting like this: ./Source/~cal_files/base.menu - base menu file ./Source/~cal_files/base.template - base template file (Other menu, template and non-content files could go here.) ./Source/htdocs/about.html.cal - These are the contet files. They will be ./Source/htdocs/download.html.cal compiled by CASM into HTML files. ./Source/htdocs/feedback.html.cal ./Source/htdocs/index.html.cal ./Source/htdocs/robots.txt - I assume you know them. ./Source/htdocs/casm.css ./Source/htdocs/docs/FAQ - Downloadable/viewable material, linked ./Source/htdocs/docs/README from the content files. ./Source/htdocs/download/* ./Source/htdocs/pics/_transp.gif - The only one picture I use in CASM site. But if it would have a graphic design, all pictures would be here. You are encouraged to download the site source of http://casm.portologic.hu from the site itself, and examine the files to get more impression on how you can use CASM. SITE MAINTENANCE ---------------- Site maintenance is nothing else, but some changes in the site source and a site rebuilding. If you have built your site with CASM then you can be happy. If not, then go back to the previous chapter and meditate on rebuild your site with CASM - at least partly. If you have to mantain your site regularry, or you don't want to deal with design issues ecvery time you have to change something in content, then CASM will be your friend. DYNAMIC CONTENT VS. STATIC CONTENT ---------------------------------- There is an other solution to the infinite site rebuilding problem: dynamic content. You can use some on-line content management system, or portal engine. However, dynamic sites also need HTML templates. You can use CASM to build these templates also. CASM will gladly build PHP and other script pages too. But that's not the end of the story. You can use CASM as an off-line content management tool. It is a good alternative when - only one person modifies the content at a time, - there is no need to update content multiple times a day. It is a suitable solution also when you don't want (or have no possibility) to deal with server-side scripting and database handling. You can modify content files with a text editor. It's really easy. After that, you just have to rebuild the site and upload the result. This can be automatized with a single shell script. I hope, you have the picture now. If you have unanswered questions, please refer the documentation and the F.A.Q. If you still need some further help, drop me a mail. --