September 28, 2002, 11:40 PM ET
CSS in the real world: ajc.com's 'News Break'
At work, I'm slowly converting page templates to use CSS instead of messy spacer GIFs, nested tables, and FONT tags. (Our news producers work directly in HTML code, so it's especially important for the code to be clean.) The first victim: The "News Break" section on ajc.com's home page.
Before:
<table width=105 cellpadding=1 cellspacing=0 border=0 bgcolor="336699">
<tr valign=top><td width=105 align=center>
<font face=arial,helvetica size=-1 color=white><b>News Break</b></font></td></tr>
<tr valign=top><td>
<table cellpadding=5 cellspacing=0 border=0>
<tr valign=top bgcolor=white>
<td><a href="/ajc/living/movies/0902/24barber.html"><img src="/ajc/home/images/barbershop0925.jpg" width=100 height=81 border=0></a></font><br>
<font size=1 face=arial,helvetica color=black>Ice Cube</font><br>
<img src="/ajc/images/spg.gif" width=80 height=2><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/movies/0902/24barber.html"> <font face=arial,helvetica size=2>
Jackson wants 'Barbershop' jokes cut.</a></font><br>
<img src="/ajc/images/spg.gif" width=80 height=4><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/0902/25bodrov.html"> <font face=arial,helvetica size=2>
Russian actor missing in avalanche.</a>
</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/sports/0902/25stewart.html"> <font face=arial,helvetica size=2>
Tony Stewart cleared of Bristol accusation.</a>
</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/news/0902/24gator.html"> <font face=arial,helvetica size=2>
Gator bites off Fla. man's arm.</a></font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/business/market/0902/24wallstreet.html"> <font face=arial,helvetica size=2>
Dow hits four-year low.</a></font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/sports/0902/24webster.html"> <font face=arial,helvetica size=2>
Steeler great Mike Webster dead.</a> </font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/music/0902/24abba.html"> <font face=arial,helvetica size=2>
10 reasons why Abba is still popular.</a><font size=1 face=arial,helvetica color=#cc0000"> POLL</font><br>
<hr width=75% noshade size=1>
<font size=1 face=arial,helvetica color=#cc0000">EMMYS</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/tv/0902/23emmys.html"> <font face=arial,helvetica size=2>
Photo galleries from the awards.</a><br>
</td></tr></table></td></tr></table>
After:
<div id="newsbreak">
<h3>News Break</h3>
<p><a href="/ajc/sports/braves/0902/28braves.html"><img src="/ajc/home/images/minitiger0929.jpg" width="100" height="89" border="0" alt=""></a></p>
<ul>
<li><a href="/ajc/sports/0902/29ryder.html">Tiger leads U.S. rally at Ryder Cup</a></li>
<li><a href="/ajc/sports/0902/27suspended.html">UGA, Tech, GSU players suspended</a></li>
<li><a href="/ajc/news/0902/29major.html">Former Prime Minister John Major admits 4-year affair</a></li>
<li><a href="/ajc/sports/0902/29huggins.html">Cincinnati coach Huggins suffers heart attack</a></li>
<li><a href="/ajc/business/0902/28adnext.html">And now, TV ads in the bathroom</a></li>
<li><a href="/ajc/news/0902/28videomom.html">Mom taped hitting child faces 2nd arrest</a></li>
</ul>
</div>
Which code would you rather work in when there are four breaking news stories on the wire simultaneously and millions of readers are flooding your site, expecting up-to-the-minute updates?
Style sheets let online news producers focus on news. If you manage a news site, do yourself a favor and separate content from presentation.
September 28, 2002, 9:26 PM ET
New feature: Blogroll on home page
I've finally added a blogroll to this site -- that is, a collection of links to other sites that are similar to this one. Thanks to blo.gs, I'm able to display the last-updated time of each blog and rank them in descending order by that value. The list is updated automatically on the 45-minute mark, 24 hours a day, and it appears only on the home page in order to reduce clutter.
God knows this will be a huge time saver for me, considering how often I check these blogs throughout the day. I hope it'll help you, too.
Unfortunately I wasn't able to add all my favorite blogs, because not all of them ping blo.gs or weblogs.com when they're updated. (Pinging is a way of alerting a central server when your blog has changed. The server keeps a record of blogs' last-updated times and provides this information to anyone who wants it.) If you operate a weblog and don't offer this functionality, I encourage you to check it out. No programming needed; just go to the blo.gs ping form page and submit your information into that quick-and-easy form each time you update. Of course, the process can be automated as well.
On a more technical note: Because the blogroll is a list of items, it's coded as such; it uses the unordered-list tag, UL. Therefore it's accessible and semantically correct. Also, I've made the timestamps into label elements so users of modern graphical browsers can click on them. (See yesterday's entry.)
