Battletech Live

Online, Turn-Based Battletech – Development Logs

Positive and Negative Site Design

A while back, I came across an article that talked about various web design methods and how certain practices should be avoided, and with the modern state of the Internet, some things work better than others.

  • Visitors should not be made to wait.  There is nothing wrong with a website being robust and informative, but the content should be scaled in such a way that the visitor can begin interacting as quickly as possible.  Conventionally-built websites are often divided into multiple pages so that the site can be loaded in segments.  If a user doesn’t have an interest in a particular page of the site, don’t make the visitors wait for it to load.
  • Site navigation should be intuitive.  If menus are used, the tree depth should be as shallow as possible and labels should match the content to which they lead.  Opening a menu should never obscure content elsewhere on the page.
  • Websites should not require complicated installers in order to function.  While some sites rely on technologies such as SilverLight or Flash, but once these services are present on a computer, the website should just work.  Visitors should not be required to download and install new updates in order to activate new features.
  • Eliminate browser navigation.  Visitors should not need to use the back, forward, or refresh buttons, ever.  New content should be delivered automatically and invisibly.
  • Save, Update and Apply buttons suck.  When a visitor adjusts preferences, settings should take effect immediately.  There’s no sense in making a visitor click an extra button for changes to take effect.  Changes should take place at the moment they’re selected, or in such a way that the changes are invisible to the visitor.
picture-1

Email Inbox

In Operating Systems as well as websites, I really dislike configuration panels that appear over the content of the page and require me to click a separate button to close them.  Although some configuration panels are necessary, they need to be as unobtrusive as possible.

The application is set up so that every five minutes, it checks for new mail.  Even if the email panel is not visible, the application will notify the user of new messages.  It contacts the server, checks for any message addressed to the user as well as any message from the user so that it can populate all incoming and outgoing boxes.  Messages are segmented by folder type such as Inbox, outbox and others.  From that point, they’re sorted by age so that when the user clicks on the Inbox, they have a selection for messages received today, yesterday, this week, last week, this month and older.  The next time it checks for new messages, it sends a list of the message IDs and the folder in which they reside so that it can compare with the server.  If nothing changed, no new messages are retrieved.  Only when there’s a difference, does it retrieve changed and new messages.  It then replaces the existing changed messages so that everything stays in sync.  When a message is deleted, it gets sent to deleted items as a system should but when the deleted items is cleared, the messages get sent to a special table type that holds onto them until the next mail synchronization.  At that point, they’re flagged on the server as trashed and no longer get updated to the host computer.

picture-22

Email Preference Pane

Buttons along the top of the page provide for compose, reply, forward, delete as well as others, which enable the appropriate options.  Clicking on Preferences or Help, narrow the width of the reading pane and fade in the selected panel to the right.  In Preferences, for instance, the user has the ability to enable POP mail, forwarding email to the configured email address.  The user must then add the users from which they wish to allow forwarding, or select an option of allow all.  Another available option is to flag certain users as spammers, automatically sending messages from those people to the junk mail folder.  Mail filters will be put in place that will allow users to send messages with certain keywords to folders they specify.  When each selection is made, the changes take effect immediately and they can leave the preferences pane open in order to monitor the effects.  When they’re satisfied that everything is working, they simply click the same button used to open the panel and it closes, returning the reading panel to full width.

Advertisements

February 27, 2009 Posted by | Project Development | Leave a comment

Structure of the email system.

mailfullcolor

Folders along the left and mail functions on top. The accordion panel will list messages received within specific timeframes.

Compact mail composition window.

Compact mail composition window.

I’ve spent a lot of time over the last few days getting the email system to be a little more refined.  Each of the mail buttons along the top of the page have a color and a monochrome version while a couple have alternate states, such as junk or not junk.  Although each button remains visible, when a particular action is not available, the button will lose it’s color, will not change to the hand cursor when the mouse is over it and loses it’s ToolTip.  For example, if a user doesn’t have an email message highlighted, most buttons will turn off because reply, forward, delete and junk can’t be performed.  One thing that is less conventional, when a user sends an email message to someone else, they can specify for the message to be private.  When this happens, the recipient of that message will not have the ability to select forward or reply to all, yet reply, delete and junk will still be available.  When selecting Search, Preferences or Help, the message reading pane will be reduced in width, with the selected component made available along the right-hand side.  Closing that panel will return the message reading pane back to it’s former width.

The last item in the folder list is Public Folders.  This will act as a window into the forums.  When a new category in the forums is created, it will appear as a new folder in Public Folders.  Members will then be able to read and reply to existing threads as well as compose new threads.  The support forums will still exist as their own separate component due to the space that the rest of the email panel takes up and the fact that guests will have partial access to the forums but no access to email.

In the upper-right corner of the page, is a size toggle.  On a full-size email panel, this won’t serve much purpose, at least for now, but it helps to enable a quck-post function.  When the player is going about their business, they’ll be able to click on a quick-post button, which will reside on the open bar for the IM panel.  This brings up a more compact version of the mail panel.  It’s actually the same window with certain options turned on and others turned off.  This can be useful if the player is busy doing other things and doesn’t want a full-size email window taking up all of the space.  When they send the email, the panel will automatically close but if they want to access the full-size panel to check on new messages or to reference existing email messages, they can click the toggle button to return it to full size.

I set up the tags that references the PHP script and over the next few days, I’ll work on writing the script necessary to retrieve new messages and populate the mail system and get it to work the way a normal mail system should.  I will also be enabling POP mail on a limited basis.  Through Preferences, users will be able to select specific users, if any, for email forwarding.  With this turned on, instead of receiving a message that new mail has been received (also user-selectable), the message will be forwarded directly to the external email address they have on file.  I may also set up alternate email addresses so that users can receive notifications at multiple addresses.

From February 28 – March 14, I will be taking a break from coding while family is here to visit and I’ll continue writing afterward.

February 25, 2009 Posted by | Project Development | Leave a comment

More detailed information for Instant Messaging

Other than a screenshot, today’s update has little to do with Battletech.  Instead, I will rant about experiences with DirectTV.

On February 9th, my roommate and I got DirectTV setup, to be bundled into our Qwest phone and DSL service.  The installation guy showed up when he was supposed to and got everything set up the way it’s supposed to be.  We have the HD DVR in the living room and a standard-def receiver in the basement so we have something to watch when we’re reloading.  A few days later, we got the paper in the mail to detail the installation, listing the dish we alread had $0.00, the standard receiver $0.00, the HD DVR $199.00, the instant rebate $0.00, installation, delivery and taxes $0.00.  Total cost: $0.00

For a week, all was good.  Then last night, I get a phone call, a recording stating that they haven’t received payment yet and a reminder that we need to pay the bill within five days to avoid late fees.  wtf?  We go online to see what’s going on and find the front page lists us owing $84.27.  wtf?  When we look at “View All Orders”, we find a statement that reflects the paper will we received in the mail.  But, if we look at “Activity Since Last Bill”, it looks very different:

picture-4This morning, I started by calling Qwest to verify where our DirectTV bill is going to come from, them or DirectTV.  He stated that when everything gets finalized, the DirectTV part will be included as part of our Qwest bill.  The guy was very cool, explained everything from the Qwest end and asked me about work, being familiar with Cabelas.  At the end, he suggested I speak with DirectTV, just to make sure there isn’t any confusion on their end.  I gave DirectTV a call and got a recording.  When it asks to explain what I’m having problems with, it doesn’t understand “I want a human being” but it does know that “I have questions about my bill” means “I want a human being” and transfers me to a representative with an accent. So, I start describing the above, pointing out that I’m not having any problem with the DirectTV service, I just want to clarify the bill and make sure we’ve not been billed twice or for something that we don’t have.  The phone goes silent.  I wait a minute and say “I just want to make sure the bill is right.”  Silence…  The representative then asks, “Do you still have the error message on screen?”  I explain that I don’t really have an error message.  Service is fine, I’m calling from work and just need to figure out the billing records.  Silence…     She then asked “Have you tried unplugging the receiver and plugging it back in?”  Silence…    I didn’t know what to say at that so I just hung up.  We’ll give it a shot again tonight after work.

picture-5

February 17, 2009 Posted by | General | Leave a comment

Looking for ways to speed up Flash.

On my nootebook, a 2.4GHz Core 2 Duo, loading Battletech Live is pretty quick, but on my Ubuntu machine, a 2.2GHz single-core system, it can take a bit of time depending on whatever else I’m doing.  I’m looking for ways to reduce the overhead and make things load quicker.  Everything I have so far is called into existence when the page loads with some parts of the site simply hidden behind viewports.  Server calls take place according to what state the site is in.  So, the idea will be to take things a step further and create some components programatically instead of coding them at design time.  Hopefully, this will speed things up as there will be less controls constructed at a given time.  If done right, and while eliminating references across components, panels can be created when the user clicks on an activator, then slid into position and destroyed when a user moves on to another area.  Considering the current interface is less than 10% complete, this is a very important thing.

February 12, 2009 Posted by | Project Development | 4 Comments

Personalized Avatars now available.

I’ve gotten a few changes made so far this weekend.  In the messenger panel, I set it up so that as long as the page is up, the member set to active unless they specifically choose otherwise.  Previously, when the page loaded, it set the member to active, five minutes later it switched to idle and five minutes later it switched to offline.  In the end, each time the member navigates to a new panel, the system will register it as activity and update their online status.

avatar

Click to view full-size image.

On the members information page, the avatar selection panel is in a more usable configuration.  The page lists thumbnails of avatars, eighteen at a time, along with the title of the image, the user that uploaded it and when it was last updated.  Members now have the ability to change their avatar, which reflects in the Instant Messenger panel.  I will eventually have filters in place so that members can sort the avatars by a number of criteria such as male, female, cartoon and various keywords which will enable a search field.  Presently, I’m researching the Cover Flow system used in Mac OS X, hoping to enable it as another way to browse through the avatars.

Another planned feature is to allow image uploads.  Members will be able to upload any resolution image they want as long as it’s below 16MB.  After loading, the image can be scaled up to 192 x 192 if it’s smaller or if the image is larger, the member will be provided a viewport to resize and crop the image to the requisite 192 x 192 resolution.  Fields will provide for title and keywords.  I’m anticipating that I’ll eventually need to put an adult filter in place because I won’t have control over the images being uploaded and I don’t want the hassle of moderating them.  All members will have the ability to report images as inappropriate for general viewing, which will send me an email that the image needs to be reviewed.  If it should be an adult image, I can change it’s status or if it’s something dumb like someone trying to post advertisements, I can delete it outright.

February 7, 2009 Posted by | Project Development | Leave a comment

Instant Messenger shaping up.

I’ve been working on the Instant Messaging system over the last couple days, when I’ve had time and it’s starting to come along.  I wanted to put the member avatar on the dataGrid lines but the space it takes up is a little too impractical.  At the same time, I don’t want to have a lot of information displayed on any given lines or to clutter it up with a bunch of buttons.  I then thought of toolTips and was soon amazed at how difficult it is to find free information on how to build custom toolTips or to embed images within them.  When it finally came down to it, I decided to cheat.  I created a small panel to contact the information I want and set it up to activate with the mouse rolling over a given line. The dataGrid is set in such a way that it automatically grows by 18 pixes with each new member.  When the list finally fills the panel, a scrollbar is automatically added to the right-hand side and the dataGrid narrows by 15 pixels to accomodate the scrollbar.  Hovering over the left-most column, brings up text to indicate what the rank is, rolling over the name shows something similar to the image below, listing the username, real name and join date.  The plus symbol is to add the member as a friend and the color indicator states whether the member is online, away, busy offline, etc.  Three more icons will be added to the left of the plus symbol, one to initiate a standard chat session, one to invite to a group chat and one to send email.  Even though these buttons will be present, not all of them will be active at all times.  For instance, if a member is offline, you can’t invite them to a chat session, but you can send them email.

Moving over to the online tab, anyone who is offline will be excluded from the list, the friends tab will show only those who have accepted a friend invitation and the plus symbol will be replaced with a minus in the event you want to kick one out.  The Merc Unit tab will list only those players with whom you share an affiliation.

UPDATE:  I have a new example posted.  The rough-looking plus symbol is gone.  I example below should give some indication as to what is possible on a per-user basis.  I’m the only one logged in at the moment so there is no one available to chat with, although I can send offline mail and I can send friend requests.  However, those two options are disabled on my line because I can’t send myself email or make myself a friend. That would just be strange.

February 5, 2009 Posted by | Project Development | 1 Comment

Restructuring of the Instant Messaging system.

Lately, part of what I have been doing at work is organizing documents to help relay to our Windows support department, what Macintosh and our Creative employees use.  For Instant Messaging, we’ve used Adium for a number of years, allowing simultaneous connects across many different servers.  More recently, we began using Spark, a similar application with wider compatibility.  Today, I put together an array of screenshots and descriptions for the features of each application.  While not really visible to the public, the IM portion that I have running, is pretty crude.  I plan to rework it so that it’s more transparent to Battletech Live and to look and function a little more like Adium.  Due to tight space requirements, several functions will use color-coding for notifications, such as online status and read receipts.  Simple text chat will be brought online first, then multi-user communication, followed by chat rooms, file transfers, offline mail, voice chat, video conferencing and a skinnable file browser, a video and MP3 player.

The following screenshots can be used as examples:

http://users.bostasp.org/adam/adium.png

http://gedmaheux.files.wordpress.com/2007/06/adium_full.jpg

http://www.gnomepi.com/random/AdiumHUD2.png

http://bl4ck-17.deviantart.com/art/Adium-Black-Glass-53833850

http://sixsixfive.deviantart.com/art/LightGrey-for-Domino-104888099

http://jaj43123.deviantart.com/art/Come-Clarity-Dirty-83299437

http://img149.imageshack.us/img149/7790/desktop022508qh3.jpg

http://dognamedtruman.deviantart.com/art/Glosstop-100692395

February 2, 2009 Posted by | Project Development | Leave a comment

Development Schedule Resumed

I got moved into the new house on January 9th and spent the next week or so working on the house, helping to set up the washer and dryer, replacing a toilet, running network cables, covering windows and sealing holes in the heating ducts.  Since that time, I’ve gotten a little lazy, sitting in front of my PC playing Guild Wars instead of doing any programming.  Today, I’ve finally pulled myself out of the lax state, and am again working on The Mech Lab.  I got logged back into the website today and found that a few more people have registered accounts.  While that’s good to see, it makes me feel bad that I don’t have more of the game up and running.  When I’m not at work, I’m going to be working on the site, continually, until The Mech Lab is usable, then work on a few of the more visible aspects, beginning with Instant Messaging.

Thank you for your patience.

February 2, 2009 Posted by | Project Development | 1 Comment