Microsoft Urges it's IE Users not to Install Google Chrome Frame

Microsoft's recent urge to it's IE8 users regarding the usage of Google Chrome Frame has not gone down well with the web community. According to a Microsoft representative who spoke with ars technica said;

"With Internet Explorer 8, we made significant advancements and updates to make the browser safer for our customers. Given the security issues with plugins in general and Google Chrome in particular, Google Chrome Frame running as a plugin has doubled the attach area for malware and malicious scripts. This is not a risk we would recommend our friends and families take."

And that at least to me sounded really fishy. To me it was just a reflection of Microsoft's growing anxiety regarding Google. Yes,There were security issues with Chrome at it's nascent stage, but they have sorted it out now. And the most funny thing was that why they are only concerned about the IE8 version! And that too when the version still could not achieve the success that it was meant to. Isn't it a fact that more people use IE than Chrome and so the hackers also mainly target IE rather than Chrome. So their concerns in the security issue looked more of a protective grudge to me.

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!

 

10 Beautiful and free must have Serif Fonts

If you are looking for new interesting fonts, here is a collection of ten beautiful, free and must have serif typefaces for the web and print. This collection includes Medio, Jura, Fontin, Sling, Calluna, Lido STF, Salernomi, Novello Pro, Steinem, TeX Gyre Schola.


1. Medio (download)
Medio is one of my favourite fonts designed by dotcolon (the same authors of Vegur, Tenderness and Ferrum)




2. Jura (download)
Jura is a distinctive yet readable serif typeface, suitable for headings and body content alike. It features 96 of the most commonly used glyphs (characters).





3. Fontin (download)
The Fontin is designed to be used at small sizes. The color is darkish, the spacing loose and the x-height tall. Don't forget to check Fontin Sans!





4. Sling (download)
Sling is a versatile typeface available in bold, normal and light version.





5. Calluna Regular (download)
Calluna regular is a popular typeface designed by Jos Buivenga author the best seller font Museo on myfonts.com.





6. Lido STF (download)
Lido STF is a font designed by František Štorm for the periodical Lidové noviny (People’s Newspaper). This font is a modification of the original Times New Romans font.





7. Salernomi (download)
Salernomi is an elegant typeface designed by Julius B. Thyssen. You can use it with a perfect result for the web and print.





8. Novello Pro (download)
Novello Pro is a moderate Roman typeface with round serifs and modern details designed by Ingo Zimmermann.




9. Steinem (download)




10. TeX Gyre Schola (download)
TeX Gyre Schola is another great serif font especially useful for the print.

 

HTML lists: what's new in HTML 5?

There is a big and justified interest from the web community about the changes introduced in HTML 5 and in the last weeks I'm frequently receiving a lot of questions and requests about this topic. In this post I want to illustrate a quick roundup of some point of interest about the use of lists in HTML 5.
How you know HTML has three types of lists:

- <ul>, unordered list
- <ol>, ordered list
- <dl>, definition list

The HTML <li> tag defines a list item and is used in both <ul> and <ol> lists. <dt> and <dd> tags define a definition term and the related description in a definition list. These tags are all supported in HTML 5 version but there are some little changes in their attributes, in particular:

<ul> and <ol>
the attribute compact and type are not longer supported in HTML 5 (you have to use CSS instead).

<li>
the attribute type, which specifies the type of the list, is not longer supported in HTML 5 (you have to use CSS instead).
The attribute value, which defines the value of the first item of the list, is not longer deprecated and can be only used with the <ol> tag.

Unordered list for navigation bar
Another lists-related question is about the structure of the navigation bar of a website with the introduction of the new <nav> tag in HTML 5. How you know, unordered lists are commonly used to implement the navigation bar of a website. The typical structure of a navigation bar is a <div> tag that contains an unordered list with some items:

Here is the HTML code to implement the basic structure of a navigation bar

<div id="nav">
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</div>

In HTML 5, the structure of a navigation bar is the same illustrated in the previous code. The only thing that changes is the the external "container" of the unordered list. You have to use the new <nav> instead a generic <div> tag

<nav>
<ul>

<li><a href="...">link 1</a></li>
<li><a href="...">link 2</a></li>
<li><a href="...">link 3</a></li>
<li><a href="...">link 4</a></li>

<ul>
</nav>

Definition list and the <dialog> tag
Definition lists are not frequently used in web design end a lot of people even ignore their existence! In general their use is mainly suggested when you have to represent a list of items with a related description for each item of the list. Here is the code that describes a generic definition list:

<dl>

<dt>Google</dt>
<dd>Search engine</dd>
<dt>Facebook</dt>
<dd>Social network</dd>

</dl>

Here is the output in a web browser:

Google

Search engine

Facebook

Social network

HTML 5 introduces the new <dialog> tag that uses <dt> and <dl> tags (these tag are used to define a term and its description in a definition list) to describe a conversation. Here is an example of dialog structure

<dialog>

<dt>Anna</dt>
<dd>What time is it?</dd>
<dt>Mark</dt>
<dd>Three o'clock</dd>
<dt>Anna</dt>
<dd>Thanks!</dd>

</dialog>

And here is the output in a web browser:

Anna

What time is it?

Mark

Three o'clock

Anna

Thanks!

*NOTE: the <dialog> tag has been dropped in HTML revision 3859 (2009-09-15). Thanks to Dylan for the suggestion. The new <figure> and <details> tags now use <dt> and <dl> instead of <legend>.

That's all. If you have some suggestion about this topic, please leave a comment. Thanks!

 

Adobe buys Omniture for $1.8 billion.

In a surprisingly fast development, Adobe has announced that it will take over web analytic software company 'Omniture'. This take over will be costing them about $1.8 billion. This buy by Adobe will definitely force Google to revise its strategies for the web analytic market. Many are thinking that Google might come out with an 'Enterprise' version of their web analytics service.

Adobe Systems Inc. said Tuesday it will buy the Web analytic software company Omniture for about $1.8 billion, giving the maker of content-creation software a way to let marketers monitor the effectiveness of such content.

San Jose, Calif.-based Adobe Systems Inc. said it will buy Omniture Inc. for $21.50 per share in cash, a premium of 24 percent over Omniture’s closing stock price Tuesday.

The announcement came as Adobe said it earned $136 million, or 26 cents per share, in the fiscal third quarter that ended in August, down 29 percent from the same time a year earlier.

Excluding one-time items, Adobe earned a profit of 35 cents per share, a penny above what analysts polled by Thomson Reuters were expecting. The maker of Photoshop, Flash and Acrobat software says its revenue fell 21 percent to $697.5 million.

As nobody was expecting the entry of Adobe in the web analytics market, and that too so early, it will take some time for the web geeks to come out with their own versions and thoughts regarding this development. This has already started showing its effect in their shares(NASDAQ:OMTR), as it has pushed Omniture shares up $4.43 a share, while Adobe's share went down about 4% to $34.10.
According to Adobe CEO Shantanu Narayan, this was an important game changer for both Adobe and their customers. He has also said that this 'Omniture take over' wil enable advertisers, media organizations and e-tailers to realize the full value of their digital assets.

Blogger now supports natively expandable post summaries

Finally! Blogger has introduced After the Jump a feature which lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More.

Creating jump breaks in your blog posts can be easily done right from the post editor, without the need for any HTML changes.

The only thing you have to do is to add this code into the post editor:

<!-- more -->

Take a look at this post that explains in detail how to implement expandable post summaries.

Rediscovering HTML tables

I decided to write this post after several conversations I recently had with some of my readers about the use of HTML tables. In general, I noticed there is a preconceived hate about their use due to misleading information. In fact a lot of people say "I read tables should never be used", but this is absolutely false! This recommendation only regards the use of HTML tables to define the layout of HTML pages, but tables are perfect to arrange easily data into rows and columns and if you have to display tabular data within a web page you have to use them! Why not? So, in this situation, some people ignore the existence of some HTML tags for tables and how to use them properly.


HTML has ten table related tags. Here's the list with indicated if the element is defined in HTML 4.01 and/or HTML 5:

<caption> defines a table caption (4, 5)
<col> defines attributes for table columns (4, 5)
<colgroup> defines groups of table columns (4, 5)
<table> defines a table (4, 5)
<tbody> defines a table body (4, 5)
<td> defines a table cell (4, 5)
<tfoot> defines a table footer (4, 5)
<th> defines a table header (4, 5)
<thead> defines a table header (4, 5)
<tr> defines a table row (4, 5)

A basic table structure is the following:

It contains a caption, header, body and footer. The correct order of HTML elements is:

1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>

According to definition and usage of w3schools, the element <tfoot> must appear before <tbody> within a table definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data (read more).

You can also use <col> and <colgroup> to define attributes for table columns or define group of table columns:

1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>

The following code is an example of a correct table structure:

<table border="1">

<caption>Table caption here</caption>

<colgroup span="1" style="background:#DEDEDE;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<!-- Table Header-->
<thead>

<tr>

<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>

</tr>

</thead>

<!-- Table Footer-->

<tfoot>

<tr>

<td>Foot 1</td>
<td>Foot 2</td>
<td>Foot 3</td>

</tr>

</tfoot>

<!-- Table Body-->
<tbody>

<tr>

<td>A</td>
<td>B</td>
<td>C</td>

</tr>
<tr>

<td>D</td>
<td>E</td>
<td>F</td>

</tr>

</tbody>

</table>

The result on a browser is the following:

align and bgcolor attributes of the table are deprecated, so in HTML 5 no table attributes are supported. Obviously you can use style sheet to customize the style of each table element.

For a more detailed articles about HTML tables read this interesting post: w3 Introduction to tables

That's all. Do you have any suggestion about this topic? Please leave a comment, thanks.

 

Google Looses Kai-Fu Lee in their Chinese Crusade

Just when everything seemed to be going alright for Google, they recieved a very disguised jolt from the Google china's head Kai-Fu Lee, as he left Google to nourish his own venture, 'Innovation Works'. It was on the cards according to many. Kai-Fu Lee has served Google for four years. And just when every one was sensing that Google might at last take a bite of it's share off the China's search engine market, that is one sidedly dominated by 'Baidu', the cards fell down. Though it might seem from the surface that it's just another job switch of a high profile Googler, there's more in to it. Google had started to penetrate the Chinese 'Oasis' search engine market after years long try and the timing could not be worse. Though Kai-Fu Lee has said that he for the time being will get fully absorbed into his venture which is about helping young and talented Chinese engineers and entrepreneurs to develop fresh internet and mobile computing technology. This new endeavor, 'Innovation Works' will hire the budding talents from China and nurture them for one year and then finally let them go open.
This is no doubt a very noble initiative and quite appreciable, but what if Kai-Fu Lee thinks of building a new Chinese search engine by mobilising these pool of talents. And with the invaluable Google experience that's definitely quite viable. No matter if it does not succeed to overpower 'Baidu', even a decent attempt can bid Google's Chinese search market dream a premature good bye forever. And that is definitely the last thing Google wants.
My assumption got closer to get transfared into belief after talking to several fellow web wizards. Now it will be really interesting to see, how Google reacts to this, what strategy they incorporate to enforce their Chinese crusade, who replaces Kai-Fu Lee and what vibe he spreads.

HTML 5 Visual Cheat Sheet by Woork

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. 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 of my cheat sheet:

This is an example of listed tags and attributes:

HTML 5 Cheat Sheet is available in high quality for A3 paper format. Take a look at this link for a preview or download the high quality version (dark or white background):

Dark Background:

- PDF high-quality (new! thanks to Julie Webb)
- JPG high-quality




White Background New!:
I prepared this print-friendly version:

Download this version here:

- PDF Version
- JPG hig-quality




The Flickr version is here.

If you have some suggestion about this cheat sheet please leave a comment or write me to my e-mail address.

Google Finally Owns the Patent to its Homepage Design

After five long years of legal procedures Google finally got hold of the patent to its very simple yet so powerful homepage design. So any one from now on, trying to take a piece out of its design could very well be dragged into legal trouble. Many Search engines who either consciously or subconsciously got influenced in their design aspect by Google, have definitely not accepted this patent episode in open minds. They are fearing a possible Google lash out from legal grounds sooner or later. They are thinking that with this new found ammunition, Google might go for the kill to extend its monopoly by finishing off the smaller rivals. And with the merging of Yahoo and MSN search technologies, it definitely looks quite a decent possiblity to clarify their no-fuss stand.

Yahoo Launching English Version of Meme

After achieving fair success in the Portuguese and Spanish versions, Yahoo is getting ready to launch the English version of its microblogging platform 'meme'. From the recent developments it gets quite vivid that yahoo is playing all its cards to impress 'Twitter'. But may be acknowledging the huge competition its now concentrating upon developing its own 'twitter' version. The Portuguese version was shown the daylight earlier this year and they soon followed it up with a Spanish version. This service comes with almost all the features that could be found in twitter. It provides the scope for sharing photos and videos with fellow users. It also dishes out the option of reposting the messages of other users. I, like many other over enthusiastic net freak waiting eagerly for this service to get launched. It will be really interesting to see how yahoo tries to elbow out twitter on their very own ground.