Rollin' with JQuery

After doing as much research as I could on jQuery and the things you can accomplish with it, I've decided that my site framework needs to be redone.  It will not look much different to the end user, but it will function in a much more user-friendly manner, and the controls will mimic those of an app rather than a website.  I've been brainstorming up tons of ideas for the site, and I've got about a half-a-dozen I'm dying to get started on, but for now, I'm starting with the framework.

The layout for the index page will look pretty much the same, but the content will be layed out a bit different.  I'm compressing the layout by one column, and adding panels that expand/contract from the right and left sides.  I'm doing a terrible job explaining this with words, so we'll go with a screen of my concept:

The new login/registration panel

The above screenshot shows the panel I was trying to describe.  There will be a welcome message to new visitors at the top, followed by an expanded login sub-panel.  The registration and "Add A Game" panels can be expanded by clicking the appropriate header, and the login panel will collapse when needed.  

When you click to preview one of the games/demos/articles/etc., the entire right panel will hide, and a panel on the left with more details will open up.  Closing this left panel will re-open the right panel automatically, eliminating the need to adjust the content in the center.  Since only one panel will ever be open, and one will always be open, the "content" in the center of the screen will only shift position to the left and right, but will never need it's layout updated.

Concept work for the upcoming 'content preview panel'

I intend to use this system for my search page as well. I've come to the realization that the search system in this website needs to be absolutely top-notch, since chances are it will be the resource most used by members.  Granted, browsing through the featured section is nice, but when I'm ready to search for a game, I want to put in what I'm looking for and get easy to navigate results.

The updated search system, however, is for a future blog post.  As are all the other ideas I've added to my To-Do list.  Needless to say, jQuery will be changing this site drastically, but it will be a much easier to use website in the end.

Completed (Beta) Account & Profile Settings

So I've completed the systems for the account & profile settings for members.  The forms work exactly the way I want them to for now, and the workflow for managing everything is pretty stream-lined.  I finished up my avatar image uploading code, and the system now offers the option to click the button to browse for a file rather than opting for the drag & drop interface... I've tested this on a Windows 8.1 tablet and an Android tablet and both work exactly as expected.

Final (Beta) version of the profile & account settings systems

The profile info form is almost completely dynamic, meaning I can add any number of inputs and textareas, and as long as I name them using my system, then they will function with very little effort on my part.  This is going to come in handy with future forms:  when I manage an Indie game profile that I'm working on, I'll be able to drag and drop 10 images from my desktop onto the site itself and begin organizing them almost immediately.

I'm excited to see systems start coming together at a faster pace now that the registration and login systems are nearly complete.  I haven't decided when I will make registrations available to the public yet, but the first priority is to continue adding content while adding the ability for future members to add content as well.

S**t Just Got Real

I've been working the same job for quite a while now.  I haven't had any reason to learn new technologies since the job has remained pretty much the same.  I've dabbled with Unity3D and SmartFox for fun, but beyond that, work has pretty much been the same-old Coldfusion work.

Since I'm starting from the ground up with foreachgamer.com, I decided to start looking into new techs that could help improve my website.  That's when I decided to give jQuery a shot.  I'm blown away by the ease-of-use and the power of this system.

I will never program websites the same again...

Avatars Added To Gamer Profiles

After finishing up my work tonight, I decided to make more progress on foreachgamer.com.  Using jquery, I've created an avatar system that allows you to drag & drop any JPG image onto the 'profile settings' of the page... from there the system will automatically crop, resize, and generate thumbnails for use with your account.

Preview of the new avatar system, complete with drag & drop interface

I will be adding code tomorrow to allow a file browsing window to open when the image is clicked for those who prefer the older method of file uploading.

For now, it's time for some desperately needed sleep.

Updated Profile Settings & Various Small Fixes

I started my work on foreachgamer.com today with fixing a small inconsistency that has been bothering me.  As you can see from the image below, edges on the right side of the page were not lining up correctly.  It wasn't always obvious, but when it was it was hard to ignore.  I've since fixed this with a little touch-up CSS work.

The CSS layout bug that I couldn't ignore any longer

In keeping with the theme of little things that were bugging me, I decided to change how header titles are displayed as well.  Gone are the bright and somewhat-distracting '{}' wrappers, replaced with grey brackets that are barely noticeable but still highlight the header.

The new header-wrappers are much less distracting

And I liked the look of that so much, I decided to use a variation of the same styling on my account settings page.

Updated account settings page that ties the whole theme together

Time to stop fartin' around and get some more in-depth programming done or this registration system is never going to get used by the public.

Related links: 

Official Website: http://www.foreachgamer.com/

Offical Twitter: http://www.twitter.com/foreachgamer

Account & Profile Settings

I have finished the registration system for foreachgamer.com, bu ti have not posted it yet since there is literally nothing for a new member to do besides browse Un-Indie games, which they can do without registering.  So, before going live with registrations, I'm getting some more content done for the site.  So far this has included an account settings and profile settings system that I am working on.

The new Account & Profile settings system

Once this is completed, I will be putting together a simple profile for the individual members, as well as working on a rating system which will allow registered members to start building a taste-profile by rating Un-Indie games.  This will aid the system in providing members with Indie games that are suited to their play-style and themes.  

The registration system was, as is always the case with registration systems, long and tiring.  Forgotten password scripts, validation, error checking, confirmation emails, etc., etc.  That being said, I'm very happy it's done, because once it is live, all the content I create from there on out will be getting used by gamers.  And that's what this whole thing is all about.

Login/Registration Nearly Completed

I have just about completed the login/registration system for foreachgamer.com  Right now I am in the process of putting the finishing touches on the email confirmation system.  After that I've got another round of tests to run, and if all goes well, visitors will be able to register for the site.

Preview of the upcoming login & registration system

Once this is completed, I will be able to very quickly build a system that allows you to rate and/or favorite any of the current Indie & Un-Indie games, so that I can start building taste-profiles for the users.  This will allow the site to recommend games based off of your personal preferences, games you already enjoy, and what platforms you have (ie. XBox, PS4, etc.)