CSS: pure css GUI icons

Tweet

Imagine you don't need images anymore. We've seen something similar in CSS: create shapes in pure css last April, but what we will see here is pure madness... at least at first sight. The GUI icons set you see on the right is an image, however there's a guy who did them all using css. Sounds crazy? Well, that's what I thought the first time I saw them, but as the author - Nicolas Gallagher - states on the project page, all the idea is just an experiment.

Basically, Nicolas is using css pseudo elements (:before and :after) and semantic HTML to create a 84 icons set. Let me immediately warn you: with Internet Explorer you won't see things as they were conceived. If you open the demo page in IE8, for example, you will see the icons with some css attributes missing and the whole effect will be missed.

I suggest to visit Nicolas page and have a look at his works. Just keep in mind that pure css GUI icons are just an experiment.

Web site statistics: why are they important?

Tweet

I have recently published two articles in which we saw how to benefit from Google Analytics and which browser is the most popular, globally. The articles seem unrelated, but they are not. When we manage a web sites, statistics are fundamental and give us the right point of view in planning future developments. What I'm saying is that before changing something in our web site, or - more importantly - when we plan to change the whole web site, we do need to look closely at web statistics in order to plan our future work efficiently and effectively.

Recently, I have published other articles incidentally related to this one. For instance, I've been talking about the new mobile generation and handheld devices used to surf the net. That new way of surfing the web, is changing the way we develop web sites. There's - apparently -  the need to create handheld devices compatible designs, and target screen resolution becomes a nightmare for all of us.

That is all true, however I would like you to focus for a moment on the issue. We are basically assuming we need to change an old web site, or just add some features to it. Our web site statistics can really make a difference. And let me explain why.

CSS: float center? Yes, we can do it!

Tweet

Can we trick the float property and create something like float:center?
This very article is demonstrating that it is actually possible with CSS.
As you can see, the CSS3 logo is staying at the center of the two columns and we are actually using placeholder pseudo elements to obtain the desired effect.
We are basically carving a place for our image and

 then insert it using an absolute positioning. Isn't that impressive? The technique is quite easy to understand and has little code, but a few things should be remembered. We will use placeholders for each column (two divs in the example), using the float property: one column will float right, and one will float left. The pseudo element will have the height of the image and nearly the half of the width. Now let's see the code behind it.

Web Design: animated photos

Tweet

Recently I found an interesting article on the Smashing Magazine about CSS, HTML and JavaScript tools. The thing that struck me was at the very end of the article and it was referring to a blog called From Me to You. The remarkable thing about it, is that the author creates animated photos. Let me explain to you by showing the following photo:

Look closely at the tomatoes: there are drops of water falling onto them. Now that's an animated gif, isn't it? It weights 218kb, which is a lot. However there's a trick in order to create those animated photos, by keeping the weight lower and thus not wasting bandwidth.

Web Design: resizeMyBrowser

Tweet

When building web sites, one of the most important things we must deal with nowadays is the target screen size. I have published different articles on the subject, but everytime I think about it and search on the web, I find different tools to check if I've done things right. With the explosion of handheld devices, the screen size has become a more important matter, and what we see on our beloved widescreen monitor is just not enough to evaluate how visitors will look at our web site.
There is one tool I would like to suggest; a tool conceived to help us in that evaluation.

ResizeMyBrowser

resizeMyBrowser is a simple tool that will resize your browser window according to different standards like the iPhone 3G/3GS screen size (320x480 or 480x320), iPhone 4 (640x960 or 960x640), iPad and so on. In addition to the available presets, there's the possibility to create custom presets.

The testing is done quite accurately, and there's the possibility to see the result considering the outer window (including toolbars) or considering the inner window (the interior of the browser window).

If you use Firefox and the Web Developer toolbar, you would probably don't need this, but I think that an additional testing tool is always welcomed.

Happy coding to all of you!

SQL Server: use the NewId() function to create unique identifiers

Tweet

A few months ago, I have published an article mentioning the NewId() SQL function. In that post, I was explaining how to create dynamic keywords and description meta tags. However the NewId() function can be used in different situations and it becomes very handy, when we need unique identifiers.
Let's see how it works.

The basics

The NewId() function returns a unique identifier; that means a unique set of numbers and letters. If we use the function in a query in SQL Server Management Studio like:

print newid()

the result will be a unique identifier like:

5C6C9372-49F9-4A5C-BCFA-DA6CDB525CAB

Interestingly enough, the above result is unique and can be used in various way. For example, we can use the function to generate personal identification numbers (PINs), login passwords, ids, serial numbers or product keys, simple primary keys etc. At the same time we can use the function to create random sorting of data.

ASP: the Server.MapPath method

Tweet

The Server.MapPath method is used to obtain the relative or virtual path to map a physical folder. How many times did we use it? Did we fully understand how it works?
Well, let's get into it and see.

The syntax

The basic syntax of the method is:

Server.MapPath(path)

where path is the relative or virtual path to map a physical folder. The parameter is required. When you use the method in an asp page, the page path will be affecting the output produced. If the path parameter start with a backslash or a slash, the method will return a path relative to the path where the asp page containing the method is located.

ASP: export data to Ms Access

Tweet

Just about a year ago, I published an article describing how to export data to Excel with asp. In this article we are going to do the same, but using Ms Access as a target.
There are some things we need to prepare before starting creating the page that will actually export the data. That is because our Ms Access database (I will refer to it as mdb from now on) must be created before doing anything. At the same time, we need to create a connection to the target mdb.

Preparing the target

First of all, we have to create a target mdb that we can call template.mdb. The Ms Access file will have a table which will be our target table. The columns of the target table should be where we are going to put the data. Just to be more clear, we should look into our source table and reproduce it in our target mdb. As a start, I suggest to re-create all the fields as text data type. That is because data types might differ from the source table (e.g. a SQL Server table). If the data types are not compatible, we will end up with an error. If you start to understand the basic usage explained here, then you will be able to adjust your target mdb with the correct data types.

HTML5: the progress element

Tweet

Progress bars have always been a needed element in web applications. Every time a user sends requests to the server, it is quite usual that some sort of immediate response is needed, just to make the user aware that something's really happening and that the whole application is not just frozen. In the past, we used JavaScript and CSS to show some sort of progress bar. We usually used animated gifs like

and many sites still use those kind of solutions.
With HTML5, a new element has been introduced. It is progress and it will give us a new way to show the user that something's really going on after that button has been pressed.
"The HTML progress (<progress>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar." (quote from Mozilla Developer Network).

Web Design: the colour scheme

Tweet

One of the first things we should think of when planning a new web site or application is the colour scheme. We usually create a layout (and I do it with pencil and paper), we can think about the menu and the position of important information, we try to use the work space in a smart way and generally we focus on the overall user interface. next step should be the evaluation of the colours we will use. We can start it all by deciding the basic colour and after that by creating the colour scheme. It is an old story and it started when our computer monitors were smaller and our graphic cards were less powerful. At that time we could rely only on 256 colours (remember?); now it is a completely different story.
Choosing the right colour scheme is one of the things that annoys me more. It makes me suddenly lazy, but I know it is very important. If you have a graphic designer or someone who knows exactly what the colour scheme should be, then you're lucky and you can rely (or be forced somehow) on that helping hand. But if you need to think about all alone, then some kind of tool might become handy.

XML: build a sitemap for search engines

Tweet

A Sitemap is an XML file which contains all the information needed by search engines to crawl a web site, and eventually index it more efficiently. The XML file mainly contains URLs and additional information which can be used by search engines crawlers. If a Sitemap is not present in the root of a web site, the crawlers usually will follow the links inside a page and try to "discover" all the pages of the site. With a Sitemap, that process is done more efficiently, quickly and the web master is sure that all relevant pages are indeed analysed by search engines spiders. Sitemaps do not guarantee that a web site is indexed and ranked, however they help a lot the process.

There are many Sitemaps creator on the web, however I would like to explain how to build one yourself. As a side note, you should know that RSS feeds can be used as Sitemaps in tools like Google Webmaster, however it is better to use the Sitemap protocol to ensure that other web spiders understand the structure of your site.

jQuery: tips with jquery.balloon.js

Tweet

In this short article I would like to share a jQuery plug in I found a few days ago.

Recently I have read various articles about web sites' usability and the idea of much more user friendly interfaces for web sites is really getting stronger and needed for all web developers. I've always thought that tool tips are really important, because they help the user to understand what to do and how to do it. Specifically in web applications, but web sites are the same, tool tips should be always considered important. It's not a mystery... even simple alternative text for an image should be always coded. People simply forget about it (even big web sites, like online magazines where if you mouse over an image you won't get any additional info!), but that is really a big mistake.

jquery.balloon.js is a small plug in (11kb) conceived to create wonderful balloon type tips for any element of a web page. The plug in doesn't use any image and it can be styled with css. Basic usage is very simple, but for those of you that needs a little bit of customisation there are very interesting options available. In the demo page, we can see it in action and I must say I was impressed by the overall final effect.

By changing the default options values, you can have different tool tips; starting from the position of the balloon, its content, size, persistence, duration, animation type and, last but not least, the use of ajax to get the content. The latter feature really impressed me, because I already have thought about different situations where the plug in might be used.

Happy coding to all of you!

CSS & HTML: nested lists with style

Tweet

One common mistake that I've found in many web pages is when a nested list is needed. Usually, we think that the following code is correct:

<ul class="list">
<li>A</li>
   <ul class="sublist">
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
</ul>

Producing this:

• A
• 1
• 2
• 3

which looks good. But if you try to validate the above code, you will get some errors.