In producing a website design, there are replicable steps you should take in order to ensure success, this is a “Process”, if you will. This process should be sharable, transferrable to others on your team and easy to implement. Eventually, the steps should become like second nature to you and your team members. Hopefully, at some point, anyone on your team will be able to step in and take over at virtually any step in the process. It’s crucial for any company that produces creative and technical solutions to adhere to a process in order to build a business and elevate beyond the status of simply being a “job shop” or “making ends meet”. At the Iona Group, we use such a process called “The 4D Process”. You can learn more about it here.

I teach an abbreviated form of the process we use at The Iona Group to my students in my course at Bradley. This simplified process is easy to grasp after a couple quick projects and works great for students, as it allows for a lot of input over the course of the effort. This works for academic settings where the instructor or peers need to offer critique at key project milestones, but it also transfers well to the professional world where you may distributing the workload and looking for stakeholder approvals. In client work, I strongly believe it is best to engage the clients early and often in decisions that affect the project. Each successive step in the process should be a minor reveal, not a massive “AHA!”, IMHO.

Some example design phase deliverables in a web design project would be as follows (I’m skipping past the strategy and definition dleiverables in this post, maybe we’ll cover those some other time):

• Sketch
• Wireframe
• Moodboard
• Mockup

Those would be documents you could share with your client and get feedback, critique, suggestions, and other stakeholder input. There is one deliverable missing from that list that I have coined “The Redline“. The Redline is not a document shared with the client, but rather a document used internally to ensure the designer, developers, copywriters and SEO experts are all on the same page when it comes to hierarchy, standards implementation and the details of templating the website. This document also serves a valuable purpose to junior level team members in how to structure their efforts. It’s basically a webpage equivalent to an engineer’s CAD drawing of an engine or other mechanical part. In our class we create the Redline document after the mockup phase, but it’s easy to see that there could be a lot of value in creating a Redline as part of the wireframing process. This document works well in a web design class setting to help teach students about page structure, semantics and design hierarchy.

This document also reinforces an oft quoted Zeldman-ism:

Content precedes design. Design in the absence of content is not design, it’s decoration.

I have produced these documents in the past using a printout and a fine-point red Sharpie marker, but the example here was made using Omnigraffle Pro. So, let’s see an example of “The Redline” (click the image for a larger view):

Essentially every element on the page is bounded by a red box, and in each box, the HTML tag that will be used in the creation of the page’s structure is clearly listed. Yes, I realize this should be elementary for an advanced web designer; and yes, once you become adequately skilled you may not need this document. However, for a junior level developer, or for a distributed team that relies heavily on standards based SEO and proper marked up pages, this document has a high amount of value. What benefits does it bring to such a team? Consider these:

• Prevents HTML “Writer’s Block” – There is no question that junior web designers struggle at where to start once they open a text editor. How will the nav bar be structured? How about that sidebar? What constitutes an H2, an H3, etc?
• Puts Proper Emphasis On Page Structure – One of the very best ways to SEO optimize is to start out with good bones. By looking at how your content is placed in the page you can make sure that tag weight won’t interfere with proper indexing or page accessibility. Sure, it’s great to have a website with a pretty face, but without good bones, you’re never going to have a design that truly performs. The Redline forces you to think critically about how your page content and structure live together.
• Separates Design Strategy from Design Production – Let’s face it. Thinking is expensive. You may only have a couple of high end designers capable of producing scalable, SEO friendly standards based designs. You probably have a much larger base of coders capable of writing HTML with some guidance. This allows the team to divide and conquer, with individuals adding value where they can really shine.
• Eliminates Divitis Before It Begins – Unfocused HTML writing results in poorly formed markup. No question about it. Writing without a plan is a recipe for disaster. This document is that plan.
• Documents the Design for Historical Purposes/Recordkeeping – As a website ages, the pages get edited, content maintenance systems get patched, templates are tweaked, etc. a website can get rickety. The redline document allows a team member to perform a development/design soft reset down the road. If you want to rollback the site later to the SEO optimized version that everyone agreed on, unless you have pristine document history or version control systems in place you may have difficulty reinstating the original template. The redline will at least allow you to recreate it with minimal fuss.
• Reduces Coding Time – No question about it, it’s easier to “restructure your page” semantically via diagrams than it is to rewrite HTML time and time again. Just like wireframes help short-circuit the “Photoshop Mockup Death Spiral”, this document helps accelerate the development phase.
• Establishes and Document Naming Convention for Classes and Elements Ahead of Time – When adding the ids and classes to the document, you are in essence documenting the framework for the CSS and the JavaScript to be integrated with the designs. This really will make sure a distributed team is all on the same page (pun intended).
• Empowers the Design Team To Help Developers Adhere to Standards – I’m not naming names, but I have come into a number of situations where backend developers have been entrusted to write the markup for the web designs they have been provided. These developers mean well, and can write great SQL and business logic, but page templating isn’t there thing. As anyone knows, a poorly structured DOM is going to produce invalid HTML pages. Invalid HTML documents are NOT going to be cross browser compatible.

So, there you go. I hope this info helps you either learn web design for the first time, or maybe even enhance the process you are using at work to help maximize productivity and increase your overall web design quality. Are you using a similar document in your process? I’d like to hear about how you are implementing planning documents like this to jumpstart your designs.

For a lot more info on this event… check out the official page.

I’m so proud to be faculty at a University providing great activities to students. Especially when these activities are novel, engaging and produced by our students in the INteractive Media department where I teach! Sweet!

Why do I ask this… Well, you all have Flash/Silverlight on the ropes, but you are giving them a free pass. How so? With the release of HTML 5′s video tag, canvas, yummy semantic tags and other advanced markup goodies… pretty much any major site, (eg, Facebook, YouTube, Google Video, Vimeo, etc), could just about up and walk away from Flash with the next major revision of Internet Explorer (hopefully 9 will come around). You see, Safari 4, Firefox 3.5 are out and they like to party. They’re out playing video all night long and swinging from the rafters. The biggest draw on the web today, video, is by and large delivered via Flash. Now, I wouldn’t be so brash as to say that Flash’s days are numbered by any stretch by this developing situation. There are a lot of things that Flash can do that simply can’t be replicated, even with JQuery (my fave JS framework), Processing.js or the new Scripty 2. However, these new browsers really take care of a ton of things that Flash is needed for right now like video playback and basic RIA implementations.

I don’t mean to be disrespectful to the standards group, W3C, etc, but with the competing standard, arguably, an anti-standard, Flash, on the ropes, why are you not focusing and assisting the devs in the trenches, the browser and tool developers and the web designers in the cube farms at MS, Adobe, etc? It seems as though there is a fracturing, rather than a coalescing of resources and forces in the standards arena. Don’t believe me? Check this out. And this. And then for a laugh, this. It’s a bit liek the wild west again. I’m getting flashbacks to 1999-2000, when tables and spacer.gifs were clutched in the dying grips of every SimpleText coder and every GifBuilder jockey.

Sound audacious? I know, right. But look at the evidence. Twitter is abuzz with the recent additions to HTML5, with new hot samples being posted in playgrounds daily, what it means for Flash devs and on and on (simply run a search there and see). Beyond that, a number of high profile standards focused designers are on the warpath right now, speaking out and writing with a virulence not seen since the height of the browser wars (yes, I’m that old). For example, Zeldman has had a series of fantastic posts lately laying it out on the line talking about the demise of the XHTML standards group, defending the use of standards in the face of adversity and Eric Meyer has recently started giving a talk on “how Javascript will save us all”, in which he recommends using Javscript (favoring no specific framework, really) to do things that CSS3 and HTML5 do quite well. There are a number of other examples out there just like this. ‚Äì Full disclosure, I use both Meyer’s and Zeldman’s books in my classes.

Talk about cutting off your nose and all of that rot. I love standards just as much as anyone, but when the big boys are changing their tunes about what constitutes good standards implementation (separate content – HTML from presentation – CSS and behavior – JS) in order to remain within the toolset and bowing down to the same boards they fought against a decade ago to get CSS2 adopted, I start to get a bit squeamish. You see, I have to teach this stuff to students. Teaching standards based design was before a lot like teaching a foreign language. A language a bit like Japanese in that it had rules that are reasonable cut and dry and work well with each other because agreement on how they work was decided upon and then used! Now, it’s like a mish-mash of bad drunken Engrish. Too many exceptions, IMHO. It’s like “i before e”, but with end tags and doctypes. *Blech*

Am I abandoning web standards? Nope. Though, I’ll probably be a little more likely to make an exception to the rule in what constitutes a good use case for it vs a plug-in, though. After all, we have until 2022, right? Thoughts? What are you doing to keep your standards based design skills sharp? My advice, just keep swimming.

1. Visit the site, save the HTML file to your computer.
2. Make a CSS file and save it in the same directory as your HTML file.
3. You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
4. Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
5. Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
6. Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
7. Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
8. Finish your work and upload it!

This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.

I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.

Some things I don’t focus on in this assignment:

1. IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
2. Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
3. Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.

So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.

How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing

I spent the last few days in Colorado, it was beautiful! I was the best man in a wedding there (in Estes Park), you can see some photos from the trip here. CO is a nice place with fantastic scenery and super tasty microbrews. Highly recommended.

While I was there, I got to meet Juan Sanchez, designer at Effective UI, and one of the main contributors to DeGrafa. He mentioned that Scalenine’s skin contest had completed. What a great pile of entries! I can’t wait to see the library grow and serve as the premier resource for Flex Designers on the web. How cool. Even cooler, was the fact that my Coworker, Heather Ford, was one of the winners with her DiscoType Theme! Awesome.

Beyond that, my students are begnining to build some mashups and make some progress learning Flex… Some recent ones they’ve made… GeekVahalla (a tech focused RSS Reader), TweetTally (a Twitter Tag cloud search). Dropped Passes (a sports focused RSS Reader). I hope to continue to post more as they pile up.

Finally, at The Iona Group, we are hard at work on our eLearning development platform, Doctum. We’re gearing up to launch and start talking to people/demoing it at DevLearn08. If you’d like to be made aware when we launch, head on over to DoctumLearning.com to get on our list of contacts. We have a full site launching soon with features, videos etc explanining what makes it different, but for now it’s kind of in a hush hush mode. Needless to say lots of work is going on and the system is shaping up to be pretty amazing, if I do say so myself.

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Untitled</title>
</head>
<body>
</body>
</html>

Then, download my favorite JavaScript API, JQuery.

Link the JS file in by adding this tag in the head:

<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>

Once we have JQuery linked in, it’s time to write some HTML… I created a couple <div> elements to act as wrappers/containers for the page’s content. I used an <img> to put a nice graphic header in the page, then added some semantic XHTML elements, an <h1> for the text header, a <form> tag to hold a <select> menu populated with a few of my favorite Flash blogs as the <option> elements setting their URLs as the value attributes for those, and of course a <label> to let everyone know they should “Select a Feed” via that menu. After the tags are closed, I put one more div after the form to contain the feed results after they are retrieved. I add id attributes liberally throughout the tags, as I may need to style them or use them in my JQuery reader soon, *hint* *hint*.

If you’re following along, your code probably looks something like this:

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>RSS Reader</title>
	<script type="text/javascript" src="jquery-1.2.6.min.js" charset="utf-8"></script>
</head>
<body>
<div id="container">
<a href="visualrinse.com"><img src="http://visualrinse.com/wp-content/themes/smooth-dirt-10/header_08v2.jpg" alt="Visualrinse" title="Visualrinse.com" /></a>
<div id="ui">
<h1>Flash Feed Reader</h1>
<form id="selectParser" action="">
<label>Select a feed:</label>
<select id="diffFeeds">
	<option value="">Select</option>
	<option value="http://feeds.feedburner.com/aralbalkan">Aral Balkan</option>
	<option value="http://www.bit-101.com/blog/?feed=rss2">Bit-101</option>
	<option value="http://feeds.feedburner.com/peterelst/">Peter Elst</option>
	<option value="http://www.gskinner.com/blog/index.xml">Grant Skinner</option>
	<option value="http://blog.andre-michelle.com/feed/">Andre Michelle</option>
	<option value="http://feeds.feedburner.com/flashmagazine/rss2">Flash Magazine</option>
	<option value="http://casario.blogs.com/mmworld/rss.xml">Marco Casario</option>
	<option value="http://www.sephiroth.it/weblog/index.xml">Sephiroth</option>
	<option value="http://www.quasimondo.com/index.xml">Quasimondo</option>
	<option value="http://feeds.feedburner.com/sebleedelisle">Seb Lee-Delisle</option>
	<option value="http://osflash.org/feed.php">OS Flash</option>
</select>
</form>
</div>
<div id="feedContent">
	&nbsp;
</div>
</div>
</body>
</html>

Cool… So, time to add the interactivity. We’re going to add a script tag to the head area and begin writing a Javascript function. I called mine “get_rss_feeds()”. The basic idea behind the function is to use the JQuery api’s “get()” function to grab the URL of the selected item from feedList (the name of our select menu, remember?), then run through each item in the RSS feed, putting those tasty XML elements from the feed like title, pubdate and description into HTML and popping them on the page. Between runs, we’ll need a way to clear out the div containing the content, so each time a new feed loads, the old content is removed.

So to do this, let’s put the following code in the Javascript block:

function get_rss_feed() {
	//clear the content in the div for the next feed.
	$("#feedContent").empty();
 
	//use the JQuery get to grab the URL from the selected item, put the results in to an argument for parsing in the inline function called when the feed retrieval is complete
	$.get($('#diffFeeds').val(), function(d) {
 
		//find each 'item' in the file and parse it
		$(d).find('item').each(function() {
 
			//name the current found item this for this particular loop run
			var $item = $(this);
			// grab the post title
			var title = $item.find('title').text();
			// grab the post's URL
			var link = $item.find('link').text();
			// next, the description
			var description = $item.find('description').text();
			//don't forget the pubdate
			var pubDate = $item.find('pubDate').text();
 
			// now create a var 'html' to store the markup we're using to output the feed to the browser window
			var html = "<div class=\"entry\"><h2 class=\"postTitle\">" + title + "<\/h2>";
			html += "<em class=\"date\">" + pubDate + "</em>";
			html += "<p class=\"description\">" + description + "</p>";
			html += "<a href=\"" + link + "\" target=\"_blank\">Read More >><\/a><\/div>";
 
			//put that feed content on the screen!
			$('#feedContent').append($(html));  
		});
	});
 
};

Now, besure to add the get_rss_feed function call to the feedList’s onchange event and you are good to go. With a catch, of course. This will only work when accessed locally via the “file://” protocol. IN order to use this online, you’ll need to circumvent the browser security sandbox and use a middleware proxy to grab the XML and make it local. Here’s the PHP:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

Slick, eh? To use it, simply prepend the proxy’s URL used in the $.get call, like this:

$.get('proxy.php?url='+$('#diffFeeds').val(), function(d) {

So, there you go. Add some CSS in there and it’s all stylish. You can the feed reader in effect here.

Hope you enjoyed this.

Here is the site today:

In this post, we’ll look at the site and find out what makes it tick. Here’s a quick overview: The interface is simple, it consists of only a ComboBox, a DataGrid, a TextArea, a couple Labels/Text components and a LinkButton. All of these Controls are placed in an assortment of Layout controls to assist with the overall look and feel. I then create a HTTPService and a couple quick AS3 functions to populate the ComboBox and handle feed results. The initial feedlist comes from a list of RSS feeds in a custom written XML file (which I’ll share in this post, as well), this could also come from an online service like a custom Yahoo pipe or an OPML file if you really wanted to get fancy.

After the basic app is functioning, I import one of Scalenine’s beautiful and easy to use skins, and voil?†. A feed reader for local filesystem use is ready. This could be run as a SWF or compiled as an AIR app for desktop use. However, if you want to put it online, you’ll need to use a middleware script to serve as a crossdomain proxy loader (this example is going to use PHP). This is needed to get around Flash player’s security sandbox which prevents you from loading XML files from other domains that lack a crossdomain.xml file.

Let’s examine the basic MXML markup before adding any AS3 or style calls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" />
	<mx:HTTPService id="mdFeed" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" labelField="name" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

So, in the markup above, we create the visual components mentioned in the paragraph that preceded the source code, and add two HTTPServices, one for the list of all the feeds we are aggregating, and the other for the actual RSS feed data that we will retrieve once the user chooses a feed they want to review.

Here is a glance of the interface in Flex’s IDE:

In order to add the interactivity, we’ll need to supply a list of feeds for the reader to parse, right? Here is the list of sites and the URLs for their RSS feeds in XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<sites>
	<site name="egotastic.com"	data="http://egotastic.com/feeds/index.xml" />
	<site name="wwtdd.com"	data="http://www.wwtdd.com/?mode=atom" />
	<site name="defamer"	data="http://www.defamer.com/excerpts.xml" />
	<site name="superficial"	data="http://www.thesuperficial.com/index.xml" />
	<site name="idontlikeyouinthatway"	data="http://feeds.feedburner.com/Idontlikeyouinthatwaycom" />
	<site name="people.com"	data="http://www.people.com/people/web/rss" />
	<site name="eonline.com"	data="http://www.eonline.com/everywhere/rss/index.jsp" />
	<site name="tmz.com"	data="http://www.tmz.com/rss.xml" />
	<site name="usweekly.com" data="http://64.90.166.18/atom/feed" />
	<site name="CelebSlam" data="http://www.celebslam.com/feed/" />
	<site name="I Can Haz" data="http://feeds.feedburner.com/ICanHasCheezburger?format=xml" />
</sites>

Now that we have the XML ready, we need to add the MXML to get the feed to the application tag (creationComplete=feedList.send());):

2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">

Once we have the feedList retreived, we need to do something with it, right? Well, let’s add it to the comboBox, “siteCombo”. Here’s the AS to do it:

[Bindable]
private var sites:ArrayCollection = new ArrayCollection();
 
private function siteListHandler(event:ResultEvent):void{
	sites = event.result.sites.site;
	var siteObj:Object = new Object();
	siteObj.name = "Select"
	siteObj.url = "";
	sites.addItemAt(siteObj,0);
	siteCombo.selectedIndex = 0;
	//trace(event.result);
 }

In that snippet, we created an arrayCollection to store the result. We then add the initial null “Select” option to the comboBox. We also need to add the databinding to the “sites” comboBox, so that it can be populated with the list of sites. Let’s do that now:

8

<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" />

With the sites ComboBox binded (bound?) to the feedList, we need to add the function to handle the change event, so when the user selects a feed, the RSS feed is loaded. Here it is:

public function chooseSiteFeed(url:String, name:String):void{
myURL = url;
mdFeed.send();
}

Now that the mdFeed is triggered, what do we do? Well, it would be a good idea to bind the mdFeed results to the datagrid, right? Then we can see all the posts in the feed:

13

<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">

Now that the datagrid is getting fed with the tasty RSS results, we need to let the user read the description and then click a link to see the full post, right?

19
20
21
22

<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>

That should work… If not, don’t worry, I’m supplying the full MXML source. But first, let’s make sure we can use this little RSS reader on your site. In order to do this, we need to leverage some serverside scripting in order to load the RSS feed via a proxy script. This will let your SWF file make a call to the script, then script handles the external URL call, returning the result as a local XML file for your flash file. Here is what the PHP looks like:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

So, make yourself a proxyURL.php file with that content in it and save it. If you go back and modifiy the mdFeed function to use the proxy script, everything should be in order… Here, in totality, is the app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:Script>
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import mx.effects.Resize;
 
		[Bindable]
		private var sites:ArrayCollection = new ArrayCollection();
		[Bindable]
		public var myURL:String; 
 
		private function siteListHandler(event:ResultEvent):void{
			sites = event.result.sites.site;
			var siteObj:Object = new Object();
			siteObj.name = "Select"
			siteObj.url = "";
			sites.addItemAt(siteObj,0);
			siteCombo.selectedIndex = 0;
		 	//trace(event.result);
		 }
 
		 public function chooseSiteFeed(url:String, name:String):void{
		 	myURL = "proxyURL.php?url=" + url;
       		mdFeed.send();
		 }
 
	</mx:Script>
	<mx:Style source="css/OSX.css" />
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" result="siteListHandler(event)"/>
	<mx:HTTPService id="mdFeed" url="{myURL}" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" change="chooseSiteFeed(ComboBox(event.target).selectedItem.data, ComboBox(event.target).selectedItem.name)" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea htmlText="{mdGrid.selectedItem.description}" right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" click="navigateToURL(new URLRequest(mdGrid.selectedItem.link));" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

IN the code I also loaded the OSX skin from Scalenine. So there you have it. Pretty easy, really, though I understand I may not have explained it all as well as possible. It’s just easier when you are actually going through things in front of a lab or class. If you have questions on how it all works, feel free to drop me a line. You can download the source, here.

While I prepare for that (I have to build a few presentations, stat!), why don’t you take some time and watch this video that was taken at 360Flex’s keynote… It has some hot Thermo action in it at about 45:00. Hot stuff, indeed.

Rachael Rubin (wildhoney on twitter) was kind enough to point me to the newly revised Last.FM API and I think I will definitely use it at some point, but without a a proper link to the streaming music in their library, building a non playing audio based mashup seems a little less fun that it should be. It seems as though they intentionally make accessing the streams a little difficult to discourage bandwidth abuse.

All that changed today when I came across Govtrack.us on programmableweb. Wow. What a useful API. Fun? Not really… it’s an interface to the mountains of data generated by our Congressional representatives day to day business. Deep stuff. With the ever growing need for governmental transparency in this somewhat crazy time, it’s a fantastic resource to have. Generate clean XML based on what your reps are voting on, meeting about and talking over. Combine this with Google maps or perhaps any number of other rich data sources and you have some amazing potential to bring visibility to a very opaque world. Providing a new or easier to use interface to the insurmountable volumes of legislation might uncover some realizations that may have gone unnoticed otherwise.

I’m definitely going to give this one a spin. Shall we find something out from all of this? It remains to be seen, I guess. I have a few ideas on things I might like to track… how about you?

Introducing: MM491 Mashups and RIAs

In this class, students will use HTML/CSS, PHP, AJAX and Adobe Flash/Adobe Flex/Actionscript3/Adobe AIR to access and digest webservices and APIs made public by third parties to create and publish mashups, web applications that combine data from more than one source into a single integrated tool, on the web and desktop. Additionally, rapid application development tools will be used to create client side rich applications that connect to existing services or web sites to provide application functionality to the user.

Students are required to have completed Multimedia 213, Multimedia 215 and Multimedia 365 prior to enrolling in this course. Students are recommend to have completed or be cross enrolled in Multimedia 313, and Multimedia 465 before trying this advanced field of web design and development. While user interface design patterns and strategies will be explored, with students getting a chance to exercise their CSS skills and user interface skinning ideas, a good portion of the time in this class will be spent editing code and connecting XML and other data formats to the components to complete their masterpieces.

Students will be expected to download and install the freely available Adobe FlexBuilder and the Adobe Air SDK to their development computers prior to class commencing. Students are recommended to read and complete the tutorials on Adobe Flex at Adobe.com’s Develop center over the summer. Students will be required to register for a free account at programmableweb.com for posting their mashups to the web.

All in all I’m very excited about this on… it should be great!