Tag: WAD

Web Application Development - Content pertaining to javascript, css, html, ajax, php, mysql and other related topics.

Alight, The Nathan Lindstrom site is now completed.
Man, projects with good people never last long enough! Check out his site here.

I had promised a few posts back that I would push up some of the mockups I made for some of the contract work I've been working on the past few months. I can't post mockups from all the projects, but here are a few.

 

UTS

Here's the original website for UTS. It was designed several years ago. I was told that they wanted to change the logo, but to design the mockups with the current logo. Sadly, the didn't have any high-res versions of the logo.

 

The first redsign used the same color-scheme as the original site. This was very difficult since the color scheme was gold, green, and navy. 

After this mockup, there was more direction to what they wanted with the second mockup. We tried adding in a longer design (not splash-ish). Also, I was told I could work with other colors and logos.

This mockup has a cleaner, corporate look. There is defined seperation between the text and the other interactive elements. The client did like the warm, dark look.

This mockup was much closer to what the client wanted, but they asked for another design that blurred the content with the other elements (feel like the site is floating in the browser).

This was the final design. The logo was added again, but only the text. The glow doesn't look great, but it is just a place holder at this point. 

It's important to note that the design is very similar to the other, but the "islands" for the text have been removed to open up the design and give a completely different feel.

 

Calvary Academy

Here is the original site for Calvary. As you can see, the site doesn't render well in webkit. Also the site is trying to expose as much information to the user as possible. This site was created for the school by the hosting service. I was brought in to design a site that would help direct the users to the most important parts. Also, they wanted their site to look "cool" for the students. Generally, "cool" and "sexy" are used in human interaction to mean "simple" and "complementary" in a design. Often times, clients don't have an idea of what they want, but they are quite certain they know what they hate.

Calvary has really only had one mockup. It's rare to get it right the first time, but I was very lucky in this case. It helps that I have a close friend who knows the decision makers. I was able to bounce the mockup off of him first and make some minor tweeks before sending it out. 

 

So, that's a few of my mockups. If anyone is interested, I can go in-depth on how to take what clients want and turning it into a mockup that means the same thing to them.

Tags: WAD(5) Personal(20)

Well I just finished redesigning a corporate web-app (massive database for service-reps). It was an interesting design. I was told that the site should be cutting edge, but not edgy.  Needless to say, it was tough but the final design was pretty good. It was a dark cherry-wood trim website with a touch of shine, but no plastic feel.

Now that that is finished, though, I am moving onto something completely different. Calvary Academy is in need of redesign/restructure. I have a few ideas, but the green and beige is a hard combo (look at how bad my site looks  . Oddly, this redesign job came through Bull Session. It's nice that the company can change with the market.

Now that I'm doing all this design/html work I'm really thinking about redesigning my website (surprise, surprise). I'm not sure what I will do, but I think it'll be a lot of fun.

My daughter, Emily, will be born the 24th of this month (9 days away!).  It's pretty exciting! I can't wait to see her face and hear her. Then, two weeks after her waking me up every night at 12am, 3am, and 6am, I'm sure her face/voice will not be so magical. 

That's all for now, I'll post design mockups later this week. 

Tags: WAD(5)

So, work has switched over to mainly application tweaking. This is a nice break because it doesn't require a lot of design, or thought. It's really just bug fixing, and stuff like "adjust this image so it's 4 pixels over in the negative x direction."

Anyway, I've been using trillian astra for a while. I was a trillian pro user ever since Miranda stopped being updated on the AIM side. The primary dev, snaphat, freaked out because he was the only guy working on it. So he left to focus on school, and I went over to Trillian.

Astra is pretty nice, but its web-side (primary new feature) seems a little lacking. It's just difficult to get the "extra options" to work nicely. The web-trillian is written in flash (heart) and runs well as far as flash-apps are concerned.

See, I get my own little trillian signature. It's supposed to show all my connections. I have personalized it, but none of them show up. Luckily, Trillian has focused a lot on the main app too. They have file transfers working almost perfectly, now!

 That's all for now. I'll be updating more often now that I have stuff working.

Tags: WAD(5) Personal(20)

So I thought this would be a good time to explain the back end of the website. Not the php side, but the sql. Since you can't get a computer science degree without being inundated with databases, I tacked this problem like we did at A&M. I first started off with a rough ER Diagram.

If you've never heard of an ER Diagram, it's basically just something that shows you have information is connected. In the past, databases were hierarchtical. Now that we use relations, we have to show what data goes where and how it is all inner connected.

As you can see from the diagram, this went through much work . I setup all the tables I thought I would need. The two tables in the center are simply there to show how posts relate to the tags and comments. I later completely removed HasComments because there was no need for it (since a comment can only be applied to one post, that information can be stored in the comment entry without any problem).
Tags had the most work done to it (why it took so long to implement). It originally had only three fields (ID, Name, Desc). After some thought, I removed ID since the name of the tag should be unique. Sadly, doing comparisons with a user defined tag name proved to be very difficult so I placed ID back in. Desc was the field for description. , I felt so stupid when I did my first few queries and got SQL syntax errors. If you don't have much knowledge of SQL, DESC is a reserved word for sorting (you can sort in descending order). So I renamed it to Details. I also added NumOfPosts to the tags. This is just to keep from having to pull all the tag's posts every time it's displayed.

Getting the tag information for a post, or the posts that the tag relates to was fun to write. It's a two stage query:

SQL: getTaggedPosts

select *      from Posts WHERE ID IN(      select PostID AS ID      from IsTagged WHERE      TagID = 'TagID#')      ORDER BY ID DESC

As you can see, I first make a query of all the PostID's from the IsTagged table, then select from the Posts table the IDs that match. I saw online someone complaining about subqueries not working for him (actually, he was complaining about a logical error in mySQL). His problem was that the IN clauses didn't match. But, you can see that with AS, you can make a field with a different name and get the query to execute properly.

I guess that's pretty much all for now, maybe I'll make my first tutorial on how to setup a database with MySQL and php... nah!

Tags: WAD(5) FollowerofJC.com(10)

Ok, so since I now have searching working (for the posts, I'm adding the project searching tomorrow) I thought I would take a break and show how this website came to be. This is just going to be a really quick look at the design of the news and main page.

Before I start, though, you should take a look at the projects page. It has all my current (and some of my old) projects. It's fun!

So, with this website I started by creating a list of things I wanted it to be able to do. This was just a bulleted list and was very simple.
As you can see from the image, I started to realize that I needed more information, so I just expanded the smaller parts.

Once the requirements were created, I started an initial sketch that allowed me to lay everything out. This was very rough, but ended up looking very similar to the final product.
I was originally going to use a block "f" in the top left, but the script looked really good. Also, I was going to have a search button that went with the input field in the top. But after having some friends test it, I decided it was simple enough without it, so it was omitted.
And that odd cactus looking thing in the top-right of the post, yeah, that's me. Like I said, rough.

With the rough draft now in hand, I set out to create a mock-up site in photoshop (my personal weapon of choice).
A mockup usually is identical to the final product (unless I do something stupid or impossible). In the mockup on the left you will see the search button has been removed. Also you will see the menu at the top is teeny tiny! I really liked it small, but trying to fit a search-field that was readable in that small space was near impossible. So I ended up expanding it.
Also, you'll see the tags which I haven't added yet. Those will be coming next.

I guess that's all for today. I'll update some more tomorrow.

Tags: WAD(5) FollowerofJC.com(10)