Posted by: fijiaaron | February 15, 2008

Next steps

The next things I need to do are:

1) get the trac wiki to have pretty URLs.

2) decide on whether to use Joomla or not.

I’ve been putting off the first, but I really need to investigate namespaces, and rewrites for the trac design.

I’ve got the design pretty much ready to go, just need to clean up.

I’ve been studying up on Joomla, and the biggest advantage I see it having is that it will be easier to maintain if I pass it off.  I’d really rather use another framework, but learning Joomla might pay off.  I haven’t heard from Patricio for 2 weeks, and so I guess I’ll be writing him off.

He was the reason I went with Joomla, since he said he knew it.  But now another reason is I might work with Cuenca Guide for articles, reviews, classified ads, and an events calendar.  It might be worth it to make these as Joomla extensions and have an adapter.

I’ve been reading the “Up and Running with Joomla” ebook from Safari, and it’s pretty good and clear.  I’m only as far as templates, however.  I’ll probably take a diversion and create a template that won’t be too pretty.  Template structure is one thing I don’t like about using a CMS like Joomla.  There are lots that look a lot alike and doing any real customizing is a bigger chore than building from scratch.

Still, once I learn it, it might lead to more work.  Deciding if I want that kind of work is another thing.

What I really wanted was to work on the process and QA site for CuencaTravel.com but I’ve found I’m not prepared for the former, and neglecting the latter.

I’ve got to get over my framework fetish.

Posted by: fijiaaron | February 9, 2008

Axure is a good wireframing program

Of all the programs I’ve tried for wireframing and page design, I think I like Axure RP Pro the best.  I’m only got the 30 day trial version, but if I do much more design work, I may buy it.  The price is a bit steep at $589, but I’d rather pay that than $399 for Fireworks.

I think I actually prefer Inkscape to Fireworks, and it’s free.  Positioning is much easier.  My one gripe is that it uses bottom up vertical positioning (the bottom of your page is at Y=0.)  So for detailed page layout, I think Inkscape would be my program of choice.  But for wireframing, I’d choose Axure.  I’d be glad to hear any other recommendations, tips, or comments.

Here are the tools I’ve for website prototyping:

  • Microsoft Word & Powerpoint – very blunt, but powerpoint can be useful for quick, simple pages.
  • Gimp – not at all cut out for it.  Not being able to draw a box is a nonstarter.
  • PaintShopPro – This is still a nice graphics program, but creating text in a graphics program isn’t fun.
  • Fireworks – I was impressed at first, but then very quickly frustrated.  Maybe if you’re a Fireworks pro.
  • Inkscape – very impressive open source tool.  More for design than quick prototyping.
  • InDesign -
  • FrameMaker -
  • Acrobat -
  • Smartdraw – very limited except for basic charting.  I wasn’t even happy with it’s sitemap, and would rather use a flowchart or class diagram to create a sitemap
  • Axure RP Pro – this is in the sweet spot and my tool of choice for now.  It’s not the way I’d prefer to wireframe, but it does a good job of basic layout.

Axure generates HTML from it’s drawings, instead of PNG like Fireworks or SVG like Inkscape.  It is saved by default in a proprietary format.  Axure has features for adding text, images, rectangles, placeholder “X” boxes, lines, and basic HTML form components, inputs, buttons, checkboxes, selects, textareas, etc, as well as simple menus.

I’d like to see more details for boxes with color, rounded corners, etc., but keeping it simple is actually an advantage when prototyping.  Using a design tool like Inkscape, it is easy to get distracted with pixel perfect placement and colors.  Form elements save time and lend realism.  A reasonable grid is enabled by default, and is unobtrusive.  Table layout makes things easier than using “guides” like in Fireworks.

Object grouping is a blessing, and huge timesaver.  You can quickly create a box with label, input, button, and description, group them, and move it around as a widget.  This is the must-have feature for a layout tool.  Maybe Fireworks has it, but I couldn’t find it.

Ordering is also a nice and easy to use feature (one you learn the shortcuts: e.g.,  CTLR+SHIFT+[ .) By ordering they mean Z-index, or what’s on top.  It’s much easier to get to elements than in Fireworks as well.  I’d still like to see a map panel where you can select an element or group, even if it’s hidden.

Selection, editing text, and other little things are much easier with Azure than Fireworks, which is a usability PITA.

Another feature which I haven’t explored is annotations, which can cover requirements and implementation of page components.  Using a series of rectanges, I broke down my pages into components, and I can track details such status, risk, benefit, stability, target release, and assignee.  If I could integrate that into my PM application, it’d be a blessing.

Things like Navigation list are relatively small, but the weather widget, map widget, directory search, etc.  are features that can be tracked from the page design.  With a non-technical manager or client, it would be really nice to be able for them to point at a section of the design screen and get information about who is working on it, what their status is, and when it’s planned to be added to the site.  It would really benefit in an agile group enviroment.

Oh yeah, page notes are cool too.  And they don’t clutter the page.  In Inkscape, I call out to textareas outside the page for comments, but this is much nicer.

Posted by: fijiaaron | February 8, 2008

Wireframe layout with Adobe Fireworks

I’ve been working on the layout for CuencaTravel.com.  Turns out there’s too much to fit on the front page.

I’ve been struggling with a graphical tool for wireframing.  The trial version of SmartDraw was a huge disappointment.  Inkscape is awkward, primitive, and just ugly. Gimp can’t draw boxes, and is terrible at lining up text.  Axure is practically a web development tool.   I decided to try what’s supposedly the most popular – Fireworks.

It’s crap.  I’d have been happier with Gimp, I think, if only it knew what a four-sided polygon is.  It seems the only use of fireworks is to draw lines across the page from the corners of an image — but don’t try to layout your images in Fireworks – make sure they’re already trimmed.  And if you want to actually view what you’re making, you need to open the PNG in another editor.  It has practically no support to text, other than the Adobe collection of fonts.  There seems to be no grid to snap to, but it still tries all the time with some bizarre fuzzy logic so boxes need to be deleted if Fireworks gets it into it’s head that the box for column A should be slightly higher than for that for column B.  Selection is a buggy nightmare.  If you try to select one box it will mysteriously add additional text or image sections to the selection.  You cant copy an area (like say a button) and paste it without a lot of trial and error.  And beware that something off screen wasn’t randomly selected and copied.

I can’t believe this is the state of the art in graphic design.  I should have downloaded Paint Shop Pro.  I wish I still had my PSP disk from 1997, that would have done a decent job.  While it may not have had as many features as Photoshop, it’s still a better and easier to use graphical tool.  Too bad there are no more page layout programs.  What ever happened to FrameMaker?  Or what was Adobe’s cheap web design tool back around 2000?  That was better, though not really good for wireframing.  I should have probably just fired up an HTML editor and played around with some tables.  Only that doesn’t usually print well.

Posted by: fijiaaron | February 2, 2008

The start of CuencaTravel.com

On Wednesday, January 29, I met Patricio Pesantez. He had responded to my flyer posted at the Cuenca Polytechnic University looking for intern partnerships.

We met at La Fornace, my favorite pizza place in Cuenca and I showed him a presentation I’d put together about my concept for a website, CuencaTravel.com. He liked the idea, and agreed to work part time on it. We will share ownership 60% (me) / 40% (him).

I’ve spent the last few days planning and getting infrastructure ready. Today is February 1, the first scheduled day of the internship, and so far, right on target. I’ll have leave Ecuador on March 25 because my visa was cut short when I renewed it. I had originally planned to return to the USA on April 13. That cuts a week off of the planned time, but it’s not that big of a deal.

I registered CuencaTravel.com on October 30, 2007, a couple weeks after I first came to Ecuador. I haven’t worked on it much since, because I’ve been working on the OneShore.com website and designed the QA Site offer. I had a pretty good idea of what I wanted, though, and put the first real planning on (scratch) paper over the past few days. Creating the CuencaTravel.com presentation helped solidify the features.

I also spent the last couple days building a QA site for CuencaTravel.com at http://cuencatravel.qa-site.com/.

Because I did most of the setup work on qa-site.com for One Shore and the demo, it was pretty quick getting a base system set up (though of course longer than I thought.) Currently it has:

  • A Subversion repository – including web access and remote commits with logins using htaccess
  • A Trac project – mainly for the wiki, also using the same htaccess
  • A ProjectPier project – for tasklists milestones, documents, and discussions.I’ll probably need something else for WBS and timeline. Probably just files.
  • WordPress-mu blogs – this is the first post

I also have a basic qa-site landing page with links to these four apps and a basic timeline table.

intial QA Site dashboard screenshot

I’ve been working on features, requirements, and a sitemap in the trac wiki.

The idea of the sitemap is to recreate the site in the wiki with only a description of whats on each page and all the links. So you can navigate around in the wiki as if it were the site, only there won’t be any content or layout. I’ve got a good start on it, but it’s pretty disorganized.

I’ve got a basic (but fairly comprehensive) list of features. And only 1 requirement (which will probably be dropped) — Internationization.

In the trac wiki:
sitemap pages are prefixed with sitemap_
features are prefixed with features_
requirements are prefixed with req_

I’ll try to come up with a better system than that. I’ve wasted a lot of time reviewing project management apps, mostly Basecamp clones. I decided on ProjectPier because it’s among the best of the bunch and open source. Maybe it’s not wasted time, but I feel a pretty strong itch to make my own version and tie it in to QA site. I’ll try to avoid doing a feature list here.

I’ve also got a basic task list format based on todo.txt.

I’ll try to focus on CuencaTravel and develop a QA site for it at the same time, though I’ll try to keep things simple for Patricio, while at the same time teaching (and learning) good development and collaboration processes.

Categories