Understanding and Stopping Referrer Spam

Google Analytics is a great tool for measuring your websites impact upon visitors, and analyzing how traffic moves through your website. Sometimes your Google Analytics reports can be spammed with fake referrals, and misleading data.  Check out this post I wrote over at Smart Solutions to see how we combat referral spam for our clients.

HTML5 Video with Video.js

HTML has been the language of the web for over almost 20 years with the first standard being accepted in November of 1995.  Many of us have been using the language even longer and throwing around <img> , <a>, and <p> tags are second nature.  In the past it has always been hard to integrate video on the web without the use of plugins.  At some point most of us have all been prompted to download the latest version of Flash, or update Quicktime to enjoy a video clip.  With the latest HTML specification there is now a <video> tag that allows for native playback of video in the browser.  This addition will allow for better playback performance, and will open up new and exciting ways of interacting with video on a web page.

What is VideoJS?

VideoJS is a JavaScript API for accessing the HTML5 media library.  There are many HTML5 video players now online, and many more are popping up every day.  I chose to work with VideoJS for now, because it was the easiest for me to understand, and I really didn’t feel like experimenting with any others at the moment, although Popcorn.js is looking pretty “butter”! Using the VideoJS API also adds some functionality to the player that some browsers have not implemented such as fullscreen, subtitles, and it also provides a consistent JavaScript API for HTML5 and Flash.  Another great benefit of VideoJS is that it is open-source and CDN hosted.

 An Example

I began researching HTML5 players when my homie, Spencer,  at Umami Media filled me in on a project he was working on for a client that is ready to start experimenting with HTML5 video.  We were both interested in the control and functionality of the player.  More specifically, we wanted to know if the playhead could be moved, or if we could pull meta information out of the video to be used in scripting.  I decided to work on a small demo that night, and was able to rapidly put together a quick demo.  VideoJS makes it easy to access most of the functionality we were looking, and with some custom JavaScript and jQuery you can do some pretty amazing things.  Please click the link below to open up the demo and “play” around.  The demo shows how  information such as duration, play time, play head location, volume, and dimensions can be pulled from the player and displayed within the HTML.  All of the players controls have also been built in HTML, and can be used anywhere on the page.  Make sure to click the “Switch Source” button to see the video changed and play on auto.  If you wait for 8 seconds on the second video (The Google Vid), you can see how I used some jQuery to animate certain parts of the player at specific times in the video.  WOW!  That was really cool, and fun to play with.  Let the video play until the end and you will see an HTML <div> pop up letting you know the video has ended.

Click for Demo

Conclusion

It is easy to see why HTML5 video will play an important role in the future of the web from just this simple demo.  There are currently being applications built with the spec that allow for some truly amazing interaction.  Check out this Sketchpad Walkthrough built with another HTML5 JavaScript API called Popcorn.js.  The demo shows how the player can manipulate the HTML and generate a code walkthrough that is in sync with the media.  DOPE!

Keep your eyes open, because we are going to see an explosion of this type of video interactions in the coming years.  HTML5 may not be standard quite yet, but that shouldn’t stop us from playing with and pushing this technology forward.  I am definitely looking forward to the future of the web, and technologies like this will surely sharpen that vision.

 

More Cats, Camping, Collision Detection, and 2.5D w/ ImpactJS

Well, I am still at a questionable position in developing a 2.5D game with ImpactJS.  The system is pretty rigged and I am still running into bugs with collisions and gravity.  Also, the backgrounds are way too large at this point.  I may just use this as a side project and begin focusing more on just a 2D side scroller.  In any event I have learned a lot about ImpactJS, and am impressed with the engine’s abilities.  I plan to continue developing with it and feel that Dominic will continue to improve the scripts.

Sprite Work

The past week I spent a lot of time manipulating ripped sprites from Scott Pilgrim.  Again, these tests are just for demo purposes.  The game’s sprites and backgrounds were all created by Bryan Lee O’Malley and Paul Robertson.  I was able to get more of the first level entities in and it feels more 2.5D-ish now that you can walk behind all of the level’s entities.

Collision Detection

Two weeks ago I started playing around with dynamically creating the player’s boundaries and the collision map.  Here is an example of how you can load in a level’s attributes:

 

As you can see, it is also possible to load in the camera’s position as well.  I’m using a camera that works similar to Shaun Inman’s , and uses the code described HERE.  This works reasonably well and you can have multiple boundaries for an area that are dependent on the player’s Y position.  The last value, slope, allows you to create a gradual sloping boundary to the next point/area.  One bug that I am trying to squash is the transition between each area.  Usually, the player continues to press right or left to navigate.  For some reason the game’s continuous update cycle known as the game loop, is not detecting the player’s position and keeping them inbounds if the left or right button is continuously being held down when transitioning between areas.  I think it something that can be overcome, though.

I was also able to add animations when the player and the enemy receive damage.  Ramona’s is just her crouch sprite so it looks a little ridiculous, but conveys the feeling until we get our real sprites in. It took me forever to get the player’s “received damage” sprite to continue animating.  I eventually made sure no other animations were being loaded for at least a second after the collision.

Closing Up…

Well, I am actually not going to post the new version this time, as a friend let me know that he was having trouble loading the scripts last time.  I know it is taxing the client with the huge sprites, and possibly some broken code.  I am going to work on some

things a little more before posting again.  Hopefully, next week…

So, it’s actually starting to look like a real game, rather than a moving heap of crap.  I may end up throwing away most of this when working on the real game, but I have taken away many lessons.

In other news, I had a great weekend with my family over in Corvallis, OR.  We celebrated my brother-in-law’s recent graduation and ate some amazing BBQ. Of course, we drank more than a few Oregon beers and ended the night by the campfire.  On the way home we obtained a brand new kitten that is now cat number two on our Rescued Kitty Team sponsored by Kids, Clutter, and Chaos.  We also stopped by Odell Lake to drop off a birthday gift for my nephew, and thank him for rescuing our new family member.  Now, I am all ready to go for the week ahead.

Peace and love until next time!

 

 

Google Analytics for Facebook Fan Pages

I was very excited to release our Facebook Fan Page to the public in order to showcase our work to fans and hopefully draw in more fans through Facebook advertising. Unfortunately, I was aware of the limitations that Facebook Insights provides for fan page administrators. Facebook Insights can display demographics and interactions on your pages, but only for fans. Google Analytics is a lot more comprehensive and easily customized for specific tracking. Another issue is that only administrators can view Facebook Insights limiting who we can allow to see our fan page stats.

Read more at JECA!