Using Design Notes for Improved Workflow

[ LiB ]

The idea behind Dreamweaver Design Notes is simple: A Design Note is a small file that contains pieces of information about a document. That file follows that document wherever it goes (from your office computer to all the other computers in the office, and even to the web server itself if necessary). It can be accessed at any time by any design team member. Therefore, Design Notes allow you to leave notes associated with specific files for yourself and your coworkers. This means that you can track changes to documents, map their progress and history, or update and change a document's completion status. Although this chapter focuses on using Design Notes to save information such as file status for HTML documents, they can potentially store any type of information you can think of and can be attached to any kind of file.

Design Notes as they pertain to image editing are discussed in Chapter 5, "Working with Images." Customizing your file view columns using Design Notes is covered in Chapter 17, "Local Site Management."

How Design Notes Work

As mentioned, Design Notes are small files that are "attached" to a document that store designer information about the document (see Figure 19.1). The Design Note is not literally attached; it is stored in a _ notes folder next to the document. The _ notes folder is the repository for all your site's Design Notes.

Figure 19.1. Design Notes as they appear in the local root folder structure.

Open this folder, and you'll see a selection of files, all named after various files from your site, but with the .mno extension added. These are your Design Notes files. This folder cannot be seen within the Dream- weaver Site window. The _ before the folder name makes the folder invisible to the Dreamweaver Site window, so to see this folder, you have to go to the site folder through the operating system file explorer. Design Note files are basically small XML text files. Open one of the files, either in your favorite text editor or in Dreamweaver Code view, and you'll see a chunk of XML code that looks something like this:

 <?xml version="1.0" encoding="iso-8859-1" ?> <info>     <infoitem key="status" value="draft" />     <infoitem key="author" value="Julius Marx" /> </info>

Each piece of information about the parent file is stored as an <infoitem/> tag containing a key/value pair ( status/draft , for instance). The first time a document needs a piece of information about itself to be stored, Dreamweaver creates the MNO file. After that, every new piece of information that needs to be stored adds another <infoitem/> tag. Dreamweaver, Fireworks, and Flash can all access and read the same Design Notes, which is what makes the tight integration between the programs possible. And when the site files are moved from one computer to another, the Design Notes are moved as well, so various team members can all access the same pieces of information and coordinate their work.

Enabling Design Notes for a Site

Before you begin using Design Notes, you need to set up basic Design Notes capability in your site. To enable Design Notes, follow these steps:

Access the Site Definition dialog box by choosing Site > Manage Sites, selecting your site in the Manage Sites dialog box, and clicking Edit. Or double-click the Site Name in the Sites drop-down menu in the File panel. This opens the Site Definition directly.
In the Advanced tab of the Site Definition dialog box, choose the Design Notes category, as shown in Figure 19.2.

Figure 19.2. The Design Notes category of the Site Definition dialog box.
Check the Maintain Design Notes check box if it is not already checked. This allows Dreamweaver to start creating Design Notes. If it is checked already, you might already have some design notes.
If you're using Design Notes as a communication aid in a collaborative work environment, select Upload Design Notes for Sharing. With this feature enabled, every time you upload a document to the remote site, the file's associated Design Note is uploaded with it. This allows all team members who share work on a document or image to view its status quickly and easily and send notes regarding work to be done on the document.

If you're using Design Notes only for your own benefit, in a single- user environment, leave this option deselected to speed up file transfer between local and remote sites.

Working with Design Notes

After you've enabled Design Notes, you can view, create, edit, and delete notes as needed to store any document- related information you like.

Accessing Notes

The main interface for working with Design Notes is the Design Notes dialog box. To access this dialog box, do one of the following:

Open the file whose Design Note you want to work with, and select File > Design Notes.
In the Site Files pane of the Site panel, right-click (Windows) or Ctrl-click (Mac) the file whose Design Note you want to work with. From the context menu that appears, select Design Notes.

The Basic Info tab, shown in Figure 19.3, contains a simple interface for assigning document status and jotting down comments to share with coworkers (or reminders to yourself). The All Info tab, shown in Figure 19.4, displays all Design Notes for the current document, including status, comments, and any other Design Notes (including those added automatically by Dreamweaver, Fireworks, or Flash for working with the document).

Figure 19.3. The Design Notes dialog box's Basic Info tab.

Figure 19.4. The Design Notes dialog box's All Info tab.

If the file Check In/Check Out system is in use, you need to check out a file before accessing its associated Design Note.

Creating, Editing, and Deleting Notes

When you are in the Design Notes interface, you can create notes, edit them, and remove them using the Basic Info and All Info tabs of the dialog box.

Setting Document Status

Labeling documents according to their current status (draft, revision1, and so on) is an important tool in a collaborative workflow.

To set the document status to one of the predefined choices, bring the Basic Info tab of the dialog box to the front, and choose from the Status pop-up menu.

To set the document status to a value not on the list of choices (such as Beta 1 or Beta 2), bring the All Info tab to the front. Click the + button to add a new note. In the Name field, enter status; in the Value field, enter your custom value ( beta 1 ). When making custom notes such as status, make them clear to other users. It might be a good idea to have a defined set of values for everyone to reference.

Adding Comments

You can make miscellaneous notes regarding a documentinstructions on what needs to be revised, peer review, whateverby typing into the Comment field in the Basic Info tab. To put a date stamp on the note, click the date icon above the Note field. After you've filled in a note, bringing the All Info tab to the front reveals that the note is actually saved as a name/value pair Design Note, just like status.

Adding Other Information

You can save any name/value pair as a comment by using the All Info tab of the Design Notes dialog box. For collaborative workflow, for instance, you might want to track authorship of documents, due dates, or task hours. To add any of these pieces of information, bring the All Info tab to the front, click the + button to add a new pair, and enter a name and value for that item. Check "Show when file is opened" to help ensure that the note is noticed.

Design Notes are great for job tracking because documents can be organized and searched according to the name portion of the name/value pair. If you want to use custom Design Notes for this purpose, however, make sure that you are consistent and predictable in naming your name/value pairs. For instance, it's no good trying to track authorship of documents across a site if some documents have a Design Note named author and others have a Design Note named writer .

Viewing Design Notes in the Site Panel

You can see at a glance which files in your site have Design Notes by examining the Site Files list. Any file with at least one Design Note displays an icon in the Notes column. If the Site panel doesn't display the Notes column, either because the column doesn't fit in the window pane or because the column is not enabled, you can change the File View Columns settings in the Site Definition dialog box so that this column does show in the expanded Site panel.

You can also customize the File View Columns in the Site panel to show the value of a particular Design Note. To do this, follow these steps:

Open the Site Definition dialog box for the site, and go to the File View Columns category.
Click the + button to add a column. The new column appears at the bottom of the list of columns.
In the Column Name input field, enter the name you want to appear the top of the column.
In the Associate with Design Note input field, type the name of the Design Note whose value you want to appear in the column (or choose from the pop-up menu of names ).
Use the up/down buttons at the top of the dialog box to rearrange the columns' order if you like. Figure 19.5 shows the resulting changes to the Site panel.

Figure 19.5. The File View Columns category of the Site Definition dialog box showing rearranged columns and a new Design Notes column being added.

Exercise 19.1. Creating a Status Design Note and Viewing It in the Site Panel

In this exercise, you'll create status Design Notes for several files within a site. You'll set different status values and examine how Dreamweaver implements the Design Note.

Before you start, download the files from the chapter_19 folder on the book's website at www.peachpit.com to your hard drive.

The files for this site are all in the chapter_19/local folder. Define a site called Chapter 19, with chapter_19/local as the local root folder and chapter_19/remote as the remote folder. (See Chapters 17 and 18, if needed, for more about defining local and remote sites.) In the Design Notes panel of the site definition, check both boxes.
With the Site panel expanded to view Site Files, examine the site's file structure. You see several HTML files.
Start by creating a note for index.htm . Right-click the file in the Site panel, and choose Design Notes.

In the Design Notes dialog box that appears, make sure that you are in the Basic Info tab. From the Status pop-up menu, choose draft .

To see that Dreamweaver is interpreting this note as a name/value pair, bring the All Info tab to the front. Dreamweaver has generated a name/value pair consisting of status/draft.

When finished, click OK to close the dialog box.

Notice in the Site panel that there is a small icon in the Notes column. This indicates that a note exists for this file.
To see how the Design Note has been saved as a Design Note file, use the file browser to examine the files in the local site's folders. You see a _notes folder, which now contains a file called index.html.mno . Open that file (it opens in Code view) and examine the XML code within. When you're done, close the file.
Repeat step 4 for solution.htm .
For the remaining file, about_us.htm , assign a new status called approved .

Open the file, and select File > Design Notes to access the dialog box. Instead of choosing from the Status pop-up menu (which doesn't contain the word approved ), bring the All Info tab to the front.

Click the + button to add a new Design Note. In the Name input field, type status . In the Value field, type approved .
Click the top folder in the Local Site panel. Then click the Put button to upload all the files to the Remote site. If you're asked if you want to put the entire site, click Yes. The Design Notes now show up on the other side, as shown in Figure 19.6. Other users can now download and view them.

Figure 19.6. The Site Files view of the website after you create and upload Design Notes.