How to setup a Rapberry Pi

Back Story:

Our household has been cable free for a little over year now. We currently have an OTA TV antenna setup as well as Netflix, however I've always kept my ears open for new sources of content. My coworker started raving about some of the plugins available for XBMC (now called Kodi) and how you don't have to torrent any content, you just stream it to your computer. It wasn't until the news about the Canadian Copyright Modernization Act early this year and ISPs mailing letters to torrenters on content owners behalf's that I came back to the XBMC idea... and I've been in love ever since.

After awhile, I was getting annoyed at how in order to output sound to my TV from my computer I'd have to disable a number of settings on my computer. A problem that I simply didn't want to deal with anymore.

Enter the Raspberry Pi 2

Then the RP2 was announced! Knowing that XBMC worked on the Raspberry Pi, in a complete impulse buy I snatched one up on day one. A couple weeks later I received my unit. Having never set one up before I went to the google where there wasn't much for nice 'how tos' on setting them up. So I figured I'd write one (and dust off my blog at the same time). I knew that the RP didn't come with anything, but I don't think it really donned on me until I opened the box. Judging from the forums I've seen over the past few weeks, not a lot of people seemed to know it came with nothing.

What you're gonna need

• The Raspberry Pi. $35 from element14
• A power cable. The Pi 2 uses a micro usb cable and requires AT THE MINIMUM 600mA of power. This means the cable you use to charge your smartphone ISN'T good enough. Your better off getting one for charging tablets (around the 2 amp range). I paid $20 for mine, but I'm sure you can get them cheaper.
• A Micro SD card for storage. As of this writing, I saw a 16gb one online for $8.
• An HDMI cable to plug into your TV/Monitor (If you don't have one kicking around already).

Setting it up

This will be entirely dependent on how you want to you use your Pi.

Linux

If you're going the Linux route cause you wanna do some programming, here's what you gotta do:

1. Go to RaspberryPi.org and download the linux distro you'd like to use. Options include raspberry pi optimized versions of: Debian, Ubuntu, and Fedora. For an even easier time, they've created a "NOOBS" distro (on Debian) for people new to Linux as well.
2. Unzip the package and copy the files to your SD card.
3. Plug the card into your Pi. Plug in the HDMI cable. Plug in your USB KB/Mouse (mine are wireless). Plug in the power cable (plugging in the power will turn it on, thats why do it last).
4. Setup the distro you downloaded. I tried this quickly using NOOBS, the other distro's may have other steps not listed here

If you are going to install NOOBS, here is a handy video on all the steps in the process:

Getting started with NOOBS from Raspberry Pi Foundation on Vimeo.

XBMC

On the Raspberry Pi, XBMC goes by a few names: Raspbmc or OSMC. Raspbmc is nearing the end of its lifespan while OSMC appears to be taking the reigns where Rasbmc left off.

How to install OSMC:

1. Go here and download the installer. You're installing a program that will setup your Raspberry Pi's SD card, so simply select the OS of the computer you're going to do that on.
2. Plug your SD card into your computer and run the program you just downloaded. You simply have to answer which drive to install OSMC onto and what kind of Raspberry Pi you'll be running it on.
3. Once the installer is done, plug your SD card into your Pi (and HDMI cable and KB/Mouse) and turn it on. Congratulations, you're now the proud owner of an HTPC!
4. (Optional) I HATED the default skin of OSMC, however, it comes with the regular skin that is normally bundled with Kodi (its called "confluence"), I suggest you switch your skin to that (until you start fiddling with Kodi settings and find a community created skin for the UI that is perfect for you).

I should note that Raspbmc and OSMC are not the only Raspberry Pi-compatible media centers out there. Others of note are OpenELEC and Xbian.

Final Thoughts

I love my new setup. When compared to my gamer-grade PC, streaming HD content is a bit slower on the Pi. Sometimes I like to give it a min or two two pre-buffer before I start watching (I haven't noticed the need to do this with DVD-quality content though). That said, when I accessed 1080p content from my NAS it loaded instantly and no need to buffer, so this could be a network issue.

I did notice while playing around with OSMC that the temperature of the CPU on the Pi was at 102°F... and that was just from me playing around with it, I wasn't watching anything at the time. So you may want to consider cooling options for your Pi. I've seen three-packs of heat sinks with pre-applied thermal tape for under $10 online. You may also want to add a 5v fan for the unit (which you can also find online for under $10).

If you're going to be displaying your Pi proudly alongside your TV, you may also want to consider a case. This will also have the added benefit of keeping small fingers off the guts of the device.

If you're the tinkerer type (which you probably are if you bought a Raspberry Pi), Kodi has thousands plugins you can download for it. Google away and you can probably easily find one that will suit your needs desires. I swear, a buddy of mine spends more time tinkering with his Kodi setup than actually using it's content... its become a game of sorts :p

Website Usability Talk

Recently, my coworkers Chris De Jong and Bryan Larson and I gave a talk down at The Two Twenty. We had the privilege of being the presenters for the first installment of Saskatoon Design Meetup - a group that is currently slated to meet monthly and talk about all things design. It's no secret that I have an innate fear of public speaking... I tend to get flustered, speak quickly, get red-faced, and get this weird top-heavy feeling. So needless to say, I was both excited and dreading the idea of giving a presentation.

However, after all was said and done, I managed to jump through my section of the presentation without any of this, in fact, I experienced more of the above symptoms during our dry-run than during the actual presentation. I'd like to thank everyone that gave me support before the presentation - it was much appreciated.

The Talk

We broke the talk into three parts:

• Business (Chris' bit, green slides)
• Design (Bryan's bit, orange slides)
• Development (My bit, grey slides)

Chris' section mainly focused on:

• Ensuring you have a plan. "If you fail to plan, you plan to fail"
• Build things for your target audience. Research your target so that you are delivering what they want or what will be useful to them.
• Creating personas for use-cases.

Bryan's section talked about the different stages of the design cycle for him and how it played out with our latest project (the redesign of our corporate website). He also talked about stock photography vs. custom-made graphics and free vs. paid video hosting.

My section, as you can guess, was about the development portion of the project. However, instead of talking about my coding practices during the first stage (the initial development) of the project, I decided to focus on what took place POST launch.

Technological Upgrades

After the initial launch of our website, we were required by upper management to incorporate a corporate-branched version of the popular .less CSS library. If you've never heard of .less, it is a compiled CSS library that allows you to write custom functions, use mixins, declare variables, and do mathematical equations that get compiled down into a regular CSS file. If you haven't heard of .less, you may have heard of it's "rival" SASS. From what I've heard, both are fairly similar in their functionality. Either way you go, you should check compiled CSS out, its pretty sweet.

Now since I had to change the site to use different CSS anyways, I thought I'd take the opportunity to upgrade our website to be HTML5 compliant. I got the knowledge required to build an HTML5 page from the book: "Introducing HTML5 (2nd Edition)" by Bruce Lawson and Remy Sharp. The book is very simple to read and gets into the stuff you need to know right away. Best part is, its only like $35 CAD.
In order to ensure what I was putting out there was in fact HTML5 compliant, I made use of a couple of online HTML5 compliance checkers. In addition to ensuring your code is up-to-snuff, they check to ensure you not forgetting to do things as well (ex. Adding an 'alt' tag to your images):

• http://html5.validator.nu
• http://validator.w3.org/

Increasing CTRs and A/B Testing

As with any company on the internet trying to make money, increasing the number of interactions with your call-to-actions is very important. But before you can improve your CTR, you need to know how well your performing currently. Google Analytics is very useful at tracking button clicks (if you have it set to do so). Chris (I believe) also had another suggestion. He had heard of this site called CrazyEgg, a web tool like Google Analytics that gives you detailed graphical reports of where users are clicking on your site. For us, Heatmaps of where people are clicking were useful but we made the most use out of Scrollmaps. If you are unaware, a scrollmap shows where visitors who come to your page see the most. If you see the bottom screen from the pic above, you'll see the bright yellow/white area. That is where people see the most, and the darker areas are seen far less.

When it came to increasing our CTRs, we noted that on the first page we wanted to improve that the call-to-action was in the darker area of scrollmap. This helped us create an appropriate design with a better button layout in mind.

Next was to actually test a new set of page variations. Google has built into Google Analytics a section called "Experiments". It allows you to setup an A/B test and see the results within Google Analytics (If you've NEVER heard of A/B testing, read this). The only things you need to setup a Google Experiments test are:

1. A website using Google Analytics
2. A page you want to improve
3. At least one variation of the page to test
4. A Google Analytics goal for the test to track results against

As you can see for our test we ran two variations against the original. The difference between the variants is the text on the call-to-action. By looking at the "compared to original" column we can easily see that putting the button in the areas seen by consumers has a very large impact on the number of clicks a button receives (surprise! surprise!). From there we can see that the text in A was highly favored over B.

Remember, when running an A/B test simple variations, the more drastic the change, the longer it requires to get an accurate result. Here is a simple calculator to give you an idea of time lengths: http://visualwebsiteoptimizer.com/ab-split-test-duration/

Search Engine Optimization

SEO, for the uninitiated, is tweaking your website so that it sits as close to the top of a search engine's search results as possible. Since web technologies and standards are changing constantly, SEO is probably one of those things that I'm sure everyone will be battling forever. Not being an SEO expert myself, we made use of a tool called WooRank.

WooRank programmatically checks your website for many of the things that major search engines use to help determine the validity of your website. The site grades you on many different factors that can increase your SEO ranking and others that are nice-to-haves or old SEO factors that are simply good practice. In addition to that, WooRank also gives you an idea of how your website is stacking up from a mobile perspective, social media integration, and security. The service isn't free but you can generate a free report for your website once per week.

Other Useful Tools

Web Page Test
This site, while not pretty, is another site that programmatically evaluates your website. This time its for page load times, caching, CDN use, etc. All those fun things that a web host needs to think about.

UsabilityHub
A nifty Karma-based tool that allows you to submit your designs to be scrutinized by different people. You can do 5-second tests, click tests, and nav-flow tests. By completing tests for others, you earn slots for others to test your designs. During the presentation, one question we had was "how do you determine if your designs are good?", this can help with that. The feedback I've received on it has been pretty decent so far.

UserTesting
While we didn't use this too for this project, I've used it in the past to help us come up with designs for product redesigns. You can have people connect to your site and complete a number of tasks. While doing so, the software is recording their screen session as the user speaks into their microphone. I've had some FANTASTIC feedback from people using our products for the first time. But take that with a grain of salt, because you can just as easily get really bad responses. However, we've submitted the few really bad ones to the powers that be and they gave refunds. The users are paid to do the service, so its in their best interest to give meaningful feedback.

I hope any of these tips/tools can help you with your website improvements. They sure helped us.

MosoConf Day #2

See: MosoConf Day #1

Day two of MosoConf proved to be just as fun and informative as day number one. Here is how it went.

Speaker 1: Dan Martell

Dan kicked the day off with an insightful talk about being an Entrepreneur and whats needed to succeed.

What I took away:

• Motivation is Everything - You don’t need to know anything to do something, you just need the motivation to do it.
• By knowing what your customers want, you can become very successful. Don’t assume you know what they want, actually talk to them and find out.
• Hustle to Help - Don’t hesitate to help people out, who knows what can happen as a result.

Speaker 2: Saul Colt, M. Jackson Wilkinson, and Jennifer Fraser

The first select-a-session I went to on day 2 was a Q/A session discussing User Experience. While Saul directed the questioning, Jackson and Jennifer fielded the answers. With Jackson being a startup guy and Jennifer being from a large scale business, their answers were quite varied, but both very informative.

What I took away:

• You need to understand the problem at hand. You must know how your users are currently dealing with an issue (if at all). Communication is key. Sometimes what they think/say are not actually the problem(s) the user is facing.
• It is impossible to test everything.
• When adding extra users to usability testing is no longer providing extra information to your testing efforts, it is probably time to stop. Make sure to deal with "I don't knows".
• Dealing with habits - Users will develop habits when using a system. Changing how they do things, even its making things easier for them, will (at least at first) cause panic. Unless the changes are really bad, people will be generally be ok with the changes soon enough.
• Gamificaiton - Can be really useful if it helps your users solve their problems. However if it is just added on to make things fun, then its probably not needed.
• Be diligent about the tools you can use - Don’t use tools just because they are easier than other, use them because they are the right tool for the task you’re trying complete.

Speaker 3: Ryan Holowaty, Jordan Schidlowsky, Ty Bader, and Lee Vermeulen

This session was my one personal choice for the conference. Video Games are a fairly large part of who I am so I had to take a few minutes to go to my roots. This Q/A session was run by Arlin Schaffel.

What I took away:

• Testing on a fragmented marketplace (in regards to Android) - You simply cannot test on 1600+ devices, you just cant, but you can test weird edge cases on certain hardware/software combinations you are told about.
• Making money on mobile - The first step is building a community. This typically involves giving games away for free. Later on, once you've built a name and brand for yourself, you can charge for new apps.
• Other mobile money grabs - In-app purchases and producing 'lite' and 'full' versions of apps.

Speaker 4: Brendan King

Brendan gave us an interesting talk about managing your online reputation. In an effort to not repeat the lessons of speakers from the day before, a good chunk of his original talk was very quickly passed over. However, this gave us the opportunity to see his company's StepRep software. While he wasn't trying to turn the talk into a pitch about his product, it was pretty interesting to see what kind of data one of his real clients was receiving.

What I took away:

• Online Reputation is what you say about yourself (digital footprint) and what others say about you (digital shadow).
• Mistakes will happen - how they are dealt with is what can make/break you.
• You don't have to participate in online interactions about your organization, but you need to at least know what's being said.

Speaker 5: Rob Swick, Albert Jame, M. Jackson Wilkinson, and Mark O’Sullivan

This "talk" was the speakers taking viewer's websites and critiquing them. Since it was an ever changing talk, I just noted some of the website building things that could apply to any site

Random Points:

• Main page carousels - make each slide more interesting so people will interact with them. Make buttons on carousel more easy to access (bigger).
• A lot of sites will "degrade" the further into them you get. Ensure inner pages look the same as main pages.
• Ensure your corporate logo is easy to read!
• Who are you? What do you do? Are you taking advantage of H1s and H2s (they help SEO too)?
• Don’t use too much text to describe who you are
• Change default link colors, even if it is just to tone down their intensity
• A/B testing is key!

Speaker 6: Saul Colt

The final presentation of the conference was all about influence and how to really make an impact on your audience. Saul, with his quirky fashion sense, gave us an excellent talk about how to make a statement by having your customers make it for you.

What I took away:

• "People don’t like to be marketed to but they sure like to buy stuff." If you can create a great experience for your clients and they’ll market the product for you!
• Do interesting things - People want to live your brand, they don’t want to hear features, they want to hear stories.
• K.L.T. - To be truly influential, you have to truly Know, Like, and Trust someone.
• 4 E’s - Execute Extraordinary Experiences Everyday
• Having 100,000+ untargeted followers is not as influential as having 200 very targeted followers

All in all, I thought MosoConf was a very enlightening experience. I'd love to attend it again in future years. Thanks to my employer for covering the cost of the tickets.

My Social Experiment

I decided to run a social experiment on the second day of the conference. Seeing as the vast majority of attendees are smartphone wielding techies, I was certain if I put a QR-Code on my chest I would have people randomly walking up and snapping a shot of my nipple all day. I was very mistaken. The only person who actually 'clicked' my code was my coworker... and he only did it cause I told him to. So since the vast majority of people I talked to thought it was silly combined with fact that basically no one took advantage of it, perhaps its a sign that QR codes are in fact dead. On to the next big thing I suppose.

MosoConf Day #1

Today was my first opportunity to attend a conference since leaving University. And I have to say, it has been quite a lot of fun, informative, and insightful.

Speaker 1: Duncan Stewart

Duncan is a "futurist" from Deloitte Canada who's role it is to predict what trends are going to happen. What differentiates them from people with lofty predictions of the future is their accuracy. All their predictions contain the following: What, Who, and When. What his company does aside, Duncan's talk was very entertaining and eye-opening at the same time.

What I took away:

• Despite how popular mobile is, 92% of internet traffic in the US is on a personal computer.
• > 90% of tablet traffic is on an iOS device.
• And, whatever your mobile strategy is, it must adhere to lower-tier smartphones. That is, not forgetting that a large number of smartphone users out there do not use the "Crème de la crème" devices available and your stuff should work with their devices as well.

Speaker : Darren Hailes

Darren is a Social Media expert at WestJet. He gave us an informative talk about how his company uses Social Media to help their customers. He also presented us with some pretty sweet videos his company put together.

Key points I got:

• Don’t be afraid of negative feedback, complaints are time for you/your organization to step up.
• Know your product intimately and expose the unique things in an interesting way.
• Converse with your followers, and don't be a robot while you do it.

The videos he showed us:

• WestJet Owners Care
• Kargo Kids

Speaker 3: Julien Smith

Julien's presentation was called "You do not exist", but I preferred my title for it (a line he said near the beginning) - "Leveling you shit up!". I say that because his talk (at least I felt) was about how to grow your business and the path's you can take to get there... in a round-about way. He showed us some videos of the crazy things people do when they become truly in-tuned with their bodies and moving in ways most people don't today simply because they developed the skills that many humans have forgotten.

What I took away:

• Persistence Hunting: What do you need to do to get to the next level? What is the thing that we can develop to out-last our competition?
• "Once you’ve found your niche, you play it to the hilt… and let it turn you into a weapon"
• “Our prison is our own ideas” Things have become such a pattern that you no longer feel stimulus.
• Act on the inevitable today and innovate before everyone else does

Speaker 4: Rob Swick

This session was all about SEO. Rob had a twist on the regular idea of SEO by mixing it with some core principles from Feng Shui. While Feng Shui has 8 fundamentals that it is based on, Rob's SEO "Bagua" has nine broken up into three categories (order of importance left -> right):

• Structure - Organization, Coding, Links
• Identity - History, Focus, Location
• Content - Targeting, Content, Social Media

A few points I took away:

• Content: Targeting - What does your target want? Think about how these people see it.
• Context: Competition - Study the successful competition and break things down to a general term level. If they’re winning certain terms, find out why.
• Content: Social Media - It's important… but only 5% important.

Speaker 5: M. Jackson Wilkinson

(Michael) Jackson gave us an interesting talk about how you need to keep things consistent between all platforms your business operates on. Colors don't necessarily need to be the same from platform to platform, but the general layout and functionality should.

What I took away:

• Rinse, Borrow, Repeat. Take what you’ve done, extend it to other platforms, you don’t necessarily need to change things.
• Choose your platforms wisely
• Don’t Ever skimp on quality!

Speaker 6: Mark O’Sullivan

This talk wasn't originally on my docket of presentations to see but there were schedule changes and this is what I went with. Mark is the creator of Vanilla forums and had many a lesson to teach us about online communities and how to manage them.

What I took away:

• 90 / 9 / 1 rule - 90% of people know about a community, 9% of people have accounts, 1% are active users.
• Sinking - Forcibly closing/locking discussions cause mad outbursts from people. Instead of deleting or closing a thread it causes bad/trolled posts to slowly disappear. Sinking causes the discussion to die… and no one knows they’re discussion was programmatically dropped in rank.
• If you have a community for your organization, link to it from your main navigation.
• Don't Engage Trolls... Ever. Trolls will poison a community.

Speaker 7: Dave Carroll

I'm sure just about everyone knows who Dave Carroll is, if not by name but by reputation. Dave is the United Breaks Guitars guy. Being a simple musician, who got thrusted into the world of Social Media seemingly by accident, he gave us fun, music-filled, informative talk.

What I took away:

• Is social media relevant to your business? You need to embrace it… You need to know what your consumers can do and say, and you need a way to defend against them.
• Don't get caught in the “statistically insignificant” trap. With attitudes like these, your bound to lose customers (a 5% disgruntled customer rate can cause quite a stir online!)
• Branding - Companies no longer controls their brand exclusively. The stories behind the story are just as interesting. You co-create your brand with your customers.

That finished off day 1. I'm looking forward to day 2 which starts right away.

See: MosoConf Day #2

Interviews... from the first-time interviewer's perspective

A couple of weeks ago, my company was looking for some new Designers/Developers. With one of the two people who would be in the interviews being out of the country, a coworker and myself were given the opportunity to sit in on the interviews. Our job was to listen to what these interviewees had to say, size them up, and then ask them questions from a more technical perspective (the main interviewer was more focused on design).

After all was said and done, I can say: As an interviewee, you should feel nervous during an interview and here are a few reasons why.

1. A != B
   After reading through the interviewer's resumes, we had a pretty good idea of the questions these people should be able to answer. But when it came down to it, a number of these people could not articulate any knowledge about technologies they supposedly knew about. This does not only aggravate the interviewers, but it drastically decreases your chances at getting a job (read: Your-chances-of-getting-job% == 0). The use of Buzz-words in your resume may get you an interview but they won't get you a job.
2. No Porfolio
   If your applying for a job that is design oriented (or any job where you have to build something), be prepared to show previous example of your work. Its like the old saying, a picture is worth a thousand words. If your a carpenter, have photos of personal projects you've worked on or things you've made for other companies. My team lead said it perfectly, even if the things you put in a portfolio are simple or your work on them was minimal, include the pieces in a portfolio and say exactly what you worked on. Interviewers realize people work in teams to get things done in an office, and attempting cover this fact will only get you in hot water later if you can't step up to the plate.
3. Cannot produce a portfolio
   If we ask you for a portfolio of your work and you respond with "My computer crashed, so I can't give you one" perhaps its time to remember that we currently live in the internet age. If you don't have your portfolio online or at the very least backed up to an another source, we probably don't want you.
   
   The same goes with all your computer data. If you don't have at least one backup, your asking to lose it.
4. Over-compensating on your resume
   While its true that interviewers don't have a lot of time to flip through a stack of resumes, over-doing your resume to stand out can be just as detrimental. One applicant sent us a resume with white text on a black background and different sections on a weird teal-colored background. While we did notice the resume, we thought it was gawdy and unprofessional and passed it up.

After a number of interviews where a number of these issues surfaced, our mood begins to degrade as bad interviewees continue to aggravate us (mainly due to the wasted time put in). So interviewees be warned.

The "blame" for bad interviewers cannot be solely placed on the applicants (or lack thereof). There are a few things businesses can do to mitigate the number of unwanted applicants.

1. Removing ambiguity from job postings
   One applicant we had for our Designer/Developer job was looking to design wicked code. In the create sweet classes that do great things sort of way. I myself would have assumed a "Designer/Developer" job title in addition to the job description should have been good enough to weed people like this out. I guess it just goes to show that when we design webpages to be as dis-ambiguous and simple to read as possible, we should to do the same with job postings.
2. Job opening deadlines
   As with attempting to sell products on the internet where people are more inclined to buy things if they feel products are in limited (see my Making Them Click post to read more), if you want people to apply for a job, attach a deadline to the posting. Postings that get left on webpages for months and months make your company look bad because it gives the impression that you cannot keep jobs of that kind filled. And if you cannot keep a job filled, why is that? Too stressful? Not paying well enough? These are just a few of the ideas that people may get about your company.
3. Predetermined list of questions
   I'm sure seasoned interviewers probably wouldn't need a list of standard questions printed out in front of them (simply because they already know them all like the backs of their hands) but as a newbie, it made our lives a heck of a lot easier for a number of reasons.
   1. Keeping you on track
   2. Ensuring ahead of time you are asking the questions that you really need asked
   3. Ensuring you don't forget anything during the interview
   4. Convenient way to remember things after the interview
   Many standard lists of interview questions can be found online if you are not sure where to start.

I'm sure there are many other pieces of advice seasoned interviewers may be able to give, but these are the few I got from the one day of interviews I got to go through. Hopefully I will be able to perform more in the future.

---

I would really love to see what people think about my blog, so please leave comments below :) Thanks for reading.

Interactive HTML5 Video

So a good friend of mine who does video capture/editing for a living hit (Adam Kitter Media) me up the other day asking about interactive videos. In his opinion, they are the future of video online. Based on things I've seen online, I do not disagree. So he was asking me if I'd be interested in perhaps doing some of the programmatic work. Having no experience with video, I said I'd have to do some research on it. However, what I could say with certainty at that point was that there are two main video formats right now: Flash and HTML5. Since Flash is slowly being phased out, I told him the way to implement it should be HTML5.

Like video, my experience with HTML5 was almost zero so I had to learn some of things required. The first thing I learned was that putting a video on a page with HTML5 is very easy! Honestly, I spent more time trying to locate a video file in .mp4 and .ogg on my computer than getting the thing to work.

Code required to play a video in HTML5:
< html>
    < body>
        < video id="theVideo" width="480" height="360" controls="controls">
            < source src="fileName.mp4" type="video/mp4" />
            < source src="fileName.ogg" type="video/ogg" />
            Your browser does not support the video tag.
        < /video>
    < /body>
< /html>

The keen observer will note, that there are two video files within the video tag above. In the perfect world, one file format would work for all browsers (hehe or there would one browser to rule them all), however we do not live in a perfect world and not every browser supports all file types. As of this writing, the HTML5 video player supports three file types: MP4, WebM, and OGG. A combination of two of those file formats should cover all the major HTML5-supporting browsers (IE 9+, FF 4+, Chrome 6+, Safari 5+, and Opera 10.6+). If I use the code snippet above as an example, Safari loads the .mp4 video just fine, but Firefox does not and it falls back on the .ogg file. If the browser supports none of video files or does not support HTML5 video, you will get the error message.

The code snippet above isn't very interactive (minus the play/pause button), so I began looking for ways to move about the video to make it "interactive". For a first-pass implementation, I decided to create a set of "buttons" that allow the user to jump around the video (read: colored divs with onclick events).

For this implementation, I made use of two important time fields: currentTime and duration (there are others). Both are fairly self explanatory, duration is the length of the video, and currentTime is the time index the video is currently on - both values are seconds as counted in floats.

From my research, I gathered that there are a number of ways to implement the "buttons" I wanted. However, I decided to use jQuery to handle the onclick events. Basically, I had each button adjust the currentTime attribute to a different point in the movie (beginning, 1/3, 2/3, end).

$('#link1').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = 0;
});

$('#link2').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.666));
});

$('#link3').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = (video.duration - (video.duration * 0.333));
});

$('#link4').click(function() {
    var video = document.getElementById("theVideo");
    video.currentTime = video.duration - 1;
});

Once I had the time index changing working I just slapped a little styling on the buttons and voila! My first pseudo-interactive HTML5 video player. In retrospect, the most difficult of building this was locating a place to host the videos for this blog post.

I still have a ways to go before I'm up to the likes of these videos but at least I have something to look forward to:

• Mercedes
• The Wilderness Downtown
• Survive the Outbreak

My Interactive Video

FYI: The buttons work even if the video hasn't buffered yet, just look at the progress bar.

Jump to Beginning of movie

Jump 1/3 of the way into the movie.

Jump 2/3 of the way into the movie.

Jump to End the movie.

For my next experiment into HTML5 video, I'm going to do some more research into the canvas to see if I can't make the buttons right within the video.

Making them click

I recently completed the book Neuro Web Design: What makes them click? by Susan M. Weinschenk (link), and I must say that there are quite a few times throughout reading it that I would just stop and say "Mother F*****!". Why? Not because the book was bad, in fact the book was very good. No the reason I would say that would be because I'd realize that I'd been sucked into things online without me even being aware of it.

I wont give away everything the book talks about, but I'll say what I'm taking away from it.

1. Many of the decisions we make are unconscious ones. If we can engage the different parts of the brain then we can help facilitate unconscious decisions.
2. Humans are social creatures. We like to be connected to others, do what others do, and we need to feel like we belong. Adding social functions to sites can be very powerful tools. Ask yourself this, how many times have you bought something because someone you know told you it was good? Or how often do you watch videos on YouTube because they were located in the "Recommended" section of the site.
3. Knowing that something is scarce or only available for a short time increases your desire for that something.
4. Less is more.
5. If you want to sell something, list that item first.
6. Getting people's attention is very simple if you:
   
   • Change things
   • Display food
   • Imply sex
   • Talk about "You"
7. Attractive people make things they are advertising attractive (at least in our heads)
8. Unleashing emotions in people is very powerful, especially when people feel like they are about to lose something
9. Stories grab attention
10. Like the old saying goes "A picture is worth a thousand words". Use of pictures is far more memorable than text.