How NOT to Build a Website (cont)

In November of 2006 my wife, Shirley, and I took a Mexican Riviera cruise. In anticipation of some much-needed downtime I ordered a book called Head Rush Ajax. Not sure why I bought that book except that I had heard of Ajax, and the book looked interesting in its format.

Well, I read that entire 400 page book during the 8 day cruise. And yes, there was plenty of time left over to make sure that my Sweetie was fully engaged and entertained during the cruise! I felt as though I really understood Ajax after reading that, but more importantly it made me start thinking more about both javascript and html.

When I got home I ordered Head First HTML with CSS & XHTML. If you’ve never read this series of books, you just have to do it. I have never learned as quickly as I did reading those books.

So anyhow, the Head First book on html made me realize how easy html and css is to use. I immediately restructured all of my websites using css. Now I can change the look and feel of an entire site by changing a few lines in the css document.

I do continue to use DW8 for updating and creating my sites, but it’s funny – now I use only the “code” window and never look at the “display” window! And I feel as though I have absolute and complete control of every aspect of my sites and pages. I can move anything anywhere on any page with a quick css update.

So the moral of the story is that if you have, or want to have, a website, learn html and css and do it the right way. You may wonder why I continue to use DW8 if I can write html in Notepad. DW8 still provides good value to me because it helps me see code errors as I make them, and makes it easy to ftp the updates to my live sites. I can make a change, click two buttons to review it, click two more buttons to upload it to the web servers.

That is how to build a website the RIGHT way.

How NOT to Build a Website

At the time that I felt I needed my first website I knew basically nothing about html or css. And I was deep in the throes of learning VB6 so I wasn’t about to try to tackle html too.

But I needed a site, so I knew that I needed a tool that would give me WYSIWYG capability – and at low cost. I wasn’t (and still am not) much into spending loads of money on my “hobbies”. I found a little shareware tool for about $29 that did a few pretty cool things – and allowed me to throw a site up in a couple of weeks. It was very basic but at least I had a web presence!

So that sufficed for the next year or two. Then I needed more sophistication and decided to pop for Dreamweaver 8. DW brought a lot more functionality, but at a price – significantly more complexity. Not knowing html, I never even looked at the “code” window. I always worked in the “display” window. Still WYSIWYG dependent, you see.

After I got through the fairly steep learning curve, helped tremendously by a book called Dreamweaver 8: The Missing Manual I was pretty comfortable knocking out an update to my sites over the weekend.

But then a funny thing happened. Well, let’s save that one for the next post.


Technorati Profile

Eye Candy

Let’s admit it – graphics make or break any simulation or game program. So that means you have to get at least pretty good at creating them. As I’ve mentioned before, I don’t go out and buy the best tools available – I’m just a guy sitting on the sofa creating stuff. A few years ago Paint Shop Pro was a nice little shareware program that you could get for about $40. You can go spend about $500 for the world-renowned Photoshop – but I like being married, as I may have mentioned.

So PSP it was. A few years later PSP went bigtime and started selling boxed product for $99. I’ve paid that price more than once for the latest upgrade – I like this software that well.

Oh, and JASC - creators of PSP - were bought by Corel a while back. You can buy PSP X (there's a version XI now) here for $69 the last time I checked. Its worth 3 times that price. By the way, I don't get a nickel for saying that.

Like any tool, it takes time to get good with it. I bought a few books (surprise) along the way, and I literally feel that I can do anything that I want to do with PSP.

As I mentioned earlier, I chose the simplicity of a scrolling 2D environment for my project. I must admit that I was, and am, a little intimidated by learning 3D graphics. I’ll tackle it one day, but not just yet.

I learned early on that blending my horse images into a background that varied in hues and tones was a big challenge. You see, graphics can only have smooth-looking edges when they blend into the colors behind them. This is how “anti-aliasing” works. So if you have, for instance, a graphic with a black edge, and it’s on a white background, the only way it can have a smooth edge is if the black edge blends into the white background. And the only way that can happen is if the edge of the graphic “blends” by having a set of edge pixels that are dark gray, then another set that are a middle gray, and another set that are a light gray. Then it looks very smooth.

But what happens if you put that black graphic on a brown background? No really – what happens?

OK, you have 3 rings of dark/medium/light gray pixels around the black graphic – on top of brown. Doesn’t look smooth at all – in fact it stands out terribly. It took me quite a while to figure this out and solve for it – by doing my blending with a background color that was similar to the background in the simulation. Thought I’d pass that tidbit on to you so you don’t struggle as much as I did.

By the way, to be as realistic as possible, I actually visited a world-renowned race track that’ll remain nameless, and took dozens of photos that I later used in the background of my simulation.

I ended up creating 300 different horses, 15 jockeys, and 3 layers of 2D scrolling in the background. The end result wasn’t 3D, but it was darn good – and all done with a $40 graphics tool.

Next we’ll talk about how to protect your intellectual property.

The Sound of Music

Somewhere along the way it struck me that a silent horseracing simulation wouldn’t be terribly, uh, immersive.

I knew nothing about sound files. So I read a few books.

Do you see a sorta common theme here? I read a lot of books. We all have our own means of learning. I’m very visual, I’m an introvert, and I have this innate sense that I can figure it out – with no one’s help. These are not good traits, by the way. I think I could get things done TWICE as quickly if I were a networker and had a smaller ego. But that’s not natural to me. So I take the hard road sometimes.

I strongly encourage you to get involved in local (or net) user groups and so forth. But rest assured that, God forbid, you’re like me – there is still hope. But you have to read a LOT of books. I finally bought two 6’ bookcases to hold my reference books (which go out of style very quickly).

I also don’t like to spend a lot of money, so I always look for decent shareware tools before I go buy the more expensive, feature-rich tools. I found a reasonably priced audio tool called Cool Edit 2000. It was about $70 as I recall, and MORE than covered my needs. That little company has since been bought out by Adobe and is sold under the name Adobe Audition. More expensive, and more features.

Recently Adobe released a tool in beta called Soundbooth that is a brand new application built in the spirit of Cool Edit. It provides the tools that video editors, designers, and others who do not specialize in audio can use. You can download Soundbooth here.

Anyhoo, with Cool Edit 2000, a $60 Radio Shack microphone and a little $15 mic stand, I created a vast number of sound files for my simulation. Certainly not award-winning stuff, but not bad either.

I had created a “you are there” experience.

Data, Data, and more Data

I decided pretty early on that I wanted a dynamic racing form. Now if you don’t know what a racing form is – it’s the bible (no sacrilege intended) of every horse race handicapper. The racing form tells you, for each horse running that day, what his recent history is race-by-race. I mean it tells you stuff like how far he was back from the leader at the 3 furlong pole (a furlong = 1/8 mile), what gate he started out of, what the winning time of that race was, how fast he was in his last 3 practices. And much, much more.

I wanted that!

So my simulation had to capture all that information in real time (now do you see why I needed more speed in my graphics engine?). By the way, programmers call lots of things “engines”. When they say engine all they really mean is a function, or more rather a set of functions, that perform a given task. So I could say that I wrote a “racing form engine”, or a race horse “behaviors engine”. Just means I wrote some code that does that. You have to admit that “engine” sounds pretty cool though, huh?

OK. Now I need to really understand databases. After a lot of reading and , yes, trial & error, I realized that by far the easiest way to implement a database is to use MS Access to create the database, and then connect to it with VB6 using what is referred to as Jet 3.57 or whatever the current version is. It’s integrated right in the VB6 IDE. Really wish I could tell you what an IDE is, but the best I can come up with right now is “something Development Environment”. Maybe “Integrated”, now that I think about it…

Anyhoo, what an IDE is, is a tool that helps you write code. The VB6 IDE knows the VB6 language and provides TONS of help in programming. You can actually write Visual Basic code in Notepad if you want. It’s just like writing HTML – you don’t need Dreamweaver to write HTML or CSS, but BOY is it easier with it.

I’m easily distracted, as you can see. But I hope there’s some value to you in my little forays into the netherworld.

A lot of people hear “database” and think “omigosh – forget it”. But I’m here to tell you- this stuff is EASY. Don’t be intimidated! Creating a database in Access is a cakewalk. It’s very WSIWYG. Create a new database and name it something that is concise – your table names will be more descriptive. Then add a table to collect your data. For my project I named the dbase- that’s slang for database {:<) - “rftr.mdb”. Those are the initials of my project. My primary table was named tblHistory. The “tbl” part tells me it’s a table, and the “History” part tells me what it will contain.

Then I added fields such as horseName, jockeyName, raceLength, winningHorse, winningTime, etc.

You may notice that I use a certain pattern in naming things – there’s a name for this approach, but as usual I have no idea what that is. Basically you start with a lowercase descriptor of the object, and then capitalize each word that comes after that. You might have something called tblWinningHorsesName. I have found, through years of use, that this approach is the easiest for me to read and understand. In programming you will be creating hundreds or thousands of objects. It makes life a lot simpler in a large program to start each object’s name with a description of what it is (ie, “tbl”) and then use this means of differentiating words within the name. By the way, you typically can’t use spaces and a number of other characters in your names. Some people use underscores, but it’s just too hard for me to type “tbl_winning_horses_name”.

Once all the fields are set up, which includes defining what kind of data they will hold, such as text, numbers, dates, etc., then you’re ready to go into VB6 and have your code talk to the database tables and fields you just created.

Really, it’s just collecting data and retrieving data. Access and Jet are the easiest way unless you’re dealing with hundreds of thousands of records, or you have dozens of users that will all be accessing the same dbase concurrently – then Access sucks.

So a couple of months later I had a dbase and the racing form is working - SO COOL!

Viewport Foibles

At that point in development I didn’t have much in the way of graphics. One set of graphics of a horse running – 9 different drawings, as I recall, that gave the impression of smooth animation. Like cartoons, right? But I thought I’d better get a handle on how I was going to get that animation into the viewport.

Maybe I should take a moment to talk about sprites. I learned how they work in 1983 or so when I wrote that little program on the ol’ TI-99/4A. A sprite is simply any graphic that you draw on the screen, then erase it (or re-draw the background over it), move it, and then re-draw it on the background. So it moves. Don’t know where the word “sprite” comes from, but that’s what it’s called. Now, if you want it to look a whole lot cooler you have to animate it – just like cartoonists do.

So you simply create a series of drawings on a transparent background that depict what the sprite is doing. So for my horse I created a small drawing of a horse in mid-stride, then I created another drawing with the horse’s front legs going further forward while the back legs are a little further back – and so on. With 9 “panels” the animation looked pretty convincing.

I’m not an artist, and I don’t think you need to be. If you can look at a picture and copy it in pencil, then you can scan it into a paint program and use the program’s tools to brush color over it. It’s pretty amazing how good it will look with not much effort.

At that stage the program loop wasn’t doing a whole lot of stuff. It checked to make sure the “horse” wasn’t running off the screen, it moved the background graphic sideways a couple of pixels, and checked on a number of other things, like who is in the lead, updating the elapsed time clock, etc.

But the horse animation was too jerky – and I didn’t have the program doing HALF the stuff I wanted it to do. Heck, I was only drawing one horse. I needed to draw 12! So I knew I had to find a faster way of getting the sprites on and off the screen. I started reading up on programming the Windows API (application programming interface). An API is a language that lets you write code that “talks” directly to the underlying technology. In this case that was Windows. I learned everything I needed to in order to draw the graphics directly on the Windows, er, window. By the way, I was using Windows 98 at the time.

Guess what? Still not fast enough… Still too jerky.

I had spent something like 2 months implementing the Windows API solution. Back to the drawing board. So I started reading about DirectX. DirectX8 had just come out but that seemed to be overkill for what I needed. DX8 was all about 3D graphics. I was working with scrolling 2D graphics. So I bought several books about DX7. After many weeks I figured out how to draw the graphics in DirectX7. But now I couldn’t get the viewport to be active at the same time that the dashboard was on screen.

I literally spent 3 or 4 months figuring out that problem. I wrote to I-don’t-know how many forums, read everything I could get my hands on, tried everything I could think of. I can’t tell you how now (I think I’ve blocked it from memory) but I figured out the solution – and it was FAST ENOUGH to provide me smooth horses!

That was, I’d say, the toughest challenge I overcame in my journey to completion. But there were many more to come…

The Journey Begins

So where do you begin when you know very little about how to do what you want to do? As a wise man, Wayne Walter, once said to me, "Steve, how do you eat an elephant? One step at a time". Not profound, but I remember that saying often, so for me its meaningful.

I imagine really smart people would start this journey by documenting a complete plan with milestones, target dates - the whole nine yards. So I'm not that smart. And as I mentioned before, I'm a little scattered in my thinking and not terribly disciplined - I work hard, but get off my intended path and onto others frequently.

So no project plan for me. No, I decided the first thing I needed to do was to build the user interface for my simulation - and there would be several interfaces.

I guess I should mention that what I was creating was a racehorse simulation - a "day at the track" as it were.

I knew I needed a viewport to see the action. A dashboard to show details of who was in the lead, the horse's odds - that sort of thing. Oh, and that would need to be on the screen at the same time as the viewport of course.

Also needed a window to place bets, another to show the payouts post-race. And the biggy - a fully integrated racing form. And I decided early on that some static facsimile wouldn't be sufficient. No, I wanted the races that you watched run, with the actual results, to be logged in a database and displayed in the racing form the next time you play the game. Boy, THAT was a big bite of that elephant...

As you can see, quite an undertaking for a guy that had spent about 50 hours to date learning the programming language and had no idea how to do any of that except make a simple form in VB6, and write a little code.

Somewhere along the way I read that over 90% of all amateur developers never finish a program. I told myself I wasn't going to fall into that category. In fact I was going to not only complete this project - but actually sell at least one.

So there I was with all those grandiose ideas and not much of a clue about how I would get there.

As I may have mentioned, I am somewhat creative, and have a real passion for creating things - whether its computer code, graphics, music - whatever. Not great at any of it, but really love doing it.

So I naturally tend to start my projects with the user interface. Now I'd guess that the real pro's are just the opposite. They probably start by creating programmatical objects (we'll get to that more later) and the infrastructure of the application itself - the part you never see - and then build the interface around that. Me, I like to start with what the user will see and then build the code around that. Right, wrong - I dunno.

I also think I mentioned that I have a career that is pretty demanding and that is critically important to me - it supports my family and promises a reasonably secure future. So this programming stuff has to take back seat to that. What that means is that I work hard all week, and then I work hard all weekend - but doing what I'm passionate about. So its not really work.

The sense of accomplishment I get when I figure out something, or complete a component, is just amazing. And provides me more energy and drive to do more.

So anyhoo, I started drawing out the dashboard portion of the user interface. Pretty easy to do with VB6 - in fact, amazingly easy, once you figure out a couple of basics. Pretty much a trial & error process (like all this stuff). Do it, run it, tweak it, run it, etc. Eventually you say - "that looks pretty good". Not that you're not going to change it 27 more times along the way, you understand...

But wait a sec - you may be interested to know where I got VB6. The Microsoft website? Not hardly. No, I buy most of my development tools on eBay. Can't find it cheaper anywhere else, at least not legally. And as a software developer I feel pretty strongly about software piracy.

After getting the dashboard pretty much where I wanted it I decided the next thing I should tackle is the viewport. It was critical to have the graphics of the horse race running on the same screen as the dashboard.

Should be pretty simple, huh? Well, that little piece took months to figure out. More on that next time.

Gotta get to work for now.

A Little History

So how did I go from Unskilled Geek to polymath?

Coin-op video game freak extraordinaire - Space Invaders, Pac Man, Donkey Kong, Joust. You name it. But that doesn't teach much but eye-hand coordination and how to avoid your responsibilities.

1982 - The Texas Instruments TI-99/4A came out. For about $100 I could buy a "real" computer. Had to hook it up to your TV for a monitor; saved your code on an audio diskette tape; oh yeah - the largest program it could hold in RAM was 16k - yeah, K.

Used TI Basic - bought the "Extended Basic" plug-in module and was able to program SPRITES!

Started with "Hello, World" and a year later finished and copyrighted a sports game that was the EARLY predecessor to the program I started selling last year.

Boy Genius? Not hardly. Learned a little, learned a little more, painstakingly trial and errored. Finally got it where I wanted it. You can do a lot with 16k if that's all you have.

Then life got busy - had 3 kids by then, and a demanding job.

Didn't touch technology (except as a user, of course - I AM a Geek) for 17 years. In 2000 something - can't remember what - brought my attention to Visual Basic. I was in a new job and away from home a LOT. Decided, what the heck, I'll buy VB6 and see if its anything like what I programmed with for the TI-99/4A.

Well it was, and it wasn't.

I mean, it was visual - that was good. Easy to create user interfaces and all. But the language was SO MUCH more complex.

So I read some and tried some - back to "Hello, World" again...

Decided to write a little program to help people decide whether to get a fixed-rate mortgage or an adjustable. You know - asked the user a series of questions about their needs, had some formulas built in there to add weighting to their answers, and spit out a recommendation. Didn't really use it for anything, but I could say "look what I created".

That was a big deal for me. I could create something useable with VB6.

I've always been pretty creative - decently, not exceptionally. But I had discovered that anything I can think up, I can program. Another big deal.

So with a little time on my hands I decided the best way to learn was to start on a most ambitious undertaking - to create a piece of software that would require lots of intricate programming, fast code, tons of graphics and sound - and then sell it.

Stay tuned for how I started a 5 year programming effort with a successful conclusion...

Renaissance Man

I have a story to tell.

If you are interested in technologies, you WILL be interested in this. If you are not - don't bother to read further. Only Geeks need apply.

In this age of specialists, particularly in the worlds of technology and innovation, the Renaissance Man (or Woman) seems to have fallen by the wayside. Technology people seem to be website designers, or graphics artists, or audio technicians, or programmers, or hardware experts. But few are all of those.

I'm one.

This isn't a story of a "smart guy". When it comes to intelligence I am average at best. Lousy memory, scattered thinking, easily distracted.

So why aren't there more people who succeed as generalists in technologies? Because they don't try.

Why don't they try? Lack of confidence? Or perseverance? Opportunity?

I'm here to tell you how you can learn and apply any of these skills if you only want to. I hope you enjoy the journey.

I won't post often, but I hope to give you what I didn't have (or didn't seek) - someone to lead the way to success. I'll do it by telling you and showing you some of the thorniest learnings I've made over the past few years - and hopefully to show you the easier path.

And why? Because we need more Renaissance People, more polymathes. Are you one?

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

So who am I?

Average Joe. You can call me Steve.

As of this writing I'm 51 years old and live in Southern California. Not from here, but like it here.

I am wondrously married to the Love of My Life. Her name is Shirley - I call her Shirl.

My day job is as an executive for one of the country's largest banking organizations. Something I've done for over 30 years now. I've never worked in any field of technology, but I've been a Geek since I saw my first Pong game, circa 1968.

I am self-taught in the following disciplines:

.Net application development - excellent (please forgive the lack of humility)
Database design - very good
Graphics art - good
Audio design - fair
Website design - good

During the past 6 years I have learned, or honed my skills in, technologies that were needed to develop and sell a software sports simulation. After meeting that first, very important hurdle (completing & selling something that I wrote), I knew that I could do more; better.

Today I am in development of a software tool that teaches anyone to excel at one of today's most entertaining and popular games. Release date scheduled for early 2007. VERY exciting!

If you have ever wished to create, test and market a product that you designed from the ground up, I hope to help guide you on this path we now travel together.

I hope you enjoy the ride.


Copyright 2005-2007 S. E. Krieger - All Rights Reserved