CSS Globe | Web Standards Magazine

How to properly "speak" HTM language

Fri, 26 Jun 2009 03:56:00 PDT

One of the cornerstones of web standards is semantics. For those confused with this term, semantics is meaning of the word, sentence or in our case - a piece of code. Producing meaningful code brings you closer to the idea of web standards.

Understanding Semantics

To get familiar with the term “semantics” I will give you an example I've found on the web (but can't remember where so I can't link to it). The phrase I love New York has pretty straight forward meaning. If you replace the word love with one of those heart symbols the sentence will change for sure but the meaning will not. So sentences I love New York and I (heart) New York have the same semantic value.

Validation and Semantics

Although both are very important when we talk about web standards, I honestly believe that having semantically correct code is more important then have a valid code, at least up to a level where you don't make huge errors in the code's structure. I mean, I'd rather see you using proper heading structure and miss out to put rows and cols attributes on textarea then the other way around. People get so preoccupied with validation that they forget that it's only a one step towards web standards.

Talking HTML properly

There are many tags in HTML and each has it's meaning or purpose. First step towards learning to talk HTML is to get familiar with all these tags. Just as learning a foreign language, how many different words and phrases you know will define how eloquent you can be. I said can be because knowing all these tags is not guarantee by itself.

Knowing and understanding all of the tags is just the first step. Many of these tags are actually abbreviations or acronyms of the full words. Knowing what they stand for will help you in understanding and using them properly. Some of the tags mean:

p – paragraph
em – emphasis
div – division
td – table data
th – table header

The second and equally important step is to use them properly. In order to do that, what we have to understand the content and write a markup that will follow it's meaning.

How exactly can markup “follow” the content?

First example I would point out is proper heading structure. This is not important just form semantics point of view, it also defines a structure of the document. So, if something is meant to be a heading use:

<h2>This is my fancy title</h2>

and don't use

<div class="largeTitle">This is my fancy title</div>

because you strip away it's meaning – you're ruining the semantics. Div defines a logical division of a content and it's meant for structure so this would not apply even if this wasn't a title.

So use divs for structuring a document only and not for text formatting.

Separate text blocks into paragraphs using p tag, do not use repetitive br to add spacing between text blocks.

For lists use one of 3 list elements, ordered, unordered or definition list. If you have doubts about using ordered or unordered lists see have in mind that ordered list have a ascending order (1,2,3... etc). So if you're displaying most recent list item (descending order) at the top then the ordered list is not the best solution.

Use tables. Don't avoid tables all together. I saw a calendar sample marked up as an unordered list, not the best choice. Calendars are not linear therefore can't be displayed as a list.

One step further

You can also add more semantic value to your document by adding certain HTML elements that you may overlook at first. For instance, if you are talking about CSS and HTML you know that these are abbreviations, but you can let your browser know that too. The sentence:

<p>I am trying to get to become a better CSS coder.</p>

could look better and mean much more if you should use:

<p>I am trying to get to become a better <abbr title=”Cascading Style Sheets”>CSS</abbr> coder.</p>

Another example:

<p>To style that line properly use class attribute like this class=”alt”. </p>

<p>To style that line properly use class attribute like this <code>class=”alt”</code>. </p>

Speak it

Just as any other language HTML takes time and practice to learn and “speak” properly. So, take it one step at the time. Don't feel bad about “missing the word” here and there, more important is that you understand the language and that you are familiar with the idea of web standards and what web semantics stand for.

Tag Clouds - Styling and Adding Sort Options

Tue, 31 Mar 2009 02:21:00 PDT

Users have very different opinions when it comes to tag clouds. Some like them, some can't stand to look at the mess. Whatever your feelings are, categorizing items (i.e. blog posts) using tags have become very popular and widely spread and can't be avoided in the web today. So we might as well learn how to deal with them.

Take a look at the full demo | Download Tag Cloud Style & Sort

Overview

This article consists of 2 parts: one is marking up and styling tags and the second is adding behavior to tag cloud using client-side script. I'll show you my way of styling tag clouds although you may find similar (yet different :) ) tutorials elsewhere.

HTML & CSS

Tag cloud is a list of links. Period. The only acceptable elements for organizing tags in a tag cloud are ordered or unordered list. I suggest using unordered list due to tag cloud's "messy" nature. In most cases we don't need wrapping element, list should be enough, but if you really have specific styling needs, you can make a compromise and wrap the list inside a div. At the end you get something like:

<div class="tags">
	<ul>
		<li class="tag1"><a href="#">Lorem ipsum</a></li> 
	</ul>
</div>

Based on certain parameters, tag cloud items have different visual treatment. The idea is to emphasize items with more "value" (according to certain parameter) and that is mostly done with changing their size and weight. Here's an example.

The other option is to use color and contrast to achieve the same goal. In this example, items with less measurable value will have lower contrast and those with more value will have higher contrast.

Although most tag clouds are generated with back-end code and from that perspective it doesn't matter if you add class name or inline styling, I strongly recommend using class names. In the end, it's much easier to change a line of CSS in order to change appearance then to dig through back-end code. Depending on number of steps add class name similar to "tag1", "tag2" ..."tagn" where the class marked with 1 should be define items with the lowest values and n defines highest value items.

And... Action!

Many visitors find tag clouds too confusing to use, so why not provide them with an alternative? With simple lines of JavaScript you can add sorting options that will make your tag clouds more usable. Even a simple switch from inline items to block-level items will do the trick and make them more easy on the eyes.

What we'll do here basically is add a class name to the UL that will change the appearance of a tag cloud. First, let's do that without the JavaScript.
Check out this (static) demo page with both styles.

With adding a switch button using simple lines of jQuery we can easily change these styles on click.
Check out demo page with tag cloud style switcher.

$(document).ready(function(){	
	
	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);	
	
});

Note that in this example I am using id for tag cloud container instead of class name as in first demo.

Further more, we'll allow sorting by alphabet or by tag "value". I am using a great plugin by Sjeiti called TinySort that can be found here.

$(document).ready(function(){	
	
	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);
	
	// create a sort by alphabet button
	var sortabc = $('<a href="javascript:void(0)" class="btn">Sort alphabetically</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"asc"});
		},	
		function(){
			$("#tags ul li").tsort({order:"desc"});
		}		
		);
 	$('#tags').append(sortabc);		
	
	// create a sort by alphabet button	
	var sortstrength = $('<a href="javascript:void(0)" class="btn">Sort by strength</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"desc",attr:"class"});
		},	
		function(){
			$("#tags ul li").tsort({order:"asc",attr:"class"});
		}		
		);
 	$('#tags').append(sortstrength);			
	
});

Check out the sortable demo.

Easy Tooltip - jQuery plugin

Thu, 05 Mar 2009 04:47:00 PST

I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release yet another plugin that came from my personal need - jQuery tooltip. I already claimed this to be the simplest tooltip ever. I made some modifications to it so now has some extra features.

Download easyTooltip.zip

Overview

By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn't have to be an anchor tag. You can apply this script to any element(s) you want.
The one big thing that makes this different from my first version is that you are now allowed to put custom content, any html content you want - images, long paragraphs, link lists... anything. If you hate writing HTML code inside a JavaScript variable, this plugin allows you to use inner HTML from any element on the page. It means that you can write HTML directly on the page, as you normally do, hide that element with CSS and have it appear as a tooltip on mouse over. Take a look at the demos for more info.

Options

xOffset - Offset to the left from the cursor (in pixels). Default setting is 10.
yOffset - Offset to the top from the cursor (in pixels). Default setting is 25.
tooltipId - Use this if you want to assign custom id to your tooltip. Also, if you have multiple tooltips on one page and you want to style them differently, use ID's to assing different css definitions. Default setting is "easyTooltip".
clickRemove - By default tooltip dissapears once you rool out of the element. Using this options you can remove tooltip by clicking on the element. Default setting for this option is false.
content - By default Easy Tooltip displays title attribute of an element. Use this option to send a custom content to the tooltip. Default setting for this option is "" (empty).
useElement - If you'd like to display more complex HTML in your tooltip and yet you hate writing it inside a content option, you can use a certain element's inner HTML. Best way to use this option is to create a static HTML element, hide it with css, use it's id when setting up the plugin (take a look at the 3rd demo)

Demos

Take a look at these demos and you will see how simple it is to use this plugin.

Pure Css Line Graph

Wed, 11 Feb 2009 03:30:00 PST

I often think about ways to visualize data using pure css. A while ago I wrote an article about pure css bar graphs, but what puzzled me lately was a solution for doing line graphs using nothing but css.
Many will not see much sense in this technique, specially when we have so much JavaScript (or even Flash) based line graph scripts.

My intention was not only to enable data visualization to people that don't feel comfortable with using various scripting languages but also to demonstrate the power of css and present a way of using css a bit differently. If you are not a fan of line graphs and data visualization in general, you may still read this article and think of it as css experiment and perhaps learn a thing or two about css sprites and positioning.

Take a look at the demo | Download pure css line graph

So, the line graphs. What are they good for? I will mention just one reason, and leave other advantages or downsides for a debate: users scan your page, they don't read every word and number you write. Line graphs will deliver information much faster then a table filled with numbers.

How does this thing work?

This technique takes structured html, replace text with images and by using css sprites and absolute positioning it creates a simulation of a line graph. As in my pure css bar graph example, I am using definition list element (DL). DL element is styled to represents the coordinate system where we place items. For that reason, empty DL element must look something like this:

The dimensions used in the background graphic define the dimensions we're using for child elements in order for everything to fit well. In this case, each item will represent one day. For items we are using DD elements with nested spans. We are formatting and placing the DL's so they form linear bars across the chart.

The styling of nested spans are what makes this css line graph possible.

The Graph Principle

The concept may seem a bit advanced but if you look carefully into it you'll see that the logic is quite simple. In my example item's (DD's) dimensions are 33px in width and 330px in height. Each one of those items represent one "line movement" from one point to the other. We're using one image, css sprite, that has all possible options displayed graphically. As you can see on the image, there are lines that go up (rising values) and lines that go down (falling values). Setting the nested SPAN's background-position property to certain values we are choosing one of the "line" options.

But that is not all. We also have to set the "starting position" for each item as the lines always start at different values. That is done by setting top value for each SPAN

For this reason, each SPAN has 2 (actually some of them have 3 - read below) class names attached: one that defines the SPAN's "starting point" (SPAN's top value) and other that represent the rising or falling "line move" (SPAN's background position value).
Starting point is based on previous value. You have to continue with next item where the previous item "stopped".

Usage

If you look at the css file I created 4 groups of class names: 2 for setting starting position and 2 for defining the "move".
I divided starting position class name groups based on the situation where we are increasing values (using line-up, the upper part of the image) or decreasing values (lower part of the image).
I named those class names .pi1 or .pd1 ("p"osition "i"ncreasing 1) or ("p"osition "d"ecreasing 1) By looking at the css file you'll notice that .pi group has negative top values which shits sprite image up while .pd group has positive top values (shifts image down).

Actual line movements are defined with class names like .i1 or .d1 i.e. this class name .i24 increases the value by 24 points.

Choosing a proper position (".p" class) is fairly easy: you have to take a look at previous item which can be something like:

<dd><span class="pi1 i10"><em>33</em></span></dd>

We have pi1 and i10. It means that we have item starting at point 1 and is increased by 10 points. That makes point 11 our new starting point. If our next move is increase we are choosing .pi11 but if we're decreasing we choose .pd11!

If this sound to complex (or if I presented it poorly) just remember that when choosing both class name you have to be careful that you don't mix i's and d's

This is good:

<dd><span class="pi1 i10"><em>33</em></span></dd>

and this isn't

<dd><span class="pi1 d10"><em>33</em></span></dd>

Now, let me explain what's with the EM element. Items are placed next to each other without overlapping so the line connections are not smooth. I am using EMs to place dots over these connecting points to cover them. EMs are absolutely positioned to cover the PREVIOUS line connection area. There is one default css definition for EMs although the decreasing items need additional class name .d - that's why I mentioned that some of the SPANS has 3 class names. The decreasing item is marked up like this:

<dd><span class="pd10 d d1"><em>46</em></span></dd>

Please note that class names are written in "points" or "steps" not the actual values. In my case each "point" represents 3,3%

As mentioned, I am not trying to replace advanced JS or flash techniques with this. I am offering an alternative way to visualize data and perhaps different view of CSS usage. This method has it's limitations, but it's pure CSS!

Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images and Content

Mon, 26 Jan 2009 09:29:00 PST

New version of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. In this case version 1.5
All of the features here are result of your comments, so if you have more ideas, keep 'em coming!

Note: in case you haven't already, you might want to check out article about first version of this plugin.

Download easySlider1.5.zip

Features

This version features:

auto slide
continuous sliding
"go to first" and "go to last" button
hiding controls
optional wrapping markup for control buttons
vertical sliding
multiple sliders on one page

Here are the things you can customize (with their default values)

prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',	
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',	
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',	
lastText: 'Last',
lastShow: false,				
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false

I will explain new options:

controlsShow

By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.

controlsBefore and controlsAfter

In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.

controlsFade

By default set to true. If set to false it will disable button hiding when slider reaches the end.

firstShow and lastShow

These parameters hide (or show) "go to first" and "go to last" buttons

auto

This option enables auto sliding, Just set it to true.

pause

This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding

continuous

If set to true clicking the next button when the slider reached the end will jump to the beginning (and vice-versa). Combining this option with auto (both set to true) you'll get endless animation

Demos

I have prepared 5 demos, although I could have done zillions. Hopefully I will have the time to create more good demos as I continue to develop this plugin

Future

I already have some ideas about next versions (play/pause buttons, numbered pagination...) but I would also like you to share any idea you might have.