My first HTML5 challenge was video, and a challenge it was. For as browser- and code-friendly as HTML5 is, getting all of the pieces to fall into place was still a daunting task. Thankfully, the internet provided all the answers that I needed. The problem, however, was asking the right questions. There was no one answer that I could find, so I’m writing it. This isn’t new information, it’s an assembly of all the pieces I needed to get video working correctly on my site.

Obviously, there are a number of browsers out there vying for market share, and to distinguish themselves from one another, they have collectively made the decision to not support a single standard of, well, anything. Video is no exception. The unfortunate truth is that you’re going to need four different video formats if you want to ensure that everyone is going to see your video. The good news is that HTML5 makes that a snap!

1 – HTML5 markup
Mark Pilgrim handles the gritty details of what video formats to choose and why (including how to encode your video), but after that, you need markup:

<video controls width="500" height="300" poster="poster.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
<source src="video.webm" type="video/webm" />
</video>

This will display whichever version the browser can handle, with video controls, using the specified image as the first screen. Between MPG4, Theora/Vorbis and WebM, that takes care of playing your video on every browser capable of supporting HTML5, which at this point, is most of the market. Something else to note here is that iOS 3 apparently only reads the first <source /> tag, so you need to make sure that your MPG4 video source is first on the list (as in the example). This problem was fixed in iOS 4, but if it were as easy as a new version, you’d never again have heard “IE6″ after October 2006.

2 – Flash, for older browsers (and by “old” I mean “Internet Explorer”)
Next up, you’ll want your Flash. There are a number of ways to handle Flash, so I’m not going to get into them here. Whatever you were using to display Flash before will continue to work. You want to place it right before the </video> tag. If the browser doesn’t support HTML5, it will ignore the <video> tag and execute your Flash. Problem solved!

3 – A few stragglers
We’re three quarters of the way there. Just two more things to note:

A) MIME types! These are really really important. Make sure the MIME type you’re declaring in your <source /> tag is actually what you’re serving. If you’re hosting your videos on S3, make sure you set your MIME types for each file to what they should be. S3 defaults to application/octet, which will cause Firefox to stare blankly at you while you wonder why there’s a hole where your video should be. Other browsers fail a bit more gracefully.

B) The poster attribute. Again, iOS 3 is a troublemaker. It’s not that it ignores the poster attribute altogether (which would actually be nice) – no, it dumps it over the controls and wreaks havoc on the ability to play the video. After wading through a lot of conversations where people wondered if there was a solution, a coworker and I finally hit on a solution that works. I hate error trapping for one browser, but if you know you’re going to have people using it, then it’s a necessity.

Basically, we check for iOS 3, and create the video tag with JavaScript:

var osString = navigator.appVersion;
if (osString.indexOf("OS 3_") != -1 && osString.indexOf("like Mac") != -1) {
// create video tag for iOS 3
document.write('<video controls="true" width="500" height="300" id="video_player">');
}else{
// create video tag for the rest of civilization
document.write('<video controls="true" width="500" height="300" poster="/alumni/giving/images/The_Campaign_Final-poster.jpg" id="video_player">');
}

And that’s all there is too it. Hope this saves you some time.

Both of these sites are built in RedDot CMS (actually, it’s OpenText CMS now, but we still call it RedDot).  From January to, well, now, the majority of my job has been converting the old static site to RedDot.  I can’t say that this process has been an easy one.  I was responsible for the creation and implementation of the bulk of the pages and this required me to learn a completely new system that was coded in Germany.  I experienced European coding a few years ago after IQ outsourced a project to Poland.  Most of the syntax of languages is written in English (with the random Hebrew PHP error message), but that doesn’t mean that people who speak Polish or German are going to code in English.  What might seem like a perfectly logical variable name in Polish probably isn’t going to make nearly as much sense when it’s been run through Babelfish.  Likewise, Germans don’t have the same knack for writing concise English description as a native English speaker does.  The major impediment to learning RedDot was figuring out what exactly all the constructs inside it actually did, because the names given to a majority of them didn’t seem to accurately describe them.

The other major hurdle was that the team that manages the RedDot server is a school-wide resource, and a number of other departments were designing and launching sites in RedDot, often without the benefit of a developer.  This meant that the RedDot team was not only trying to build and launch a number of other sites, they were tackling my near-incessant questions, and dealing with an upgrade that resulted in a lot of things breaking.  On top of that, they were outsourcing major issues to one of the few RedDot vendors, a company of 15 people located somewhere near Vancouver.

So, here are the run-downs for both sites.  A quick note concerning the publishing:  Our RedDot setup has two publication packages: Staging and Production.  Additionally, we have three servers: Development, Staging and Production.  As these terms relate, it’s a bit confusing.  Ideally, RedDot Staging publishes to the Development server, and RedDot Production publishes to the Staging server.  The reason for that is that the Staging server pushes everything to the Production server once every 15 minutes.  We don’t have direct access to the Production server.

Giving to Wharton

This site actually went smoothly from start to (almost) finish.  The site itself was populated with content and, for all intents and purposes, ready to launch by the end of May.   As the project neared go-live, a number of the stakeholders came forward with content changes and section revamps.  All of these were handled fairly smoothly, and the only hang-up came right before go-live when we realized that the Staging publication package and the Production publication package were not mirroring each other.  The interim solution has been to publish both packages to the Development server, make necessary changes, and push them to the Staging server manually.

Wharton Alumni

This part of the project was a bear.  From the very beginning, the installation was fraught with problems that we kept attempting to address.  It seemed at every point that once one was fixed, two more would crop up.  Finally, nearing the go-live point, we decided to scrap the entire thing and re-create it.  This turned out to be a very effective tactic.  Scrapping 8 months of development wasn’t an easy argument to win, but the result was a completed site in just over two weeks.  The 8 months of combating bugs gave me a lot of good insight into RedDot’s inner workings, so once I had a bug-free environment, construction of the site went very smoothly.  The same publishing problem from the Giving site showed up, however, and at the moment, we’re still publishing manually.

All in all, it’s been a long, strange trip, but the reception has been amazing.  The new site is worlds better than the previous one, and it’s given the staff at External Affairs a much easier way to update their changing information than they had before.

The Wharton Magazine site itself is running RedDot CMS, but the blog segment has been running on WordPress for around two years. In its previous incarnation, it was a point of contact for the editorial staff. This concept was expanded to include relevant non-magazine article updates from faculty and alumni.

In the initial concept phase, I suggested the possibility of using WordPress MU to create a new blog for each user and then having the main blog page aggregate the posts. Within a few days of that proposal, WordPress 3.0 was released, and after a review of the features, I decided that the robust multi-user setup was actually too much bang for the buck and scaled back my proposal to a simpler WordPress installation with multiple contributing users.

Most of the functionality comes straight from the proverbial box. I developed a simple plugin for the sidebar in order to display the editor’s most recent post in a styled box.  There is also a custom work-around to allow a specific author’s most recent posts and user profile to be two separate pages.  User profile pages is one of the things that I wish WordPress did a bit better, but the solution I came up with is fairly simple to use but not very intuitive, so I wouldn’t recommend it as a good solution.

Going forward, I’d love to spend some time playing with the Contributors section on the sidebar.  As it stands, it’s simply a text widget that I’ve hard coded.  I’d like to expand that into an automated widget that the administrator (which at the moment is me) can control from the back end.

Recent User Posts

Recent Category Posts

Both of these are widgets that do basically the same thing, so I’ll describe them together here.

In developing the new Wharton Magazine blog, we needed a widget to display the Editor’s most recent post.  I poked around for a bit, and realized that there really wasn’t a plugin to handle this, so the need for one was obvious.  After getting the basics down, I decided that it actually had more applications than just a single post, and started adding features.

So, the end result is two widgets.  Enter a title, select the user/category you want to display, enter the number of posts to display, and select if you want to display a link to the user/category and the time and date.  Not complicated to use and does just what it says it does.

Before I release it to the WordPress Plugins Codex, I’d like to see if anyone wants a shot at debugging or can offer any tips or suggestions.  Files are at the links above, and thanks in advance!

I was happy to see that WordPress merged the base and MU codebases into one, fully-functional software package.  The upgrade wasn’t as smooth as I’d have liked it, but I guess they figure that if you’ve managed to install and maintain MU, you shouldn’t have a problem editing PHP and .htaccess files on your own (as opposed to automating what boils down to three lines of code).   Stupid me misread one of the steps and wound up with no images displaying sitewide for 24 hours, and wondering if I was going to have to re-import all of them.  Once I figured out my mistake, though, the problem seemed pretty trivial.  Other than that, installing and upgrading are remarkably simple.

WordPress has been getting better and better for the end user and administrator since I began using it about two years ago, and now that I’ve begun really getting into the heart of it, I’m really glad that the development has gone toward all of those things that I wish it did.  It’s like they’re reading my mind!

So, on the horizon are three projects that I’d love to tackle.  One is a freelance job that I’m hoping pans out, because it’s a site that I’d love to do.  The second is here at Wharton, which again, I’d love to do.  The third is a complete revamp of PennridgeAlumni.com, a site that I’ve been studiously avoiding for far, far too long.  Redoing it entirely in WordPress now seems like a possibility, and I’m already working on a development version of that.  Let’s see how far I get…

However, I’ve just completed a website for my Friendly Local Gaming Store, Alternate Universes.

Alternate Universes had an existing website, but it was built using static HTML that wasn’t very easy to update. The new site uses WordPress as a CMS, offering much greater ease of updating, as well as being able to update multiple pages using a single post. This allows for various pages to keep important content without the need to move content to those pages or clutter up the homepage for weeks or months.

Individual sub-pages are coded to include their related categories, allowing for general information for that page and a listing of pertinent posts.

The old site had an outdated calendar system, so I integrated Google Calendars using the wpng-calendar plugin for the site’s sidebar, as well as a static instance of the full calendar. This allows for much easier management and import of calendar data.

I converted the old phpBB3 forum to myBB, which was a bit more difficult than anticipated, even with a conversion app. The app didn’t accurately convert the forum settings, which necessitated a lot of snooping around in the database to get everything matched up. Once I found the broken relationships, though, it went rather quickly. There were also a few glitches with forum caches and settings files needing to be rebuilt, but all-in-all, the structure converted quite nicely. The new system will very aggressively tackle the issues they’d been having with Russian spambots filling their forum with Viagra ads and the like.

And finally, I get to take credit for the design. I don’t tackle design very often, because this is about the best I’m capable of.

Design: Now, we all know that designers love gradients and non-repeating background textures and non-Euclidean pattern fills and other things that drive developers absolutely batty, but in this case, developers have the advantage: EMAIL PROGRAMS DON’T DO BACKGROUND IMAGES. Solid colors, folks. That’s all you get. That also means that any text blocks need to be a perfectly rectangular spaces with a single color behind it – no images bleeding into the text area. NONE! It also means that dropshadows around expandable areas are right out, because they require a repeating background image.

Coding. Coding a template is the HTML equivalent to speaking in Olde English – or conversing with your local Pikey. Yes, it’s HTML and you’ll recognize some of it, but this is not what you’re used to.

For starters, scrap the <html> and <body> tags and everything in the <head> section. Google hates ‘em.

Second, this is HTML 4.01 transitional. Not XHTML. And you don’t get to use <div> tags or style attributes. That’s right, TABLES!

Third, you can’t use rowspans or colspans. Now you’re not laughing so hard at that Neanderthal comment, are you? Whoever came up with this system was wholly incapable of purchasing insurance online.

So, what does that leave you with? Not much. If you haven’t given the designer cause to hate you, you’ll probably have a nice two-column layout with a header and footer. This means you need (at minimum) 5 tables:

1) The header table. Since there’s no colspans, it has to be its own table.
2) The body table, with two cells.
3 and 4) The column tables, in body table cells 1 and 2. You’ll need these for padding.
5) The footer table. Just like the header.

A note on padding: Need 10 pixels of padding on just the left? Best bet is to use another cell that’s 10 pixels wide and contains only blank.gif.

This is what your code is going to look like:

<table width="500" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td width="500" height="100"><img src="http://www.{DOMAIN}.com/images/newsletter_header.jpg" width="500" height="100" border="0"></td>
 </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td width="250" bgcolor="#EEEEEE" valign="top">
   <table width="250" border="0" cellspacing="0" cellpadding="10">
    <tr>
     <td width="250">
      Lorem Ipsum!
     </td>
    </tr>
   </table>
  </td>
  <td width="250" bgcolor="#CCCCCC" valign="top">
   <table width="250" border="0" cellspacing="0" cellpadding="10">
    <tr>
     <td width="250">
      Dolor Sit Amet!
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td width="500" height="100"><img src="http://www.{DOMAIN}.com/images/newsletter_footer.jpg" width="500" height="100" border="0"></td>
 </tr>
</table>

Yes, it’s a fun world of valign and bgcolor tags that will likely grant you the ability to see the small chittering things that lurk beneath your floorboards. But wait! There’s more! In addition to a copy of our home game, you also get to use the <FONT> tag for the first time since Clinton was President! Just a quick review of the syntax that no one will blame you for forgetting:

<font face="Arial, Helvetica, sans-serif" color="#333333" size="1">Please, why?</font>

As for the font sizes, well, you’re just going to have to play with it and see what works.

Finally, to summarize:

1. No HTML head or body tags.
2. Besides that, make it compliant.
3. Tables tables tables.
4. No rowspan or colspan tags.
5. No style declarations whatsoever.
6. Tables within tables for padding.
7. Font tags.
8. Dogs and cats living together.
9. Mass hysteria.

If you need a good example, Here’s the first BCASC newsletter code:

<table width="500" cellspacing="0" cellpadding="0" align="center">
 <tr>
  <td>
   <table width="500" cellspacing="0" cellpadding="0">
    <tr>
     <td width="500" height="86"><img src="http://newsite.bcasc.org/images/newsletter_header.jpg" width="500" height="86" border="0" alt=""></td>
    </tr>
   </table>
   <table width="500" cellspacing="0" cellpadding="0">
    <tr>
     <td width="4" height="41"><img src="http://newsite.bcasc.org/images/newsletter_header_left.jpg" width="4" height="41" border="0" alt=""></td>
     <td width="300" height="41" valign="bottom">
      <table width="300" cellspacing="0" cellpadding="0">
       <tr>
        <td width="10" height="41"> </td>
        <td height="41"><font face="Arial, Helvetica, sans-serif" size="3" color="#4B749E">Empowering Individuals, Creating Community</font></td>
        <td width="10" height="41"> </td>
       </tr>
      </table>
     </td>
     <td width="192" height="41" valign="bottom" bgcolor="#E8EEF7">
      <table width="192" cellspacing="0" cellpadding="0">
       <tr>
        <td width="10" height="41"> </td>
        <td><font face="Arial, Helvetica, sans-serif" size="3" color="#D27904">Highlights</font></td>
        <td width="10" height="41"> </td>
       </tr>
      </table>
     </td>
     <td width="4" height="41"><img src="http://newsite.bcasc.org/images/newsletter_header_right.jpg" width="4" height="41" border="0" alt=""></td>
    </tr>
   </table>
   <table width="500" cellspacing="0" cellpadding="0">
    <tr>
     <td width="1" bgcolor="#FAFAFA"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#F0F0F0"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#E2E2E2"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#CECECE"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="300" valign="top">
      <table width="300" cellspacing="0" cellpadding="10">
       <tr>
        <td>
         <font face="Arial, Helvetica, sans-serif" size="2" color="#444862">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in nibh id diam varius laoreet id nec odio. Cras sed libero sed justo feugiat sodales in vitae nunc. Fusce non sem eget nunc luctus vulputate non a sem.<br><br>
          Sed metus enim, rutrum at adipiscing a, tempor egestas orci. Nam ornare, eros ac aliquam accumsan, libero orci porta justo, non consequat erat erat interdum purus.<br><br>
          Aenean in mi facilisis tortor sagittis pharetra. Morbi orci sem, fringilla ac viverra nec, pulvinar vitae mauris. Pellentesque sapien ligula, malesuada eu facilisis fringilla, rutrum sollicitudin magna.<br><br>
          Imperdiet, orci sodales interdum sodales, tellus ligula malesuada odio, ac egestas enim mi ac odio. Ut nulla sem, posuere ac porttitor a, interdum ut nulla.
         </font>
        </td>
       </tr>
      </table>
     </td>
     <td width="192" valign="top" bgcolor="#E8EEF7">
      <table width="192" cellspacing="0" cellpadding="10">
       <tr>
        <td>
         <ul>
          <li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.</font></li>
          <li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Proin varius venenatis ullamcorper. Vivamus ut nisl justo, at porttitor.</font></li>
          <li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.</font></li>
          <li><font face="Arial, Helvetica, sans-serif" size="2" color="#444862">Proin varius venenatis ullamcorper.</font></li>
         </ul>
        </td>
       </tr>
      </table>
     </td>
     <td width="1" bgcolor="#CECECE"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#E2E2E2"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#F0F0F0"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
     <td width="1" bgcolor="#FAFAFA"><img src="http://newsite.bcasc.org/images/blank.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
   </table>
   <table width="500" cellspacing="0" cellpadding="0">
    <tr>
     <td width="500" height="114"><img src="http://newsite.bcasc.org/images/newsletter_footer.jpg" width="500" height="114" border="0" alt=""></td>
    </tr>
    <tr>
     <td width="500">
      <font face="Arial, Helvetica, sans-serif" size="1" color="#444862">
       Address goes here<br>
       %%unsubscribe%%
      </font>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>

I’m sure I could write an entire gripping Dean Koontz-style novel on this subject, but this should serve as a good starter guide. Also, no one would want to read anything that resembled a Dean Koontz book, so I guess I’ve spared you that horror. One horror per day is my limit, and learning to code an email template is pretty much akin to handing the keys to your brain to Cthulu and then drinking a gallon of Jolt Cola. Enjoy!

Here’s a demo of everything I’m about to discuss.

the musical stylings of Eerwyrm will revolt you.

Recently, a number of clients have asked for an complex dynamic image-gallery-like page for a few different applications like portfolios and staff directories. The CMS I work with allows me to build a complex page for the client to load up with content, but the front end is where all the magic happens.

The first of these sites featured an artistic design and required a portfolio for landscape projects, so I wanted to go with an elegant flowing effect. There are two primary element to this concept: the navigation and the content. The content itself can be further divided to images and text, both of which are important elements for this particular layout.

The navigation consits of two columns of thumbnails down the side (or wherever you need them – for this example they’re on the side). They live in a div that’s floated to the right. Here’s what that code looks like:

Each thumbnail is tied to a div which is given a different ID. (link_1, link_2, etc.). In the script, we bind each of those IDs to a click event:

	$('#link_1').bind('click', {id:'1'} ,clickHandler);
	$('#link_2').bind('click', {id:'2'} ,clickHandler);
	etc.

When anything in that div is clicked, it fires the click event, aptly named clickHandler:

	var clickHandler = function(link){
		$('.main').fadeOut().pause(250);
		$('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
		$('#main_' + link.data.id).pause(250).fadeIn("slow");
	}

Important safety tip: That pause() function is there to slow things down so fadeouts don’t cross:

	$.fn.pause = function(duration) {
	    $(this).animate({ dummy: 1 }, duration);
	    return this;
	};

Now, on the content side, it’s just a matter of stacking up DIVs with your content in them and giving each div a unique (and patterned with the same id structure as your thumbnail IDs) ID (main_1, main_2, etc.). Granted, if you’ve got a lot of data, you’re probably better off with a system to import it via AJAX, but for this instance, we’re going to cover a smaller data set.

So, we’ve got our sidebar:

<div id="sidebar">
 <div id="link_1"><img src="images/thumb_1.jpg" alt="" /></div>
 <div id="link_2"><img src="images/thumb_1.jpg" alt="" /></div>
</div>

And we have our content:

 <div id="content">
  <div id="main_1" class="content_div">Content div 1</div>
  <div id="main_2" class="content_div">Content div 2</div>
 </div>

Now we just need a little styling on the content divs to hide them:

 .content_div { display:none; }

Then it’s just a matter of displaying your first div when the page loads:

	$(window).load(function(){
		$('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
		$('#main_1').pause(250).fadeIn("slow");
	});

The $(window).load call is important. You don’t want this to fire right on (document).ready if there are any images in your first div, because they will likely not be completely loaded and the code won’t know how big that div is going to be.

so, here’s the simple code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
   #sidebar { width:230px; float:left; }
   #sidebar div { float:left; margin-left:5px; }
   #content { width:500px; float:left; }
   .content_div { display:none; }
  </style>
  <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
   <!--
    $(document).ready(function(){

     $.fn.pause = function(duration) {
      $(this).animate({ dummy: 1 }, duration);
      return this;
     };

     var clickHandler = function(link){
      $('.content_div').fadeOut().pause(250);
      $('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
      $('#main_' + link.data.id).pause(250).fadeIn("slow");
     }

     $(window).load(function(){
      $('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
      $('#main_1').pause(250).fadeIn("slow");
     });

     $('#link_1').bind('click', {id:'1'} ,clickHandler);
     $('#link_2').bind('click', {id:'2'} ,clickHandler);
    });
   -->
  </script>
 </head>
 <body id="top">
  <div id="sidebar">
   <div id="link_1"><img src="images/thumbnail.jpg" alt="" /></div>
   <div id="link_2"><img src="images/thumbnail.jpg" alt="" /></div>
  </div>
  <div id="content">
   <div id="main_1" class="content_div">Content div 1</div>
   <div id="main_2" class="content_div">Content div 2</div>
  </div>
 </body>
</html>

The work-around I use for this problem is to head a different route. I know I can’t center horizontally with a DIV, so I stop trying and learn to love the space. I just use a blank .gif the same height as my div and then use the style tag right on the IMG to set the background to my image with a position of center center. Viola, instant centered image!

<div style="height:200px; width:200px;"><img src="images/blank.gif" style="background:url(images/thumbnail.jpg) center center no-repeat;" alt="" /></div>