In This Issue...

Web Developers: Rip the PrintScr Key Off your Keyboard

• Take screenshots that show the entire length of a webpage, then add them to your portfolio
• Document the history of a Web site's design and compare competing sites side-by-side
• Send annotated screenshots of your in-progress designs to clients for comments and feedback

Introduction

As the end of the year creeps closer, the software releases are coming fast and furious! Most notable for Web developers is the release of Macromedia's MX 2004 line of products.

This month also marks the major release of Microsoft Office 2003, which includes FrontPage 2003 among the slew of powerful and complex programs. Even the games market is busy, with a number of long awaited titles coming out this month to beat the Christmas rush!

With all this new software, I'm in serious "review mode" here. As a result, this issue of the Tech Times includes two detailed reviews of new software that I hope you'll enjoy!

Happy Reading!

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Software Review

Dreamweaver MX 2004 (Macromedia)
$399.00 ($199.00 upgrade)
30-day trial download available

Another year, another version of Dreamweaver. The Big Question, as always: should you fork out for the update? Well, if you use CSS in your Web design work -- especially for page layout -- then the answer this year is "absolutely!"

A casual glance at Dreamweaver MX 2004 reveals that the Macromedia interface designers have been at it again. For the second version in a row Macromedia have completely revamped the look of the interface. Thankfully, the interface changes are mainly skin deep, and everything works the same way it did in Dreamweaver MX, only it looks slicker!

Looks aside, the biggest change in Dreamweaver MX 2004 is the improved CSS support. From the code editor to the WYSIWYG view, all the existing features of the program provide better and more complete support for CSS. The WYSIWYG view keeps surprising me with just how closely it emulates CSS compliant browsers like Mozilla, Internet Explorer 6, and Opera 7, and the code editor now provides complete pop-up hints for hand-coding CSS.

Complex backgrounds and borders, intricate positioning hierarchies, floats and display modes... it's all there! All but the most complex CSS layouts should appear reasonably well (if not 100% correct) in Dreamweaver's WYSIWYG view. In some cases, Dreamweaver's WYSIWYG view does a better job of conforming to the CSS standards than even the latest version of Internet Explorer!

But the real highlight of Macromedia's emphasis on CSS with this release is the Relevant CSS Panel.

With this miracle of interface design, you can instantly see all of the CSS rules that apply to the currently-selected element in the WYSIWYG or Code view. I'm not just talking about the rules that match the selected element, either. This panel shows every rule that applies to the selected element and its ancestors! This lets you see attributes that affect the selected element through CSS inheritance.

In the top section of the panel, you get a list of the rules that may affect the current element. The rules are listed in the order they apply to the element, according to the cascading rules of CSS. Click on a particular rule, and the lower section of the panel tells you where it's defined (e.g. "In styles.css", or "In current document") and lists the CSS properties that it defines. Defined properties that affect the selected element are shown in normal blue text, while those that are either not inherited properties, or which are overridden by a rule later in the cascade appear with a red line through them.

This panel isn't just for examining CSS rules either. All of the properties in the listing are directly editable; and if you prefer to hand-code your CSS, you can double-click on any of the rules in the top half to jump straight to the relevant line of code in the main editor.

With this unique tool Macromedia seems to have unlocked the secret to working logically with CSS in a GUI. It takes a bit of getting used to if your CSS knowledge is a little rusty, but for those of us who fully appreciate how CSS works, this is truly a feature to behold.

Okay, but what if CSS isn't your cup of tea? Or what if the CSS support in Dreamweaver MX is sufficient for the way you use this technology? Well, there are lots of other new and improved features in MX 2004:

• Automatic browser compatibility checking
  
  A little icon at the top of the document area notifies you if Dreamweaver has detected any coding errors or unsupported features that may prevent your page from working in a particular browser. Click on the button, and the Results panel gives you a complete list that you can click to fix each problem in turn.
  
  This may sound a lot like the validation features of Dreamweaver MX, but this feature checks both HTML and CSS code, and can find and identify known compatibility issues with most popular browsers (not just the published specifications), including recent entries like Safari 1.0 for the Macintosh.
  
  Those of you who don't want to be notified when you use CSS properties that, say, Netscape 4 doesn't support, fear not! You can configure which browsers and versions are checked for compatibility.
   
• Secure FTP support
  
  This is a big one for me, since all of the SitePoint servers accept file transfers by Secure FTP only.
  
  You see, ordinary FTP sends and receives all data in plain text (including passwords!), and so it very susceptible to hacking. Secure FTP, on the other hand, encrypts all data flowing to and from the server. If you still use FTP to upload your files, now is the time to consider this secure alternative!
  
  With this new support, I can finally upload changes to my Web site without having to open a separate program, and I can take full advantage of the features in Dreamweaver's file management panel.
   
• Direct editing of remote files
  
  Speaking of which, there are times when you want to quickly update a file stored on a remote server without all the hassle of setting up a full Site in Dreamweaver.
  
  Dreamweaver MX 2004's Sites panel now lets you create simple FTP and network server connections in addition to full-fledged sites. With these connections, you can quickly open, edit, and update a remote file without the hassle of setting up a local directory structure to mirror the site locally.

Those are just a sampling of the improvements Dreamweaver MX 2004 has to offer. To get a full appreciation for the changes, I recommend downloading the 30-day free trial and using it in your own work for awhile. Just to satisfy your curiostity, though, here's a list of some of the more significant improvements I've noticed:

• a welcome screen that is unobtrusive and useful for experienced users
• code editor in general is more useful and powerful, including pop-up hints for ASP.NET
• PHP support is now feature-equivalent with the other server models
• integration with Fireworks lets you to perform simple image editing tasks inside Dreamweaver
• XML editing improved with XML namespaces support
• pasting from HTML-aware programs including Microsoft Office applications preserves formatting
• updated version of HomeSite+ included

So, back to the Big Question. As you can see, there is plenty of meat to this new version, but the biggest changes are most definitely in the area of CSS support. If you're not going to benefit from those features, then the $199 price tag for the update is probably a bit much for what, when it comes down to it, is an evolutionary step forward in most areas of the product.

But if you use CSS to format your sites, and especially if you use or were hoping to take up CSS page layout, then this is an indispensable update. Get it now and never look back!

Introducing t-refer
thawte's new digital certificate referral program.

Quick Tip

PHP Error Suppression and Variables

We were overdue for a good PHP tip, I thought, and this issue's review of PHPEd (see below) provided just the excuse I needed!

Your average PHP configuration is getting tighter every day. register_globals has gone out of fashion, and error reporting levels are being turned up to maximum -- all in the name of improved security.

Unfortunately, this means that the average PHP script has to jump through more and more hoops to do even basic things like print out a submitted variable. Whereas once you could output a submitted variable for use in a form field with this simple code,

<input type="text" name="varname"
  value="<?php echo htmlentities($varname); ?>"
/>

to conform with current PHP portability requirements and best practices you now have to do all this,

<?php
$varname = '';
if (isset($_POST['varname']))
  $varname = $_POST['varname'];
?>
<input type="text" name="varname"
  value="<?php echo htmlentities($varname); ?>"
/>

Not only do you have to use the $_POST array to access the submitted value, but you have to check that the value actually exists before you attempt to output it; otherwise, you could get an ugly warning about a nonexistant variable! But who's got time for all that?

Thankfully, PHP's error suppression operator (@ ) comes to the rescue. You're probably familiar with using this operator to silence error messages generated by PHP functions, such as mysql_query , when you want to display your own error message instead:

$result = @mysql_query($sql);
if (!result) echo 'Error...';

As it turns out, this operator can also be used on variables to suppress the PHP warning that is displayed when you try to use a variable that doesn't exist. This allows us to simplify our previous example as follows:

<input type="text" name="varname"
value="<?php
echo htmlentities(@$_POST['varname']); ?>"
/>

As you can see, we can now use the $_POST['varname'] variable even when it may not exist thanks to the error suppression operator, which hides the warning message that would usually appear.

Software Review

PHPEd 3.2 (NuSphere)
$299 single license (30 days installation support)
$495 single license (1yr free upgrades and support)
$50 each additional license

Serious Web developers on platforms like J2EE and ASP.NET use powerful Integrated Development Environments (IDEs) like JBuilder and Visual Studio to create their masterpieces. NuSphere PHPEd provides that same power to PHP developers... with just a few rough edges.

SitePoint author Mitchell Harper first published his review of PHPEd over a year ago, and had generally good things to say. With this review, I decided to take a close look of my own, and also see what's been added in more recent versions of this product.

Now let's face it, there are a lot of text editors out there that support PHP -- many of them free. So as I installed PHPEd, I was looking forward to an editor that not only supported PHP, but but was designed from the ground up with the language in mind.

And I must say, I was not disappointed! PHPEd's code editor provides all the modern amenities:

• syntax highlighting with configurable colors
• unlimited undo and redo
• configurable autoindent with tabs or spaces
• customizable code formatting templates
• configurable keyboard shortcuts
• function and variable name autocompletion
• pop-up parameter references for recognized functions
• hotkey matching of braces, parentheses, and angle brackets
• multiple code bookmarks per file
• split view of long scripts

And though PHPEd is specialized for PHP, all of the above features are also available for HTML, CSS, ASP, Perl, SQL, JavaScript, C/C++, and Python!

As promised, however, PHPEd provides a number of PHP-specific features that are hard to find elsewhere. You can toggle between two highlighting modes, where either the HTML or PHP code in the file is greyed out. The editor knows the difference between functions (e.g. printf) and function-like commands (e.g. echo), highlighting them differently. Variable names that appear in double-quoted strings are detected and highlighted, and PHPEd will even prompt you to select from a list of the variable names in your script when you first type a dollar sign in a double-quoted string. Slick!

The one and only complaint I have with PHPEd's editor is that it doesn't recognize heredoc syntax, but this is a feature that I haven't been able to find in any other PHP editor either.

Unfortunately, the IDE surrounding this top notch editor doesn't have quite the same degree of polish. It feels like it was assembled from components that weren't necessarily designed to function seamlessly together. For example, the "Full Screen" feature that is designed to maximize the code view and hide any docked tool windows actually just "squishes" the tool windows against the sides of the screen.

Almost every element of the interface can be dragged into its own window or docked elsewhere in the main window. While I like a customizable interface as much as the next guy, it's very easy to mess up the window layout when you're trying to achieve relatively simple interface configuration tasks. Fortunately, you can always restore the default layout or lock your existing layout in place.

The settings window, which lets you configure almost every aspect of the program's operation in one place, has a number of settings that will save the changes you make to them even when you click Cancel to close the window. That's a big usability no-no!

But if the interface of the IDE has its faults, the powerful technology and features under the hood make up for it. And this is where the steep price of the product begins to seem justified...

At the top of my list of things I miss when moving from Java or .NET to PHP is a debugger. For the less experienced, a debugger lets you pause a PHP script as it is running on your Web server and step through it, a line at a time, tracing its execution while watching the values of important variables. There is simply no better way to track down a bug in your code.

Although beginners will choose to use the bundled copies of Apache and PHP, which have debugging support built in, PHPEd comes with a pre-compiled debugger module for all recent versions of PHP so you can painlessly add debugging support to your existing test server. A couple of typos in the NuSphere documentation for this module can make setup a challenge, though.

I played with the debugger both on the mini Web server that PHPEd uses by default and on my preexisting copy of Apache, and found it works exactly like the debuggers I'm used to in other IDEs. In addition to the basic debugging features, however, NuSphere also saw fit to add a profiler!

The profiler lets you analyze the performance of your PHP scripts. After running a script through the debugger, simply pop open the profiler and you can see the amount of time each line of code, each function, or each .php file involved in processing the request took to execute. After seeing how incredibly long database connections take relative to most other PHP code, I'll definitely be using persistent connections wherever possible from now on!

Docked to the right of the screen by default, a number of reference and utility panels assist in common coding tasks:

• The Functions panel provides a categorized listing of PHP, JavaScript, and VBScript functions, or HTML tags. As is often the case with PHP, if you can only remember part of the name of a function, you can type it into a field and the list is instantly filtered for you. From the list you can instantly access documentation or insert a function call.
   
• The DB Client panel lets you connect to and browse MySQL and PostgreSQL databases. Double-clicking on a table opens a view of the table's structure, the SQL code used to create it, a table of its contents and other tools. Unfortunately, the lack of support for Windows ODBC data sources means that developers who use MS SQL and other database servers are out of luck.
   
• The NuSoap Client panel is a welcome, if at first confusing addition. The tree structure lets you browse public and custom-configured directories of Web services -- pieces of prebuilt functionality that can be dynamically accessed by your PHP scripts over the Internet, often free of charge. In theory, you can simply drag services in the browser to a code window to insert the necessary PHP code to use it. In practice, however, you still need to know a fair bit about XML and Web services to make effective use of this feature.

More hand-holding alternatives to the DB Client and NuSoap Client panels exist in the form of Wizards. The DB Wizard walks you through choosing a database, a table, and a collection of fields with validation rules. The Wizard then produces a complete PHP script that lets you view, insert, and update entries in a database table, complete with JavaScript code to validate the form fields according to your specifications.

Unfortunately, there is no way to link foreign key fields to other database tables, and even when you select the "standalone script" option, the generated code relies on a NuSphere include file for its database operations. Additionally, the HTML code generated by the Wizard is not compliant with current XHTML standards, and the JavaScript validation code is not backed up by server-side validation. To make a long story short, the Wizard is adequate for quick-and-dirty insert/update forms, but is far too limited to be useful in professional projects.

The NuSoap Wizard provides a similar facility for connecting to and using Web services. Unfortunately, unlike other IDEs that integrate Web services, this wizard doesn't give access to the documentation associated with Web services, so you need to know enough XML to find and fill in the parameters in the generated SOAP request. Nor does the wizard provide any help in decoding the XML response from the Web service. So once again, this wizard is of limited utility in practical applications.

The final aspect of PHPEd that rounds out the IDE is the collection of code management and deployment features. Like most IDEs, PHPEd works with collections of files called projects. If find yourself with a lot of projects, you can further group these into workspaces .

Each project can be configured with a test server if required, but in most cases PHPEd can access and run your scripts directly with its own built-in copy of PHP. Additionally, you can configure file upload settings complete with multiple local-to-remote directory mappings. PHPEd's built-in file transfer features support FTP and WebDAV servers only (fingers crossed for Secure FTP support in a future version!). Unfortunately, there is no built-in support for publishing to a local or network drive.

On top of these fairly standard file management features, PHPEd adds CVS support. Especially useful for team-based site development, a Concurrent Versions System (CVS) server lets you track changes to and manage versions of project files. Whenever you make significant changes to files, you "commit" those changes to the shared repository and any other developers working on the project can update their working copies with those changes. Should a change ever break the site, you can easily check out an older version of the site's files and put them on the server while you fix the problem.

CVS support in PHPEd is solid, if simplistic. Basic CVS operations for files/directories/projects are available from the right-click menu in the project panel. Lacking are features for viewing file history, making side-by-side comparisons of different versions, tagging groups of file versions with labels, and resolving conflicts when the same version is updated by two developers at once. Fortunately, you can easily use an external CVS tool such as WinCVS to perform these tasks without interfering with PHPEd.

All up, PHPEd is an impressive product with a few rough edges. I'd have to say that the true value of the product lies somewhere between its $299 "first licence" price tag ($495 with updates and support) and the $50 that NuSphere charges for additional licenses. So while it's an expensive tool for a single developer (especially if you want access to updates and support!), a large team can get quite good value for money.

Help Your Friends Out

Download Kev's PHP/MySQL Tutorial

• [b]Tutorial: Photoshop 7 : Gradient Background[/b]
  in Graphic Tutorials and Methods
  
  
• Like Mozilla? What are you doing for Mozilla?
  in Computer Help Desk
  
  
• Verisign takes over the net.
  in Domain Names
  
  
• How to make OO code not bloated in PHP?
  in Advanced PHP Programming
  
  
• MX 2004 Out now! Trial download links included
  in Web Development Software
  
  
• cbe and the x.js
  in Javascript
  
  
• PHP vs Python
  in General Development Issues
  
  
• Is CSS safe?
  in CSS
  
  
• Which PHP editor to buy or download?
  in Web Development Software