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

P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ 20 Part I: Tools, Planning, and Content ࡗ ࡗࡗ 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. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ ࡗࡗࡗ Chapter 1: Setting up a Master Toolbox 21 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’tbe overlooked, especially for those on a limited budget, who have lighter- weight needs for vector drawing. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ 22 Part I: Tools, Planning, and Content ࡗ ࡗࡗ Two such bitmap programs are: ࡗ Mayura Draw is a shareware vector drawing program for Windows, at $39.00 per license. Used mostly by scientists and engineers for technical illustrations, Mayura Draw can be an invaluable and inexpensive tool in 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 source software 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. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ ࡗࡗࡗ Chapter 1: Setting up a Master Toolbox 23 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 Software Platform and Usage Availability 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. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ 24 Part I: Tools, Planning, and Content ࡗ ࡗࡗ ࡗࡗࡗ Secret #11: Screen Capture Utilities 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. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ ࡗࡗࡗ Chapter 1: Setting up a Master Toolbox 25 ࡗࡗࡗ 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. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ 26 Part I: Tools, Planning, and Content ࡗ ࡗࡗ ࡗࡗࡗ Secret #13: Tag Strippers Another important utility that you’llwant 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 Software Platform and Usage Availability 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/. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ ࡗࡗࡗ Chapter 1: Setting up a Master Toolbox 27 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). P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ 28 Part I: Tools, Planning, and Content ࡗ ࡗࡗ 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/. P1: FCH WY021-01 WY021-Holzshlag-v2 May 25, 2004 14:33 ࡗ ࡗࡗࡗ Chapter 1: Setting up a Master Toolbox 29 ࡗࡗࡗ 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 Software Features Availability 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 fully open, 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. . Using Mayura Draw for vector-based design. tip Web designers and developers using Linux platform and open source software for designing graphics should check. franksworld.net/httc/ Html2 text Linux; command line in English and German Open source freeware, http:// userpage.fu-berlin.de/ ∼mbayer/tools/ html2 text .html HTML Markdown