Amped about Web Standards

Web developers need to have a tons of languages and syntaxes in their short term memories – HTML, CSS, Javascript, PHP, MySQL, Microformats, Regular Expressions – its a lot to know and remember.

When I studied for big exams in college, my favorite technique was to create an all encompassing one-page sheet with everything I needed to know for that exam. The act of creating that page was the process of reviewing for the exam, and then I had something to refer to right up until exam time, aid in the memorization.

As web developers trying to keep up with all of the technologies in our toolbox – we need all the help when can get. Dave Child has put together a thorough and impressive set of “cheat sheets” that I highly recommend.

Head on over to Dave’s site addedbytes.com/cheat-sheets to download the ones you need. Print and pin them up next to your monitor for the next time you can’t remember the syntax for the various box model attributes in CSS. If you find them useful, don’t forget to get Dave something from his Amazon wish list as a way to say thanks.

A Microformat is a bit of syntactic HTML and CSS for the purpose of making data on your webpage readable by both humans and machines.

There are currently four popular and well-defined microformats:

• hCalendar – a description of time based events
• hCard – business card style information about a person
• hReview – used to represent reviews of movies, books, and more
• XFN – Xhtml Friend Network, representing social relationships thru hyperlinks

Here’s a technical example of an hCalendar microformat:

<abbr class="vevent">
<a href="http://www.nuggetshoops.com" class="url">
http://www.nuggetshoops.com/</a>
<span class="summary">Denver Nuggets Playoff Game</span>:
<abbr class="dtstart" title="2007-04-28T018:00:00-07:00">
April 28 from 6:00pm MDT</abbr>-
<abbr class="dtend" title="2007-04-28T021:00:00-07:00">9:00pm MDT</abbr>,
at the <span class="location">Pepsi Center, Denver, CO</span></abbr>

Which produces this microformat:

http://www.nuggetshoops.com/
Denver Nuggets Playoff Game:
April 28 from 6:00pm MDT-
9:00pm MDT,
at the Pepsi Center, Denver, CO

Okay, hopefully you now have a general understanding of what Microformats are. (Hint: If you don’t follow that last link)

Now, what can you do with them?

I’m going to walk thru a real-world example, and we’ll discuss the tools you’ll need to do so.

In this tutorial/example, you are a Denver Nuggets NBA fan, and you would like to add a few of their remaining games to your online calendar. Even if you aren’t an NBA fan, hopefully by the time we are done, you will understand how to seek out and use microformats that you are interested in.

Tools you will need:

• Recent version of Mozilla Firefox (preferably 2.0+)
• Google account (we’ll use Google’s online Calendar)
• Firefox Operator Plugin (Add-on)

Okay, let’s get started: (all links will open in a new window)

1. – Download and install Firefox
   
   Follow the basic install instructions. The current version as of this article is 2.0.0.3

   Mac or Linux user? Download Firefox from here.

2. Create a free Google account
   
   Note: If you already use Gmail or another Google service, you already have an account and can skip this step.

   Once you have your account, you can check out the Google Calendar app, but you don’t need to do anything with it yet.

3. Add the Operator Add-on to Firefox
   

   The current version of Firefox needs a little assistance to make it easy to work with Microformats. There are several add-ons that help you view and interact with Microformats, but the Operator Add-On by Michael Kaply is the one I recommend. As of this writing, the latest version is 0.7.

   Click on the link, scroll down and click on the green Install Now button. Firefox will have it installed in a matter of seconds for you – restart Firefox and you are ready for the next step.

4. Okay, you now have all the tools you need to make use of a Microformat – specifically, we are going to add the information for an upcoming event to your Google Calendar. Visit the NuggetsHoops.com Season Schedule with your Firefox browser. You’ll see the results of all games from the current NBA season. Scroll down to the bottom of the page to see the remaining games. As of this writing, there are only 5 games left, but all playoff games will also be added to this page when they are announced.
   
   
   Note: If you run across the post in the offseason, there will be new events on this same page when the next NBA season restarts in October/November.

   In the screenshot above, you will notice that I highlighted a button on the Operator toolbar that shows you that the Add-on has detected 3 Calendar events that you can add to Google Calendar, among other apps in the near future. The events are ordered from next to later, top to bottom in the pulldown that appears when you click on the button. This is the Operator Add-on at work, letting you know that it has detected Microformats on the current page and it is prepared to help you use them. Pick one of the games and left-click with your mouse. If you are currently logged into your Google Account, you will see the detail page for a new Event entry, with all of the required details already filled in. Just click “Save Changes”, and you’ve successfully used an hCalendar Microformat to create an event in your Google Calendar. Click on the Google Calendar link in the top left corner to see how it looks.

   You can now go back to the NuggetsHoops.com Season Schedule and add more events in the same way, or better yet – go explore other websites and see what other Microformat enabled websites you can find and now easily take advantage of! (Hint: The social calendar website – Upcoming.org is a great place to start!)

If you are just getting started with working with microformats on your website, below are links to two highly recommended “cheat sheets” that have been put together.

Both are available in an incredibly handy one-page PDF, suitable for printing and hanging up near your work area.

1. Microformats Cheat Sheet from Brian Suda, creator of many incredible microformat utilities.
2. Microformats Cheat Sheet From Dave Child, of ilovejackdaniels.com

Enjoy!

I’ve run an NBA fansite called NuggetsHoops.com since 1995. With equal passions for the Denver Nuggets and web design, I’ve poured a lot of time and effort into the website. Every month, there are more and more “blogs” dedicated to the Denver Nuggets, as their popularity has grown over the past few seasons with the additions of NBA superstars Carmelo Anthony and Allen Iverson to the roster. So, partly to be different, and partly to create interesting web development challenges, I usually focus my fansite on fun features that provide Nuggets fans with information presented in unique and hopefully useful ways.

One of those features is a fairly standard Schedule & Results page that shows how the Nugget fared in every game of the season, along with the remaining games on the season’s schedule. What makes it currently unique is the fact that each remaining game on the schedule is an hCalendar Microformat. A future article will show you exactly how you can take advantage of this feature, but for now, I will assume you know how to utilize Microformats, and you are here to see how to create them as a web developer.

For this example, we are going to access a MySQL database with information about remaining games, then use PHP code to dynamically display it. At the same time we are outputting the dynamic schedule information, we are going to add the very useful hCalendar microformat. The purpose of this article is not to teach you PHP, MySQL, or even CSS – the focus here is a real world example that you can add microformat markup to.

First, let’s perform some date logic to get the current date, then compare it with dates in a schedule database table to get the remaining games for the current season.

 PHP | 
  |
?
 
01
<?php
02
// Display Remaining games
03
$today = getdate();
04
$cmpDate = $today['year'] . '-' . $today['mon'] . '-' .
05
           $today['mday'] . ' ' .
06
           $today['hours'] . ':' . $today['minutes'];
07
$monthDisplayed = 0;
08
 
09
$sql = "SELECT * from schedule where start_date > '".
10
        $cmpDate."'";
11
$result=db_query($sql);
12
?>

Now we have a list of rows to iterate over and display. This example is already in the middle of an HTML table, so we’re just going to create new tr tags for each remaining game.

 PHP | 
  |
?
 
01
<?php
02
while ($row = mysql_fetch_array($result)) {
03
  $gameDate = date('D j', strtotime($row['start_date']));
04
  $gameTime = date('g:i A', strtotime($row['start_date']));
05
  $gameEnd = date('g:i A',
06
  strtotime('+2 hours 30 minutes',
07
            strtotime($row['start_date'])));
08
  $month = date('F', strtotime($row['start_date']));
09
 
10
  $dtstartM = date('Y-m-dTG:i:sO',
11
                   strtotime($row['start_date']));
12
  $dendM = date('Y-m-dTG:i:sO',
13
                strtotime('+2 hours 30 minutes',
14
                strtotime($row['start_date'])));
15
 
16
  if ($month != $currMonth)
17
    $monthDisplayed = 0;
18
 
19
  // Check if we need to display a new month header row
20
  if (!$monthDisplayed) {
21
    $currMonth = $month;
22
    $monthDisplayed = 1;
23
 
24
    echo '<tr class="rowHeaderSchedule">';
25
    echo '<td>' . strtoupper($month) . '</td>';
26
    echo '<td>OPPONENT</td>';
27
    echo '<td><div align="left">TIME (MT)</div></td>';
28
    echo '<td colspan="2">LOCAL TV</td>';
29
    echo '<td width="6"></td>';
30
    echo '<td>NAT TV</td>';
31
    echo '<td>NOTES</td>';
32
    echo '</tr>';
33
  }
34
?>

Let’s gather info about the current game for display to the webpage, and for the hCalendar microformat.

 PHP | 
  |
?
 
01
 <?php
02
  // Check if we are processing an away game
03
  $subject = $row['subject'];
04
  $patt = "/.*(@|vs.)(.*)/";
05
  preg_match($patt, $subject, $opp);
06
  $opponent = '';
07
 
08
  if ($opp[1] == "@") {
09
    $opponent = 'at ';
10
    $eventInfo = 'Denver Nuggets ';
11
    // Do not current have this info in the database
12
    $eventLocation = ' ';
13
  }
14
  else {
15
    $eventInfo = 'Denver Nuggets vs. ';
16
    $eventLocation =
17
     'Pepsi Center loc: 1000 Chopper Cir Denver, CO 80204';
18
  }
19
 
20
  // Append the opponent team name
21
  $opponent .= $opp[2];
22
 
23
  // Check if the current game is broadcast in HD
24
  if ($row['hdtv'])
25
    $hdTVimage = '<img src="/images/hdtv_logo_sm.jpg" width="24" height="18" alt="HDTV" />';
26
  else
27
    $hdTVimage = '';
28
?>

Now its time to create each remaining row in the schedule – and finally we get to create an hCalendar microformat. First, I’ll show you the code, without the hCalendar markup, for comparison.

 PHP | 
  |
?
 
01
<?php
02
  // Game - no hCalendar microformat
03
  echo '<tr class="rowRegularSchedule">';
04
  echo '<td>' . $gameDate . '</td>';
05
  echo '<td>' . $eventInfo . $opponent . '</td>';
06
  echo '<td>' . $gameTime . '</td>';
07
  echo '<td><a href="http://www.altitude.tv" target="_blank">'. $row['lbroadcast'].'</a></td>';
08
  echo '<td>'.$hdTVimage.'</td>';
09
  echo '<td width="5"></td>';
10
  echo '<td>'. $row['broadcast'] . '</td>';
11
  echo '<td>' .$eventLocation . '</td>';
12
  echo '</tr>';
13
} // End while
14
?> 

Pretty basic HTML, displaying our game information dynamically using PHP.

Finally, we’ll walk thru the microformat version. We start by creating a new row with the required class value of vevent. To give the event a name we use the summary class in a span element. Notice that I put a portion of the information within an abbr tag with the class of “mhide”. With CSS, I hide anything within an element using the mhide class from human eyes. I’ve recently read that the latest theory is to not hide any microformat information, because it looks like trickery to search engines like Google, and they may ding your page ranking for it. At this point, I’m not going to worry about that – I’d rather have a combination of usefulness and style – I want my microformat to provide event information without displaying more details than I need on the actual webpage. There may be a better way to handle this issue in the future, so I just wanted anyone following thru this example to be aware.

 PHP | 
  |
?
 
1
 <?php
2
  // microformat - hCalendar
3
  echo '<tr class="rowRegularSchedule vevent"><td>' . $gameDate . '</td>';
4
  echo '<td><span class="summary"><abbr class="mhide">' . $eventInfo . '</abbr>' . $opponent . '</span></td>';

Now back to our partially defined microformat – so far we just have declared that we have an event and we’ve given it a title. Next, we’ll define the event’s start time and end time, which are the dtstart and dtend classes. We’ll display the start time and hide the end time since I don’t want to display that on the webpage. The abbr element has a useful title property where we will put the special date/time format that the microformat requires. (i.e. March 30th, 2007 at 8:00 MT is formatted as “2007-03-30T20:00-07:00″. The -07:00 provides the timezone information because it is the offset from Universal Time for the Mountain timezone) Then the part we want to display simply goes within the abbr element itself.

 PHP | 
  |
?
 
1
2
  echo '<td><abbr class="dtstart" title="' . $dtstartM .'">' . $gameTime . '</abbr><abbr class="mhide dtend"';
3
  echo 'title="' . $dendM . '">' . $gameEnd . '</abbr></td>';
4
  echo '<td><a href="http://www.altitude.tv" target="_blank">'. $row['lbroadcast'].'</a></td><td>'.$hdTVimage.'</td>';
5
  echo '<td width="5"></td><td>'. $row['broadcast'].'</td>';

The last property of the hCalendar microformat that I will make use of in this example is location. Then, once the tr element is closed, the hCalendar implementation is completed.

 PHP | 
  |
?
 
1
2
  echo '<td><span class="mhide location">'.$eventLocation.'</span></td>';
3
  echo '</tr>';
4
    // End hCalendar Microformat
5
} // End while
6
?>
7

There you have it. Embedded hCalendar events for each game, that are both human and machine readable, output as valid HTML.

If you found this useful and would like me to make the source code available for download, just leave a comment.