Archive for the ‘Multimedia’ Category

File Under: HTML5, Multimedia

Microsoft, Atari Bring Arcade Classics to the Web

Centipede in HTML on the iPad. Image:Screenshot/Webmonkey

Microsoft’s Internet Explorer team has partnered with Atari to re-imagine classic Atari games for the modern web. That’s right, Centipede, Asteroids, Missile Command and half a dozen more all re-written using HTML5 and JavaScript.

If you’d like to play, point your browser to the new Atari Arcade and enjoy the glory of Pong, Super Breakout and the rest of the Atari back catalog.

While the games look a bit different — the graphics aren’t exactly what you might remember from the arcades of your youth, hence the “re-imagining” — the game play is faithful to the originals, especially on a touch screen where the controls are more like the classic arcade button layouts.

For those curious to know how it all works, the answer is largely CreateJS, though for full details be sure to read through the developer documentation. You can even create your own HTML5 Game on top of the new Atari Arcade SDK.

For more details on how it all works check out the video below featuring developer Grant Skinner and the rest of the team behind Atari Arcade.

File Under: JavaScript, Multimedia

Tired of Tiny Movies? Go Large With BigVideo.js

Size matters. Image: Screenshot/Webmonkey

Nothing grabs a user’s attention like a big, full-window video on a landing page. For example, check out Path.com. However, with all the various screens potentially connecting to your site these days, making sure your movie plays full-window on all of them can be tricky.

That’s where BigVideo.js comes in. Developer John Polacek‘s BigVideo is a jQuery plugin for adding big background videos to your site. The plugin makes it easy to drop in a single video URL and get fit-to-fill background video that takes up the whole window. The script will fall back to displaying an image on devices where video doesn’t work.

BigVideo can also handle playlists, serving up a series of videos, as well as a very cool feature to play videos without the sound. And yes, you can (and should) add a button to allow users to turn the video off altogether. That said, I left BigVideo open, running in a background tab for several days and it didn’t have a noticeable impact on performance.

For more info, head over to the GitHub page where you can see BigVideo in action, get a full list of features and grab the code for your own site.

How Do You Use Responsive Images?

That's a lot of screens, are your images ready? (testing using Adobe Shadow). Photo: Adobe.

No one wants to waste bandwidth sending large images over limited mobile pipes, but everyone wants their images to look good on the multitude of screens connecting to today’s web. Finding the balance between the myriad factors — screen resolution, screen size, bandwidth, layout and design — is a tricky process.

We’ve looked at a number of techniques for handling images in responsive designs, but one thing that we haven’t covered is where to put the actual breakpoints.

You’re probably familiar with breakpoints in responsive design, they’re the screen widths in your media queries. For responsive images the idea is the same; a “breakpoint” is the screen size at which you swap in and out different size images.

At first glance it might seem logical to use the same breakpoints for your images that you’re using in your CSS media queries, but as Cloud Four’s Jason Grigsby writes, that’s not always the ideal solution. Grigsby tackles the potentially tangled question of breakpoints in a new post, So How do You Pick Responsive Images Breakpoints?

To simplify what can be a very complex question, Grigsby ignores some scenarios, including the so-called “art direction” use case where images are optimized (cropped differently, for example) for different screens. Instead Grigsby focuses on the question of how to best select “different image files with different resolutions of the same image based on the screen size.”

The simplest solution is to just make your image and responsive design breakpoints the same, but that’s rarely going to be ideal for your site’s visitors. Here’s what Grigsby has to say about using the same breakpoints for both image and media queries:

If we were talking about the art direction use case, then it is likely that the breakpoints would be the same because changes in the layout might also indicate an edit to the image.

But in the case where we’re simply changing files to provide different resolutions and a faster download, the image breakpoints should be determined based on when the browser is downloading an unnecessarily large file.

The main problem is, what constitutes an “unnecessarily large file”? But even if you answer that, as Grigsby writes, you still haven’t answered every question:

How do you determine what is an unnecessarily large file? Is that 1 byte? 10k? 20k?

And if you can answer that question, how do you determine the resolutions at which those file size jumps are going to occur? Depending on the content of an image and the compression algorithm used, images are likely to have different resolutions at which they experience significant changes in file size.

In the end Grigsby doesn’t yet have an answer to the question of how to handle responsive image breakpoints. And neither do I. There just isn’t an easy answer that will work for every project. My thinking, and what I’ve done on my own site, runs pretty much along the same lines of Eric Portis’s comment on Grigsby’s post. If you’ve got ideas, head over to Cloud Four and let them know how you’re doing it.

File Under: Mobile, Multimedia

Adobe Pulls Flash for Android From Google Play Store

Jelly Bean kicks the Flash habit. Image: Google

Today’s the day Adobe will pull its Flash Player plugin from Google’s Android marketplace, marking the end of what was once touted as a key advantage of Android over Apple’s iOS.

As we reported earlier, Google’s new Android 4.1 “Jelly Bean” marks the end of the line for Adobe’s certified version of mobile Flash Player. While the move shouldn’t have been a huge surprise since Adobe already announced last year that it would cease development of its mobile Flash Player, it’s still bad news for those that wanted an official version of the Flash Player on a Jelly Bean phone.

And now Adobe has limited access to Flash in the Google Play Store to any phone on this list of certified devices. For everyone else Flash on Android is a thing of the past.

The reasoning behind Adobe’s decision to pull Flash from the Google Play store is that any devices that don’t have Flash Player installed out of the box are, in Adobe’s words, “increasingly likely to be incompatible with Flash Player.”

There is a way around the new limitations if you’re a developer who needs access to Flash (or, presumably, a user who doesn’t mind hacking your phone): Flash Player for Android will remain available in Adobe’s archive of released Flash Player versions. It’s also worth noting that when we first wrote about the end of Flash on Google Play a number of readers let us know that the Flash plugin actually does seem to work with Android 4.1, so if you’ve just got to have it, head to the archives and give it a shot.

Flickr, Science Come Together to Bring New Species to Light

Semachrysa jade, new lacewing species. Image: Kurt/Flickr

Photo sharing giant Flickr may not be the internet hipster favorite it once was, but the site remains not just popular, but useful as well — Flickr recently helped connect a scientist with a photographer, making it possible to classify a new species of green lacewing.

Photographer Hock Ping Guek, whose Flickr stream is full of gorgeous macro images, was photographing in a state park in Malaysia when he snapped an image of an unusual-looking Green Lacewing. Guek then uploaded the images to Flickr.

That’s where Shaun Winterton, a senior insect biosystematist at the California Department of Food & Agriculture, happened to see the somewhat odd-looking green lacewing with its distinct wing pattern of black markings and white spots. It didn’t match anything Winterton had ever seen before. He sent the image to fellow scientists, but no one was familiar with it.

Winterton then got in touch with Guek, who returned to Malaysia, this time collecting a specimen that was then sent back to Winterton. Winterton then collaborated with Stephen J. Brooks of the London Natural History Museum to describe the new species. The two, along with Guek, share credit for the new species, which is named Semachrysa jade.

While the three share credit, the paper outlining the new species (available on Zoo Keys) also credits the web for bringing Semachrysa jade to light:

New species are increasingly being discovered by the general public with interests in the natural sciences long before they are recognized as new to science by professional taxonomists and formally described. With the rapid development of digital photographic technology, professional and amateur photographers are unknowingly discovering and informally documenting new species of animals and plants by placing images of them in online image databases long before taxonomists can examine them.

If you’d like some more background on how it all came together, be sure to check out Guek’s blog Up Close with Nature.