Forum OpenACS Q&A: Design implementor needed

Posted by Malte Sussdorff on
For one of my clients I am looking for a person who is able to take a design in photoshop and put this to work in OpenACS 5.4.

Apart from that I am wondering if we have a guideline written for designers who need to adapt OpenACS 5.4 to make their design work.

Any pointer to people you have worked with in the past who could do the job is appreciated as well.

Thanks in advance

Posted by Tom Jackson on
As an application developer it is easy to cringe at the thought of starting from a graphic design and disassembling it into programmable components. But there is a distinct clarity in this approach. I tend to believe that if you can't explain your idea with a crayon drawing, it is too complicated.

It isn't exactly clear what the task is here. For instance, does the application already exist, and there is just a gap between external design and code, or is the design the only thing which exists right now, kind of a mock-up using photoshop?

For just the gap-filling task, it is very helpful (necessary) to create a process for converting the photoshop graphics into reusable/programmable graphics. The reason is that graphics design may be expensive, but not as expensive as redoing an ad-hoc process to use the graphics. You end up telling your client that they can't alter the graphic inputs without high costs and lots of testing. It is pretty easy to take a graphic and use it in one situation. The problem is you don't want to keep going back to the graphic artist for every change and then redo all the conversion work by hand, over and over. And, since you really want consistency, the exact process of conversion must be programmed in, just imagine hand creating buttons with different text, you don't want to go back to the designer for stuff like this.

Once you have all the programmable pieces, you still need to put them back together to look like the original graphic, and still work like a web page which expands or shrinks with browser width and provides something useful for accessibility requirements. Using css is very handy for this process and makes the generated HTML a lot easier to understand (and debug).

On the application development side there are some issues to deal with. If the underlying application exists, like a standard OpenACS package, and you are just modifying the templates, the design should be mapped to individual pages and checked for the data content. It is common for a designer to combine or mix in data from multiple application pages which are not actually available on a single page. If this happens, you can expect a need to create a new tcl page to provide the combined information. This might be easy or pretty invasive. In general designers are not thinking about the data model for each existing page, but about the overall available data, so you can't guarantee to your client that the design only requires the gap-filling work, essentially replacing templates and providing a conversion process for the graphics.

If there is no existing application, then you don't have these constraints, you have to write the tcl pages anyway.

In any case, OpenACS provides lots of tools for doing these things very efficiently.

Posted by Don Baccus on
What you need is someone who can organize it into clearly-structured CSS+HTML+graphics files.

At that point it's fairly easy to skin openacs.

If you go here, for instance, you'll see a portal-driven page of themed portlets using CSS+HTML+graphics files put together by people who had no clue as to what platform would be used.

(not a good idea, but I came into the project after the design was mostly complete).

I'm not sure that the skills to "put this to work in OpenACS 5.4" are at all the skills needed, as opposed to "build well-structured CSS+HTML+graphics that an implementor in OpenACS (or Django or RoR or anywhere) could make use of.

Posted by Deds Castillo on
I agree with Don. If you are just relying on graphic artists with limited knowledge of CSS+HTML then there'd be a good chance that some elements of the design is almost impossible, or at least would require more work than you would want, to implement. There's also the issue of CSS browser compatibility so a fancier design would probably require you to insert one or more hacks to make it work on some browsers, more notably IE.

When I was tasked to reskin Solution Grove's blog based on a PSD file, I wasn't able to make it 100% identical due to some elements which I found hard to convert to CSS+HTML. I do admit that I haven't done much work in this area so what I found complex would probably be very simple for another who makes a living based on that person's CSS+HTML knowledge. Also this design took a lot of time in searching for and figuring out the hacks to make the 3-column layout (with free flowing left) work in IE6 and IE7 so that's one of the gotchas as I didn't think it would be a pain initially. 😊

Posted by Tom Jackson on
This is close to the transform I was thinking of, but I was more interested in the the process used to chop up the image, and how it gets chopped up so that you can reuse it.

I don't have a great example, but here is one page:

It actually doesn't use css, although it could. The example is just a form wrapper with image type submit buttons. The buttons are ugly, no doubt, but they are constructed out of a rectangle image with text and rounded head/tail. Since this button has to fit into a variable width form, and the buttons are also variable size, there is a widget that figures out the details. But another detail is the process for creating the buttons and drop-shadow around the form allow you to change the color (or create new buttons) very easily, without going back to the designer.

Alternate color images here:

The form widgets are here:

Here is an image series and the scripts which handle their creation (slightly different application):