Avatar’s Changing Title Treatment?

Jason Stanley | 01-07-10

So I, like millions of others, have seen the movie Avatar, and I really enjoyed it. I think it will hold a place in history for its groundbreaking special effects and the story was better than I had anticipated.

I have seen all of the designer hoopla about the use of Papyrus as the subtitle typeface, and yeah, I cringed when it first came on the screen, but I shrugged it off and went with it, no biggie. Admittedly, it has been entertaining reading design blogs about the decision to use Papyrus by Cameron.

It has been pretty well documented that the main title treatment isn’t strictly Papyrus either, but a slight variation. I am sure a designer somewhere fought pretty hard for that. I actually think it works fine for the main title treatment, it is a display font after all, and with the wide kerning and subtle changes I think it works fine. I do think that it falls somewhat short in its application as a subtitle typeface, but like I said, it is definitely not a deal breaker.

What did really bother me however, was at the end of the movie, the last scene takes place and then the screen goes dark for an instant, then the audience sees the word Avatar again, only this is a completely different font and color from anything you’ve seen before. It looks more like a bastardization of the original title, which for the life of me, I can’t imagine why they would elect to do that. I know it sounds trite and all, but it really brought everything to a jarring halt for me, my immediate reaction was, whaaaa?

I like the idea of ending on the name of the movie, it was a fun, roller coaster ride of a picture, and the reiteration of the title treatment (done properly) would serve as a nice punctuation mark on the whole experience. But the inconsistency of the title treatment really surprised me and makes me wonder how that decision was ever made in the first place, (see Avatar Art Director, Creative Director, Graphic Designer, Typographer, etc.). Maybe they will fix it for the DVD release?

Coalmarch Productions® took the whole team to the Race for the Cure on Saturday

Jim Switzer | 06-16-09

We continued our sponsorship for the Komen NC Triangle affiliate this year, and we had a great time at the Race for the Cure. We had a great turn out and an even better presence at this year’s race with support from the entire team. Next year we’re considering hot dogs for our visitors.

A big pat on the back to Jason, Thomas, and Mike for putting together an unbelievable video production for our tent. Jason created a great new design for our banners, and the Prius, which we weren’t fully able to capitalize on. (We won’t discuss that.)

Most of all thank you to all of the wonderful people who stopped by our tent to talk. We hope that everyone enjoyed the day, at an event that makes us all see just how human we all are.

Here are some of the photos from our photographer, Omar.

Programmer Hiring Practices and Standardized Testing

Ken Winters | 06-10-09

Hiring a competent programmer is an immense challenge, and hiring a great one is much more difficult on top of that. Here are some strategies I’ve learned along the way.

Zend offers PHP and Zend Framework Certification but I don’t put any stock into that kind of test. Since PHP has good API documentation, the memorization that multiple choice standardized tests can evaluate is minimally useful.

Even if I thought the tests were a good indication of language competence, it still wouldn’t be a useful metric because language competence is not a good indicator of new hire success. Some careers like DBA or server administration seem to benefit from the standardized tests, but what I value in a programmer doesn’t boil down in the same way.

We do, however, subject new hires to short-answer technical tests. Some things that we look for:

909ae8e6e4dc5459fc1e9d728191ba54

I would consider someone who knew nothing about PHP but was skilled in a different language and fully understood the concepts to be more valuable than someone with 10 years of full-time PHP experience but didn’t have any wider knowledge (on most projects). Once you know what you are looking for, you can figure out the PHP syntax quickly and achieve competence in a few weeks, but getting a real Computer Science education takes years.

I’ve found that there are only three good indicators of success for a new hire:

ac2fdcb701fe60fed5bf2426b7b20e3a

Any time that the new hire will be working on architecture or designs rather than just implementing what is handed to them, I think education is more valuable than experience. However, if all you need for them to do is follow your plan then the only real requirement is language competence and basic knowledge of security. That’s not a situation that we normally run into, but for very large corporate programming teams it can make sense.

If you are a programmer and are trying to increase your chances of being hired, learn about common security issues, source control, and the higher-level capabilities of your chosen language. If you don’t know much about algorithms and basic things like linked lists, take a class or buy a book.

Building a Lunar Calendar with Drupal’s CCK Computed Field

Jess Walls | 06-07-09

You can get a lot of mileage out of a Drupal site with the knockout combination of Views and CCK. Both of these mainstay projects have many contributed modules to extend their power. In this post we are going to look at CCK’s Computed Field module, and how it can be used to automatically add contextual information to a content type on a per node basis.

To get started here’s what we’ll need:

8166474cdc8914378ab3c1d069e2dcb8

Assuming all the above modules have been installed and configured, we can focus on the details of setting up our computed fields. For this example, we’re going to add 3 new fields to Drupal’s blog content type. Navigating through the admin section to admin/content/node-type/blog/fields, we’ll add the fields shown below:

We’ll add a date field to our blog content type with a pop-up widget, plus two computed fields: one to display the phase of the moon associated with date as a string, and another to display the phase of the moon as an image.

On the configuration screen for our first computed field field_moon_phase, we’ll see, in addition to the standard cck widget options, 3 additional configuration options—a text area for computed code, a text area for display format, and a group of options for database settings.

The text area for computed code is where the majority of the magic is going to happen. This is where we will enter our our custom php to parse the node’s CCK date field to compute the phase of the moon for the date selected by the user, and then display that information on the node both as a string (e.g. whether it is Full Moon, or a Crescent Moon) along with a graphical representation of the moon phase.

So, what are we allowed access to in the computed code text area? Well here’s the description from the Computed Field project page:

096ea3d4cfccf35d12113515f995d527

Below the text area for the computed code there is also a helpful description of the variables that are immediately available to us:

&$node, $field, &$field_node

While the easy thing to do is to enter our php code directly into the text area provided for us, it will be easier to maintain in the long run if we place our custom code into a module. For this example I’ve added two functions to a custom module,

moonphases_phase_string()

and

moonphase_image()

, which I will reference from the text areas provided. To get started, we will access the date field value we added earlier field_moon_date, and pass the value to

moonphases_phase_string()

. This function will parse the date value to determine what the phase of the moon is on the given date, and then return a string, which we will assign to our computed field variable

$node_field[0]['value']

Now that we have assigned our computed value to the node, we need to configure how it will be displayed and stored. Since we will just be using a string value in this field, we will leave the default display settings as they are, but we are going to select the option to store the value in the database as a varchar so we can reference it from our View’s Calendar later.

We will configure the

field_blog_moon

computed field in a similar manner, with the same display and database settings, this time calling our custom code with the value from our previously configured

field_blog_moon_phase

field. This function will return an html img tag string with the graphical display of the moon phase. (It is worth noting at this point the order of the fields is important, if we want to use a field previously defined in this node, then that field should be set with a ‘lighter’ weight.)

To recap, we now have three additional fields defined for our blog content type—a date field and two computed fields.

At this point, we can test out our moon display by creating a new blog entry, choosing a date, and publishing the node.

Since we elected to store our computed fields in the database, we have access to our fields through the Views’ UI. To pull our blog posts into the calendar view (with the accompanying moon data), we will edit the Calendar view to add a new Page display.
We set this view to use the calendar style, choose the field

field_moon_date

as our argument, and select three fields to display on the calendar: the node title and the two computed fields.

Navigating to the path configured for this page view we have the finished result:

Making Node-Based Drupal Forms Play Nice with Admin Theme Settings

Ken Winters | 05-21-09

We use Garland as an admin theme because it really does a great job with the many admin forms that Drupal provides. This saves us a lot of work re-skinning the admin for every new site.

Although you can get Node Edit and Node Add skinned in the same way, all other menu paths that start with /node/ will use the front-end theme by default. The reason for this is simple and understandable, but unfortunate; the path /node/id/clone, for example, doesn’t start with /admin and for all Drupal knows it could just be an alternate front-end view for the node. So, it’s not at all safe to just default to using the admin theme for these paths.

One way to avoid the issue is to use a menu path that starts with /admin/ but that causes a number of other issues: you can’t leverage the sub-menu system on the node view and it makes the workflow for using it unpleasant, it doesn’t naturally inherit permissions and other settings, etc. So, that’s not a good plan either.

So, instead we will do exactly what the system module does — use hook_init to change the theme based on the current path for node-based functionality.

a154bfa35bf8d75965b76832f6f68768

It may be even better to do that logic only when you’re already processing that menu item (like in the menu callback function) so that you avoid the tiny bit of overhead, but doing it globally and based on path means it doesn’t matter what state your form is in.

Sending Comment Posted Emails to Drupal Blog Authors

Thomas Ingham | 05-12-09

How do you go about sending emails out to blog post authors on a per-post basis using Drupal?

The answer is pretty simple if you know where to look. Scouring around the net you’ll find a lot of advice but let’s have this post be your one-stop shop to setting it up in Drupal 6x. Here’s what you’ll need to get started:

9f9df99d7ce36ad4aa05286d6b799259

The respective module pages have pretty self-explanatory setup procedures and if you need any further help just hit me up on IRC (irc://irc.freenode.net/#drupal-support) or via the contact form to the right.

Step 1. Laying the foundation.

Set up your Action by browsing to the Administer>Site Configuration>Actions tab. This whole process can be a bit confusing because the “Add New” stuff feels like it should work like Blocks does, but it must be older functionality; it’s inverted. Scroll down to the select box and select “Send e-mail.”

Because you’ve got tokens enabled, you can use the handy bracket-syntax in fields all over Drupal including on the Actions forms. In this case we’re going to use the tag [author_mail] which comes in from the Node object. This tag isn’t immediately available to the segregated Triggers (supply side) of tokens but we’re going to fix that in a later step.

Enter [author_mail] in the recipient field and fill out the other fields to suit your desired Drupal aesthetic.

Step 2. Get Things Moving

Next up you need to tell Drupal that something needs to be done, when a certain event occurs. This is done using a Trigger. Browse to Administer>Site Building>Triggers and then select the “Comments” object-type tab at the top of the form. This will show you a list of the available events that you can fire Actions off of. For this we want to say that when a “Comment is Saved” we’re going to initiate the Action we created in Step 1. Click the submit button to finalize.

Step 3. We’re Almost There

If you were to flip around to the front of your website right now, select a blog post and submit a comment you’d get an error that looks like:

5d25146ec7602d1ae97cae2dbd97c7c0

Then looking at the error logs you’d see something akin to:

6398af33c0edea28c7d2f38043c0a2c1

The reason for this is because Tokens isn’t providing “Node” information to Comment objects inside of Triggers. This is easily remedied however with a really quick snippet of php code. If you’ve already got a custom module set up for your site; you can skip ahead to the code snippet.

Step 4. Customizing the Crap out of It

In order to get some code into your site to override the default behavior supplied by Drupal you’ll want to create a custom module. The reasons for this are many, but primarily it’s because if an update for Drupal or a module you’re using comes out, you will want to be able to install it without replacing your customizations (thereby breaking your site.)

To create a new module, just make a new directory inside of “[yourproject]/sites/all/modules/[custom module name]” and then create two files inside of that directory.

1. [custommodule].info

This file stores metadata about your module. The relevant bits of info that you should put here should look like:

432551a4583d1eacf2ad9304e2ed9bd8

2. [custommodule].module

This is the actual source code for the override:

a9fb27b83ed20d368d19c454472d6464

This selects the “comments” case of the token values stack, and injects some information about the node inline. The handy bit we’re looking for is just author_mail but we’re including the other keys in case we want to make emails feel a bit more personal.

Add this directory to your development site (because we all keep two copies of our site up right, one for development and the other the live environment?) And browse to Administration>Site Building>Modules>Other and enable the module you just added.

Once you’ve done that, you should find that re-submitting a comment on a blog post appropriately sends an email to the original blog post author. Score 1 for Drupal. Hit me up on Twitter if you have any questions via @coalmarch

Savage Sword, Anyone?

Jason Stanley | 05-05-09

I suppose my affinity for fantasy art must have begun when I discovered my dad’s Edgar Rice Burroughs’ collection of paperback Tarzan novels.

I recall being enchanted by Frank Franzetta’s depictions of a fierce Tarzan battling sabertooth cats, mastodons, and any variety of extinct animalia. I would sit for hours and study the depictions of fantastic muscles of the hero and realistic fangs and horns of his antagonistic monsters. For some reason it struck a chord with me, and has ever since. There have been many times when I chose to buy a fantasy novel simply based on the cover art, as absurd as that seems. At the very least I was able to own a piece of art that I appreciated, despite the quality of the book itself.

Fortunately, the majority of the time I was rewarded with the combination of good cover art and solid fantasy tale. I was never a huge Burroughs fan, but then I was 10 when I read my first Tarzan novel, which may have had something to do with it, I think I was a little young to really appreciate the work itself. But I could appreciate the cover art. Apparently, 12 was the magic number, because by that age I was solidly enthralled with Conan the Barbarian. It would seem a natural progression, since Franzetta painted covers for Burroughs’ Tarzan novels as well as Robert E. Howard’s Conan novels, but I wasn’t aware enough of the fantasy art world at that time for it to matter. I simply loved the character of Conan the Barbarian. Joe Jusko brought him to life with his vividly painted covers of The Savage Sword of Conan. I loved his attention to detail and his clean, realistic style. I enjoyed Jusko’s covers every bit as much as the early Franzetta work. I even started signing my name using a cool “J” like Jusko.

By This Ax I Rule, Joe Jusko

Around this time I discovered Boris Vallejo, who was putting out his own fantasy art calendars. He also contributed to Conan paperback covers, you know the type, Conan protecting a scantily clad woman from some dire monster. Not that Vallejo’s women needed protecting, he was one of the earlier fantasy artists who depicted muscular, independent women in his work. Vallejo was probably the most anatomically correct fantasy painter of those days, combining fine art figure painting with the fantasy genre.

When the original Dragonlance series was published by Margaret Weis and Tracy Hickman in the 80’s I was introduced to Larry Elmore for the first time. Elmore had the same clean style that I admired in Jusko, he absolutely brought the characters to life in the first three covers of the series.

Dragons of Winter Night, Larry Elmore

Elmore was also creating work for the Dragonlance role playing game and Dungeons and Dragons art in general. I think he did the best job of bringing the dragons of that series to life. At the same time, Clyde Caldwell, Keith Parkinson, and Jeff Easley were also contributing amazing work to the fantasy realm. Easley’s work was much more painterly, he didn’t mind if you saw the brush strokes in his work, and he did some amazing covers for the Dungeons and Dragons Player’s Handbook and Monster Manuals. Parkinson combined realistic renderings with great environments and creative backdrops. Caldwell tended more towards character based paintings, and contributed a lot of great, detailed pieces to the Dungeons and Dragons pastiche as well.

In the late 80’s and early 90’s Ken Kelly was producing the majority of the Conan paperback covers. While it sometimes seemed like Conan had more muscles than were anatomically possible it never diminished my enjoyment of his renditions of the barbarian hero, overall Kelly produced some great covers for a good number of Conan novels.

In art school at college I was appreciative of H.R. Giger’s alien work, not only for his technical ability, but for the sheer originality of his work. While he represents (for me) a departure of sword and sorcery fantasy art, he is significant for the creativity expressed in his work. He truly created his own niche in fantasy and science fiction art.

Since the advent of the personal computer and its ascension into the art world things have changed quite a bit. Programs like Photoshop, zBrush, and Painter have made producing digital art easier than ever before and exponentially increased the number of artists creating original work. Some of the best include Craig Mullens, George Grie, and Michael Parkes, to name a few. There are also some really great sites for showcasing work and sharing techniques, CG Society comes to mind foremost.

Even though I design websites and identities for a living I think I will always have an affinity for fantasy art. It was something I grew up with appreciating and still do, to this day. I think the raw creativity of the genre serves as solid creative inspiration, no matter what discipline of art you participate in, professionally or amateur.

All in all, fantasy art has come a long way from the early days of Franzetta and Vallejo, I find the work being produced today as enchanting as ever, and look forward to enjoying what the future holds.

Quick & Easy Contextual Header Image in Drupal

Sheena Donnelly | 04-28-09

A contextual background image is one of the few things that seem much simpler to accomplish on a static HTML website than on an ever-changing, dynamic, CMS-based website. On some websites, a contextual header image or background color can be a more aesthetically pleasing addition or alternative to a breadcrumb trail, which is used to remind the user of the current page’s position in the Menu Tree.

With a dynamic CMS, if users are able to come in and change page titles and move items around in the menu system, they are most likely able to mess up any simple convention by which you could establish a contextual background.

I’m going to show you a quick and easy way to add contextual aesthetics to a Drupal site using a few modules you may already have installed on your site. There are a few things to keep in mind with this tutorial, though. Since it is “quick and easy” it is not thoroughly tested for very large sites with menu systems that could easily run out of control. This tutorial is more geared towards a smaller site that has most of it’s content arranged heirarchically within one Menu Tree with a somewhat static root-level of the Menu Tree (i.e., main navigation).

Modules you will need:

Menu Block http://drupal.org/project/menu_block

Modules that are helpful:

Menu Trails http://drupal.org/project/menutrails
Pathauto http://drupal.org/project/pathauto

I will only be going into detail about how to use the Menu Block module. The Menu Trails and Pathauto modules will be helpful on sites with Blogs and other frequently-updated nodes that will not be entered into the Menu Tree.

The first step to creating this functinality is to set up a well-organized main menu tree for your site. I am using the “Primary Links” menu on my site. I have organized my nodes heirarchically and made sure each item is not Expanded so that I end up with a clean main menu that consists of “Home”, “About Us”, “Services”, etc. You can choose the placement of your main menu in your page.tpl.php document, or through the blocks admin page (/admin/build/block). I am placing my Primary Links into the Site Header.

Next, we will use the Menu Block module to create a sidebar sub-menu that will contain only the children nodes of the active main-menu item. Once you have enabled the Menu Block module:

Go to Site Building -> Blocks -> Add Menu Block (/build/block/add-menu-block) The important configurations are as follows:

Block Title: The block title will automatically be generated as the title of the active main menu item. You can override that default in the “Block title” textfeild.
Parent item: Menu - this is the menu that you have chosen to organize your nodes in.
Parent Item: Item - the menu tree level of the item that must be selected in order to display it’s children (usually will be “root”, but if you only want a sidebar menu for one section of your site, for example, only for “About Us”, then you would choose that menu item from this drop-down)

Starting level: This is the level in the tree’s heirarchy which you want to be displayed in this block. If you chose “primary” then the top level and lower will be available for display, depending on the context. In this situation, we are chosing to start from the 2nd Level.
Starting level: Starting level will be: we are chosing “children of active menu item” for this menu, so we are not redundantly displaying the main menu items.

Once you have created this block, move it into your left sidebar (it will be named “Primary links(active menu item)”). Now you should have a list of main menu items in your header, and a list of sub-menu items in your left sidebar, which change based on which main-menu item is active.

Now, we are going to move on to the fun part: using CSS to create a contextual header with help from Menu Blocks’ contextual classes.

First, create a new Menu block. be sure you enter “” into the Block title textfield. The Parent item should be your main menu tree (here it is Primary Links) and the item should be “root of primary links”.

The starting level will be 1st, because we will only be changing our background between the main sections of the site, in order to create continuity between related pages. For the same reason, we will limit “Maximum depth” to “1”so that we only show parent items, never children.

Save these options and you will have a new block named “Primary links (level 1)” and move it to the header region, or create a new region wherever you want your contextual image to appear. You will now have a redundant list of your top-level primary links on every page.

The source for the new menu will look something like this:

notice that each <li> has a unique class using that item’s link ID (ex. menu-mlid-1412). Also notice that the active main-menu item will retain the “active-trail” class while on any of it’s children pages.

It’s time to start styling. Our first step is to hide the inactive menu items.

 #top-content ul.menu li,
 #top-content ul.menu li a{
 margin: 0;
 padding: 0;
 display: none;}

Putting in the second rule for the <a> tag ensures that the actual text does not show up when we make the active menu items visible.

Our next step is to set up a consistent width, height and default background image for pages that are not in the Primary Links tree.

#top-content ul.menu li.active-trail{
 display: block;
 height: 205px;
 width: 920px;
 margin: 0 auto;
 background-image: (images/default.jpg);}

Using a default image like this ensures that if the client decides to add an additional main-menu item there will be a default to fall back on.

Last, we put in the background images for each menu item, using the unique <li> classes as selectors.

#top-content ul.menu li.menu-mlid-1399{
 /put "About Us" background here/
 background-image: url(images/about-us.png); }

 #top-content ul.menu li.menu-mlid-1402{
 /put "Your Services" background here/
 background-image: url(images/services.png);}

 #top-content ul.menu li.menu-mlid-1412{
 /put "In Depth" background here/
 background-image: url(images/in-depth.png);}

 #top-content ul.menu li.menu-mlid-1413{
 /put "Client Center" background here/
 background-image: url(images/client-center.png)}

Our final result is a very nice-looking header image for each main section of the site, that will automatically change within the context of the site’s menu tree.

How to Write a Successful Request For Proposals

Ken Winters | 04-14-09

Writing a RFP is a pretty basic part of contracting out software design work, but it’s also incredibly easy to dig yourself into a hole when you don’t have a clear idea of what you want.

Much of the time a RFP is really just a wish-list, and this is understandable because the companies who have the expertise to do the work themselves (and really understand the scope and goals of the project) often handle it internally. When a software development company places a bid on your RFP, they have to make some critical decisions that make it nearly impossible for you to compare apples to apples.

The contractors say to themselves, ”Do I estimate the cost of all of the features, or just the cost-effective ones?” Providing a total for the whole wish-list means a huge price tag and sticker-shock, but dropping features is dangerous without knowing what is important to the client. Or, do I try to estimate everything piecemeal, which often results either in a complex proposal or an inaccurate one? Since different contractors will shoot for different budgets and different interpretations of what the client values, it becomes very difficult for the client to choose the best proposal.

So, what do you do about it?

Start by giving an approximate budget, which eliminates entirely unreasonable proposals and lets the contracting companies optimize. Sure, you might save a tiny bit by not revealing this part of your hand, but you are far more likely to get a solution that really does the best job for the money and that easily cancels out the risks. This also changes the dialog from “lowest bidder” to “what can I give you for this much money” and that is likely to raise the overall quality of the product, too.

Next, put priorities on your wish-list. Contractors are much better at guessing how much something will cost them to implement than the inner workings of your business. Rather than guessing, having more accurate starting information leads to better cost/benefit analysis, which in turn leads to a solution you are more likely to be happy with.

Deciding what proposal to use is simply a matter of determining who gives you the most for your money, and now the proposals you get back will actually do most of the work for you. That’s something to celebrate!

Tools of the trade

Jess Walls | 03-23-09

When it comes to web development tools, I’m always on the lookout for applications that remove the monotony from menial tasks. In a perfect world there would be one programming language and platform that did everything superbly and elegantly. Unfortunately, it’s not a perfect world, and the reality of the matter is that when developing a web application with any degree of complexity, multiple pieces of technology must come together in, hopefully, complete harmony. Ah, but for the best laid plans of mice and men!

I have a fairly short, but strict, list of what makes great tool:

b10ef275217562e44cfc02350d511f5f

When complexity rears its ugly head, as it’s sure to do, the first thing I look to do is leverage my intellectual control over the situation. Usually, the best way to do this is to look to the proverbial toolbox for some assistance.

Firefox wins hands down for web development based on the sheer number of quality extensions available as addons that integrate seamlessly with the browser. Lately, I have learned to love Venkman, the definitive javascript debugger for Gecko-based browsers. This Firefox add-on is a full-featured debugger with an intuitive interface. It has all of the functionality you would expect to find in stand-alone debugger: breakpoints, watches, the ability to step into and over function calls, and variable inspection.

The power of a debugger goes well beyond finding and fixing bugs. In fact, most often I use Venkman for verifying control flow, and inspecting object structure. I’ve found it especially useful for tweaking json objects passed into Smarty templates from php’s json_encode function. Venkman makes it trivial to inspect the structure of evaluted json data at runtime, which would ordinarily be difficult in a situation where the the template is dynamically populated with json data from php and the corresponding javascript object is not instantiated until the template is parsed, the json is evaluated, and the page is loaded in the browser.

Another great time saving tool I recently came across is flashcommand for OS X. Under the hood, it is a combination of python and AppleScript. It doesn’t actually compile the fla files itself, rather it invokes the Flash authoring environment. However, when faced with task of compiling dozens of fla files, flashcommand removes the labor involved in opening up each individual file and publishing it from within the Flash IDE. With a list of files and a little bit of bash it is simple to compile a slew of flash files in one go:

for file in $files
do
flashcompile -jv -s $file
done

Now that is simple.