NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE
NEW NAME. SAME EXPERTISE.
We changed our name! After 14 years of creating award-winning digital products & services, it’s time for a new identity that better reflects the human insights-driven, digital customer experiences we create.
VISIT OUR NEW SITE

AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘Videos’ Category

Happy 10th Birthday Mayor Jack

The man with the master plan turned the big 1-0 last month. Folks at Ai get a day off on their birthday, but the Mayor passes on that perk. Sure, he could have kicked it at home and watched Boy Meets World on TGIF, but he has a company to serve and protect. A true security professional never puts down his guard.

Join us in song to commemorate our loyal, precious piglet. Happy birthday little man!

(Make sure you listen to his emotional birthday speech)

Funny Stuff

And the Jimmy B Goes to…

Tim Broder

At Ai we’re all about tradition, and one of the closest traditions to our hearts is our very own Jimmy B Award, bestowed for oustanding performances.

To stand out here, you’ve really got to be special and there is no doubt that our newest recipient, Tim Broder, fits the bill.  Tim has been pulling major weight, leading the development charge on our biggest projects.

We’re pretty sure that Tim’s tireless efforts are due in no small part to the fact that, well, the man doesn’t get tired – as evidenced by his performance at the Ragner Relay.

The Broder Boy is truly our Superman, and we want to wish him a big thanks and congratulations.

Did we mention that he can jump tall buildings in a single bound?

Ai

HTML5, round 1: The video tag

As an Ai Fender (front-end developer), I live in a world of HTML markup. The next revision of this language is HTML5, though it is currently not fully supported across all browsers. Some of the core ideas behind HTML5 are to create more semantic markup based on usage of modern browsers, and to say farewell to the necessity of proprietary plugins required to access certain types of media on the web – namely audio and video content.

For the first in my series of emerging front-end web technologies, I am going to detail the new <video> tag feature. This may not be the most important new feature of HTML5, but I am certain it will be the most widely-used by the general population of internet users. Video content on the web has evolved immensely over the last five years – YouTube, Hulu, Vimeo, and the list goes on. It would be difficult to find a person who has used the internet and never watched a single video on YouTube.

Currently, users need the Shockwave plugin to view Adobe Flash content, or the Silverlight plugin to view Microsoft Silverlight content. The <video> tag will now allow internet users to view video content without the need to download such third-party plugins to view said content. This could easily boost a site’s traffic and page views if more users can access the video content.

Below is a simple example of the <video> tag in action. Unfortunately, it will only be viewable in Mozilla Firefox, Apple Safari, or Google Chrome (more to come on those browsers after the video).

For those not using a browser capable of handling the <video> tag, I have also included screenshots of what the players in each browser look like.

firefox.jpgFirefox Video Player

safari.jpgSafari Video Player

chrome.jpgChrome Video Player

Each browser has its own unique user interface for displaying video content. The player controls all have the basic, fundamental features one would expect: play/pause, scrub through timeline, view time, and ability to control volume. Negative points to Safari for a lack of volume level slider and only giving mute functionality. Though I am sure that all browsers are still fine-tuning their interfaces as this technology is more or less a work-in-progress.

The major drawback to this new method of displaying video content is the formatting of the files used. Safari and Chrome both require their video files to have an H.264 codec or most other Quicktime codecs (Adobe Flash also utilizes the H.264 codec for Flash Video/FLV files), where Firefox requires the OGG Vorbis codec. What this means for developers is the need for multiple video file formats included in the markup, which is actually quite simple and not time-consuming.

The real problem exists with OGG and how difficult it is to find a means to export a video file to that format. It is not impossible, but a plugin is required to use with video conversion software in order to export a video to .ogg format. Ultimately, it is now the task of the developer to install a third-party plugin needed in conjunction to this <video> tag, even though the plugin is not for a browser. But if it aids in creating a better experience for the end user, I am absolutely okay with it.

YouTube has an opt-in experimental version of their video player built using HTML5, but it will only work in browsers that support both HTML5 and H.264 codec. Give it a try: http://www.youtube.com/html5

Technology

OmniGraffle tutorials, Part V: Sub-Graphs

Welcome back to our OmniGraffle tutorials, run by Mike Piastro, Ai’s senior information architect. This is the fifth in a series of short videos designed to help users get the most out of OmniGraffle with the least amount of confusion.

Today’s video is about sub-graphs. Watch the tutorial here.

Previous tutorials:
Part I–template setup and variables
Part II–shared layers
Part III–stencils
Part IV–actions

UX

OmniGraffle tutorials, Part IV: Actions

Welcome back to our OmniGraffle tutorials, run by Mike Piastro, Ai’s senior information architect. This is the fourth in a series of short videos designed to help users get the most out of OmniGraffle with the least amount of confusion.

Today’s video is about actions. Watch the tutorial here.

Previous tutorials:
Part I–template setup and variables
Part II–shared layers
Part III–stencils

UX

OmniGraffle tutorials, Part III: Stencils

Welcome back to our OmniGraffle tutorials, run by Mike Piastro, Ai’s senior information architect. This is the third in a series of short videos designed to help users get the most out of OmniGraffle with the least amount of confusion.

Today’s video is about stencils. Watch the tutorial here.

Previous tutorials:
Part I–template setup and variables
Part II–shared layers

UX

OmniGraffle tutorials, Part I: Setup and Variables

Ai senior information architect Mike Piastro created a series of short videos explaining the ins and outs of OmniGraffle, the popular diagramming tool that has become a standard Ai app. They’re great tutorials, so we’re going to post them here.

The first one goes into template setup and variables. Click here to view.

We have several short tutorials underway. Look for a new one each Friday.

UX