Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Mark Billen
13th August 2009

Build the BBC homepage

07 Conditional formatting

07 Conditional formatting

Build the BBC homepage

We want the second and third images to be displayed on mouseover. Click under the img tag and select XSLT> Conditional Region. Enter position() > 1 and click OK. Enter a display:none style attribute in place of Content goes here. Repeat to add a class of last-list to the third anchor element.

08 Text feeds

Build the BBC homepage

Create an XSLT fragment with the BBC Politics feed (http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/uk_politics/rss.xml). In Design view, via rss>channel>item, drag ‘link’ and ‘title’ to the canvas from the bindings pane. Define as an XSLT repeat region, repeating under item.

09 Formatting text feeds

Enter <ul>, <li> and <a> tags to format this data as a list of links. We want to limit this to the first ten results, so select XSLT>Conditional Region, and enter position()<=10 in the test field to generate the XML to filter the results. Save this file as ‘text_feeds.xml’.

<ul>
<xsl:for-each select=”rss/channel/item[position() &lt;= 10]”>
<li>
<a>
<xsl:attribute name=”href”>
<xsl:value-of select=”link”/>
</xsl:attribute>
<xsl:value-of select=”title”/>
</a>
</li>
</xsl:for-each>
</ul>

10 XML variables

On the BBC site, users can show or hide items in the feed using plus and minus buttons. To allow us to do the same, we are going to add another conditional region, which, rather than having a fixed value, uses a variable that is parsed into the XML file.

<xsl:if test=”position() &gt; $limit”>
<xsl:attribute name=”style”>
display:none
</xsl:attribute>
</xsl:if>

11 Automating with PHP

Build the BBC homepage

We want to use lots of feeds on our page and control which ones to display with cookies. For this, we’ll use PHP. The PHP files are included on the disc: feeds.php contains an array of feeds from the BBC website, and feeds_output.php uses the XML files we just created to output the HTML.

12 Include the PHP

Build the BBC homepage

To add a PHP Include in Dreamweaver, select Insert>PHP Objects>Include from the top menu bar. Open index.php and add includes>feeds.php at the very top of your page (outside of the DOCTYPE), and includes>feeds_output.php inside the div with an ID of content.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

    20 Comments »

    • Desmond Liang said:

      Very cool and useful tutorial. Thanks a lot.

    • Mtechnik said:

      Did anyone come to success on getting this to work?

    • ChicoOfSweden said:

      Thanks for a challanging experiment idea. Lovely website.
      Good that the original creator got the credit too. But without Mark Billen I would not have seen this.

      Thanks a million.

    • DTP said:

      Could not get this to work properly! populated with to many errors!
      Notice: Undefined index: sport in C:\wamp\www\includes\feed_output.php on line 5

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 172

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 187

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 208

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 215

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 298

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 306

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on line 388

      Deprecated: Function set_magic_quotes_runtime() is deprecated in C:\wamp\www\includes\MM_XSLTransform\MM_XSLTransform.class.php on

    • Misato Maekawa said:

      NO DREAMWEAVER, NO LIFE.

    • DTP said:

      Got it working but without images. Any please help!!!!!

    • Tim Lomas said:

      Interesting idea.

      I’ve found that IE8 causes a few funnies unless you run in compatibility mode … so a slight rejig to use the latest versions of jQuery & jQuery UI is required.

      … that said, the premise still works a treat and the rework is educational in itself :)

      Excellent tutorial.

    • Website Design said:

      Nice tutorial and BBC did a fantastic job with the redesign! Keep up the good work!

    • richard said:

      The download seems to be invalid – gives me message saying zip is empty:(

    • Chris said:

      Very good work! Looks like a challenge for sure. I think I’ll give it a shot; looks like a lot can be learned from this!!

    • Manchester web design said:

      The BBC site is great and think the site will show the first leaps in adopting new ways in the future on web design, web technology and website useability.

    • Richard Griffin said:

      http://www.courtesycouriers.co.uk/index.php

      having an issue with the following:

      MM_XSLTransform error.
      Transformation Error.
      variable ‘limit’ not found in file includes/text_feeds.xsl

      <!DOCTYPE xsl:stylesheet [

      ]>

      Please help as i want to use your template.

    • Patrick Burgess said:

      @Richard

      The issue is within your text_feeds.xsl page.

      There is an error in the code. Where it reads:

      display:none

      You need to remove the $ from the $limit variable. So it reads:

      display:none

      This fixed the error on mine. Good luck

    • Patrick Burgess said:

      PS

      Great walkthrough, thanks guys.

    • Patrick Burgess said:

      @ Richard
      Hmmmm comments page doesnt seem to want to display code. Basically just remove the $ sign so that it just says “position() > limit”

    • Jon Moore said:

      I too had everything working except the images… As I hadn’t used feeds or transformation it took quite a while to work out what was wrong…. In the end I found it….

      image_feeds.xsl

      Line 13

      Add a ‘/’ after http://search.yahoo.com/mrss so the line reads…

      Apparently it’s the reference to Yahoo that enables the media:thumbnail part of to work…

      Hope this helps

      J

    • Jon Moore said:

      Ooops! Where’s my code gone? Lets try again… The line should read…

      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:media="http://search.yahoo.com/mrss/">

    • Alloy said:

      please I need a template for this tutorial.I really want to customize it for my project

    • H. McCreight said:

      To get started with this , have a look at the JQuery site , at http://www.jquery.com. Then look for the Sortable plugin. This has a a whole set of pre-written components that you need to download, as well as core JQuery and the example. The key one is Widgets, and after you set up all the JQuery code and JQuery CSS links, then your skeleton HTML “portlet” file will
      come alive as the “portlet” s are styled and drag/drop and sorting events
      kick in. Then you can add more exotic content and even add in ASP.NET controls inside the content to extend it.

    Trackbacks

    What's your opinion?

    Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

    Be nice. Keep it clean. Stay on topic. No spam.