Tài liệu HTML and Web Design Secrets P2 docx

Table 1-6: Popular Web Animation Utilities Ulead Gif Animator Windows; very popular with many designers Commercial, low-cost product with 30-day demo, www.ulead .com/ga/runme.htm GIF Con

Figure 1-14:Fireworks is extremely popular for bitmap production.

Figure 1-15:Designing graphics using The Gimp, a freely distributed open-source imaging program

note For information on Adobe Photoshop, please visitwww.adobe.com/.Macromedia Fireworks can be found at www.macromedia.com/ Corel

products are showcased at www.corel.com/, and JASC’s Paint Shop Pro is available at www.jasc.com/ The Gimp for UNIX and Windows can be found at www.gimp.org/, and The Gimp for Mac OS X is at

www.macgimp.org/

  Secret #9: Vector Image Programs

For those of you who create logos, refine type, and enjoy drawing, the two most common drawing programs are Adobe Illustrator and Macromedia Free-hand (shown in Figure 1-16) Vector-based images differ from bitmap graphics

in that they contain the mathematical information necessary to allow them to be scaled without loss of quality They are extremely useful for creating curves and shapes Of course, you will need to rasterize your final work by converting it to bitmap formats, such as GIF or JPEG, if you’re going to use your illustration on the Web, but you can achieve far more complex drawing tasks in a vector-based program

Figure 1-16:Drawing geometric shapes in Macromedia Freehand

As with bitmap programs, there are a few shareware and open source gems that shouldn’t be overlooked, especially for those on a limited budget, who have lighter-weight needs for vector drawing

your design toolbox (see Figure 1-17).

 Sketch is a freely distributed open source drawing program for Linux,

with a Windows port version called “Skencil.’’

Figure 1-17:Using Mayura Draw for vector-based design

tip Web designers and developers using Linux platform and open sourcesoftware for designing graphics should check out LinuxArtist.Org, at

www.linuxartist.org/2d.php

For additional free vector drawing software resources, see http://

bourbon.usc.edu:8001/tgif/vector.html

  Secret #10: Web Animation Utilities

Outside of animation for advertising, GIF animations have somewhat fallen out

of favor for use on professional Web sites—except for those instances where very subtle effects are desired Of course, much of this has to do with the proliferation

of Macromedia Flash (which has also influenced Web advertising) Nevertheless, GIF animations are sill desired in some cases, so make sure you have one on hand

As with all software and utilities, some of the available Web animation utilities are commercial, and some are completely free Table 1-6 provides a variety of popular options from which to choose

Table 1-6: Popular Web Animation Utilities

Ulead Gif Animator Windows; very

popular with many designers

Commercial, low-cost product with 30-day demo, www.ulead com/ga/runme.htm GIF Construction Set One of the oldest GIF

animators around for Windows

Low-cost shareware, www.mindworkshop.com/ alchemy/gifcon.html GIF Builder Very popular for Mac

OS 9 and earlier

Low-cost shareware, www.mac.org/graphics/ gifbuilder/

GIF Builder for OS X Mac OS X (will run on

Mac OS 8 and above)

Freeware, www.macupdate.com/info php/id/235

GIF Merge Linux and related

platforms

http://the-labs.com/

GIFMerge/

The majority of Web designers, however, tend to use Adobe ImageReady for anima-tions ImageReady (shown in Figure 1-18) ships with Photoshop and is available for Windows and Macintosh

Figure 1-18:Creating a GIF animation in Adobe ImageReady

 By far, some of the most helpful utilities I’ve ever used are those that assist with

screen capturing Such utilities are invaluable when creating Web site portfolios, sharing mockups with co-workers and colleagues, and so on

While screen captures can be done with almost any imaging program, such as Photoshop, screen capture utilities let you hone in on specific portions of the screen and capture menus, dialogs, and toolbars with ease This can be very helpful and save a lot of time—instead of cropping full-screen images, you can instantly get what you need and, in most cases, output it to numerous useful file formats Many excellent screen-capture utilities are available for all platforms, but the three most reportedly beloved are as follows:

 For Windows, SnagIt by TechSmith is an amazing utility that I find myself using almost daily You can find this low-cost shareware at www.techsmith.com/products/snagit/

 Find low-cost shareware ScreenShot Pro, for Mac and Mac OS X at www.code-line.com/software/screenshotpro.html OSX is packaged with two screen-capture utilities, one within the operating system itself, and the other a feature called Grab

 For Linux, the KDE desktop environment has screen shot utilities built in (www.kde.org/), and The Gimp, discussed in the bitmap imaging section earlier, does a great job with screen captures

Figure 1-19 shows me preparing to capture a screen using SnagIt

Figure 1-19:Working with SnagIt to create screen shots

  Secret #12: Rename Utilities

For the many Web designers working on a Windows platform, easy ways to rename numerous files locally can be problematic Let’ssay you want to take a directory full

of files with the suffix html, retain the files’ unique prefixes, and change the suffix globally to php To do this directly on an open-source operating system from the command line is very simple, but for Windows and Macintosh (except if you use the command line in OS X) you need a rename utility to perform the task effectively For Windows and Mac OS X, a low-cost, shareware program that’ll help you per-form rename tasks on your local machine is “A Better File Rename.’’Not only does

it do the job, but the company that makes the product, PublicSpace, also has a spe-cial Web master program allowing you to link to the company and get the software free Or, if you run a site where you can place their ad banner, you can get more than one product free

Figure 1-20 shows a rename process using A Better File Rename

Figure 1-20:Working with A Better File Rename to batch rename files locally

note To download A Better File Rename, see www.publicspace.net/ ABetterFinderRename/.

For the Web master program, visit www.publicspace.net/

webmasters/index.html

 Another important utility that you’ll want to have is an HTML tag stripper Utilities

of this type let you take an HTML or related Web document and strip all the code out of it, leaving you with just the text

In some cases, commercial Web design software contains such utilities Ex-amples include Macintosh BBEdit (mentioned in the previous “Code Editor’’ section), Homesite, and ColdFusion Studio In the case of Dreamweaver for both Macintosh and Windows, you can add an extension such as Tag Stripper, (www.massimocorner.com/dw/commands/tag_stripper.mxp), which will do the trick for you Check your favorite editor for this feature

Even if you have features of this nature within your main software, you still might want to have a lightweight, fast, standalone stripper available What’s more, tag strippers tend to offer more advanced features anyway, such as maintaining log-ical formatting of text, converting tables into tab-delimited format, and changing HTML entities to proper text characters Table 1-7 shows a variety of helpful, low-cost tag strippers

Table 1-7: Helpful Tag Stripper Software

Detagger Windows Low-cost shareware, www.jafsoft

.com/detagger/

HTTC – HTML to Text

Converter

Windows, Linux Free under GNU license, www

franksworld.net/httc/ Html2text Linux; command line

in English and German

Open source freeware, http:// userpage.fu-berlin.de/

∼mbayer/tools/

html2text.html HTML Markdown Macintosh Classic Low-cost shareware, www

printerport.com/klephacks/ markdowndocs.html

Figure 1-21 shows me stripping an HTML page using Detagger

  Secret #14: HTML Tidy

Just as a handy tag stripper gets rid of tags, conversion software such as HTML Tidy can be really useful Not only does Tidy convert text to HTML, but it also converts HTML to XHTML or to XML It also validates your markup and fixes additional markup problems A very sophisticated tool, it’s available for every platform and

is freely distributed via http://tidy.sourceforge.net/

Figure 1-21: Using Detagger to remove HTML tags

tip HTML Tidy is built into a wide range of shareware code editors and utilities.Be sure to check the sourceforge Web site for additional resources.

In Figure 1-22, I’m using TidyGUI, a simple GUI interface to Tidy, to clean a document

  Secret #15: Compression Utilities

Compression utilities are one of the most critical tools you’ll need And, with to-day’s more efficient compression, not only are you able to compress files for more efficient e-mail, FTP, Web site downloads and storage, but you can extract them easily, too

One of the biggest issues in compression is cross-platform compatibility In the past, most UNIX and related operating systems used certain compression formats, Macintosh used others, and Windows still others Sending files back and forth or making them available in compressed formats on Web sites always means making sure you’ve got software capable of cross-platform compression and extraction For Windows, the most widely used package for this is WinZip (www.winzip com/), a low-cost shareware utility that creates and extracts a wide number of compression formats that are used across platforms (see Figure 1-23)

Figure 1-22: Tidy literally “tidies up” your documents.

Figure 1-23: Creating a zip format for downloadable media files

For Macintosh, a commonly used package is StuffIt, which is also available for Win-dows and Linux It’s an excellent commercial choice—it’s low-cost, cross-platform compatible, and easy to use You can find it at www.stuffit.com/

For a good graphical interface that provides multicompression, multiextraction on Linux, gnochive is available for free at http://gnochive.sourceforge.net/

  Secret #16: Audio and Video Players

Audio players are necessary for Web designers who are both working with audio and video as well as visiting Web sites where forms of audio and video are in use

At this point, many audio players are also video players, as you’ll see

Many players are available these days Table 1-8 provides a best-of-breed and most popular list

Table 1-8: Popular Audio Players

Platform and

RealPlayer Windows, Mac, Plug-in

for Linux Support for all common audio and video formats with emphasis on Real streaming media and SMIL formats

Free and pay versions available

at www.real.com/

Apple QuickTime Windows, Mac Support

for all common audio and video formats with an emphasis on the QuickTime format

Free and pay versions available

at http://quicktime apple.com/

Microsoft Windows

Media Player

Windows, Mac Popular media player capable of supporting almost all audio and video formats, emphasis on Windows Media file format

Available with Windows Operating Systems and the IE Web browser and for download,

at www microsoft.com/ windows/windowsmedia/

WinAmp Windows Very popular

media player with support for most media types

Free and pay versions available

at www.winamp.com/

note An emerging alternative for multimedia is Ogg Vorbis, a project that is fullyopen, nonproprietary, patent and royalty free, available at www.xiph.org/

ogg/vorbis/

  Secret #17: Plug-Ins

For a number of technologies, it’s helpful to have plug-ins already installed in your browsers This helps you avoid having to download plug-ins for commonly used tasks