1. The simple version

This first version simply reads the RSS feeds from different websites and lists the latest posts for each website.
Feed URIs are defined in an array, so you can easily add as many as you want.
Number of posts per website is also easily editable.

This has support for languages different from English, using UTF-8 encoding, and uses relative dates.

You can see a working example here.

Source code:

<?php

/* feed URIs */
$urls = array('http://webdesignerwall.com/feed/', 'http://gigaom.com/feed/', 'http://techcrunch.com/feed/', 'http://wordpress.org/development/feed/');

/* number of items for each feed */
$num_items = 5;

@require_once('rss_fetch.inc');
define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
$posts = array();

foreach($urls as $url) {
$rss = fetch_rss($url);

if($rss) {
$items = array_slice($rss->items, 0, $num_items);
foreach($items as $item) {
$posts[] = array('title' => $item['title'], 'link' => $item['link'], 'date' => $item['pubdate'], 'source' => $rss->channel['title']);
}
}
else {
echo "An error occured!<br />Error Message: ".magpie_error();
}
}
usort($posts, 'sortdates');
echo "<ul>";
foreach($posts as $post) {
$title = $post['title'];
$url = $post['link'];
$date = $post['date'];
$source = $post['source'];
echo "<li><a href='".$url."'>".$title."</a> from <strong>".$source."</strong>, ".getrelativetime($date)."</li>";
}
echo "</ul>";

function sortdates($a, $b) {
if(strtotime($a['date']) > strtotime($b['date'])) {
return -1;
} elseif( strtotime($a['date']) == strtotime($b['date'])) {
return 0;
} elseif( strtotime($a['date']) < strtotime($b['date'])) {
return 1;
}
}

function getrelativetime($date) {
// Credit: http://snipplr.com/view/4912/relative-time/ and http://twitter.pbwiki.com/RelativeTimeScripts
$gap = time() - strtotime($date);
if ($gap<5) {
return 'less than 5 seconds ago';
} else if ($gap<10) {
return 'less than 10 seconds ago';
} else if ($gap<20) {
return 'less than 20 seconds ago';
} else if ($gap<40) {
return 'half a minute ago';
} else if ($gap<60) {
return 'less than a minute ago';
}
$gap = round($gap/60);
if ($gap < 60)
return $gap.' minute'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/60);
if ($gap < 24)
return $gap.' hour'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/24);
if ($gap<7)
return $gap.' day'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/7);
if ($gap<4)
return $gap.' week'.($gap > 1 ? 's' : '').' ago';

return date("F jS, Y @h:i", strtotime($date));
}
?>

2. The more complex version

Same thing as above, but this version output a list af the most recent posts – source websites are displayed next to titles. This is definitely more useful if you mean to display recent content from mixed sources.

You can see a working example here.

Source code:

<?php

/* feed URIs */
$urls = array('http://webdesignerwall.com/feed/', 'http://gigaom.com/feed/', 'http://techcrunch.com/feed/', 'http://wordpress.org/development/feed/');

/* number of items for each feed */
$num_items = 5;

@require_once('rss_fetch.inc');
define('MAGPIE_OUTPUT_ENCODING', 'UTF-8');
$posts = array();

foreach($urls as $url) {
$rss = fetch_rss($url);

if($rss) {
$items = array_slice($rss->items, 0, $num_items);
foreach($items as $item) {
$posts[] = array('title' => $item['title'], 'link' => $item['link'], 'date' => $item['pubdate'], 'source' => $rss->channel['title']);
}
}
else {
echo "An error occured!<br />Error Message: ".magpie_error();
}
}
usort($posts, 'sortdates');
echo "<ul>";
foreach($posts as $post) {
$title = $post['title'];
$url = $post['link'];
$date = $post['date'];
$source = $post['source'];
echo "<li><a href='".$url."'>".$title."</a> from <strong>".$source."</strong>, ".getrelativetime($date)."</li>";
}
echo "</ul>";

function sortdates($a, $b) {
if(strtotime($a['date']) > strtotime($b['date'])) {
return -1;
} elseif( strtotime($a['date']) == strtotime($b['date'])) {
return 0;
} elseif( strtotime($a['date']) < strtotime($b['date'])) {
return 1;
}
}

function getrelativetime($date) {
// Credit: http://snipplr.com/view/4912/relative-time/ and http://twitter.pbwiki.com/RelativeTimeScripts
$gap = time() - strtotime($date);
if ($gap<5) {
return 'less than 5 seconds ago';
} else if ($gap<10) {
return 'less than 10 seconds ago';
} else if ($gap<20) {
return 'less than 20 seconds ago';
} else if ($gap<40) {
return 'half a minute ago';
} else if ($gap<60) {
return 'less than a minute ago';
}
$gap = round($gap/60);
if ($gap < 60)
return $gap.' minute'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/60);
if ($gap < 24)
return $gap.' hour'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/24);
if ($gap<7)
return $gap.' day'.($gap > 1 ? 's' : '').' ago';
$gap = round($gap/7);
if ($gap<4)
return $gap.' week'.($gap > 1 ? 's' : '').' ago';

return date("F jS, Y @h:i", strtotime($date));
}
?>

Download the source code for both scripts (24k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Some time ago I was trying to make a project/icons scroller, to refresh our online portfolio. The idea was having two rows of icons to scroll with a little delay and an elastic effect. Of course, I didn’t want to use Flash for this, so I went for MooTools.

I’ve never implemented this script on our site and the script itself it quite basic and unoptimized. However I thought of sharing it here, with the hope it might be helpful to someone out there.

See a working example

Download the source code (51k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

What to do then if you need to use custom-designed buttons? Or if you’re targeting IE6 and have no transparent-PNGs support? I scored 2 on 2, having both those problems.

So I decided to search for some Skype documentation and build a script myself.
Some basic information on creating custom Skype buttons and links can be found here. This explains how to code links, but still doesn’t address my problem. Then I found some more in-depth documentation on building web-services and apps interacting with Skype, that can be downloaded from here.

This way I found out that you can call a remote Skype URL, passing in your username and some parameters, to retrieve a status button, a status code or a status string.

The numeric status code is easier to use. Here’s a short list of numeric codes and their meaning:

• 0 – unknown
• 1 – offline
• 2 – online
• 3 – away
• 4 – not available
• 5 – do not disturb
• 6 – invisible
• 7 – skype me

Then I coded a short PHP script to take advantage of this function and retrieve the status code for a given Skype username.

function getSkypeStatus($username) {
	$remote_status = fopen ('http://mystatus.skype.com/'.$username.'.num', 'r');
	if (!$remote_status) {
	    return '0';
	    exit;
	}
	while (!feof ($remote_status)) {
	    $value = fgets ($remote_status, 1024);
	    return trim($value);
	}
	fclose($remote_status);
}

Half of the job was done. Now I needed to link each code to a custom-designed status icon.

function getSkypeStatusIcon($username) {
	$status = getSkypeStatus($username);
	// change the path of the icons folder to match your site
	echo '<img src="/skype-icons/'.$status.'.jpg" alt="call '.$username.'" />';
}

So that calling the PHP function with the desired username…

getSkypeStatusIcon('nicolovolpato');

…returns the necessary HTML code for the icon image.

<img src="/skype-icons/1.jpg" alt="call nicolovolpato" />

Of course I had then to go back to Photoshop and design my custom icons. I simply named the files like the status codes, where 1.jpg is the icon for offline, 2.jpg is the icon for online and so on.

I’ve tested this script using my Skype account and other accounts and seems pretty reliable. This is not the only method and I’m pretty sure this is not even the best method available, but it’s just the solution I have found to this problem and wanted to share it.

Download the source code (4k ZIP)

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

On my company’s web site I’ve made a little PHP script to change the CSS stylesheet depending on the time of the day. We have a bright white theme for day time and a dark black one for night time and Sundays (when we are closed). This script was initially inspired by the beautiful Radiant Mars website.

Some of you have asked me how I made it, so here is the code:

<?php 
// time based Css Swicth
$time = date("H");
$date = date("w");
if (!isset($_GET['css'])) {
if ($time >= 9 && $time < 18 && $date != 0) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/day.css" type="text/css" media="screen" />
<? } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/night.css" type="text/css" media="screen" />
<? }; 
} else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/<?php echo $_GET['css']; ?>.css" type="text/css" media="screen" />
<? }; ?>

Looks easy, doesn’t it?

Let’s see it in detail.
First I’ve set up two variables to read the current time (hour) of the day and the current day (number, 0 = Sunday) of the week.

$time = date("H");
$date = date("w");

For more information about handling date and time with PHP, please see the PHP documentation.

Then we have a pretty simple IF clause to check if the current time is between 9AM and 6PM and today is not Sunday.
According to this clause, the correct CSS stylesheet is loaded.

if ($time >= 9 && $time < 18 && $date != 0) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/day.css" type="text/css" media="screen" />
<? } else { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/styles/night.css" type="text/css" media="screen" />
<? }; 

The last part is another IF clause, mainly for debug reasons.
It checks if we have added a variable to the page’s URL, ie. pagename.php?css=day. This way we can override the time check and load the desired CSS stylesheet directly. This is useful to test your CSS files without waiting for it to change.

That’s it. Pretty basic, but remember I’m just a designer!

Use the PHP date function to read other parameters and modify this script to change the CSS stylesheet according to seasons, holidays, day of the week or whatever you like.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Many people asked for multiple drop-downs panels within one page or multiple links to open/close a single drop-down panel.

I made a little variation to the original script to cover both cases.
Hope this helps.

Download the Source Code (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

There are many techniques to do that.
First, using Javascript.
On A List Apart you can find a very well written tutorial to create a Css switcher with JS, using a cookie to keep the user’s preference.
And the obtained page also conforms to W3C standards.

The main problem of this method is that, being Javascript, it runs on the client, so it depends on the browser and requires the user to have JS enabled.
The validity of this technique depends on your site’s target. No problem if you have a tech-savvy users target, with modern browsers and smart enough to not disable Javascript!

I chose to use another method, using PHP, not because of my users, but because I use WordPress, which is written in PHP.
Aside from this, PHP runs on the server, so it is browser-independent.
A List Apart has a very good tutorial which covers this method too.
A very easy, step-by-step tutorial.

I’d add just a couple of suggestions, to make it even smoother.

First:
the cookie duration.
Do you really want to keep the cookie for a year??!!? I think it is really too long.

So, in the following piece of code

<?php
setcookie ('sitestyle', $set, time()+31536000, '/', 'yourdomain.com', '0');
header("Location: $HTTP_REFERER");
?>

Second:
the code that reads the cookie. Change the following

<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>

<?php echo (!$_COOKIE['sitestyle'])?'defaultstyle':$_COOKIE['sitestyle'] ?>

Well, that’s all folks!
I hope this can be useful to someone.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

How the heck did I make the drop down panel above?
Ok, maybe it’s a kids game for some of you, but I guess there’s someone out there who might be interested. For these (few) people, here’s the tute.

This is all web standards compliant, keeping my Xhtml clean and valid, and so my Css stylesheet.
The interaction is built using some very useful (and yet very well-knowed) free Javascript libraries, released under a GPL license.
To be specific, you will need the following libraries:

• Prototype
• Script.aculo.us
• Behaviour

that you can download from their respective web sites.

So, now that we got the libraries, let’s include them in our Html document, this way:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/behaviour.js"></script>

Let’s start with the link:

<a id="open" href="javascript:void(0);" >Open</a> 
<a id="close" href="javascript:void(0);" style="display:none;">Close</a> 

<div id="contents" style="display:none;">
     bla bla bla bla bla bla
</div> 

Now, normally, to give a link a Javascript behaviour you would use the onclick tag attribute.
However, it’s a old and dirty way to manage Javascript behaviours, which might also cause validation problems.
So, we’re not gonna use it anymore!

Behaviour comes in our help, giving us a clean method to add Javascript behaviours to Html elements, using Css selectors.
We have to define some rules, as follows:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
      new Effect.Fade(this);
      Effect.Appear('close', {delay: 1});
    }
  },
  '#close' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
      new Effect.Fade(this); 
      Effect.Appear('open', {delay: 1});
    }
  }
};

<script type="text/javascript" src="/js/rules.js"></script>

Now, Behaviour requires us to insert the following code, in order to run correctly and apply the rules:

  <script type="text/javascript">
   // <![CDATA[
     // Behaviour Rules
    Behaviour.register(myrules);
   // ]]>
   </script>

So, is it working?

The result should look like the drop down above (obviously, you have to add you own Css to spice it up and make it look cool!!).

Well, you’ve seen how a bunch of lines of code can help you create very nice effects, easiliy and in a standard compliant way (you don’t always need Flash).

Good coding to all of you!!

—————————
Updated 16.07.2006:
Download the Source Code (28k ZIP).

—————————
Updated 20.12.2006:

Many people asked for multiple drop-downs panels within one page or multiple links to open/close a single drop-down panel.

I made a little variation to the original script to cover both cases.
Hope this helps.
Download the Source Code (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Circa due o tre settimane fa, ho scritto un piccolo script Javascript per realizzare slideshow di immagini, senza ricorrere a Flash.
Le ragioni, e i vantaggi, sono molteplici: dimensioni ridotte, conformità agli standard xhtml e css, funziona senza alcun plugin, facile da modificare al volo, integrabile in siti html esistenti, ecc…

Dopodiché, me ne sono dimenticato e ho lasciato i files lì da qualche parte sul server.

Oggi, spinto dalla richiesta di un cliente, ho rispolverato quello script e, visto che avevo un’oretta da spendere, l’ho messo a posto, commentando il codice e ripulendolo un po’.

Dato che lo trovo abbastanza utile, ho deciso di dargli un nome, di confezionarlo e distribuirlo su Jek2k.com, nella speranza (o illusione) che possa essere utile anche a qualcuno di voi là fuori.

Ho anche pubblicato online una demo e una paginetta dedicata, da cui è possibile scaricare i files.

E’ certamente perfezionabile, magari ha anche qualche bug, ma lo scopo è semplicemente condividere una cosa su cui ho speso del tempo, perché possiate trarne beneficio e da lì sviluppare quacosa di vostro. E magari anche migliore.
Spero che vorrete condividere con me le vostre creazioni…

ciao

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Innanzitutto, esistono diversi modi per realizzarlo.
Il primo è farlo tramite Javascript.
Su A List Apart potete trovare un tutorial molto ben fatto per cambiare foglio di stile Css al volo con Javascript, memorizzando la preferenza in un cookie.
Il tutto in conformità agli standard W3C.

Il principale problema di questa tecnica è che, in quanto Javascript, viene eseguita sul client, quindi può dare problemi su browser obsoleti o nel caso in cui l’utente abbia disabilitato l’esecuzione degli script JS.
La valutazione sull’adeguatezza o meno della tecnica Javascript va fatta in base al target di utenza del proprio sito.
E’ ovvio che il problema non si pone nel caso in cui il profilo medio dei vostri utenti sia elevato, quindi dotati di browser recenti e di abbastanza buon senso da non disabilitare Javascript!

Io, da parte mia, ho preferito seguire un’altra strada, non tanto per il profilo dei visitatori, ma perché, utilizzando WordPress (scritto in PHP, ndr.) mi era più congeniale e più veloce realizzare lo switch Css direttamente in PHP.
Oltre a questa possibilità di integrazione, il PHP viene eseguito sul server, quindi è del tutto indipendente dal browser utilizzato dall’utente.
Anche in questo caso, A List Apart ci viene incontro, con un ottimo tutorial.
Il tutorial è ben scritto e facile da seguire.

Solo un paio di semplici suggerimenti, per rendere la cosa ancora più immediata.

Primo:
la durata del cookie.
Non credo che siate interessati a creare un cookie annuale. Mi sembra esagerato per memorizzare un dato banale come il foglio di stile preferito dall’utente.

Quindi, nel blocco di codice

<?php
setcookie ('sitestyle', $set, time()+31536000, '/', 'yourdomain.com', '0');
header("Location: $HTTP_REFERER");
?>

Secondo:
il blocco di lettura del cookie

<?php echo (!$sitestyle)?'defaultstyle':$sitestyle ?>

<?php echo (!$_COOKIE['sitestyle'])?'defaultstyle':$_COOKIE['sitestyle'] ?>

Beh, siamo arrivati alla fine.
Spero che vi sia utile.

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.

Innanzitutto ho sfruttato esclusivamente gli standard, mantenendo il mio codice Xhtml pulito e valido, così come il mio Css.
L’interazione è stata realizzata sfruttando alcune (ormai molto note) librerie Javascript gratuite e distribuite sotto licenze di tipo GPL.
In particolare, vi serviranno le librerie di:

• Prototype
• Script.aculo.us
• Behaviour

che potete tranquillamente scaricare dai rispettivi siti web.

Prima di tutto, ora che abbiamo le librerie, includiamole nel nostro documento Html, così:

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/behaviour.js"></script>

Partiamo dal link:

<a id="open" href="javascript:void(0);" >Open</a> 
<a id="close" href="javascript:void(0);" style="display:none;">Close</a> 

<div id="contents" style="display:none;">
     bla bla bla bla bla bla
</div> 

Ora, normalemente, per associare un comportamento Javascript ad un link si userebbe l’attributo onclick del tag a.
Tuttavia si tratta di un attributo “sporco”, che esula dalle iniziale specifiche html e xhtml, ed è stato introdotto al solo scopo di supportare le funzionalità JS citate, imponendosi come standard de facto.
Giustamente, la specifica Xhtml Strict non lo prevede. Quindi noi non lo useremo.

Qui ci viene in aiuto Behaviour, che ci dà la possibilità di abbinare dei comportamenti (appunto) agli elementi Html utilizzando i selettori Css, attraverso la definizione di regole (rules).In questo caso le nostre regole saranno:

// Rules
var myrules = {
  '#open' : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindDown(targetDiv,{duration: 0.5});
    }
  },
  '#close : function(element){
    element.onclick = function(){
      var targetDiv = $('contents');
      new Effect.BlindUp(targetDiv,{duration: 0.5});
    }
  }
};

<script type="text/javascript" src="/js/rules.js"></script>

Ora, Behaviour richiede che venga inserito il seguente codice, affinché le regole scritte in precedenza vengano applicate:

  <script type="text/javascript">
   // <![CDATA[
     // Behaviour Rules per interazine javascript
    Behaviour.register(myrules);
   // ]]>
   </script>

Il risultato dovrebbe essere simile al drop down che vedete su questo sito (ovviamente dopo dovrete metterci del vostro e aggiungere un po’ di Css!!).

Beh, è evidente che con queste poche righe di codice potete realizzare effetti molto gradevoli e dare un po’ di pepe alle vostre pagine Html (Flash non è sempre l’unica soluzione…).

—————————
Updated 16.06.2006:
Scarica il sorgente (28k ZIP).

—————————
Updated 20.12.2006:

In molti avete chiesto come fare per inserire più drop-down nella stessa pagina o come fare per avere più link che “comandano” lo stesso drop-down.

Ho fatto una variante dello script originale per coprire entrambe le esigenze.
Spero che vi sia di aiuto.

Scarica il sorgente (28k ZIP).

This tutorial is provided as is. Please do not email me questions or support requests about the scripts contained in this page. Use the comments below instead. Thank you.