Time is of the essence

As this experiment in online entrepreneurship continuities I am realizing that I made a significant oversight on the outset. I did not include the element of time in my original design/layout for this site and experiment. I now see that this is an essential factor to consider in order to better understand how profitable my endeavors are. I am currently going through and updating the site to reflect how much time I am spending on the projects. I will have to estimate for what I have already done, but in the future I will try and keep a running total to add further insight into the practicality of the things I try. 

WordPress Archive Widget: Post Count on the same line.

My WordPress theme rendered the page count for the archive widget in the side bar incorrectly.  The page count was showing up on the next line below the link for each month. This looked really tacky to me and it turned into a bit of a chore to figure out how to fix it. I eventually got it working and now the page count correctly shows on the same line to the right of each month.

My solution was to change the get_archives_link() function located in wp-includes/general-template.php on line 842 as follows:

I changed this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text</a>$after</li>\n”;

to this

$link_html = “\t<li>$before<a href=’$url’ title=’$title_text’>$text<span style=’color:#999;’>$after</span></a></li>\n”;

9/11 Update

I am ecstatic. This month I finally made some money (Hurray!!!!). All my efforts have not been in vain (well sorta). I have had some luck with monetizing my projects, but overall so far my returns are not very high at all and can in no way justify all the effort and time I have put into these projects. So far for the amount of time I have put into all this my overall income is in the neighborhood of $0.10/hour (yeah…not that impressive). But nonetheless it is a start, and I am happy with that. Hopefully with a little more promotion and continually adding additional online services/sites/apps I can up the income to a more realistic level.

My Results for last month are as follows
So far my only method of monetization has been Google Adsense

Asteroids Inc
Visits: 3446
Adsense Income: $15.6

Infobrink Blog
Visits:250
Adsense Income: $1.25

Moving forward I think these will be the next things I will try to accomplish this coming month.
-Find an additional source of monetization for both sites
-Create a HTML5 game portal
-Continue promoting Asteroids Inc

NextGen Gallery & NextGen GalleryView Plugin Problems

I have been working on another blog that I intend to include a lot of pictures in. The default wordpress gallery was not meeting my needs so I decided to try some free gallery plugins to see if I could get any of those to work for me. The NextGen Gallery plug-in seemed to fit the bill, and then after a bit more digging I found a plug-in extension called the NextGen GalleryView (yeah I know names are very similar) which did exactly what I wanted.

 After installing and uploading a gallery and adding “[galleryview id=1]” it to one of my posts, the filmstrip / carousel at the bottom of the gallery (the single feature that I was most interested in) was not working properly. The thumbnail images showed up on two different lines which messed up the whole filmstrip. Also, there was a strange black box in between each one of the thumbnails.

 In the dashboard under the NextGen GalleryView options when I would view the example / preview it appeared the whole thing was working just fine. However when I paste in the short code and try to view the blog post itself the filmstrip would be all messed up. I am not a word press expert, but I am assuming that if the gallery preview is working in the dashboard but not your posts, then it is likely a theme conflict you are dealing with.

 To me it seemed like the spacing between each image was off and a HTML bullet was being added into the list between each picture. I troubleshooted (is that a word?) the problem in the Chrome developer tools by disabling the different styles one by one to help me narrow down what was causing the problem. I tried to disable anything that had to do with spacing, margins, padding etc until the filmstrip looked like it should. I eventually found that my chosen theme (Adventure Journal Theme) was adding a margin-left to everything as well as adding a stylized bullet to all the list items on the page.

To solve the spacing problem and get all the thumbnail images on to the same line I set margin to 0px in the “frame” class which is found at about line 63 in wordpress-nextgen-galleryview/GalleryView/css/galleryview.css file

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {}

to

/* FILMSTRIP FRAMES (contains both images and captions) */

.frame {margin:0px}

To get rid of the square bullet that was being inserted between each thumbnails I had to edit the style sheet for the theme. For my theme it was located at wp-content/themes/adventure-journal/style.css. I changed

ul li{

list-style:square;

}

to

ul li{

list-style:none;

}

And viola…I now have a working image gallery with an awesome filmstrip at the bottom.  I imagine using this plugin with other themes you might have similar problems which can be solved in similar ways.

HTML5 Game promotion strategy

I have just finished my first game and am now in the process of promoting it. From what I gather, if I were promoting a flash game the process would pretty much involve submitting the game to the many gaming portals and hopefully land a sponsorship or licensing deal. It appears (when it comes to flash games) that as long as you have a reasonably decent game you have a reasonably chance at getting accepted into one of these portals and making some profit. As for HTML5 games, things are completely different. HTML5 is a new technology and there is not yet a whole industry built up to cater to the indie game developer. There are no huge gaming portals (that I could find at least) looking to license/sponsor games done in HTML5. I do believe that HTML5 is the future and will eventually replace flash, but we are not there yet, so I have to come up with a different strategy.

Initially I was trying to promote my game the same way you would promote any other website by trying to get my link in as many places as possible. I was visiting every blog that had anything to do with HTML5 games and trying to spam my link in a comment somewhere. However I came to the realization that doing this is probably is not an incredibly efficient way to go about getting more traffic. My target audience does not go to blogs about HTML5 games and then look through the comments for links to playable games. It is true that links may help improve my search engine rankings a little (maybe) but once again, I am not sure if this really will lead to more visits. When a casual gamer wants to play a casual game they usually are not sure what they want to play and are looking for site where they can browse and try out lots of games easily, kinda like an arcade (hence the popularity of the large gaming portals). They are probably not looking for a site with a single game on it (like mine).

This line of reasoning has led me to conclude that instead of trying to improve my organic search engine rankings for the game(i.e. getting a massive amount of backlinks), My strategy should be focusing on trying to get my game on sites that already have users looking to play games. Below is a list of some of the ideas I have come up with on how to go about doing this.

Social Bookmarking/Sharing (Facebook, Twitter, Google +1)

How many things have you looked at because one of your friends facebook ‘liked’ it? It kinda seems like this may be were the web is heading and I think it wise to try and tap it.

 Apps Sites

I already put the game in the Google Chrome Store. So far I have seen almost no traffic come from the listing, but I do know there are likely a lot of users there looking for games. Beyond the Chrome Store I know that there are many other apps sites/stores that I need to get listed in.

 Submit the game to the HTML5 portals that do exist

There are a handful of smaller gaming portals out there specifically for HTML5 games. They are small and just starting out, but who knows what they will become in the future. I already have gotten into one of them and they send me a few visitors each day.

 Start my own HTML5 portal site.

I am realizing that the is a need for more HTML5 arcade type sites, so why not try and fill it. I am planning on creating more games in the future so it might be a good asset to have to promote future games.

Update: my HTML5 portal site is now completed. You can submit your HTML5 game here.

 HTML5 Design/Promo sites

Due to the newness of the technology there are lots of sites out there which are showcasing HTML5 examples. I think that this is a great way to attract visitors who are looking to try something out. I already made it onto one such site and it has sent me hundreds of visitors.


Centering A Div – Quick Reference Guide

I have been designing web pages using CSS for years now I have to admit, I still have to regularly look up how to center a div. It seems simple enough (maybe I am too used to the old HTML <center> tags), but I as am constantly struggling with it I decided to write a quick reference guide.

Center a Relatively Positioned Div

.centeredDiv {
width: 500 px;
margin-left: auto;
margin-right: auto;
}

Note: You must set a width for this to work

Center Absolutely Positioned Div

.centeredDiv {
width: 100px;
left: 50%;
margin-left: -50px; /*half of the width*/
}

Note: This will center the div relative to the first parent element that is not positioned static or the <html> block if no element is found.

As I was figuring all this out (again) to write it down, I think I am realizing the reason why I always seem to get it wrong. You have to employ different strategies depending on whether or not the element you are trying to center is absolutely position or relatively positioned.

 

Source: http://www.thesitewizard.com/css/center-div-block.shtml
Source: http://www.sitepoint.com/css-center-position-absolute-div/
Source: http://www.w3schools.com/css/css_positioning.asp

AsteroidsInc is ready to go


Well at long last I think I am finally ready to release my first game. Check it out at AsteroidsInc.com

 The game was programed entirely in JavaScript using the HTML5 canvas and audio objects. It should require no plugins to play (looks like safari may require quicktime). This was pretty much the first game I have ever programed and I learned a lot and did lots of stuff wrong the first time around (and most likely still have a lot of stuff not quite right). If I write another one it should go a lot smoother. If you play it and have any feedback or find any bugs please let me know.

 At the outset I had even grander designs for the game, but I decided to try and simplify the design so that I could get the game to a releasable state sooner. As it was this beast took me several months of my free time to complete. I estimate it has probably taken me around 200 hours total from start to finish (next time I will try and keep better track of the time).

 So if you refer to my post here on how I plan on accomplishing my goal this marks the completion of step one and two (at least for my first project). I hopefully have created something useful which will attract Visitors & Links.

 Now I plan on trying to figure out the most efficient way to monetize the game and start generating some passive income from it. I am aware that it will likely be a challenge and may not be a simple task to do, but I am determined to see this through. I will keep the graph on the upper right hand corner of the blog updated to track my progress.

Little surprises for the uninitiated

AsteroidsInc is pretty much the first game I have ever programed so there have been lots of surprises along the way. Probably one of the bigger surprises I have come across so far is the amount of time it has taken me to program the menu system. I was expecting that to be one of the easier/simpler parts, but has taken me quite some time to get everything working correctly. I have tried to take a OOP approach to make everything as organized as possible, but it is still quite complicated, is requiring a massive chunk of code, and in truth has been quite boring. Quite possibly this is due to me doing stuff the “hard way” or flat out the “wrong” way (like everything else), but I cant think of any easier way to accomplish what I need. I guess the moral of this story is that sometimes the little things take a lot longer than expected. I am finding that it takes quite a bit of perseverance to push through the “little” things that are turning out to be “big” things. Hopefully the finished product will be worth it…

Along the same note, I think that focus is also becoming an important factor in bringing this project together. I keep on coming up with other projects/ideas/tangents that sound more interesting in the moment and the temptation is to work on those. However, time I have to work on this is limited and if I am ever going to finish my game, I am going to have to focus on it.

HTML5 Canvas performance for scaling sprites

Well…This is likely a nobrainer for most, but for some reason it took me quite a while to figure this one out.  In my latest game asteroidsInc I have been designing I was experiencing some pretty awful frame rates, and so I started to try and optimized the code for better performance.  I was using the JavaScript drawImage function to scale the images I was using as sprites in order to achieve a retro pixely effect.  While it did accomplish the effect I was looking for it turns out the frame rate took a big hit due to the scaling.  To improve the performance I simply used Photoshop to enlarge my images (in order to retain the retro effect) and then used the drawImage function using no scaling. The performance boost was quite significant. In hindsight it seems quite obvious that using the scaling was a bad idea on sprites and would require more resources to render, but hey…sometimes the obvious just takes a little longer.

 

In recap, if you are are trying to animate multiple objects on the canvas it appears that resizing the images themselves has performance advantages over using the drawImage to scale the images.

8/11 Update

Well, unfortunately as of the beginning of August I have yet to make a single cent in my little experiment. All of this is taking a whole lot longer than I originally expected. Good news is, my game is finally done and I should start seeing some revenue from that in the next month. I am hoping it is as simple as doing a bit of promotion, and then getting some ads up. As for my blog (this blog) it really isn’t doing so hot. Only gets a handful of visitors a day and so far has only had a single comment. The most visited post so far has the free animated explosion .gif post, which is a little disappointing because its not really that relevant to the overall theme of the blog. I guess I might need to look into to promoting the blog a little to see if I can get some traffic here as well. I will keep you updated