Next Steps

HTML5 video solutions

August 17, 2010 @ 3:33pm

Updated — August 20, 2010 @ 8:23am

by Jeff Byrnes

So everybody’s excited about HTML5, and the native media capabilities it brings; specifically the <video> tag. But at the moment, support is a bit tricky. To quickly reiterate:

Safari 3.0+ supports H.264 video & AAC audio in an MP4 container
Firefox 3.5+ supports Theora video & Vorbis audio in an Ogg container, or WebM (VP8 video & Vorbis audio in a Matroska container.)
Chrome 3.0+ supports both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container.
iOS & Android support H.264 & AAC audio in an MP4 container.
Opera 10.5+ supports Theora video & Vorbis audio in an Ogg container.
IE9 will support both H.264 & AAC in an MP4 container as well as Theora & Vorbis in an Ogg container, but IE8 and earlier have no support for HTML5 video, and must rely on Flash.

So, as you can see, things are all over the place. To properly implement HTML5 video, we need to supply two video files: one file encoded with H.264/AAC contained in an MP4, and another encoded with Theora/Vorbis contained in an Ogg. It would also be wise to create a WebM version of your video as well, to future-proof yourself for the day when Theora is deprecated completely.

Now, once you’ve got your video files encoded, the matter of embedding them correctly raises its ugly head. Thankfully, there are a few ready-to-go solutions for this.

First up is Video for Everybody, created by Kroc Camen. VfE serves up HTML5 video (MP4 and either Ogg or WebM) without JavaScript. This is the very first solution put forth for easy HTML5 video support, and, as Kroc himself writes, should in no way be considered a long-term solution. But he’s being very forward-looking, and not very generous with his work. The primary goal with this player is to use no JavaScript, and thus make it as widely compatible as possible (think RSS readers & other JS-disabled avenues.)

Next, we’ve got Video JS, which, true to its name, relies on JS. However, unlike VfE, the controls are consistent between platforms, which is definitely a marked improvement.

The third and, in my opinion, most promising ready-made solution for HTML5 video is SublimeVideo by the gurus over at Jilion. This is a player with not only a consistent UI, but tons of additional features, a full-window mode (and a full-screen version in Safari!), and it’s being neatly packaged up. Unlike the other two, however, it’s still in-progress, and it will only be free for non-commercial use.

So there you have it folks; some readymade HTML5 video solutions; enjoy!

Tags

HTML5, javascript, video

Comments

View & Post Comments

Facing the (Font) Future

August 6, 2010 @ 4:14pm

Updated — August 16, 2010 @ 8:37am

by Jeff Byrnes

It seems as though the technology for representing fonts on the web are finally coming to fruition. With the W3C’s near-adoption of the WOFF format (it has remarked that “…it expects WOFF to soon become the ‘single, interoperable format’ supported by all browsers.”), @font-face seems poised to become the firm technology for embedding fonts in a site.

Previously, techniques like cufón & sIFR were the best way to deploy a font not commonly installed across all systems, or to guarantee a particular font is used. These required JavaScript alone at best, or a combination of JavaScript & Flash.

So with that, I give you the most bulletproof, known as the smiley variation, way to deploy @font-face to your site (courtesy of Paul Irish):

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('☺'),
         url('GraublauWeb.otf') format('opentype');
}

It’s always good to know how it all works, so definitely head over to Paul Irish’s article, but you can use Font Squirrel’s @font-face generator to simplify your life.

Now, however, the biggest hurdle is the licensing. Since we are basically allowing for the downloading of the font files, things can get a bit sticky. Thankfully, many of the font foundries are coming around and crafting new licensing, and even creating web versions of their typefaces. At the very least, they’re joining forces with other JavaScript-based solutions like Typekit and Fontdeck. We’ll see how it all turns out.

Tags

@font-face, CSS, CSS3, cufón, fonts, sIFR, typography

Comments

View & Post Comments

Resolution Dependence, or why it’s ok to have different layouts

July 30, 2010 @ 4:38pm

by Jeff Byrnes

Recently, I came across a really brilliant technique, resolution dependent layout. I’ve been exploring this technique a little bit, and definitely want to discuss & highlight some awesome uses of it.

This is especially useful for tailoring a site to a mobile device, and since all of them run on a WebKit-based browser, they can all understand @media queries, which is the crux of this particular way to accomplish this.

With that said, there’s two ways to do this:

Using @media queries in a <link> for a resolution-specific CSS file
Using @media queries inside a single CSS file.

I prefer the second method, but others who prefer multiple files vs. a single file for CSS can use the other. And we can do anything based on different devices, not just change widths, layout, etc. As another note, you can do checks for device-width or width (i.e., viewport width). Both will be useful, as we can use device-width queries to check for a particular device or class of devices.

As an example of a site that has a different layout based on the viewport width, check out Simon Collison’s website, Colly. If your viewport is set to ~950px wide or greater, we have the default layout: full-width, four-columns. However, as your shrink your viewport down width-wise, the layout changes to a two-column display, then finally to a one-column display where the single item is slightly larger in width than the single items are in the two- or four-column views. All-in-all, a rather lovely design to my eyes, but I’m sure my colleague Kyung could offer a more thorough critique in that arena. It’s a fascinating aesthetic, the whole “Celebrated Miscellany” idea. It reminds me of an old science journal, like something Darwin or Audubon might have drawn.

So how does he do it? Well, in this case, “Colly” has a series of @media rules at the very end of his stylesheet. Here’s one of the bits we’re talking about (edited for brevity):

@media (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
             (max-device-width:480px) and (orientation:landscape),
       (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait) {
    div#page { width:468px; }
    .home ul#navigation_pri, .home ul#subnav-b { padding-bottom:30px; }
    …
        div#siteinfo p { font-size:14px; }
}

First off, to have this work at all, all of the CSS rules that would apply for this particular @media query need to be encapsulated between the brackets for the query, as if it were regular CSS rule itself. As for the query, it’s asking a number of different questions to cover quite a few bases; this particular piece of CSS covers the “less than ~950px viewport” eventuality. On a mobile device, this view comes into play if an iPhone is in landscape mode, or if an iPad is in portrait mode. The other, single-column view comes to pass if an iPhone is in portrait mode (and it fits just right), or if you shrink the viewport of your browser down far enough.

The second @media query looks like this:

@media (min-device-width:1024px) and (max-width:509px),
       (max-device-width:480px) and (orientation:portrait) {
    div#page { padding:30px 0px 10px 0px; width:306px; }
    …
}

It’s considerably simpler, as it doesn’t have to ask as many questions about your viewport or device width, since it’s really only going to activate on either an iPhone or other mobile phone, or if you shrink the viewport on a desktop browser; the iPad can’t change it’s viewport size, so it will never be presented this view. With that in mind, the first part of the query takes care of desktops, while the second handles the smaller display devices.

So there you have it folks, the ability to craft resolution dependent layouts and styles. Pretty spiffy stuff.

Tags

CSS, CSS3, iOS, iPhone, resolution dependent design

Comments

View & Post Comments

Yahoo hosting, no htaccess, and permalinks

January 21, 2009 @ 3:08pm

by Rob Sanchez

So everyone wants clean permalinks these days; those search engine friendly URLs are everywhere (even on our own site!), and made ubiquitous by Wordpress and other CMSes. The usual technique is to use Apache’s mod_rewrite module and an htaccess file to re-write the URLs (see here). But what if you can’t use an htaccess file? Well, I found out recently that Yahoo Small Business hosting does not allow htaccess files, at all, and I had to find a solution for that.

The solution for me? PATH_INFO, an environment variable in Apache, which is basically extra “information” at the end of a file path/URL. So if you have a URL like “www.xyz.com/index.php/permalink/” the PATH_INFO would be “/permalink/”. In PHP, it’s available in the $_SERVER global:

<?php $path_info = explode('/', $_SERVER['PATH_INFO']); // start parsing $path_info however you see fit ?>

Now, we already had a custom engine for using handling the mod_rewrite output, and I was able to use that parsed URL data and put it into our system. And have some nice-looking permalinks. There was a small compromise in having that extra “/index.php” in the URL, but I think it is still worth doing and better than no clean permalinks at all.

Tags

Apache, htaccess, mod_rewrite, path_info, permalinks, PHP, Yahoo

Comments

View & Post Comments

Using Template Tags In Wordpress Widgets

January 1, 2009 @ 6:23pm

by Rob Sanchez

When working on our Wordpress theme here, I was looking for a way to create a more custom widget than the default Categories widget, without having much know-how when it comes to Wordpress plugin design. But Google comes to the rescue: this great tutorial from Lonewolf Online on how to create a simple, custom plugin w/ widget. Then you can go crazy with template tags in widgets, even if you are not a pro with plugin creation.

Tags

plugins, widgets, WordPress

Comments

View & Post Comments

jQuery Tablesorter Plugin

October 24, 2008 @ 9:59pm

Updated — February 3, 2009 @ 7:49am

by Rob Sanchez

I read about the jQuery Tablesorter Plugin a while back. It seemed cool enough.

tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

I didn’t bother to try it out, though. I guess I didn’t really believe that it could work so easily.

Here I am months later, in need of some table sorting. So I went ahead and tried it. And it JUST WORKED. As advertised. I did not have to jump through any configuration hoops. Cross-browser? No problem. Developers, this plugin will save you time. Props to Christian Bach who created this plugin.