When it comes to building dynamic sites, proper management of content is critical. With pages that are seemingly "built on the fly," a misfiled image or the wrong version of a Flash MX 2004 animation could potentially result in huge problems. There are a number of web production books out there?Kelly Goto's New Riders book Web Redesign: Workflow That Works is one of the best?but the bottom line when it comes to managing content is managing what you have, when you have it. That involves managing content when it is in production, and then managing it when it is ready to be called into the page.
Here's a typical scenario. You need a logo. You go to a Logo folder where you are confronted with a dozen files named "logo." What makes it even more confusing is that they are named "logo1," "logo2," and so on. What you need is the EPS version of the latest logo. Good luck.
Proper naming conventions are absolutely critical when building a dynamic site. Files ranging from sounds to text are created in a variety of applications, and improperly named files can have a serious impact upon workflow.
Though there are no formal rules when it comes to naming files, it is absolutely critical that there be a standard and that it be rigorously adhered to by everyone on the team. When setting your file naming system, consider these points:
Use lowercase lettering for all filenames. This is especially important when sites are hosted through Linux or Unix servers.
Add a three-letter extension to all files to aid identification, such as video.mov. Hard-core Mac users may object, claiming this is a PC convention more than anything else. Realizing that the Internet is meant for more than Macs, and with Mac OS X firmly in place, this shouldn't be an issue anymore for Mac users wanting to communicate with the rest of the world.
Use the four-letter extension?HTML?for all web pages if you intend to host your pages on Unix/Linux-based servers. If you are using a Windows-based server, you can use HTM for your extension, although HTML is recommended.
Always name the first page of any site index.htm, index.cfm, index.jsp, or whatever the default page would be for the server on which you would be deploying your web site. Windows servers also allow the name default.htm to be used. However, if you were to wind up moving your web site to a Unix server, you would probably have less of a hassle using index.html or the others mentioned above than you would trying to get the server administrator to add default.htm to the Apache httpd.conf file.
Always consider the file source when adding the file extension to the name. There are a number of different file formats for similar media, and being able to determine which format is being used is absolutely critical. For example, the two more common video formats are QuickTime and AVI. Each uses a different player, and a file named "Video_01" could have implications for playback. Here are some suggestions:
HTML: Use the four letters for all HTML pages.
CSS: Cascading Style Sheet.
ASP: Active Server Page.
JSP: Java Server Page.
CFM: ColdFusion MX Page.
SWF: Flash MX 2004 or Director MX movie.
FLA: Uncompressed Flash MX 2004 movie.
DIR: Uncompressed Director MX movie.
CST: External Director cast.
GIF: Gif image.
JPG: JPEG image.
PSD: Adobe Photoshop Document.
EPS: Postscript drawing from Freehand MX or Adobe Illustrator.
PNG: PNG graphic, which is the default format for Fireworks MX 2004.
TXT: Plain text file.
MP3: MP3 audio file.
WAV: Windows sound file.
AIF: Actual name is AIFF (Audio Interchange File Format).
MOV: Quicktime Video.
AVI: A Windows Media Player video format.
PDF: Adobe Acrobat file.
When you consider the fact that buttons require three separate images?Up, Over, Down?and that logos created in Freehand and Fireworks eventually have to be rasterized, you quickly come to the conclusion that the way files are named is just as important as their extensions. Here are some suggestions:
btn_name.gif: A button without a rollover or "clickable" state.
btn_name_up.gif: The up state of a button.
btn_name_over.gif: The over state of a button.
btn_name_down.gif: The down state of a button.
logo_name.eps: The vector version of a logo.
Icon_name.png: Icons, custom or standard, used throughout a site.
Tip
Though computers can read the space between words?for example, the space between e and b in the book? browsers tend to have a bit of a problem with the space between the words because the space is often a delimiter between commands and parameters to the server. Thus, the browser will attempt to compensate by URL-encoding it as "the%20book." Spaces between names are considered bad practice. Thus, it is best always to use an underscore between words. In this instance, the file would be named "the_book."
"Page Not Found" error messages, inactive links, and broken file icons are clear indications of poor file management. Studio MX 2004 contains a number of very robust tools designed for this specific purpose. The odd thing about these tools is very few developers are aware of them or use them on a regular basis.
Change is a given when it comes to the creation of content for dynamic sites. Clients will request changes. Contractors will request changes. Inevitably, you will make a change, and the client will decide an earlier version of the file is the one to be used. Here are some suggestions for managing versions of files:
Number all files. lLogo_0010.png indicates the first iteration of the file.
Indicate minor changes by changing the number to logo_0011.png.
Indicate major changes by changing the number to logo_0100.png.
Place all files in a folder off the main directory and group them in a rational manner. For example, graphics/icons/buttons.
Use naming conventions that make sense to everyone.
Use the Check In/Check Out feature of Dreamweaver MX 2004.
Use the Design Notes feature of Fireworks MX 2004 and Dreamweaver MX 2004 to facilitate communication among the team members. Design notes are the virtual equivalent of a "sticky note." As Dreamweaver pages or Fireworks files move through the production process, these notes move with them.
When you define a remote site in Dreamweaver MX 2004, all the remote options, except for None, present you with the opportunity to Enable File Check In and Check Out. If you are on a production team, always select this option. Doing so lessens the remote chance of two people working on the same file at the same time.
If a file is checked out, you will see a check mark next to the file's name in the Site Window. If the check mark is red, the file is in use, and the user's name will appear. If the check mark is green, you are working on the file. Clicking on a user's name opens your email application and allows you to shoot a note to the individual working on the file.
Setting up the Check In/Check Out protocols is quite easy if you follow these steps:
Select Site, Manage Sites… to open the Manage Sites dialog box. Select the site from the list on the left and click the Edit button. If the site is a new one, click the New button or select Site, New Site….
At this point, depending on how you have configured your version of Dreamweaver MX 2004, clicking the Edit button or the New button will launch the Site Definition Wizard. If this happens, simply click the Advanced tab in the Wizard.
When the category list appears in the Advanced Options, select Remote Site. Selecting any of the options in the Access pop-down menu, except for None, will activate a button at the bottom of the window that will activate Check In/Check Out. Click the Enable File Check In and Check Out button to open the options shown in Figure 1.4.
Enter your name in the Check Out Name Box. Many developers add the location or computer they are using. For example, Jordan has a portable computer, a computer in his home, and another in his office. In this case, he would enter Jord-Home, Jord-Office, or Jord-Portable. This lets the others in the group know not only who has checked out the file but where he is working on that file. Entering your email address allows one-click communication within the work group.
Click OK to Enable Check In/Check Out. This closes the Advanced Window and returns you to the Edit Sites dialog box. Click Done to close the box and save the changes made to the site.
Having enabled Check In/Check Out, here is how to check a file out.
Open the site and select Site, Check Out, Command-Option-Shift-D (Mac) or Control-Alt-Shift-D (PC). If there are files such as video and downloads associated with the page, the Dependent Files dialog box will open. Selecting Yes will download those files to your disk as well.
After you make your decision, a Status Window will open, and a progress bar will show you the progress of the download to your computer. When that is complete, a check mark will appear beside the checked-out file as shown in the Site Map in Figure 1.5.
When you are finished with the file, make sure the site is active and the files to be Checked In are selected. There are a number of ways to check the file(s) in, such as:
Select Site, Check In, Command-Option-Shift-U (Mac) or Control-Alt-Shift=U (PC).
Click the Check In button on the Site View toolbar.
Select the files and Right-Click (PC) or Control-Click (Mac) to open the Context menu. Select Check In.
If there are dependent Files associated with the document, select Yes when prompted.