Oh yeah baby!

It was quite a trip to Seattle the last couple days, with Gary and Rob, to get our level one Umbraco certification and become one of the few Umbraco solution providers in North America. I’ve gone through the crash-course with Jason already, and created about seven websites with it, and gathered a working knowledge of Umbraco that’s quite enough to get any Designer in trouble. But now, after having gone through the course headed by Paul Sterling, an Umbraco Evangelist for North America, I know how to do things right and without having to ask for (as much) help.

We started off getting familiar with Document Types, which are the building blocks of an Umbraco site. Then we moved into Templates, which organize the presentation of data and content. We followed the booklet that took us through CSS, XSLT, Macros, Packages, and other Umbraco functions that went beyond the basics.

Yeah, I knew most of it at the beginning and was enjoying the review on how to create Document Types and make Master / Sub-Master Templates and hook up the CSS. But then we got into stuff I’d never done before like create a multilingual site, use Dictionary Items to translate bits of text, create a FAQ with a Contour form for submitting questions, and add a Search Engine to name a few.

I think that installing and working with Packages such as Contour Forms and Runway Search was the most valuable part of the course for me. Those were tasks that I’d known about but never really done before, so I’m glad to have a better handle on those now. Umbraco makes it really easy to manage some of these third-party applications.

This course has been really valuable for me and ProWorks, as my understanding of Umbraco now allows me a greater range in putting websites together. As a team we can do just about any web project imaginable I’m sure!

Has anyone made level two certification? Should I go for that? Should any designer be allowed to go that far??

• BySet()
• ByUserAndTag()
• ByUserWithPaging()
• ByGroupWithPaging()
• ByFreeTextWithPaging()
• ByTagWithPaging()
• ByUserAndTagWithPaging()

It also has been tested in Umbraco 4.5 and Umbraco 4.0.x

The original documentation has been updated and is located here: Flickr API Search Package for Umbraco

The Umbraco Package page is here: Flickr API Search – XSLT Extension

Enjoy and please vote up if you like this package!

The da Vinci Days Web Design Process

Let’s pry open the creative brain of ProWorks for just a minute and see what really went into the new da Vinci Days site. The pages you’ll see there certainly weren’t imagined exactly like that from the start; they went through a creative process that covered a few stages of design. Generally the design process we go through for most websites looks like this:

• Set requirements
• Create 2 or more wireframe designs
  • Review
  • Create final wireframe
  • Review
• Create 2 or more complete designs
  • Review
  • Create final design
  • Review
• Build final design into HTML/CSS format
• Integrate design HTML into a content management system (Umbraco, Sitefinity, Wordpress, etc.)

The challenge in designing the da Vinci Days site was to create a framework that looks great year after year, and allows for changing poster artwork in the background.

Wireframe designs are just rough layouts of the elements on a page. We are playing with the puzzle pieces until we get the perfect fit, without even looking at colors or design yet. Here are a few of the wireframes that we started with for the home page:

Back to the top

We went with this last one. It handled all the priorities in the best way. Then I made wireframes for the rest of the pages. Here’s one for an event page:

The next step is to breathe life into the chosen wireframe and explore a few full-color design directions. Usually I’ll design a few for the the home page first, and then design the rest of the pages after the direction is chosen. This first direction never really got that far. I totally missed the mark at the beginning

I quickly changed gears and designed something with the da Vinci Days comminity in mind. I went with a natural hand-crafted look that better reflects the feel of this event and Santiago’s wonderful poster art.

We felt that design hit the mark right on the nose. There were only a few changes to get the final result from there.

The next challenge for me as a designer is building the framework of the actual website so that it looks exactly like my design. The design also needs to hold up to real data getting plugged into it, so I make sure everything’s flexible. In the end we come up with an entire visual system for da Vinci Days that encompasses any type of page Brenda wants to make!

Back to the top

Recently, we had a request to have comments be moderated.  That means any comment posted would be initially marked as spam and wouldn’t post live to the site.  The blog owner then has to go into the comments area and manually approve each comment.  I’m not big on this, but for some people its important.

Unfortunately, this doesn’t come out of the box in Blog 4 Umbraco.  Luckily, its easy to do.

To add this functionality all you have to do is add a new class that derives from the SpamChecker class.

I created a new class called “AlwaysMarkSpamChecker.cs” under the “Spam” folder.

The class contained the following code:

using System;
using System.Collections.Generic;
using System.Web;
using Umlaut.Umb.Blog.Interfaces;
using Joel.Net;

namespace Umlaut.Umb.Blog.Spam
{
    public class AlwaysMarkSpamChecker : SpamChecker
    {

        public AlwaysMarkSpamChecker()
        {
            this.ProviderName = "AlwaysSpam";
        }

        public override Boolean Check(int nodeid,
            string UserAgent, string UserIp, string Author,
            string AuthorEmail, string AuthorUrl, string Content)
        {
            return true;
        }

        public override void MarkAsHam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

        public override void MarkAsSpam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

    }
}

Then I edited the /umbraco/plugins/blog4umbraco/SpamChecker.config file in my Umbraco installation to look like this:

<?xml version="1.0"?>
<SpamChecker assembly="/bin/Umlaut.Umb.Blog" type="Umlaut.Umb.Blog.Spam.AlwaysMarkSpamChecker">
</SpamChecker>

Now when I add a new blog comment it will always be marked as Spam in the Comments tab.

If you have any questions or any problems, let me know!

using System;
using System.Collections.Generic;
using System.Web;
using Umlaut.Umb.Blog.Interfaces;
using Joel.Net;

namespace Umlaut.Umb.Blog.Spam
{
    public class AlwaysMarkSpamChecker : SpamChecker
    {

        public AlwaysMarkSpamChecker()
        {
            this.ProviderName = "AlwaysSpam";
        }

        public override Boolean Check(int nodeid,
            string UserAgent, string UserIp, string Author,
            string AuthorEmail, string AuthorUrl, string Content)
        {
            return true;
        }

        public override void MarkAsHam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

        public override void MarkAsSpam(int nodeid, string Author, string AuthorEmail, string AuthorUrl, string Content)
        {

        }

    }
}

Now that we’re using ASP.NET and Umbraco so much these days I needed to figure out how to get gzip compression working in IIS. Apparently there was a major bug in IIS 5.0 and earlier, but if you are using IIS 6.0 and above you are in luck!

In fact, this was easy enough that if you have access to your windows server, you should do it for static files at the very least.

The methods to do this have been well documented so I will simply point you to those who have paved the way.

This is my favorite article on the subject. Love the visuals and the fact that it addresses all of the gotchas you may have along the way:

Asp.net & IIS Tricks:- Using GZip Compression with IIS 6.0 to compress your dynamic content such as your aspx pages and increase the client side experience by downloading the pages fast. – Smallworkarounds.net

Other articles on the subject:

IIS Compression in IIS6.0 – Scott Forsyth’s Blog

HTTP Compression and IIS 6.0 – Coding Horror

There are some considerations as to whether to compress dynamic pages. If they are changing a lot, then it may not make a lot of sense because they would be constantly re-zipped and cached. Not great for performance. In that case, just zip the static files.

The idea is this. If someone was to ask a question or mention something relevant to your brand, market, product or service on Facebook would you like to know about it? Hint: So you can do something about it.

Note that at this time content on personal profiles is private and protected from even Google. Content from Facebook Pages and groups are accessible to Google search.

Step 1. Customize Your Google Search

Take advantage of Google to customize a search matching your business. Use the Advanced Search (link is right next to the Search button) and/or the Google search operators to refine your search. Here is a Google Cheat Sheet with a list of operators.

To get results only from Facebook include “site:www.facebook.com” to your search.

In the example below we are asking Google to return all results that include the term financial or its synonyms AND Corvallis, limited to results from Facebook. Also note we have selected the Latest results option on the left of the Google search page.

In the example below we asking for results including the term Umbraco on Facebook sorted by date.

Yet another option is to get results based on geography. In this case we are requesting results from Corvallis, Oregon (see the option in the left most column below).

Once you have a search you like save the URL address or just keep the browser open in the results page. We’ll need the URL in Step 2.

Tips and Advice:

• Don’t discount of your search doesn’t yield many or even any results (right now).
• More searches with fewer focused results is better than fewer searches with many results. In this way you will have more fine control over your searches.
• Consider filtering your results by multiple cities rather than a larger region.
• You can exclude results from your own Facebook page by adding “-site:www.facebook.com/YourPageNameHere” to the search.

Step 2. Use Open Dapper to Create a New “Dapp”

Go to http://www.dapper.net/open/. I like to use a second browser tab here. I recommend you create an account to use for this so you can save your “Dapp” and adjust it later. Select “create a new Dapp”. You can choose a format at this stage but its not needed.

Dapper will ask you a URL. Copy and paste the URL from your Google search here. You can also select the RSS feed option at this stage. Click the Next Step button to continue.

Dapper will process the URL and you will see the Google results page inside of Dapper. Find the Add to Basket button to add this page to your Dapp. Click Next Step to continue. Dapper will ask you if you want to use just one page here. The answer is yes, you can keep going.

Using your mouse select the content for your RSS feed, the 1)title 2)summary and 3)date if its available from the Google search results page inside of Dapper.

You will select these three items separately, save them using the Save Field button and name them appropriately. Once you have selected your content click Next Step to continue.

Preview your feed and make sure everything looks OK. You should see your title, summary and date if it was available. Click Next Step if it looks good. Go Back if you need to reselect your content.

Save your Dapp. Give it a good name. Describe what you are searching for and from where so you can easily identify it later. A description and tags aren’t needed. Click Next Step to continue.

Under Create RSS Feed make sure your Item Title, Item Text and Date Published are assigned to the appropriate content you selected earlier. The URL next to the RSS button is your new customized RSS feed.

Save the RSS Feed URL. We’ll use it in the next step.

Step 3. Use an RSS Reader to View Your RSS Feed(s)

Google Reader is just one of many free RSS readers available to you. iGoogle is also free. Its really a matter of preference.

In Google Reader below you can subscribe to your RSS feed by clicking the Add a subscription button. Below is what it looks like after the RSS has been subscribed to. You can see the Google search results inside Google Reader. The title is a link to the original source. Clicking it will take you there.

And there you have it. With many RSS feeds automatically updating your RSS reader you will be able to monitor Facebook and just about any other web page that is publicly accessible. Even if it doesn’t publish an RSS feed. Yes, there are some very cool business applications here.

Do you have any question about this? Suggestions? Please share them here with us as a comment.

The Goal:

• Build some HTML/CSS that works within the new 520px width requirements set by Facebook
• Add a YouTube video
• Not use iFrames

The Process:

1. Get to the admin section of your Facebook Fan Page.

Simply click the “Edit Page” link below your Fan Page photo on the Wall tab:

2. Install the Static FBML Application.

At the bottom of the admin area, there is a “More Applications” section.

If you’re lucky the Static FBML app will be listed like above in the apps you might find useful.  If that is the case, click the “Static FBML” link.

If it isn’t, then click “Browse More” and search for “Static FBML” or “FBML”.

Again, click “Static FBML”.

When you’re on the Static FBML app page, simply click the “Add to my Page” link below the icon in the top left.

There will be a popup to select the Page you want to add it to.  Find the correct page and click  the “Add to Page” button next to it.

Now go back to the admin area of your Fan Page and lets add the template.

3. Add content to your tab.

Click the Edit link on your new FBML application:

You now should see the edit screen.  Edit your box title text which will be the new tab title so keep it short.

Now comes the tricky part.  Getting HTML and styling into your new tab FBML content area.

Luckily, I have a starter template to get you going

Download the html code here: http://www.proworks.com/facebook/proworksStarterKit.zip and copy/paste the code into the FBML textbox.  You can also get it from here: http://pastie.org/940569

I’ll explain this code below.  For now, just paste it in and click the “Save Changes” button.

Lets go back to the admin area of your fan page and get this tab live.  The easiest way is to click the “edit” link at the top of the FBML edit page. Now click the “Application Settings” link in the FBML box under Applications.  Then click the “remove” link next to “Box:” and the “add” link next to “Tab:” in the resulting popup. It should look something like this when you’re done:

Now you should see your new tab on your Facebook Fan Page!  If you have a lot of tabs you may need to click the >> arrows on the right side of the tabs.  You can drag tabs around to reorder them. It should look something like this:

4. Customize with your own stuff

OK, so now you have a new tab.  First thing to note is that this will not accept all HTML and styling.  However, you can add new photos, links, text, or even flash fairly easily.

First thing you’ll want to to is add your own image/text to the box on the right.  The image needs to be hosted on your server somewhere. Simply edit the <a href=”http://www.proworks.com”> to your site URL and change the <img alt=”" /> src to an image location of your choice.  The ideal image width for the right side boxes in this layout is 168 pixels.

YouTube Video

Changing the YouTube video to your video is actually very easy as well.  Simply find the video you want to show and copy the weird text after the “v=” in the URL.

In this case its the “sIFYPQjYhv8″ part. Then replace all occurrences of “sIFYPQjYhv8″ in the code below (in your tab FBML content).

Save the changes and your have your content in the starter template and you’re on your way!

If you want to get adventurous and get other crazy things like Flickr slideshows or Vimeo videos or other cool things, check out the list of blogs by HyperArts on FBML and Static FBML.  Its a really good resource.

Thanks and let me know if you have questions or comments below!

Get it Into Your Template

I found a great tutorial from HyperArts Web Design that goes over the entire process of getting the Javascript FBML Like Button installed into your WordPress theme: “How to Add Facebook’s Like Button & Social Plugins to Your Web Pages & WordPress Posts“.

They go through the entire process of creating a Facebook Application, The extra Open Graph meta tags that you need in your template, and the html/script to add into your post and page templates.

This is an awesome tutorial, so no need for me to re-invent the wheel. Go check it out. Especially if you are using WordPress (although others can glean enough to use it on their own web sites/blogs). If you prefer to simply install a WordPress plug-in and you’re up to the latest version of WP, then check out this as well: WordPress Facebook Social Plugins List.

Added Features of the Advanced FBML/Javascript SDK Like Button

#1: The ability to add a comment to a “Like” or “Recommend” click on a post. This will post a new item to the wall of the person who liked it which is much more visible than the smaller “Like” text on their profile.

(Try this out on this post at the bottom of this post above the comments area…)

Here’s what it looks like on my profile:

And in the News Feed (note the regular “Likes” aren’t there):

#2: The ability to add targeted meta tags. The Open Graph meta tags include detailed location and contact information. I’m not sure exactly how that’s used at this point, but I’m guessing that it will allow Facebook and others to make more targeted recommendations to people in your social graph. Location is a big factor in that.

#3: Admin access to the “Liked” page and the fans. Not totally sure what I think of this yet, and its super confusing to see liked pages mixed in with your Fan Pages initially.  For better or worse you get a mini “like page” admin area to see who is liking your stuff.  It has a wall, so I’m guessing you can update fans of the page in their news stream.  Not sure as it didn’t seem to work for me.  However, I’m an admin so they may filter it out for me.

New pages in “Ads and Pages” area:

The new “Like” page:

#4: More control over styling. The iframe is, well, an iframe.  The FBML method gives you more control over the height of the widgit and the general styling of the text, etc.

That’s all I’ve found so far.  Was it worth it?  I think so if for nothing else the comment feature.  That increases visibility and is pretty nice.  And it didn’t take to long to implement so if you have an extra 30 minutes to an hour and want this, I’d say go for it.  Or get your web developer to do it.

The easiest thing to do right now is to add a Facebook Like button to your site:

You can see one on this blog over in the right sidebar (for the ProWorks Blog) at the bottom of each post or try it for this post below:

To get this now, go to the Like Button Builder on Facebook.  It’s super-easy for a single URL.

Once you get this going, you can add a news feed of all of the people liking stuff on your site.  That is done with the Activity Stream Builder.  Again, super easy.  Check it out:

For more information on the new Facebook features, take a look at the recorded stream from the f8 Conference Keynote.

Thank goodness I found the Flickr.Net API Library. That nice little library took a daunting (or at least time consuming) task and made it fun. Also, the Flickr API Explorer for the flickr.photos.search method was very nice for testing.

On to the package…

Download ProWorks Flickr API XSLT Search 2.0 (58 KB) - Tested in Umbraco 4.0.x and 4.5

The package mainly consists of an XSLT extension called ProWorks.FlickrXSLTSearch. This extension has six methods of searching for and returning photos from Flickr: ByUser, ByGroup, ByFreeText, BySet, ByTag and ByUserAndTag.  In addition there are versions of each that support paging using Flickr API calls.

In addition, there is a sample XSLT and two data types to help let your users choose the search in a content page. The data types are the “sort mode” and “tag mode” selections options available in the Flickr photo search method.

How To Install:

1. Install the package from the “Packages/Install local package” item in the “Developer” section in the Umbraco Admin area. (Normal package install)

2. Get a Flickr API key for your website

To get a key go to this page: http://www.flickr.com/services/api/keys and sign up. Your should get your key right away.

3. Add the config into your web.config and add your API key.

<configuration>
  <configSections>
    <section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet"
       allowLocation="true" />

    ...
  </configSections>

  <flickrNet apiKey="yourFlickrAPIKeyGoesHere" secret="yourSecretGoesHere"
       cacheDisabled="true" >
  </flickrNet>

...

<configuration>

This could be an external file as well.

If you want to use the FlickrNet caching, then make your config section look something like this:

  <flickrNet apiKey="yourFlickrAPIKeyGoesHere" secret="yourSecretGoesHere"
       cacheLocation="C:\\YOURWEBSITELOCATION\\App_Data" cacheSize="26240000" cacheTimeout="1:00:00" >
  </flickrNet>

4. Add the FlickrPhotoList Macro to a page or template.  It should display a list of Tree photos.

To customize the search see the documentation below.

Feel free to ask questions or comment below. The rest of the post will be the method documentation and the format that the search results are returned.

Methods

Note: all methods have nearly the same parameters so I will only list the new or different params after the first method description.

ByUser()

Summary: Use the Flickr API to search for all photos by a user.

Params:

• flickrUserId: User Id from Flickr (i.e. 12345678@N12)
• flickrSizeMSTB:
  • s = small square 75×75
  • t = thumbnail, 100 on longest side
  • m = small, 240 on longest side
  • - = medium, 500 on longest side (default)
  • b = large, 1024 on longest side (only exists for very large original images)
• flickrThumbSizeMSTB:
  • s = small square 75×75
  • t = thumbnail, 100 on longest side
• numberOfPhotos: Integer. The maximum allowed value is 500.
• flickrSortOrder: The possible values are: date-posted-asc, date-posted-desc, date-taken-asc, date-taken-desc, interestingness-desc (default), interestingness-asc, and relevance
• minTakenDate: Minimum taken date. Photos with an taken date greater than or equal to this value will be returned.
• maxTakenDate: Maximum taken date. Photos with an taken date less than or equal to this value will be returned.

Returns: XML resultset (XPathNodeIterator)

XPathNodeIterator ByUser(string flickrUserId, string flickrSizeMSTB, string flickrThumbSizeMSTB, int numberOfPhotos, string flickrSortOrder, string minTakenDate, string maxTakenDate)

ByGroup()

Summary: Use the Flickr API to search for all photos by a group id.

Params:

• flickrGroupId: Group Id from Flickr (i.e. 12345678@N12)
• NOTE: Same params as ByUser with the exception of “flickrUserId”

XPathNodeIterator ByGroup(string flickrGroupId, string flickrSizeMSTB, string flickrThumbSizeMSTB, int numberOfPhotos, string flickrSortOrder, string minTakenDate, string maxTakenDate)

ByFreeText()

Summary: Use the Flickr API to search for all photos for a full text search of title, tags, and description.

Params:

• searchText: A free text search. Photos who’s title, description or tags contain the text will be returned. You can exclude results that match a term by prepending it with a – character.
• NOTE: Same params as ByUser with the exception of “flickrUserId”

XPathNodeIterator ByFreeText(string searchText, string flickrSizeMSTB, string flickrThumbSizeMSTB, int numberOfPhotos, string flickrSortOrder, string minTakenDate, string maxTakenDate)

ByTag()

Summary: Use the Flickr API to search for all photos by one or more comma separated tags.

Params:

• tagsCommaSeparated: A comma-delimited list of tags. Photos with one or more of the tags listed will be returned. You can exclude results that match a term by prepending it with a – character.
• tagMode: Either ‘any’ for an OR combination of tags, or ‘all’ for an AND combination. Defaults to ‘any’ if not specified.
• NOTE: Same params as ByUser with the exception of “flickrUserId”

XPathNodeIterator ByTag(string tagsCommaSeparated, string tagMode, string flickrSizeMSTB, string flickrThumbSizeMSTB, int numberOfPhotos, string flickrSortOrder, string minTakenDate, string maxTakenDate)

ByUserAndTag()

Summary: Use the Flickr API to search for all photos by one or more comma separated tags for a user.

Params:

• flickrUserId: User Id from Flickr (i.e. 12345678@N12)
• tagsCommaSeparated: A comma-delimited list of tags. Photos with one or more of the tags listed will be returned. You can exclude results that match a term by prepending it with a – character.
• tagMode: Either ‘any’ for an OR combination of tags, or ‘all’ for an AND combination. Defaults to ‘any’ if not specified.
• NOTE: Same params as ByTag with the exception of “flickrUserId”

XPathNodeIterator ByUserAndTag(string flickrUserId, string tagsCommaSeparated, string tagMode, string flickrSizeMSTB, string flickrThumbSizeMSTB, int numberOfPhotos, string flickrSortOrder, string minTakenDate, string maxTakenDate)

BySet()

Summary: Use the Flickr API to search for all photos in a set.

Params:

• photoSetId: The id of the photoset to return the photos for.
• numberOfPhotosPerPage: Integer. Number of photos per page. The maximum allowed value is 500.
• page: Integer. The page of results to return.
• NOTE: The flickrSizeMSTB and flickrThumbSizeMSTB work the same as the other methods.

XPathNodeIterator BySet(string photoSetId, int numberOfPhotosPerPage, int page, string flickrSizeMSTB, string flickrThumbSizeMSTB)

Additional Methods “WithPaging”

Summary: Allows for paging on Flickrs end.  Adds a new parameter “page” and replaces “numberOfPhotos” with “photosPerPage”.

Params:

• page: Integer. The page of results to return.
• photosPerPage: Integer. Number of photos per page. The maximum allowed value is 500.
• NOTE: Same params as related method
  

Result XML

Fields:

<photolist> contains many <photo>s

<photo> object attributes:

• title: Image title as set by the image owner
• imagefile: File location URL on Flickr in the size specified by the “flickrSizeMSTB” param
• thumbnail: File location URL on Flickr in the size specified by the “flickrThumbSizeMSTB” param
• flickrpageurl: URL to the Flickr page for this photo
• ownername: Flickr user that has the photo on their account
• latitude: Latitude this photo was taken at
• longitude: Longitude this photo was taken at
• datetaken: Date photo was taken
• tags: tags assigned to this photo
• views: views on Flickr of this image

Sample:

<photolist>
<photo title="Call of the Raven (formerly Nature's Special Effects)" imagefile="http://farm1.static.flickr.com/33/63452603_b3a5b5448d.jpg" thumbnail="http://farm1.static.flickr.com/33/63452603_b3a5b5448d_t.jpg" flickrpageurl="http://www.flickr.com/photos/72164905@N00/63452603" ownername="Walkabout Wolf" latitude="47.149625" longitude="-121.566724" datetaken="2005/11/14" tags="" views="-1"></photo>
<photo title="Fascinating Nature - First Double Rainbow 2010" imagefile="http://farm3.static.flickr.com/2710/4466953793_cd0430ba59.jpg" thumbnail="http://farm3.static.flickr.com/2710/4466953793_cd0430ba59_t.jpg" flickrpageurl="http://www.flickr.com/photos/21207178@N07/4466953793" ownername="Batikart" latitude="48.798242" longitude="9.280571" datetaken="2010/03/27" tags="" views="-1"></photo>
<photo title="The Earth, The Sky And A Tree" imagefile="http://farm5.static.flickr.com/4016/4457682328_5425b08a1e.jpg" thumbnail="http://farm5.static.flickr.com/4016/4457682328_5425b08a1e_t.jpg" flickrpageurl="http://www.flickr.com/photos/8407953@N03/4457682328" ownername=".: Philipp Klinger :." latitude="50.377929" longitude="8.774814" datetaken="2010/03/22" tags="" views="-1"></photo>
<photo title="Touchdown, Part II" imagefile="http://farm5.static.flickr.com/4061/4398070785_453712aaef.jpg" thumbnail="http://farm5.static.flickr.com/4061/4398070785_453712aaef_t.jpg" flickrpageurl="http://www.flickr.com/photos/8407953@N03/4398070785" ownername=".: Philipp Klinger :." latitude="50.378586" longitude="8.767776" datetaken="2009/06/07" tags="" views="-1"></photo>
</photolist>