<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>frontendbook.com &#187; dynamic content</title>
	<atom:link href="http://frontendbook.com/tag/dynamic-content/feed" rel="self" type="application/rss+xml" />
	<link>http://frontendbook.com</link>
	<description>In depth analysis on Web Development, User Experience and Web 2.0</description>
	<lastBuildDate>Mon, 12 Jul 2010 18:42:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0-beta2</generator>
		<item>
		<title>3 tips for a more dynamic website in less than an hour</title>
		<link>http://frontendbook.com/3-tips-for-a-more-dynamic-website-in-less-than-an-hour</link>
		<comments>http://frontendbook.com/3-tips-for-a-more-dynamic-website-in-less-than-an-hour#comments</comments>
		<pubDate>Tue, 29 Apr 2008 12:32:11 +0000</pubDate>
		<dc:creator>mattias</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[delicious]]></category>
		<category><![CDATA[dynamic content]]></category>
		<category><![CDATA[feeds]]></category>
		<category><![CDATA[Front-End Architecture]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[magpie]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[rss]]></category>
		<category><![CDATA[Smarty]]></category>
		<category><![CDATA[social bookmarking]]></category>
		<category><![CDATA[Twitter]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://snofs.com/blog/?p=135</guid>
		<description><![CDATA[This post aims at giving you 3 tips for achieving a more dynamic webpage with very little programming and no change in your workflow. The tools we are going to use are: Yahoo Pipes Twitter Wordpress Delicious Magpie RSS What &#8230; <a href="http://frontendbook.com/3-tips-for-a-more-dynamic-website-in-less-than-an-hour">Continue reading <span class="meta-nav">&#8594;</span></a>


Related posts:<ol><li><a href='http://frontendbook.com/setting-up-a-website-with-wordpress-3-in-10-minutes' rel='bookmark' title='Permanent Link: Setting up a website with WordPress 3 in 10 minutes'>Setting up a website with WordPress 3 in 10 minutes</a></li>
<li><a href='http://frontendbook.com/4-great-books-for-increasing-revenue-from-your-website' rel='bookmark' title='Permanent Link: 4 Great Books for Increasing Revenue From Your Website'>4 Great Books for Increasing Revenue From Your Website</a></li>
<li><a href='http://frontendbook.com/11-ways-to-increase-your-website-traffic' rel='bookmark' title='Permanent Link: 11 Ways to Increase Your Website Traffic'>11 Ways to Increase Your Website Traffic</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><!--:en-->This post aims at giving you 3 tips for achieving a more dynamic webpage with very little programming and no change in your workflow. The tools we are going to use are:</p>
<ul class="links">
<li><strong>Yahoo Pipes</strong></li>
<li><strong>Twitter</strong></li>
<li><strong>Wordpress</strong></li>
<li><strong>Delicious</strong></li>
<li><strong>Magpie RSS</strong></li>
</ul>
<p>What we would like to achieve is a website that feels more dynamic even when you are not writing articles on your blog/website. This article is based on a web running PHP, <a href="http://www.smarty.net/">Smarty</a>, <a href="http://wordpress.org/">Wordpress</a> and a <a href="http://www.dreamhost.com/r.cgi?290709">hosting plan</a> that gives you the possibility to create and change rights for directories. You can of course adapt these tips to any server architecture you may be using, but these examples will feature this architecture.</p>
<h3>Integrate Yahoo Pipes for News</h3>
<p><a href="http://pipes.yahoo.com/">Yahoo Pipes</a> lets you, easily and graphically, create advanced mashups from different external sources such as RSS and other content available online. You can aggregate, manipulate and filter the content to fit your needs. Yahoo Pipes is very powerful used correct. In this post we will focus on how to take 1 or more RSS-feeds, combine them into one and filter out the content that fits on your website as targeted news.</p>
<p>Below you find a screenshot of a pipe where I have aggregated a couple of RSS-feeds from startup-blogs, sorted all items on publish date and filtered out all items that have the name &#8220;social&#8221; in the title.</p>
<p><a href='http://beta.frontendbook.com/wordpress/wp-content/uploads/2008/04/picture-3.png'><img src="http://snofs.com/blog/wp-content/uploads/2008/04/picture-3-300x231.png" alt="Screenshot of Yahoo Pipes " title="Pipes Screenshot" width="300" height="231" class="alignnone size-medium wp-image-136" /></a></p>
<p>Pipes is very intuitive and you should be able to create a solution like this in less than 10 minutes.</p>
<p>Save your Pipe and give it a nice name, then click <strong>Run Pipe&#8230;</strong>, on the resulting page you will get the option to &#8220;Get as RSS&#8221;, copy that URL, it should look something like this: <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=BMHzDooV3RGSSmEWJhOy0Q&#038;_render=rss">http://pipes.yahoo.com/pipes/pipe.run?_id=BMHzDooV3RGSSmEWJhOy0Q&#038;_render=rss</a></p>
<p>You now have dynamic content that are filtered according to your needs, below we will show you how to integrate it to your website with Wordpress Plugins or with <a href="http://magpierss.sourceforge.net/">Magpie RSS</a> and Smarty.</p>
<h3>Integrate Twitter to Wordpress</h3>
<p><a href="http://twitter.com">Twitter</a> is a micro-blogging service that lets users <em>tweet</em> messages to their twitter profile. If you are using twitter, why not integrate your tweets to your blog, making it more dynamic, and if you like to, more personal. Maybe you do not want to create a single post for every tweet (max 140 characters), a daily aggregation maybe suits your blog better. Alex King has built <a href="http://alexking.org/projects/wordpress/readme?project=twitter-tools">a Wordpress Plugin on top of <a href="http://groups.google.com/group/twitter-development-talk/web/api-documentation">Twitters API</a></a> which do just that (among other things). Downloading and installing the plugin should not take you more than 10 minutes all together.</p>
<h3>Integrate del.icio.us as Link Manager</h3>
<p>If you run a web site or a blog, you probably collects and share bookmarks on social bookmark services such as <a href="http://del.icio.us/">del.icio.us</a>, <a href="http://www.blinklist.com/">BlinkList</a>, <a href="http://simpy.com">simpy</a>, <a href="http://ma.gnolia.com/">Ma.gnolia</a>, <a href="http://reddit.com/">reddit</a> and other social bookmarking sites. Why not utilize the well specified apis and tagging possibilities that they offer. In this example I have choosen to go with del.icio.us, but I am pretty sure you can do this with all of the popular social bookmarking services, the only thing is that they have to have an RSS published for the tag you are using to pinpoint your dynamic content.</p>
<p>In this example we are going to use del.icio.us and my bookmarks tagged with jquery as a resource for adding external links to your website that updates automatically when you add new bookmarks tagged with jquery to your online del.icio.us bookmarks.</p>
<p>My jQuery bookmarks can be found at <a href="http://del.icio.us/hising/jquery">http://del.icio.us/hising/jquery</a>. By adding /rss between hostname and username, you will get the list of jQuery bookmarks in a format suitable for integration with your web site. In this case the url to the rss is <a href="http://del.icio.us/rss/hising/jquery">http://del.icio.us/<strong>rss</strong>/hising/jquery</a></p>
<h3>RSS Integration Code Example</h3>
<h4>With Magpie RSS and Smarty</h4>
<p><a href="http://magpierss.sourceforge.net/">Download Magpie RSS</a> and follow the installation instructions. One thing you dont want, is to grab the feed every time someone visits your page, you are want to cache the result for a specified period of time, in this example we cache the feed response for 1 hour (set this depending on how often you think you will update your dynamic content)</p>
<pre><code>
<?php
//MAGPIE_CACHE_DIR must be server writable folder
define("MAGPIE_CACHE_DIR", YOUR_PATH . 'tmp/rss-cache/');

//MAGPIE_CACHE_AGE in seconds
define("MAGPIE_CACHE_AGE", 3600);

require_once('YOUR_PATH/magpierss/rss_fetch.inc');

$news = fetch_rss($feedurl);

//$news->channel array which contains info on the rss
//$news->items array that contains the feed items

/*
item example:
array(
	title => 'Weekly Peace Vigil',
	link => 'http://protest.net/NorthEast/calendrome.cgi?span=event&#038;ID=210257',
	description => 'Wear a white ribbon',
	dc => array (
			subject => 'Peace'
		),
	ev => array (
		startdate => '2002-06-01T11:00:00',
		enddate => '2002-06-01T12:00:00',
		type => 'Protest',
		location => 'Northampton, MA'
	)
);
*/
?>
</code></pre>
<p>When you have got the result from your controller/php-file make sure you expose the response data to your view manager, and print out your items. In this example I have used the Smarty templating engine</p>
<pre><code markup="none">
//PHP:
require_once(YOUR_SMARTY_PATH . 'Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('news', $news);
$smarty->display('template.tpl);

//Template
<ul>
{foreach from=$news->items item=item}
<li><a href="{$item.link}">{$item.title}</a></li>

{/foreach}
</ul>

</code></pre>
<h4>As Wordpress Plugin</h4>
<p>Download a plugin for integrating external RSS into your blog. There are a lot of different plugins for this, in this example we will use <a href="http://wordpress.org/extend/plugins/feedlist/">FeedList</a>. Upload and enable the plugin. Then in your template add this:</p>
<pre><code>
<?php feedList(array(
            'rss_feed_url' => 'http://del.icio.us/rss/hising/jquery',
            'num_items' => 10));
?>
</code></pre>
<h3>More Examples on Creating a Dynamic Web Quickly</h3>
<p>There are many other ways to create a more dynamic web site. You could use FeedBurner for creating Headline Animators. Headline Animator is an animated banner that cycles through your feed&#8217;s five most recent items. It&#8217;s an easy way to promote your content anywhere you can place a snippet of HTML. By doing this you can promote content from another blog on your website AND add a more dynamic web. All this is easy steps, under an hour of labour, to achieve a more alive web. Do you have any other tips that are a quick win when it comes to adding dynamic content to your web site? </p>
<p><!--:--></p>
<img src="http://frontendbook.com/wp3/?ak_action=api_record_view&id=119&type=feed" alt="" />

<p>Related posts:<ol><li><a href='http://frontendbook.com/setting-up-a-website-with-wordpress-3-in-10-minutes' rel='bookmark' title='Permanent Link: Setting up a website with WordPress 3 in 10 minutes'>Setting up a website with WordPress 3 in 10 minutes</a></li>
<li><a href='http://frontendbook.com/4-great-books-for-increasing-revenue-from-your-website' rel='bookmark' title='Permanent Link: 4 Great Books for Increasing Revenue From Your Website'>4 Great Books for Increasing Revenue From Your Website</a></li>
<li><a href='http://frontendbook.com/11-ways-to-increase-your-website-traffic' rel='bookmark' title='Permanent Link: 11 Ways to Increase Your Website Traffic'>11 Ways to Increase Your Website Traffic</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://frontendbook.com/3-tips-for-a-more-dynamic-website-in-less-than-an-hour/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
