OSS Web Dev Methodologies Post 1: Pre-Production With Dia
October 5th, 2007 | OSS Web Dev Methodologies, Open Source
“OSS Web Dev Methodologies” will be a series of posts designed to introduce you to some of the many tools available on open source software platforms. Let’s begin with the pre-production stage of the development cycle.
Any significantly large web development project usually begins with a pre-production phase chop full of documentation. This documentation usually includes diagrams, in particular wireframes. You may already be familiar with a popular commercial drawing product for this type of work, Microsoft Visio. You may not be aware that there are many open source alternatives available. Two of the most popular are Kivio built for the KDE environment and Dia built more for the Gnome environment. I tend to prefer the Gnome environment so I chose to learn Dia. I’ve found that the tool not only does everything I want to do, but that I prefer using it over Visio.
The following is a screen cast of a rather basic diagram creation. The diagram illustrates basic page flow for a current project databasing snow parks.
The first thing you will notice about Dia is a multi-window interface much like Gimp. While this is not my favorite interface, it is generally less cumbersome for Dia than for Gimp. I tend to work with many images in Gimp at the same time; however, in Dia, I tend to work on a single document at a time.
Dia has a wonderful set of features. On the surface, you will find the core set of drawing tools for laying out vector based diagrams complete with text and images. It’s important to note, the Dia file format does not include images - but rather links to them. Thus, if you include embedded images in your document, it is a good practice to create a folder for your raw Dia file and all related image files.
Just below the surface, you will find that Dia has a wide variety of built in predefined objects. These objects are stored in collections called sheets and include typical symbols for flowcharts, networking configurations, database layouts, and much more. Dia also supports layering. This is handy for showing various states of your diagram or for just managing clutter.
I tend to develop what a friend of mine refers to as “Site Map 2.0″ type documents. The typical site map is good at showing page relationships in a tree like hierarchy. Modern web apps tend to have so many cross over links that the typical site map isn’t very useful. Perhaps in the future, I’ll write a detailed post on some of the methodologies I’ve developed for “Site Map 2.0″.
Dia will export your diagram to a variety of formats. I typically export my documents in as a PNG file for distribution. Dia allows you some fairly good tools to control the scale at which your documents print, allowing you to span over any given number of pages. Personally, I prefer to export to very large PNG files, dress it up a bit in Gimp, and print the image file.
Dia is available for download on a variety of platforms. There is a Windows version available for those of you who may be interested in using open source tools but aren’t ready to switch to Linux just yet. Just to encourage you to consider working in Linux, installing Dia on my Ubuntu system required checking a box and hitting “apply”.
This concludes my first OSS Web Dev Methodologies Post. Future posts will introduce more open source tools that you can use from preproduction to deployment.
what did you use todo your screencapture?
Istanbul Desktop Session Recorder.
thanks!