Cristiano Ronaldo

Woorkup.com: 9 Hours to the launch

Hello everybody. I'm leaving Blogger to switch to a custom domain http://woorkup.com. The new website will be on-line within 9 hours from now. Stay tuned...

Would you like to join us?

We meet twice a month, on Tuesday evening, in the CEP, Santander.
Why not come along? Or if you can't make it in person, it should also be possible to collaborate on-line.
We'd like to hear from you.
Our e-mail address is self.access.group@gmail.com

Would you like to join us?

We meet twice a month, on Tuesday evening, in the CEP, Santander.
Why not come along? Or if you can't make it in person, it should also be possible to collaborate on-line.
We'd like to hear from you.
Our e-mail address is self.access.group@gmail.com

jQuery Visual Cheat Sheet

jQuery Visual Cheat Sheet is an useful and practical reference to jQuery 1.3 for web designers and developers designed by me. This cheat sheet (6 pages) contains the full jQuery API reference with detailed descriptions and some sample code. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for. Here's a preview:

Download You can download the full PDF version for free at the following link.

Donate If you like this Visual Cheat Sheet you can also make me a little donation with PayPal.

Screen shoots
Here is a preview of this visual cheat sheet (click on each picture to enlarge):

Scribd Version
Here is the Scribd version:



Scribd Version

Download You can download the full PDF version for free at the following link.

Donate If you like this Visual Cheat Sheet you can also make me a little donation with PayPal.

What do you think about this cheat sheet? Please leave your comments, thanks!

How to implement a perfect multi-level navigation bar

A question I often receive is what's the best way to implement a multi-level navigation bar for a website. In some cases, some of my readers ask to me a little help and send me "very original" solutions but not so suitable in terms of semantic and unobtrusive approach to coding. For my experience, I always suggest to use simple and standard methods. So in this tutorial I want to illustrate you how to implement a perfect multi-level navigation bar using HTML, CSS and some lines of unobtrusive JavaScript code with jQuery to show and hide sub sections. The result is the following:



You can quickly reuse the code I provided in this tutorial into your web projects, customizing the CSS file and changing the links. You can take a look at the demo here or download the source code here.


Navigation bar structure
Here is the standard box model of a typical navigation bar:

...and here is the standard HTML structure you would have to use to implement it

<div id="nav"> <!-- nav container -->

<ul>

<li>item <!-- main item -->

<ul> <!-- item submenu -->

<li>sub item</li>

</ul>

</li>

<ul>

</div>

How you can see the code is composed by some nested unordered list. For example, in this tutorial I used the following code (main navigation items highlighted in bold):

<div id="nav">

<ul>

<li><a href="#">Web Design</a>
<ul class="submenu">
<li><a href="http://woork.blogspot.com">Woork</a></li>
<li><a href="http://www.dzone.com">DZone</a></li>
</ul>
</li>

<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.mashable.com">Mashable</a></li>
<li><a href="http://www.cnet.com">CNET</a></li>
</ul>
</li>

<ul>
<div>

You can add new main items or sub items simply adding new <li> tags with an <ul> tag within.


CSS Code
Now take a look at the CSS code. I prepared a very basic style you can customize how you prefer in your projects. Here is the code for the container of the navigation bar (<div id="#nav">):

#nav{

height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}

#nav ul,
#nav ul li {

margin:0;
padding:0;
list-style:none;

}
#nav ul li{

float:left;
display:block;

}

Here is the code for navigation links. #nav ul li {...} it's the code that defines main items (in this tutorial for example they are Web Design, Tech News, Social Network). #nav ul li ul li {...} it's the code that defines sub items for each main item.

#nav ul li a:link,
#nav ul li a:visited{

color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;

}
#nav ul li a:hover{

color:#EBEFF7;

}
#nav ul li ul li{

float:none;
display:block;

}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{

color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;

}
#nav ul li ul li a:hover{

color:#3B5998;
background:#EBEFF7;

}

Here is the code for sub menu sections:

.submenu {

position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;

}

jQuery Code
Now take a look at this simple jQuery code that shows and hides sub sections using mouseover and mouseleave jQuery events. The code is very simple and works independently from the number of main items contained into the navigation bar. You have to copy the following code into the <head> tag of your page. Remember first to include a link to jQuery using the following code:

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

Than add this code:

<script type="text/javascript">
function nav(){

$('div#nav ul li').mouseover(function() {

$(this).find('ul:first').show();

});

$('div#nav ul li').mouseleave(function() {

$('div#nav ul li ul').hide();

});

$('div#nav ul li ul').mouseleave(function() {

$('div#nav ul li ul').hide();;

});

};

$(document).ready(function() {

nav();

});
</script>

You can also add this code in an external JS file and import it into the page that use this script. That's all! Take a look at the demo here or download the source code here.

Leave a comment for your suggestions, thanks!

How to fix your iTunes library with TuneUp

I have an iPhone and iPod and naturally I use iTunes to manage my music library through these devices. I am a neat person but for some reason until some week ago a lot of my tracks was mislabeled, without the album cover, hard to find and I didn't have the patience to fix them manually. So I searched for a solutions and I found TuneUp a great application for Mac and Windows that helped me clean and maintain neat my iTunes library searching for missing or inaccurate ID3 tags in my mp3 files. I bought a license some and the result has been really impressive.

TuneUp docks on the side of iTunes to make organizing your music easy. The only thing you have to do is to drag the track you want to fix into the TuneUp sidebar and the application fixes automatically your mislabeled music.

The Cover Art feature automatically searches your entire music collection for music files that are missing album artwork and fixes them. Cover Art lets you review all matches before the album art is saved to the file. Or you can take our first pick and "Save All." Now you can navigate iTunes using Cover Flow the way it was meant to be used.

Here is a screenshot of my iTunes library (click to enlarge)

TuneUp also enhance your listening experience with the Tuniverse feature that supplies you with the best music content on the web that's directly related to the track you're currently listening to in iTunes.

You can also stay tuned with the latest news of your favorite artists and buy tickets in just one click with the Concert feature.

TuneUp is available in two different options: a lifetime ($29.95) license or yearly license (price $19.95). You can also try a free version that cleans 100 songs and 50 album covers. I suggest you to try it!