Setting up a music technology lab.

Although the process is not difficult, getting started with the right software for your needs is probably the single most important step. In four installments, we will help you take that first step with Web software applications and utility applications that offer shortcuts and improve Web pages without tedious tasks. For more insight for inspiration for dynamically developing your school music Web site further and about the upcoming installments, in this Web development series, go to our companion Web site at: www.kuzmich.com/webdevelopment_music_educator.html

Square One
There are two basic ways to create a Web page. The first is to write Hyper Text Markup Language (HTML) code using a text based editor such as Simple Text or Teach Text for the Macintosh, NotePad and WordPad for Windows. These create text only or ASCII (American Standard Code for Information Interchange) files, which can be read by any computer using any operating system including hand-held Palm computers and cell phones.

Although HTML code can seem cryptic and overwhelming to the uninitiated, knowing it can ultimately be beneficial and rewarding. The alternative to writing the code yourself is to use a Web page editor. Specialized editors generally use a WYSIWYG (What You See Is What You Get, pronounced “Wizzy Wig”) format. You “paint” the screen by placing images, text, tables, and other objects on the screen. When fi nished, the editor writes the HTML code for you.

This has real advantages, as well as a few drawbacks because you are limited to a particular program’s features. If you know how to write HTML code, you will be able to add whatever you need without having to struggle with confusing software or wait for software updates. So, it’s helpful to learn HTML coding for editing purposes even if you primarily use WYSIWYG editors. However, no programming is necessary for WYSIWYG editors and the results are usually acceptable.

Text Editors
Text editors allow direct coding in a text-only environment. These tools have very few features, but can be useful when editing HTML, especially online. They offer a straightforward interface to write or edit HTML and are most useful for fi ne-tuning the appearance of a Web page or for making minor content changes. The main disadvantages are that text editors have no graphical interfaces, which means that coding HTML can be time consuming. These tools also do not differentiate formatting for HTML code and content, which makes the files diffi cult to read.

Popular products include Simple Text for Mac and Notepad and WordPad for Windows. HTML editors usually provide more features than straight text editors. Although they still rely upon your knowledge of HTML, they help you to crunch out code in an easy and timely manner by offering quick menus and toolbars that will add sections of HTML to your page. These applications often include tools that check HTML code to ensure syntactic accuracy or identify outdated (deprecated) HTML tags. They also utilize a more graphical interface that provides help in inserting code. HTML editors tend to make the code more readable by specifying code as one color and content as another, and indenting nested information. Their advantage is that they allow you to view your Web page as it will look in a Web browser as you’re building it.

Popular products include BB Edit and Alpha for Mac, Hypertext Builder, PageBreeze and Hot Dog on Windows. HomeSite runs on both Windows and Mac platforms. WYSIWYG applications allow the user to view the Web page within the application and use a graphic interface to simplify the formatting process. Some WYSIWYG editors, such as Dreamweaver and FrontPage, have built-in HTML editors for those times when you need to edit HTML code directly. These editors usually also include additional tools for site maintenance and group work. Popular products include Dreamweaver, Netscape Composer and GoLive for both Windows and Mac, and FrontPage only for Windows.

My favorite HTML editor is Page Breeze,which has both visual (WYSIWYG) and HTML tag modes. Its design emphasizes simplicity and easeof-use and you’ll fi nd that you’ll be creating great looking Web sites almost instantly with virtually no learning curve. PageBreeze is completely free for personal, not-for-profi t, or educational use. There are no limitations, no nag screens, no required registration and the software will never expire. You can download it at: www.pagebreeze.com

For more alternatives, consider HTML Editor 2006 Professional at: www.mmaus.com and Hot Dog at: www.sausage.com which have a huge range of professional features with dual-mode visual (WYSIWYG) and code-based editing functionality. To view hundreds of HTML editors rated by customers, go to www.download.com.

Alterative Options
Entry-level: Word Processing Applications I can’t think of a faster way to learn how to create Web pages than in a GUI (Graphical User Interface, pronounced “gooey”) environment. The leading word processors for Web development use are the Microsoft Office Suite with Excel, Word, and PowerPoint being its leading applications for Web use and the Word Perfect Suite with WordPerfect, Presentation and Quattro Pro. Most word processors now contain a “Save as Web Page” option which converts the document into an HTML file. The advantage of using word processors is that you do not have to purchase other software and you already know the basic formatting and editing features of the application.

These applications are useful if you need to quickly make an existing document visible to Web browsers. Web pages created this way can then be downloaded from the Web and back-converted into their original format. The disadvantage is that word processors do not always insert clean HTML coding into your documents as do Web development applications. To begin a Web page with an office application such Word or WordPerfect, you compose your documents in the normal word processing mode and then save the document in a Web page format of either HTML or HTM.

If you switch back and forth from the word processing document to a Web browser, you can instantly view the Web page as it would post on the Internet without having to post it. This lets you quickly edit your work and view it in the Web browser. Just be sure to save the Web page every time you make changes so the Web browser displays the latest edit. My two favorite word processors to make Web pages from are: Microsoft Office 2003 and Corel WordPerfect X3 Suite.

Other office applications include Excel, Access and PowerPoint. Microsoft Office 2003 is no longer a suite of applications, but rather a comprehensive, integrated system building on the applications you use today for creating documents and then converting them for Web use. Word, PowerPoint, Excel, and Access applications are designed to be Web friendly for creating HTML documents. Office 2003 has incorporated some specialized Web document features such as document work spaces that simplify the process of working with others to co-author, modify and review files with improved collaboration plus shared attachments, shared workspace task panel, and integration with Windows SharePoint services.

This sharing is done on the Internet by incorporating Extensive Markup Language (XML) and Web services which allows you to create dynamic forms, complete the forms and submit these forms to the XML-enable systems as well as allow you to move data between enterprise data stores or Web services. PowerPoint 2003 has enhanced multimedia support that supports playback of full-screen video. You can play video full screen and use playback to stop, start, rewind or fi nd screens from within a slide show. Posting PowerPoint slide shows on the Internet can be a effective way to post instruction with multimedia effects such as video, music and graphic images within the text..

Corel’s WordPerfect Suite X3(WordPerfect and Presentations) at www.corel.com offers the opportunity to create Adobe PDF files which is a unique way to convert and post complicated pages that can’t be formatted easily into HTML. Simply construct the document in word processing mode and save it as an HTML document or print it to the Distiller printer driver and instantly you can have an Acrobat 3.0, 4.0 or 5.0 document ready for Web posting.

The WordPerfect Suite X3 goes even further publishing slide shows to Macromedia Flash with professional looking graphics and maintain copyright control making it impossible for others to capture it. In addition, it can publish to HTML with CSS support and is compatible with Microsoft Office. The X3 suite even allows you to import Adobe PDF documents, making it easy to reuse text and graphics stored in this format. Suite-wide PDF export capabilities enable users of Corel WordPerfect Office X3 to turn documents, spreadsheets and presentations into PDF fi les without additional PDF software, making sharing content via the open PDF format simple and cost-effective.

The ability to extract data and images from PDF fi les without retyping reduces errors and significantly reduces document conversion and turnaround time. Thus, opening PDF’s from the File menu means no complicated steps to remember. Selected WYSIWYG/GUI Web Development Applications My July, 2003 article covered the basic features of Dreamweaver, GoLive and FrontPage, so now I will focus in some new features in their latest versions. All of these products have professional level capabilities but are also very user-friendly for beginners.

And better yet, all of them are available at highly discounted prices for educators only. Just go to Gradware at www.gradware.com, Academic Superstore at: www.AcademicSuperstore.com, or Software One at: www.softwareone. com and surprise yourself with huge discounts well under discounted retail prices for nearly all major business level products such as Dreamweaver, GoLive, Microsoft FrontPage, Office and Corel WordPerfect X3 Suite as well as substantial discounts on popular music software applications such as products by Sibelius, Cakewalk, Sony, PG Music, Harmonic Vision and MakeMusic. The only limitation is that there are no version upgrades discounts available; you simply have to repurchase the product at the educator pricing.

Thirty day full-version trials are available from the manufacturers via downloading from their Web sites. Macromedia Studio 8 from Adobe features Dreamweaver, Flash Professional, Fireworks, Contribute and FlashPaper. Dreamweaver 8 can also be purchased as a separate item. New features in this version include optimized workflows to reduce the time required to complete common tasks. Integrate XML data with a powerful draft and drop workflow.

Zoom in to get control over design and stay focused on the code with Code Collapse. To incorporate video into a site, you can add Flash Video in just fi ve clicks of a mouse. Flash Professional 8 allows you to create professional designs and author interactive content rich with video, graphics, and animation for truly unique Web sites and presentations. New features include amazing filter effects, integrated and a stand alone-video encoder complete with support for alpha transparency, high-quality text rendering with advanced anti-aliasing control, improved text tools and a newer video plug-in to export Flash Video (FLVC) files from professional video editing products.

Fireworks 8 lets you balance maximum image equality with minimum compression size as you create, edit and optimize images for the Web with precise control. It’s easy to make animated rollovers and pop-up menus. Fireworks also contains many new and improved features/effects such as blends and shadows, more file formats supported for importing, pop-up menus in CSS form and new image editing, autoshape properties and special characters panels for a better user experience. Contribute 3 frees designers and developers from Web maintenance, allowing others to easily update contenin a controlled environment that preserves the integrity of the Web site.

FlashPaper 2 lets anyone easily convert documents, presentation, spreadsheet and other files into Macromedia Flash documents or PDF files with one click. I like its tight integration with Microsoft Office products for use across Web sites, e-mail, archiving and print. GoLive CS2 software helps you unlock the power of CSS and takes your ideas to new places with powerful mobile authoring tools based don CSS/ XHTML, SVG, Tiny, SMIL and other global standards. Now that Adobe has acquired Macromedia, it will be very interesting to see how Dreamweaver and GoLive are further enhanced separately or continued to be two similar and competitive products.

Adobe Photoshop CS2 software is the industry standard dealing with graphic files for Web use. You can optimize and enhance any photo or graphic including restoration. It includes Adobe Bridge, the next-generation file browser for digital cameras. Microsoft FrontPage 2003 is another popular GUI application for creating Web pages via professional design, authoring, data, and publishing tools needed to create dynamic and sophisticated Web sites. It has been improved over previous versions of FrontPage in three key areas: designing, coding and extending. It uses enhanced design tools to generate better looking Web sites with new layout and graphics tools making it easier to design exactly the site you want.

You can write code faster, more efficiently, and with greater accuracy. It uses built-in scripting tools for interactive results. The professional coding tools are faster and more effi cient. With Extending, your Web pages can connect with people and information in new ways by building Extensive Markup Language (XML) data-drive Web sites using the fi rst commercially available, completely WYSIWYG (“what you see is what you get”) Extensible Stylesheet Language Transformations (XSLT) editor. The enhanced publishing features and options help you get your Web pages online more quickly. The XML collaboration does require Microsoft Windows Server 2003.

For a detailed feature comparison of FrontPage 2003 with versions 2000 and 2002, go to: www.microsoft.com/offi ce/frontpage/prodinfo/compare.mspx. Helpful Utilities There are some additional utilities that are widely available that will help insure that your Web pages work. Tidy is a program available for Windows that cleans up sloppy HTML coding. It fixes common syntactical errors, and cleans up the organization of the code, to make the HTML more readable. It is available for free download at: http://tidy.sourceforge.net. WebXact is a Web-based tool that checks the accessibility of your Web page to people with disabilities. WebXACT is a free online service that lets you test single pages of Web content for quality, accessibility, and privacy issues. Cross-Browser and Cross-Platform Checking Different browsers may interpret HTML slightly differently. It is im-portant, therefore, to check you Web pages in at least both main browsers, Netscape/Firefox and Internet Explorer.

Just as the same Web page may display differently in two browsers, so too might it display differently on two different platforms (mainly Windows and Macintosh), even with the same browser. You should periodically check the page in different browsers on different platforms. Several Web-based utilities exist for browser and platform compatibility. One example is W3C HTML Validator at: validator.w3.org

Look at several links to other checks and validators at: www.Webreference.com/authoring/languages/html/validation.html Tables: Web Page Construction/ Formatting A lot of Web designers use tables to position text, images and other elements on a Web page. Tables were never intended for layout, but Web developers discovered early on that they could achieve a better look on their sites if they bent the rules a little and used tables to position elements on page. By using tables, you can create a page that is graphically laid out like a newspaper with columns. To better understand this process, go to: academics.georgiasouthern.edu/accessibility/docs/tables.htm and you will see a CNN Web page and notice how the information is in three columns. This is achieved by using an invisible table with columns. Many Web pages have tableswith invisible borders. The advantage of using borders is that you can format the page rather creatively without being an HTML expert in tables which can be a bit challenging. This Web site provides in-depth understanding to how effective borderless tables can be utilized in Web page design.

To quickly generate a table, go to www.bagism.com/tablemaker .There, you can create a table from scratch and then substitute words between [brackets] and then save or copy the file into your Web fIle.

Uploading and Downloading
Web Pages to Your Web Site FTP (File Transfer Protocol) is the process of exchanging fi les over the Internet. FTP works the same as HTTP for transferring Web pages from a server to a user’s browser and SMTP for transferring electronic mail across the Internet. Like these technologies, FTP uses the Internet’s TCP/IP protocols to enable data transfer. For a source that provides many links to downloadable FTP, go to: www.winplanet.com/category/2244-1-d.htm. For a detailed guide to FTP, go to: www.scit.wlv.ac.uk/~jphb/comms/ftp.html. My favorite FTP program is WS_FTP. An excellent series of tutorials can be viewed and printed at: www.ftplanet.com/tutorial/.

FTP capabilities are now usually built in to most Web development applications but there are also many free FTP software applications that you find and download by searching in an Internet search engine by “FTP software.” Frames Frames are very popular because they are one of the few ways to keep part of the page stationary while other parts change. Frames are also one of the most controversial uses of HTML, because of the way the frames concept was designed, and because many Web framed Web sites are poorly implemented. For examples of several independent frames on a Web site go to www.geocities.com/Heartland/ Plains/8022/htframe.html.

Frames create independently changeable and scrollable windows that tile together to break up and organize a display. Frames are similar in many ways in tables. However, frames not only organize data, they organize the browser display window. In fact, they break up the window into individual, independent panels. Each frame holds its own HTML fIle as content, and the content of each frame can be scrolled or changed independent of the others. The following figure shows two different commercial sites, one using frame and the other using non-frame design at: www.cs.umd.edu/~mount/Indep/CHassan/framepages.htm

The frames feature of HTML 3.0 allows you to create unique page designs that include interactive displays of data and/or images. But this feature has new syntax with several steps. Not all pages are candidates for this design feature and it should be used selectively. Frames do, however, provide an innovative way of indexing data by allowing the user to have constant visibility of selectable information.

Here are some good Web sites on frames to

www.w3schools.com/html/html_frames.asp

www.htmlgoodies.com/tutorials/frames/article.php/3479241

www.idocs.com/tags/frames/frames.htm

Web Hosting
As an educator, there are two ways you can host your Web site: school district or an Internet hosting services. School districts frequently have many restrictions but are free. There are millions of free and fee-based hosting sites that can be found by simply searching an Internet browser. When I searched with “Free Web hosting” at www.yahoo.com, I found 29,000,000 sites. For example, www.freeWebsitehosting.com offers free Web sites with 100MB of free Webspace, with FTP access, Webstats, Webtools, fast servers, and site promotion.

My favorite free site is Lycos Tripod at: www.tripod.lycos.com/ It offers 20 MB space for a free Web site or blog. Sites include Web page building tools, tutorials and help, and various examples of other members’ sites. The problem with free services is that their technical support may not be as accessible as paid Web hosting sites and advertising is usually included outside of your Web page borders. To find better research which Web hosting sites best fit your needs, there are two particularly links to peruse: www.Webhostinginspector.com and www.Webhostingunleashed.com. The latter provides independent test results and information to assist consumers in selecting the right Web site hosting provider and making an educated buyingdecision.

My favorite fee-based Web hosting service is Earthlink at: www.earthlink.net because of their outstanding technical support. The best buy for a feebased Web hosting service is by iPower at: www.ipowerWeb.com because of a wealth of features and services plus amazing storage space for the dollar.

Closing Comments
If you need some extra help creating your very fi rst Web page, I suggest you download my January, 2000 SBO technology article at: www.SBOmagazine.com/SBOmag/jan00/technology.aspx.

Good luck getting your Web sites up and going. Look for upcoming articles in this series to add improvements and shortcuts.