Assignment 4

When creating a web page, there is a wide variety of tools available for use. The tools can be as simple as a no-frills text editor, as richly-featured as something like Adobe Dreamweaver, or somewhere in between the two. I will discuss an example of each, including examples of what one HTML file looks like in each tool.

Sublime Text: The Almost-No-Frills Option

I mentioned in the previous post that much of my early HTML editing was done in Notepad, which is a very simple text editor. For simple web pages, I still think text editors can be a reasonable choice, and the one I would recommend for this type of work is Sublime Text. An important feature that Sublime Text offers is syntax highlighting. Syntax highlighting is when different elements of the text are treated differently; e.g., HTML tags are shown in a different color from the text to be displayed. Sublime Text uses the file's extension to load a syntax highlighting scheme, which the user can customize if so desired. Here's an example:

HTML page in Sublime Text

Note the different colors for tags, attributes, values, etc. You may notice what looks like a smaller version of the document in a sidebar on the right-hand side of the image, which is exactly what that is. The nice thing about that is that you can click in a section in the sidebar, and that will bring up the corresponding section in the main part of the window, which is sometimes faster than using the arrow keys or Page Up/Page Down to navigate your document.

Two more advantages of text editors are that they work quickly and take up minimal system resources. One big disadvantage is that you can't see what your document will actually look like in a browser. To do this, you have to open a copy of the file in your browser and refresh when you make changes in the text editor. This can get really inconvenient really quickly, especially once you want to build a more complex page or even work with multiple pages.

KompoZer: A Step Up

KompoZer is a logical step up from a text editor. It offers a split view where the user can see both the original HTML and a preview of what the page will look like in a browser. If so desired, the user can change the view to show just the design or just the HTML.

HTML page in KompoZer's split view

As you might be able to tell from the above image, the menu options are similar to those of a word processor, such as Microsoft Word. This makes KompoZer a good choice for someone who wants to develop web pages with customized content and layout but might not be so familiar with the ins and outs of web development.

One big disadvantage of KompoZer is that it isn't updated regularly. The last beta version was released in February 2010, or nearly 5 years ago at the time of this writing. That's a really long time in web years and means that KompoZer doesn't support some fairly standard current features, like the latest versions of HTML and CSS. Some quick searching reveals that some users who are frustrated with KompoZer's lack of updates have moved to BlueGriffon, which takes a similar approach to KompoZer (similar user interface, based on Firefox's rendering engine), but is updated more frequently. BlueGriffon looks promising, and I might talk more about it in a future post, but for now, I will move on to the next tool.

Adobe Dreamweaver: The Space Shuttle of Editors

Adobe Dreamweaver is probably the most well-known tool for creating web content and the one I used to create my web page. There are two disadvantages that I will mention right away:

• Dreamweaver costs money. Fortunately for me, I have access to it through my university, so I figured I'd take advantage of that for this assignment.
• The user interface probably looks more complicated than anything you've ever seen in your life unless you're:

1.  familiar with other Adobe products such as Photoshop, or
2.  a programmer.

HTML page in Dreamweaver split view

It just so happens that I am a programmer, so Dreamweaver's user interface doesn't scare me. I've spent countless hours dealing with user interfaces like this one:

Java application in Eclipse

Bring it, Adobe. Let's do this.

Like KompoZer, Dreamweaver offers a split view of the source markup and the design. It also has a built-in browser to offer a more complete preview of your page than is sometimes available in the Design view. In the past, I've had bad experiences with WYSIWYG editors adding loads of unnecessary markup, but I didn't find that to be the case here. It's true that there are a ton of tabs, pull-out menus, etc. That's probably unnecessary for a single page, but when designing a full-blown site, it's nice to have a wide variety of features handy.

As mentioned before, the big negatives for Dreamweaver are its cost and learning curve. It's almost certainly overkill for fairly simple designs, but if you want to do real commercial web development (and I want to at least look like I could), it's probably worth the price and the time required to learn how to use it. A bit like the space shuttle: it's got a ridiculous number of controls, and you wouldn't use one to go to the grocery store, but if you need to go to space, nothing else will do. Another advantage for Dreamweaver (again, this one admittedly applies to more hardcore users) is that it integrates with other Adobe programs like Photoshop and Illustrator.