Section 9.5. Comparing Versions of a Web Page

9.5. Comparing Versions of a Web Page

Sometimes you'll make a change to a page, save it, preview it, close it, and move along to the next assignment for the day. Only later, when you're previewing your day's changes, just before moving them up to the Web server, you notice that one of the pages you changed has some problem you didn't notice at first: perhaps the left sidebar is suddenly wider than it was before. Since you've already closed the file, you can't use the Undo feature to remove whatever wacky mistake you made. You could, of course, retrieve the current version of the page from the Web server (see Section 15.2.2), thus overwriting your changes. But what if you did a lot of good work on the pageadding text, graphics, and linksthat you don't want to lose. Ideally, you'd like to see all of the changes you made to the page, and selectively undo the mistake you accidentally introduced to the sidebar.

Enter the Compare File command. Dreamweaver 8 introduces this new command that lets you compare two files and see what lines of code are different between the two. This tool is a perfect solution for problems like the unintentionally botched sidebar. With it, you can compare the local file (the one with the messed-up sidebar) with the remote file (the live version of the Web site that works, but is missing the fine new pictures and words you added). You can then identify any changes you made and undo your mistake.

Dreamweaver doesn't actually have this tool built into it. Instead, Dreamweaver just passes the files you wish to compare to a separate file-comparison utility (often called a "diff" tool, since it identifies differences between files). You'll need to download this utility, and there are a lot of different ones to choose from. Fortunately, there are several free utilities for both Windows and Mac that you can download (see the boxes below).

WINDOWS ONLY
Getting Your Hands on the Goodies

There are lots of file-comparison tools for Windows. Beyond Compare from Scooter Software (www.scootersoftware.com/) is a commercial product ($30) that offers a wide range of comparison options. For a free alternative, check out WinMerge (www.winmerge.org). This open source software provides all the basic options you'll need. But, of course, in typical open source style, directions for identifying and downloading the software aren't really clear. So here's how you get it. Go to www.winmerge.org. Click the "WinMerge" link in the Downloads section of the left sidebar. This link takes you to a different siteSource Forge.net, a kind of warehouse for open source software. Here's where things get a little weird: You'll see a list of around eight different downloads.

Click the one labeled Download WinMerge-2.2.4-Setup.exe the number 2.2.4 in this example may be different, as they often release newer versions. At any rate, this link takes you to another page, where you select a download location from a long list of Web sites. Just click any of the file icons that appear under the "Download" category.

The file should then start downloading onto your computer. Once completed, the process for installing the program is like most other Windows programs. Just double-click the file to launch an installer, and follow the step-bystep installation instructions. Once it's installed, you're ready to proceed as described on Section 9.5.1.


MACS ONLY
What Difference Does It Make?

The Mac version of Dreamweaver supports only three filecomparison tools: File Merge (which is a Mac developer program that comes with the XCode tools on your Mac OS X installation disc), BBEdit (the powerful, $199 commercial text editor), and Text Wrangler (the free little brother of BBEdit). Bare Bones Software (www. barebones .com) produces both BBEdit and Text Wrangler, but since Text Wrangler's free, it's the best place to begin.

Point your Web browser to www.barebones.com/products/textwrangler/download.shtml and click any of the download links to download the program to your computer. As with many Mac programs, this download opens a disk imagejust like a folderwith the application inside it. Just drag it to your Applications folder to install it. Once installed, you're ready to proceed as described on Section 9.5.2.


After downloading and installing the file-comparison utility (see the boxes on the opposite page), you need to tell Dreamweaver where to find your new helper:

  1. Open the Preferences panel, by choosing Edit Preferences (Dreamweaver Preferences on the Mac), or pressing Ctrl+U ( -U), and click the File Compare category .

    There's not much to this Preferences category, just a single box and a Browse button.

  2. Click the Browse button and navigate to and select the file-comparison utility .

    For example, on Windows you might find your utility here: C:\Program Files\ WinMerge\WinMerge.exe .

    On the Mac, it's slightly different. Instead of selecting the text-editing program Text Wrangler or BBEdit, you need to specify the proper "diff" tool, which is stored in a special location on your computer. Navigate to the /usr/bin foldersomething like this: Macintosh HD:usr:bin and select the correct file. For Text Wrangler, it's twdiff ; for BBEdit, it's bbdiff ; and for FileMerge, it's opendiff .

  3. Click OK to close the Preferences window .

    Dreamweaver's been notified of the location of the utility, so you're ready to begin comparing files.

The Compare File command works with a local file and a remote file, so you'll need to have already defined a site with both local and remote root folders (see Chapter 15 for details on how to do this). In addition, since you're comparing two files, you'll need to make sure you've got two versions of the same file on your local computer and your remote sitefor example, your home page, or one of the other pages in your site. To compare the files, follow these steps:

  1. In the Files panel, locate the file you wish to compare .

    This can be either a file listed in the "Local View" or "Remote View" of the Files panel (see Section 13.1.4).

  2. Right-click (Control-click) the file, and from the pop-up menu that appears, select "Compare with Remote."

    This menu will say "Compare with Local" if you're in the Remote view of the files panel.

    Dreamweaver does a little behind-the-scenes trickery before passing the files off to the file comparison program. It first creates a folder (if it's not already created) named _ compareTemp in the local root folder of your site. Dreamweaver then creates a temporary file with all of the code from the remote-site file, and stores that in the new folder. In other words, you don't actually compare the file on the live Web server with the local file on your computer; you compare a copy of the remote file with the local file. This distinction is important to keep in mind if you want to incorporate changes between the files, as described in step 3.

    At any rate, your selected file-comparison programfor example, WinMerge or Text Wranglerwill start and compare the two files. If there are no differencesthey're exactly the same filesthen you'll most likely get a message saying something to the effect of "The Selected Files are Identical." So if no differences are found between the files, your work is done. If there is a difference, the file-comparison program will display the two files and identify the code that differs between the two files (see Figures 9-14 and 9-15).

  3. Evaluate the differences and incorporate any changes into your local file .

    File-comparison programs work generally the same way. When comparing two files, you'll see the code for the two files side by side. In addition, the program will have some way of notifying you of any differences. You can then review the differences in the code, and merge the changes into one file or the other. For example, say you accidentally deleted a table from your local file; a comparison of this file with the remote file will show the table intact in the remote file and indicate that it's missing in the local file. You can then copy the table code from the remote file into the local file. If, however, you deleted the table purposefully, then do nothing and move on to evaluate the next difference.

    Here's where Dreamweaver's little bait-and-switch mentioned in step 2 becomes important. You're not actually comparing the remote file with the local file; you're comparing a copy of the remote file saved locally in the _ compareTemp folder. As a result, you'll want to move changes only in one directionfrom the temporary file to your local file. Changes in the temporary file will have no effect on the actual live file on your Web server. So how do you update the remote file? Move any changes you want made from the temporary file to your local file. Once you're satisfied with the changes, you can save them, return to Dreamweaver, and then upload them to your remote site folder. Then pour yourself a cup of tea and be thankful you don't have to do that very often.

  4. Save any changes, return to Dreamweaver, and then move your newly updated local file to your Web server .

    The exact process varies from program to program, but see the next two sections for examples using WinMerge and Text Wrangler.

9.5.1. Using WinMerge to Compare Files

If you've got a Windows PC and you're interested in taking Dreamweaver 8's new Compare Files command for a test drive, see the box on Section 9.5 for instructions on how to download WinMerge, and then follow these steps:

  1. Once you've downloaded and installed WinMerge, follow the steps on Section 9.5 to set up Dreamweaver's preferences for working with WinMerge .

    First you need to make sure Dreamweaver knows to use WinMerge for file comparison.

  2. Follow steps 1 and 2 at the bottom of Section 9.5 to select a file and tell Dreamweaver to compare it with its sibling on the remote Web server .

    WinMerge launches, and if there are any differences between the files, the program shows the code for the two files side by side with all differences highlighted (see Figure 9-14).

    In WinMerge, differences are highlighted by one or more yellow bars in the leftside "Location" pane (circled in Figure 9-14), and the code is either highlighted in yellow (meaning there's content present in one file that's missing in the other file) or gray (meaning there's content missing in one file that's present in the other file).

    Figure 9-14. WinMerge includes a kind of bird's-eye view of code differences in the far-left Location pane. Click near any yellow bands (circled) to jump to code that differs between the two files. You can also tell which file is the temp (remote) file, by looking at the file path just above the page's code and locating the file with _compareTemp in the name . In this example, the left page's path is Y:\11\_compareTemp\TMPdbt72jj6k7.htm; it's the code from the remote file.
  3. Click anywhere in the page and click any of the "diff" navigation buttonsnext diff, previous diff, first diff, or last diff (see Figure 9-14) .

    "Diff" stands for difference, so clicking these buttons takes you to the locations in the files where the code differs. Doing so also selects the differing code and highlights it in red. You can now see which code you wish to keep.

  4. If the code in the remote file looks correct, click the Copy Right or Copy Left button .

    Which button you click depends on whether the remote file is in the left or right side of the window (see Figure 9-14 for instructions on figuring this out).

    If the remote code is on the left, click the Copy Right button. This button moves the code over to the page on the rightyour local file.

    You don't need to do anything if the code in the local file looks okay.


    Tip: The "diff" pane gives a clear picture of how the code differs between the files. To view it, choose View Diff Pane.

    Continue with steps 3 and 4 until you've evaluated all of the differing code in the two pages .

    At this point, the "perfect" copy is your local file. It has all of the correct code from the remote file and all of the correct code from the local file. You just need to move it to your Web server.

  5. Move your local file to your Web server, using one of the techniques described on Section 15.2 .

9.5.2. Using Text Wrangler to Compare Files

Mac owners can download the free Text Wrangler if they want to compare files (see the box on Section 9.5). Fortunately, since BBEdit is a more powerful version of Text Wrangler, these steps will work for that program as well:

  1. Once you've installed Text Wrangler, follow the steps on Section 9.5 to set up Dreamweaver's preferences .

    First you need to make sure Dreamweaver knows to use Text Wrangler for file comparison.

  2. Follow steps 1 and 2 at the bottom of Section 9.5 to select a file and tell Dreamweaver to compare it with its sibling on the remote Web server .

    Text Wrangler launches, and if there are any differences between the files, it shows the code for the two files side by side (see Figure 9-15). Where lines of code differ, Text Wrangler identifies them in the Differences panel below the two pages. The program also gives some indication of how the lines differ : for example, "Nonmatching lines" means the lines are similar (some of the code is the same) but not identical, while "Extra lines before line xx" means that completely different lines of code are in one file but not the other.

    If the files are identical, Dreamweaver pops up a "No difference found between these files" message.

  3. In the Differences panel, double-click the difference you wish to inspect .

    It's a good strategy to just start at the top of the list and work your way down.

  4. If the code in the remote file looks correct, click one of the Apply buttons in the Differences panel .

    Which button you click depends on whether the remote file is in the left or right side of the window (see Figure 9-15 for instructions on figuring this out).

    If the remote code is on the left, click the "Apply to Old" button. Doing so moves the code over to the page on the right, your local file.

    You don't need to do anything if the code in the local file looks OK.

    Figure 9-15. Text Wrangler in action. Where the remote file's code appears (left side or right side) determines which of the two Apply buttons you should click. You can identify the remote file by its name. In this example, TMPojosfkj9ur.html indicates the temporary copy of the remote file Dreamweaver created, as described on Section 9.5.
  5. Continue with steps 3 and 4 until you've evaluated all of the differing code in the two pages .

    At this point, the "perfect" copy is your local file. It has all of the correct code from the remote file and all of the correct code from the local file. You just need to move it to your Web server.

  6. Move your local file to your Web server, using one of the techniques described on Section 15.2 .

Comparing a local file to a remote file with Dreamweaver is quick and easy. You can also access the file-compare feature to compare two local files, or two remote files, but the steps are so convoluted that it's a lot easier just to bypass Dreamweaver and go directly to WinMerge, Text Wrangler, or the file-comparison utility of your choice. In the case of two remote files, download them first and then conduct the comparison.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net