Wednesday, 30 November 2011

jQuery: preloaders!

   


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." 

Monday, 28 November 2011

JavaScript: create an analogue clock with canvas

   


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.

Friday, 25 November 2011

jQuery & JavaScript: Christmas effects

   


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

Wednesday, 23 November 2011

Compatibility: do we need to consider IE7 support?

   


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:
  1. BBC;
  2. Facebook;
  3. Google;
  4. HP;
  5. Sony;
  6. Nokia;
  7. Twitter.

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

Tuesday, 22 November 2011

Google+ Page

   


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!

Monday, 21 November 2011

CSS: style your form elements

   


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.

Friday, 18 November 2011

HTML: HTML5 new input types

   


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.

Wednesday, 16 November 2011

HTML & ASP: form methods, get or post?

   


"In forms, should I use 'get' or 'post' when defining the method?"

This was a question a friend of mine asked me a few weeks ago. I thought he was joking, and I tried to find a humorous answer in the back of my mind. Finding none (as I'm a serious guy!), I answered with the usual backup phrase: "It depends". That gave me enough time to think, search my brain database for a technical explanation, and then provide a complete and reasonable answer to his question.
The problem was that the first word which came to my mind was 'idempotent'. I ended up answering his question, without using the word 'idempotent'. And believe me, my friend was happy enough with my answer. The debate went on and we talked about the different way of using the submitted data with ASP.

My friend is not really new to programming in HTML or ASP, but confessed that he has always been confused by the two form methods. That gave me the idea to write the following post.

Monday, 14 November 2011

ASP: how to create effective date fields for forms

   


Today we are going to create a date field for a form. The goal is to make it beautiful to see, easy to use and with validation. We are going to use ASP and just a touch of CSS.
The form element will look like:



In the example above, I have inserted all the options manually, but as I will show you, we are going to make the values of the three option controls automatic. - Note that if you are reading this post via your RSS reader you might not see the above example in the way it was meant.

Ok. Let's start with the code.

Friday, 11 November 2011

SQL: how to update two (or more) tables at the same time

   


Sometimes, when searching for an answer, we end up making things too much complicated, while easy solutions are just round the corner. This is the case of a simple task like updating two related tables with just one SQL query.

Suppose we have two related tables. The first contains user names, and the second email addresses related to the first table names.

First table ("names")
IDname
1John
2James

The second table ("addresses")
IDaddress
1First Street
2Second Street

How do we change the name and the street of the first record (with id equal to 1)?
With one simple query.

Wednesday, 9 November 2011

ASP: simple form validation

   


Form validation is an important element in every web site. In order to be sure that the user submits data in accordance to what our code (or backend database) is expecting, it is mandatory to check the information before doing anything else.
There are tons of ready-made form validation functions on the web, especially written in JavaScript, however sometimes we might need to do something a little bit more customized.
Here I will explain the basic concept behind a form validation using VBScript in an ASP page.

Monday, 7 November 2011

CSS: the use of styles in Apple homepage

   


As you already know, Steve Jobs has passed away. When the news appeared on the web, many blogs, news agencies and web sites published articles about the life of the man who's been said has changed the world.

The Web Thought paid a tribute to him, as well, by reproducing Apple corporate homepage main picture.

Apart from the sad thing, I would like to take your attention on how the Apple web team created that homepage. I believe it is quite interesting to see how CSS styles were used, even if it might look too basic.

Please follow me...

Friday, 4 November 2011

jQuery: create tabs with jQueryUI

   


In order to create tabs on a web page, jQueryUI is a powerful tool and helps us to divide content into tabbed sections. The use of different pages to display appropriate information is an old technique now. It is undoubtedly faster and more efficient to show the content in tabs, even using AJAX.
jQueryUI is a unique tool, and "tabs" is one of its features.

Let's see how it works.

We need some libraries
First of all we need to link to jQuery, jQueryUI and a jQueryUI CSS. To make things easier we can connect to the Google Api library.
The base CSS:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script>
and jQueryUI:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
Now we have everything we need. That will all go into the head of our web page.

Wednesday, 2 November 2011

ASP: create an automatic email alert

   


Recently, I had to create an automatic alert for a company intranet. The final user wanted to receive an e-mail - and just one email - a month prior to an expiration date. Basically I had a list of names and a related date which represent an issue date for a document. This document expires after one year and the final user needed to receive an email alert a month before the expiration date.

It looks like an easy task, doesn't it? In the following post, we are going to see the logic behind it and how to build the alert system.

Some assumptions
As usual we need to consider some things before going into the theory behind it all.
As said above, we need a table (called 'table') in our database with a date field. The date is representing our expiration date, and we call it 'exp_date'.
Then we need another field, that we can call 'email_notification'.
There will surely be other fields in our table, however, for the purpose of the following exercise, we don't really care. Let's say we have just another field, called 'name' (aside for the usual id field).
Thus, our table structure is the following:

id - int (unique)
name - varchar(255)
exp_date - smalldatetime
email_notification  - numeric(18,0) - default value = 0

That is all.