Even if it’s not our primary business, in the last six months my studio was tasked to design a bunch of logos for companies, start-ups and web apps. During this period of time we’ve been putting together a simple sketchboard template to display concepts and show design previews to clients.

I’m finding this template very useful and use it regularly for logo design – it could be used for icon design as well.

I’m sharing the layered PSD file here, so you can grab it and use it.

The template comes half white and half black, to display logos on both backgrounds. The background is composed of several layers, so you can easily exclude the squared paper pattern or the shadows.

It already includes guides to easily center and align things and has text headings that you can adapt to your needs. Finally, this PSD template lets you layout up to 4 concepts at a time (each in white and black versions) and comes at 300dpi resolution so it will work for hi-res images or for printing.

Download PSD template (26.2 MB, ZIP)

I’ve started playing around with Twitter APIs and found an interesting PHP class by Nick Beam.
I’ve used that class, basically a PHP wrapper for the the Twitter APIs, to develop a little PHP script that retrieves the last status updates from my Twitter profile. This can be integrated in virtually any website or blog using PHP, including your WordPress-powered blog.

The basic script
The script lets you define a few parameters:

• your Twitter username
• your password (in case your updates are protected)
• the number of status updates to retrieve

You can see it in action here.

Filtering status updates
After I developed this simple script, I thought of using it to send quick updates to my website, like for example “taking the day off” or “starting a new project”.
I realized I wanted to have the opportunity to filter my Twitted updates, to choose which messages should be published on my websites and which are just personal or part of Twitter conversations.

I decided to add a simple filtering functionality to my script, so that you can add a string to your messages to identify them. For example, I’m using this features to send updates to playground.gnvpartners.net, as shown in the screenshot below.

I simply add [playground] before each message that I want to be published on that website. The string is obviously fully editable so that you can use any prefix you like.

Here’s how the PHP function call looks like:

         getTwits('nicolovolpato','password',5,'playground');

where the first parameter is your Twitter username, the second one is your password (empty if your tweets are public), the third one is the number of messages to show and the last one is the string you want to use as a filter.

Anyway, I guess the best way to learn how the script works is to download the source and play with it.

Download twitter_toolkit.zip (8kb 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.

As some of you might have noticed, since last month I’ve changed the JavaScripts on this site. I’ve swtiched to MooTools. I’ve used it quite often in my latest projects and I must say I’m finding it pretty easy to use.

For all those who liked the old drop-down script, I’m now posting an updated version with a short tutorial.

————————

1. Wrap everything inside a DOM Ready Event.

window.addEvent('domready', function() {
	// CODE HERE

});
 

2. Define which Html element (”myPanel”) will be affected by the drop-down effect. You might want to hide it, so that it starts collapsed.

var mySlide = new Fx.Slide('myPanel');
mySlide.hide();
 

3. The following lines add a Click event to the “Open Panel” link and add desired effect to open the drop-down panel, fade-out the “Open Panel” link and fade in the “Close Panel” link.

var fx = new Fx.Styles($('openPanel'), {duration:500, wait:false});
$('openPanel').addEvent('click', function(e){
   mySlide.toggle();
 	fx.start({
   	'opacity': 0
   }).chain(function(){
     	$('openPanel').setStyle('display', 'none');
       $('closePanel').setStyle('display', 'block');
       $('closePanel').setStyle('opacity', '0');
       fx1.start({
           'opacity': 1
       });
   });
});
 

4. Lastly, we need some other code to handle the “Close Panel” link, which mirrors the code above.

var fx1 = new Fx.Styles($('closePanel'), {duration:500, wait:false});
$('closePanel').addEvent('click', function(e){
	mySlide.toggle();
   fx1.start({
   	'opacity': 0
  	}).chain(function(){
   	$('openPanel').setStyle('display', 'block');
      	$('closePanel').setStyle('display', 'none');
       $('openPanel').setStyle('opacity', '0');
       fx.start({
       	'opacity': 1
       });
   });
});
 

Please see also MooTools own documentation and demos for the Fx.Slide and the Fx.Styles behaviours.

Download the Source Code (24k ZIP)

————————

Updated on 22.01.2008
Today my friend Luca, who is a pro developer, emailed me a modified version of the above script, that he has kindly corrected and improved. He also has shortened the script, making it a lot easier.

window.addEvent('domready', function() {
	// Label for link
	var labelOpen='Open Panel';
	var labelClose='Close Panel';

	// Set slide and styles effects
	var mySlide = new Fx.Slide('myPanel').hide();
	var fx = new Fx.Styles($('linkPanel'), {duration:500, wait:false});
	$('linkPanel').addEvent('click', function(e){
		mySlide.toggle();
		$('linkPanel').toggleClass('openPanel');
		fx.start({
			'opacity': 0
		}).chain(function(){
			if($('linkPanel').hasClass('openPanel')) $('linkPanel').setHTML(labelClose);
			else $('linkPanel').setHTML(labelOpen);
			fx.start({'opacity': 1})
		});
	});
});
 

Below is the link to download Luca’s new version:

Download the new Source Code (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.

In a scenario like this, you might want (or need) to decrypt encrypted password or string in order to obtain readable data. ActionScript, by default, can’t handle it.

I found an interesting solution provided by Meychi, called ASCrypt.
It is simple Flash Extension that enables crypting and decrypting functions in ActionScript. It provides classes with methods to crypt and decrypt strings and support all the following standards: Base8, Base64, Goauld, LZW, GUID, RC4, MD5, SHA1, ROT13, Rijndael and TEA.
It is quite easy to use and works great with both ActionScript and ActionScript 2.0.

Anyway, I’m going to show you a really basic example of how to pass an encrypted password from a server-side ASP.NET page to a SWF movie.

Let’s make a stupid ASP.NET script that encrypts a given password and passes the obtained string to Flash.

encrypted_pass.aspx

<% 
'sets a variable containing our password 
Dim PassWord = "pass"
 
'encrypts the password to a Base64 string
Response.Write("pwd="+Convert.ToBase64String(System.Text.ASCIIEncoding.ASCII.GetBytes(PassWord))) 
%> 

These few lines of script take a simple variable (PassWord) and encrypt it to a Base64 string.
If you view it in a browser, you’ll see an output like pwd=cGFzcw==.

decrypt_pass.fla

// imports Meychi's ASCrypt class
import com.meychi.ascrypt.*;

// creates a LoadVars object to handle loaded external data
this.pwdLoader = new LoadVars();

// function to be called when external data is loaded into Flash
this.pwdLoader.onLoad = function(success) {
  // checks if loading was succesful and external file contains data
  if (success && pwdLoader.pwd != "" && pwdLoader.pwd != undefined) {
  
    // decrypts the password retrieved from the external file
    // and outputs the original string
    trace("PASSWORD= "+Base64.decode(pwdLoader.pwd));
  }
};

// loads the external .aspx file
this.pwdLoader.load("encrypted_pass.aspx");

Save your Flash file and test it. The output panel will show PASSWORD = pass, so it gets back to the original value.

This is a really simple example, but shows how easy it is to handle encrypted data with the ASCrypt class.

You can download the ASCrypt Extension (.mxp file) and some sample Flash files from Meychi’s website.

Here is the source code for the example:
Download ascrypt_sample.zip (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.

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.

Qualche giorno fa, Matteo mi ha scritto una email chiedendomi chiarimenti in merito all’ articolo citato poco fa, riportandomi alcuni problemi di funzionamento del dispositivo USB Wave 54.
Ci siamo scambiati un paio di email e pare che ora la chiavetta USB funzioni a dovere.

Per questo motivo, nell’eventualità che qualcuno di voi possa riscontrare problemi simili, Matteo ed io abbiamo deciso di pubblicare questo post, nella speranza di essere di qualche aiuto e risparmiarvi ore di ricerca su Google.

Di seguito eccovi la cronologia delle nostre email.

Ciao Nicolò,

ho recentemente acquistato un router wi-fi e in bundle c’era questa fantomatica chiavetta USB wave 54… Ho provato ad installare i driver da te segnalati, ma non succede nulla… l’utlity della Zydas non vede la chiavetta e il led di stato si spegne quasi subito una volta inserita la chiavetta… anc’io sono su Mac OS 10.3.9 Panther e sto usando un Mac Mini…
Non so, se hai qualche consiglio ti sarei davvero grato.
[...]

Matteo

-

Ciao Matteo,

premetto che non so molto di più sulla chiavetta USB Wave 54 rispetto a quanto scritto sul mio sito.

Dunque, io faccio così: inserisco la chiavetta a computer spento, lo accendo, quando Mac OS è pronto, apro Preferenze del Sistema, utility della chiavetta e seleziono la base wifi a cui connetterlo e faccio click sul bottone Connetti (”Connect this site…”).
Tutto qua.
A volte bisogna ripetere la procedura di connessione alla base o aspettare un po’ di tempo, e non sempre la banda wifi è ottimale, però in linea di massima ha sempre funzionato in questo modo.

Spero ti sia utile,
ciao

Nicolò

-

Ciao Nicolò,

ti posso dire (tenendo incrociate le dita) che la chiavetta USB digicom stia funzionando a dovere con i driver Zydas… ho fatto come hai detto, collegando la chiavetta a Mac spento… ogni tanto fa faticarsi a connettersi ma poi la navigazione è stabile.,.. per essere completi, sto usando Mac OS Panther 10.3.9 su un Mac Mini e i nuovi driver Zydas (che adesso si trovano sul sito di Atheros) nella versione 4.5.7.0. Ti ringrazio per il tuo blog, che mi è stato davvero utile e mi ha fatto risparmiare tempo e soprattutto denaro per acquistare una chiavetta wi-fi dedicata a Mac OS (che poi ce ne sono poche…)
[...]

Buon lavoro

Matteo

—————————
Updated 19.01.2007:

In seguito alla segnalazione di Lara, posto di seguito l’ultima release dei driver, che risolve alcuni problemi di compatibilità:
ZDA211MacUSB_install_4_5_7_0.dmg.zip (1.7 MB ZIP).

The Loop is the process that occurs when WordPress reads the database and outputs your posts or pages to the destination Html page.
A more detailed explanation can be found here.

Inside the Loop you can use Template Tags (see this page) to modify the output information and choose what elements of the post should be displayed (see Post Tags).

This is the very basic concept behind WordPress templates.

With WordPress you have also the ability to make custom queries to the database to extract your specific content.
In this case, you will need the following sintax:

<?php query_posts('category_name=news&showposts=5'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

     <div class="news">          
          <h4><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
          <?php the_excerpt(); ?>          
     </div>
            
<?php endwhile; ?>
<?php endif; ?>

The code above works perfectly when you are inside the Loop, but what if you are outside of it?
Or if you want to include contents from two different loops, for example for making an Asides section?
Then the query_posts() function will not be of any help.

You will have to make a totally new custom query, using a different sintax.
This is needed in order to not overwrite the data retrieved by the main Loop query.

It will look like this:

<?php $my_query = new WP_Query('pagename=another-static-page'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $do_not_duplicate = $post->ID; ?>
          
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
            
<?php endwhile; ?>

The first line:

<?php $my_query = new WP_Query('pagename=another-static-page'); ?>

This line:

<?php $do_not_duplicate = $post->ID; ?>

As you can see, then we can output the information with the same good old sintax:

      <?php the_content(); ?>

This way of retrieving and displaying custom information from your WordPress database comes very handy when creating advanced themes or when using WP as a CMS platform and you want to have full control on what is displayed.

As always, the best place to find exhaustive information about Wordpress tweaks is the Codex website.

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.