CSS: adjacent sibling selectors

Tweet

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 E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments)." (quote from W3C)

ASP: simple CAPTCHA method

Tweet

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.

Are you working today?

Tweet

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

Tweet

MERRY CHRISTMAS

from

Web Design: mistakes in big companies websites

Tweet

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):

1. cnn
2. coca-cola
3. eBay (Italy)
4. flickr
5. google (reader page)
6. hp
7. kaspersky
8. nintendo
9. philips
10. twitter

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

CSS: @import at-rule

Tweet

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.

Web Development: what I think about progressive enhancement

Tweet

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.

ASP: how to create a reusable function to query databases

Tweet

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().

ASP: a tutorial for beginners

Tweet

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!).

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

Tweet

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.

HTML: terms and syntax (a tutorial for beginners)

Tweet

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.

CSS: how to change an element style with JavaScript

Tweet

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.

CSS: how to create a stylish search input box

Tweet

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.

JavaScript: validate forms with Regular Expressions (RegEx)

Tweet

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.

jQuery: preloaders!

Tweet

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

Tweet

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.

jQuery & JavaScript: Christmas effects

Tweet

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?

Tweet

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.

Google+ Page

Tweet

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

Tweet

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.

HTML: HTML5 new input types

Tweet

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.

HTML & ASP: form methods, get or post?

Tweet

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

ASP: how to create effective date fields for forms

Tweet

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:

Day 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Month 01 02 03 04 05 06 07 08 09 10 11 12 Year 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

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.

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

Tweet

******IMPORTANT NOTE******
Only now after a few years of comments, I understand the big confusion I generated, and I understand it's been my fault and for that I do apologize.
The query works but NOT in MSSMS: the query works in ASP or in a Ms Access environment with linked tables to MS SQL. I hope this clarify a bit...


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

ID	name
1	John
2	James

The second table ("addresses")

ID	address
1	First Street
2	Second Street

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

ASP: simple form validation

Tweet

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.

CSS: the use of styles in Apple homepage

Tweet

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

jQuery: create tabs with jQueryUI

Tweet

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.

ASP: create an automatic email alert

Tweet

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.

CSS: terms and syntax (a tutorial for beginners)

Tweet

How often we couldn't understand when an article explains CSS because of its terminology? Words like "element", "class", "selector" and so on, can get mixed up in our brain, and we feel like we are missing something.

Don't worry, because here I explain it all, and so there won't be any confusion anymore.

CSS stylesheets

CSS stands for Cascading Style Sheet.
I believe you already know how a stylesheet is built. Anyway, it is important to remember that a stylesheet is a set of CSS rules. It could be external (we link to the stylesheet in the head of the page), it could be embedded directly in the head of a document or it could be inline (inside the HTML element we want to style).
When we link to an external stylesheet we use the following syntax:

<head>
<link rel="stylesheet" type="text/css" href="stylesheetfilename.css" />
</head>

Google Analytics: real time statistics

Tweet

Yesterday, I have checked some statistics for The Web Thought in Google Analytics as usual, and I discovered that the Google Team introduced a new spectacular section: real time statistics.

If you go in the home section of your web site profile, you will see, just before "Intelligent Events" a new menu: "Real-Time (Beta)". It is clear that the service is still in beta version, but as far as I can see, it's incredible.

On the right side of your page, you can see the visits flowing in a real-time panel. The overview is showing the active visitors number, top referrals, top active pages, top keywords and top location.

There's then the possibility of watching live in depth reports.

In the "Locations" section you can see where your traffic is coming from, using a map or - hurray! - Google Earth.
The "Traffic Source" section is displaying the medium, source and active visitors.
The "Content" section is showing the active page and active visitors.

All the subsections have custom filters and columns ordering for tables, making statistical analysis very simple.

It's a pleasure to see the traffic coming and going in real time. It might be just a toy - at first - but I believe it could be a valuable tool to check how things are going on and eventually take immediate action when needed.

Please, let me know your experience with the tool.

ASP: why am I still using it?

Tweet

I have recently debated with a friend of mine about my stubborn belief in classic ASP. If you are reading The Web Thought, you already know that I mainly program in classic ASP, but you might not know why I still use it, and probably will go on using it.
Here I'll explain my ideas.

A little bit of history

First of all I would like to be clear on one thing: ASP is not a programming language, strictly speaking, but a scripting engine. VBScript is the main language used in ASP pages. In fact, my first steps into programming were made trying to understand VBA (Visual Basic for Applications). So, please be aware that in this article I will refer to ASP as a general term, not strictly to the scripting engine.

ASP: how to create an excerpt from a text string

Tweet

In the following short article, we are going to build a function which will extract an excerpt from a text string, using classic ASP. The function could be used in blogs, or in general, when we need to display just a part of an article, a news or any long text (maybe providing a link to the complete piece of text).

The function is very simple, but it has a little trick in it: it won't cut a word. Basically we are going to benefit from the InStrRev VBScript function.

Let's see the how we do it.

CSS: automatic chapter numbering with counters

Tweet

If your web page is divided in chapters fetched from a database, you can automatically number those chapters, using CSS counters. The solution is very useful in situation where the numbering is in some way dynamic.

Imagine we get chapters from our database, and list them like:

chapter 1
chapter 2
chapter 3

and so on...
What we will achieve is to automatically show them as:

1. chapter 1
2. chapter 2
3. chapter 3

Isn't it nice? Let's see how we can do it.

ASP: conditional update or insert record

Tweet

There are situations when we need to insert or update a record in a table according to its presence. The condition is: if the record is already in the table, then update it, otherwise insert it.

Here we will see how to do it.

Some assumptions

To achive our goal, the first task is to determine which is the condition upon which we decide to update or insert the record.
I will show you an example, that will apply to a specific situation, however, after understanding the logic, you can think of something related to your personal goal.
In the following example, we have a table (table1) with 3 columns: id, field1 and field2. We have a form submitting data. Then there's another table (table2), linked to the first table through the id field. The columns of this second table are: id and field3.
The first table (table1) might have records linked to the second table (table2), while table2 already contains records. That is a classic situation in relational databases. The point here is that we know that a unique record is present in table2, and we want to insert a new unique record in table1 if it's not already present, otherwise we need to update it.
I hope that the above explanation is clear enough.

ASP: Scripting.FileSystemObject... check authorizations

Tweet

A year ago (more or less) I wrote a series of posts about Scripting.FileSystemObject. If we use all the information gathered in those articles, we can create some sort of file explorer interface for our web site. The upload and management of files could be important, for example, in a company intranet, however, it is mandatory to follow a security policy in doing that, otherwise we end up with users messing up with files saved on our server.

Today we are going to create a simple ASP function that will check authorizations of folders. The function will try to create and delete a dummy txt file. The result of that operation will tell us if the folder has writing and reading permission or not.

Ready?

CSS: resetting the browser internal stylesheet

Tweet

As you may know, every browser has a default CSS stylesheet. Knowing that, it is possible to set all the predefined styles to neutral values. In that way, we are sure that nothing will get in the way, and that all the built-in styles (applied automatically by the browser) will be set to a baseline. The main advantage will be that every browser (no matter which one we are using) will behave in the same way, according exactly to our custom stylesheet.

In the past, there has been a long debate about resetting default stylesheets. It seems that it all started when programmers noticed a difference in predefined margins between browsers (specifically Firefox and Internet Explorer). After that, different people worked on the so called reset CSS, discussed about it and today, we can say that there are three main different opinions. Some always use reset CSS stylesheets in their projects. Others think that they are useless and that if we properly create custom stylesheets there's no need for them. Finally there are some who think that reset CSS stylesheets are only sometimes useful and they use them only when necessary.

With the contribution of people like Eric Meyer, the discussion goes on. As he says:

"The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on." 

Until a few days ago, I thought it was useless. Today I might have change my mind. Here I will explain why.

Blog Ranking (part 6) - Blog promotion

Tweet

I've been receiving different email lately, proposing me to review softwares and web sites in exchange of something more or less valuable. While you may know that The Web Thought is not a commercial blog, what happened is a good starting point just to make a few consideration on blog ranking, or - generally speaking - about what to do to make a blog grow.

This is a post about blog promotion... be aware.

Web Design: what gurus think and what I think about it

Tweet

I've been reading a lot lately. I actually follow many blogs and sites where skilled writers share their ideas about web design and web development. Those writers usually give advices on how to think the web and specifically how to create sites with the best user experience.
The language used is a complete melting pot of technicalities, often difficult to follow, as if the writers were explaining their ideas to a very restricted circle of scholars. New terms (neologisms) are springing everywhere, sometimes creating confusion. A cryptic way of spreading new ideas, in my opinion.

Lately I've been thinking a lot about that, and I would like to humbly share my thoughts. I'm not a guru and, even though I'm a little bit experienced, I've always been outside the chorus. So here - if you are interested - I begin.

JavaScript: delete default text when selecting a textarea (onblur and onfocus)

Tweet

Today we are going to create a textarea with a simple effect. We want to obtain the following:

Add your comment here...

The text inside the textarea will disappear when the area is selected, and reappear when the area is not selected and there's no text inside it. To do so, we are going to use JavaScript.

Ready for the code? Ok, let's go.

In memory

Tweet

(Credit: apple.com)

jQuery & CSS: how to create a feedback slider

Tweet

Today we are going to create a simple feedback slider using jQuery and CSS. I suppose you've seen many sliders on recently created web sites. They are used to make short forms or generic information slide over a page when a button is pressed. The slider (or tab if you prefer) can be placed where we need it and it can be styled the way we prefer.

We will create an example just to understand the basics behind it. Something like:

A form will slide down when the "feedback" button is pressed.

HTML & CSS: header and footer elements for printing

Tweet

In July this year, I've posted an article about collecting data from an xml file in order to display it and eventually print it [JavaScript: get data from an xml file (like a Blogger backup file) and display it (or print it)]. The main reason why I wrote that post is because I wanted to create a unique way of printing The Web Thought. I managed to collect the data (articles body, datestamps, titles and so on) from the xml file generated by Blogger as blog backup, so I now have a good page ready for printing.

Since then, I've worked again on the file and I've changed it a bit, just to include some specific features I needed. Basically I've changed the css style and the JavaScript code. I don't think you might be interested in that part (if you are please let me know so that I can share it), however there's a bit of code I would like to show you. Basically we want to create footers and headers for every printed page.

jQuery & ASP: creating a "more" button with AJAX (part 2)

Tweet

As explained in my previous post, today we are going to create the page needed to update our names list, when the "more" button is pressed.

I believe you followed me in the previous article. If not, please read it before continuing, because otherwise you won't understand what I'm writing here.

Creating the more.asp page

As said, we now need to create the more.asp document. In this page we will get the updates for our list and pass them to the AJAX request. The more_updates div will be changed and a new "more" button created, if the end of the recordset is not already reached.

jQuery & ASP: creating a "more" button with AJAX (part 1)

Tweet

On many web sites, we can see lists of news, updates, notifications and similiar elements with a "more" button. That button will add elements to the list when pressed. I believe you saw something similar, used especially on Social Networks like Facebook or Twitter.

In the following article we will create a "more" button using jQuery and getting the list of elements from a database, using ASP. The project has two ASP pages, one containing the list and the jQuery code (AJAX), and the second with the code needed to update the list.

Let's start building the first page.

ASP: call functions and subroutines

Tweet

With ASP, one of the main features we do like a lot is the possibility of creating procedures. There are two types of procedures: sub and functions.
Subroutines have a specific syntax:

<%
sub sub_name()
... ...
end sub
%>

and they don't output a result.

On the other hand, functions have the same syntax, but they output a result:

<%
function func_name()
... ...
end function
%>

Let's see how they work!

CSS: word-wrap, how to use it

Tweet

Word wrap is an almost obscure CSS property. It's rarely used, but it can save your day sometimes. So, to get to the point, which one of the two following boxes do you prefer?

ThisIsAVeryLongTextThatWon'tBreakUnlessForcedToDoSo

ThisIsAVeryLongTextThatWillBreakBecauseWasForcedToDoSo

I bet you prefer the second one. How to do it? Just one line of code! Follow me...

jQuery: embedding videos

Tweet

Ever wanted to embed a video in your blog or web site? I must admit I don't really like videos on web sites, however I understand that some sites heavily rely on videos. Usually when I open a home page, the presence of multiple videos - starting automatically - makes me go away. But, I do appreciate if an internal page offers the possibility of viewing a short video or animation... on demand.

Anyway, if you need to embed videos in your pages, here is a list of jQuery plugins that might be of some help.

CSS: cross browser gradient (a tutorial)

Tweet

I've already talked about CSS gradients in the past, but mainly together with other CSS features like box-shadow or border-radius. In the following article we will create only gradients for a simple box... and we are going to make it work for any browser. This time no compatibility issue, then.

The style
This time I will start straight from the code. Afterward I am going to explain how we can customize it, understanding what's behind.

.gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(top, #444444, #999999);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
  height: 200px;
  width: 200px;
  color: white
}

The result for the above code will be the following box:

This is the styled div with our gradient.
As you can see, the background has a gradient going from top to bottom, from colour #444444 to color #999999.
Let's now go on with the explanation of the style

Outlook: how to view the content of a pst file

Tweet

As explained in one of my previous posts, it is highly recomended to perform maintenance on your Exchange Server. Using tools like ExMerge, you can archive old mails or mails for closed mailboxes and thus reduce storage size. But what happens when we need to view the content of the resulting PST file?
First of all, we can always open the PST with Outlook. However we can use a separate tool to achieve that: Outlook PST Viewer.

The software is very simple to use and completely free.

• View PST files without having MS Outlook installed.
• Open & view password protected .pst files without a password.
• View Outlook messages, OLE embedded objects without MAPI or Outlook.
• View PST files with exact email formatting.
• View PST files & restore all its meta data like To, Cc, Bcc, From, Sent & Received date.
• Reads PST files and extracts all MAPI properties.
• View PST files with Internet header.
• Software recovers Rich Text, HTML or Text formatting of emails stored in PST files.

Because it is free, you can always give it a try. Download it here.

Site RSS feed

Tweet

This is a service quick note.

For those of you that follow The Web Thought using the RSS feed and reading article with some sort of  aggregator, please note that some post (especially those related to CSS styles) might not be viewed with working example. That is due to the fact that RSS feeds don't render styles embedded in the body of the post.

I do apologise for the issue.

In those cases, please view the original article using your browser.

CSS3 and HTML5: Adobe expressive web

Tweet

I've recently stumbled upon an interesting new web site by Adobe: the expressive web (beta). Launched at the beginning of August, it deals with CSS3 and HTML5 in a new and interesting way.

The site explains in details the new features, in a totally interactive and original way. It uses small coloured cubes, which with effective animations, gather to form shapes, explaining in details the effect of those new features.

The expressive web shows examples, browser support, fall back strategies and resources for CSS3:

• animations;
• gradients;
• media queries;
• shadows;
• transforms;
• transitions;
• web fonts.

As for HTML5:

• audio;
• canvas;
• forms;
• video;
• web storage.

I know it is difficult to imagine, following my explanation, how the site is working. It is definetly better to visit it.

Please remember that the site is still in beta, so it might still have things to be adjusted.

CSS: use CSS3 for columns

Tweet

In the past, when we wanted to create columns we used a table. Today, CSS3 has a style called column that can do the trick easily. Unfortunately that is not working with Internet Explorer, but in that case, we can use the Columnizer jQuery Plugin. In this post, we will concentrate on the CSS3 rules, while we might talk about Columnizer in the near future.

Multiple columns

To create a rule for columns we use the following style:

.threecol
{
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
column-count: 3;
}

An the result will be:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean commodo, felis at vulputate tincidunt, turpis nisl egestas felis, sit amet auctor velit massa quis libero. Fusce tincidunt neque ut mi tincidunt sollicitudin. Mauris sed scelerisque tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis ligula quis velit luctus ullamcorper sed ut est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed egestas urna ac libero sagittis lobortis. Donec sapien nunc, porta at pharetra imperdiet, ornare eget eros. Fusce placerat nisi et libero faucibus ac condimentum nisl lacinia. Donec ut enim non dui tristique tristique sit amet a nunc. Nullam placerat felis a dolor aliquam auctor. Nulla pellentesque sem eu ligula aliquam ut blandit ipsum rhoncus. Integer tincidunt posuere nisi vehicula vulputate. Aenean non metus sit amet leo varius euismod in quis tellus. Pellentesque ut tempus metus.

9/11

Tweet

...in memory. Lest we forget.

Blogger: make your blog fluid (fit any screen resolution)

Tweet

As you may have noticed, it's been a few days since The Web Thought has changed its layout. Now it is fluid.

Not knowing exactly how Blogger templates are built, I searched the Internet a bit to find a way to achieve that, and I must say I didn't find much... Everything I found was not really working for me, because it mainly focused on changing widths in pixels, while I wanted to use percentages. Finally, after playing a bit with the Design panel, I managed to make The Web Thought fluid.

I tested it with different browsers and it looks good. Please let me know if you find issues that I'm not aware of.

Let's see how to do it!

Star Trek 45th anniversary

Tweet

Today, just a small off topic post.

On the 8th of September 1966, the first episode of Star Trek "The man trap" debuted on TV.

I'm a loyal Star Trek fan, and I just wanted to celebrate this 45th anniversary.

Keep on boldly going where no man has gone before!

(Photo: startrek.com)

CSS: Vertical text

Tweet

Have you ever needed to create a vertical text? Something like:

Vertical Text

It is very simple and straight forward. We can use CSS to achieve that, the only issue we have to consider is compatibility (ah! that is new, isn't it?).

JavaScript: adjust the height of an iframe according to its content

Tweet

I know that we shouldn't use iframes, but sometimes they are useful or maybe we used them in old pages that we don't really want to completely update for iframes removal. In those cases we might need to make the iframes expand and reduce according to the content. Yet, we don't want to write much code to achieve that. That is the case when JavaScript can lend us an helping hand.

offsetHeight and scrollHeight

In order to reach our goal, we need to use different code: one for Firefox and one for all other browsers. Firefox needs to use offsetHeight which is "a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height." (quoted from MDN). For other browsers we will use scrollHeight which is "a measurement of the height of an element's content including content not visible on the screen due to overflow." (quoted from MDN).

Web Development: The Cult of Done Manifesto

Tweet

You may already know something about The Cult of Done Manifesto. It was conceived in 2009 by two smart people, Bre Pettis and Kio Stark, and published in Bre Blog. When I first knew about it, I found it enlighting for every day tasks, from big working projects to small daily actions. Because of that, I think that it can be successfully applied  to Web Development and generally to programming.

I've recently read a message by Wil Wheaton on Google+, that reminded me about it, thus I thought I should share it with you. Try to apply your daily programming routine to it and see what comes out.

The Cult of Done Manifesto

1. There are three states of being. Not knowing, action and completion.
2. Accept that everything is a draft. It helps to get it done.
3. There is no editing stage.
4. Pretending you know what you're doing is almost the same as knowing what you are doing, so just accept that you know what you're doing even if you don't and do it.
5. Banish procrastination. If you wait more than a week to get an idea done, abandon it.
6. The point of being done is not to finish but to get other things done.
7. Once you're done you can throw it away.
8. Laugh at perfection. It's boring and keeps you from being done.
9. People without dirty hands are wrong. Doing something makes you right.
10. Failure counts as done. So do mistakes.
11. Destruction is a variant of done.
12. If you have an idea and publish it on the internet, that counts as a ghost of done.
13. Done is the engine of more.

ASP & jQuery UI: autocomplete with json source (part: 2)

Tweet

In my previous post, I've introduced the creation of an input box with an autocomplete feature. We used jQuery and jQuery UI in order to build the main asp page. Now we need to create the source for the autocomplete items list.
Because the jQuery UI autocomplete widget needs to have a source in JSON format, we have to retrieve the needed data from a database and feed it to the widget in a properly formatted way.
I don't know if you are familiar with JSON. I wasn't. One web site that helped me a bit in checking the output of the source.asp page has been JSONLint. Please refer to it if you need to test your JSON output.

Now, let's see the code needed to get the data and properly format it.
First thing to do is declare some variables:

<%
Dim keywords
Dim keywords_cmd
Dim output 

ASP & jQuery UI: autocomplete with json source (part: 1)

Tweet

I've been struggling with the idea of implementing a form with autocomplete features quite a lot. I just wanted to use jQuery and jQuery UI with an asp page which will output a JSON file to be used for the autocomplete list. As you may know jQuery UI has an autocomplete widget, so we do not really need to reinvent the wheel.

I must admit that I don't know much about JSON and so I had to understand it first. In addition, the jQuery UI documentation is not really helpful because it mainly focus on the jQuery part of code (which is quite obvious). Anyway I managed to make it work at very basic level. This post and the one that will be published after it, will explain how to do it.

First of all, let me make a list of things we have to consider:
1) we need to use jQuery and jQuery UI;
2) we will create an asp page with the input box which will have an autocomplete feature;
3) we then need to create another asp page that will output items for the autocomplete input box. The output will be in JSON format.

In the following article we will deal with point 1 and 2. The next post will explain point 3.

Ready? Go!

HTML5: The importance of !DOCTYPE

Tweet

As our beloved W3C site states:

"When authoring document is HTML or XHTML, it is important to Add a Doctype declaration."

And you perfectly know why... don't you?
Ok... for those of you that don't know why, here's the explanation:

"There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. [...] Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document. [...] with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" rendering mode."

As you can see it's definitely not trivial. But why am I talking about it? Well, it has to do with HTML5.

CSS: Layer styles

Tweet

Following similar articles about online CSS tools, today I would like to share Layer Styles.
The web site has a simple graphical interface with sliders and selectors where we can insert parameters and see the results of our choices with a screen preview. The possibilities are quite interesting and the customizable parameters are surely the most used for most web developers. The resulting CSS style can be then copied for our personal use.

Let's see what we can do in depth.

The end of holidays...

Tweet

...always comes when you start enjoying it.
I had three complete weeks of vacation. That doesn't mean I haven't worked, but it is quite clear that The web thought hasn't been my first thought lately.
Starting next wednesday, I will publish new articles...

Ok, ok, I know... this is just a filler... yes, it is. I'm guilty...

ASP: some simple advices to obtain well organized pages

Tweet

When coding a new ASP page, there are some simple things to keep in mind. While our creativity shouldn't be blocked, there are some rules that - if followed - might increase the performance of our newly created page. Some of these ideas are just general advices that can be useful. Others are more imperative, and should be carefully considered almost as laws.
Anyway, let's see them one by one and then you can comment, say what you think and maybe add some other ideas that I might have forgotten.

CSS: padding vs margin

Tweet

What is padding in CSS? And margin? What's the difference?

I know that the subject is very basic, but recently I noticed that people tend to confuse them, use them together (which is ok) or switch from one to the other without knowing why. Sometimes using them  - especially with transparent elements - we might not notice the difference between the two properties.

The definitions

Let's start from the beginning.
Margin: it defines the distance between the element and other elements. It's like a surrounding space and determines what's the measure of that space. The margin is outside the object and it is always transparent.
Padding: it defines the distance from the border of the element and its content. The padding is inside the object and it takes its background color.

Today it's complete relax!

Tweet

Today, the 15th of August is the 227th day of the year and there are - only - 138 days remaining until the end of the year.

Today, in most part of the world, it is a non working day. And I respect that.

So, please, bear with me if today I won't publish any new article.

Enjoy your holidays and relax.

Adobe Flash: why am I against it?

Tweet

I started to use Flash as a development tool a long ago. I can't remember exactly when. It was probably in 2001 or so. But I remember that I nearly immediately understood that it was no good for web development. I therefore used it for presentations and marketing media, but not for web sites. Why? Well, I don't know if you're interested in my personal reasons, but maybe they could shed a light around the use/abuse of Flash animations. So, if you're planning to develop something with it, you should take the following facts into account.

CSS: media queries and screen resolutions

Tweet

Today we are going to explore the media queries in CSS. We have already talked about @media, but recently I have used it to create different styles for different target browsers, so I would like to share my experiences.
What is really useful of media queries is that, according to what the user is using to browse your web site, you can change things to fit the target screen resolution. For example, when a user is using a smartphone or a tablet, you can change how the main menu is displayed: from a long series of links to a drop down menu.

But what are media queries? Let's see them.

Blog Ranking (part 5) - Technorati & Alexa

Tweet

It's been a while since I've been writing about blog ranking. It was something I tried to understand more a year ago, when The web thought was newly born. Now, it is still a general interest for me - web site ranking and positioning is always important for a web developer. In any case, I would like to share some thoughts specifically about blog ranking and two tools which are often cited as very important and valuable: Technorati and Alexa.

Virtual Server: please save me from complete disaster!

Tweet

A few days ago I had a terrible experience. The server I manage has two virtual servers. One is the domain controller, while the other is just the Antivirus server and spam filter for Ms Exchange.
In the morning, I arrive early at the office, smiling as usual (that's almost a lie, but sounds professional). A few minutes later a colleague enters my office: "The telephone is not working." I check mine and it's completely dead. After a second my pc is dead as well: a power outage!

JavaScript: the good old window.open (with a trick)

Tweet

The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.

The opening

First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:

<a href="javascript:void(popupImg('images/gallery/big/01.jpg'))"><img src="images/gallery/small/01.jpg" alt=""></a>

When the user clicks on the image, the popupImg function will be called.
If you prefer, we can use the onClick event:

<img src="images/gallery/small/01.jpg" alt="" onClick="popupImg('images/gallery/big/01.jpg')">

It's time for a little vacation (and a gift)

Tweet

Today I'm on vacation. Yes! Even The web thought goes on holiday... Last year I suspended for a while the publishing of new articles. This year I plan to do it differently, but - as you may understand - vacation means relaxing and getting away from ... ... well ... thinking. I'm going to switch my brain off and enjoy my family (my two little kids will eventually drain all my forces during this period).

I'm planning to publish articles as usual during a two weeks period. At the same time, the posts won't be too much on the technical side, but lighter or of general interest.

In the meantime if you would like to have all the post published on The web thought during its first year of existence, please leave a comment in the section below with your email; I will send you the pdf  as soon as possible.

So, please enjoy your summer and see you soon!

SQL Server: create a database with queries (the full life cycle of a database)

Tweet

When we think about a SQL Server database, we usually consider databases and tables as static objects while records contained as dynamic objects. What I mean is that we are inclined to build the structure of our database (the db itself, the tables, index and so forth), and then manipulate (insert, update, delete) the data contained in the tables. Some times we use temporary tables.
In this post we will see how to:

1. create a database
2. create a table
3. create an index
4. drop the index
5. drop or truncate the table
6. drop the database

The full life cycle of a database: from creation to destruction!

Web Development: how to test IE compatibility

Tweet

Lately, we have seen an increasing interest in HTML5 and CSS3. The (not really recent) introduction of new features has been cautiously followed by web developers, and I don't know what's your feeling, however my impression is that the path to the new web is just full of pitfalls.

I recently had to develop a new web site and, because it was a very basic one, I decided to experiment a bit. I must say it has been quite satisfactory (coding-wise), however I had to spend quite some time to test it. I wanted to have almost a full compatibility and - as we have seen lately - the browser that gave me most troubles has been Internet Explorer.

In order to test a web site for compatibility issues, I usually publish it in a not-known sub-dir and then display it with different browsers. I test it with Safari, Opera, FireFox, Chrome and Internet Explorer. In addition, I use services like Browsershots and IE NetRenderer. However, they usually take a lot of time (especially the first) and because we know that time is money, I recently decided to look for something else.

JavaScript: get data from an xml file (like a Blogger backup file) and display it (or print it) - Part 2

Tweet

As promised, in the following article I will explain the code published in my previous post. I don't know how many of you are interested in explanations, but because I think that understanding things is better than merely copying examples, I will torture you with this. You've been warned!

JavaScript: get data from an xml file (like a Blogger backup file) and display it (or print it) - Part 1

Tweet

I've been running around this post quite a lot. I know that it could contain valuable information for everyone and specifically for Bloggers, but there's so much into it that I don't know where to start.
Anyway... The point here is:
1) take the Blogger backup file (xml) - or any other properly formed xml file (an Atom feed as well);
2) clean it up - if needed;
3) build an HTML page that gets the data from the xml file (using JavaScript);
4) properly style the page.

As you can see the task is not that easy... or is it? Read on, and judge for yourself.

Google+

Tweet

Just a quick note out of the ordinary stream of articles... if you are on Google+, I would be delighted if you add me to your circles.
In the meantime, keep on following The web thought, and have a spledid day!

ADODB: How to query a database (the command and recordset objects)

Tweet

In almost every article on The web thought, we are talking about retrieving data from a database. I recently realized that we've never really talked about how to do it. I don't want to get into it in a too technical way, however I would like to share the two ways I use to get data from a database using the command object and the recordset object. We will concentrate only on data collection, while manipulation (update, insert and delete) could be the topic for future posts.

Ok, let's begin then.

Browser Support: even Google is dealing with compatibility issues

Tweet

As of August 1st, we will discontinue support for the following browsers and their predecessors: Firefox 3.5, Internet Explorer 7, and Safari 3. In these older browsers you may have trouble using certain features in Blogger as well as many other Google Apps such as Gmail, Google Calendar, Google Talk, Google Docs and Google Sites.
 
This is some news. It has been published on Blogger Buzz just last Friday (July 14th).

I've been talking about browser compatibility and support a lot lately. Older browser versions are still around, and - as web developers - we have to face more and more troubles just to make "everybody happy". When I recently had to show a new web site I developed, I couldn't believe my eyes when I saw IE6 running on the meeting room pc. And you can imagine how difficult has been to explain how IE6 is some very old software ("I bought the pc just 5 years ago! It's not old!") and that it should have been replaced a few years ago with a newer version.

I believe the above news is definitely a very good news. Everyone should force people to use newer browsers - and possibly auto-updating ones. That will make us, web developers, take a deep breath of relief!

You can read the original post (Blogger Buzz: Update on Browser Support) and then, please leave a comment about it in the section below.

CSS3: Use CSS3 in IE 6-8 with PIE

Tweet

"Marco, the design department has prepared the layout for the new site. Please, now you can start developing it."

That's what I found in my company mailbox, the other day. Interesting enough, the design department is mainly a smart guy who's very skilled using Photoshop and stuff like that. But placing shadows, neat and polished background textures, rounded corners and every other embellishment you can think of, is drammatically easier to do with Photoshop than actually designing it with CSS, ASP and plain HTML.

Upon looking at the drafts, I immediately realized there were troubles ahead. The problem was compatibility...
I know, I know... we've been talking about CSS3 compatibility issues many times, however I believe that we can now start to talk about possible solutions... or not?

... drum roll ... the solution is already out there!

56K Modem Sounds Slowed Down 700%

Tweet

Today, I just want to show a crazy thing. Remember when we were used to surf  the internet with 56k modems? Well, there's this guy who decided to make some sort of song with the sound that comes out when the connection is established and the result is absolutely creepy. See and hear for yourself and have a nice day (if you can...)

ASP: export data to a Ms Word document

Tweet

We can create a Ms Word document as output of an ASP page. In the past I published articles about exporting to Ms Excel, to Ms Access and to PDF. In this post we'll see how to export data to Ms Word.

The way data is exported to a Ms Word file is probably the easiest. I assume we gather data from a database and have a resulting recordset (called RS_Word). We can display the records with a repeat region or not. In the following example I assume the data is unique, thus we will not use a repeat region. Let's imagine the data is just some pieces of plain text.

One year ago...

Tweet

One year ago I published my first post.

The web thought has grown amazingly since then.

It has more than 100 pageviews every day, and, even if not many comments have been submitted, I must admit I am quite happy about it - comments will eventually come. On the other hand, I really would like to know more about what you think, what are your experiences and thoughts and how my articles helped you (if they did at all).

I really need to thank everybody who supported me during this year and I hope to continue offering good quality articles to all of you.

The web thought could really grow more and more... but I think I do need your contribution, now. Please, post your comments, share the contents, add your account to the followers list and - if you like - submit your articles for publishing. That way we might know each other better... and make The web thought a good place where to find information about web developing.

Test for echo...

ASP: use FPDF to create a PDF with a dynamic table

Tweet

Following my two previous articles about FPDF (Create PDF files with FPDF and FPDF MultiCell with multiple lines and positioning), today I would like to share a way to create a table dynamically, getting the items from a database, and displaying those items one after the other.

As usual, we have to make some assumptions. First of all we have a database from which we will get the records for the table. As an example, we can imagine our table is something like:

FRUIT	IMAGE_URL
orange	/images/orange.jpg
apple	/images/apple.jpg
pear	/images/pear.jpg

Our goal is to create the PDF with the above table. We will create the table dynamically, and the table will have two columns: one for the fruits and one with the image of the related fruit.

If you are interested in the following explanation, but you haven't read the previous articles about FPDF, I suggest you read them before continuing, because here I assume you already know how to create a basic PDF file using FPDF.

ASP & IIS: global.asa and current user count

Tweet

The first time I've heard about the global.asa file, it was a long time ago when I wanted to show the current users on a home page. In fact, using the global.asa is not that difficult, and showing the users online is an old trick. I would like to show you what global.asa is and then use it to create a users online badge.

The global.asa

The global.asa is a small and optional file that you create in the root of your web site. We use the file to specify event scripts and objects that have session or application scope. As I said in the previous article (where we talked about sessions), the global.asa can be used to handle sessions - or, more specifically, to bind events to session.
There must be only one global.asa in the root of your web site and it can contain only:

1. ASP built-in object events;
2. object declarations;
3. TypeLibrary declarations.

ASP: the session object (vs cookies)

Tweet

I've been talking about cookies some time ago, however you should know there's another way of storing information if you use ASP: the session object. There's a big difference between cookies and sessions: cookies are client-side, while sessions are server-side. When we open an ASP page, the server creates an unique identifier that will determine the session id. While cookies can have a long expiration time, usually sessions have a predetermined timeout (20 minutes). Cookies are completely controlled by the code of the page and can be created, changed and destroyed using appropriate commands - as we saw in the aforementioned article. That is true for sessions as well, however the session unique identifier is always created when an ASP page is opened. By default, when an ASP request is made to the server, the session is automatically started and the unique identifier is stored for future use. The session ends after 20 minutes by default (it's possible to change that value programmatically or in IIS).

ASP, CSS & jQuery: dynamic styles and jQuery code for accordion menus

Tweet

In a recent project I developed, I had to create a dynamic accordion with jQuery. The accordion is basically a gallery menu, and the tree structure of the menu itself is taken from a table in a database. What I had to do was to apply different styles to elements that needed to have different ids. Why different ids? Because I had to apply different behaviours to every single tree element with jQuery.
To do so I created a loop to style the elements and dynamically generate the related jQuery code. The following example uses asp, css style sheets and jQuery, all together.

We start from here

Some assumptions have to be taken. First of all, there's a database with a table containing the menu. Something like:

m	sm
Drawings	Hand drawn
Drawings	Printed
Photos	Colour photos
Photos	Black and white

The above table is called menugallery. What we want is a tree menu with an accordion effect. The menu will be dynamically generated from the table.

CSS: pure css GUI icons

Tweet

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

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

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

Web site statistics: why are they important?

Tweet

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

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

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

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

Tweet

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

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

Web Design: animated photos

Tweet

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

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

Web Design: resizeMyBrowser

Tweet

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

ResizeMyBrowser

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

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

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

Happy coding to all of you!

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

Tweet

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

The basics

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

print newid()

the result will be a unique identifier like:

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

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

ASP: the Server.MapPath method

Tweet

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

The syntax

The basic syntax of the method is:

Server.MapPath(path)

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

ASP: export data to Ms Access

Tweet

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

Preparing the target

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