the web thought

jQuery: image zoom plug-ins

2012-03-02T07:00:00.002+01:00

As one of the web thought visitors has commented a few days ago, there are many jQuery plug-ins that help us in creating zoom effects on images. Here's a list of the best.

Zoom
"A small (1.4kb) jQuery plugin to enlarge images on mouseover or mousedown."

jQuery Image Magnify
"jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This means you can take a large image that by default would look out of place when shown, shrink it using explicit width/height attributes, then enable users to magnify it on demand to its original dimensions when the image is clicked on using this script."

Cloud Zoom
"Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers."

Zoomimage - jQuery plugin
"Present you images in stylish way. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border."

JQZoom
"JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want."

ImageLens – A jQuery plug-in for Lens Effect Image Zooming
"Use this jQuery plug-in to add lens style zooming effect to an image"

Easy Image Zoom
"I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!"

Fonts: the browser doesn't display fonts properly

2012-02-29T07:00:00.001+01:00

Is your preferred browser suddenly displaying all the basic fonts in an unclear and garbled way? Before starting to pull your hair off, it might be that something got in the way and some Windows preference has been changed.
What happened to me once, is that Firefox, Chrome and Safari started displaying system fonts strangely, while Internet Explorer was rendering the text in the correct way.
I remember that I started searching for a solution, and, at first I thought it was something related to my system font files that got corrupted. But it wasn't that.
I noticed that other programs and applications were displaying the menus and text in a strange way.
I decided to rebuild the font system folder. Nothing changed...
Well, to make a long story short, it was the Clear Type option.

In Windows 7, there's a control panel section that's taking care of Clear Type fonts: ClearType tuning.
In Windows XP and Vista, we need to download ClearType Tuner from Microsoft.
If for some reason, the clear type option has been turned off, the result will be that all the fonts in your applications will be in some way less clear (sorry for the pun). And even your browser will display system fonts in that way.
Just turn ClearType on again and everything will be fine.

More info here.

jQuery: fadeIn and fadeOut for IE8

2012-02-27T07:00:00.004+01:00

If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.

I don't think I have to explain much about it, so I will get into it very quickly and shortly.

If we have an element to which we applied a fade effect using jQuery, we should have something like:

<div id="fading" style="display:none;">Some content</div>

in the body of our page.

In the head we control the fade effect. In the following example we create the fadeIn effect on the click event (on some other element with id="sometrigger"):

<script type="text/javascript" language="javascript">  </script>

If you test the above code in IE8, the div with id="fading" will just appear without the fading effect.
In order to solve the issue, we just need to add a CSS rule to the fading div:

<div id="fading" style="display:none;filter:inherit;">Some content</div>

As you can see we added:

filter:inherit;

The above rule will make the fading effect work on IE8 as well.

Enjoy!

CSS & HTML: solution for border radius not working on IE8

2012-02-24T07:00:00.006+01:00

Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.

A little bit of background

How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.

What I discovered

After a while, it came to my mind that when the border radius rule is not recognised by the browser (such as IE8), we use fallbacks like CSS Pie or jQuery plug-ins. Those solutions use VML (Vector Markup Language). I don't want to get into too much complicated reasonings here. If you need to know more about VML please refer to the W3C page.
What we need to know here is that VML, on Windows machines, is controlled and implemented via a specific library: vgx.dll (vector graphic rendering). And Internet Explorer is using that library to render VML.

The first step and the final solution

If the vgx library is not working, Internet Explorer is not rendering VML, and thus the round corners.
How come that a library is suddenly not working anymore? A corrupted library may be the problem, but that was not my case.
A while ago, someone discovered a possible exploit threat that uses the vgx library.

"The vulnerability could allow remote code execution if a user viewed a specially crafted Web page using Internet Explorer. Users whose accounts are configured to have fewer user rights on the system could be less impacted than users who operate with administrative user rights." (from Microsoft bulletin MS11-052)

And some well known anti malware softwares are simply de-registering the library in order to prevent the vulnerability.
That means VML is not working anymore.
The aforementioned bulletin is providing a permanent solution, but if you used some sort of anti malware software, your vgx library may have been unregistered.
So - and you may have already understood it - the solution is simple: register again the library. We need to do it via Windows command prompt or create a small .bat file. Whichever solution we choose the command is the following:

%WinDir%\system32\regsvr32.exe "%CommonProgramFiles%\Microsoft Shared\VGX\vgx.dll"

After that, we can see the beautiful round corners working again.
Last but not least, remember to apply the aforementioned Microsoft patch, to avoid possible threats.

A side note

VML is active and used only in Internet Explorer. I have found that it is possible to check if VML is active by using a conditional statement:

If your browser display the "VML" text, VML is active for that browser... I must say I'm a bit confused on the matter, but I wanted to share this finding with you.

I hope you have found the solution useful. As usual use the comments section below for your thoughts!

Web Development: optimise JavaScript and CSS

2012-02-22T07:00:00.003+01:00

Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.

I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).

RTT

First of all, we should consider what's the round-trip time.
RTT is the time it takes for a client request to reach the server and get an answer from the server itself. It doesn't include the data transfer time.
The RTT is usually measured in milliseconds.
In order to produce an efficient web page, we should try to reduce RTT and thus reduce the number of HTTP requests and responses.
Already confused? Don't worry, just keep in mind that we have to reduce RTT.

JavaScript external files

In our projects, we are used to link and include JavaScript external files. We do it by placing a link inside the head of our document. It is a good practise, because a modular approach is always good: we can reuse components, code, functions and so without writing them more than once; and when we need to improve the code, we just need to change it once.
This can lead to a high number of external files. And that's not good for RTT. Infact, loading a lot of files, produces a lot of HTTP requests and responses. This is definitely not a matter of kilobytes: what matters here is the number of times the client is making a request to the server, waiting for the proper reply.
Reducing the number of JavaScript files will reduce RTT. I will suggest to use 2 or 3 files: one with basic functions, and 1 or 2 with advanced functions (only to be loaded in some special page).

CSS stylesheets

What we saw for JavaScript files, is completely valid for external CSS stylesheets. I know that we like to create different stylesheets for different media type or even target browser. However, we should not overdo it; we should avoid not necessary HTTP requests.
We then should consider the fact that many web gurus are saying the @import rules are to be avoided as well. A nested CSS stylesheets situation is decisively not good in term of RTT.

The correct loading order

As for the correct order for loading external resources, I've noticed that it is better to place CSS stylesheets before JavaScript files. In the head of our document, we should place links to all the stylesheets and afterwards, the links to the JS files.
I've seen charts which explain how the RTT is reduced by one third, using the above method. And that's not bad at all.
If you have specific scripts in the head of the document, remember to put them after the links to external files.
To summarise: put external scripts after external stylesheets; put inline script after all the other resources.

I hope you liked the article. If you want, please share your experience.

Web Design: free images deposits

2012-02-20T07:00:00.001+01:00

When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:

Flickr: Creative Commons
MorgueFile: free photos
FreePhotosBank
FreeMediaGoo (audio, images, textures and flash)
FreeDigitalPhotos
InterfaceLift Icons

I hope the above list might be of some use for you.
In the meantime, happy coding!

JavaScript: live character count

2012-02-17T07:00:00.001+01:00

In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.

The HTML

We build the text area inside a form. In our example the calling of the function is placed in the form itself, but it possible to use it directly inside the textarea (if you prefer):

<form onkeyup="count();"> <input type="text" id="message" size="40" maxlength="40"> <br /> Character count: <span id="characterCount">40</span> </form>

The textarea has a max length of 40 characters, and so we start our character countdown from that value. The span tag with a specific id (characterCount) will initially show a starting value of 40, and then the function count() will change that value on the key up event.

The function

The JavaScript function is simple and should be placed in the head of your page:

<script type="text/javascript"> function count(){ var characterCount = document.getElementById("message").value.length; document.getElementById("characterCount").innerHTML = 40-characterCount; } </script>

It basically inspects the length of our textarea which has an id="message". Then it changes the value inside the span with a value equal to 40 (our max length) minus the length of the textarea.
Every time a new letter is inserted in the textarea the span value decreases by one, starting from 40.
We can obviously change the max length according to our need.

And that's all for today.

SQL: the alter table statement

2012-02-15T07:00:00.002+01:00

In SQL we usually create tables, pre-deciding the columns and their characteristics, like default values and data types. It is possible to insert new columns and eventually alter them afterwards, using the alter table statement.
In the following post we are going to see what we can do with it.

With alter table, we can add, change the data type or delete a column inside a table.

Add

We can add a new column with a simple statement:

ALTER TABLE tableName ADD columnName dataType

where tableName is the name of an existing table, columnName is the name of the new column and dataType is the data type of the new column.

Change

In order to change the data type of table, we can use:

ALTER TABLE tableName ALTER COLUMN columnName dataType

Delete

The dropping of a column is again very simple, however it should be used with care, because it will obviously delete all the values in the column:

ALTER TABLE tableName DROP COLUMN columnName

Use of alter table

There are many possible use of the alter table statement. For example, we might need to create a temporary column in a table, use it and then drop it. Or maybe, in some rare cases, columns might be added on users need, specifically in web applications, where a super user can manage the back end database through an option panel board.

ASP: convert a string into a link

2012-02-13T07:00:00.000+01:00

If you often visit social networks or, generally speaking, discussion web sites, you surely have noticed that sometimes when you insert a message or a post, every possible link is automatically recognised and "transformed" into a clickable link. How is it done?

With ASP we can manipulate a given string, find a possible link and change it.

The code

The code is quite simple:

<% Dim str str= "This is a link http://thewebthought.blogspot.com/" Dim strS strS = Split(str, " ") Dim strLink, i i = 0 For i = 0 To Ubound(strS) If InStr(strS(i), "http://") Then strLink= "<a href='" & strS(i) + "'>" + strS(i) & "</a>" Else strLink = strS(i) End If Response.Write strLink & " " Next %>

Ok, let me explain it to you.
str is our string. It can be submitted by a form, retrieved from a database or else.

We first split the string (str) into an array (using the space as separator).
We then use a for cycle to go through the array and check if "http://" is present. If so we convert it into a link. After that we show the complete text. We can obviously use strLink the way we prefer.

Easy and simple.

CSS: 3d text!

2012-02-10T07:00:00.002+01:00

Can you see anything special in the following text?

3D Text

If you see it just as a big text, your browser is not compatible. Try to use the latest version of Firefox, Chrome, Safari, Opera or IE10.
How can it be achieved?

Let me explain it to you.

A secret revealed
It uses CSS text-shadow rule. And there's an online tool that helps us creating the effect. What we basically need is just a container (for example a div) with the text in it. We then assign a specific class to the div and apply some rules. For the above text, the CSS is:

.Three-Dee{ font-family: Garamond, serif; line-height: 1em; color: #1808fa; font-weight:bold; font-size: 112px; text-shadow:0px 0px 0 rgb(-2,-18,224),1px 1px 0 rgb(-9,-25,217),2px 2px 0 rgb(-16,-32,210),3px 3px 0 rgb(-23,-39,203),4px 4px 0 rgb(-30,-46,196),5px 5px 0 rgb(-38,-54,188),6px 6px 0 rgb(-45,-61,181),7px 7px 0 rgb(-52,-68,174),8px 8px 0 rgb(-59,-75,167),9px 9px 0 rgb(-66,-82,160),10px 10px 0 rgb(-73,-89,153), 11px 11px 0 rgb(-80,-96,146),12px 12px 11px rgba(0,0,0,0.2),12px 12px 1px rgba(0,0,0,0.5),0px 0px 11px rgba(0,0,0,.2);}

Just go to 3D CSS Text and start creating your own 3D text!

CSS: image preloader

2012-02-08T07:00:00.002+01:00

Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:

which will be displayed while the main image is being loaded.
Let's see how we can do it.

The HTML

We need to create a container for the image:

<div class="preloader"> <img src="image.path.jpg" width="840" height="281"> </div>

The image sits inside a div with class="preloader". In the img tag we set the original width and height of the image (840 and 281 are just examples).

The CSS

With some basic rules, we can style the image container:
div.preloader

{ width: 852px; height: 293px; padding: 5px 5px 5px 5px; border: solid 1px #000000; }

The width and the height of the container is considering the image size and the borders and padding (840+5+5+2=852 and 281+5+5+2=293). The above rules can be changed according to your needs, as usual.
Now we set rules for the image itself:
div.preloader img

{ display: block; background-image: url(images/loading.gif); background-repeat: no-repeat; background-position: center center; }

We use as background image the animated gif shown above (the classic rotating gif, but you can use the one you prefer as long as it is showing that something is going on). We position it at the centre of the container, without repeat.
And that is all. While the big image is loading, the user will see the animated gif. When the big image has been loaded, it will cover and hide the animated gif.

Hope you liked the example and see you next time.

CSS: image zoom effect

2012-02-06T07:00:00.001+01:00

Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.

The HTML

We are going to use two images: one is the small version and the second is the large one. When the user puts the cursor on the small one, the large one will appear. Very simple, isn't it?

<a href="#" class="zoom"> <img src="images/small.jpg"> <span><img src="images/large.jpg"></span> </a>

The CSS

In the CSS rules, we need to temporary hide the large image and then create a hover rule to make it visible.

a.zoom span { position: absolute; visibility: hidden; } a.zoom { position: relative; z-index: 0; } a.zoom:hover { z-index: 1; } a.zoom:hover span { visibility: visible; top: 10; left: 70px; }

As you can see the large image has an absolute position. We can change the top and left values in order to make it visible in a particular section of your viewport.

Piece of cake!

HTML & CSS: text overlay with shadows and round corners

2012-02-03T07:00:00.003+01:00

Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:

It will be an easy solution with full browser compatibility... please follow me...

HTML
The HTML part of this exercise contains just two divs: the first is the main container (with the "Lorem ipsum..." text) and the second is the overlaying box ("This text is over..."). The first div has a class="longText". The second div has a class="over". We will use CSS to style the two divs.
So, here is the HTML:

<div class="longText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at lacus lorem, eget tristique sapien. Maecenas malesuada est eget urna dictum sollicitudin. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec erat purus, faucibus vel convallis eget, luctus sit amet elit. Curabitur non libero quis tellus vulputate luctus non eget velit. Suspendisse sed enim nisi, ultrices molestie turpis. In hac habitasse platea dictumst. Donec purus lacus, commodo nec malesuada at, faucibus non erat. Etiam commodo neque et justo consequat sagittis. Nullam rhoncus turpis sodales dui molestie sollicitudin. Ut vel tellus eu est dictum lobortis id sit amet nisl. In nec justo purus.</div> <div class="over">This text is over the main container.<br> It has round borders and shodows!</div>

The text used in the example is a bit long, just because we need enough space to place the overlay.

CSS

Now we need to style the two divs. Let's start with "longText":

.longText { width: 50%; }

To obtain the overlay effect, we just reduce the width of the div. It is just for the understanding of the example (to make the long text go down vertically and to make the overlay effect more visible).
Now the "over" div:

.over { font-size: 16px; font-weight: bold; color: #000000; text-align: left; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; box-shadow: 0 0 10px #000000; border-top: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; behavior: url(/PIE/PIE.htc); background-color: #FFFFFF; padding: 15px; position: absolute; top: 40px; left: 40px; }

Do I need to explain everything here? Probably not, but I need to make some remarks.
The rounded corners are achieved with border-radius; the shadows with box-shadow.
The position is absolute (40px from top and left).
The following rule is used to call PIE:

behavior: url(/PIE/PIE.htc);

If you don't know what CSS3 PIE is, see my article about it. If you don't want to use it, just remove the above line.
It is clear that you can change border widths, colour and style, colour of text, border radius and so, according to your personal taste and needs.

I hope you've enjoyed the solution.

CSS: Ultimate CSS Gradient Generator

2012-02-01T07:00:00.006+01:00

Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.

If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.

The main features of the tool are:

Powerful Photoshop-like interface
Cross browser CSS output
Horizontal, vertical, diagonal and radial gradients
Complex multi-stop gradients
Opacity support with multiple opacity stops
Hex, rgb, rgba, hsl, hsla color formats
Support for full multi-stop gradients with IE9
Import from image (convert image gradient to CSS)
Import from existing CSS
Adjust gradient by hue, saturation, lightness
More than 135 gradient presets
Saving custom gradient presets
Sass output
Flexible preview panel
Gradient permalinks for sending and sharing

We really have anything we need here for gradients, believe me.

Enjoy and see you next time!

Blog ranking... just for fun

2012-01-30T16:53:00.000+01:00

Just a quick note, out of the ordinary flow of posts...

I've read a short article a few minutes ago and I can't stop laughing. In the article it is said that if you want to increase the traffic to your blog, you should place at the beginning of every post a photo of a beautiful girl... possibly with a small dress... if any...
I won't put the link of the aforementioned article, so don't ask...

I am just still laughing out loud (and my boss looks at me suspiciously...)

ASP & CSS: highlight selected menu item

2012-01-30T07:00:00.000+01:00

When creating menus for a web site, it is a good practise to use an inclusion, so that we write the menu only once. When the menu is included on every page, we might need to highlight the selected option in the menu itself.
For example, we can have a menu like:

Home Page
Option 1
Option 2
Option 3

When the user selects "Option 2" and load the related page, the menu should look like:

Home Page
Option 1
Option 2
Option 3

How can we do it? It's quite easy: we will use some ASP and CSS.

The menu

The menu is very simple in our example, but you will be able to apply the following concepts to any menu. Just for the sake of completeness we will consider the following structure:

<ul> <li><a href="homepage.asp">Home Page</a></li> <li><a href="option1.asp">Option 1</a></li> <li><a href="option2.asp">Option 2</a></li> <li><a href="option3.asp">Option 3</a></li> </ul>

The above HTML code should be in your document which will be included on every page.

The ASP part

Now we need to know which is the name of the viewed page. To do so, we are going to use a simple ASP function. Add the following snippet in your menu page (just before or after the <ul> list):

<SCRIPT Language=VBScript RUNAT=SERVER> Function getFileName() Dim lsPath, arPath lsPath = Request.ServerVariables("SCRIPT_NAME") arPath = Split(lsPath, "/") GetFileName =arPath(UBound(arPath,1)) End Function </SCRIPT> <% Dim fileName fileName =(getFileName) %>

As you can see, the "fileName" variable will be the name of the viewed page. We are going to use that variable in order to apply a specific CSS rule to the menu options.

Let's get back to the menu...

We need to change the <ul> list and make it look like:

<ul> <li><a href="homepage.asp"><div <%if fileName="homepage.asp" then%>class="menuSelected"<%end if%>>Home Page</div></a></li> <li><a href="option1.asp"><div <%if fileName="option1.asp" then%>class="menuSelected"<%end if%>>Option 1</div></a></li> <li><a href="option2.asp"><div <%if fileName="option2.asp" then%>class="menuSelected"<%end if%>>Option 2</div></a></li> <li><a href="option3.asp"><div <%if fileName="option3.asp" then%>class="menuSelected"<%end if%>>Option 3</div></a></li> </ul>

That way, a div with class="menuSelected" will be added to the <li> that correspond to the page viewed.
Easy like that!

The CSS

Now you only need to create appropriate CSS rules. In our example I will only create a simple rule for the menuSelected class:

.menuSelected { font-weight: bold; }

It is clear that you can play around with your styles the way you prefer.

Hope you've found the post useful. As usual let me know what you think about it...

ASP: is the client still connected?

2012-01-27T07:00:00.000+01:00

I recently wrote a short post about things not to forget when creating ASP document. One of the general tips I mentioned was about checking if the client is still connected, before starting long procedures like complicated server requests (i.e. SQL queries).
In this article we are going to see how to do it with the response object (IsClientConnected).

The response object

The response object is one very important thing in ASP programming. It basically sends responses from the server to the user. It has a very large list of collections, properties and methods, and it is one of those things we can't live without. We use it for managing cookies (set and/or get), controlling the cache, the buffer, the charset, and we use it for redirects, flushes and so on.
In this post we are going to use it to check if the client is still connected or not.

IsClientConnected

The IsClientConnected property tells us if the client is connected, returning a true/false value. While the syntax is very simple:

response.IsClientConnected

we can use it together with a conditional statement in order to output the client status:

<% If Response.IsClientConnected=true then Response.Write("User connected") else Response.Write("User not connected") end if %>

If we use the above code in any of our ASP document, the only possible output is "User connected". That is because, if we (the users) make the request to the server, it is clear that we are connected!
However, if telling the user if he/she is still connected, has no value at all, it is important to check it before starting a long and resources consuming server operation.
So, instead of outputting the result of the IsClientConnected request, we check it, and eventually go on with our long server request:

<% If Response.IsClientConnected=true then *** our long server request *** end if %>

That's all.

Please let me know what you think about it, using the comments section below.

CSS: fixed header and footer

2012-01-25T07:00:00.001+01:00

Today we are going to create a header and a footer with fixed position. Our page will have a center part which will naturally overflow when needed, while the header and the footer will stay where they are (top and bottom). The content in the central part will eventually go under the header (when scrolled down) and under the footer (if longer than the viewport).
Nothing complicated, but we will need some little CSS tricks.

Let's start.

HTML part

The HTML part is very simple. In the body of our page, we just place three divs: one for the header, one for the footer and one for the content:

<div class="header"> header </div> <div class="content"> content</div> <div class="footer"> footer</div>

Easy, isn't it? Let's see the CSS part

CSS part

The rules for the above divs should be put in the head of your document. The first part is just generic:

body { font-family: Tahoma; font-size: 12px; color: #000000; padding: 86px 0px 144px 0px; margin: 15px; } @media screen{ body>div.footer{ position: fixed; } body>div.header{ position: fixed; } } * html body{ overflow:hidden; }

In the above code, what is to be noted is the padding rule for the body. The values are 86px, 0px, 144px and 0px. The important values are 86px for the header height, and 144px for the footer height.
Now let's place some rules for the container div:

* html .container { height:100%; overflow:auto; }

And then the header and the footer divs:

.header { width: 100%; height: 36px; padding-top: 20px; padding-bottom: 20px; position: absolute; top: 0px; left: 0px; background:white; text-align:center; } .footer { bottom: 0px; left: 0px; text-align: center; width: 100%; position: absolute; height: 72px; background:white; padding-top: 20px; }

Those two parts place the header and footer (absolute positioned) at the top and at the bottom of our page.
We can play with heights, paddings and margins of the divs, and change the padding of the body as well, in order to find a desired solution.
Important: the background of the header and the footer must be set, in order to make the content go under them.

And that is all for today: enjoy!

HTML5: is div dead? Not, really...

2012-01-23T07:00:00.002+01:00

I must admit I am not a great fan of HTML5. First I've tried to understand the new tags and then I've started using them on new projects, sometimes ago. I even contacted the Doctors on HTML5 Doctor to submit some questions and prepare an interview to be published on the web thought. They were obviously too busy and, even if they initially agreed on the interview, they've never got back to me with the answers.
Anyway, in this short post I will try to explain where the new content formatting tags should be used and how they can replace the div tag... if ever.

A page structure

First of all let me show you how we can use the new tags in a page:

<nav>

<aside>

As you can see, following the above schema, every tag has its specific purpose.
In any case, we should remember that even if a tag is named "article", that doesn't mean we have to use it only when strictly dealing with articles.
Let's see every single tag...

<header>
The header is a place where we show general information, possibly repeated on every page. It can contain the company logo, for example.

<nav>
The nav section should contain the web site navigation, such as a menu.

<article>
It's not just articles, in strict sense. This section is where we insert the web site content.

<section>
If articles or, generally speaking, content can be divided into sub parts, <section> is the place where to put those parts. It's clear that we can end up having more than one section.

<aside>
This tag can be used to insert other content not strictly related to the "main" content. For example, it can contain ads, images or other external links.

<footer>
The footer is normally staying at the bottom of a web page and contains - again like the header - information that we usually repeat on every page.
As a side note: footer and header are not to be considered only related to the page or the web site. They can be used as header or footer of an article as well. We then can have more than one footer or header.

What about the div?

As you can see, many of the above tags can replace the div. When we develop web sites, we are used to create containers with divs: for example, a navigation menu is usually contained in a div. Now, we should use <nav>.
So, is the div tag becoming obsolete? Will we use it again?
Well, it is my opinion that the div tag will still be used in new web pages. We can use the above HTM5 tags whenever needed, however we will not forget about our beloved div.
It is clear that when the W3C thought about the above new tags, the idea behind them was rationalise the HTML code, giving a proper name to containers. Generally speaking, it is a good idea and it can help us to maintain the HTML code. However, I humbly do not see anything else about it.
It is certain that you can start use the new tags from now on, but be aware of possible compatibility problems especially with the good old IE (version 8 and below). If you need a good fallback solution see this article.

Ok, that is all.
Please share your idea on the div and the new HTML5 tags: I really like to know what you think...

SQL: the IN operator

2012-01-20T07:00:00.001+01:00

The IN operator can be very useful when we need to perform SQL queries where we need to filter the results with more than one possible value.
Just to understand the power of the IN operator, we need to go back a few steps and see how we usually filter data from a table with the OR operator.

The OR operator

The OR operator is what we normally use to filter data using different values. For example, we can have a table with a list of users. One of the table fields is the first name ("name"). If we want to filter data, and get all the users that have 'John' and 'James' as name, we will create a query like:

SELECT * FROM users WHERE name = 'John' OR name = 'James'

The above query is just an example, but I believe it is the usual way we are used to filter data with multiple values. But it's not the only way of doing it.

The IN operator

Using the IN operator is much easier and, let me say it, more elegant (if that matters!). Let's see how we could write the above query, using it:

SELECT * FROM users WHERE name IN ('John', 'James')

As you can see the query is cleaner. It is important to note that the list of possible matching values is just a comma separated list. I believe you understand the strenght of such a solution. For example, if we have a multiselect listbox on our page, we can join the selected options and pass the values to our query to obtain the results.

Other considerations

There's something more I would like you to consider. When we filter results, we sometimes use the LIKE operator, especially when we need to use only part of a string as filtering value. For example in the first above query, we could filter data by names starting with 'J' or 'S':

SELECT * FROM users WHERE name LIKE 'J%' OR name LIKE 'S%'

On the other hand, the following query won't work the same way:

SELECT * FROM users WHERE name IN ('J%', 'S%')

So what can we do? We can use SOUNDEX. In fact, a correct way for the query using the IN operator will be:

SELECT * FROM users WHERE SOUNDEX(name) IN (SOUNDEX('J'), SOUNDEX('S'))

And that's it. I hope you found the article useful. If you like, please leave a comment in the section below.

Web Development: handheld device emulators

2012-01-18T07:00:00.002+01:00

In the past months I've made some researches about web development and design for handheld devices. The main problem, as we all know, is that we should have most of the devices sold, just to test how our web sites or applications are displayed on them. Does our newly created web site look just right on an iPad or a Galaxy Tab?

To be sure we are doing things properly, we need to test the web creation, and emulators can be of some help. In this post I gathered all the relevant tools, as a repository for future reference.

Android Emulator
"The Android SDK includes a mobile device emulator — a virtual mobile device that runs on your computer. The emulator lets you develop and testAndroid applications without using a physical device."

BlackBerry Simulator
"Use BlackBerry device simulators to demonstrate and test how the BlackBerry device software, screen, keyboard and trackwheel will work with your application. These simulators will also simulate behavior in various wireless network conditions. Device simulators are great tools for testing, training and for use in presentations."

iPad Peek
A simple, but effective, iPad emulator.

iphoney
"A free iPhone web simulator for designers."

Mobile emulator
This is one of the best emulators I have found. It can check for multiple cell phone terminal with different resolutions. Really helpful.

Phone emulator
"Emulate and compare your website across a variety of different phones. This is a one-stop mobile emulation shop! Compare how your site looks on three phones at a time, with the handset, browser and operating system (OS) specifications right beside the emulations. No need to download and install these mobile emulators – all the emulations are performed live online!"

Opera mini simulator
"Below is a live demo of Opera Mini 6.5that functions as it would when installed on a handset."

Opera mobile emulator
"Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging."

testiphone
"This is a web browser based simulator for quickly testing your iPhone web applications. This tool has been so far tested and working using Internet Explorer 7, FireFox 2 and Safari 3."

User agent switcher
"The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser. The extension is available for Firefox and will run on any platform that this browser supports including Windows, Mac OS X and Linux."

HTML: what is a DOM tree?

2012-01-16T07:00:00.000+01:00

If you are a regular visitor of web sites related to coding and web development, you have surely encountered the term "DOM" or, more often, the concept of DOM tree. In this short post we will explore the meaning of DOM and of DOM tree. I will try to put it in the simplest way possible, so that whenever we will encounter the term again in other documents or reference web sites, we will know what they are talking about.

What is DOM?

When we create an HTML page, we know that the document is meant to be understood and processed by a dedicated software. The latter is called "User agent" and usually it is a web browser. When our beloved user agent starts to parse the HTML document, it basically transforms the HTML markup into a DOM tree. DOM is an acronym and it stands for Document Object Model.

The DOM tree

The DOM tree is actually - guess what - a tree. It has a root and branches that are called nodes. Inside nodes there are elements or other nodes. We can visualise a DOM tree exactly like a tree and nodes like branches that can have other branches and so on.

Just to better understand the concept, we can create an HTML page and see how the markup is transformed into a DOM tree.
Consider the following example:

<HTML> <HEAD> <TITLE>HTML Example</TITLE> </HEAD> <BODY> <p>This is a paragraph</p> </BODY> </HTML>

Now let's try to transform the above into a DOM tree!

html head #text: lbspsp title #text: HTML Example #text: lbsp #text: lbsp body #text: lnspsp p #text: This is a paragraph

Ok, as you can see, the above is literally a tree representation of our markup.
The root element of the tree is the HTML element which contains two other elements: head and body. This is a basic HTML structure as we very well know. Text nodes contains spaces (sp) and line breaks (lb), however it must be noted that whitespaces before the head start tag are removed while all whitespaces after the body end tag are placed at the end of the body section.
Following the tree structure we can see that the head element has a title element in it. The title element contains a text node ("HTML Example"). At the same time the body element contains a p element which contains a text node ("This is a paragraph").
As you can see it really is a tree, with a root and branches which might have other branches.

Manipulating the DOM tree

It is possible to manipulate the DOM tree and I'm sure you do it a lot, maybe without knowing it. Because every time we use, for example, JavaScript and we change an element attribute, we are actually manipulating the DOM tree. Many times when we use jQuery we do the same. We can select an element and change its appearance or content: doing so we manipulate the DOM tree.
Every element of the DOM tree is actually an object and we can manipulate, for example, attributes related to those elements.

This concludes our journey. We have explored the DOM tree and I hope I gave you some valuable information about it. Please, again, share your thoughts about it.

jQuery: loading content while user scrolls (infinite scroll)

2012-01-13T07:00:00.000+01:00

There's this new fashion of creating page with infinite scroll. In order to obtain the desired effect, there are some jQuery plug-ins out there.
Here are some.

Load Content While Scrolling With jQuery

"[...]When we are scrolling down a webpage, the code recognizes that you are at the bottom and auto-loads new content."

Lazy Load Plugin for jQuery

"Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them"

Infinite Scroll jQuery Plugin

"This plugin aims to progressively enhance your page. Your navigation/pagination elements should be present in the HTML for non-js users, but the plugin will utilize those links to build out a more rich browsing experience."

jQuery ScrollPagination

"jQuery ScrollPagination plugin has been developed by Anderson Ferminiano for studying purposes, you may use it for free in any project you want, only preserve the credits."

onScrollBeyond and scrollExtend

"There are two plugins encapsulated here – onScrollBeyond, which allows the developer to specify a callback to be run when an element is scrolled beyond (or the end of the document is reached), and scrollExtend, which is simply an implementation of onScrollBeyond that automatically loads new content via ajax when a user scrolls past an element."

Infinite Ajax Scroll, a jQuery plugin

"I am proud to announce my first official open-source jQuery plugin release. Infinite Ajax Scroll is a plugin that turns you existing pagination into an infinite scrolling one, with ease."

ASP: some general tips

2012-01-11T07:00:00.002+01:00

The new year has just began, and you're probably still trying to get things working after your well earned holidays. Don't worry, it won't be a too much complicated article: just a few tips not to forget when programming in ASP.

We will examine tips in no particular order, just as they poured in my mind while I was thinking about how some basic things are easily overlooked while programming. That could happen because we aren't aware of them or just because we might be lazy enough to forget about them.

Ok, take a deep breath and let's start.

Save time with includes

Includes are often overlooked, especially by beginners. Remember that they can save us a lot of time, specifically when we will have to change things afterwards. Keep your main functions and in general anything that you often use (like headers, menus or footers) on external files. Then, include those files when and where they are needed.

Use .asp as extension for includes

We are taught that includes should have an .inc extension. Forget about it and use .asp extensions, just because they will be treated as .asp file and the code will still be run on the server side. This will avoid people from seeing your code (at least at some levels).

Remember the order of execution

In an .asp file, there's a predefined order of execution for anything that the browser is loading. ASP pages are executed following this list:

Server Side Includes (includes are interpreted and executed);
Server Side VBScript code (anything in between <% and %> is then executed);
Client Side JavaScript (finally is the turn of the JavaScript code).

This is important, especially when we try to mix server side code and client side code (maybe VBScript and JavaScript). It might happen that, for example, VBScript conditional statements are not working as expected because of that.

Use option explicit

Option explicit (<%Option Explicit%>) is used when we need to explicitly declare all variables in the page. That looks like as if we want to complicate our lives: not true. Forcing us to declare all variables, avoids variables misspelling errors. Let's say we create a complicated function that uses a variable called XMLstring. We write our code and while taken by the sacred fire of programming we type the variable wrongly as XLMstring at some point. Because the function is quite long, we will spend a lot of time finding that little mistake, while with option explicit the error is easily discovered.

Use subroutines

This is very general, but often overlooked. Use subroutines whenever you can: we do not need to write the same things over and over. We can create a subroutine and then call it when we need it. (More info here).

Use response.flush

We discussed this in the past. With response.flush we can show recordset results, for example, as soon as they start pouring from the server. Don't let the user wait while all the information is gathered from the server. (More on response.flush).

Use response.IsClientConnected

Before starting long and complicated tasks on the server, check if the client is still connected. That will avoid unneeded server workload. If we think of a situation where a user submits a server request and then goes away, being not interested in results, checking if the client is still connected will reduce unnecessary server requests.

Always close connections

Remember to close connections. And we should do it as soon as possible; don't wait and close them at the end of the page. We should open connections near the place where we need to show results; and close them just when we finish showing results. That will decrease server workload.

That's all folk for today. I hope you will still have the strength to share your thoughts about it all. If so, and I will be pleased, use the comments section below.

Web Design: develop an effective navigation menu

2012-01-09T07:00:00.003+01:00

When developing a web site, one thing we should concentrate on is the navigation menu. Considering that probably a menu is the most important part of our web development process, I would like to share some ideas about it, things to keep in mind while we start thinking about an effective navigation menu.

What kind of menu we need

The first thing we should consider - while our project is still a blank and white piece of paper - is: what kind of menu we really need? It seems a dumb question, but we need to focus on what is the true purpose of our - yet to be born - navigation menu.
Knowing what is the general purpose of our web site, lets us concentrate on the structure and content of the menu. For example: if our site is a marketplace, we need to focus on selling products, while if our site is just displaying our production range, we need to focus on products marketing.
The concept is quite clear if we compare two well-known web sites: Apple and Amazon.

Apple web site is mainly focused on displaying the products. Apple brand awareness is very strong, so they don't need to overstate on their trademark.

Apple main menu

As you can see, the Apple logo is just a small icon on the left hand side of the main menu, and it functions as a link to the web site homepage. The rest of the menu is just displaying direct links to specific product ranges. Obviously the "Store" has its importance, however the visitor is inevitably attracted to products names (as a side note, in my opinion the visitor will be mainly pushed to select the "iPhone" button, which is nicely placed at the center of the menu).
The overall look of Apple menu is simple and effective: no submenus, no incredible and flashy effects.
In my opinion the main focus here is on products.

Amazon menu is quite the opposite. Because the primary objective of the site is to sell stuff, the menu is aimed to help the visitor to find the right and desired product.

Amazon main menu

As you can see, the menu is more complex, compared to Apple's. It is divided on sections and subsections based on product ranges (Amazon calls them "Departments"). The visitor is pushed to select a range or a subrange of products, in order to find the desired product. All the menu structure is aimed to the selling of goods.

Choose your items

The moment we know what is the main purpose of our navigation menu, we can start thinking about content. The number of items is quite important, because it can change an effective menu into a non-effective one. My opinion is that, the least number of items, the better. Sometimes it is not possible to have less than 10 items in a navigation menu. In those cases it is better to carefully consider a menu structured on levels and sub-levels.
When we finally have our list of main items, we need to consider their importance. It is usually preferable to have the most important menu element as first choice and then all the other items in order of importance.
As we saw for Apple web site, we can even consider other rules and try to lure visitors to select a specific item by placing it in strategic positions.

Vertical, horizontal or a circle

As we discussed, at this point we have decided the main purpose of the menu and the items we need in it. Now we need to consider its shape.
Usually, web developers use horizontal or vertical menus. The two above examples are quite explicative: Apple menu is horizontal, while Amazon's is vertical. The choice is made considering the web site overall structure, however might have considerable impacts to be considered. For example, an horizontal menu could be too "long" for lower screen resolutions. If we consider tablets and smartphones - for example - we should take care of necessary fallbacks in case of mobile visitors. Horizontal menus should be redesigned for mobile users.
At the same time, vertical menus could be too invasive and they could take to much vertical and horizontal space, being a strong and disturbing element on the page.
Lately, I've considered circular menus which can be a good solution in some situations. They can be used when the home page can be filled up only by the main menu, however we should absolutely consider fallback for mobile users, and we will surely have to design another menu for inside pages, because normally circular menus take up a lot of space.

That ends my short essay on navigation menus. I hope you've found it inspirational and useful.
Please share your thoughts as usual. see you next time!

CSS: iPhone 4 in pure CSS3

2012-01-06T07:00:00.000+01:00

Yesterday I've received an interesting link from a friend of mine. I won't comment it but I would like you to say what you think (in case you still have time and need to do it).
Here's the link:

iPhone 4 in pure CSS3

Enjoy and see you next time...

2011: what happened (internet related main facts)

2012-01-02T07:00:00.001+01:00

2011 has ended and we all truly hope that 2012 will be a better year.
Just for fun, I've gathered some notable facts happened in 2011 that are related to Internet, in some way or another.
Here is the list and I hope you'll enjoy reading it, while we are still relaxing during Christmas holidays.

The facts are presented in no particular order (and surely not by relevance), and they are included just because in some way they caught my attention.

Tsunami in Japan

On March 11 a tsunami hit Japan. Apart from the tragic event and the high number of victims, what really amazed me was the fact that I could follow the movement of the tsunami wave almost in real time.

Messages from social networks were constantly sent across the World Wide Web, and I could follow things when they were happening. Amazing.

iPad2

iPad2 has been released in March. On the first weekend, 500.000 tablets were sold. Together with the incredible sales numbers of iPhone 4 and iPhone 4S, the event definitely marked the beginning of a mass use of handheld devices for Internet browsing.

Now we need to seriously take into account those devices when we develop web sites and applications.

Osama Bin Laden

On May 1, Osama Bin Laden has been killed. I don't want to discuss the fact on a political point of view. What amazed me was those messages sent on the Internet by people that were near the place. It was like a live coverage of the fact (as for the Tsunami in Japan).

Google+

In June, Google introduced Google+. That marked the beginning of a big clash of titans: FaceBook, Twitter and Google. While FaceBook keeps on growing, new Social Networks start their activity every day. Google will be a tough competitor.

Steve Jobs is dead

On October 5, Steve Jobs passed away. It's a sad thing. No doubt, the man was quite particular. Some hated him, some adored him. Apart from that, surely Steve Jobs, in his life, has given a lot to the Internet as we know it.

Internet Explorer

In October, Internet Explorer's share of global browser usage dropped below 50% for the first time in more than a decade. The battle between browsers is getting bigger and stronger every day. What the future will be, we only can guess...

I hope you liked the post. Please share which 2011 events you consider important or should be in any case remembered.

HAPPY NEW YEAR!

2012-01-01T00:00:00.002+01:00

I hope that not many will see this message at exactly the time I scheduled it.
In any case

HAPPY NEW 2012 TO ALL OF YOU

Hoping it will be better than 2011.

CSS: adjacent sibling selectors

2011-12-30T07:00:00.004+01:00

Who knows what adjacent sibling selectors are? Hmmm... it looks like not many of us are aware of their existence... It is quite true that considering all possible CSS selectors, adjacent sibling selectors are the most unknown and rarely used even by expert web developers. Why? Don't know... Nevertheless they are quite useful and efficient in applying CSS rules to specific elements.

I will show you an example and we will explore adjacent sibling selectors use.

What are adjacent sibling selectors?

We can define adjacent sibling selectors as stated by the W3C site:

"Adjacent sibling selectors have the following syntax: E1 + E2,where E2 is the subject of the selector. The selector matches if E1and E2 share the same parent in the document tree and E1 immediatelyprecedes E2,ignoring non-element nodes (such as text nodes and comments)." (quote from W3C)

It is quite simple to understand how such selectors can became handy.
A possible use is related to image captions. Let's say we use images all over our page and, at the same time, we have different div elements which contain image caption or other text. If we want to apply a CSS rule just to image captions, we can benefit from the adjacent sibling selector, because we will style only <div> tags that are preceded by <img> tags. Something like:

img + div { color: #FF0000; }

With the above rule, all the image captions will have a red text.

A live example

We are going to style specific adjacent tags. We are going to have two headings (note: I am using <h5> heading tags because of the blogger platform; if I use <h1> all the page will be with red text!). The first is followed by a span element, while the second is followed by a div element. We want to make the text inside the div in red.

First heading
This is a span

Second heading
This is a div

Let's see the code behind that.
First of all the CSS rule:

<style type="text/css"> h5+div { color: #FF0000; } </style>

And then the HTML:

<h5>First heading</h5> <span>This is a span</span> <br><br> <h5>Second heading</h5> <div>This is a div</div>

Very simple isn't it?

Now tell me you did know about it.
Share your experience, please, using the comments section below.

ASP: simple CAPTCHA method

2011-12-28T07:00:00.004+01:00

I'm sure you know what CAPTCHAs are. They usually are not very welcomed when filling in a form, but the idea behind them is to at least reduce the possibility of automatic non-human procedures submitting the form itself. The main point is to recognise if who or what is submitting a request is really a human or not.

The solution I'm presenting here is very simple and it is not unbreakable. Infact, today we surely need a highly sophisticated CAPTCHA procedure in order to be completely sure of its effectiveness.
On the other hand, we can use the solution here presented whenever we need a little bit more security.
We are going to use ASP and GUIDs (Globally Unique Identifier).

Follow me, please.

GUIDs

A GUID is a 16-byte string which is unique. We have seen how to create unique identifiers with SQL, and today we are basically doing the same without SQL.
GUIDs are very useful and they can be used in various situations. For instance, we can use them in order to create temporary folders on the server. Or maybe, when suggesting strong passwords in a registration form.
In our example we are going to use GUID in order to create an 8 characters long string to be used in a CAPTCHA system.

The ASP part

The asp part of the example is quite simple:

<% Dim GUID GUID = Server.CreateObject("Scriptlet.Typelib").GUID GUID = Replace(GUID, "{", "") GUID = Left(GUID, 8) %>

We basically create a GUID using the Scriptlet.Typelib object.
We then remove the { at the beginning of the resulting string.
Finally we consider only the first 8 characters (we can obviously decide to use longer or shorter CAPTCHAs... it's up to you).

The HTML

In the form, we now need to show the CAPTCHA. In order to protect it a bit, we are going to show the GUID inside an input box which will be protected and disabled. That will prevent the possibility of selecting the text inside the input box.

<input name="guid" type="text" disabled id="guid" value="<%=GUID%>" size="8" maxlength="8" readonly="true">

Further considerations

It is clear that the above method can't be considered completely secure. It is no coincidence if advance CAPTCHA systems use images and not text. That is because, for example, text is easily readable from the code view of the page. Sophisticated (or not so much sophisticated) automated software can easily bypass such CAPTCHA systems, as you may understand.
So, please, consider the above as a very simple implementation of CAPTCHAs, and not a completely secure one.

If you've found other and possibly more secure CAPTCHA systems, please share your ideas using the comments section below.
In the meantime, have a splendid day.

Are you working today?

2011-12-26T07:00:00.002+01:00

Christmas day is always a great day to me: finally the period before it, is finished. I always had problems in finding the right present for friends and family. Now everything's gone and I'm out of the office... I can relax and spend some time with my two children and my wife...

I hope you too had a great time. And I hope your holidays will be fantastic...

Regular posting will resume on the 28th. In the meantime... just enjoy your family and friends!

Merry Christmas

2011-12-25T00:00:00.000+01:00

MERRY CHRISTMAS

from

Web Design: mistakes in big companies websites

2011-12-23T07:00:00.002+01:00

Christmas is near, and I know that we all need to rest a bit, without thinking about coding and programming.
That is why, today, I publish a post which might raise our spirits: I'll show you small or big mistakes made by web developers in big companies websites.
That will be fun!
I browsed a lot of websites on November the 25th 2011... all done in one morning. I screen-captured the mistakes while using Firefox 8.0 with a 1280x1024 screen resolution.

I will show you glitches in the following websites (strictly in alphabetical order):

cnn
coca-cola
eBay (Italy)
flickr
google (reader page)
hp
kaspersky
nintendo
philips
twitter

Ready? Enjoy yourself... with a bit of pride, because we know we do not make such mistakes!

CNN

http://edition.cnn.com/

The above is a part of the TV box on CNN homepage. Where is the text flowing?

Coca-Cola

http://www.coca-cola.com/index.jsp

Look at the menu in Coca-Cola homepage... where is "Us" in "Contact Us" going?

eBay

http://www.ebay.it/

This is a bit specific: in eBay Italy homepage, at the bottom, on the left, the Italian flag is going where it shouldn't.

Flickr

http://www.flickr.com/

What are those two poor icons (Twitter and Facebook) doing there? They are not on the right, but they are not on the left as well... just there in middle of nowhere...

Google Reader

http://www.google.it/reader

On the main toolbar of the Google Reader page there are some buttons. Look at the two shown in the picture: can you spot the difference? I bet you do - and it's not the text! It might even be that it was meant like that. One thing for sure: it doesn't look right.

http://www.shopping.hp.com/webapp/shopping/store_access.do?template_type=landing&landing=notebooks

This is the main toolbar, at the top of Hp notebooks page. This is very small and maybe we could forgive who haven't spotted it. Take a close look at the "in" in "Sign in"... why is it going on a new line? We have plenty of space on the right, don't we?

Kaspersky

http://www.kaspersky.com/

What about the menu on the right hand side. Believe me, it could have been on one line...

Nintendo

http://www.nintendo.com/games/

Why the new Tintin game has such a long name? Couldn't they choose a shorter title?

Philips

http://www.philips.co.uk/c/televisions/33092/cat/#/overview

Can you read what Philips wants us to know about their TV set?

Twitter

http://twitter.com/

Twitter has too many language options! They can't stay on one line, but surely could be styled better!

Ok, folks, I hope you enjoyed the post and I hope you had the possibility of boosting your web developer ego a bit.
Have a nice day!

CSS: @import at-rule

2011-12-21T07:00:00.004+01:00

Following my previous post about progressive enhancement, today I would like to discuss the CSS @import at-rule.

The @import at-rule allows us to link external style rules. Basically, using it we can import rules from other stylesheets. The rule must be the first rule of a stylesheet (apart from the @charset at-rule). The @import rule can contain media queries (comma separated) in order to import specific media rules.

The syntax

As I said before, the rule have to be placed at the beginning of a stylesheet. Its syntax is:

@import url comma-separated-media-queries;

where:
url = the path of the stylesheet we want to import;
comma-separated-media-queries = the list of media to which the imported rules will be applied (screen, print, mobile etc). If the target browser doesn't support the related media, the rules won't be applied at all.

Examples

Examples of @import at-rule are:

@import 'layout.css'; @import url ('layout.css'); @import url ("layout.css"); @import url ('layout.css') print, mobile;

Link

If we do not want to use the @import at-rule, we usually link the external stylesheet with the following code, placed in the head of the document:

<link href="layout.css" type="text/css">

The above is the same as:

<style type="text/css"> @import url("layout.css"); </style>

So, basically the two ways of linking an external stylesheet are the same. Even media queries will work the same way. Using the link, we need to use something like:

<link href="layout.css" type"text/css" media="print">

While with @import, we use:

<style type="text/css"> @import url("layout.css") print; </style>

The two methods are completely interchangeable, as you can see. So which one should we use?

So what?

Well, it depends. Considering that the two methods are identical, I believe I can say that it's up to you. The only thing that seems to impact on the user experience, considering the two methods, is how style rules are applied. Infact it seems that rules are loaded following a different pattern with @import, and CSS rules are applied sometimes even after the page is already loaded and displayed.
Many consider the two methods together: a link is used on the page to import a generic stylesheet which contains specific @import at-rules. For those using this solution, it gives them more flexibility in adding new specific stylesheet, without having to revise all the web site pages.
On the compatibility side, we shouldn't worry because all recent browsers understand the @import at-rule (including IE6 and IE7).

What do you use? @import or link? Share your experience, please.

Web Development: what I think about progressive enhancement

2011-12-19T07:00:00.001+01:00

Since the beginning of web development, programmers have had the duty to guarantee a correct and possibly full user experience to all the web site visitors, regardless the browser that they use.
If we stop for a second and think about the above statement, we can probably understand how that is a very big problem. Allow me a strange similarity: it is as if we need to design a new shoe that fits all sizes. It surely can be done. It involves a lot of work and it won't probably satisfy all the users.

Two methods to solve the problem
Web developers normally use two different approaches in order to face the issue: the first and older one is graceful degradation. A bit newer method is called progressive enhancement.
The two methods are easily confused, but they have a big difference: graceful degradation focuses on browsers capability, while progressive enhancement focuses on content.

There are many documents discussing the two developing methods (and most notably Understanding Progressive Enhancement by Aaron Gustafson) and I don't think I will explain all the concepts here. However I need to bring your attention on one thing. In progressive enhancement, it is quite common the use of multiple stylesheets, giving them a strict structure.

Progressive enhancement and CSS
As an example (taken from the aforementioned article), imagine we have one homepage, named page.html. That page has three related stylesheets: typography.css, layout.css and color.css. That is already an idea: according to the progressive enhancement theory, dividing CSS rules in different stylesheets according to their purposes, simplifies the web developer work (CSS rules creation and especially maintenance).
A second level or group of stylesheets will be linked only to the layout.css stylesheet: screen.css, print.css and mobile.css. Those three new stylesheets will guarantee a correct web site display for different media (screen, print and mobile).
The above structure could be all we need, but in many cases it could be not enough. Thus our stylesheets structure and the relationship between them can became more complex and difficult to maintain.

What I think
I can't say I'm a full supporter of the progressive enhancement method. And that because complex websites will easily have a very complex stylesheet structure. And since progressive enhancement should make things easier for us, I believe we will easily loose that advantage when trying to elaborate the stylesheets structure.
It is clear that there's more behind the progressive enhancement method. But basically the more I read about it, the more I become skeptical about its usefulness.
As an example, consider, for a moment, the above stylesheet structure and let's say we need to change a color rule. It could be that we end up opening and modifying more than one CSS file. In more complex situations, it could lead us to revise five or six files, while without the mentioned stylesheets structure, we might need to change one or two files.
Applying the progressive enhancement theory to media makes more sense to me. Especially today, when we need to satisfy handheld devices users (tablets and smartphones). But again, it seems to me that a strict planning of the CSS structure is needed before starting to develop the web site. During the preliminary work, it is advisable to consider:

if such a structure is needed,
if it is useful and it gives us advantages,
and what are the eventual drawbacks.

We probably conclude that progressive enhancement doesn't give us enough advantages compared to the overwork needed to implement it.

I would really like to know your idea on the topic, so please leave a comment.

ASP: how to create a reusable function to query databases

2011-12-16T07:00:00.017+01:00

Today we are going to create something probably out of the ordinary. We will create two reusable functions (with parameters) in order to query a database.
The first function will open a recordset and execute a query. It will accept 3 parameters: recordset name, connection and query string.
The second function will close the recordset. It will accept 1 parameter: recordset name.

In order to use the parametrised functions, we will benefit from the Execute() VBScript function.
So, before building the two functions, let's try to understand Execute().

Execute()
The Execute() function can execute anything that is passed as parameter. It is more complicate to explain than to see it in action. Let's see an example:

<% Dim StringVar StringVar = "response.write 1" Execute(StringVar) %>

The output of the above is 1. The Execute() function is actually executing our response.write.
As a side note, consider that Execute() works like Eval()... but that's another story.
However, in order to have parameters for our two recordset functions, we are going to use Execute().

Connex

We are now building the connex function, which will open a recordset and perform a query. I want to explain it step by step so that everything is clear.

<% function connex(rsn, conn, query)

The function will accept three parameters, as said:
1) rsn = the recordset name;
2) conn = the connection string;
3) query = the query string.

Dim openRS openRS = "openRS" & rsn

We set a variable called openRS which will be our recordset name.
If we pass rsn as "Test", openRS will be "openRSTest" which will be a unique recordset name.

execute "Set " & openRS & " = Server.CreateObject(""ADODB.Recordset"")"

We use the Execute() function in order to create the server object (our recordset).
Please note the use of double quotes.

execute openRS & ".ActiveConnection = """ & conn & """"

Here we set the active connection.

execute openRS & ".Source = """ & query & """"

That is our query.

execute openRS & ".CursorType = 0" execute openRS & ".CursorLocation = 2" execute openRS & ".LockType = 1" execute openRS & ".Open()" execute openRS & "_numRows = 0"

Finally we set the cursor type, the location, lock type and we open the recordset. And then we set the number of rows to 0, because we might need to paginate results.

end function %>

The above is the function end.
The complete function will look like:

<% function connex(rsn, conn, query) Dim openRS openRS = "openRS" & rsn execute "Set " & openRS & " = Server.CreateObject(""ADODB.Recordset"")" execute openRS & ".ActiveConnection = """ & conn & """" execute openRS & ".CursorType = 0" execute openRS & ".CursorLocation = 2" execute openRS & ".LockType = 1" execute openRS & ".Open()" execute openRS & "_numRows = 0" end function %>

Connclose

The second function (connclose) is used to close the recordset. Again I will explain it step by step.

<% function conclose(rsnc)

The function accepts one parameter: rsnc which is the name of the recordset to be closed.

Dim closeRS closeRS = "openRS" & rsnc

In the above section we are going to build the closeRS variable which will be identical to the openRS variable seen in the connex function. We need to be sure to close the same recordset we opened before.

execute closeRS &".Close()" execute closeRS &".ActiveConnection.close()" execute "Set " & closeRS &".ActiveConnection = Nothing" execute "Set " & closeRS &"= Nothing"

With the above code we close the recordset and the active connection, then we set the active connection and the recordset to nothing. Job done!

end function %>

And that is the end of our function.
The complete code:

<% function conclose(rsnc) Dim closeRS closeRS = "openRS" & rsnc execute closeRS &".Close()" execute closeRS &".ActiveConnection.close()" execute "Set " & closeRS &".ActiveConnection = Nothing" execute "Set " & closeRS &"= Nothing" end function %>

How to use the functions

The best way to implement the whole experiment is to use an inclusion. We put all the above code in an ASP page and call it connex.asp. Place the file where you prefer - in our example we will place it in a folder named "connections".
In the page where we want to use the functions, in the head of the document, we include the connex.asp file:

At the beginning of the page, we set some variables:

<% Dim rsn Dim conn Dim query Dim rsnc %>

Those are the functions parameters.
Wherever we need to call the connex function, we place the following snippet:

<% conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/path-to/database.mdb") query = "SELECT * FROM table" rsn = "table" call connex(rsn, conn, query) %>

The above is just an example, as you can see.
The result will be a recordset called "openRStable". So if we want to interact with the recordset, we need to use that name. For example when displaying results, we use:

<% = openRStable.Fields.Item("TableField1").Value %>

When we need to close the connection, we use the conclose function:

<% rsnc = "table" call conclose(rsnc) %>

Easy, isn't it?

Possible advantages

With the use of parametrised functions, we do not need to write the same code more than once. If we create an asp file with the functions code, we can include it where we need it and call it when we need it.
Because we pass parameters to the functions, we might decide to create global variables, so that we do not need to pass the connection string every time, for example. The same for the other variables.
I think that the above exercise is quite a good starting point, but I'm sure it can be refined and improved. So, it's up to you!

If you need more information on the functions or you want to share your experience, please use the comments section below.
Happy coding.

ASP: a tutorial for beginners

2011-12-14T07:00:00.007+01:00

What is ASP? Which is ASP basic syntax? Objects, methods, properties, events and collections?
AH! Do we really know what we are talking about?

The following post is just a quick reference guide for all those things. It is meant for beginners, but I believe that even experienced programmers might find it useful... just to check if everything we know is correct.

What is ASP?

ASP stands for Active Server Page. In a previous post I've already defined it as a scripting engine. That is because we usually and wrongfully consider ASP as a programming language.
We can use different programming languages in ASP pages, such as VBScript or JScript. Usually, web developers use VBScript, which is ASP default language.
The ASP engine is managed by IIS (Internet Information Services), working in a MS Windows environment. I know that it is possible to use ASP with other web server applications such as Apache.
It is worth mentioning that ASP is working with PWS as well. PWS (Personal Web Server) is a small but fully functional version of IIS and it was available on older operating systems like WIN 95 and 98 (oh what a leap in the past!).

Basic syntax

The basic syntax of ASP commands is:

<% ...asp commands... %>

Inside the <% and %> we insert server scripts which are run on the server side. That is a great plus, because it is the server that is doing all the dirty jobs. If we try to see an ASP page code, all we will see is the HTML: the scripts will not be visible.

Objects, methods, properties, events, collections

ASP commands use objects. Objects may have methods, properties, events and collections. Now this is getting complicated, isn't it? Let's try to understand it all.
ASP objects are:

Application;
Response;
ObjectContext;
Session;
ASPError;
Request;
Server.

Every object might use a method, have a property, might work on events or use a collection.
I tried to summarise all the relation between objects and methods, properties, events or collections in the following table:

Object	Method	Property	Event	Collection
Application	Contents.Remove Contents.removeAll Lock Unlock		OnEnd OnStart	Contents StaticObjects
Response	AddHeader AppendToLog BinaryWrite Clear End Flush Redirect Write	Buffer CacheControl CharSet ContentType Expires ExpiresAbsolute IsClientConnected Status		CodePage Cookies LCID
ObjectContext	SetAbort SetComplete		OnTransactionAbort OnTransactionCommit
Session	Abandon Contents.Remove Contents.removeAll	CodePage LCID SessionID Timeout	OnEnd OnStart	Contents StaticObjects
ASPError		ASPCode ASPDescription Category Column Description File Line Number Source
Request	BinaryRead	TotalBytes		ClientCertificate Cookies Form QueryString ServerVariables
Server	CreateObject Execute GetLastError HTMLEncode MapPath Transefer URLEncode	ScriptTimeout

The above is just a part of the possible ASP commands. The Server.CreateObject command is a good example, because using it we can create other objects like the FileSystemObject which has properties and methods:

Object	Method	Property
FileSystemObject	BuildPath CopyFile CopyFolder CreateFolder CreateTextFile DeleteFile DeleteFolder DriveExists FileExists FolderExists GetAbsolutePathName GetBaseName GetDrive GetDriveName GetExtensionName GetFile GetFileName GetFolder GetParentFolderName GetSpecialFolder GetTempName MoveFile MoveFolder OpenTextFile	Drives

The FileSystemObject has, for example a method called CreateTextFile which has properties and methods. The same for the GetDrive, or the GetFile methods.

The Server.CreateObject can create ADO objects (with their properties, methods and collections) which we use to query databases. We use for example the ADODB.Command in order to execute query against a database.

Simplify, please...

Yes, I know. It seems there's no logic in it, but, believe me, there is. What we basically need to understand is that it is all related to objects which have properties, methods and collections. To simplify it a bit, we have ready-made objects, or we can "create" other objects. Ok, I already hear screams from experienced programmers. I know I'm trying to simplify the whole thing a little too much...

Conclusions

In order to understand ASP we can use different approaches. I believe that trying to squeeze all ASP concepts in a single post is almost impossibile. There are many books available that will guide a beginner step by step and that will explain everything about ASP. At the same time, we can browse many web sites that try to cover all the ASP related topics.
So, the first possible approach is to look into those books or web sites.
Another approach is to look for solutions when an issue arises. The usual path is something like: issue -> search solution -> find object, methods etc that will provide a solution -> understand in depth the specific solution (object, method etc) -> apply the solution.
The second approach is the one that I've followed in the past. When we will get enough experience, we can try to organise mentally all the acquired knowledge. That's what I suggest.

I hope that the above post will help you in starting to use ASP or in re-organising your thoughts about it. I would like you to share your ideas on the topic, so please use the comments section below.
In the mean time, have a nice day and keep on reading.

Web Design: what to consider when re-designing a web site

2011-12-12T07:00:00.001+01:00

I've been recently asked to re-design a web site. I had to meet some people and talk about it. The company wanted a completely new web site, while the engine behind (SQL database) should have stayed.
As you may understand, that is a completely different situation compared to the development of a new web site. There are some things to be considered when approaching a totally new site that do not apply in a re-design. I'm talking about technical things like domain management, web site hosting and platform used; or marketing stuff like commercial targets, brand awareness program and other boring things.
In our case the story is different: many of the above questions have been already asked and settled. For this reason, I have created a list of matters that needed to be discussed and that I think might be useful to all those developers in the same situation.

So, here is my list of practical things to consider (and ask) when re-designing a web site.

First of all, let me stress out that the following list hasn't got an order of importance, because a matter might have different significance and consequence according to which objective we want to achieve. I say "we", because I believe that the designer has to step into the decisions making process, even if the web site owner has a strong will and is a decision maker.
At the same time, the following list is not to be considered complete. Different situations might require different topic to be explored.

Colour palette

Because we need to re-design the web site, we need to know which colour palette we are going to use. The colours will have a deep impact on the overall web site design.

General layout

The web site structure is another big issue. Should we use a static, a fluid or a mixed layout? It's not a free choice and the chosen structure will determine not only the web site basic architecture, but the amount of coding work needed as well.

Border radius

It seems trivial, but today it has its importance. Do we prefer rounded or sharp corners? This is probably an ongoing argument. Whatever we decide to use, it should be considered at the beginning, because for example, rounded corners will have a considerable effect on development time and cost. As a side note, here you should discuss box shadows as well. The discussion might lead to browser compatibility, but do not go astray, stick to the topic: we will discuss compatibility afterward.

Sectioned layout or not
The moment we decide the overall layout of the web site, we need to consider where we are going to insert content. It is difficult to pre-determine how we are going to display the content, but we should start to brainstorm on the way we are going to organize it. For example, we can propose a tabbed solution, or a columns layout, or, again, a not restrained layout. See what the other think about it and start imagining it as soon as you can.

Header and footer

The issue comes directly from the previous point. We will probably focus more on footers than headers, however it is better to define what we need and start thinking about how to develop the chosen solution.

Whitespace
Whitespace might sound like a technical problem. The people we are talking to, probably will not understand what we are saying, however it is important to explain the whitespace concept to them. Why? A balanced whitespace encreases readability and improves the user experience. Considering that people tend to express some sort of "vacuum fear", we surely need to immediately stop them from filling every possibile blank space.
That is because we need to explain the importance of whitespace.

Main menu elements

Because the web site is already there, we can discuss menu elements. Should we keep them all or some elements are not necessary any more? Should we re-organise them?
I think you got the point.

Menu elements order

This is probably more a subsection of the above, however, we should consider re-ordering menu elements. The importance of one element might have been decreased in time and now we need to re-consider what was the first choice. Remember that elements should go from the most important to the less important.

Main menu style

Again on menus! Yes, we need to decide how the menu will look like. Horizontal? Vertical? Structured? Circular? Well, here the choices are many. Discuss the menu style and its placement in your structure.

Icons

Images are always important in a web site. Icons too. And we can use icons in menus as well. We should talk about the style of icons, how should they look like and (even if it seems trivial) how big or small they should be. In my experience, we end up trying to stop others from filling our homepage with icons (see "vacuum fear" again!).

Languages

Yes languages! We need to determine how many languages the web site will support. If originally, there was only one or two languages, the problem is not that big. However, we should consider how to deal with regional and language settings and changing. For example, we need to take into account how the user will be able to select a different language: from the main menu? Will there be a separate menu for that?
Ok, you got the point, I believe.

Typography

Now... this is big! Typography is a huge issue in web sites and web designers are well aware of that. When we talk to deciders, they probably do not understand what's behind font management. However, our main task is to minimize the number of proposed fonts and we should immediately try to eliminate non standard typography as much as we can. I know there are situations where we do need to use non stardard fonts, but keep in mind that it will make our work more complex and time consuming. Most of the times, with little benefit.
Anyway, we should choose the right set of fonts, the style that we will apply to headings, text and so on.

Target devices

Another big issue! We need to understand which are the target devices. They will probably answer: "All of them, including smartphones and tablets". Well, good luck! I think that a good explanation on the matter is needed. For example, it should be clear what a cross device compatibility means in term of time and cost. Because the old web site was surely not meant for new generation devices, we should explore the real need for a full compatibility. In this case a good web site statistics report can help us in determine if the site has visitors using such devices. If not, consider avoiding the - probably - unneeded overwork. Or, maybe, you really need to create such cross device compatibility, just because the company really wants to.
In any case, we should discuss it, explain it and take a decision about it.

Required compatibility

Again a big issue... and a technical one too. This will be difficult to explain, but we need to stress out the difficulties of a complete browser compatibility.
First of all, remember that a web site won't look the same in any browser. We need to determine which browsers, which versions and which screen resolutions we will support.
The company will probably ask for a full compatibility: it is your task to make them understand what that means in terms of cost and time. Believe me, this will be a very difficult task, however we should be clear on the issue from the beginning, because not considering compatibility will lead to complaints.

RSS and social networks

This topic is the new fashion, especially when talking about social networks. I believe you understand what I mean here. We need to decide if we need a connection to social networks or not. I am sure that in most of the cases we do need to create a bridge between the web site and places like Facebook, Twitter and so on.
The work behind it could be huge, but we need to explore the issue at the beginning of our re-design plan.
That could lead us to open a fan page on Facebook, or create a company account on Twitter, or not, however the issue should be fully explained to the company. I understand I could write a whole article on the matter, but it is not the topic of this post. However, keep it in mind: it is very important.

Conclusion

The above topics are the ones I usually discuss with the company representatives.

Everyone will put ideas on the table.
With someone we will talk easily, while someone will try to embarass us with - usually - stupid questions disguised as very geeky issues.
Stay calm and quietly explain your points.
Ask questions.
Provide strong answers.
Be prepare to stand for your ideas and to accept not-so-welcomed decisions.
Write down reports of meetings and distribute a copy of them to all participants. Ask them to provide insights, comments and questions.

It will be a fight, but you will win and a new shiny web site will born.

Let me know your experience, as usual: I will deeply appreciate it.

HTML: terms and syntax (a tutorial for beginners)

2011-12-09T07:00:00.004+01:00

At the end of October I published a post about CSS terminology which explained the basic usage of Cascading Style Sheets and technical terms used to identify and explain code parts.
Today we are going to do the same for HTML, because I feel that sometimes terms are not properly used, and we surely need to make things clear.
The following will be a short and undoubtedly not complete journey through the basic HTML programming. If you are a little bit experienced, you might find it boring... however, are we fully sure we use the correct terminology?

Follow me and see for yourself.

HTML
HTML stands for HyperText Markup Language and it is the programming language used to build web pages. The first version of HTML was defined in 1991. Today we often talk, write and discuss HTML latest version: HTML5.

The programming language is quite intuitive and it mainly consists of tags.

Tags

To show content on a web page we need to use tags. Basically every element in web page is composed by tags. An element is usually made of tag pairs. So here we go with the first terms! Let's try to explain tags with an example:

<p>Welcome to The Web Thought</p>

<p> is the start tag;
Welcome to the Web Thought is the content;
</p> is the end tag (made of a slash "/" and the tag name again);
<p>Welcome to The Web Thought</p> is an element.
There are HTML elements that do not have a start tag and an end tag. Those elements consists in only one tag (for example the <br> element).

Attributes

Every element might have attributes to better define its meaning. Attributes go in the start tag of an element and usually they consist of a name and a value enclosed in quotes.

<tagname attribute="value">content</tagname>

Now, something you might not know: quotes around values are not always needed, infact if the value has no space or any special characters like " ' ` = < and >, we can remove the quotes.
Another thing: we can use double quotes or single quotes, it doesn't matter.

HTML basic structure

The basic structure of an HTML page is made of the following elements:

doctype
html
head
body

So, we can create a simple HTML page like:

<!doctype html> <html> <head> head content </head <body> body content </body> </html>

The head content is different from the body content. The body content is where we want to insert our page elements, while in the head we are going to insert the document metadata.

Document metadata

The document metadata consists in a collection of information for the HTML document. The head element usually contains the document title, the character settings, the document description, keywords, scripts and information on stylesheets.
We shouldn't overlook the importance of the head element. First of all, it is to be noted that the document metadata will not be shown on the page (while the body content is). Secondly, in the head is where we insert references to JavaScript libraries such as jQuery, references to external stylesheets, we embed stylesheets and document related metadata such as title, keywords and so on.

Body content

In the body we can insert all the HTML elements that will generate the document as displayed by the browser. The general HTML structure should always be clear and immediately recognisable while programming. Indentation, for example, should be used to preserve the flowing of page elements in code view while consistent closing tags should follow a nesting structure.
An example:

<div> <font color="#000000">Welcome to The Web Thought </font> </div>

The above code represents a good way of creating a document structure. Or, being more strict:

<div> <font color="#000000"> Welcome to The Web Thought </font> </div>

Remember that the more accurate is the coding process in terms of clarity, the easier it will be to understand and maintain the code itself.

Ok folks!, I think that's enough for today. I believe you've been bored enough.
Have a nice day and share your thoughts as usual!

CSS: how to change an element style with JavaScript

2011-12-07T07:00:00.013+01:00

It is possible to manipulate a CSS rule applied to a DOM element using JavaScript. The solution can be quite effective, because we can change styles according to specific events in our page.

For example, when a button is pressed, or an option is chosen, we can trigger an event that will change a CSS property's value.

In the following post, we will change the background colour for a text, by pressing the text itself. Then we will create another trigger that will change the text colour back to default, again.

JavaScript

The JavaScript code is very simple and with just a few lines, we can control and change the applied style. In the head of our document, we will insert the following snippet:

<script type="text/javascript"> function changeStyle(elem) { elem.style.background = 'blue'; } function defaultStyle(elemId) { elem = document.getElementById(elemId); elem.style.background = 'white'; } </script>

The first function ("changeStyle") will turn the background of our element to blue.
The second function ("defaultStyle") will turn the background colour of our element to the default white.
The style object is used to change a CSS property of an element. Its syntax is:

element.style.CSS_property = value

where:

element is what we want to alter, we can determine it using its id (getElementById);
CSS_property is the property we want to apply to the element (color, background etc);
value is the value for the above property.

CSS

We then need to style our element to the default value. To do so, we insert - again in the head of our document - the related style. In our example the element will have an id="changingColour".

<style type="text/css"> #changingColour { border: solid blue 2px; } </style>

HTML

Now we need to insert our element - the one that will change background colour when clicked- and a "reset" button - clicked when we need to reset the colour to default.
To trigger the events, we will use the onClick event.
Put the following code in the body section of your document:

<div id="changingColour" onclick="changeStyle(this)";> Click here to change background colour. </div> <button onclick="defaultStyle('changingColour');">Reset background colour</button>

And that is all. Very simple and effective.

Other things we might do...

The above example is very basic. However we can use it to alter other styles like the text colour, borders and so on.
Again, in the presented code, the user triggers the style changing by clicking on the text or on a button, however we can decide to trigger the functions on different events that better suit our needs.
Just follow your fantasy and work on it.

Oh, by the way, if you develop a more complex solution, please do share it with us by using the comment section.

CSS: how to create a stylish search input box

2011-12-05T07:00:00.002+01:00

The search capability in modern web sites is an established feature. Visitors should always have the possibility to look for text or else, and search a whole site for specific things.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.

In the following post, we will create a search form and style it a bit. The resulting box will be:

Search Box

Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.

First of all the HTML

The HTML behind the search box is plain and simple. We need an input box and a button. The image inside the button will be something like:

Magnifying Glass

I know it is quite small, but it's all we need.(The above png is meant to be displayed on light background, that is why it won't look great on this page).

The search box, as said, is an input box and a button, all wrapped inside a container div. Let's see the code:

<div class="container"> <form> <input name="search" type="text" class="search" value="Search..."><button name="button" title="Search" class="button"><img src="l.png" alt="Search" class="mg"></button> </form> </div>

In details, the div has a class="container".
The form has no attribute in the example, you can add them according to your needs.
The input tag has a class="search".
The button tag has a class="button".
And finally the image (l.png) has a class="mg".

We are going to create rules for the container, the search box, the button and the image.

The CSS

Let's start from the beginning: the container div:

<style type="text/css"> .container { margin: 0px; padding: 0px; display: inline; }

Nothing special here.
The input box ("search" class):

.search { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: none; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; background-color: #EEEEEE; height: 20px; margin: 0px; padding: 0px; font-size: 14px; float: left; display: inline; vertical-align: middle; }

Here we set the borders which are all the same except for the right hand side one. We then set the background color to a light grey (#EEEEEE).
The height is set to 20px with no margin and no padding. Note that we float the box to the left.
Now the button ("button" class):

.button { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: none; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; margin: 0px; padding: 0px; cursor: pointer; height: 22px; width: 20px; vertical-align: middle; font-size: 12px; background-color: #EEEEEE; float: left; display: inline; }

The button has styles very similar to the input box. This time, the only missing border is the left hand side one, so that our search box will look like as whole piece. Note that the height is set to 22px: it is important that the button height is greater than the input box height. The button height value should always be the input box value + the top and bottom border heights (in our example is 20+1+1).
Now the image ("mg" class):

.mg { margin: 0px; padding: 0px; }

As you can see, the CSS is not that complicated. The final result will work in FireFox, IE 6+, Opera, Safari and Chrome.

Hope you enjoyed the above. Let me know what you think about it.

JavaScript: validate forms with Regular Expressions (RegEx)

2011-12-02T07:00:00.009+01:00

I know I've been posting a lot on forms and validation recently, however we should all agree on the fact that form validation is really a serious problem for programmers.

When a user submit data to our database, the first thing we should consider is to protect the destination. Our database is waiting for specific data and, for example, a text string must not be submitted to a smalldate field.
On the other hand, we should provide a complete and efficient way to help the user in filling in the form. Specifically in commercial situations, if we want the visitors to conclude painlessly a commercial transaction, we should make things the easiest possible way for him/her.

When we check what the user is submitting, we can be sure that the birth date or the credit card expiration date is truly a valid date - for the user protection and security and for the web site owner who needs to be sure that everything works smoothly.

In the following example, we are going to validate emails, however, by changing the regular expression, we can check almost anything.
In the following example we use RegEx in a short JavaScript function.

What we need is just submit the email address to the function, and we will receive a true or false response.
Let's see the function:

function validate(email){ var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; if(filter.test(email)){ return true; } else{ return false; } }

Just a few side notes on the above function:
1) the target browser must be JavaScript enabled (and that's obvious);
2) if you can use HTML5... well, use it with type="email" (see here);
3) the RegEx used is just a simple one. A RFC 2822 compliant expression is much more complicated.

If you want to explore more, see the Regular Expression site where you can find expressions for:

numeric ranges;
floating point numbers;
email addresses;
dates;
credit card numbers;
matching complete line;
deleting duplicate lines;
programming;
two near words.

Use the above code wisely and enjoy!

jQuery: preloaders!

2011-11-30T07:00:00.000+01:00

Do we need preloaders? Maybe... maybe not. It's up to you.

Here is a short list of jQuery solutions for you.

QueryLoader2

"What QueryLoader2 does is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)
QueryLoader currently works with jQuery v1.6.4 and in IE version > 7, Chrome, Safari and Firefox."

Spinner – A jQuery Preloader Plugin

"Spinner provides a simple approach for adding and removing a preloader for your web applications. Usage is as simple as calling $(‘elem’).spinner() and subsequently $(‘elem’).spinner(‘remove’). You may create your own custom preloaders at http://www.ajaxload.info. Please note that if you use a custom preloader, you must pass in the new height and width as options."

jQuery - Preloader

"This jQuery plugin preloads css, js, html and images with visual loader, fast and very small (~3Kb)."

jQuery.Preload

"This is an advanced multi-functional preloader, that has 4 modes integrated.Each mode suits a different, common situation."

Seriously easy jQuery preloader

"[...] We aren’t actually going to build a preloader in the way that a Flash preloader works. Essentially, what we’re going to do is hide everything until the site is loaded. You do this by creating a div that covers the entire window, so you can’t see the site loading behind it and then when the site is completely loaded, you remove the div. We aren’t technically preloading anything, but we’re faking it and mimicking what people are used to with Flash preloaders."

jquery preloader.js

"jquery preloader.js is an advanced multi-functional preloader, that has 4(actually 5) modes integrated.
Each mode suits a different, common situation."

Simple jQuery Preloader Plugin

"After several searches for a pre-loading plugin for jQuery I came up short – they either did too much and had hundreds of options I didn’t want, or they were packaged with something else had a lot of code I didn’t need. The following plugin will allow you to pass in a selector (div, body, any other element) and pre-load all images within it, the plugin is very lightweight with only 17 lines from start to finish."

jQuery UI Preloader plugin

"The main purpose of this plugin is to show indicator that some operation is in progress. As usually, it's rotating image or something like this."

JavaScript: create an analogue clock with canvas

2011-11-28T07:00:00.002+01:00

There's an interesting example buried in the MDM HTML5 pages, where we can create an analogue clock with JavaScript and <canvas>.

There's not much to say about it. What is interesting for us, is the way the clock is actually drawn.

The blue circle, hours and minutes marks are created using JavaScript, and the same logic is used to draw the hours, minutes and seconds arms.

All the static and moving parts of the clock are inserted into a <canvas> tag using getElementById. If the browser is not recognizing the HTML5 tag, it will only show a warning.

You can get the code from the MDM page, or copy it from here:

<script language="javascript" type="text/javascript"> function init(){ clock(); setInterval(clock,1000); } function clock(){ var now = new Date(); var ctx = document.getElementById('canvas').getContext('2d'); ctx.save(); ctx.clearRect(0,0,150,150); ctx.translate(75,75); ctx.scale(0.4,0.4); ctx.rotate(-Math.PI/2); ctx.strokeStyle = "black"; ctx.fillStyle = "white"; ctx.lineWidth = 8; ctx.lineCap = "round"; // Hour marks ctx.save(); for (var i=0;i<12;i++){ ctx.beginPath(); ctx.rotate(Math.PI/6); ctx.moveTo(100,0); ctx.lineTo(120,0); ctx.stroke(); } ctx.restore(); // Minute marks ctx.save(); ctx.lineWidth = 5; for (i=0;i<60;i++){ if (i%5!=0) { ctx.beginPath(); ctx.moveTo(117,0); ctx.lineTo(120,0); ctx.stroke(); } ctx.rotate(Math.PI/30); } ctx.restore(); var sec = now.getSeconds(); var min = now.getMinutes(); var hr = now.getHours(); hr = hr>=12 ? hr-12 : hr; ctx.fillStyle = "black"; // write Hours ctx.save(); ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec ) ctx.lineWidth = 14; ctx.beginPath(); ctx.moveTo(-20,0); ctx.lineTo(80,0); ctx.stroke(); ctx.restore(); // write Minutes ctx.save(); ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec ) ctx.lineWidth = 10; ctx.beginPath(); ctx.moveTo(-28,0); ctx.lineTo(112,0); ctx.stroke(); ctx.restore(); // Write seconds ctx.save(); ctx.rotate(sec * Math.PI/30); ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); ctx.beginPath(); ctx.arc(0,0,10,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(95,0,10,0,Math.PI*2,true); ctx.stroke(); ctx.fillStyle = "#555"; ctx.arc(0,0,3,0,Math.PI*2,true); ctx.fill(); ctx.restore(); ctx.beginPath(); ctx.lineWidth = 14; ctx.strokeStyle = '#325FA2'; ctx.arc(0,0,142,0,Math.PI*2,true); ctx.stroke(); ctx.restore(); } </script>

The above goes into the head of your page.
The <body> tag should be changed to:

<body onload="init();">

And finally, just insert the canvas where we want to show the clock:

<canvas id="canvas">The canvas is not supported by your browser</canvas>

And that's all.

jQuery & JavaScript: Christmas effects

2011-11-25T07:00:00.002+01:00

Christmas is coming and you might want to put some effects on your web page.
I have thought a lot about saying this or not, but I couldn't pass over in silence: I really hate those kind of things, but I know that some of you might be interested anyway.
If so, please look into this short list of possible JavaScript and jQuery solutions.

Flashing lights

JavaScript Christmas Countdown digital clock

Google's Christmas Doodle

Snow Effect

Snowstorm

30/11/2011 Update: Following a kind comment from Jason, I decided to add his jQuery plugin page:
jQuery Snowfall

Compatibility: do we need to consider IE7 support?

2011-11-23T07:00:00.005+01:00

I recently had a interesting conversation with a friend of mine. He develops web sites and we were talking about compatibility. Or, to better put it, how many situations a developer should consider when testing a new site. We started counting browser versions, and then we considered all the possible screen resolutions. After that, we added tablets and smartphones with related browser mobile versions.
We ended up with a long list and we were quite bewildered. If you stop for a moment and think about it, developing a new site, ensuring full compatibility, is a complete and utter madness.
I tried to shorten the long list of possible situation and the first thing that came to my mind was Internet Explorer, which, we know, is the most problematic browser. My friend said that we could remove IE7 from the list. I was not so sure. Then we made a bet: let's see how many 'major' web site do support IE7.

It has been a dirty job, but someone had to do it. And I did.
I tested a lot of corporate web sites using Internet Explorer 7 in a Windows Xp environment with a 1280x1024 screen resolution. However I would like to show only the following sites, that might be worth mentioning:

BBC;
Facebook;
Google;
HP;
Sony;
Nokia;
Twitter.

Would you like to see the results? Ok! Follow me.

I will explain the findings, following a strict alphabetical order because this is not a worst web site compatibility list.
Please note that the test has been carried out on a specific pc in the mentioned environment. The results are therefore not to be taken as absolute, but as a statistic. Other environments might behave in a completely different way.

BBC

www.BBC.co.uk is a news web site. Mainly the site has a good compatibility, except the bottom menu, which in some pages doesn't show correctly:

As you can see in the text flow something's wrong. Not much eh? Yes it is, however... if your client or boss see something like that, will he/she accept it?
Moreover, content in some news boxes is cut and unreadable.
Oh, by the way, do not try to use the main menu, otherwise you will see lots of JavaScript errors.

Facebook

Well, this is big. I mean, it seems that everyone is on Facebook. But look at what happened to me!

Facebook

I should not say that JavaScript was actually enabled on the test browser. The assumption that JavaScript was not enabled, made the whole site almost unusable. After reloading the main page, the problem went away. And then reappeared. I'm not sure if that was a browser problem or else, anyway that's what I got.

Google

Google has a working fallback when browsed with IE7. The left hand side menu changes and adapt to new situation.

Google

The rest is working, even if some features are obviously missing. But that's ok, isn't it?

HP site has a nice centered stage where products are displayed like in many other commercial site. But, just after that, towards the bottom of the page...

HP Home page

Just a big black hole... what a waste of space...

Sony

Sony web site has been a disaster. When viewed with IE7, everything was pushed on the left hand side, with the following effect:

Sony

If we scrolled the page down, we saw that everything was compressed in a long and narrow column, making the web site almost impossible to browse. After a few reload, the browser was probably recognized and the page was displayed as expected.

Nokia

Nokia site is quite good. Unfortunately in the support home page, a bottom menu is cut:

Nokia bottom menu

Twitter

Together with Facebook, Twitter is one of the most used web site, today.

Twitter

As you can see from the image above, the first time I tried to access Twitter, I couldn't do anything: log-in and search were not working and the page was somehow cut. After pressing refresh a few times, the page finally displayed correctly... after a few JavaScript error pop ups. I can't explain why...

Conclusions

I must say that generally speaking, most web sites have a quite good IE7 compatibility. The main problems I encountered were related to JavaScript which threw errors sometimes (in many cases a site has started a chain of multiple scripting errors).
The overall rendering of the pages is good and most of the sites I tested are fully browsable.
The above is true especially for big companies. Smaller firms have more problems, but I believe that it is quite understandable.

However, the results are not very encouraging. When we deal with web site development, we apparently still need to consider IE7 full compatibility. We can decide to charge more for that, or include it in our first offer. In any case, we need to consider the extra costs for all the needed fallbacks, and we should be ready for a lot more work.

What is your experience on the matter is a great deal to me. Please share your thoughts and experience!

Google+ Page

2011-11-22T14:00:00.000+01:00

This short post just to inform you that I decided to create a Google+ Page for The Web Thought.

Please visit the page by clicking on the red G+ on the right pane and add it to your circles.

Have a nice day and keep on reading!

CSS: style your form elements

2011-11-21T07:00:00.004+01:00

When talking about how to style an HTML element, it is always difficult to meet everyone's tastes.
Keep that in mind when reading the following post, because we are going to show how to style form elements with CSS, considering two possible extreme situation: with a white background and with a black background.

We are going to work on the input, text area, select and button elements. We are going to use CSS and specifically the following properties:
1) background color;
2) font family, size and color;
3) text alignment;
4) width and height;
5) padding;
6) border radius;
7) border;

Let's see what we can do.

I don't think I should explain every single line of code presented in this post. The best way to understand the logic behind the code is to show the result and the CSS rules. Then we can concentrate on changing some values in order to obtain your desired effect.

The white background

The resulting form will be:

Input

TextArea

List Menu

Button

The code behind it, is the following. For the CSS (to be inserted into the head of your document):

<style type="text/css"> .labelWhite { font-family: Geneva, Arial, Helvetica, sans-serif; color: #000000; font-size: 14px; } .inputWhite { background-color:#CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; width: 180px; height: 1.5em; padding: 2px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #666666; } .textareaWhite { background-color:#CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; width: 380px; padding: 5px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #666666; } .selectWhite { background-color:#CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #666666; } .buttonWhite { background-color:#CCCCCC; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #666666; } </style>

And the HTML is:

<div style="background-color:#FFFFFF;padding:10px;"> <form> <label class="labelWhite">Input<br> <input type="text" name="textfield" class="inputWhite"> </label> <br> <br> <label class="labelWhite">TextArea<br> <textarea name="textarea" rows="5" class="textareaWhite"></textarea> </label> <br> <br> <label class="labelWhite">List Menu<br> <select name="select" class="selectWhite"> <option value="Value 1">Value 1</option> <option value="Value 2">Value 2</option> </select> </label> <br> <br> <label class="labelWhite">Button<br> <input type="submit" name="Submit" value="Submit" class="buttonWhite"> </label> </form> </div>

Now... let's see what we can do to change things a bit...

How it works
As you can see, I decided to apply different classes to every form element. That is because we need to have full control on styling applied to every single element avoiding the possibile overlap of CSS rules.

Every form element's font - starting from labels - has been styled, choosing a font family (Geneva), color (#000000 and #333333) and size (14px). The background color of elements is a light grey (#CCCCCC)

We then aligned the text on the left hand side, except for the button which has a centered text.

The input box and the text area have some additional rules (width, height and padding). The resulting effect is to give "more space" to the inside text, so that, when the user insert values, the font is clear and easy to read. - Please note that the height of the input box is in ems and not pixels.

After that, every element has rounded corners: we use the border-radius property to achieve that. I decided to use a quite small value, because I personally don't like it too much rounded (!).

And finally, we style the border which is solid, with a width of 2px and dark grey color (#666666).

Said that, you can understand that we can change all those CSS rules to meet our desired effect.
I believe that the rules I have used are the most important and that working on them is enough. It is clear that we could insert, for instance, a box shadow; however I am sure it would too much in most cases.
Stick to those simple rules, changing values according to the overall theme of your web site, and do not make things too much complicated.

The black background

Just for completeness, I will show a similiar work on a black background.

Input

TextArea

List Menu

Button

I believe you can guess the CSS rules behind it, don't you?Anyway, here they are:

.labelBlack { font-family: Geneva, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 14px; } .inputBlack { background-color:#FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; width: 180px; height: 1.5em; padding: 2px; height: auto; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #CCCCCC; } .textareaBlack { background-color:#FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; width: 380px; padding: 5px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #CCCCCC; } .selectBlack { background-color:#FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: left; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #CCCCCC; } .buttonBlack { background-color:#FFFFFF; font-family: Geneva, Arial, Helvetica, sans-serif; color: #333333; font-size: 14px; text-align: center; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border: 2px solid #CCCCCC; }

Conclusion

Working on a group of rules like the one above, will surely give you full control on how form elements can be effectively displayed.
I repeat: I don't believe you need anything more.
Just one last note: border radius is not working on Internet Explorer 7 & 8. In those case you might want to use CSS Pie.

That's all for today. Let me know your thoughts.

HTML: HTML5 new input types

2011-11-18T07:00:00.004+01:00

HTML5 introduced some new input types with better control and validation. When the features will be completely supported by all main browsers, creating forms will surely be easier and faster.
The new types are:

email;
url;
number;
range;
dates;
color.

As you can see they are quite interesting. Let's take a tour and see how they work.

Email

The email input type is meant to receive a valid email address and has automatic validation:

<input type="email">

When a non-valid email address is entered, and submit button pressed, a tooltip will ask to insert a valid email address.

URL

This input type is used for URLs. The value is again validated upon submission.

<input type="url">

Number

In this case, the accepted value will only be numeric. Validation works when the value is submitted.

<input type="number">

There are some attributes we can use for the input tag:
max = the maximum number accepted;
min = the minimum number accepted;
step = the accepted step between numbers (e.g. step="3" means that only numbers with a step of 3 will be accepted - -6, -3, 0, 3, 6 etc.);
value = the default value.

Range

Range type accepts only a range of numbers. It seems absolutely identical to the number type, however it is not. Infact it will appear as a slider bar

<input type="range">

Range has the same attributes as number (max, min, step, value).

Dates

Dates are quite interesting. It is infact possible to automatically create date pickers for input boxes. The actual different types are:
1) date = for complete dates (day, month, year);
2) month = for month and year;
3) week = for week and year;
4) time = for time (hour and minutes);
5) datetime = for time and date (hour, minutes, day, month, year) - UTC time;
6) datetime-local = the same as datetime but local time.

<input type="date">

Color

Color type should be used when picking colors:

<input type="color">

Compatibility

As usual, the only problem is compatibility. When will we be able to use the new input types? I don't know.
What we know is that some new types are already available on some browsers. Others have been totally ignored, as of now.
Email and URL work on FF 6.0+, Chrome 13+, Opera 11.5+ and IE10.
Color works only on Opera 11.5+.
Number is implemented on Safari 5.1+, Chrome 13+, Opera 11.5+ and IE10, while range is ok on Safari 5.1+ and Opera 11.5+.
Dates work only on Opera 11.5+ and partially on Chrome 13+ and Safari 5.1+.

As you can see, it is the usual mess.
Again, when will we be able to use them?

the web thought

jQuery: image zoom plug-ins

Fonts: the browser doesn't display fonts properly

jQuery: fadeIn and fadeOut for IE8

CSS & HTML: solution for border radius not working on IE8

Web Development: optimise JavaScript and CSS

Web Design: free images deposits

JavaScript: live character count

SQL: the alter table statement

ASP: convert a string into a link

CSS: 3d text!

CSS: image preloader

CSS: image zoom effect

HTML & CSS: text overlay with shadows and round corners

CSS: Ultimate CSS Gradient Generator

Blog ranking... just for fun

ASP & CSS: highlight selected menu item

ASP: is the client still connected?

CSS: fixed header and footer

HTML5: is div dead? Not, really...

SQL: the IN operator

Web Development: handheld device emulators

HTML: what is a DOM tree?

jQuery: loading content while user scrolls (infinite scroll)

ASP: some general tips

Web Design: develop an effective navigation menu

CSS: iPhone 4 in pure CSS3

Top ten most followed posts

2011: what happened (internet related main facts)

HAPPY NEW YEAR!

CSS: adjacent sibling selectors

First heading

Second heading

ASP: simple CAPTCHA method

Are you working today?

Merry Christmas

Web Design: mistakes in big companies websites

CSS: @import at-rule

Web Development: what I think about progressive enhancement

ASP: how to create a reusable function to query databases

ASP: a tutorial for beginners

Web Design: what to consider when re-designing a web site

HTML: terms and syntax (a tutorial for beginners)

CSS: how to change an element style with JavaScript

CSS: how to create a stylish search input box

JavaScript: validate forms with Regular Expressions (RegEx)

jQuery: preloaders!

JavaScript: create an analogue clock with canvas

jQuery & JavaScript: Christmas effects

Compatibility: do we need to consider IE7 support?

Google+ Page

CSS: style your form elements

HTML: HTML5 new input types