Categories
User experience, web, technology

I’m looking for a good text editing program for Windows, for coding

As many of you know, I’ve been a Mac user for a good many years. As such, when I feel the need to do some coding (for example: xhtml, css, php, or javascript) by hand, I would just fire up BBEdit and have at it. Let me also say, BBEdit is a ridiculously great program. You probably already knew that.

Anway, next month I get to teach a course on XHTML, but it is going to be in a Windows computer lab.

And, I will not use Notepad, as some have already suggested. Call me spoiled, but I like being able to have more than one document open at once and, gosh-darn it, I like syntax coloring. I’m going to guess the students in the class will appreciate it as well.

So, I need a text-editor program that—

  • works reliably on Windows 2000
  • is free (at least for educational use)
  • allows multiple documents to be open at once
  • does syntax highlighting for xhtml and css
  • has an interface that is easy for a new coder to make sense of

Any recommendations?

I just downloaded jEdit, because Adam Richardson has given it some praise in the past. It seems…well, it seems nice. Not quite BBEdit, but if I were stuck on Windows, at this point it might just be my top pick for a coding program.

(I’m probably really irritating those of you who program on Windows by now. Really, you should start using a Mac. You’ll love life more.)

Categories
User experience, web, technology

Features of robust dynamic menus

There are many fine examples of dynamic menus, menus that display sub menus when you hover your mouse pointer or bring focus to them in other ways, such as tabbing through links with your keyboard. I was reading a recent article on AlistApart.com regarding hybrid CSS menus, and the discussion that followed the article showed a real demand for a robust, cross-platform, accessible, dynamic menu.

Here are some features the menu should have:

  • Be written with web standards: valid xhtml, ECMAScript, and css. (There are some nice flash implementations out there, but they have accessiblity issues.)
  • The menu should degrade gracefully, allowing site visitors to navigate even when scripting is turned off in their browsers.
  • The menu should work well for people using a mouse as well as people using a keyboard.
    • When a user tabs to a main link, the sub menu should appear as though the user hovered over it with a mouse.
    • And users should be able to tab through the sub links as well.
  • The menus should work well in all mainstream, current browsers (i.e., it doesn’t need to work with Netscape 4.x or it’s peers).
  • It should allow for text-zooming, and it should remain useable when the font size triples.
  • The menus should be built with usability in mind. They should be as easy to use as possible, from a purely interface perspective. For example, the links should be easy to click on, and it should be easy to navigate a sub menu without accidentally closing it. (Review Fitt’s Law for some principles.)

I’ve seen menus that support these features, but none that support them all. In fact, Adam Richardson (business partner) wrote a very nice menu system that worked well with keyboard tabbing as well as mouse events.

Related resources:

There are many solutions implemented out there, some better than others and very few that I’ve seen have been flawless. When I get some spare time (ummm), I’d love to take a crack at this. Anyone else have a menus system that matches up to the features list above?

Categories
User experience, web, technology

How HTML and CSS is like an egg hatching.

A discussion has been building in a web developer community email list I receive. The discussion looks at the field of “professional web developer/designer/etc.”

One of the posters wrote up a long response to many comments; one of the things he said struck me as true, but a shallow observation.

It was this:

Stuff like HTML, CSS, Javascript are /relatively/ simple compared to the knowledge that most professionals require

Categories
User experience, web, technology

Indenting blocks of code in Dreamweaver

Code indentation in Dreamweaver
Code indentation in Dreamweaver

It is nice when you discover something new and useful in a piece of software you’ve been using for years.

For instance, this past week I discovered that in the Code View in Dreamweaver MX, you can highlight a big block of code and tab the whole thing to the right, uniformly, by pressing TAB. You can also take away tab indents by pressing SHIFT+TAB.

Of course, hindsight 20/20 and all, this seems a perfectly reasonable feature. I just didn’t know it. So now I do. And, I’ve already used it half-a-dozen times.

It’s helpful when you move a whole block of code to a new location, and you want to adjust it’s indentation to fit the new surrounding code.

Categories
User experience, web, technology

Props to Capital Area District Library on their web site

Was just looking up something on the CADL site for my wife, and, as is my habit, I took a quick peek at the HTML code (View -> View Source in Safari). I was pleased to see first that it appears to be valid XHTML 1.0, and quickly noted some nice uses of accesskey attributes in the a elements. Very humane coding. Nice.

Specifically, I noted this pattern repeated for nav links:

<a href="/databases/"
title="Research Tools and Databases. AccessKey: d"
accesskey="d">
Research Tools
</a>

The title attribute will inform users of which accesskey is set for which link.

To see how this works, hold your mouse over the following link.
Capital Area District Library
Then, if you are on a Mac, hold down the CTRL key and that key on your keyboard. If you are using Safari, that should just load up that URL for you.

If you are on a Windows machine, you might need to press ALT or some other key. I’m not sure. Try something. May the force be with you.

The reason we care is that we are always open to ways of making our web sites more accessible for people with disabilities, and the accesskey can be quite helpful for people who may not be in a position to use a mouse. I imagine that some assistive technologies make use of the attribute as well.

If anyone out there knows more of the nitty-gritty detail of how the accesskey attribute is practically applied, I’m interested.

Categories
User experience, web, technology

XML/RSS is awesome

I just downloaded and installed NetNews Wire Lite. It is super-easy and fast. And it’s free. You add RSS feeds that want to receive updates from, and it let’s you scan news items very quickly.

What a great example of XML in action! (RSS docs are specific kinds of XML docs)

On that, I’m seriously considering burying my head in XSLT. Any recommendations on a good book?

Categories
User experience, web, technology

Semantic vs. valid markup

Scott Pennington of Matrix at Michigan State University emailed an interesting link to me. The SimpleBits blog has a post and discussion of semantic markup of a page heading. A fairly elementary quiz starts it off, but the range of perspectives in the discussion starts to show the complexity of semantic markup.

On the one hand, if something is a paragraph, mark it up as a paragraph. If it is a list, mark it up as a list. Pretty straightforward.

But, semantic markup is not the same as valid markup. You can write markup that is perfectly valid, but not at all semantic.

For instance, when I worked at Michigan State University I was working on a pretty large web project, and we had just deployed a near-final version as most of the team went on a holiday break. While on vacation I got a few calls: one from my boss and another from a consultant they were bringing in to do a little more work.

I figured everything was fine, but when I came back I found out that all of the semantic, valid paragraph markup in the web site had been replaced with double line breaks between “paragrahs.” There wasn’t an actual paragraph left in the whole site. Sure, visually there was, but in terms of semantic markup, they had vanished.

Upon asking the rationale, the answer was that line breaks gave you more control over spacing between page elements. Anyone who has a clue will realize, of course, that you don’t control spacing on web sites with line breaks, you control it with CSS.

After trying to explain the issues to my boss, I ended up having to live with the non-semantic markup. The issue was deemed as a difference of opinion between two programmers, and neither position was wrong. How very diplomatic. I personally think it devalued the end product we gave the client.

This was just at the beginning of semantic markup becoming a big issue in the web community, so I had very little literature or other examples to draw upon. I feel somewhat validated as my stance on the issue has since been backed up by some of the leading names in the web field.

Categories
User experience, web, technology

Visual description of an HTML element

Click on the words above to see the differences between an element, element content, attribute name, attribute value, start tag, and end tag.

This is the first version of this “diagram,” so bear with me. Let me know if you have any feedback on it.

Categories
User experience, web, technology

PHP tab navigation switcher

I don’t consider myself a web programmer, but I have occasionally fiddled with the odd perl script, php, or asp code snippets. I had a situation yesterday that caused me to want to come up with a php script that would switch tab graphics on a web site, based on the URL of the page.

I’m building the site with Dreamweaver, and my client is going to use Contribute to maintain it. So, I have a page template for the majority of the pages in the site. The navigation is a set of horizontal tabs, and if you are in a certain section of the site, the navigation tabs should indicate that you are in that section.

Unfortunately, this might have meant creating a separate template file for each section of the web site. I thought about this for a few moments, visualizing the nightmare of updates this might create, and decided to try mashing together a script that would solve my problems.

I started by looking through the URL parser in a file I use on my site to create breadcrumb navigation based on the directory. Once I had that piece nailed down, I simply assigned a variable with the part of the URL in question, and then did a series of if else statements to determine which navigation tab html code to include.

So, the pieces:

  1. navswitcher.php — this determines which html navigation file to include based on the part of the URL immediately following the domain name
  2. a separate html file containing just the code needed for the navigation tabs; one file per section
  3. the php include line to add to the Dreamweaver template file where the navigation is supposed to be

Here is the navswitcher code:

// retrieve and parse the web address after the domain name
$str = $PHP_SELF;

ereg("^(.+)/.+\\..+$", $str, $part);
$str = $part[1];
$str = substr($str, 1);

// for the first example, the URL might be http://domain.com/client/joe.php
// this script grabs the "client" part and makes it the value of $str

// set directory name variables
$navfiles = "/path/to/html/nav/files";

$client 	= 	"client";
$services 	= 	"services";
$portfolio 	= 	"portfolio";

// set up cases where $str will match certain values and output different files
if ($str == $client)
include("$navfiles/main_client.txt");

elseif ($str == $services)
include("$navfiles/main_services.txt");

elseif ($str == $portfolio)
include("$navfiles/main_portfolio.txt");

// if none of those, then it must need the default home navigation
else include("$navfiles/main_home.txt");

That code should go into its own file which would then be included in the Dreamweaver template (or from whichever file you need it in).

Doing it this way enabled the site to work from a single Dreamweaver template file, instead of one for each section of the site.

This solution also separates the navigation html itself from the scripting that puts it in place. This means that my client will be able to edit those individual files when they need changing, rather than have to mess around with all the PHP code or Dreamweaver templates (which would require that he own Dreamweaver).

Categories
User experience, web, technology

xsl to tranform xhtml pages

I don’t know why it took me this long to realize this. I’ve been writing xhtml for a couple years now, and around the same time I started playing with xsl stylesheets, but it just occurred to me in a real way that I can probably use xslt to transform my xhtml pages (at my business site, for instance) into forms more useful to other devices. Cell phones and PDAs, for instance.

It probably took me so long because XHTML looks so much like HTML to me, that it didn’t completely sink in that it is truly XML. Yet it is, namespaces and all.

Now that I realize this, I appreciate even more it’s role as an intermediary between html and xml. XHTML doesn’t need xsl to transform it or style it. It is so close to real html that even older browsers can handle it fine, and it works very smoothly with css as is.

So, this realization basically just means that making my site more available on handhelds is even easier than I first thought. Granted, I haven’t gotten into the sticky details of it all yet…