Chapter 1: Setting up a Master

Chapter 1: Setting up a Master Toolbox 17 note Download the PNH toolbar from http://placenamehere.com/ pnhtoolbar/. Secret #7: Sidebar Reference Panels Netscape 7 and Mozilla contain a sidebar panel (F9). This panel has a range of utilities, such as search, with which the browsers ship, but there are also additional sidebar panels that individuals have created. Some of these panels are extremely valuable for Web designers to have as they offer immediate, in-browser access to aspects of design. Sidebar panels of immediate relevance to Web designers include the following: CSS 2 and CSS 2.1 sidebar reference panels (available in French, too) HTML 4.01 sidebar reference panel Document Object Model 2 (DOM 2) sidebar reference panel (also available in French) JavaScript sidebar reference panels and guides (multiple versions) XSLT 1.0 (Extensible Style Language with Transformations) sidebar reference panel Each of these panels is available completely free and install instantly. Once in place, the panels act as references by both the information they contain within them and the fact that references are linked to the specifications they represent. If I m working on a site using CSS 2, and I want to know how to use a certain property, I simply open the CSS 2 side panel (shown in Figure 1-11), find the property in question, and click the reference. My browser then takes me directly to the topic within the specification (see Figure 1-12). Currently, sidebar panels can be downloaded from the Netscape DevEdge site, http://devedge.netscape.com/toolbox/sidebars/. It s unknown at this time whether AOL will continue to host that site indefinitely. If you cannot resolve the site, visit the Web Standards Project, www.webstandards.org/, which has committed to ensuring the location of these panels will always be made available. tip Side panels are quite easy to make for anyone with HTML skills, so if you are interested in creating helpful tools and utilities, you might want to read more about how to make side panels at http://devedge.netscape.com/ viewsource/2002/sidebar/. Secret #8: Bitmap Image Programs Bitmap graphics are the primary form of graphics on the Web, and having a program that creates and optimizes them is essential. Bitmap graphics, also referred to as raster graphics, are graphics where the image is made up of tiny boxes of color, known as pixels. Pixel-based graphics typically can be compressed very well, but

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services

16 Part I: Tools, Planning, and Content

16 Part I: Tools, Planning, and Content Secret #6: PNH Toolbar Till this point, you ve read about tools that are broad in scope. The PNH toolbar is a very specific utility that I ve found absolutely invaluable as part of my Web design toolbox. ThePNHtoolbar is completely free, available across platforms, and can be installed in Netscape 7.0+, Mozilla 1.0+, and Mozilla FirefoxWeb browsers instantly. Once installed, you can use its reference links and fantastic utilities while you re developing pages. Some of the PNH toolbar features include the following: Instant access to W3C reference materials Page testing where any open document can be run through HTML, CSS, Accessibility, and other validation tools in a background tab Allows you to disable styles on a given page, add an external style sheet to any page open within the browser, outline block elements, outline replaced elements, outline table cells, turn off images, and resize your browser window to custom as well as conventional sizes View form and cookie details View source Access additional Mozilla and related tools instantly Figure 1-10 shows me turning on the table cells of a table-based page. Figure 1-10: Using the PNH toolbar to view the table structure of an HTML page.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

Chapter 1: Setting up a Master

Chapter 1: Setting up a Master Toolbox 15 Validation Tool Platform and Usage Availability Adobe GoLive Built-in validation for HTML and XHTML Good validation, but nothing for CSS or accessibility FrontPage 2003 No internal validation Can be used with the Lift validation tool for Microsoft FrontPage for accessibility and usability Figure 1-9: Validating a page with CSE HTML Pro. Of course, as with other tools mentioned in this chapter, these are popular and comprehensive tools. A range of additional tools perform these or similar processes; they are available for multiple platforms and offered as freeware, shareware, and commercial licensing. Again, the secret is to find the best validation services for your needs and stick to them. caution Accessibility validation is an especially difficult issue because it s recommended that you use multiple validators. In addition, accessibility validators don t measure visual issues, so you have to use them just as you would a grammar checking utility rely on a balance of the validator feedback and your own knowledge. Markup and CSS validators are more specific because they test against the specifications for the defined languages in question.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Linux Web Hosting services

14 Part I: Tools, Planning, and Content

14 Part I: Tools, Planning, and Content You llonly need one Telnet/SSH client in your toolbox, so take advantage of what s either built in to your operating system or to one of these excellent freeware utilities. Figure 1-8 shows me using PuTTy to log in to a remote Web server and perform tasks. Secret #5: Validation Tools Validating markup, CSS, and accessibility is becoming more and more important for professional Web designers. A variety of online validators can be helpful, but there are also standalone and add-in products for existing programs. Table 1-5 describes some of the popular validation tools available to you. Figure 1-9 shows a page being validated by the CSE HTML Pro standalone validator. Table 1-5: Validation Tools for Markup, CSS, and Accessibility Validation Tool Platform and Usage Availability W3C HTML and XHTML Validation Online service. You can add by URL or by upload http://validator.w3.org/ W3C CSS Validation Online service. Validate by URI, paste into text area or upload. A standalone version is available http://jigsaw.w3.org/css-validator/ CSE HTML Validator Pro A professional standalone for Windows that validates XHTML, HTML, CSS, and Accessibility. Very powerful, highly recommended www.htmlvalidator.com/ Bobby Offers both online and standalone validation for accessibility Standalone:www.watchfire.com/products/ desktop/bobby/default.aspx Online: http://bobby.watchfire.com/bobby/html/ en/index.jsp Cynthia Says Online validator www.cynthiasays.com/ Lift Multiple plug-in, standalone, and online accessibility and usability validation www.usablenet.com/products services/ products services.html Macromedia Dreamweaver MX, MX 2004 Built-in HTML, XHTML validation Good validation if preferences are set up properly. Can be integrated with the Lift validation tool for Macromedia for accessibility and usability

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

Chapter 1: Setting up a Master

Chapter 1: Setting up a Master Toolbox 13 you ll get a Telnet console. Telnet clients provide additional features that can be very useful too, so it s often good to have at least one on hand. Secure Shell (SSH) is a form of Telnet that includes increased security features. Nowadays, most well-run Web servers will prefer you to use Telnet with SSH enabled. Many standalone Telnet clients now integrate SSH into their feature lists, and many operating systems, including Mac OS X andWindows 95, 98, 2000, and XP, have some form of Telnet built into the system. Table 1-4 describes the top three Telnet/SSH clients and related features. Table 1-4: Telnet and SSH Clients Telnet/SSH Client Platform Features/Availability PuTTY Windows, all versions Free and downloadable from www.chiark.greenend.org.uk/ ~sgtatham/putty/ NiftyTelnet Macintosh, pre OS X Freeware, available at http://asg.web.cmu.edu/andrew2/ dist/niftytelnet.html OpenSSH Linux and related platforms Freeware, www.openssh.com/. OpenSSH is also the SSH technology built into Mac OS X Figure 1-8: Configuring PuTTY on Windows 2000 to perform an SSH login to a remote Web server.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

12 Part I: Tools, Planning, and Content

12 Part I: Tools, Planning, and Content Table 1-3: Popular FTP Clients and Features Client Platform Features/Availability WS FTP Windows Full-featured file transfer program, customizable, inexpensive CuteFTP Windows Popular, full-featured FTP, inexpensive FTPClient Macintosh Transmit Macintosh Fetch Macintosh Unlike browsers or code editors, you only need one FTP client on hand (see Figure 1-7). Figure 1-7: Use WS FTP (classic view) for a wide range of transfer and file management needs. Many HTML and visual editors have FTP features built right in. However, even with those features, because most Web designers work using a variety of tools, having a standalone FTP client in your toolbox is a definite plus. Secret #4: Telnet and SSH Like FTP, Telnet is an Internet protocol. Its function is to allow you to have linebased entry to a remote server so that you can perform remote functions from your local machine with ease. Telnet is available natively on most operating systems. For example, if you select Start.Run and type telnet into the textbox in Windows,

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 1: Setting up a Master

Chapter 1: Setting up a Master Toolbox 11 Figure 1-6: Working on the same document in design mode of Dreamweaver MX 2004. For Macintosh: SimpleText (or TextEdit on OS X) BBEdit Macromedia Dreamweaver MX 2004 However, just because these are my favorite combinations doesn tmean they ll be yours. The best thing you can do is download the free trials and work with a range of tools before making any decisions. tip There are many more editors than I ve named here. You can do broader-range searches at your favorite search engine to ensure that you ll find those editors most appropriate to your needs. Secret #3: File Management with FTP File Transfer Protocol (FTP) is one of a variety of protocols that run on the Internet. An FTP client allows you to transfer any kind of file from a local computer to a remote server, and depending upon the capabilities of the client you re using, perform important functions such as changing file permissions. There are many FTP clients even Web browsers and mechanisms within OS can act as FTP clients. But for full features, most folks turn to a handful of respected and flexible FTP software. Table 1-3 provides details.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

10 Part I: Tools, Planning, and Content

10 Part I: Tools, Planning, and Content For Windows: Notepad (see Figure 1-4) Homesite (see Figure 1-5) Macromedia Dreamweaver MX 2004 (see Figure 1-6) Figure 1-4: Editing a page in notepad. Figure 1-5: Using Homesite, a more robust editor.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Chapter 1: Setting up a Master

Chapter 1: Setting up a Master Toolbox 9 Table 1-2: Popular Code Editor Features Editor Type Editor and Platform Features/Availability vi ASCII text editor for UNIX, OS X, Linux, VMS Native to most UNIX systems; free Emacs ASCII text editor for UNIX, Linux, OS X, VMS and even Windows Open-source, www.gnu.org/ software/emacs/emacs.html. Notepad ASCII text editor for Windows Native to Windows systems; free SimpleText ASCII text editor for Macintosh (pre OS X) Native to Macintosh prior to OS X; free TextEdit ASCII text editor for OS X Native to OS X; free Homesite Windows-based HTML editor with support for a number of ASCII-based languages Very popular with many professional designers on the Windows platform. Fee-based, but there s a 30-day full trial version to try before you buy, www .macromedia.com/software/ homesite/ BBEdit Macintosh-based HTML editor with support for numerous ASCII-based languages Very popular with many professionals on the Mac platform. Fee-based, but with a try-before-you-buy demo, www. barebones.com/products/ bbedit/index.shtml Adobe GoLive CS Visual editor for Macintosh and Windows Popular with some professionals; has improved greatly but still generates some problematic and proprietary markup. Fee-based, free demo Macromedia Dreamweaver MX 2004 Visual editor for Macintosh and Windows Popular with many Web design professionals, has very good standards support and integrates well with application technologies such as ColdFusion, JSP, and so forth. Fee-based, free demo Microsoft FrontPage 2003 Visual editor for Windows In widespread use due to the proliferation of Office in many organizations. Biggest appeal is its ease of use for nondesigners. Has some nice features including good support for CSS, but is typically not recommended for the Web design professional unless he or she is also educated in markup and CSS

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

8 Part I: Tools, Planning, and Content

8 Part I: Tools, Planning, and Content Figure 1-3: The Mozilla Web browser is an extremely flexible, useful browser with special features for designers and developers. with Netscape 7.0 and Mozilla Firefox). What s more, it s available for every conceivable platform, is open source, and constantly improving. Secret #2: Choosing a Code Editor There are three primary categories of editors you can use to write HTML, XHTML, XML, CSS, and JavaScript (as well as any other ASCII-based languages). ASCII text editors. These editors have very few features beyond word-wrap and save, but if you know your code, they can be excellent for quick fixes or even full jobs. Commercial code editors. These editors are ASCII editors with power tools, such as wizards, to help you add images. They are my personal favorite for most of the work I do with HTML, XHTML, and CSS. Commercial visual editing packages. These are full-service Web design software applications that include some means for the designer to work visually without worrying about the code being generated. Table 1-2 shows some of the primary products within each category type along with platform and features. So how do you make the best choice? The secret is to have at least one of each type available. You ll find yourself using a combination of tools for most jobs. My dream team editing toolboxes are as follows.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services