I took a class a long time ago on CSS. The instructor kept saying “sheet styles.” I’ve said “alt tags” before I realized how wrong that was. So here I am arming myself and others with the right words.

Attributes: properties of HTML elements.

href
title
class

Rule, selector, property, value, declaration:

Linked stylesheet:

or

Embedded stylesheet:

p { padding-top: 1em;}

Inline stylesheet:

Attribute selector: style based on attribute, title, href, class or value of that attribute; uses “square brackets.”

h1[title] { color: #f00; }

Child selector: style elements that are direct descendants of another element; selectors are separated by “greater-than symbol.”

h1 > span { color: #ccc; }

Adjacent sibling selector: style elements according to an element that precedes them; selectors are separated by “plus symbol.”

h1 + p { color: #aaa; }

Class selector: rule(s) for an element(s) put all together and can be called with a name. Can be used more than once.

p.story { padding-top:2em; color:#ddd;}

ID selector: rule(s) for an element put all together and given a name. Can be used only once per page.

#sidebar { border:1px solid #ddd;}

Contextual selector: two or more simple selectors separated by space.

p b { color: #f00; }
would make the bolded items under paragraphs be a red color and the rest of the paragraph is a normal color.

Grouping: when selectors have the same declarations

h1, h2, h3 { color: #f00; }

“Art is not what you see, but what you make others see.”

- Edgar Degas (painter, sculpter) as quoted in Layout Workbook.

Challenge:
Publish a feed not using a content management system.

Ideas:
Publish a feed in XML but style it with XSL so that I don’t have to “generate” an HTML page. Sounds sexy. So far it’s working.

The biggest challenge was finding a nice “what can I and can’t do with XML and/or XSL” chart. There were a few manuals, but I wanted a quick glance type thing. What’s required? What’s optional?

Seems there are different namespaces, which mean that more options in XSL are available. For example, Yahoo (of all folks) have a media namespace. This opens up thumbnails/images! XML+Thumbnails/images… sounds like a newsletter.

But wait… there’s more. I have put in an on the XML and subscribed to it with iTunes. Sure nuff. The mp3 is coming through loud and clear. And with XSL I can say “if audio, show audio link…”

Code:

The XML (newsletter.xml)

<?xml version=”1.0″ encoding=”UTF-8″?><?xml-stylesheet type=”text/xsl” xhref=”newsletter.xsl” mce_href=”newsletter.xsl” ?><rss version=”2.0″

xmlns:media=”http://search.yahoo.com/mrss”

xmlns:itunes=”http://www.itunes.com/dtds/podcast-1.0.dtd”

xmlns:dc=”http://purl.org/dc/elements/1.1/”

>

<channel>

<title>Test Lab Newsletter</title>

<link>http://www.test.org/news/newsletter/index.html</link>

<description>Test Lab description.</description>

<category>Science</category>

<itunes:category text=”Science”/>

<language>en-us</language>

<copyright>copyright 2005-2006 Test Lab</copyright>

<lastBuildDate>Mon, 15 May 2006 15:34:51 EST</lastBuildDate>

<image>

<title>Test Lab Newsletter</title>

<url>http://www.test.org/images/icon-pod-test-300.jpg</url>

<link>http://www.test.org/news/newsletter/index.html</link>

</image>

<itunes:explicit>no</itunes:explicit>

<itunes:image xhref=”http://www.test.org/images/icon-pod-test-300.jpg” mce_href=”http://www.test.org/images/icon-pod-test-300.jpg” />

<item>

<title>Test Lab contract newsletter title here</title>

<description>Blurb for the newsletter article</description>

<link>http://www.test.org/news/news_letter/2006/20060515/index.html#jsa</link>

<guid>http://www.test.org/news/news_letter/2006/20060515/index.html#jsa</guid>

<author>contactname@test.org (First Last)</author>

<media:thumbnail url=”http://www.test.org/news/news_letter/2006/20060515/test_tn.jpg” height=”70″ width=”100″ />

<category>Science</category>

<pubDate>Mon, 15 May 2006 15:57:53 EST</pubDate>

<itunes:keywords>keywords space entered here</itunes:keywords>

<itunes:duration>00:00:00</itunes:duration>

<itunes:explicit>no</itunes:explicit>

</item>

</channel>

</rss>

The XML (newsletter.xml)
First part goes above the html tag to say “Hey! I’m a stylesheet for XML.”

<?xml version=”1.0″ encoding=”ISO-8859-1″?>

<xsl:stylesheet version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:media=”http://search.yahoo.com/mrss”
>
<xsl:output method=”html”/>
<xsl:template match=”/”>

Now this part goes in where you want the channel items to show. All around this I have the normal web site template in plain ol’ HTML. I have some inline CSS but that’s to show what it’s doing. I put the layout in a table because it copies/pastes better in an email for emailing the newsletter. I’m hoping to get rid of that table “soon.” But for now, it’s a necessary evil.

<xsl:for-each select=”/rss/channel/item”>
<tr valign=”top”><td>

<xsl:if test=”media:thumbnail/@url”>
<img>
<xsl:attribute name=”src”>
<xsl:value-of select=”media:thumbnail/@url” />
</xsl:attribute>
<xsl:attribute name=”width”>
<xsl:value-of select=”media:thumbnail/@width” />
</xsl:attribute>
<xsl:attribute name=”height”>

<xsl:value-of select=”media:thumbnail/@height” />
</xsl:attribute>
</img>
</xsl:if>
</td><td class=”news_item”><p style=”padding-left:0;font-size:80%;”>
<a><xsl:attribute name=”href”><xsl:value-of select=”link”/></xsl:attribute><b style=”font-size:120%;”><xsl:value-of select=”title”/> </b></a><br/>
<xsl:value-of disable-output-escaping=”yes” select=”description” />

If we have a podcast, there will be text in the url field that points to the podcast’s location.

<xsl:if test=”enclosure/@url”>
<a>

<xsl:attribute name=”href”><xsl:value-of select=”enclosure/@url”/></xsl:attribute><img xsrc=”/images/icon-mp3.gif” mce_src=”/images/icon-mp3.gif” alt=”Listen MP3″ border=”0″ />
</a>
</xsl:if>
</p>
</td></tr>
</xsl:for-each>

I will post more on this project if/when it continues. Right now everything’s working fine and dandy. We haven’t had any podcasts to go with the newsletter stories yet but when I test it out, it was fine. The generator is still fine and only needs a little more tweaking to be (hopefully) safe enough for others to use in the office.