the web thought

CSS and HTML5: background image in buttons

2013-04-23T07:00:00.000+02:00

Would you like to do something like:

Or maybe you prefer it another way, like:

They look the same, don't they? However they are a bit different in the making. Let's see how...

The first way to do such thing is to use the <button> tag:

<button> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" /> </button>

The image is just like any text we usually put inside the tag.

Yet there's another way, which uses background-images in CSS. I personally believe that it is a better way of handling the button.
In the above examples, the first is an image (as you can see you can't click on it), while the second is live (it's an actual button you can click but that does nothing).

In order to do it the second way, we need to create a short style, like:

<style> .btn { height: 37px; width: 37px; background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png'); background-repeat:no-repeat; } </style>

And then, we need to insert our button (assigning the related class) where we want to:

<button class="btn"></button>

And that is all.

Short post, for very very busy days. See you next time!

jQuery: scroll to the top, to a specific container and to the bottom of a page

2013-04-18T07:00:00.000+02:00

Some time ago I wrote an article where we discussed how to use JavaScript to create a smooth scroll to the top of the page.
Today we are going to see how to do it with jQuery, and we are going to do it in order to scroll to the top of the page and even to the bottom of the page. After that we are going to create a simple jQuery function that will scroll to a specific element of the page.

Interested? Ok... follow me.

Top and Bottom
The code is very simple. First of all, include the jQuery library in the head of your document (this is valid for the second example as well):

<script type="text/javascript" src="yourPath/jquery.min.js"></script>

After that, we create two links: one for the scroll-to-top, and one for the scroll-to-bottom. Remember to place them where you need them!

<a href="javascript:scrollToBottom()">Bottom</a> <a href="javascript:scrollToTop()">Top</a>

Now, again in the head of your document the jQuery script:

<script type="text/javascript"> function scrollToBottom() { $('html, body').animate({scrollTop:$(document).height()}, 'slow'); } function scrollToTop() { $('html, body').animate({scrollTop:0}, 'slow'); } </script>

And we're done.

Scroll to a specific point
Now... if we need to scroll to a specific point on a page, we can create a target element, like a div:

<div class="scrollTarget">We will scroll to here</div>

Now we insert the "void" link where we need the scroll to be triggered by a click:

<a href"javascript:void(0)" onclick="scrollPageTo('.scrollTarget', 15)">Scroll to div</a>

We pass two parameters to the function: the first is our target and the "." or "#" is needed depending on the type of selector (class or ID) we used (in our case it's a class so "."). The second parameter is used to scroll to a position which is just 15 pixels above the target. The second parameter is optional, but it can be used to make the scroll as perfect as we need it.
The function has to be place in the head of our document:

<script type="text/javascript"> function scrollPageTo(myTarget, topPadding) { if (topPadding == undefined) { topPadding = 0; } var moveTo = $(myTarget).offset().top - topPadding; $('html, body').stop().animate({ scrollTop: moveTo }, 1000); } </script>

I must say I've found the above snippet somewhere a long time ago and I can't remember where. I'm sure I've used it more than once in web pages and I have surely modified it somehow.

In any case, there we are.

Take care and see you next time!

ASP: pass a variable to JavaScript

2013-04-16T07:00:00.000+02:00

One of the most often asked question in forums is "how do I pass an ASP variable to JavaScript?"
It is quite common to find out that people ask the question the other way round: "How do I pass a JavaScript variable to ASP?"
Ok, the two things are completely different and they involve completely different solutions.

First of all, let me explain something you might already know. ASP (or to be precise VBScript) is a server side language, while JavaScript is a client side language. The two work on different levels: ASP is executed before the page is completely loaded, while JavaScript works only after that. For that reason we cannot pass a JavaScript variable to ASP without reloading the page.

Say that, if we need to convert a JavaScript variable to ASP, we need to pass it using the page URL and get the variable or use a form a submit an hidden value. Those are simple solutions, but - I must say - not really elegant solution.
Let's see an example. The JavaScript part (to be inserted in the head of the document) could be something like:

<script language="javascript"> function GetHidden() { document.form1.action="http://YourPageName.asp"; document.form1.submit(); } </script>

The HTML part could be:

<form id="form1" runat="server"> <a href="#" onclick="GetHidden();" >Click Here</a> <input type="hidden" id="txt1" name="txt1" value="ourTestValue" /> </form>

And finally our ASP code:

<% dim strVal strVal=Request.Form("txt1") %>

What about the other way round: pass an ASP variable to JavaScript. Well, that is much much easier!
Suppose our ASP variable is "ASPVariable" and our new JavaScript variable is "JSVariable", the JavaScript code would be:

<script language=javascript> var JSVariable = <%=ASPVariable%> </script>

Simple as that.

I hope you find the post interesting enough. Keep on following the web thought.

PS: this is the 400th post! Wow, I couldn't believe it when I saw it.

CSS: create a post-it note

2013-04-11T07:00:00.000+02:00

I've recently needed to create some sort of post-it note for a web site. The general look of the homepage was like a working desk, and it was suggested to add a yellow post-it somewhere in the upper right corner of the viewport.
Because I know that time is money and that we don't really need to reinvent the wheel, I have collected some solutions I've found on the web.
If you're interested, please keep on reading.

Create a Post-it Note with CSS3

The 100% CSS Post-it® Note

Hello everybody!
This is not an image!

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

CSS: post it note

Ms Access: database administrator

2013-04-09T07:00:00.000+02:00

Today I would like to share something that I've found a long time ago (exactly around 2008). The thing is I still find it useful today while at that time it has saved me in critical situation a lot of times.
It is called DBAdmin and I think you should have a look at it if you administer MS Access databases over the internet.

"StP Database Administrator (DBAdmin below) is a tool that allows you to manage your MS Access databases through your browser, providing various set of functions you can perform with your databases, without having downloading them, changing and uploading again. Most of features needed for database management are included, you can even create a new blank databases on-line."

The things you can do with DBAdmin are incredible and because we don't really want to download-change-upload our mdbs wasting time, the tool is a perfect companion.

Have a quick look at the tool page and let me know what you think.

CSS: rotate background images

2013-04-04T07:00:00.000+02:00

We can use CSS to rotate elements in a web page. You may already know about it, but a friend of mine asked me how to rotate a background image, without rotating the container.
Hmmm... that was a question, but the answer surprised me when I found how to do it.
Are you interested? Well, get into the article and see how to do it.

The basics
As said, we can rotate a container using transform: rotate. Just consider that you element has a class="myContainer". We can rotate it by using a rule like:

.myContainer { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

With the above we rotate the container by 30 degrees.

To rotate or not to rotate?
We can now consider the above and decide to rotate only the background image inside the container, or to rotate the container but not the image inside it.
Ah! Is it possible? Yes, it is.

Let's see how to rotate the image but not the container.
Considering the above container (class="mycontainer") we can apply any rule to it, but we have to position it in a relative way and hide the overflow.

.myContainer { position: relative; overflow: hidden; }

Now we need to create a pseudo element, position it absolutely with a transformed background:

.myContainer:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(bckImage.jpg) 0 0 repeat; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

Note that we need to set the z-index to -1 in order to make it appear below the container.

What about a fixed background with a rotated container?
We need a pseudo element again. But first we need to rotate the container:

.myContainer { position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

Ok. Now we use the pseudo element and we "counter-rotate" the background. Ah! That's the trick!

.myContainer:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(bckImage.jpg) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }

And that's it.

Compatibility?
All the above works perfectly in IE9, Firefox, Chrome, Safari and Opera. We have little trouble with IE8: the transformation is not working, but the background will appear.IE6 and IE7 don't know anything about pseudo elements, so nothing will be applied.

Let me know what you think about the examples, as usual, using the comments section below.

jQuery: calendar and datepicker plugins

2013-04-02T07:00:00.000+02:00

Holidays time - short post. I hope you find it useful.
Now on with the calendar and datepicker jQuery plugin parade!

wdCalendar – jQuery Based Google Calendar Clone
"wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database.
wdCalendar is free (open source LGPL license), easy to use, and with great functionalities."

Event Calendar
"Event Calendar is a jQuery and ColdFusion event calendar that works a lot like the Google Calendar system. With Event Calendar, you can share calendar information throughout your organization. There is also a simple user facade, that you can extend, to help control user rights."

jQuery.calendarPicker
"This component is a light-weight calendar/date-picker.
Some features:

supports internationalization (supports do not necessary means it is implemented:-) )
supports changing current date
supports mouse wheel scrolling
supporting (deferred) callback on date selection
supports variable number of years, months and days
supports next/prev arrows"

Date Picker - jQuery plugin
"Date Picker component with a lot of options and easy to fit in your web application."

FullCalendar
"FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license."

jQuery Datepicker
"A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges."

Multiday Calendar Datepicker JQuery Plugin
"Multi-day, multi-month animated datepicker jQuery plugin that weighs in at 14KB with the uncompressed development version."

jQuery Frontier Calendar
"Full month calendar jQuery plugin that looks like Google Calendar."

jQuery UI datepicker

Calendario
"Today we want to share a flexible calendar concept with you. Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month."

Happy Easter

2013-03-31T00:30:00.000+01:00

Relational databases: some simple rules (part 2)

2013-03-28T07:00:00.000+01:00

This is the second part of the two parts article "Relational databases: some simple rules".

In the first part we have seen the ideas of tables and the way we can relate them.
And now... the conclusion!

Primary and foreign keys
We now need to move on a bit, but please keep in mind the example made in the first part of the article: two tables, with a relation for the state column.
The names table has the following columns: ID, name, surname, address, post code, city, state.
The states table has the following columns: ID, state.
In the persons table, the “state” column will contain only IDs related to the states table.
The ID column in the person table is a primary key. The ID in the state table is a primary key.
The “state” column in the persons table is a foreign key.
Quite easy, isn’t it?

And next? Queries
Following the above ideas, we can start to build our new database. Usually, we start from creating tables structures and then we fill them with records. But after that? How can we use the information stored in tables?
In the web thought, we have seen many ways of using data stored in a database. We can use different programming languages in order to query our data, however the query commands and the resulting recordset is what really matters.
We cannot here list all the commands available in each environment used to query database. It is important here to consider that the basic rules always apply. There are many query builder around the web, and many tutorials that explain how to query a database, however we basically need to point to a table – or a set of related table – and fetch the data we want.
Once we have the information, we can show it and interact with the records. In fact we have different kind of queries: we can select records if we need to show them (possibly in a ordered form); we can update a table, delete records or insert a new record. All those operations (among others) are made using queries. So, if tables are the core of a database and relations are the way tables work together, queries are what we need in order to interact with records contained in tables.
There are in fact other ways we can use when we need to work on records contained in tables. In SQL Server for example we have views and stored procedures. However for the purpose of this article we are not going to see them. If you’re interested, the web thought has many articles which can guide you on the use of SQL Server queries, stored procedure, functions etc (just use the search section, please).
As a general rule, building queries is an easy job. Creating an efficient query is far more difficult (specifically in complex queries). What I suggest is to create the query in the its simpliest form and then work on it in order to make it faster and more efficient.

Conclusion
This two parts article was conceived because a friend told me to do simple tutorials on different subjects. One of them was the idea behind a relational database.
Writing about it isn’t really easy and being precise and short is a real challenge. As you may know there are hundreds of books (from “for dummies” to “for experts”) about it, and I surely don’t have the conceit to be a real expert. I’ve been creating and using relational databases since around 2000. Nobody taught me what I know... or – to better say it – many people on the internet have taught me what I know today. The rest is basically experience. But surely if I could have found an article like the above, surely I would have understood some basic rules which should be always taken into account when designing a relational database. I hope you have found the two articles interesting enough.

As usual, please use the comments section below if you want to share your thoughts.

Relational databases: some simple rules (part 1)

2013-03-26T07:00:00.000+01:00

It doesn't matter what we prefer to use, either Ms Access or SQL Server or Oracle, or even MySql, but when we want to create a new database, we really need to consider its structure, plan it and finally create all the database elements.
To do such a thing might seem easy – and in general it is – but a good development plan is what we need to avoid pitfalls and future issues with the structure of the database. The complexity of a database is surely one of the things to be considered, in fact it is clear that a more complex database will surely be more complex to develop.
Some simple rules can be taken into account and in this two parts article we are going to see some important points we need to keep in mind when planning a new database.

Tables
When building a new database, the core of it will be a set of tables. Tables are made of rows and columns: each row consists in a record, each column defines the information contained in a row.
For example a list of persons could have columns like: name, surname, address, post code, city, state etc.
In each row we will have the actual information like: John, Smith, 22 Acacia Avenue, 12345, London, United Kingdom. “John” is a value of the column “name” and stays in a field. All the information in a row consist in a record.
Think it as grid with column names: the actual records stay just below the column names.
Now let’s take a big step ahead.

Relational database
Allow me, please, to stress out a bit the relational database concept, because it is very important.
In order to simplify the concept we can make a simple example. Consider the persons table above. It’s a list of persons with the respective home address. We know that, for example, we are going to repeat the city or the state people live in for each record. Let’s say we have a list of 10000 names, then we are going to have 10000 cities and states. Just as an exercise, we can create that list and see how many times the very same city or state appear in the main table. That means, for example, we can create a second table with just the list of all the cities and relate it to the first table. That will decrease the number of information in the first table... but how?
Ok, we need to understand that more deeply.
In the first example we need to create another column which will be always the first column we create in a new table: the ID column.
The ID column contains a unique identifier for the record: every single record will a unique number which will identify it without any doubt. IDs help us a lot when we need to query tables and if used with indexes can speed up queries and make them more efficient. But in our scenario and the purpose of this article, we need IDs for other reasons.
Our persons table will have 10000 records and columns like: ID, name, surname, address, post code, city, state.
As said, because we have 10000 records, we will surely repeat at least cities and states quite often, especially if our list is related to a specific and not too wide area like Europe. Consider that in the world there are – more or less – 196 countries and that there are 193 countries which are members of the United Nations. As you can imagine, in our persons table we are going to repeat the country a lot.
Another step: the size (in terms of disk usage) of our table is obviously related to the amount of data we have in it. The more record we have, the bigger the size will be. More information (in terms of characters in words) we store, bigger the table will be.
In large databases, table size is important for different reasons and not only in relation with disk usage: the bigger the table, the slower the query. IDs and indexes can help us, but relations can be just the perfect choice.
In fact, we can create a new states table with just two columns: ID and state. If we want to consider all the 193 states, we can put them all. In the persons table, the state column will not contain the state anymore, but the ID of the state table.
I don’t want to get into a long discussion, but if you stop for a moment and think of that new architecture, you will surely understand that it will save a lot of space and the size of our persons table will decrease by a significant amount in terms of size and disk usage.
AH! We have created our first relation between the persons table and the states table.
The above can be done in different situations, and tables can have multiple relations. In the above scenario, we could create a cities table (if it makes sense). However, if you imagine a complex database, you can definitely imagine many situations where a relation is needed.
That is the solid idea on which we must build our databases. That should always be our first rule, written in stone on our desk. Every time we create a new table we must think about how we can split it, how we can create relations and how we can save CPU and disk usage with relations.

Next time the second part of the article.

CSS3: border-image

2013-03-21T07:00:00.000+01:00

With CSS3 we can use images as border of an element. Apart from using the normal border styles already available in CSS, we can now make our web pages more colourful and attractive (if you really like colours and shapes!).
Just to go directly to the core, we can use the following style for, let's say, all divs in a document:

div { -webkit-border-image:url(myborder.png) 30 30 round; -o-border-image:url(myborder.png) 30 30 round; border-image:url(myborder.png) 30 30 round; }

The border-image property is in fact a shorthand property. As you can see from the above example, we are using different values which are:
1) border-image-source which is the path to our image;
2) border-image-slice which is the inward offsets of the image;
3) border-image-width which is the widths of the image;
4) border-image-outset which defines the portion of the image that goes beyond the box;
5) border-image-repeat which sets the way the image will be repeated.

Before exploring further the above, we should consider that all the values, if omitted, are set to the default values. Apart from the first (the source) which can't be obviously omitted, the default values are - in order: 100%, 1, 0, stretch.

The border-image-source property has a simple syntax:

border-image-source:url(pathToTheBorderImage.png);

If the image is not found, or it is set to none (which is absurd in any case), the border-style property is used. That means we can use the border-style as fallback for not supporting browsers (see below).

The border-image-slice property has values as a percentage, number or "fill". Percentages, relative to the image itself, represents the width for horizontal offsets and the height for vertical offsets. When using numbers we are referring to pixels in a raster image and vector coordinates in a vector image. "Fill" preserves the middle part of the image.
I know it seems quite complicated and I believe it is. We should consider some sort of grid, dividing the image in 9 regions: the 4 corners, the 4 edges and the middle. The middle part is treated as transparent (unless we use "fill"). We are setting values for the other 8 parts of the image. Values follow the rule that if they are omitted they are the same as the previous value.

The border-image-width works the same way as the border-image-slice property. The only difference is in the "fill" value which is "auto" in this case.

Just a note at this point: please follow me to the end of the post and consider the information I'm giving as just... well. information.

The border-image-outset property determines - as said - the number by which the image extends beyond the border box. That is on each side (top, right, bottom and left).

Finally, the border-image-repeat can be set to "stretch" (the image fills the area), "repeat" (the image is tiled) and "round" (the image is tiled but if it doesn't fill the area, the image is rescaled).

As you can there's plenty of possible values to be set, which gives us a lot of freedom but here comes the bad news: compatibility!

The 5 different properties listed above are not really working on any browser to my understanding. The only way to use border-image is to use the shorthand property as described in the first example.

But, my friend, there's still a quick solution. If you really want to use border-image you can always rely on a border-image generator like this one.

And in the future when we will have full support, we might need to fully understand how to properly use all the available properties to create interesting borders.

Please share your experience on the matter by using the comments section below!

ASP: conditional statements with If...Then...Else...ElseIf

2013-03-19T07:00:00.000+01:00

In ASP we can use conditional statements in different ways. The basic syntax we are used to, is If ... Then ... Else ... End, however we will see that there are some interesting things about it.

First of all let's consider a simple conditional statement in ASP. As you already know, we do not use any brackets or parenthesis. A basic example could be:

<% Dim numVar numVar = 5 If numVar = 5 then response.write("The variable numVar is 5") End if %>

The above is just checking if numVar is equal to 5. If so, the text is output ("The variable numVar is 5"). Otherwise, nothing happens. It's obvious that the example will always output something, because 5 is always equal to 5.
Moreover, we must remember that in ASP we cannot set a value of a variable inside the conditional statement. The use of the operators (like "=") inside a conditional statement is always used only to compare two values, variables and values or variables and variables.

If we need to create a more complex conditional statement, we can introduce "Else". That means we can check if a condition is met, but if it's not we can decide what to do. What stays after the "Else" is what's happening if the first condition is false.

<% Dim numVar numVar = 5 If numVar = 6 then response.write("The variable numVar is 6") Else response.write("The variable numVar is " & numVar) End if %>

The first condition is clearly false and the first response.write will be ignored, while the second will be executed.

We can create nested conditional statements, but believe me, in many situations, they can create strong headaches. We normally prefer to use a conditional statement at the time, however there's something more.

We can check multiple conditions using "ElseIf" which is a new conditional statement, depending on the first conditional statement.
Let's try to simplify it by using simple words:
If something is true Then do this ElseIf second something is true Then do this etc. Obviously we cannot use an "ElseIf" not "contained" in an If statement.
Let's see an example:

<% Dim numVar numVar = 5 If numVar = 6 Then response.write("The variable numVar is 6") ElseIf numVar = 5 response.write("The variable numVar is 5") Else response.write("The variable numVar is " & numVar) End if %>

As you may notice, the above code will always output "The variable numvVr is 5".

I think that a good use of ElseIf can be very beneficial to our code, especially when we need to check different variables for multiple values.
If you have used it in special and interesting ways, please share your thoughts in the comments section below.

HTML5: geolocation

2013-03-14T07:00:00.000+01:00

With HTML5 is now possible to use the target browser in order to determine the location from which the user is accessing the web. It is not, as you may understand, a GPS location (unless the user is surfing from a GPS capable device), but it can be quite interesting in some cases where special services are supplied on a web page.

How can we develop a geolocation service on our web page?

Well, first of all try and see the final effect: go here and enjoy. After that, please get back on the web thought...

First of all let me say that all location services on the target browser must be granted by the user. As you may have noticed by visiting the above live example, the browser has asked you permission for the use of location services (unless you've granted permanent access to your location).

But how is it working?
Well, this time is not just a line of code. In fact, we need to use a little snippet. Everything's working around the geolocation API.
Let's see a complete example:

<button onclick="getLoc()">Where are you?</button> <div id="errMsg"></div> <div id="map"></div> <script> var x=document.getElementById("errMsg"); function getLoc() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPos,showErr); } else{x.innerHTML="Geolocation not supported by this browser.";} } function showPos(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("map").innerHTML="<img src='"+img_url+"'>"; } function showErr(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request" break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information not available" break; case error.TIMEOUT: x.innerHTML="Request timeout" break; case error.UNKNOWN_ERROR: x.innerHTML="Unknown error" break; } } </script>

The script itself is quite easy to understand, but I will here explain some important things:
1) the two divs at the beginning of the above snippet are used to show possible error (errMsg) and the resulting map (map);
2) the getLoc() function is used to determine the geolocation;
3) the showPos() function is actually showing the map by inserting it in the div with id="map";
4) the showErr() function is replacing the innerHTML of the div with id="errMsg" with a possible error message (something went wrong).

If you spend a little time on studying the above script, everything will be quite clear.
What about compatibility? Well, all the latest version of all the available browser are supporting geolocation. Good news eh?

If you like, you can share your thoughts by using the comments section below. If you don't want... well.. don't.

CSS: cursor

2013-03-12T07:00:00.000+01:00

As you surely already know we can change the cursor type using CSS.
They way we do it is very simple. It is enough to use the cursor property and apply it to any element in our web page:

<style> .myDiv { cursor: crosshair; } </style> <div class="myDiv">The cursor here has a crosshair shape</div>

What are the different option we have?
The answer after the break :-)

In order to see the different effects, please move your cursor on the appropriate cursor type in the following table.

URL URLs to custom cursors. The live test won't work obviously.

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

s-resize

se-resize

sw-resize

text

w-resize

wait

inherit

HTML5: telephone numbers on web pages

2013-03-07T07:00:00.000+01:00

Every day on TV we hear news saying that most of the people in the world is surfing the web using a mobile device. You are probably reading this very article with your iPhone or Galaxy, or maybe using your favourite tablet.
As many of the above mobile devices are actually capable of making phone calls, we can insert telephone numbers on web page and make them clickable, so that any mobile user will be able to use the link to call the shown number.

The way to do it is quite simple. In fact we can use a normal <a> tag with the tel protocol:

<a href="tel:+XX0123456789">Click to Call +XX0123456789</a>

Consider that instead of XX we need to put the country code (for example 39 for Italy). That is because our web page will be seen by people all over the world and not only from our country.

At the same time it is possible to pause the dialling by inserting p characters (each p a delay of one second). We can use w characters when we need to wait for a tone.

When we are browsing the page from a desktop computer, the link will not appear as clickable, unless the pc itself is ready to make phone calls through specific software.

As we use the tel protocol, we can use the fax protocol for fax numbers.
And last but not least, Skype uses the callto protocol, so we should be careful and use a way to detect the user agent and propose one or the other protocol according to the user device.

SQL Server: compare tables

2013-03-05T07:00:00.000+01:00

When we import, export or synchronise tables, it's a hard job if we have many records.
In the past, I've found some difficulties when I need to compare two tables in SQL Server.
The tables contained different records and I needed to consolidate them in the first table.
The first thing I wanted to do was to actually see which were the differences: I needed a list of records in order to understand the situation.
I've found a good solution for that, and let me say, a quite unexpected solution indeed.

The UNION operator works quite well if we need to compare two tables. It's quick and handles NULL values, while a join clause or a WHERE condition don't.
Assume we have two tables and we need to get all differences in both. The magic trick I've found is to GROUP the union query on all columns and count all columns. The count is working because for any not completely matched record in any GROUP BY clause column, the COUNT(*) will be 1. Exactly what we are looking for.

Ok, now let's see an example: two tables (tabA and tabB) containing three columns (ID, Col1 and Col2).
The UNION query will be:

SELECT MIN(TableName) as TableName, ID, Col1, Col2 FROM ( SELECT 'tabA' as TableName, tabA.ID, tabA.col1, tabA.col2 FROM tabA UNION ALL SELECT 'tabB' as TableName, tabB.ID, tabB.col1, tabB.col2 FROM tabB ) tmp GROUP BY ID, col1, col2 HAVING COUNT(*) = 1 ORDER BY ID

The query will return all records from one table that don't completely match in the other. Moreover, it returns all records that don't exist in one of the two tables.
Just to be clear, the query returns records that
1) are not present in tabA, but are present in tabB;
2) are present in tabA, but are not present in tabB;
3) all rows that do not completely match all columns.

The above trick is quite different from a way to compare two table and insert the missing data from one table to another.
In this case we need to consider an example.
Two tables: tabA and tabB. Each table has two columns: ID and name.
We need to add to tabA, all the missing names that are in table tabB. That means, compare tabA with tabB, if the record exists in tabA, do nothing; if the record doesn't exist in tabA, add it.
The query will be:

INSERT INTO tabA (name) SELECT name FROM tabB WHERE name NOT IN (SELECT name FROM tabA)

And that's it.

I hope you've found the above interesting enough. Just drop a line in the comments section below.

JavaScript: how to use external files

2013-02-28T07:00:00.000+01:00

As we already know, because we saw it in the past here on the web thought or elsewhere, we can use JavaScript snippet by placing the code in the head and/or the body of our documents.
However, it's good practise to create external JavaScript files, especially when we use standard functions all over our web site.

In this short article, we are going to see how to do it.

Creating our own JavaScript library is not that difficult.
What we basically want to do it here is: create an external .js file, embed it in our page and finally use a function from the external file.

Let's create the .js file.
To do so, we create a new file in the root of our web site. Like creating a new txt file, but with a different extension; we name the new file myJs.js. Open it with your favourite web editor and place the following code inside it:

function popUp() { alert("Hello from the web thought") }

Ok. Save and close the myJs.js file.

Now open a new html document and place the following snippet in the head section:

<script src="myJs.js"></script>

In the body of the document, just insert the following snippet:

<input type="button" onclick="popUp()" value="Click here!">

Just open the newly created html file with your favourite browser. The effect will be that when we click the button, an alert will popoup as expected.

The magic is basically done by embedding the popUp() function inside the web document by using the src="fileName" in the head of our document itself.

Just remember:
1) we use external files when we need to use specific functions all over the web site. Doing so we don't need to write the functions in every document;
2) we do not use the <script> tag inside the .js file: we just put the functions one after the other;
3) we can use external .js files to be placed in the head of our documents and even to be placed in the body of our documents (the script will be run when the page loads).

And that is all for today.
Hoping that I will find the time to write again next week...

jQuery: menu plugin and ideas

2013-02-26T07:00:00.000+01:00

If you want to create menus using jQuery, here is a good list of plugins and ideas to consider.

NavDock jQuery Plugin 1.2
"NavDock is a jQuery plugin that transforms your menu into a dock style menu."

jQuery.tn34.facets

jOrbital menu
"Group objects with similar functionality into one button. Save space and give users more interaction. Move your mouse over the share button to see what I mean."

jMenu : Horizontal navigations with unlimited dropdown sub-menus
"Menu is a jQuery plugin that enables us to create horizontal navigations with unlimited sub-menus.
Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown).
The markup of the menu is pretty clean as it makes use of nested lists.
The look and feel of the output is set in a CSS file so updating it without touching the JS code is possible."

Drop Menu
"With this script you can make nice and interactive drop down menus. The advantage of this script is that it not only gives you the ability to make list drop down menu. You can also use a div as drop down element."

jQuery and CSS3 Awesome Slide Down Box Menu
"we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering."

Apple Navigation with CSS3
"Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques."

CSS: Layers

2013-02-21T07:00:00.000+01:00

We can use CSS to overlap elements on a page. We are talking about putting one element on top of another.
To do so we can define the z-index. Something like:

Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus.

It's very simple and the effect can be interesting in many situations.

The way it is done: two divs with different classes (a and b).

<div class="a"> Maecenas vel commodo magna. Aliquam facilisis, erat eu rhoncus elementum, elit eros venenatis risus, vitae tincidunt dui lorem a tellus. Integer non magna a mi euismod ultricies. Aliquam sit amet tortor est. Vivamus sollicitudin neque et justo vestibulum dignissim. </div> <div class="b"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum tincidunt turpis vitae rhoncus. Donec massa enim, fringilla nec vestibulum at, congue hendrerit dolor. Integer rutrum volutpat condimentum. In consequat ornare erat, ac condimentum diam molestie ac. Nullam ligula lacus, posuere vel rhoncus at, ullamcorper eget lacus. Etiam non nisi urna. Vivamus elementum orci sed diam rhoncus vitae pharetra dolor commodo. Vestibulum varius cursus orci nec ullamcorper. Curabitur nulla sapien, laoreet eu convallis ac, luctus in tellus. </div>

Then we need to style those two divs:

<style> .a { position: relative; top: 30px; left: 5px; z-index: 2; background-color: #330000; } .b { position: relative; z-index: 1; background-color: #FF0000; } </style>

The b div will stay on top of the a div because of the z-index.
Basically when we need overlapping elements, the z-index property can be set to determine the order in which elements overlaps. The greater the z-index value the more the element will be placed in front. If no z-index value is set, the last positioned element in the normal html flow will be positioned in front.

ASP: CDate

2013-02-19T07:00:00.000+01:00

CDate is an ASP function that converts a valid date and time string to a Date Type value and returns it.

Because of the above we need to use another ASP function in order to be sure to convert a valid date. The function's IsDate.

In the following short post, we are going to see how to use both functions and create a short script that converts a date.

First of all, let's talk about the IsDate function. Because it uses the local settings to determine if a date is really a date, we should be careful when using it. For example, if we think about a date containing "April" as month, we should remember that the fourth month is not called "April" in all languages.
Because of that, remember to verify the language setting of your system.

The CDate function has a simple syntax:

CDate(Date)

where Date is a valid date expression. We can use functions like Date() or Now() as well.

Now, let's put the two aforementioned functions all together.

<% Dim myDate, myDateType myDate = "April 18, 1920" If IsDate(myDate) Then myDateType = CDate(myDate) Response.Write(myDateType) Else Response.Write("Bad date formatting!") End If %>

which will output:

18/04/1920

4/18/1920

depending on the date and time setting of the hosting system.

JavaScript: innerHTML

2013-02-14T07:00:00.000+01:00

In the following short post, we are going to take advantage of JavaScript and its innerHTML method.

Every DOM element can be manipulated using JavaScript. With the use of jQuery we can do great things, but if we need to do something more basic, it is probably better to use JavaScript directly, without the help of the aforementioned great library.

We can manipulate any DOM element using its id as selector together with document.getElementById. The advantage is that we can manipulate the inner html part of the element.
Let's see some example.

First example
Try the following example...

<script type="text/javascript"> function changeIH(){ document.getElementById('theElem').innerHTML = '... enjoy yourself'; } </script> <div id='theElem'>Welcome to the Web Thought...</div> <input type='button' onclick='changeIH()' value='What's next?'/>

Should I explain it? It looks quite simple... Try it for yourself and see how by clicking on the button the inner HTML of the div is changed.

Second example
This is different. Let's change the text according to a user input:

<script type="text/javascript"> function changeIH(){ var userText = document.getElementById('userText').value; document.getElementById('theElem').innerHTML = userText; } </script> <div id='theElem'>Chose a new text...</div> <input type='text' id='userText' value='New Text' /> <input type='button' onclick='changeIH()' value='Submit'/>

Fill in the input box and press the button: the text "Chose a new text..." is replaced with the new text.
As you can see we can really do anything we want and manipulate the HTML inside a specific tag.

I could go on with many more example however I think we got to the point.
I leave the rest to your imagination.

CSS: visibility: hidden vs display: none

2013-02-12T07:00:00.000+01:00

Writing for the web thought becomes more complicated everyday. It goes down to the fact that I've wrote more than 380 posts since July 2010 and thinking about new things to talk about is getting harder and harder. However, some times a short conversation with a friend or a colleague might ignite a sparkle and might give me new ideas for a short post like the following.

I was in fact talking with a friend when it came to my mind that the difference between visibility and display properties in CSS is some times completely missed. Specifically, the difference between visibility: hidden and display: none.
The point is not that complicated, so in just a few words we are going to see the difference, and we are going to explore when to use visibility instead of display.

The situation
We have a DOM element in our page and we want it to "not be shown". The way we are going to make it invisible, is indeed affecting our whole page.
Usually, we use two CSS properties: visibility and/or display. But which one is better? Do they have the same effect on the page?
First thing: there's no better property. There must be a reason why we have two different properties which do the same thing.
Second: they apparently do the same thing, but they have different effect on the page.

Visibility: hidden
We can set visibility to hidden or display. The two values have obviously the opposite effect: the first hides the element, the second makes the element visible.
The point here is that the element - even when hidden - will always take up space. So, if we consider an element with a specific height and width, it will always take up that space - even when hidden.
It means that if we have, for example, three elements in a row, and we hide the second, the first and the third won't get together at all - the space between them will stay the same. The hidden element stays in the normal document flow.

Display: none
I'm sure now you know what happens when we use the display properties.
When we set it to none, the element is someway removed from the document flow and the surrounding elements will collapse, taking the space that was once taken by the hidden element.
The difference is not that small. It is indeed a big difference, and it heavily affects the document flow.

As you can see it's quite redundant for me to say when to use one property against the other. It really goes down to what we need. Usually, when we want to make an element disappear, we don't really want to leave a blank space. In fact, leaving a blank space is often the same as not hiding the element.

I hope you find the post useful, Leave your thought in the comments section below!

SQL: AND vs OR (operators)

2013-02-07T07:00:00.000+01:00

In SQL Server we can use different operators in our queries: AND, OR, LIKE, BETWEEN and so on. In this short post we are going to see AND and OR because I've noticed that some could get confused by the results obtained when using them.

So, let's clear the situation a bit, because we really need to know what we are doing!

General
Just to be clear, there's a big difference between AND and OR, in fact they both return a Boolean data type with a value of TRUE or FALSE, but:
AND returns TRUE when both Boolean expressions are TRUE
OR returns TRUE when either Boolean expressions are TRUE
That might sound confusing, but please take note of the difference above as a start.

AND
The operator combines two Boolean expressions and returns TRUE when both are TRUE. The operator is always evaluated first: so when we use different operators, AND comes always first. That's important, because if we use an AND operator together, for example, with an OR operator, AND is always evaluated first. To change that, we need to use parentheses.

In a query when we search records, we use AND when we want both expressions to be true. However we should consider the unexpected. Follow me...
The result of two TRUE expressions is TRUE. When just one of the two expressions is FALSE, the result is FALSE. When one expression is UNKNOWN: if the second is TRUE we get UNKNOWN; if the second is FALSE we get FALSE; if the second is UNKNOWN we get UNKNOWN.

Ok, I know it's complicated, but please just spend a few minutes to understand the above because it will save you a lot of time when an operator is not giving the expected result.

OR
The OR operator just combines two Boolean operators. It doesn't matter if just one of the two expressions is TRUE. As said, when we use the OR operator together with an AND operator, the AND operator is evaluated first.
Again, let's see the results when we use the OR operator.
The result of two TRUE expressions is TRUE. That is even if just one expression is TRUE:
TRUE OR TRUE = TRUE
TRUE OR FALSE = TRUE
FALSE OR TRUE = TRUE
Obviously two FALSE expressions will give us FALSE. If one expression is UNKNOWN, and the second is TRUE, we get TRUE; if the second is FALSE, we get UNKNOWN; and if the second is UNKNOWN we get UNKNOWN.

Please try again to understand the above, because it will really help you when things get confused.

Ok folks, that's all for today. See you next time...

ASP: URL Rewrite and IIS7

2013-02-05T07:00:00.000+01:00

Following a kind suggestion by a follower, today we are going to see how to use IIS URL Rewrite 2.0 for IIS 7.

First of all, what's URL Rewrite?

"IIS URL Rewrite 2.0 enables Web administrators to create powerful rules to implement URLs that are easier for users to remember and easier for search engines to find. By using rule templates, rewrite maps, .NET providers, and other functionality integrated into IIS Manager, Web administrators can easily set up rules to define URL rewriting behavior based on HTTP headers, HTTP response or request headers, IIS server variables, and even complex programmatic rules. In addition, Web administrators can perform redirects, send custom responses, or stop HTTP requests based on the logic expressed in the rewrite rules."

Rest assured, we can use it for a classic ASP site as well.
What we need to do is:
1) install URL Rewrite after downloading it from the Ms IIS site;
2) enable ASP.NET role service on IIS 7;
3) write a rule

Nothing very complicated. What we will focus on in the following post is how to write appropriate rules in order to change URL.

The use of URL Rewrite is quite simple. We need to open IIS Manager, select the Default Web Site and in the Feature View click on URL Rewrite. At that point, on the right panel we will be able to click on Add Rules and select Blank rule... and here starts the magic.

The next panel has all we need to use to set up a new rule.
First of all give a name to your new rule. After that we fill in the Match URL section. That is where we set what to look for or the URL we want to change.

Remember when we talked about Regular Expressions? No? Well go and see what we discussed on this post. We need to refresh those ideas because we need to use Regular Expressions to fill in the Match URL section.
For "Requested URL" select "Matches the pattern" and for "Using" select "Regular Expression". In the pattern filed insert the regular expression used to search for a candidate URL. This is where we create the rule used to match an URL to be changed to something else.
Some part of our patter are between parentheses which creates capture groups referenced in the "Action" section.
Now, select "Ignore Case" and go to the Action section.
Here is where we decide what the rule should do when a match is found. Because we want to rewrite the URL, we select "Rewrite" in the first list box. In the "Action properties" we need to write the way we want the URL to appear. Select "Append query string" and then apply.

As an example, we can suppose that our URL is like:

http://localhost/article/342/some-article-title

and we want it to appear as:

http://localhost/article.aspx?id=342&title=some-article-title

How?
It all depends on our RegEx. In order to match the URL we can use something like:

^article/([0-9]+)/([_0-9a-z-]+)

as explained on the IIS Ms site.
In the "Action properties" we can use the following expression:

article.aspx?id={R:1}&title={R:2}

Forget about the .aspx extension. The important thing here is the use of the capture groups (R1 and R2) which are defined in the match pattern (first RegEx above - see the parentheses?).

As you can see it is not very complicated. Or, just to be clear enough, it all depends on RegEx and we all know they are not really easy to understand.
However, there are many interesting tools on the web that can help us to validate RegEx like RegExr. All we really need to do is understand how Regular Expressions work.

Last but not least, I have to say I've never used URL Rewrite, but in order to help our kind reader who ask information about it, I asked some friends who have used and who are still using URL Rewrite: they told me it's perfectly working and, provided you know RegEx, it is quite easy to set up.

Enjoy and let me know what you think!

jQuery: chaining!

2013-01-31T07:00:00.000+01:00

We should all bless jQuery. It gives JavaScript a completely new face in terms of usability and easiness.
Considering the latest news about version 2.0, jQuery is quite alive and kicking...

I don't know how many of you know about chaining, but I think we should all try to understand how and why we should use it while writing jQuery code.

As a simple example, you know that we can manipulate DOM elements with specific jQuery methods. As beginners, if we want to manipulate an element more than once, we separate each method as follows:

$("#element").fadeIn('fast'); $("#element").fadeOut('slow'); $("#element").css('marginRight', '10px');

However, we can actually chain all those actions together:

$("#element").fadeIn('fast').fadeOut('slow').css('marginRight', '10px');

As you can see there's an immediate benefit: we write less code which means that our document will be smaller in size.
But that's not all (and definitely not the most important thing!)

First of all, let me say something important. You may think that using chaining we could end up with unreadable code. That's not true because jQuery doesn't care about spaces in code and the above code could be like the following without generating any problem at all:

$("#element").fadeIn('fast') .fadeOut('slow') .css('marginRight', '10px');

The above is surely more readable, but aren't we missing the "size" advantage?
Yes, we are, however we are taking another great advantage none the less.

Every time we use jQuery to manipulate an element, we search for the element itself (using the selector) and then we apply the chosen method. That operation takes time.
Look at the very first example: jQuery searches for the element in each line.
With chaining the element is searched just once: the code will run faster... no doubt about it!

Ok, ladies and gentlemen, that's all for today. See you next time.

SQL: which columns should have an index

2013-01-29T07:00:00.000+01:00

In SQL tables might have primary keys and indexes. The primary key identifies each record. The key must be unique, it can't be NULL and each table must have just one key.
Indexes are something different: they are used to speed up the queries on a specific table. That means we absolutely need indexes on large tables which we often query.

However there's something we need to take in account: indexed tables are slower to update because the index itself need to be updated as well. Thus, we need to carefully decide which are the columns we want to be indexed.

Deciding which columns should be indexed is not that difficult. Consider your frequently used queries and create index for those columns that are used in WHERE clauses. Obviously it's a general idea, because if we query a table to get 10% to 20% of the contained records, an index might be useless.
I suggest to use 1 or 2 indexes in a table: too many of them will definitely slow down your updates.

Generally indexes speed up and optimise queries against a table. However we should not over use them. In that regard, there is an interesting tool I found on the net which will analyse your database and determine possible improvements by suggesting indexes. It's call Automated Auto-Indexing and it's worth giving it a try.

We can get all the already created indexes in a database by querying the sys.indexes and the sys.index_columns system tables:

select * from sys.indexes select * from sys.index_columns

In addition, I've already explained how to create indexes without SSMS in another post and if you're interested you can go there and see for yourself.

SQL: subqueries

2013-01-24T07:00:00.000+01:00

In this short post, I would like to introduce the concept of subqueries in SQL.

A subquery is a query statement inside another query statement. As you already know the order in which a statement is processed is quite important. That is a basic rule like in maths: writing something like 2+2*5 is different than writing (2+2)*5. The first operation gives 12, the second 20.
In SQL the principle is identical.

In order to explain what I'm saying, let's try an example.
Consider we have a table (rankingTable) with a column (rank) with numbers that indicates a ranking. The higher the number, the higher the rank.
We can get the highest rank with a query like:

SELECT MAX(rank) as highestRank FROM rankingTable

Now we can use the above query and use it in a WHERE clause:

SELECT * FROM rankingTable WHERE rank = (SELECT MAX(rank) FROM rankingTable)

First, the subquery is executed, then the main query is executed considering the results of the subquery.

In general a subquery syntax can be explained like:

SELECT column_name [, column_name ] FROM table1 [, table2 ] WHERE column_name OPERATOR (SELECT column_name [, column_name ] FROM table1 [, table2 ] [WHERE])

The above is a SELECT statement, but subqueries can be used with INSERT, UPDATE and DELETE statements.

Subqueries are really powerful and the above examples are just a way of using them. In fact the subquery is in the WHERE clause. However they can be used directly in the SELECT statement or in the FROM clause as well.
As an example for the SELECT statement:

SELECT (number/(SELECT SUM(number) FROM table)) as myNumber FROM table

The result of the above is myNumber which represents each number divided by the sum of all numbers.

That's all for today. I hope you find the above info interesting enough.

JavaScript: void(0) and links that do nothing

2013-01-22T07:00:00.000+01:00

What is a web page after all? Isn't it a bunch of information linked to something else?

As you know, web sites without links don't exist. And if they exist they are basically dead. When we insert a link in a page, we generally want people to click on it and go somewhere else. However, some times we need to create links that do nothing. Or to better say, links that do not take the user somewhere else.

With JavaScript we can create links which can perform different action from actually linking to another page.
However this is not new to us. We already know the possibility of using links to show or hide DOM elements (jQuery is a great tool in that matter and it's JavaScript as well).
On the other side, here we are talking about something different. We will see how to use void(0), but we will see something else and we will make some considerations about it.

JavaScript in hyperlinks
As a start, you might already know we can embed JavaScript directly in links. Something like:

<a href="javascript: alert('The Web Thought')">Click!</a>

is perfectly working and when clicked, the link will open an alert box.
What we are doing here is quite simple. The alert in JavaScript is a method that returns a null value. That is why we can use it directly in a link.
In the above example, we are doing something very simple, but what if we need to do something more complicated? That's when we need to use void(0).

Void(0)
Void(0) is always returning a null value, avoiding the load of a new page if used in a link:

<a href="javascript: void(0)">Link that do nothing</a>

The above snippet will produce a link which does nothing when clicked.
What's the whole use of it then?
A simple example you can find on the Internet is the following:

<a href="javascript: void(myVal=10);alert('myVal= '+myVal)">Show the number!</a>

We set myVal to 10 and show it with an alert box. Simple as that. Everything is inside the link itself.
Ok... but... is all the above good?

Maybe not...
First of all, some of you might have risen an eyebrow: "Why don't we use onClick?".
Good question. And I generally agree with that. I do prefer to use onClick even if in a different way. However, should we use:

<a href="#" onClick="myJsFunc();">Link</a>

<a href="javascript:void(0)" onClick="myJsFunc();">Link</a>

Some says the first solution, some the second. And the reasons are quite important in both cases.
Generally developers prefer the void(0) solution, but there's something else about it which is more important. And this is my opinion.

My opinion
Ok, it's my opinion! It counts for what it counts.
Hyperlinks should be used to link to something else. It's a bad practice to use links that do nothing. Or better, links that are not links should not be used.
If we need to perform an action when a user clicks an element of the page, we can use the onClick event directly in the element. We can, for example, use jQuery (as I said at the beginning of the post) with a styled element (a div for example) that trigger some action when clicked.
Other solution: we can use a button. A button is born to be pushed. I know you might argue that a link is the same. However links are born to be clicked to go somewhere else. Buttons are born to be clicked in order to perform other action.

I believe it will be an open debate. But I would like to know what you think about it. Please leave a message in the comments section below, if you want to share your thoughts.

ASP: special characters

2013-01-17T07:00:00.000+01:00

One of things that newbies find difficult when trying to learn ASP is the way code is tructured and what all those special characters are there for.

In this short post we are going to see the most common special characters we can find in an ASP page:

&
'
_
:
.
<% ... %>
<%= ... %>

As you will see, some of the above might hide even little secrets and surprises.

The ampersand
The ampersand or "&" is used in ASP to concatenate strings.
Combining strings is easy:

<% Dim strName Dim strName1 Dim strName2 strName1 = "Hello" strName2 = "world!" strName = strName1 & " " & strName2 response.write (strName) %>

Result:

Hello world!

That was easy.

The apostrophe
The apostrophe " ' " is used for commenting code. In any case, the code after the apostrophe is never executed.

The underscore
The underscore "_" is used to span the code on multiple lines. I must say I never use this special character in my code, but there you are. If you want your code to span on multiple lines, use the underscore:

<% response.write ("This is a long string," &_ " and we want to keep it visible so that " &_ "it won' hide on the right side of the page!") %>

The semicolon
This one is quite obscure: we use the semicolon ":" when we need to put multiple lines of code on just one line. Isn't it crazy? Well, if you ever need to do it, now you know how.

<% Dim strOne Dim strTwo Dim strThree strOne = "1" : strTwo = "2" : strThree = "3" %>

Wow!

The period
We all know that with ASP we have objects because basically it is an Object Oriented Programming Language. Well, objects have methods and in order to specify an object method we use a period ".".
The object in fact is followed by its method, separated by a dot like in "myObject.Method".

The percentage
Percentage is used to delimit ASP code. This is easy:

<% ... ASP code goes here ... %>

Equal and percentage
This is used as a write shortcut: when we need to print something we can use <%= instead of response.write().

<% Dim strName strName = "Hello!" %> <%=strName%>

Result:

Hello!

Ok everyone. That's all for today.

ASP: variables naming convention

2013-01-15T07:00:00.000+01:00

When naming variables in ASP, we should consider some conventions.

Because the way we write code is quite important for us and, possibly, other people, we do need to keep things as much readable as we can. That means, for example, we should use indents when writing procedures and functions or we should follow a common structure in code blocks.

In general we need to make things easy to read and understand.
That is why there are common naming convention for variables. And in this article we are going to explore them.

Variable data types
As you may already know, when we create a variable we usually know what type of data it will be used for. In VBScript we don't explicitly set a variable data type, however by using prefixes we can help us and others to understand what is the intended use for the variable itself.
If you read code often you know what I mean. Different is when, for example, you find code snippets on the net (variable names have in fact more imaginative forms due to the need of being more clear). But when we write code for a web application or a web site, we do need to be more, let me say, technical. And so we need to make things more clear.
There are many data types, but for each one of them, we have a three letters prefix.

Variable names
According to the above, variable names should have a non-capitalised prefix, indicating the data type, followed by a word which should be unique and understandable. That could pose a problem: how can a word be clear and immediately understandable, but at the same time not to long?
When we think about a name for a variable, we might make the mistake to use a too long word. Something easy to imagine is "strName", but sometimes that's not enough.

Summarising: we need to choose the right variable data type and then we need to imagine an appropriate short but immediately understandable word which will explain what the variable is.

The two parts, together will form the variable name.

Data type prefixes
Let's start from the data type prefixes. The following list contains the data type and the related prefix:

Data Type	Prefix
Boolean	bln
Byte	byt
Collection object	col
Currency	cur
Date-time	dtm
Double	dbl
Error	err
Integer	int
Long	lng
Object	obj
Single	sng
String	str
User-defined type	udt
Variant	vnt
ADO command	cmd
ADO connection	cnn
ADO field	fld
ADO parameter	prm
ADO recordset	rst

As you can see, the prefix is not capitalised. The prefix is then followed by the name. In this matter, it is advisable to start with a capital letter following the form "prefixName".

Ok, I think I said enough for today.
I hope you find the above info interesting. If so leave a comment below!

HTML: IDs and classes

2013-01-10T07:00:00.000+01:00

As I said in the last post, it's quite interesting to explore the differences between IDs and classes in CSS.

First of all, they are both selectors. But they are very different:
1) IDs are unique identifiers;
2) classes are not unique.

The above first difference is quite important because we can give a unique identifier to just one page element, while we can give a class to more than one element.

Imagine we have one span and two divs. We can give the span and one div a class, and an ID to the other span:

<span class="spanDiv">One</span> <div class="spanDiv">Two</div> <div id="justDiv">Three</div>

So we can make the first two tags red and the third blue using something like:

<style type="text/css"> .spanDiv { color: #FF0000; } #justDiv { color: #0099FF; } </style>

And the result will be:
One

Two

Three

That's basic, isn't it? I believe we all know about this big difference, but for the beginners out there, I thought it was important to make it clear.

So just remember: you cannot give the same ID to two elements.

Another difference is quite clear from the above code: while classes in CSS are defined with a starting dot (".spanDiv"), IDs start with a "#" ("#justDiv"). Obviously classes are given as class="className" while IDs as id="idName".

The above differences are what we all need to know in order to understand when to use IDs and when to use classes.
Because a class can be used several times, we use them when we need to apply a specific style rule to different elements. On the other hand, IDs are used when a rule should be applied just to one element, being sure that it won't be applied to anything else.
In the past, web developers suggested to use IDs and not classes. That's because, CSS was mainly embedded in each web page. Today, I believe the above rule doesn't apply anymore. In fact we use linked CSS stylesheets, global rules across the whole site. That is why I suggest to use both IDs and classes, depending on the related situation.
Another thing to take into account is the fact that IDs and classes are used in JavaScript as well, with getElementById and getElementByClassName. So, when we give an element an ID or a class, we should consider JavaScript as well.

Can we use IDs and classes together?
Oh yes, we can. And some times it is very convenient.
Let's say we have a list of elements (three divs with red font), but just the middle one should be bold:

<style type="text/css"> .red { color: #FF0000; } #bold { font-weight: bold; } </style> <div class="red">One</div> <div class="red" id="bold">Two</div> <div class="red">Three</div>

The result?

One

Two

Three

As a last thing.. do not use selectors (either IDs or classes) when we don't need them. Remember that we can select an element by its tag. If we need to style all the links in a page, we don't really need to give every <a> tag a class or an ID... just select the <a> tag.

That's all for today.
See you next time!

HTML & CSS: common mistakes

2013-01-08T07:00:00.000+01:00

Today we are going to see something half way between funny and serious: common mistakes we make while using HTML and CSS.

Why is it funny? Because sometimes those mistakes are so basic that when talking about them we usually react saying we don't make such mistakes. But then... when it happens, for any reason - even the most incredible - the only thing we can do is laugh. Mistakes are always just around the corner. The better we know them, the easier we are going to avoid them.

And when it happens... well... just have a laugh!

HTML
The most common mistake when writing HTML code goes under the name of "how could you leave it open?". When I was young, my teacher used to tell me that quotes and parenthesis must always be closed, otherwise the words inside would catch a cold.
Well, think it the same way. Always close HTML tags that need to be closed.

The second mistake is again very common between beginners: "right things in the right place". We really need to keep things tidy and neat and avoid the great pitfall: use proper nesting tags. Just to be clear for those of you that started coding yesterday... the following is incorrect:

<div><span>Hello!</div></span>

The third mistake: "right dress for right weather". I've talked about it and I think it's very important: choose the right DOCTYPE for your work of art!

Another mistake: "what are those tiny upper scratches in my code?"
When the great minds decided to make HTML a standard, they decided to use quotes. As I always remember my old primary school teacher, I usually remember to close quotes... do you?
Thus, if something is not working... check those damn quotes!
Oh! By the way... that's a common mistake in other languages like JavaScript and ASP as well.

We are getting close to CSS... and so, the last HTML mistake is something that stays in between. Can you guess?
"Is it meat or fish?"
Well IDs are not classes and classes are not IDs.
I believe you all already know the difference, but there it is. Do not confuse IDs and classes, because they are different.
Should I explain why? In CSS, jQuery and JavaScript we can manipulate DOM elements by IDs or classes. Well... I think I will write something about it in the future...

Now, just to finish up things a few reminders:
1) do not use uppercase tags (<DIV>);
2) do not use inline styles;
3) use entity codes.

Ok folks, let's move on to CSS!

CSS
CSS common mistakes are quite... hmmm... common and - well - similar to HTML's.

The old primary school teacher strikes again: "what's opened should always be closed!"
We are talking about curly brackets. Well, well, well, we all hate the person who thought curly brackets are cool for CSS, but that's it! We have to accept it.
So remember to close CSS brackets!
And, while we are on it... every declaration should end with a semicolon.

As I always say, to keep things tidy we need to be sure that classes and IDs are working properly. As said: "style matters!" and "fish is not meat!". Do not confuse classes with IDs!

The third mistake is not really a mistake. In fact it is more an advice: "short legged people should not jump the ditch!". I do not like shortcuts: shorthands in CSS are really awful, while shortened colour declarations are incredibly horrible. Do not use shortcuts! ... please ...

And that's it!

As always, if you want to share your thoughts about HTML and CSS common mistakes, please do so using the comments section below!
In the meantime... have a glorious day!

the web thought: most viewed posts in 2012

2013-01-03T07:00:00.000+01:00

As I did at the beginning of last year, I would like to list the top 10 most viewed posts for 2012...

So, here we go - and you might even discover something you have missed last year.

Happy New Year

2013-01-01T00:00:00.000+01:00

Just a thought to all the readers

HAPPY 2013!

JavaScript: syntax checker

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

In this short post I'm going to share some really useful JavaScript syntax checker.

When programming we surely need to check what it's been done. It's better to verify the code when still in production, during the so-called test period. When published, a web site could still contain errors, but what we surely need to avoid is those annoying syntax errors.

There are specific programs freely available that we can use to do so. Here we are going to see 3 tools that we should carefully consider.

JSLint
"JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool. [...] JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems. [...] JSLint can operate on JavaScript source, HTML source, CSS source, or JSON text."

As you can see it's quite a complete tool. It's obvious that there's no program that will say if a snippet is correct or not. What those tools can do is help us in spotting a possible issue. And maybe keep our code clean.

Just visit JSLint web page and read for yourself what it can do for us.

JSHint
JSHint is in some way a more simple tool. First of all is an on-line tool and it ".. is a tool to detect errors and potential problems in JavaScript code and can be used to enforce coding conventions."

We just need to put the code, select what kind of checks we need and wait for results.

Again, visit the above web site for more information.

Jsdoc
The last tool is a bit different...
"JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code."

The web site explains everything about it and it's worth visiting it, as we all know how important code documentation is (especially in large project).

Ok, folks... that's all for today.
If you use different JavaScript tools and you want to share them with us, please add them using the comments section below.

Merry Christmas

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

MERRY CHRISTMAS

FROM

CSS: overflow

2012-12-20T07:00:00.000+01:00

Working with containers in a web page could be tricky, especially if we need to manage large text. There's a CSS declaration which we need to fully understand in that matter: overflow.

When we create a container - let's call it "box" - the overflow declaration helps the browser to understand what to do with the eventual content that doesn't fit in the container. If the container has a fixed height, what will happens to the content that doesn't fit in the box?
When the box has not a fixed height, the content will fit in any case and the box will enlarge, giving the needed space to the content. When the height is fixed, we might need to use the overflow declaration.

The overflow declaration
There are four possible values for overflow:
1) visible
2) hidden
3) auto
4) scroll

When we assign "visible" to overflow, the content will be always visible, regardless the size of the box.

This is a large text and the first line is long
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text
This is a large text

If set to "hidden", the content not fitting in the box, will not show and the box will appear as a hole in our page, showing just a part of what's behind. The overflowing content will not be accessible to the user.

With "auto", scrollbars are shown where necessary. It could be that the horizontal scrollbar is shown, or the vertical one... or both (if needed)

"scroll" always shows horizontal and vertical scrollbars, regardless what's inside the box. It means that even if the content perfectly fits the container, we will always have scrollbars.

Usually we set the overflow to "auto".

Overflow-x and overflow-y
We can even play with overflow-x and overflow-y. With the first, we can set the overflowing content behaviour in horizontal, with overflow-y in vertical.
When we need to force the vertical scrollbar only, we will set the overflow-y to "auto".

In the above example we have overflow-x: scroll and overflow-y: hidden.
As you can see the above two declarations are really helpful, giving us a full control of the situation.

That's it for today...
Have a nice day and happy coding.

jQuery: image gallery plug-ins

2012-12-18T07:00:00.000+01:00

jQuery image gallery plugins! You all know there are so many of those plug-ins, however, here's a list of the best... in my opinion...

bxGallery
"bxGallery is jQuery image gallery plugin that contains automatic thumbnail generation."

Galleriffic
"Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains."

Pikachoose
"Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features! jCarousel integrates smoothly with PikaChoose to give your gallery simple and effective carousel. PikaChoose now has API hooks for integrating lightboxes and other things."

YoxView
"YoxView is a free Lightbox-type media and image viewer jQuery plugin. It's easy to use and feature-rich."

GalleryView
"My goal with GalleryView is to provide an extensive set of options to the user. Not only will the user be able to adjust photo and thumbnail sizes, and transition speeds, but he will also have the ability to choose from a selection of element positions, transition styles and other features."

FlexSlider 2
"The best responsive slider. Period."

wmuSlider
"wmuSlider, a jQuery responsive slider"

ResponsiveSlides
"ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size."

AD Gallery
"...It’s a gallery plugin that’s a bit different than plugins like Thickbox and Lightbox."

ASP: permanent redirect with HTTP 301 status code

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

There are situations when we need to redirect the visitor to a web site to another place.
This is done for example when the web site is no longer updated or valid.
In order to do so we can redirect the visitor permanently with HTTP 301 response code. That is done because we need to tell the user-agent that the location is permanently moved elsewhere.
I believe you all know what HTTP headers are... or maybe we should start from there...

HTTP headers
HTTP headers are components of the message of request and response in an HTTP transaction. Therefore they define the parameters of the transaction.
They normally have the form of pairs and examples are Cache-Control: no-cache or Content-Type:·text/html;·charset=UTF-8. If you need to see headers from a web page, you can always visit Rex Swain's HTTP Viewer submit an URl and get the headers.

Response redirect?
In ASP we can redirect to another page using Response.Redirect. However the Response.Redirect will generate a status code of 302 which means "The requested resource resides temporarily under a different URI." (quote from W3C). And that's not ok with us... we need to have a 301 response code.
In the end Response.Redirect is not a feasible solution.

The solution
We need to use something else. And the best way is to use a Response.AddHeader. Basically we need to issue the status code and then redirect the user:

<% Response.Status = "301 Moved Permanently" Response.AddHeader "Location", "http://www.anothe-site.com/" Response.End %>

We set the status, we add the header and that's it.

I hope the above will help someone. As usual please use the comments section below for sharing your ideas and experiences.

SQL: the power of left, right and IN

2012-12-11T07:00:00.000+01:00

As the title mentions, in this short article I will show you how to benefit from the use of the left and right SQL functions together with the IN operator.
Before doing so, we need to understand what are the two functions and what the operator is doing.
Please follow me and see what we can do!

The left and right functions
The two functions work perfectly when we need to isolate part of a string. They return the left or right part of a character string with the specified number of characters.
As an example, the syntax for the left function is:

LEFT(strVar, numChr)

Where strVar is a character string and numChr is a positive number that specifies how many characters we want to get from the string (strVar).
Consider that the same is working for the right function.
The difference between the two functions is that left starts considering the string from the left hand side, while right considers the characters from the right hand side of the string.
As a general example we can create a query like:

SELECT LEFT(name, 2) FROM namesTable

If our names (name) in the table (namesTable) are “John”, “Jack” and “Daniel” the results from the above query will be: “Jo”, “Ja” and “Da”. We are getting just the leftmost two characters from the name column.
To simplify the above example we can create two simple queries for the left and right functions:

SELECT LEFT(‘abcdefg’, 2) SELECT RIGHT(‘abcdefg’, 2)

The first query will return ‘ab’ while the second will return ‘fg’.

The IN operator
The IN operator can be used to determine if a specified value matches any value in a subquery or a list.
Now... now... that might sound complicated, but it’s not.
A common use of the IN operator is in the WHERE clause. We can in fact convert a query like:

SELECT * FROM namesTable WHERE name = ‘John’ or name = ‘Jack’ or name = ‘Daniel’

To a query like:

SELECT * FROM namesTable WHERE name IN (‘John’, ‘Jack’, ‘Daniel’)

Isn’t it cool?
There something more interesting. We can even use another operator... well, actually the opposite operator: NOT IN. As you imagine NOT IN will return the names different from ‘John’, ‘Jack’ and ‘Daniel’:

SELECT * FROM namesTable WHERE name NOT IN (‘John’, ‘Jack’, ‘Daniel’)

All together now!
Now, we can combine the two functions and the IN operator. How?
Let’s say we want to retrieve all records only in specific cases. In T-Sql we can use a conditional statement and execute a query based on that.

IF (SELECT COUNT(*) FROM namesTable) > 1 BEGIN ... ... ... END

The above executes the code inside the BEGIN END only if the table namesTable contains more than 1 record.
At the same time we can use something like:

SELECT * FROM namesTable WHERE LEFT(name, 1) IN (‘J’, ‘D’)

Which returns all records that have a name starting with J or D.
Now we can put all together:

IF EXISTS (SELECT * FROM namesTable WHERE LEFT(name, 1) IN (‘J’, ‘D’)) BEGIN SELECT * FROM otherTable END

The above example is just to explain the logic: if at least a name in the namesTable starts with ‘J’ or ‘D’ the second statement is executed, retrieving all the data from anothe table (otherTable).

This is just the beginning, as you may imagine. I leave to your fantasy how to use the above, however, if you want to share your experience just use the comment section below.
In the meantime... happy coding!

(Thanks to Paolo for the hint!)

jQuery: snow effects for Christmas!

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

As I did last year, here is a quick collection of Christmas effects. In particular we are talking about snow effects made exclusively with jQuery.

Ready for the holiday season? Here we go:

jQuery snow falling plugin
"Idea is to create one snowflake initially, clone that snowflake at some time interval and add random values for properties for each of them. And it’s done in less than 1kb minifed."

jQuery font flake / snow flake experiment
"was bored one night, had an hour charge left in the laptop, challenged myself with this."

jQuery Snowfall 1.5 update now with snow buildup!

jQuery Snow
"This extension decorates your webpage with falling snow."

Beautiful Christmas Santa Snow Falling Greetings with html5 css3 and jquery
"Hey, Still using old Flash Christmas Greetings ? For this Christmas, We are Introducing a Snow Fall Animation with HTML5 CSS3 and Jquery."

jQuery: get and set information for DOM elements

2012-12-04T07:00:00.000+01:00

jQuery is a great tool when we need to manipulate elements in our web page.
Today I would like to focus your attention on some useful methods that allow us to get or set information of DOM elements.
We are talking about:
1) .text()
2) .html()
3) .val()
4) .attr()

Let's see them one by one.
.text()
The method allow us to get or set the text of an element.
Considering a div like:

<div id="test">This is an example</div>

we can get the text contained using:

$("#test").text()

The same method allows us to set a text inside a container. If the container is not empty, the text inside will be replaced. We can use the method in the following way:

$("#test").text("Replaced text inside the container")

.html()
The .html() method works in a similar way. it gets or sets the html content of an element (including the code).
If our container is:

<div id="test"><b>This is a bold text</b></div>

the method:

$("#test").html()

will get:

<b>This is a bold text</b>

As you may see the <b> tags are included in what we get.
If we want to set html code to an element, using something like:

$("#test").html("<i>This is italics</i>")

The result will reflect the tags, changing the content of our div from

This is a bold text

This is italics

Interesting?

.val()
This method allow us to get or set the value of a form field. it works as the other two methods above.
Let's imagine a form containing an input element like

<input type="text" id="test" value="Hello!">

The method used as:

$("#test").val()

will get the value of the input box ("Hello!").
If we want to set the value, we can use the method the following way:

$("#test").val("Goodbye!")

This method is indeed very powerful as you may imagine.

.attr()
The last method is used to get or set attribute values.
If we have a link like:

<a href="http://thewebthought.blogspot.com" id="test">the web thought</a>

The following code:

$("#test").attr("href")

will get:

http://thewebthought.blogspot.com

while

$("#test").attr("href", "http://thewebthought.blogspot.com/p/search.html")

will set or change the attribute to the above URL.

Wow! Just one long sentence to describe all - I'm really impressed!

Ok, leaving self-indulgence apart... what do you think about the above methods? Aren't they interesting?
please leave your ideas in the comments section below!

JavaScript & XML: validate an XML document

2012-11-29T07:00:00.000+01:00

I think we all know how to use XML documents. For example RSS feeds are basically XML files, as well as sitemaps. Those files may be very important when managing a web site, but those examples are just a small part of the common use of XML documents. Just to make things clear, another example: when you export a Blogger blog, the file you get is an XML file.
When I've written the article on how to create an RSS feed, I discovered a very useful JavaScript snippet that helps us to validate an XML file.
Unfortunately I don't remember where I got it, but, even if I surely rearranged it, if you know the original source, please let me know so that I can give due credit to the author.
Ok, said that, let's see how to do it.
The code
First of all, let's create a form like the following:

<form name="form1"> <input type="file" name="file" size="50"> <input type="button" value="Validate" onclick="Validate()"> </form>

In the input element, we need to insert a valid path to an XML file (it can be local or remote, it doesn't matter).
Then we have a button which will trigger the Validate() function:

<script type="text/javascript"> function Validate() { var file = document.form1.file.value; // create an array in order to check the correct .xml extension in file var arr_file = file.split("."); var ext = arr_file[arr_file.length - 1] // check if file is not empty - if not alert the user if (file == "" || file == "undefined" || file.charAt(0) == " ") { alert("Please insert a file to check"); } // check the file extension (.xml) - if not alert the user else if (ext != "xml") { alert("The submitted file is not an XML file"); } // if everything is ok, then else { // create an XMLDOM var x = new ActiveXObject("Microsoft.XMLDOM"); // load the submitted file x.async = false; x.load(file); // set the XML parser to true x.validateOnParse = true; // check if there are errors var errore = x.parseError.errorCode; // if everything's ok, alert the user if (errore == 0) { res.innerHTML = "No error found"; } // if errors were found else { // collect error information var err_n = x.parseError.errorCode; var err_d = x.parseError.reason; var err_r = x.parseError.line; // show the errors to the user with (res) { innerHTML = "Error number " + err_n + "<br>"; innerHTML += " - " + err_d + "<br>"; innerHTML += "line " + err_r + "<br>"; } } // close the parser x.Close(); } } </script>

I decided to leave the comments in the code itself, so it will be easier to understand what it is actually doing.
Now, you may wonder what res is. Well, it's quite easy: we use a HTML element to show the results of the validation process. So somewhere on the page we need to insert the following:

<div id="res"></div>

That's the place where the results will appear.

Let me know what you think.

JavaScript: validate an URL

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

I've already posted an article on how to validate forms with Regular Expression. But, have you ever needed to valid an URL?
We can do it quite easily using Regular Expressions and JavaScript. Specifically we are going to use the .test method.

The code
The first thing we need to do is set two variables: one is the URL to be validated, the second is the Regular Expression.

<script type="text/javascript"> var url = "http://www.google.com/"; var urlCheck = /^http:\/\/(www\.)?[a-zA-Z0-9-]{3,}\.[a-zA-Z]{2,}(\/)?$/;

Now we can check the url using a snippet like:

if (urlCheck.test(url) == false) { alert("URL is not correct!"); } else { alert("URL correct!"); } </script>

According to the URL specified in the url variable, we will receive an alert message: if the url is correct or not.
Now, remember that the above is just an example to show the .test method. Depending on the if clause, we can create different results. For example in a form we can be sure that the submitted url is a valid one and not a fake one. Or anything else.

Nice and easy.

Enjoy yourself, and take care.

Oh! By the way, don't you think it's time to drop a line? So, just use the comments section below!

JavaScript: document.lastModified with a trick

2012-11-22T07:00:00.000+01:00

Again another JavaScript article...
This post in fact might be interesting for some of you. We are talking about those fancy lines we sometimes find at the end of a web page where we are informed about the document last modification date. Something like:

How do we do it automatically? And... that is not an European date, is it? If so, how can we manipulate it in order to make it European?

The code
The code is once more very simple:

<script language="javascript"> document.write("<i>Last updated "+document.lastModified+"<i>"); </script>

As you can see the output will be:

Last updated 11/17/2012 ... ....

The date is in the format: month/day/year.
We can actually manipulate the output and give it different form by using the following function:

function Agg() { this.length = Agg.arguments.length; for (var i=0; i>this.length; i++) { this[i + 1] = Agg.arguments[i]; } } var gg = new Agg(); gg[0] = "Sunday"; gg[1] = "Monday"; gg[2] = "Tuesday"; gg[3] = "Wednesday"; gg[4] = "Thursday"; gg[5] = "Friday"; gg[6] = "Saturday"; var mm = new Agg(); mm[0] = "January"; mm[1] = "February"; mm[2] = "March"; mm[3] = "April"; mm[4] = "May"; mm[5] = "June"; mm[6] = "July"; mm[7] = "August"; mm[8] = "September"; mm[9] = "October"; mm[10] = "November"; mm[11] = "December"; var dd = new Date(document.lastModified); with (document) { write("Page last update on "); write(gg[(dd.getDay())], " "); write(dd.getDate(), " "); write(mm[(dd.getMonth())], " "); write(" ", dd.getFullYear()); write(" "); write(dd.getHours(), ":"); write((dd.getMinutes()<10?'0':'') + dd.getMinutes(), ":"); write((dd.getSeconds()<10?'0':'') + dd.getSeconds()); }

And the result will be:

JavaScript: check the mime type and charset

2012-11-20T07:00:00.000+01:00

I always underestimated JavaScript. I know it has been a problem for me, because I've really missed lots of interesting things until I decided to explore the programming language.
In the following article I will show one of the useful things we can do with JavaScript: discover the charset and mime type of a web page.
You might wonder what's the use of it. Well... as usual try to broaden your view and consider the fact that every visitor is visiting your beloved web site from somewhere in the wide world, sitting on a different kind of chair (if not standing or lying), with a different piece of technology or device, and finally (but I could go on forever) with a specific browser ... ... type and version (the mixture of the two is a deadly issue for any web developer).
Ok, said that, don't you think that knowing the mime type and charset of a page might be useful?
Let's see how to do the magic.

The code
The code is quite simple: we are going to use two properties for the document object: mimeType and defaultCharset.

<script type="text/javascript"> var mT = document.mimeType; var cS = document.defaultCharset; with (document) { write("Mime Type = " + mT); write("<br>"); write("Charset = " + cS); } </script>

Just put the above in your document and see what comes out.
Now that you know how to get those values, you might image what you can do. For example we can send the user an alert when the two properties are not met by the target browser.

Ok folks... see ya next time!

jQuery: cookies!

2012-11-15T07:00:00.000+01:00

I've already talked about cookies. We explored the way to use them with ASP, but have you ever wondered how to manage them with jQuery?

This is a very short article because I don't want re-write an already made guide...
We are talking about a jQuery plug-in called jquery-cookie which allows us to manage everything about cookies with jQuery.
We will be able to read, create and delete cookie sessions. The plug-in can manage session expiration and it can be configured in order to define a valid path for cookies.

Just go to the above page and see for yourself...

SQL Server: import a MS Access database

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

As I wrote in a past article, MS Access can be used to manage databases for a dynamic web site. However, some times, it is not enough and its features can be not enough. In those cases we really need to move to a more performing software like SQL Server.
Especially in situations were large quantities of information are managed by a dynamic web site, SQL Server can be a great solution.
If you are a reader of the web thought, you know how much I am a fan of SQL Server. so in this short post I will explain how to import an Access database to SQL Server... a few steps and we will ready to go.

First things first
There are two different ways of converting an Access database into a SQL Server database. One is from the MS Access point of view: upsizing a database (export). The other way consists in importing an Access database into SQL Server.
In this article we are going to see the second way, which in my opinion is much more secure and easy to execute.

Import
We are going to use the import feature in SQL Server Management Studio. To do so we need to select our database, right click and then select "Tasks/Import Data...".
Doing so, the import wizard will open.
First, select as data source "Microsoft Access". After that, we need to select the Ms Access file name, by pressing browse.
After clicking on the next button, we need to decide where we want to import the database. Destination will be "SQL Server". Select the SQL server name and the database. Now, be careful when completing the dialog box section about user authentication: decide if you want to use Windows or SQL Server authentication.
The next import procedure step is about the way to import data. We can copy data from one or more table or views, or we can write a query to specify the data to transfer. We assume we are going to import data from a table, so we select the first option.
In the next step, we can select the sources by ticking next to the table/s we would like to import.
After clicking on the next button, and after just a moment (or maybe more than a moment depending on the size of the imported table/s), we will find the MS Access tables just inside the Tables section of our SQL Server database.

Fast and easy.

A few more tips
After importing the tables, we need to check if everything went the way we wanted. There are some basic differences between SQL Server and Access that we should be taking into account. The import wizard is a great tool and it should take care of most of the dirty work. A good look at what is now inside SQL Server, before using the database, is advisable in any case.

Ok folks... that's all for today.

jQuery and JavaScript: generate and read a QR Code

2012-11-08T07:00:00.000+01:00

Hello everybody!
today we are going to see something really interesting that someone in the past asked me via email.
We are going to generate a QR code using a jQuery plug in and then we are going to use a JavaScript library to read the very same QR code.
What do you think, is it interesting enough?

Generate the QR code
In order to generate the QR code we just need to use a small jQuery plug in called jquery.qrcode.js which is a "jQuery plugin for a pure browser qrcode generation".
As explained in the plug in page, the creation of a QR code is pretty straightforward:
1) include the plugin:

<script type="text/javascript" src="jquery.qrcode.min.js"></script>

2) Insert the target container:

<div id="qrcode"></div>

3) Generate the QR code:

jquery('#qrcode').qrcode("the web thought");

The plug in can render the QR code in canvas or in table.

Read a QR code
Reading a QR code is different stuff: we can use jsqrcode.js. The idea here is similar to the creation.
We need to include the libraries as explained in the above Github page (see Readme file).
To decode a QR code, we can use the following two lines of code:

qrcode.callback = function(data) { alert(data); }; qrcode.decode("qrcodeTest.png");

where the qrcodeTest.png is our QR code image that stays in the same folder as the web page containing the above decoding snippet.
The callback function gets from the data parameter the value resulting from the QR code decode process.
Just to make things more clear, have a look at the following code:

<script src="jquery.js"></script> <script type="text/javascript" src=" QRCode.js"></script> <script type="text/javascript"> $(document).ready( function() { qrcode.callback = showInfo; $("#btnDecode").click(qrCodeDecoder); }) function qrCodeDecoder() { qrcode.decode("qrcodeTest.png") } function showInfo(data) { alert(data); } </script> </head> <body> <div> <img id="qrcode" src="qrcodeTest.png"/> </div> <button id="btnDecode>Decode the QR Code</button>

After including the jQuery and the jsqrcode libraries, we use a button to trigger the call back and the decode of the png file (qrcodeTest.png).

Ok, guys and gals. That's enough for today.
As usual if you need more info, just drop a line in the comment section below.

JavaScript: dashboards with Drinks Toolkit

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

Web applications are evolving rapidly. While only a few years ago we just needed to manage basic operation for - as an example - a company's intranet, today, we are asked to create effective and attractive pages together with complex functionalities.
In order to create efficient dashboards, Drinks Toolkit is a really valuable helping tool.
It is a "Web-Based widgets to easily develop control panels and dashboards" and it includes a series of widgets each corresponding to a specific tag.

Drinks is HTML5 powered, using canvas and not needing any Flash.
It uses AJAX to gather data and it is cross browser, as long as the target browser is HTML5 compliant. In terms of simplicity, Drinks is really very easy to use, because in order to insert a widget, we just need to insert the related tag (each widget a tag e.g. <knob>).
Finally it's basically open source, thus free. In fact there are three possible options: the Open Pack which is a "pay what you want (even nothing)" option, the Business Pack for professionals and the Custom Pack (Choose what you need).
Ok, that's all for today. Go to Drinks web page and have a look for yourselves.
See you on thursday!