Running with the web-enabled rat pack

Tim Greenhalgh reviews the latest essential tools for multimedia designers and their teachers

In the fairs of my early youth there was a particularly addictive game - Kill the Rat - that involved the seductive impossibility of whacking a small metal cylinder with a mallet as it shot down and out of a 20-foot pipe.

Keeping abreast of developments in web design tools engenders an eerily familiar sense of fun and absolute frustration. No sooner have you measured the range of tools, revised the wish list and plumped for the most creative offering when - whoosh berrrang - another batch of "rats" hurtles down the pipe.

It is also a feeling familar to most multimedia designers and their teachers in the university design schools who have helped to fuel the bone-jarring speed at which the web develops - from text and static image to almost true interactivity with real-time sound and motion in the space of two years. For design students, the need to be fully conversant with the major applications has developed an added twist in that they will be authoring for several "end platforms" - CD-Rom, enhanced CD, the Web and print with internet TV coming up fast. There is a convergent process, though, and while perhaps as little as a year ago students would need to employ many applications of varying power to author multiple platform content, the choice is narrowing as the established big players build more all-encompassing applications. These tools will be employed, too, by the increasingly professional academic web site builders - even if some take the position adopted by Yahoo, the web directory, that tailors its sites for the lowest common denominator, and excludes virtually no one who uses browser versions beyond 1.0.

Developers have also responded rapidly to demand for applications that hide aesthetically deadening raw code behind a strongly visual interface.

And the web tarmac is littered with sleek rodent remains - early HTML and graphics editors - hit by the international graphics tools company juggernauts that sensed and responded to a threat to their domains.

Now the companies have gone one step further by creating an entirely new product sector embodied initially in two new applications, Macromedia Fireworks and Adobe ImageReady (both still in beta). These tools attempt to address the vexing question of web graphics creation. Designers customarily use several applications, none designed primarily for web work, to create optimal graphics for web sites. While this has the benefit of working in familiar environments, it adds significantly to site production time.

Of course, Adobe and Macromedia are toughing it out on a number of net nodes. Three weeks ago, Adobe submitted a standards proposal for web vector graphics, Precision Graphics Markup Language (PGML), at the same time as Macromedia published its well-established graphics and animation Flash file format as an open standard.

Flash has become a web standard tool, along with Macromedia Shockwave - the application that first offered streaming animation and audio from Director files via a browser plug-in. Around 37 million Shockwave plug-ins have been downloaded from a Macromedia web site since 1997.

But Web designers have been clamouring for a "one-stop" web graphics solution. And of the two application betas Fireworks has the bigger impact in that it doubles as a drawing and bitmap manipulation tool. The user-friendly interface enables creation and comprehensive editing of relatively complex graphics.

In Fireworks, users can work with a path tool, creating lines and colour/texture fills with the results saved in in web image formats. Effects can be applied to objects such as bevels, drop shadows and glows with the results applied on the fly. A significant advantage is that the results remain fully editable, including text, and the application has up to 100 levels of undo. ImageReady records a history with the user able to revise from any point.

Fireworks's handling of text is superior at the moment to that of ImageReady. Any number of text fonts and sizes can be applied in a single document. ImageReady's strength lies with its more intuitive handling of frames in animation and more tightly integrated colour control. This includes an adaptive palette that can generate more closely matched natural colour variation. ImageReady also allows individual colours within a palette to be locked or removed.

Both companies will be revising extensively for final launch in early summer based on enthusiastic user feedback. As Sue Thexton, vice president Europe at Macromedia, says: "Apart from our own in-house core team, we have a huge developer team in the web community."

While it is still a given that most creative web design work is completed on the Macintosh platform, there are Windows 95 and NT versions of both Fireworks and ImageReady.

These two welcome tools, formidable enough, will be only part of any web site solution. HTML has to be hacked (visibly or not), the site needs to be checked, revised and promoted to the server. Part of the web roadkill includes those applications that do not include this level of functionality, essential for serious web creative teams. Other carcasses include those that have not addressed the emerging standards for greater control of the "look and feel" of web pages - Cascading Style Sheets (CSS), Javascript and various flavours of Dynamic HTML (DHTML).

XML (page iii) will let the web advance without constant browser updates. All the major application developers are including it on their upgrade wishlist.

The upgrades keep popping up at the end of the pipe. Macromedia Dreamweaver (now in version 1.02) set the standard for DHTML and CSS creativity at the tailend of last year and only in the past month is being challenged by NetObjects Fusion 3.0 (Windows, Mac) and in the past week by Go Live CyberStudio 3.0 (Mac only). Apart from Javascript and CSS creation, all three allow the (grateful) user to create DHTML without extensive coding but with varying levels of difficulty, that will perform on both Internet Explorer 4.0 and Netscape 4.0. Dreamweaver scores heavily over its two main rivals in that it generates clean HTML with no visible effect on the code of any pages imported into the application. Its interface is intuitive but occasionally sluggish except on the fastest processors with ample memory. Dreamweaver links seamlessly with other Macromedia applications, for example, Fireworks, Flash, Director and Freehand and automates the process of CSS and DHTML coding. Its interface will be familiar to Director users.

A welcome feature on the upgraded CyberStudio enables users to visualise how a page will appear in different browsers and platforms when a style sheet is applied. It generates style sheets that will work with all browsers supporting CSS.

Dreamweaver and CyberStudio use a Timeline metaphor to make objects on pages move. This key frame tool controls object behaviour by "recording" the action. Users can grab an object (an image, for example) and visually move it around the web page, creating a path. The Timeline window allows for further fine-tuning of these actions. Images can be made to overlap or join while images of text can be moved and faded. Users can automatically generate JavaScript-based animations and "Actions", without touching the code or employing other multimedia tools. Actions are ready-to-use JavaScript scripts, compatible with all major browsers. Actions are triggered through other page elements, such as links, text, images, or image maps. Actions can be used, for example, to begin an animation sequence, open specified windows, swap the content of an image, and show or hide an object on a page.

An Action within the page header can automatically link to different pages based upon a client's browser. Actions are fully editable and extensible. CyberStudio 3 ships with several fully editable Actions with additional Actions available for download from the GoLive web site. Users can also write their own Actions from within the application, share libraries of Actions and customise the Inspector Window interface for particular Actions. The interface is intuitive and runs fast and tight.

In Fusion, the latest upgrade has added Dynamic Actions. This is a message-based system that gives users the power to assign actions to create behaviours, added animation and interactive elements within a page.

It mirrors CyberStudio's functionality in that actions can be modified by the script-savvy user.

CyberStudio and Fusion also offer excellent visual site management tools, a feature absent in Dreamweaver. In both applications, the view of the site is in tree form and pages can be moved around freely in each. In Fusion, all links on the revised site are updated on the fly. Update features include the ability to select sections of the structure and assign MasterBorders, page extensions. Users can preview by site, section or page.

Site management is aided with the Assets manager that allows for rapid maintenance. though central management of a site resources. For example, if you change a link that is used throughout the site, the Assets manager will update every reference on every page in the site.

In CyberStudio, pages can be moved around using the site view with broken links highlighted for manual revision. It, too, has powerful asset management functions. CyberStudio's Site Window operates like a window onto the Macintosh Finder, exactly replicating the file and folder structure on the hard disk. Whenever users move pages into the Site Window, CyberStudio will automatically update links, with the option to not update individual links of the moved page.

The Site Window allows users to manage and verify pages, media, URLs, colours and font sets. Users can also drag and drop elements directly onto Web pages from the Finder and have them automatically added to the Site Window. CyberStudio will automatically add all elements - images, plug-in media, addresses, URLs, colors, and fontsets - to the Site Window, showing which elements are in use. There is also the ability to search and replace throughout a site, including colours and fontsets, selecting by the reference types to be included and excluded in the search.

Site management is also slowly but surely addressed in Microsoft FrontPage 98 (Windows). The latest update has underlined its formidable but cumbersome nature as well as the company's habit of recreating open standards in a proprietorial format. WebBots, for example, can replace CGI functions but the site must sit on a FrontPage server or Unix server with FrontPage extensions. It supports CSS but has limited support for DHTML. It has all the standard editing functions but unfortunately does not offer breathtaking speed as standard.

Sloth is not a sin practised by HotMetal 4.0 (Windows). The application runs well on standard Wintel boxes. Like Dreamweaver its HTML code is always clean. It has a robust site management tool that allows users to move and rename files and have links updated automatically. HotMetal supports CSS, DHTML and Javascript.

Freeway (Mac) was one of the early visual web applications and remains a useful starting point for graphic designers with no online experience but it is in need of a substantial upgrade to include the features, particularly new standards, that are covered by other tools. However, its appeal lies in its familiar DTP interface and ease of use. Its niche might be in rapid prototyping of web sites.

Design tools web sites:

Fireworks: www.fireworks.com

ImageReady: www.adobe.com

Dreamweaver: www.dreamweaver.com

CyberStudio: www.golive.com

Shockwave: www.shockwave.com

FrontPage: www.microsoft.com

NetObjects Fusion: www.

netobjects.com

HotMetal: www. softquad.com

Freeway: www. freeway.com