2006:

Hi Bob,

Many thanks for your comment. We're actively working on a 
solution and hope to have it released within the next week. 
Please contact me if you have any further comments or concerns.

Best Regards,
Jonas

2008:

Hi Bob,

Thanks for the info, we're working on it, and should have a fix out soon.

Best,
Jonas

2009:

Thanks Bob fix is pending -
Jonas

2010:

ok working on it thx

2011:

ok

Before I move on to the action, just wanted to mention that several versions of Symphony have been released since I (long ago) began this series. As of this writing, the current version is 2.2. It’s fantastic, go get it.

Getting Started with Pages and Templates

OK, let’s begin by getting our rough template in place. If you’ll recall, back in part 1, we preloaded an XSLT Utility called html5.xsl (in case you forgot, it’s here.) This is a great master template that gives us a standard HTML5 layout marked up in XSLT and ready for use in Symphony.

So how do you use this thing? Take a look at our Symphony pages by going to Blueprints > Pages.

P-P-P-Pages

As you can see, we already have several pages, .xsl templates, and corresponding URLs in our new site. These came with the default workspace. To be clear, pages in Symphony are not really “pages” in the traditional sense. Says the documentation, “pages are not simply containers for static content and there is not a one-to-one relationship between a page and the content accessible via that page. A single Symphony page can power an entire browsing interface.”

Not surprisingly, pages are the bread and butter of your site, tying together your content, templates, and user interface elements. (Don’t worry, this will make more sense in a minute.)

Anyway, each page has its own .xsl template file. This allows you to customize how that page’s content is displayed in a browser. Take a look at our home page template by selecting the home.xsl link.

Home is where the XSLT is

Not much to it, eh? Almost all of this page’s layout and content is arranged and formatted by other XSLT utilities that are imported to this template; the relevant imported utilities are highlighted in blue in the right column. In that list, click on master.xsl.

The Template Master

Aha! This is the primary site design template, which can be imported into all of our main pages. This template provides the standard elements of a site design: header, nav, etc. (But to our horror, this master.xsl is old-school XHTML, which was excellent about one year ago but is suddenly the laughingstock of fashionable web designers.)

Let’s hang on to this master.xsl for now, and switch our home page to our preferred template, html5.xsl. Go back to the home.xsl template and change this line:

<xsl:import href="../utilities/master.xsl"/>
<xsl:import href="../utilities/html5.xsl"/>

Let’s also get rid of some bits we don’t need. We’re not going to use the Notes or Comments functions from the default installation, so remove these lines:

<xsl:import href="../utilities/get-notes.xsl"/>
<xsl:import href="../utilities/get-comments.xsl"/>
<xsl:apply-templates select="notes"/>

Save your changes. For our last bit of work in this area, click on the html5.xsl utility and peruse its code. Let’s start over with styling by modifying our stylesheet name:

<link rel="stylesheet" media="screen" href="{$workspace}/css/styles.css" />

change styles.css to “demostyles.css.” This file doesn’t exist yet, so we will initially have no CSS styles applied to our site.

OK, save the changes. Now to see what we’ve done:

1996 called and wants it website back.

Hmm, ugly. But we’re not done yet. Our next matter of business is to make sure all the content we want is available on the home page.

Data Sources

In Symphony, Data Sources are a method to select content from sections and make it available in pages. Remember, we defined several sections — Projects, Categories, Images, and Tweets — but only a fraction of this content is currently visible on our home page. Let’s fix that. Go to Blueprints > Components, and have a look at the Data Sources list.

A Fountain of Data

As usual, there are some pre-made Data Sources here, and we can reuse most of them. Since there is no Data Source for our Tweets, let’s make one. Select Create New.

Creating a Data Source For Some Homestyle Tweetin's

this can look a little intimidating at first, but it’s actually not so bad. Start out by naming this Data Source “Tweets” and select the Tweets section from the Source menu.

The next step to consider is whether you want to Filter your Tweets by some criteria. For now we’ll leave this alone, but one example I use on my site is to hide any @-replies to specific people, using this filter: not-regexp:^@. Note: not-regexp is new in Symphony 2.2.

Next, we’ll have to decide how we want to Sort and Limit our Tweets. I would like them to be in descending date order (newest at the top) and I don’t want to see more than three Tweets on the home page. So, change Sort By to Date and change “Show a maximum of 20 results per page” to 3.

In the Included Elements select list, choose permalink, tweet, and date. These are the pieces of a Tweet that will be available to your page.

We’re done for now — select Create Data Source.

Wait, we’re not done! We need to instruct our home page that this new Data Source is available. Go back to Blueprints > Pages, and click on the Home link in the Title column. This brings up the Page Settings screen for the home page.

Setting Page Settings

Command or Control -click on the Tweets Data Source to make sure it’s selected, and then Save Changes. Now let’s have another look at our home page.

Tweet?

As you can see, our Tweets are all here. What’s that? They’re not? Here’s why: the home page now has access to our Tweets data, but we haven’t added any Tweet formatting to our front-end templates yet. Don’t believe me? Click the Debug link or append ?debug=xml to the end of the URL, and begin to understand the glory that is Symphony.

Oh, the sweet sweet Tweet glory.

Now you’re seeing the output of all the Data Sources enabled for this page, rendered as XML. We’re free to use XSLT to transform this into whatever format we want (in this case it’s HTML, but it doesn’t have to be.) So let’s do that. There are many ways to approach this, so I’ll give you one example, but you can try other variations too.

A Spot of XSLT

Go to Blueprints > Components and in the Utilities section, select Create New. We’re going to name this utility get-tweets.xsl. Paste in the following code:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    
    <xsl:import href="../utilities/talinkahashifyer.xsl"/>

    <xsl:template name="get-tweets" match="tweets">
      <ul>
        <xsl:apply-templates select="entry"/>
      </ul>
      </xsl:template>
    
    <xsl:template match="tweets/entry">
      <li>
        <xsl:call-template name="linkahashify">
          <xsl:with-param name="tweet" select="tweet" />
        </xsl:call-template>
      </li>
    </xsl:template>
</xsl:stylesheet>

(I’ll step through this briefly, but be sure to check out the metric ton of information about XSLT out there.)

Our Tweets XML looks like this:

    <tweets>
        <section id="7" handle="tweets">Tweets</section>
        <entry id="19">
            <permalink handle="19927170746">19927170746</permalink>
            <tweet>Trusty 6-year-old WRT54G router died in a fit of buzzy, maniacal rage. Suggestions for a new model? (N, preferably.)</tweet>
            <date time="12:41" weekday="5">2010-07-30</date>
        </entry>
        <entry id="20">
            <permalink handle="19876287923">19876287923</permalink>
            <tweet>Do you like to write? Are you crazy about #symphonycms? Or just crazy? Join me on the Documentation Working Group! http://bit.ly/bhVE6z</tweet>
            <date time="21:41" weekday="4">2010-07-29</date>
        </entry>
        <entry id="21">
            <permalink handle="19843470091">19843470091</permalink>
            <tweet>@nicksergeant given how long it took to get HTML5 and CSS3 off the ground, maybe it will happen by the time we retire :)</tweet>
            <date time="12:46" weekday="4">2010-07-29</date>
        </entry>
    </tweets>

So here’s how the XSLT works:

<xsl:import href="../utilities/talinkahashifyer.xsl"/>
Imports the “talinkahashifyer” utility we downloaded from the Symphony site — this auto-formats the body of our tweets so things like links and @replies work.

<xsl:template name="get-tweets" match="tweets">
    <ul>
        <xsl:apply-templates select="entry"/>
    </ul>
</xsl:template>

This selects the <tweets> parent element from our XML, and applies any relevant templates for the <entry> child elements. The output is contained in an unordered list (ul) tag.

<xsl:template match="tweets/entry">
    <li>
        <xsl:call-template name="linkahashify">
            <xsl:with-param name="tweet" select="tweet" />
        </xsl:call-template>
    </li>
</xsl:template>

This matches all <entry> elements contained in the <tweets> element, and formats them by calling the linkahashify template (the actual tweet content is sent as a parameter to that template.) This output will be contained in a list (li) element.

For our example, the end result will be an unordered list of three tweets, organized in descending date order, and formatted appropriately:

This solution is admittedly somewhat abstract, but it’s good to familiarize yourself with <xsl:apply-templates> and <xsl:call-template>, as they are used heavily. Here’s a more straightforward way to do this with <xsl:for-each>, which might be more obvious for XSLT newbies who are familiar with other template languages:

<xsl:template match="tweets">
 <ul>
    <xsl:for-each select="entry">
      <li>
        <xsl:call-template name="linkahashify">
          <xsl:with-param name="tweet" select="tweet" />
        </xsl:call-template>
      </li>
    </xsl:for-each>
</ul>
</xsl:template>

Now that we have the get-tweets.xsl utility set up, let’s adjust our home page template to use it. Go to Blueprints > Pages and click on the home.xsl link.

We need to do two things: import get-tweets.xsl, and apply the tweets template to the content for this page. The complete home.xsl is below.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="../utilities/html5.xsl"/>
<xsl:import href="../utilities/get-article.xsl"/>
<xsl:import href="../utilities/get-tweets.xsl"/>

<xsl:template match="data">
  <xsl:apply-templates select="homepage-articles/entry"/>
  <xsl:apply-templates select="tweets"/>
</xsl:template>

</xsl:stylesheet>

Woo, now let’s check the page one more time.

Tweets are go

For our last content trick, we need to display some thumbnail images for each project. Before we do that, let’s clean up and tweak our setup a bit.

First, go to the Articles page and rename it Projects. We want this page to be available to the navigation, so remove the hidden page type.

Projectifying

Next, delete Comments, Notes, and Drafts stuff from the Blueprints > Components and Blueprints > Sections areas.

Clean as a whistle

For my last bit of cleanup, I’m going to replace all instances of the word ‘article’ with the word ‘project’ in the remaining XSLT page templates, utilities, and data sources. This is mostly for looks, you could skip this. Note that there are several ways to go about this sort of thing, you can either edit the files via the Symphony interface (slower) or operate on them as files in $site-root/workspace (faster).

Dealing with Images

Now that things are tidy, let’s work on getting images on the home page. There are three items that need to be tweaked: the Project Images data source, and some XSLT utilities.

We only want to display thumbnails on the home page and projects page, so in the Project Images data source, add a Filter based on the Image Type, and set it to Thumbnail.

Bring out your thumbnails

Next, we’ll make some minor changes to the get-images.xsl template. We’re mainly removing the default JIT resizing code, because our thumbnails are already the size we want. Full template code here:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template name="get-images">
  <xsl:param name="entry-id"/>
  <xsl:if test="/data/project-images/entry[project/item/@id = $entry-id]">
      <xsl:apply-templates select="/data/project-images/entry[project/item/@id = $entry-id]"/>
  </xsl:if>
</xsl:template>

<xsl:template match="project-images/entry">
  <a href="{$workspace}/uploads/{image/filename}">
    <xsl:if test="position() mod 3 = 0">
      <xsl:attribute name="class">last-column</xsl:attribute>
    </xsl:if>
    <img title="{description}">
      <xsl:attribute name="src">
        <xsl:value-of select="$root"/>
        <xsl:text>/workspace/uploads/</xsl:text>
        <xsl:value-of select="image/filename"/>
      </xsl:attribute>
    </img>
  </a>
</xsl:template>
</xsl:stylesheet>

Finally, we’ll update the homepage-projects/entry portion of the get-project.xsl template. This is just a matter of simplifying what came with the default workspace.

<xsl:template match="homepage-projects/entry">
  <div class="entry">
    <xsl:call-template name="get-images">
      <xsl:with-param name="entry-id" select="@id"/>
    </xsl:call-template>
    <p class="imgcaption">
      <a href="{$root}/projects/{title/@handle}/"><xsl:value-of select="title"/></a>       
      <xsl:if test="$is-logged-in = 'true'">
        <xsl:text> &#8212; </xsl:text>
        <a class="edit" href="{$root}/symphony/publish/{../section/@handle}/edit/{@id}/">Edit</a>
      </xsl:if>
    </p>
  </div>
</xsl:template>

this code simply wraps each thumbnail in a <div>, with its title displayed as a caption below in a <p> and a handy Edit link if you’re logged into Symphony as an editor.

Phew, that was a lot of work, but our home page is finally where we want it:

Portfolio home page in the raw

We’re close to the finish line now! I’m going to end this series with a short Part 4, in which I’ll add the About and Projects pages, and some styles to pretty everything up. You will also be able to download the sample site as an ensemble.

P.S. I won’t take so long for the Part 4, I promise

The Project

See it live. And don’t use IE. I haven’t tested it and I’m not going to!

The Story

In 2010, I rebuilt my website. As usual, I overloaded this project with far too many technology changes, forcing me to learn tons of new stuff before I could do any real work. I also fell into the worst client trap of being perpetually unsatisfied with any design I produced. Nevertheless, I trudged on, and finally decided it was decent enough to launch in March.

One of the new features was the Ephemera section, which was rushed out the door at the last minute, but turned out to be the best addition to the site. The idea was to start tracking little memorable bits of my life — items that would otherwise be lost in time. I have a terrible memory, and I’m finding that my once-reliable Internet footprints are getting more and more fragmented across many different services. Back in the good old days (i.e. 2 years ago), you could just read your email archives and remember everything that happened.

The Ephemera page does two things. First, it provides simple statistics about my various web activities. Second, it displays a record of my actual, physical life, which means that I’m required keep a fairly minimal daily log of what happens. I had zero confidence that I could maintain even the most rudimentary task on a daily basis, so I kept it dead simple: a one-line text annotation, and a quantitative (0-10) ranking of the day in four categories: Mood, Workload, Sunlight, and Sleep.

So, what did I learn?

1. Merely logging into a website, choosing four numbers, and writing a one-line sentence every day is incredibly hard to keep up. Feltron has the right idea by “outsourcing” the data collection.
2. If you miss a day, or a week, you won’t remember what the hell happened yesterday — let alone last Tuesday.
3. Life is filled with countless meaningless interactions and uninteresting chores. Some days memorable things happen, and other days you eat pancakes and clean up cat barf.
4. It’s hard to be quantitative about your life. As an example, should my daily Sleep entry be an exact representation of the number of hours I slept, or should it be qualitative relative to how tired I really feel? It’s a judgment call.
5. Trends confirm that moderation is good. Big surprise, mood plummets as workload nears maximum!

How it works

I’ve been dreaming about doing native/live data visualization on the web for years. The technology is finally coming around; there are numerous libraries and tools available that do in-browser charting, using either SVG or the <canvas> element to render the charts. I tried almost all of these and settled on Highcharts for this project, as it was the fastest way to get some decent output.

The data is stored in Symphony and is sent either directly to the browser and rendered by a Highcharts script, or it’s output as JSON and then retrieved via a jQuery AJAX call, which is then passed to Highcharts. The Frequently Noted chart is custom designed using <div> elements with large CSS3 border-radius values. I do quite a bit of tinkering with the data and almost all of this happens in Symphony’s XSLT layer, and I used several EXSLT functions to do string tokenization, math, and other mundane stuff.

1. The hardware
2. The remote
3. Trying to get rid of cable

Having tried numerous Internet/TV solutions already, I have tempered expectations for this thing. Mainly, I want something little and quiet, with a decent interface that my wife can use, and which will stream photos and music. I have a TON of music, but very few movies on my local network, so the music piece is a big deal for me. I also occasionally want to watch videos from the web. I don’t realistically expect to replace cable at this point, but I’d like to be surprised.

Hardware

The packaging was impressive, not unlike an Apple unboxing experience. The Boxee Box itself is decent quality, mostly what you’d expect if you’ve been following the press about this thing at all. It’s black plastic, with a glowing frog face on the front. (My daughter is rather bothered by the glowing frog.) It has numerous audio out options (HDMI, optical, and composite stereo) but for video out, HDMI is all you get. It supports WiFi and Ethernet — I hooked it up wired-style to my Gigabit ethernet in the house. There are also USB ports and an SD reader but I have no intention of using these.

The box is basically silent, which is great. All my previous web+TV devices have sounded like vacuums as soon as you turn on some HD video.

Performance is good, but not mind-blowing. Streaming is indeed beautiful — I’m streaming music and navigating libraries simultaneously without any problems. I was underwhelmed with video playback from NBC.com, but I haven’t tested this out too much yet.

Initial Config

After plugging it in, it immediately picked up my local network and performed an update, requiring a reboot. After that it was smooth sailing — it auto-detected all the Samba shares on my local network (I mainly use an Ubuntu server) and I could easily hook up my music and photos folders with barely any effort.

Remote

This was the biggest sell for me, the full-blown QWERTY keyboard remote with a sane interface on the other side. I do like it, but my main gripe is that the keyboard isn’t integrated as much as I’d like in the Boxee software. For example, when I’m browsing the hundreds of artists in my music library, I’d like to type “R” and jump to the artists that begin with “R.” No dice — typing just brings up the search box. And the search box doesn’t appear to search my local music and photo libraries, either, just video content. Boxee is clearly pushing the video aspect.

Otherwise the remote is a pleasant experience, it does what it should and works at distances without line of sight.

Software

I’ve already run Boxee on a Mac mini, so I knew what I was in for. Basically, you get Boxee. Try it out first if you’re interested in buying this. I have a laundry list of gripes with the software, but mainly I think it has a ton of currently unrealized potential.

Here’s my biggest problems right now:

1. Missing apps: no Netflix or Hulu Plus, Vudu’s not working yet, and no Last.fm app. The former three are happening eventually; I’m paying the early adopter tax in this regard. The apps that are here (like Flickr) are OK but not likely to be used much.
2. Photos and Music were surreptitiously buried into the “Files” section in the new interface. This blows.
3. As many have said, the new post-beta interface is a step backwards. Fonts are worse, the home screen is less useful, and the overall feel just isn’t as nice. It’s fine, but not what it looked like it was going to be.

All that said, I see a ton of promise, and I think it’s going to be great in a couple of months after they get some apps and updates out the door. For now, it’s a somewhat pricey media streamer with a handful of options for Internet video.

I received some interesting responses, but Kelly’s hit me:

Is this right? Am I afraid to be honest with my friends and family? Perhaps, but there is more to it.

Facebook is great at connecting you with people you meet. Maybe this isn’t true for everyone, but in my case my Facebook friends are predominantly based on geography and genetics – friends and family acquired during the regular course of living my life. They are almost all people I have met in person.

Twitter, on the other hand, is not particularly locative, and it’s self-curating. You can align yourself with like-minded people, and operate under the assumption that if others don’t like what you’re putting out there, they will simply unfollow. No hard feelings.

In this way, Twitter is all about producing and consuming good content; Facebook connects you with your real world, which consists of some good content, and some baggage.

That baggage is what destroys my ability to be honest. Do I want my Christian friends on Facebook, whose kids play with my kid, to see me talk about being an atheist? Should I profess my progressive agenda within cyber-earshot of a hypothetical conservative neighbor? Is that going to do any good to our relationships? It seems I’m not alone in being paranoid about this sort of thing.

Maybe this does boil down to my fear of judgment and its consequences. And it’s entirely likely that I’m being dramatic and oversensitive. But at the end of the day, when my house is on fire, it’s not going to be a random Australian web designer who will help — it’s the neighbor. When this sort of reality is at stake, self-editing can be self-preservation.

So, when it comes to honesty and openness, apparently I either have to man up or shut up. Let’s hear your vote in the comments.

Before we begin, please note that since our last post, Symphony has been updated to version 2.1.0. You may want to update your installation.

As you’ll recall, we’re going to make a portfolio site that has:

1. An overview page containing a thumbnail list of all projects organized by categories.
2. A project detail page with a big image, headline, and blurb about the project.
3. Support for storing any number of thumbnails and images per project.

OK then, let’s get started. In the interest of being lazy, we’re going to reuse the structure of Symphony’s default workspace, which is set up as a blog, but works remarkably well for portfolio projects.

Symphony organizes content into Sections. You define the fields that make up a Section, using field types such as Text Input, Date, and Checkbox. You can also link fields to other Sections. It’s powerful and awesome.

Once you have a Section defined, you will create Entries (i.e., blog posts, portfolio projects, or any other repetitive content such as pictures of kitties.)

Let’s take a look at Sections by logging into the Symphony administration panel and selecting Blueprints > Sections.

Symphony's Really Excellent Default Sections™

As you can see, there are several pre-made Sections here. The ones we care about are Articles, Categories, and Images. You can opt to use Comments, too, but I’m excluding that for now.

Click on the Articles link.

Fields in the Articles Projects Section

There are five fields in the Articles section: Title, Body, Date, Categories, and Publish. Conveniently, these are the essentials for our portfolio (except for Images — more on that in a minute.)

There are lots of options in the Section editor, but we can mostly ignore them at the moment — full details are in the Symphony Concepts Guide. Note that you can drag and drop a field to reorder it, and you can add fields at the bottom of the page (click on the Text Input menu to see the field types, and Add item to add it.)

There is only one change we need to make in the Articles section: rename the whole section to Projects. Do this and Save.

Now go to Blueprints > Sections and select Images.

Images is linked to Projects using a Select Box Link field. This allows us to upload as many images as we want and have them associated to a project in our portfolio. (Database geeks or people with lots of kids might call this a “one-to-many” relationship.)

This link field was originally named “Article” but we want to rename it “Project”:

Renaming the Select Box Link field

With that done, let’s add one more field, called Type. This will be a Select Box field with two options, Thumbnail and Primary, allowing us to designate which images should be used for different purposes.

Note: Symphony has an extension called Just In Time (JIT) Image Manipulation which can transform (crop or resize) images on the fly; you may prefer this for your thumbnail purposes. Personally, I’m a control freak and enjoy doing my cropping and resizing offline.

To add the field, choose Select Box in the Field Type menu at the bottom of the page, and click Add Item. Enter Type in the Label field and put the two options in the Static Options box (separated with a comma.)

Typin' in Image Types

While we’re here, if you think you’ll be uploading a ton of images, you might want to “unhide” this section by unchecking this box at the top of the page:

Show yourself, Images!

now you will be able to directly select the Images section in the Content menu. Save your changes.

With the section setup done, let’s look at our actual content. First, let’s define some categories for our portfolio projects. Go to Content > Categories.

Removing the default Category entries

Hey, who put those generic Categories here? Oh right, the developers of this fine demo workspace. Despite their quality work, we don’t need the sample entries, so click on each one and choose With Selected > Delete. Apply the change.

Let’s make some actually useful categories. Using the Create New button, create categories called Web, Print, and Miscellaneous.

Categorically Accurate

Looking good! Time to create some projects. Go to Content > Projects, and once again delete the sample items in this section, then create some dummy projects (or if you have real ones, go for it.) Be sure to add at least one project in each category.

The Best Web Site Ever

When you’re done, go back to the main Projects view to take a look at your work.

Our sample portfolio. Don't expect any job offers yet.

Now we need to add some images to these projects. There are two ways to do this: either click on the “0 →” for a Project, or go to Content > Images.

Gone Image Uploadin'

Click Create New and fill out the fields appropriately, uploading two images (Primary and Thumbnail) for each project:

The Best Fantastic Head Ever

When you’re done, you can view all the Image entries.

A fleet of images

Woot. Now that we have some extremely high quality content loaded, it’s time to wreck this joint. For our last trick, we’re going to import some data from Twitter. Get ready, you’re going to have your first taste of XPath!

First, we need to make a new section to hold our imported Tweets. I’m not going to run through this in detail, just make sure your new Tweets section matches the settings below. I like to put my imported stuff in its own Navigation Group, called “Data” – this adds a new dropdown menu in the admin interface.

Gotta Make The Tweets

Next, we’ll make an XML Importer. This does all the painful work of mapping XML from a Twitter feed to the fields in the Tweets section we just created. Once the two are hooked up, Symphony will grab Twitter’s XML and put its content into your section. Each tweet becomes an Entry in Symphony, just like our projects, categories, and images.

To add the importer, go to Blueprints > XML Importer.

Bask at Your Future of XML Wizardry

Click Create New. Start by naming this importer “Tweets.”

Naming the Importer

Twitter provides a bunch of different kinds of feeds via their API. I’ve had good success using the XML output from a URL in this format:

http://twitter.com/statuses/user_timeline.xml?user_id=16454301&count=150

You will need to swap in your own Twitter user_id but otherwise you can just use this as-is. Paste this URL into the URL field.

The faucet from which your Tweets will flow

To finish this step, check “Automatically discover namespaces.” In the Included Elements field, enter statuses/status. This is a small XPath expression that selects only the status elements from the Twitter XML feed.

Last, we have to tell Symphony where each piece of data from a Tweet should go. In the Destination area, select Tweets from the Section field. Then add each of the three fields that make up a Tweet (Permalink, Tweet, and Date.) Make sure the settings match the screenshot below (don’t forget to set Permalink to “Is unique.”)

Tweet Fields

each XPath Expression selects a specific element from the Twitter XML feed and uses the text() function to obtain that element’s content.

OK, we’re done! Click Create XML Importer. Once it’s created, go back to Blueprints > XML Importers, and click on our new Importer.

Getting Ready for a Tweet Flood

Choose: With Selected > Run > Apply. You should see something like this:

Woo! It worked.

Now if you proceed to the Data > Tweets section, you will see a swath of Tweets.

Indeed, a swath.

Excellent! After all this work, we have content loaded in our custom sections, and some imported Tweets. Let’s take a look at the site now.

Demo-tastic

Still looks like a blog. Don’t worry! In the next episode, we’ll configure an HTML template for the site and instruct Symphony to display our content exactly as we want, using Data Sources and some XSLT mojo. We’ll also get our About page and contact form in order.

Anything else you’d like to see? Leave a comment and ye shall receive.

Jason Santa Maria wrote a well-reasoned piece in which he laments the state of web design authoring tools. In a nut: current tools are inadequate, originally built for print design or outmoded metaphors, and each does only one or two things we really need. They are, essentially, obstacles that slow down our work and require us to spend silly amounts of money on multiple apps that, even together, don’t meet our requirements.

He’s right, and you don’t have to talk to many web folk to find this out.

By contrast, developers have seen some improvements to parts of their workflow in recent years. Coda, Espresso, and Aptana Studio all solve problems elegantly. They take a decent stab at fixing the annoying things about programming for the web, and on the whole, they do OK.

So what’s the problem with building a design app for the web?

Plainly, it’s extremely difficult, and no company with decent resources has really tried to do it (yet). But I argue that more than that, the modern web is a true Frankenstein that outwits those who might attempt to create new design tools for it. Let’s be honest — the web itself is fundamentally crap. It’s a hacked together heap of mostly incompatible parts that miraculously work decently part of the time. No wonder we don’t have good tools to build it.

To be sure, things are converging. Browsers are more robust, capable, and compatible than ever. Standards are getting better. People are bullying Flash. If ever there was a time to build such a beast, it’s now.

Still, perhaps it’s my own personal masochism, but I actually enjoy using crappy tools to build the web. Doing so requires some ingenuity and awareness of different pieces of the puzzle; it adds to the challenge and toughens us up. Maybe this should be coined the Roy Underhill principle.

If a new tool was released, I’d try it, and probably use it. But just as people don’t build computers anymore, such a tool will signal the very beginning of the time when people don’t really need to build the web anymore.

Disclaimer: anyone who makes websites can tell you that there are usually several ways to accomplish a task. More than likely, I have not done things the best way. Some of my motivation in posting this is to possibly get some corrections from people smarter than I.

Step 1: Figure Out What You’re Building
Obvious, innit? Well, not really. It takes more than a little forethought to decide what your site is going to be, but I’m going to assume you’ve already worked some of this out. (Pro Tip: if your site is a hipster blog, just use Tumblr.)

You can't build these things with Symphony. Sorry.

For the purposes of this post, let’s say you want to make a portfolio website that meets the following criteria:

1. HTML5, because Zeldman told you to.
2. A basic “about me” page with some static content.
3. A simple contact form.
4. A portfolio overview page with categorization of projects, a detail view of each project, and support for one or more images and thumbnails associated with each project. You can see mine for an example of how this might work.
5. Content imported from external sources (we’ll use Twitter and Flickr) and then displayed in some meaningful fashion.

Step 2: Figure Out Where to Build It
This is rather self-explanatory, but it bears repeating that you will need a web host (either locally or via an external provider) that supports Symphony’s server requirements, which are helpfully located in the footer of symphony-cms.com.

Not the best choice for hosting Symphony, but it runs Mouse Stampede like a champ.

I will add that for the purposes of building a Symphony site, it’s invaluable to be able to perform occasional Unix-style command-line tasks (perhaps via SSH) and run Git. For content importing, you also need to access cron on the server. Personally, I use shared hosting at Webfaction and find it delightful for both development and production sites.

Step 3: Install Symphony and Get Git Familiar
The Symphony Installation Tutorial has detailed instructions, but it’s better to use the Git instructions at the bottom of the page instead of the .zip package installation. Using Git greatly simplifies the process of upgrading extensions, which happens fairly often.

Since I’m a bleeding-edge kind of fella, I suggest switching to the latest development version, which is 2.0.8 RC3 as of this writing. To do so, clone the repository and then do:

git checkout 2.0.8RC3

Then go ahead and install the default workspace, as it provides some nice starter material that will save us some time.

git clone git://github.com/symphony/workspace.git

If you need any help with Git, this forum thread is all you need to know.

Step 4: Say Hello to Your Little Friend
With unpleasantries out of the way, let’s get going. I’m going to assume you’ve worked out Steps 2-3 and installed a core Symphony installation and the default workspace. You now have something that looks like this:

Good news! This default workspace already has an About page, which itself contains a working example of a contact form.

It’s also set up as a standard blog, with entries, categories, and archives. We can easily repurpose and extend this structure for projects in our portfolio, instead of blog posts.

At this point, take a moment to familiarize yourself with Symphony’s administrative interface by visiting http://yoursite.com/symphony. By default, it looks like this:

There are three main areas in the navigation. Content is where things like portfolio projects and blog entries will live. Blueprints is the gateway to the building blocks of your site — Pages, Components, and Sections (more on this later.) System allows you to configure various parts of your installation. I’m not going to rewrite the book on this stuff, so be sure to review the Concepts Guide.

Step 5: Pimp Your Symp

The default installation is all well and good, but it’s rather sparse. Let’s grab some extensions and utilities that will make things a little nicer for us going forward.

First, extensions. To make them easier to keep up to date, we’ll do this Git-style using the git submodule add command. Here’s a short list to get us started, but there are 182 of them, so use what you need! Note: as always, run these Git commands in your site’s root folder.

XML Importer (grab external data)
git submodule add git://github.com/rowan-lewis/xmlimporter.git extensions/xmlimporter

Codemirror (XSL syntax highlighting)
git submodule add git://github.com/oleae/codemirror extensions/codemirror.git

CacheLite (frontend caching)
git submodule add git://github.com/makenosound/cachelite.git extensions/cachelite

Configuration Settings (edit Symphony config from the web)
git submodule add git://github.com/bauhouse/configuration.git extensions/configuration

Order Entries (drag and drop content ordering)
git submodule add git://github.com/nickdunn/order_entries.git extensions/order_entries

Date and Time (custom field)
git submodule add git://github.com/nilshoerrmann/datetime.git extensions/datetime

Now let’s enable them by going to System > Extensions. Click on the new ones and choose (With Selected) > Enable > Apply.

If you need to update extensions in the future, you can just run git submodule update on the Symphony root folder, and you’re done. Woot!

Now, on to Utilities. These are little (or big) snippets of XSLT that will help us accomplish some tasks. You can add these to Symphony by copying the source code, then visiting Blueprints > Utilities > Create New. You can name each utility whatever you want, but for this tutorial, I’ll be using the names in italics.

HTML5 Output
html5.xsl

Multilevel Navigation (handle sub-pages in a nav bar)
multilevel-navigation.xsl

Twita@talinkahashifyer (linkify Twitter content)
talinkahashifyer.xsl

OK, that will do for now! At this point, we’ve added a bit of spice to our installation and we now have the bits in place to actually get to work.

That means it’s surely time to have some coffee and goof off for a while.

In part 2 of this series, I’ll explain how data works in Symphony, and we’ll get our content structure in place. We’ll also import some stuff from Twitter. In part 3, we’ll take a simple site design and convert it into Symphony pages. Stay tuned!

I’ve been thinking about creative method and inspiration recently, mainly because I’m finally tackling a big project, but also due to my recent induction into Dribbble.

To be clear, I think Dribbble is wonderful, for many of the same reasons Twitter is wonderful; it provides a wee goon such as myself an opportunity to share ideas and interact with people I would never have met, or heard of, for that matter.

My problem, in short, is that the Internet is completely overloaded with inspiration, between social networking, Zootool, Flickr sets, the Top 500 Lists of Top 500 Design Awesomes, countless CSS galleries, etc. Mindy Wagner explains this well in an inspiration overload lament.

Not only is it impossible to keep up, but these sites tend to emphasize glitz and trends over substance (with some exceptions.) For example, my site was featured on some CSS galleries, then its menu was hacked apart for another gallery as a navigation example. “Hey, that button is a circle! Please RT!”

Compounding this, looking at pretty designs and then fiddling with Photoshop or Firebug is fun. Creating and loading content? Building a theme? Debugging IE? No way, let’s goof around with drop shadows and the Add Noise filter. On the downside, this fiddling goes on for about 3 years until one discovers an untapped mine of self-discipline.

So what’s a goon to do? Ignoring the New Awesomeness can be dangerous, in the same way pigeonholing your technical skills can reduce your marketability. Nevertheless, I’m going to try what The Denver Egotist suggests and turn off the Mac, drafting everything out in advance on paper. Though, having already replaced all paper with trackpads and iPhones, I’ll have to make a run to an office supply store.

Worst of all? True inspiration comes from your life, not a screen — but it’s pretty hard to get away from screens. I used to believe computers were the answer, not the problem. Now I’m not so sure.

I’m a web content management junkie. Over the years I’ve used Textpattern, ExpressionEngine, Drupal, and WordPress, but none have fit my fancy as much as my recent love, Symphony.

Symphony is a beautifully minimal PHP+MySQL-based CMS that uses XML as its backbone. More on that in a minute.

More than any of the other systems I mentioned, possibly excepting Drupal, Symphony’s learning curve is rather steep. For starters, Symphony’s developers treat the system like a blank notebook — after installation, almost nothing is preconfigured at all. (They offer bespoke “Ensembles,” which are basically sample sites you can install as a starting point.) You can build a WordPress blog in roughly 12 seconds, but making a Symphony site takes a substantial amount of forethought.

Compounding the problem is that the administrative nomenclature is somewhat obscure — what’s a Data Source? An Event? A Utility? How do these relate to Pages and Sections? Fortunately, the documentation is improving, and the developers are set to make some valuable interface/conceptual improvements in the upcoming version 2.1.

Furthermore, there’s that whole templating/theming issue. Symphony uses XSLT to transform its self-generated XML into standard HTML that gets displayed by the browser. This is a significant difference from the template tags approach (ExpressionEngine, Textpattern) or the direct-PHP hooks approach (Drupal, WordPress) that you might be used to. XSLT is highly powerful but it’s not particularly commonplace. The XSLT requirement may continue to relegate Symphony to niche status since people may be averse to learning it, but this is a bummer, because it’s more standardized (it’s a W3C spec) than any of the other system-specific approaches, and it’s great once you learn it.

You might be thinking, OK, this sounds hard, why would I use Symphony? The answer is that, unlike any other CMS I have tried, it lives and breathes the native tongue of the semantic web: XML. Increasingly, my online life is divided into many buckets: Twitter, Flickr, Delicious, and so on. I don’t own my content anymore.

Symphony takes any XML feed you’ve got: RSS, Atom, SOAP, custom API output, whatever — and treats it like a first class citizen. Need to grab your most recent tweets? An RSS feed from your blog? You can do it almost instantaneously using a Dynamic XML data source. The functionality is built right in. This data gets munged together with your site’s standard content into one glorious stream of XML, ready to be transformed into a new-fangled website the kids are talking about.

If that’s not enough, you can use the new XML Importer extension and a simple cron job to import your XML feeds as permanent, native Symphony content. This allows you to archive and store your content — such as all of your tweets — and regain control of your stuff. This functionality is pure gold for Lifestreamers, who would be remiss to overlook Symphony as an option to drive their sites.

To be sure, it’s not all a walk in the park. An initial site setup will take you a while. You might have to download stuff from Github. You have to learn XSLT. You will need to try some bleeding-edge software. And yes, there are ways to accomplish these tasks in other systems. But none is as conceptually elegant as Symphony. (For example, importing generic XML feeds from different sources in WordPress is still remarkably ugly, requiring several plugins and some custom code.)

Symphony’s community is small and extraordinarily helpful, so you will get help when you need it. If you have a lot of data and you want it back, give Symphony a try.

I’m planning to follow this post with an overview of how I built my new site with Symphony. Stay tuned.