15 replies to this topic

[WingedPanther]

As I've indicated in my Ask Me thread, I'm going to start doing tutorials that follow my progress through building a non-trivial project. Part 1 isn't going to have a lot of PHP, HTML, etc in it. Bear with me.

To build a large project, you first need to get an idea. In my case, my wife likes to post her fan-fiction stories on Unleash Your Imagination - FanFiction.Net. Unfortunately, it has some real problems. It gets unstable around the first of the month, almost every month. It has inconsistent enforcement of policies, and it has a lot of crap stories that you can't effectively filter through. She wants a site that is good for posting her fiction on.

Before building a new piece of software, it's important to do some research. There are a few of reasons for this:
1) What you want may already exist.
2) You can get a lot of good ideas.
3) There may be something that's close enough for your needs.

We looked at a few sites. She has a blog on LiveJournal. While it has communities for fan-fiction, it isn't what she had in mind. MediaMiner.org - Anime FanArt & FanFiction is another fan-fiction site. It has nicer rules, but the site navigation is wretched. deviantART: where ART meets application! has several nice features for finding popular items, but poor categorization and fan-fiction is really more of an afterthought than the main focus.

Once you've reviewed the options/competition, it's time to start making plans. One of Sybil's big complaints, many peoples' complaints, about fanfiction.net was the fact that it didn't support crossovers. We would do that. fanfiction.net has since added limited support for crossovers, but we wanted unlimited support. If you want to cross Naruto, Bleach, Avatar, and Rid****... go for it! (you sick freak)

Another issue was the limited number of categories, characters, etc that you could mark for a story. While we liked the ability to leave reviews, the lack of a rating system really sucked. Since this is Sybil's dream site, I made her sit down and list some things on paper that she likes, dislikes, etc. She thinks well on paper.

After that, I broke out Dynamic Draw and OpenOffice and starting doing some mockups, database designs, and research. We also went to Color Scheme Designer and got a mix of colors that Sybil was happy with.

The result is the attached documents. I understand that the content is incredibly boring. This is NOT the exciting part. No PHP files exist here. There's no CSS, no HTML, just a few diagrams of the goal.

The truth is, the functionality doesn't have to be hard, but a little planning will save a lot of effort later. With just this little bit of information, you should be able to see what the goals are. The menu is planned in advance. Basic functionality is already indicated. These things will make the following stages easier to deal with.

Oh, and the zip file took me 30 seconds to upload on dialup :)

Attached Files

•  AlphaPlan.zip   51.97K   606 downloads

[Ascension]

I'm with you all the way.

[uokesita]

waiting for part 2

[John]

I completely agree. It scares me by the amount of people I see in my classes read a project description and immediately open an IDE and start coding. And although it is near impossible to anticipate everything, careful planning leads to a much better architecture and as a result the code is much more modular and flexible.

[WingedPanther]

Jordan said:

That was a great read. I liked the way you linked to the websites and tools you referenced. A couple of questions... Sybil is your wife's alias? What are crossovers?

A crossover is a story the takes elements from two different stories. For example, taking the Naruto characters and placing them in the Avatar universe.

John said:

I completely agree. It scares me by the amount of people I see in my classes read a project description and immediately open an IDE and start coding. And although it is near impossible to anticipate everything, careful planning leads to a much better architecture and as a result the code is much more modular and flexible.

The thing that kills me is the tools for quick simple design are out there! I can do an effective screen mockup in Dynamic Draw in a few minutes. A quick copy/paste to Word, and I can create a professional functional or technical spec in very little time.

[John]

I've never really had the need to create a professional mockup - I tend to stick with a few sheets of paper spread across my desk. You do seem to mention Dynamic Draw a lot, I may have to give it a try.

[WingedPanther]

Let me put it this way, now that the author has open-sourced it, I may try porting it to Linux.

[chili5]

Very nice!

What do you use dynamic draw for? Edit: when you use the color scheme generator, how do you decide what colors you want to use for the text?

Say I select "triad" it gives me a bunch of colors for that scheme but when I choose one as a background color and one of the others as a text color, it doesn't look good.

[WingedPanther]

It's a style thing. Sybil wanted orange as the major color theme. We decided the 2-color theme looked best. You just play with it.

As far as Dynamic Draw, I use it regularly for prototyping. I also use it heavily when making technical specs. In that case, I'll paste a screenshot or mockup and then add notations such as field names, etc. Think of it like Visio, only good :)

[BlaineSch]

Cant wait to watch this develop

What is the estimated time until product completion?

[WingedPanther]

Right now I'm just playing catch-up with what I've already done. Once I finish part four, I have to start creating code again. Or I may create some more code as part of part four. I'm not sure. I'm guessing this project is a minimum of 60 hours to do.