Monday, September 1, 2014

Website Press Page Finished - Custom Gallery instructions

I just got done with the new Press Page for the new website.  There are some neat things I'm doing here so I figured I'd share some of it for newer web designers and developers who might read the blog.

The first is that every page is dynamically loaded, so when you click a button link, the page is loaded from a separate HTML page and then included in the main div that stores the page information.  This means there aren't many redirects which saves resources, but also means you can't link to pages directly, you have to navigate to them.  I'll have to look into adding a way to load a page with additional header information.

The second cool thing, (a little thing, but I like it a lot) is creating a fixed position menu bar for the Press page that sits at the top of the page, but won't overwrite the header image.  I'll show the code for this as well.

And the final thing is a custom gallery for the Press page that loads images and titles from an XML page and displays the images in a miniature gallery bar and then when they're clicked displays them and the title in the main frame.

Dynamic Loading

So for each page, I'm dynamically loading the HTML into the main "div" that holds all of the page information.  This div sits below the header and is emptied out and replaced with current page information on button click.

Here's a snippet of what the button is doing when clicked to load the Press page:


I use JQuery to load the page in and then when it finishes, I add in the functionality for the Menu Item slide panel, and the Gallery.

Sliding Menu Panel

This brings us to the next neato thing, the Sliding Menu Panel.  As you can see below in the next two screen shots the menu panel sits below the header, but as you scroll down, it locks to the top of the screen.

Sits Below Header

But Locks to the Screen as you scroll down

This isn't tremendously complicated, but it involves adding a little bit of JavaScript in order to get it working correctly.

As you can see in this snippet, I'm changing the CSS dynamically depending on the scroll location of the page.  And if my current page is not the Press page, I remove the scroll listener so it doesn't affect anything I don't want it to.


Custom Image Gallery

The final cool thing I did for this page is create a custom image gallery.  I wanted to be able to add images quickly and without touching the JavaScript or HTML and I wanted to include information with each image (such as a title), so I'm storing the image information in an XML and retrieving it when the Press page loads.

In the second screen shot above, you can see the gallery as it's loaded.  Each miniature image updates the main image frame when clicked.  (Also you'll notice I customized the scroll bar's CSS, there's a nice article on that here).  

First let's take a look at the XML structure.  It's not very complicated and you can add whatever kinds of data you want and you can use JSON if you prefer, but I think for simple things like this, XML is much easier to read.

Once I had my structure set and my XML page filled with all the titles and image locations I needed, I then wrote a simple script to load in that data (in the function loadGallery() that you saw earlier).

Here is the script, including the function I used to update the main gallery frame:



I won't go into too much detail, the script uses an AJAX get request to grab the XML and then runs through each image's data to create a list with each miniature gallery item, including an on click function to update the main gallery frame with the image when clicked.  Then I get the first image from the XML and load that into the larger frame.  Then it's just CSS to get it looking right.

These are just some little tips and tricks I thought you might find neat.  The site is coming along great, all that's left is a bit more security checks (like encrypting passwords in my database, HA!) and the Games page.

Of course the Games page will have links to pages with information about each game, so that's still quite a bit of work, but it's all relatively simple stuff.  The Press page was the big one for styling and formatting work, but it's looking alright.

Also, the website will release with a brand new game to try out!  It's a VERY rough demo, but I want to get some feedback on the game before moving further with it.

That's it for now!  I'll keep the blog updated as I finish up the website and get it up and running.

Cheers,
-Jason


Saturday, August 30, 2014

Web Security on the new website

Today I'm spending some time on implementing some web security for the website.  On my to do list (Trello is a great resource btw)  I have double checking the SQL Parameters to make sure they're parameterizing inputs properly, adding input scrubs on the server and client side to stop XSS attacks, and a few other things that I'm adding to the site.  Also I need to encrypt all my password data as well, but that's not on here yet as you can see below:


There is a lot to do for security alone, and I still need to add my press page, the games page (and all the game pages for each game, and build in an automated e-mail system.  The e-mail system I might leave until I start integrating the page into host gator but we'll see.  I might have to use their SMTP since I don't have one set up locally.

It's fun and coming along, and I'm glad I have a bit of time this weekend for labor day!  Work got off early yesterday and the Professional Services team went out kayaking Thursday and got off early as well.

It's been a pretty relaxed week, but we're about to hit the busiest time of the year, so the rest will be well used.  

That's it for now, just another small look at the website and how it's coming along. 

Cheers!

Saturday, August 23, 2014

Website Updates, RSS Link to this blog, new test game in the works.

So I've done a little bit of work to the website, namely pulling in the RSS feed from this blog and displaying the four latest posts on my blog page.

And I'm always changing up the formatting trying to find a color scheme I like for the page.  So any feedback on whether it's too cluttered or not exciting enough etc, helps.

Here's a screen shot of the blog page, pulling data directly from this blogger site.


Also I've begun working on a new browser based game.  The first iteration will launch with the new website under the games tab, and I'll probably keep the game javascript/client side (which lets you cheat super easily) for the first few iterations until I figure out if the game is fun or not before building in server side verification.

The game is going to eventually be a mobile game, and is a take on pattern recognition.  It's called Anomaly, and that's all the teaser I'll give for now, but as I get free time I'll try to finish up my website and get that info out.

That's it for now, the website is slowly coming along as I have bits of free time here and there to work on it.

Cheers!

Thursday, July 17, 2014

New Website in the Works

Well it certainly has been tough setting aside enough time to blog.  It's been the farthest thing from my mind lately!  Lot's has happened over the past few months, I've traveled, I've loved, I've lived, I've climbed mountains and well... it's pretty hard to top climbing mountains while staying moderately truthful about my past few months.

Anyway, I'm working on a new website, full with registration capabilities, some fancy JQueryUI modals, and all sorts of goodies.

It's still a LONG way out, I need to link up some MYSql Databases to store users in, build in some anti-spam functions (thinking about doing this custom, captcha is ever so annoying), and then actually add in all of the CONTENT for the website.

Right now I have the bones of it up.  It's going to use JQuery to dynamically load the html into the main page, so there's really just 1 main page that will be updated.

Here's a sneak peak at what it's looking like so far:


I'm definitely going for a sleeker look but I'll add some flair to it later and spiffy it up a bit.

Once the website is finished and up, I'll probably start working on my next game.  I'll likely just release a tower defense for android/iOS in the vein of SBX: Invasion, but that's a LONG ways out and who knows what will change in the meantime.

Anyway, I've got work in the morning so I should probably get some sleep.

Cheers!
~Jason

Wednesday, July 2, 2014

Vacation! Life and some loose ideas for next projects.

So first things first, I ended up canning my review of ESO.  I got partway through and lately I've stopped  playing so it hindered my research into giving a good quality review of the game.  The game is good, but I've been busy and I'm honestly just looking for a more sandbox style MMO.  We'll see if EQ:Next is ballsy enough to be a true sandbox world that gives the player unparalleled freedom to be the type of player they want to.

Anyway, at the moment I'm on vacation out in the mountains of Colorado, which is giving me some time to catch up on my blog and relax a bit.  My consulting projects at work are ramping up quickly and I have 3 development projects as well so I've been extremely busy and tanked out during the week, and thus haven't spent any time working on my own projects.

I do have a few ideas I've been knocking around, first is rebuilding my website to be a more solid website and include a database of users to register with my website.  I do need to get a better version of Visual Studio on my home machine, but likely I'll rebuild the website in C#.NET ASPX pages with a couple html pages sitting on the front end.

I want to make my website a very interactive, fun place for people to go to and check out my projects.  So that's the first task I need to start working on.  The second is my next game project, which will likely be a mobile / web project.  I'm thinking of making either a traditional Tower Defense in the SBX Universe, or possibly combining Tower Defense with an RTS/MOBA style game.  When I say MOBA I mean imagine League of Legends without any champions where you build your towers and spawners and the "minions" have automated AI based on the type of ships you build.  Just a loose idea, I'd have to iterate on it a bit to get a solid working plan, and I might release a traditional TD first and then make that style of game after.

These are just some of the ideas and plans I have at the  moment.  My programming knowledge in C# .NET has been improving quite rapidly as I have 3 projects that are entirely in C# or use C# as the web application back end language, so I've had lots of opportunities to learn in that area.  Next will be using Java and Eclipse as I'm less comfortable with those compared to VStudio  and C#.

That's it for now, I know it's been a while since I've posted.  I'll likely do a 4th of July Sale on Indie Game Stand so stay tuned for that!

Auf wiedersehen,
Jace

Sunday, May 4, 2014

May the Fourth Be With You Sale!

It's been QUITE a while since I've posted but things have been crazy busy (which is a great thing.)  My new job is going great so far and I'm learning new things about web development every day which is a lot of fun.

Today is a special day.  For me it is an especially special day as it is both Star Wars Day and my first anniversary with my wife.  So I decided to throw a special sale of SBX:Invasion at Indie Game Stand for just 99 Cents!  That's a whopping 80% off!  Nifty.

I'm also going to be writing up an extensive review of Elder Scrolls Online as I've been playing it a bit (some even with my wife!) and it's a lot of fun but there are some glaring issues I want to touch on and how they could be improved.

It has been nice to distance myself from game development for a bit to reset and not become so attached to my projects.  It's good to become more objective when viewing my own work to learn and become a better designer.  I've been staying very, very busy as well so there hasn't been much time to work on my own projects but I'm getting the itch to design something again and work on something creative.

Likely I'll start on some smaller projects (perhaps an Android App now that I have a phone!) and try to finish a few more small games.

Stay tuned for an ESO review soon, and go pick up SBX:Inv at Indie Game Stand!

Cheers!

Friday, March 21, 2014

New job, the end of my time as an Indie and , ESO out soon!

Things have been going well lately.  I'm stepping back from some of my projects to give myself some time and room, particularly because I got hired on as a Professional Services Consultant at Experian Data Quality.  My new job starts this Wed and I've been enjoying my last couple weeks relaxing, playing with my dog and redditting (a lot).

I plan to come back to my projects on the weekends eventually, but I think a good break will give me some space to think about where I want each project to go and what I want to do with them in the end.  Being an indie has been a TON of fun and opened me up to a world I'd never experienced before, but for now it's time to get a stable job and start planning for the future.

So, things have been going great and I've got an exciting career ahead of me in systems development and consulting and it's pretty exciting.  PAX East is also in a few weeks and The Elder Scrolls Online Launches next weekend.

I convinced my wife that we should play ESO (Elder Scrolls Online) together when it launches and gave her a friend key to try the beta out.  She's not much of a gamer, and has only dabbled in making characters on some other games, but she really liked ESO so we'll be playing together on the weekends as an extra hobby to do together.

I'm actually surprised at how much I've enjoyed ESO so far, I went into the beta weekends thinking:  "Eh, maybe this might be good but we'll see." and didn't have high hopes for it, but the immersion factor has really drawn me into the game as well as the freedom to create neat builds and customize your character to how I want to play.  It's kind of a breath of fresh air.

Anyway, the updates to the blog will likely be slower as I'll be working full time, but I'll keep things updated about when I continue working on my projects and other things that come up as well.

Cheers,

Jason C.