The Typographic Desk Reference: Worth it?

I fell in love with Bringhurst’s The Elements of Typographic Style the moment I started reading. Now, Theodore Rosendorf has written and is set to publish The Typographic Desk Reference. Based on the page samples, it looks as if the two have very similar visual styles. (One striking difference, however, is Rosendorf’s promiscuous use of arcane ligatures in the running text, which I find severely distracting.) In terms of content, the Reference is composed of four large definition lists - Terms, Glyphs, Anatomy & Form, Classification & Specimens - all present in some form in Elements, but presumably lacking the witty prose.

Perhaps the two books may be used to complement one another — Elements for pleasure reading and serious study, Reference for quick access. I think I’ll keep an eye out for some critical reviews before I part with my $45.

January 28th, 2009 | Books, Typography | 0 Comments

Enable URL rewriting in JBoss/Seam

For the unfamiliar, URL rewriting, in general, turns messy URLs…
http://website.com/products.php?searchterm=abcd&cat=sprockets&page=2
into clean URLs…
http://website.com/products/sprockets/abcd/2

Clean URLs are easier to read, easier to remember, and easier to type. Typically, they’re easy to implement, especially if you’re using a mature application framework. I’m still relatively new to the world of Java Server Faces, JBoss, and Seam, so some efficiencies like this that were dead simple in the Apache/PHP realm continue to allude me.

I’ve finally bit the bullet, though, and mostly gotten URL rewriting to work with Seam. Here’s a step-by-step howto, culled from the Seam documentation and some painful trial and error.

Make sure you’re using Seam 2.1 or greater.
Edit WEB-INF/components.xml to enable the rewrite filter. The components tag must specify the web namespace.

<?xml version="1.0" encoding="UTF-8"?>
<components xmlns="http://jboss.com/products/seam/components"
  ...
  xmlns:web="http://jboss.com/products/seam/web"
  xsi:schemaLocation="http://jboss.com/products/seam/core http://jboss.com/products/seam/core-2.1.xsd
    ...
    http://jboss.com/products/seam/web http://jboss.com/products/seam/web-2.1.xsd">

  <web:rewrite-filter />

  ...

</components>

Your Seam Filter mapping in WEB-INF/web.xml probably specifies a url-pattern of *.seam; change this to /*

<filter-mapping>
  <filter-name>Seam Filter</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

Add all your rewrite patterns to WEB-INF/pages.xml. (URL rewriting ought to work in fine-grained page definition files, but I couldn’t get it to work.)

<?xml version="1.0" encoding="UTF-8"?>
<pages xmlns="http://jboss.com/products/seam/pages"
  ...>

  <page view-id="/home.xhtml">
    <rewrite pattern="/home" />
  </page>
  <page view-id="/login.xhtml">
    <rewrite pattern="/login" />
  </page>
  <page view-id="/logout.xhtml">
    <rewrite pattern="/logout" />
  </page>

  ...

</pages>

There are a few caveats to note.

These rewrite patterns will only work for URLs without a trailing slash. The URL http://website.com/home will resolve properly, but http://website.com/home/ will result in a 404.
As mentioned in step 4, rewrite patterns provided in fine-grained page definition files (foo.page.xml) don’t seem to have any effect.

January 28th, 2009 | Java | 0 Comments

Reactions to the new WordPress dashboard

My site got hacked — fortunately in a way that wasn’t visible to visitors — so I upgraded my site to the latest WordPress release. This is the first time in my long relationship with WordPress that I’ve been unhappy with an upgrade: the dashboard is really hard to use. Buttons don’t look like buttons; there are so many links and options on every screen; some links are underlined, others are not; some elements stretch across the browser window, others are fixed-width; there’s too much contrast between certain elements, and not enough contrast between others.

The experience, sad to say, is approaching Vista-like proportions — in this case, though, I don’t have a stable, secure XP to fall back on.

Given the proclivity to make everything in WordPress configurable and skinnable, I wouldn’t be surprised to see “Dashboard themes” in a future version. I also wouldn’t be surprised to see a far simpler upstart blogging engine start to chip at WordPress’s market share.

June 4th, 2008 | Uncategorized | 0 Comments

The role of art in UCD

During a panel discussion at the UPA Boston miniconference on Wednesday — humorously dubbed by Chauncey Wilson as “Cranky Geeks Complain About the Field” — the audience was encouraged to voice their own concerns about user-centered design for consideration by the three panelists. One comment that stirred up some discussion was a desire for art to be a more central part of our work. (It is “design,” after all, the thinking goes.) Thoughts of iPhones and Michael Graves-inspired housewares, no doubt, were swimming through everyone’s mind, but I got a little uncomfortable. After a lot of reading, and an increasing amount of contact with other practitioners, I’ve come up with a decent mental model of what an interaction designer/user experience engineer ought to do, and art, while important for the end product, isn’t central. Neither for that matter is technology… or business.

In fact, that’s the whole point.

At another session, I was impressed with the term “mastery of materials,” borrowed almost certainly from the industrial design world. The designer doesn’t manufacture widgets, doesn’t dictate the business requirements, doesn’t use the paintbrush. He does, however, have intimate knowledge of what to expect from each building block available to him — whether it’s CSS, textiles, AJAX, extruded plastic, or a glowing screen. Mastery of materials.

The interaction designer need not learn the gritty details of PHP, Ruby, or JSF to know what heights a web application can reach, and he need not have an MFA to know how beautiful a pixel-perfect mockup can be when crafted by a graphic designer. (He certainly needs to know when to involve those specialists in his process.)

In the middle of management, programmers, artists, and marketers lives the interaction designer, pulling in requirements, limitations, possibilities, ideas, and criticism to generate an actionable vision for the implementation of a product.

At the end of the day, 99% of user experience work does not result in jaw-dropping, award-winning artistic masterpieces. It’s ecommerce checkout systems that don’t suck, or group collaboration tools that smoothly integrate with the rest of your life, or cell phone text message input that’s easy to use on the run. There’s a huge need for this bread and butter user-centered design. I’m decidedly not an artist, and I’m certainly not discouraged by that.

May 30th, 2008 | User-Centered Design | 0 Comments

Updated Sketch GUI Shapes for Visio

Wall of Mockups

Below, find a link to download my revision of Niklas Wolkert’s “sketchy” Visio prototyping shapes that are included in Henrik Olsen’s GUUUI Web Prototyping Tool. These shapes have made mocking up a web UI much easier, and the hand-drawn style makes it very clear to stakeholders that “this is not yet working software.” My typographical and usability improvements include:

Got rid of heinous Comic Sans typeface. I use Calibri except in the form elements, which use Consolas.
Changed text spacing on all text block items. Almost every text element has zero spacing, so it can be placed more precisely.
Made left margin consistent between check boxes and radio buttons.
Made “edit text” the default double-click behavior. Original shapes did not have consistent behavior, requiring first a single-click, and then a click of the “Text Tool” button.
Improved “empty box” shape. Sometimes I like to use the empty box shape as a textarea, so I gave it some default text font/spacing settings to accomodate.
Added the Grid Column shape. I may be running afoul of some sort of license, but I copied the “Grid Column” shape from the “Common Controls” stencil; it helps for mocking up tables. Unfortunately, it’s not “sketchy,” but I made the fonts consistent.

Download Updated Sketch GUI Shapes (zip of Visio 2007 .vss)

May 27th, 2008 | Uncategorized | 13 Comment

A Visual Vocabulary for Information Architecture

I was fortunate to find Jesse James Garrett’s article, “A visual vocabulary for describing information architecture and interaction design,” on his website yesterday. Flowcharting is not a skill I’ve been privileged to learn formally, and I’ve been hesitant to get into it for fear of doing it wrong, since I assume there actually is a right way to draw a flow chart. Garrett, thankfully, has published his approach to a simple, IA/IxD-specific design diagram which can serve as a basis for all other design tasks:

The trouble is that the detail each audience requires differs vastly from the detail required by others, and the bulk of this detail is irrelevant to the needs of other audiences. The sensible approach is to limit the detail in the diagram to that which can be usefully applied by all audiences. The diagram thereby serves as a touchstone document for the development of more detailed documents specific to the needs of each audience.

The article gets high marks for including inline examples, full-featured downloadable examples, and shape libraries in a dozen formats. I’ve already successfully migrated my latest flow map to his format, and along the way, tweaked the Visio stencil to be more in line with my style:

Calibri typeface, rather than Verdana (it’s narrower and a bit more refined)
Connector labels that cover the line (the Visio default), with a white text-box background
Improved text spacing in the File Stack shape
Improved text spacing in the area shapes

Updated IA/IxD Diagramming Stencil

May 20th, 2008 | Uncategorized | 0 Comments

Theme in search of project

I can’t wait for an opportunity to use this commercial theme from Quommunication: News. It’s probably one of the cleanest, most air-tight WordPress themes I’ve come across. True to its name, News is for magazine-style sites, so it might be a long wait.

May 19th, 2008 | WordPress | 0 Comments

Under the hood, minimalist WordPress themes are anything but

I had never been completely comfortable with the previous theme I set up for abbett.org, even though I had modified it extensively, so upon discovering a list of “minimalist” WordPress themes last week, I started trying new looks. I’m still not settled on a new theme, and I’m discovering that many of the simple-looking themes out there are just disasters of code: capellini nests of PHP and CSS, hidden by delicate facades of sans-serif typography. Used out of the box, they look pretty good, but a lesser man could easily be broken by even basic attempts at customization.

I don’t doubt that there are a few standards-compliant, easy-to-modify themes somewhere that match careful visual design with elegant code, but I haven’t stumbled across them yet. (I also haven’t done a scientifically exhaustive search.)

But I’m really trying to get at a larger point: RSS represents the failure of HTML. HTML should be more than sufficient to convey the written word, but it has become loaded with cross-browser hacks, meaningless DIVs, navigational elements built of lists and headers with no semantic value, etc. One can rarely view the source of a web page and get an understanding of how the page’s content is organized. Skinnable blogs, while a boon to the Internet at large, are a major contributor to this problem.

Meanwhile, RSS succeeds, proliferates even, because it is simple, it is structured, and it is consistent; it is the essence of content, perfect for man or machine. Forget the blogs themselves; just take the content and run… to Google Reader, to Live Bookmarks, to Thunderbird.

But I have one lingering problem– I hate using RSS readers. They take the life out of syndicated content. Just as there’s something special about the tactile experience of reading a newspaper, about the smell of newsprint, about relaxing on the couch with that week’s New Yorker — a well-designed blog offers more than just text. Logging on to ruhlman.com and stevesilver.net everyday (rather than seeing a list of headlines on Facebook) has a similar distinction to picking up that fresh magazine.

What’s needed, in my mind, is a return to the web’s roots: strict separation of content from presentation — along with excellent content (spell-check, proofread) and excellent presentation (typography, typography, typography). RSS won’t be as necessary once the source data itself is interpretable, and simpler HTML, I presume, will make for simpler WordPress themes, and simpler customization.

(But don’t look at my source code just yet!)

May 19th, 2008 | HTML, Typography, WordPress | 0 Comments

Configuring Oracle Express for development

It’s been a rough couple weeks getting used to Oracle, but I’m finally getting my development environment smoothed out. One important configuration change I’ve had to do on two instances of Oracle Express is upping the maximum number of connections the database server will accept. As usual, I came upon the problem by way of a thoroughly useless Oracle error–

ORA-12516: TNS:listener could not find available handler with matching protocol stack

“Of course! Wait… what?” Luckily, those who precede me have encountered the same problem, and the recommend fix (from the Underground PHP and Oracle Manual (PDF), page 175) worked like a charm.

First, connect to Oracle as the SYS user using SQL*Plus — that’s “Run SQL Command Line” for us Windows folk.

SQL> CONNECT SYS/password AS sysdba
Connected.

Then, check the value of your “processes” parameter.

SQL> show parameter processes
NAME                                 TYPE        VALUE
------------------------------------ ----------- ------
aq_tm_processes                      integer     0
db_writer_processes                  integer     1
gcs_server_processes                 integer     0
job_queue_processes                  integer     4
log_archive_max_processes            integer     2
processes                            integer     40

By default, that last value is 40. I’m not sure why 40 isn’t enough — seems like a lot of connections — but let’s up it to 100.

SQL> alter system set processes=100 scope=spfile;
System altered.

Then, shutdown and restart the server.

SQL> shutdown immediate
Database closed.
Database dismounted.
ORACLE instance shut down.
SQL> startup
ORACLE instance started.

Total System Global Area  805306368 bytes
Fixed Size                  1289996 bytes
Variable Size             213909748 bytes
Database Buffers          587202560 bytes
Redo Buffers                2904064 bytes
Database mounted.
Database opened.

If you like, you can run that “show parameter processes” command again to confirm that 100 is the new value.

December 12th, 2007 | Oracle | 3 Comment

Using Oracle with PHP and CodeIgniter

Configuring PHP

My first mistake when configuring PHP to support Oracle was to assume that it would be as easy as MySQL; that is to say, on Windows, simply enabling the Oracle DLL that ships with PHP. No such luck, and the error message you see — when you finally remember to check your PHP error log — isn’t very helpful:

PHP Warning:  PHP Startup: Unable to load dynamic library 'C:\Program Files\Zend\Core\lib\phpext\php_oci8.dll' - The specified module could not be found.
in Unknown on line 0

Thanfully, I found a document on the Oracle website that explains how to configure PHP on Linux and Windows for Oracle support. I’d say this was the first straightforwardly helpful piece of Oracle documentation I’d ever used. Frustrations nevertheless ensued. When I downloaded Oracle 10g Express to load on my desktop, the website mentioned that I wouldn’t need any additional Oracle client downloads. (It was a gigantic enough download!) So, naturally, I figured that the client libraries needed to for PHP/Oracle support would all be somewhere in my install folder. Incorrect! As the configuration instructions suggested, I also had to download the (39-megabyte) Instant Client Basic for Windows, which contained all three libraries. I plunked them into a new directory, put that directory on my path, and revved up PHP. This time, no errors.

Easy Alternative: Zend Core offers a “for Oracle” version with Oracle support built in, out of the box.

Configuring CodeIgniter

I’ve started using CodeIgniter heavily in the last few months, and it’s a real time-saver once you get the hang of it. While I have a couple hangups about the CI User Guide — mainly that it’s slanted too severely toward the “quick example” side without comprehensive reference information to fill in the gaps — the user community tends to be quite helpful. Accordingly, the User Guide only says that CI supports an Oracle database, with no instructions on how to complete the built-in database configuration to use Oracle. So, I browsed the forums and found a few folks who had posted their Oracle configurations, and noted that, in general, one’s database config should look like this:

$db['default']['hostname'] = "//localhost/XE";
$db['default']['username'] = "USERNAME";
$db['default']['password'] = "PASSWORD";
$db['default']['database'] = "DATABASE_NAME";
$db['default']['dbdriver'] = "oci8";

That hostname field can optionally contain a port number, if it differs from the standard 1521:

$db['default']['hostname'] = "//localhost:9999/XE";

The “XE” in both examples is the default SID that Oracle 10g Express uses. (Unfortunately, I’m still oblivious as to the utility of an SID.) Also note that username, password, and database fields probably ought to be in uppercase — more case sensitivity implications on their way, stay tuned.

That done, we’re ready to query for some data. But wait! I tested my existing application code (previously running on a MySQL database) and got these warnings:

ERROR - 2007-12-02 15:02:05 --> Severity: Warning  --> ocifetchinto() expects parameter 1 to be resource, null given C:\codeigniter\system\database\drivers\oci8\oci8_result.php 159
ERROR - 2007-12-02 15:02:05 --> Severity: Warning  --> ociexecute() expects parameter 1 to be resource, null given C:\codeigniter\system\database\drivers\oci8\oci8_result.php 46

Yet again, the CodeIgniter forum came to the rescue: there’s an Oracle-specific bug in CI’s platform-independent database abstraction class. It’s fixed with a simple cut-and-paste. Around line 324, the $RES->num_rows line needs to be moved down below the if block, a la:

$driver 		= $this->load_rdriver();
$RES 			= new $driver();
$RES->conn_id	= $this->conn_id;
$RES->result_id	= $this->result_id;

if ($this->dbdriver == 'oci8')
{
  $RES->stmt_id		= $this->stmt_id;
  $RES->curs_id		= NULL;
  $RES->limit_used	= $this->limit_used;
}

$RES->num_rows	= $RES->num_rows();

No more warnings.

Using Active Record

CodeIgniter’s Active Record class makes most database queries dead simple and, combined with centralized configuration and automatic connections, cuts down significantly on lines of code. Using Active Record in my model class, I have a login method which checks a users table for the proper username and password:

$query = $this->db->getwhere('users', array('username' => $username, 'password' => md5($password)));

Then, I check the result for an active user by inspecting the flags field for a non-negative value:

if (isset($query->row()->flags) && $query->row()->flags >= 0) { ... }

For some reason, I just couldn’t log in, but I wasn’t getting any error messages from PHP or CodeIgniter. Then, I recalled my case sensitivity wrangling from earlier, and my cogs started turning. My database had been constructed with all uppercase table names and column names, so perhaps my result’s fields would be uppercase, too. A simple var_dump of the result object proved my theory:

object(CI_DB_oci8_result)#17 (9) {
  ["stmt_id"]=>
  resource(33) of type (oci8 statement)
  ["curs_id"]=>
  NULL
  ["limit_used"]=>
  NULL
  ["conn_id"]=>
  resource(24) of type (oci8 persistent connection)
  ["result_id"]=>
  bool(true)
  ["result_array"]=>
  array(1) {
    [0]=>
    array(3) {
      ["USERNAME"]=>
      string(8) "username"
      ["PASSWORD"]=>
      string(32) "..."
      ["FLAGS"]=>
      string(1) "0"
    }
  }
  ["result_object"]=>
  array(0) {
  }
  ["current_row"]=>
  int(0)
  ["num_rows"]=>
  int(1)
}

Now, I reference the uppercase member variables in my code and it all works fine:

if (isset($query->row()->FLAGS) && $query->row()->FLAGS >= 0) { ... }

I’m not sure whom to implicate for the misunderstanding. When I write SQL queries — against MySQL or Oracle — my schema, table, and columns names may be written in any case, and I get a proper result. Shouldn’t that case insensitivity carry through into Active Record and/or PHP?

December 2nd, 2007 | CodeIgniter, Oracle, PHP | 15 Comment

abbett.org