Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex, XML

Adobe Flex: Article

Creating RSS Feeds With Macromedia Dreamweaver Using SOA, XML and Web Services

Publishing content online is evolving with a new technology called RSS.

The second panel defines what files to summarize when creating the feed. You can set this up any number of different ways depending on what you would like to accomplish with your feed. The settings I'm going to outline here are best for summarizing a single page, like our home page or a blog-style page. Set the first popup to make a summary of a Page. Then you need to tell it which page will be summarized - you could type in the file:// url for the page, but really what you'll do is click the little folder icon to the right of the text field. You'll be presented with a dialog box to select an html file - pick the index.html file in the root directory of the site (the home page) and click choose. Subdirectories only applies to directory summaries, not to files, so it should be turned off. You'll want to add entries to the RSS feed for all changes to this file so set Capture changes to File Modifications. Enter the base url for the website you will be publishing to, it will be used to create the links in the RSS feeds (RSS feed links are full URLs because you never know where the feed will be republished). Set Max stories to 30 because we don't want the feed to contain more than 30 news entries - this is arbitrary, and just what I happened to want when I created it. You can set it any way you like, or leave it blank and there will be no limit. Be warned, though, unlimited RSS feeds just keep accumulating content, which probably isn't what you really want.

The third panel determines how the headline will be extracted from the html page. The headline was within a TD tag with a CSS style (called a CLASS) of HPStoryRevHead applied. The content of that table cell should be used as the headline of the story in the RSS feed. So set the Match Tag to be TD (its not case sensitive). Set the CLASS attribute to be HPStoryRevHead to further uniquely identify the item we want. Extract the Tag Content to be used as the headline.

The fourth panel determines how the story will be extracted from the html page, in a similar manner to the way that headlines are extracted from the page. The story was within a P tag with a CSS style of HPStoryContent applied. The content of that paragraph should be used as the story in the RSS feed. So set the Match Tag to be P. The paragraph to include follows the headline, so set the Location to After the Headline. Set the CLASS attribute to be HPStoryContent to further uniquely identify the item we want. Extract the Tag Content to be used as the story. You may alternatively specify a maximum length for the content in characters or words, but as the stories a pretty short blurbs already there really isn't a reason to here. You also might want to strip any HTML tags from the story (like the P tag or BR tag). Some aggregators have problems rendering HTML content. Good ones will just ignore the tags, but bad ones will actually display the HTML tags.To be more compatible you would want to check Strip HTML.

The fifth and final panel determines where the file is saved and in what RSS format. Tell it where to save the RSS file you are creating - you could type in the file:// url for the page, but really what you'll do is click the little folder icon to the right of the text field. You'll be presented with a dialog box to save a file - go to the root directory and type in "indexfeed.rss" and click save (you can call it whatever you want, that's just what I used, but you should end the file with RSS or XML). Then pick which version of the RSS format to use - Version 1.0 is the most popular, DreamFeeder supports 0.9.X, 1.0 and 2.0. Older formats are more broadly compatible, but newer formats support dates and times for each story, and graphics for the feed. Finally, click the Save button and the RSS file will be created and added to your list of feeds.

After completing these steps the file for your feed has been created. It is now listed in the list of RSS feeds. The list entry indicates that it has never been updated - that means that the feed doesn't have any stories in it yet. Also, the entry lists that there is 1 new story to be processed (actually, 1 modified file to be processed, but who's counting?).

To process/update the feed you can simply click the Update button and the settings you defined before will be used to identify and extract new content which will then be added to the feed. So try it out, select your feed from the list and click the process/update button. The RSS feed will now have content that you can examine in your favorite news reader.

Feeding the JobBank
Open the JobBank and take a look at it - it's the jobbank.html file in the 03_HumanResource directory. This page is just a listing of the pages that are in the JobBank directory, each page is a different entry offering a different job. We can list these same pages in an RSS feed automatically. This is an example where each file is a single story, and we'll be summarizing all the files within a directory.

Open the any Job Description file and examine it. This content represents the story that we'll want to collect for use in our RSS feed. The way we'll collect this content is based on the HTML code used to layout the content. Take a close look at the content and notice a few things:

The headline is a H1 but it's the same for all the pages, so it's not a good headline - Job Announcement

The subhead is a H3 but it actually contains the relevant headline content.

The story content is in P tags, but there are multiple paragraphs that we'll want to collect.

Now based on what we just looked at you'll be able to define a feed for this page and use those attributes to identify the content to extract from the page and put into the RSS feed. You're going to go through the same feed creation process as before, but with slightly different settings appropriate to this content.

Enter descriptive information about the RSS feed in the first panel. You will need to enter the Title of the feed. You will also need to enter a Description for the feed. You may optionally include a graphic or icon to be used to represent the feed.

Define the files to summarize in the second panel. Set the first popup to make a summary of a Directory. Then you need to tell it which directory will be summarized - you could type in the file:// url for the page, but really what you'll do is click the little folder icon to the right of the text field. You'll be presented with a dialog box to select a directory - pick the JobBank directory. If we wanted to include subdirectories in our summary you would want to check it, but that doesn't matter for this example because there are no subdirectories. You'll want to add entries to the RSS feed for all new files so set Capture changes to File Creation. Enter the base url for the website you will be publishing to, it will be used to create the links in the RSS feeds (RSS feed links are full URLs because you never know where the feed will be republished). Set Max stories to 30 because we don't want the feed to contain more than 30 job entries - this is arbitrary, and just what I happened to want when I created it. You can set it any way you like, or leave it blank and there will be no limit. Be warned, though, unlimited RSS feeds just keep accumulating content, which probably isn't what you really want.

Setup headline extraction in the third panel. Set the Match Tag to be H3 (its not case sensitive). Extract the Tag Content to be used as the headline.

Setup story extraction in the fourth panel. Set the Match Tag to be P (its not case sensitive). The paragraphs to include follow the headline, so set the Location to After the Headline. Set Extract the All Matching Tags to be used as the story content. That means multiple paragraphs will be collected. Finally limit the length of the story because multiple paragraphs might be a lot of text. Set Max Length to 200 words.

In the fifth and final panel save your new feed. I saved it as "jobbank.rss" right next to the jobbank.html file.

After completing these steps the file for your feed has been created. It is now listed in the list of RSS feeds. The list entry indicates that it has never been updated - that means that the feed doesn't have any stories in it yet. So process it and then test the results.

Linking to the Feeds
The last step in setting up your feeds is to link to them. You can do it the same way that you link to any file with Dreamweaver, but that only creates relative links, not Feed:// protocol links, and does not provide alternative content header links - which is how Safari knows to display the little RSS icon in the location bar, or how NetNewsWire knows where to find a feed when given a regular URL. So there are some deficiencies in the way that Dreamweaver treats linking to an RSS feed. RSS DreamFeeder provides an interface in the Link panel to address these issues (you may need to make the panel wider to see the Apply buttons - I'd have done it for you but Dreamweaver doesn't allow it).

The panel is broken into two groupings: Alternative Content Link and Hypertext Link.

Alternative Content Link settings provide the way to setup the header links to the feed as an alternative to displaying HTML. If an aggregator see the page it will load the Feed instead of the page. The Link To popup menu allows you to select from the RSS feeds you have already created without having to select the file itself. Click the Apply button to apply your setting to the current page being edited. You can only have one RSS feed alternative per page, so any changes you make will modify that setting for the page.

Hypertext Link settings insert a hypertext link at the selection in the current document. The Link To popup menu allows you to select from the RSS feeds you have already created without having to select the file itself. To change the graphic click on it. You will be presented with a new popup menu where you can select a different graphic. Upon selection that graphic will be displayed. To use the Feed:// protocol check the box. This alternative protocol is associated with RSS feeds so that news aggregators can be triggered as helper applications from within a web browser. Click the Insert button to insert your link.

So to link to our feed for the JobBank open the JobBank file, then click on the Link button in the RSS DreamFeeder panel. Set the alternative content to point to your JobBank feed. Then click on the page in front of open jobs and insert a Feed protocol link to the same feed. Click after the newly inserted link and press return to put the headline on a new line.

To link to our feed for the home page we have to edit content that isn't available within the file, but rather is only editable in the template. No problem, open the HomePageTemplate file (in the Templates directory), and setup your link and alternative content header.

When you save, Dreamweaver will prompt you to update the pages that the template is based on. Click OK and it will update the home page to include the new links.

Nothing is Perfect
There are a few final details with what you did.

First, the content that you created probably has the words "UNREGISTERED" in it somewhere. Until you register your version of RSS DreamFeeder it will continue to include that content in both the headline and the story. You can purchase a serial number for RSS DreamFeeder at www.rnsoft.com. Click on the "REGISTER" button at the bottom of the RSS DreamFeeder panel and enter the serial number there.

Second, the feed protocol hypertext links you inserted point to some website that doesn't exist, so don't expect them to work. If you did publish the feeds on your website and configured the Base URL part of the feed correctly it would work. But its good enough for this tutorial.

Third, for single page summary feeds like the home page feed we created you'll notice that the dates all say the same thing. They are listing the modified date of the file for each new entry. Since all 3 entries are new, all 3 are listed with the same modified date. If you put a new entry on the home page, and run it now, it's date would be different from the others. Nothing a quick text-editing couldn't fix, but to be fair, it isn't quite right.

Fourth, for directory summary feeds like the job bank feed we created, remember that we configured it to capture files are based on their creation dates. I duplicated a file and tried to edit it only to discover that by doing so I didn't change its creation date. The solution is to open the file and do a Save As, which creates a whole new file.

That's All Folks

I hope you found this tutorial useful, and I hope that you'll get a lot of use out of RSS DreamFeeder.

Thanks for you support.

From Andy Carvin at Digital Divide:
(www.digitaldivide.net/articles/view.php?ArticleID=68)

More Stories By Ronald Northrip

Ronald Northrip is the President of Ronald Northrip Software (http://www.rnsoft.com), a technology company focused on creating software tools to make developing websites, creating content, and using your computer simpler and better.

Comments (3) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
SYS-CON Australia News Desk 12/25/05 03:09:19 PM EST

You may have noticed recently that lots of websites now contain little graphical buttons with the word XML on them. For example: or or . When you click on the button, all you see is a bunch of jumbled text and computer code [ed: unless you have a newer web browser or an aggregator]. What's this all about? It's an RSS feed, and they're changing the way people access the Internet.

SYS-CON Canada News Desk 12/25/05 02:52:31 PM EST

You may have noticed recently that lots of websites now contain little graphical buttons with the word XML on them. For example: or or . When you click on the button, all you see is a bunch of jumbled text and computer code [ed: unless you have a newer web browser or an aggregator]. What's this all about? It's an RSS feed, and they're changing the way people access the Internet.

SYS-CON Netherlands News Desk 12/25/05 02:27:52 PM EST

Creating RSS Feeds With Adobe Dreamweaver Using SOA, XML and Web Services. You may have noticed recently that lots of websites now contain little graphical buttons with the word XML on them. For example: or or . When you click on the button, all you see is a bunch of jumbled text and computer code [ed: unless you have a newer web browser or an aggregator]. What's this all about? It's an RSS feed, and they're changing the way people access the Internet.