Wednesday, 30 April 2008

CSS - what is it?

I thought I would touch on using CSS. That is Cascading Style Sheets.

CSS is the way that most modern websites are designed, simply put
CSS is the code used for the style and layout of webpages.

CSS comes it 2 forms

  • Linked / Embedded - this is either an external style sheet page that is directly linked to from a page or style included in the HEAD section.
  • inline - this is when the CSS code is directly applied to a page element.

So how do you link an external style sheet to your page.

<link rel="stylesheet" type="text/css" href="{link to actual css file}">

Simply place this code in your HEAD section of your webpage and away you go.

Style Sheet Media

Ok so now we have a link to a stylesheet for our page, but in additon to the basic need for a style sheet to style your page within a normal web browser. You can addtionally specify which delivery a particular style sheet is for.

You can have your website look a certain way for people using your website in a normal browser, and a different way for people who print your page. For example an order form or similar.

The default action for CSS and if you use the code example above is for all viewing to look the same, if you wish to show your website different to different medias, you use one of the following.

The most common media types are as follows:

  • all - defines the stylesheet for all formats, this is the default behaviour
  • screen - defines the stylesheet for you by a web browser or on screen viewing
  • print - defines the style sheet for use when your user is doing a print preview or print of you website.

In additional to the above you can additionally specify any of the following:

  • aural - defines the stylesheet for screen scrapers / speech synthesizers
  • braille - defines the stylesheet for use by tactile feedback devices.
  • embossed - defines the stylesheet for braille printers (this is a print driven media)
  • handheld - defines the stylesheet for use by handheld devices, pda, mobiles phones etc
  • projection - defines the stylesheet for use by screen projectors presentations, including using over-head projector transparencies..
  • tty - defines the stylesheet for fixed-pitch devices, such as terminals
  • tv - defines te stylesheet for use by TV type devices.

to use any of the above media types simply add the media attribute to your link to your style sheet in your head section.

<link rel="stylesheet" media="print" type="text/css" href="{link to actual css file}"&gt

the above example defines the stylesheet for use by the printer and print preview screen.

NOTE - the media type is case sensitive

A Basic Style Sheet

OK. Now we have a grasp on how to implement a stylesheet, how to do create a style sheet.

StyleSheet Elements

Stylesheets are styled again elements within your page, these elements can by defined by tag type i.e BODY or by id or class.

Page Tag Styling

Firstly we will start by the easy ones, page tags. So if we want to have all our page links to look a certain way we can just do the following

B {color:red } - this would define all bold elements as the color red
i.e <b>this is a bold red </b> and looks like this is a bold red

NOTE - you can apply style to any page tag, and in some cases tags have multiple actions which you can style against, such is the case for your page hyperlinks, as follows.

  • a:hover - this defines the style for a page hyperlink when the mouse moves over the link
  • a:visited - this defines the style for a page hyperlink for links that have been visited

Note - there is a colon between the tag and the action i.e a:hover

Element ID Styling

You can apply individual style to page elements for nay element you have given an ID to. So if we have a DIV element on our page with an ID of DIV1 we can apply style only to this element, by doing the following in our style sheet.

#DIV1 {color:red;}

the element on our page is defined by

and any contents in this div would be red

Again you can do this for any element on your page you have assigned an ID to.

Ok we have a way to individually style elements, but what if we want to have a set of object carry a similar look and feel, it would be time consuming to individually style each tag by ID. So in this case we assign a class for these elements.

Style By Class

To define a page element with a class just add the class attribute to the element, as follows:

<div class="thenameoftheclass">text</div>

To define the style for this class you do the following in you stylesheet.

.thenameoftheclass {color:red;}

NOTE - there is a full stop (.) before the class name in the style sheet.

A Basic Example - Using a embedded stylesheet

Embedded StyleSheets come in 2 types

  • external stylesheet in a linked file
  • stylesheet coded directly in the HEAD section

For this example for are going to create a basic HTML page and a 2 CSS stylesheets.

1. Create an HTML page with the following code in it

<!--this sets the link for stylesheet for the screen-->
<link rel="stylesheet" href="stylesheet.css" media="screen"/>
<!--this sets the link for stylesheet for printing-->
<link rel="stylesheet" href="printstylesheet.css" media="print"/>
<!-- this element has an ID of DIV1 and a class of div1_class -->
<div id="DIV1" class="div1_class">This is styled by the #DIV1 style and the div1_class<br />the font color is coded from the #DIV1<br />the border is coded by the DIV1_class</div>
<!-- this element has a class of div1_class -->
<div class="DIV1_class">This is styled by the DIV1_class</div>
<h1 class="screen">Please use the print preview of this page to see the different styles</h1>
<h1 class="print">This is the Print version of this page</h1>

2. Next create a stylesheet file in the same directory as the page above called stylesheet.css with the following code.

/*using body sets the body elements*/
/*this sets style for the element with an id of div1*/
/*this sets the style for the elements using the class of div1_class*/
/*NOTE - More than 1 element can use the same class*/
border:1px solid #blue;

3. Next create a stylesheet file called printStyleSheet.css in the same directly as the code above, with the following code:

/*using body sets the body elements*/
/*this sets style for the element with an id of div1*/
/*this sets the style for the elements using the class of div1_class*/
/*NOTE - More than 1 element can use the same class*/
border:10px solid #green;

Now if you run the newly create HTML page in your browser you will see the page elements styled from the stylesheet.css style sheet. Now open the print preview of this page adn you will now see a different view of the page, which is now styled by the printStyleSheet.css.

This example gives you a quick idea how to hide / show page elements and how to style for your screen and for your printer.

To code your embedded style sheet directly in the HEAD of your website you do the following

In The Head Section

this body has verdana font

A Basic Example - Inline Stylesheet

Directly styling the element

Simply put this mean adding the style attribute to your element as follows

<div style="{your style stuff}">this is styled</div>

As in the following example

<div style="font-family:verdana,sans-serif;">this body has verdana font</div>

This guide shows you how to use CSS to style your website or blog. There are lots of cool stuff you can do with CSS to make your website look cool and the same in all browsers. So just go nuts.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Saturday, 26 April 2008

How to Send / Receive XML and Parse IT

Lets start from the beginning by explaining what is involved in using XML in our pages.

It basically consists of two main elements

  1. The XML DOM element

  2. The XML Data Island

Ok so how do we create these elements. Simple

To create the XML DOM, which is basically the holding point for your XML data you do the following

Set XMLDOM = Server.CreateObject("Msxml2.DOMDocument.3.0")

Ok so now that we have a place to put our XML now we need to put the data into it.


So what have we just done, well we have created an XML DOM object to loaded a data island into it. This means that our variable XMLDOM now holds our XML data in its memory space. But what use is that if we cant see it, simple it means we can do what ever we like to get the information out of our XML file into our page.

For Example - If we are looking for a particular node (say the first node called item)
Set GetRootNode = XMLDOM.documentElement

Set FirstNodeText = GetRootNode.selectSingleNode("//item[0]/*").text

What we have done here is simple, the documentElement method pulls the parent node from the XML file, then the selectSingleNode allows us to pick any node we wish to or you can simply loop through all the nodes by using a for loop with the length of your nodes.

Load XML into Page and read First Contents

So to load an XML file and pull out the node value.

Firstly Create an XML file called ourxmlfile.xml as follows

<?xml version="1.0"?>
<text>Text of first Item Node.</text>
Text of second Node</text>

Click Here

Then create an ASP page in the same directoy and enter the following code.

Dim XmlDOMDoc, GetRootNode
Set XmlDOMDoc = Server.CreateObject("Msxml2.DOMDocument.3.0")XmlDOMDoc.load(Server.MapPath("ourxmlfile.xml"))
Set GetRootNode = XmlDOMDoc.documentElement
response.write GetRootNode.selectSingleNode("//item[0]/*").text

When you run this page you should see the value of the first node in your browser.

Send XML / Form Data using XMLHttp

So what if we want to send XML to this page?

Again create the necessary page objects as follows

Dim XmlHttp, ResponseXml
Set XmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP.3.0")

NOTE - this time we ate creating an XMLHTTP oibject not the XMLDom

Then open the HTTP using the XML and POST your data as follows

XmlHttp.Open "POST", "", false

Click Here

Once we have opened the pipe to send the data we just need to set the type of data we are send and send it on its way

XmlHttp.SetRequestHeader "Content-Type", "application/xml; charset=UTF-8"
XmlHttp.Send SomeDatatoSend

Note - this will send the data as XML data if you just wish to post your data as name/value pairs, just like your would when submitting a form, just change the lines above to the following

XmlHttp.SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
XmlHttp.Send SomeDatatoSend

Note SomeDatatoSend is just a variable contained what you wish to send, it can be anything you like.

for example - SomeDatatoSend = "hello"

Once we have sent it we need to listen for the response, either in the response text

Note - when checking this you will get full response text back

or in the server status returned

Note - when checking for this you will get the normal HTTP response codes back, i.e 200 is OK

So the complete code to send your data looks like

Dim XmlHttp, ResponseXML
Set XmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP.3.0")
XmlHttp.Open "POST", "", false
xmlhttp.setRequestHeader "Content-Type", "application/x-www-form-urlencoded"

XmlHttp.Send SomeDataToSend
Set ResponseXML= XmlHttp.ResponseText or XmlHttp.status

So now you are able to send data using XML and parse XML which is either posted to a page or loaded as a data island, your options are endless.

Happy XMLing

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Wednesday, 23 April 2008

Ebay Affiliates and Blogger


Click Here

Click Here

You may experience issues when trying to add your ebay listing from your affiliates account to your blogger blog, this is caused by the way Blogger compiles the elements of the blog at runtime.

To fix this is quite simple.

For example if we have the following code from Ebay

<script language='JavaScript1.1'> document.write("<sc"+"ript language='JavaScript1.1' src='" + Math.floor(Math.random()*999999999999) + "&adtype=3&size=728x90&def=u7v&n3y=1&a3h=1&u7v=1&mpvc='></sc"+"ript>");</script><noscript> <a href=''> <img border='0px' src='[CACHEBUSTER]&adtype=1&size=728x90&def=u7v&n3y=1&a3h=1&u7v=1&mpvc=' alt='Click Here'> </a></noscript>

It looks pretty complex, b ut all we need to do is firslty ignore the <noscript> section as thsi will work as it is, in all browsers as there is no complicated stuff going on here.

So the bit we are interested in is the first bit

<script language='JavaScript1.1'> document.write("<sc"+"ript language='JavaScript1.1' src='" + Math.floor(Math.random()*999999999999) + "&adtype=3&size=728x90&def=u7v&n3y=1&a3h=1&u7v=1&mpvc='></sc"+"ript>");</script>

The problem blogger encounters is that is cannot encode this into the existing structure, so all we need to do is play around with the JavaScript a bit and turn the above code into the following

<script language='JavaScript1.1'> document.write(unescape("%3Cscript src='" + Math.floor(Math.random()*999999999999) + "&adtype=3&size=728x90&def=u7v&n3y=1&a3h=1&u7v=1&mpvc=' type='text/javascript'%3E%3C/script%3E"));</script>

As you can see what we are doing is using a slightly more complex method to do the same job, by using the unescape command we are asking the browser to do the work and not blogger.

So all you need do is replace the necessary parts of your ebay affiliate code with that above and everything should be fine.

If anyone has any problems doing this, just drop me an email and I will show you how.

Happy Ebaying.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Add AJAX page element

This will be a nice quick tip, simply how to use JavaScript to add a page element. The page element can be anything that you can normally do in HTML.

So how do we use JavaScript to Add a Page Element?

Ok say you want to add a new div element to your page, either on a button click, page load or something else. All you need to do is the following


Add a page element called apagediv as follows

<div id="apagediv"></div>

2. Then just use the code below


pagediv = document.getElementById("apagediv")
newdiv = document.createElement("div")
pagediv.innerHTML = "Your inner HTML";


Click Here

You should have a page element that says Your inner HTML

Lets break it down a bit

  1. document.getElementByID - finds the page element with the specified ID
  2. document.createElement - create a page element, thsi can be any page element, but at this point it is only created in page memory
  3. pagediv.innerHTML - this sets the innerHTML property of the newly created element, again this can be any of the attributes for your element i.e src, style or what ever.
  4. pagediv.appendChild - this actually places your newly created element on the page, as the child of the found pagediv, again this can be any element including the body. But using a div gives slightly better page layout.

Well this ends this little tip.

Now if anyone out there has anything you would like to knwo how to do, just drop me an email and I will post a response on this blog.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Thursday, 17 April 2008

Table vs Tableless layout

For a long while it has been the done thing to lay your website out using tables, instead of a CSS based layout.

Now there are 2 trains of thought on this.
  1. It takes time to lay your website out using just CSS, so why bother.
  2. Tables are more browsers friendly, and alot easier to do.

Ok I will address these one at a time. It is true that it takes time to lay your website out using CSS. But the benefits far out weight the time taken, not only willl your website look the same in all browsers but it will also be a better and more friendly site for the search engines.

Spending time learning and laying your website out using CSS, will help improve your search engine rankings, and will also make your website easier to manage.

Now tables, you should only ever use table for when your want to display tabular data, this can be anything you wish to show on your website, your prices, a menu or some other list.

Dont use tables for the body of your website, it is not current coding and will have a very harmful effect on your promotional efforts.

So remember use your time wisely and learn the skills you need, learn basic CSS and you will be able to lay out your website.

Click Here

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Monday, 14 April 2008

What is Web 2.0 and Blogging?

Ok you may have heard alot about web 2.0 and blogging. The question is what is it?


Web 2.0 - in a nutshell is any website that lets the user interact with the website, whether it is writing a book review on
amazon or giving feedback on Ebay about someones product. This is all web 2.0 is. It is simply a step on from the DHTML website, with the addition of letter the user input onto the site.

Blogging - This is really an online journal or your thoughts about something, this thing you are reading is a Blog, its like a mini website. It comes from the web log, which is the log that your web server keeps of all the activity through it. So a blog is essentially your reflection of the world and any given subject, from your working day to your favourite topic.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Sunday, 13 April 2008

SQL Server Backup

Now I am going to discuss SQL server, as most people know this is the database offering from Microsoft. It is offered in many different forms from a cut down express edition right up to a full blown data centre enterprise edition.

I recommend the following great books for more on this topic.

SQL Server 2000 Backup and Recovery (Database Professional's Library)
Sql Server Backup and Recovery
Sams Teach Yourself SQL Server 2005 Express in 24 Hours (Sams Teach Yourself)
Microsoft SQL Server 2005 Express Edition for Dummies: Express Edition (For Dummies): Express Edition

If you want to know more about SQL Server please see the Microsoft website

Don't have the express edition or still using the MSDE (which is not longer supported by the way) - Go Here

(don't download the version with advanced features unless you plan on carrying out reporting on your DB, in most case you wont. So save yourself time and download the other one.)

As many people know that if you are working in a large organisation and developing against the full edition you get the benefits of having access to services such as full replication and DTS. No if you are not developing against this edition you don't have these features, as more often than not people are developing locally on either the MSDE / Express edition or they are developing locally with a full version buy host their solution somewhere which they either only have RDC access or they dont have enough access to install another on the server.

Now this causes problems with how to backup and keep a safe copy of you database, because if you are running mixed versions of SQL Server, such as full locally and express on your server, or express on both. Then you cannot setup a DTS schedule to carry out your backups.

The Ideal Solution

Ok here is the ideal solution and the one you will have if you are working for a company with the correct infrastructure. This solution is simple.

LocalDeployment/ServerBackup Solution
SQL Server (any full edition)SQL Server (any full edition)Scheduled DTS packets

This assumes that you are not running the development version on your local machine

Now with this solution providing you have access to the deployment both over a network connection, you can have a scheduled DTS package deployment to handle your backups.

Now the main problem is that alot of developers as actually developing against the express edition and only deploying to a server that is running the same version.

So the question here is why cannot I just do a DTS scheduled back up?

The answer is simple, the express version of SQL server is a cut down version and cannot support the broadcasting relationship necessary to have a scheduled DTS backup.

The art of using DTS fails into the area of replication, and in order to support full replication of a database you need both to be full versions.

The Most Common Situation

Now in most cases developers are working against the free express editions, and this means that they are deploying their solution on this version also. In this scenario most people are sending the files to their server by FTP, and may have RDC access.

LocalDeployment/ServerBackup Solution
SQL Server Express / Development EditionSQL Server ExpressScripted / Backup Scheduling

Now in this case we cannot do a DTS replication to keep a nice copy of our database safe so there are two solutions.
  1. A direct DB backup or restore
  2. A Scripted SQL Backup
Now in this article I am only going to go into the Scripted backup, and the reason for this is it allows you to compile the SQL script on your server into a location that you have FTP access to them simply download the SQL file.

Ok onto the nitty gritty. How do you do it.
  1. Log on to your SQL Server database.
  2. Right click on your database and go into the script option.
  3. Inside here you normally get 2 option CREATE and DROP. These are simple one with just create your backup the other with drop your existing DB and then create your backup.
  4. Simply select the one of preference, my preference is DROP, and pick a location.
Once you have this file on your server in a location where you can FTP it, copy it to your local machine, once there. Run this script on your local DB, make sure you point it at the correct DB.


There you have it a full backup of your database nice and safe.

I have to say it is possible to have remote access to your SQL Server on your web-server, but this means opening up all sorts of security concerns, including but not limited to the default SQL server port. Oh by the way that is 1433 in case you are wondering.

Because of the security issues of opening up a public SQL Server box for access via remote network connections I will not go in to the solution of how to connect and copy data, all through your local SQL management express console.

Now there is a slight exception to this, if people want me to go into how to access your SQL server box directly from your local machine I can do. But you will have to ask me nicely.

So if you want to know how to gain access to your remote SQL Server box from your local machine, just say so in your comment.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Friday, 11 April 2008


Ok some more basic stuff.

The basics of actually putting a webpage together, in most cases this will mean using HTML and if you want you website to be a bit more exciting then it will mean using a mix of javascript, CSS and HTML to form what is commonly known as DHTML. Simply put this means Dynamic HTML, or HTML that is dynamic, may be a drop down menu, mouse over stuff or any one of a million things.

Click Here

Know here is one fo the major misunderstanding about DHTML and the DOM. DHTML came about quite a while ago, and in fact was mainly used by Microsoft,and did not make full use of the DOM. This was back in teh days where people used to code their websites using tables, and not CSS.

To clarify the difference is simply the use of DHTML used coding such as document.all which did not work in all browsers and as you can see does not interact with the DOM at all.

To move on to the DOM, the DOM is the Document Object Model and put simply is the way the page is built up by the browser from the base element down through the nodes, this is made up by a normal parent child relationship.

The major difference using the DOM you can find page elements, normally by simply using document.getElementByID("yourelement") although you can count down the page using other options such as childNodes, both methods alway for a greater manipulation of the page and a more supported experience in the browser.

Well thats it for this, I am not going to go too much into this as it really fails into the arena of design and I am a developer not a designer, but I mention this to make you away of the things you need to know about to do any AJAX coding.

I will say this if there are any designers out there who haev a blog or would like to comment more on the designs aspects, please feel free to do so.

After all web developers as like the architects and web designers are the interior designers.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

Thursday, 10 April 2008

To Handcode or Not?

This is a question that has plagued the ages.

Do you hand code your website or use an editor?

My personal preference is to hand code, I have always handcoded, ever since the days I used to build websites using Notepad.

But these days there are times when you need to use an editor, this is not necessarily due to not being able to code CSS to play around with divs. If you are using the .NET arena to create your site, you are most probably using part of the visual studio family whether it is the express editions or the full versions of the studio.

Click Here

Now you may be asking why, the answer to this is simple as all .NET pages are pages that require compilation, if you add page elements such as text boxes, there may lack references. This means that when you code against them they are not available in the cache of the page.

So if you have ever added a page control to your .NET page and had to maek use of such coding as FindControl, then you have come across this issue.

The issue of hand coding in todays light is not as important as it used to be, along as you actual know the code behind the scenes, and are not blagging your way through life. Then using the editor is a fine solution. This is especially true if the site you are designing is more interested in looks than functionality, then you want to spend more time on graphics than on the code.

So in short I choose personally to handcode always have always will, I like this as I can code all kinds of cool stuff, front front end DOM javascript to backend SP (Stored Procedures). But I also know that I am not a designer and if I was I would be more interested in the layout and look than exciting backend code.

Sean J Connolly
Visit AJAX Web Development Store

DMS - Document Management, Webmail - Online Property Sales and Letting

What is AJAX

Firstly what exactly is this AJAX thing people are throwing around the web.

Its short for Asynchronous JavaScript and XML.

Click Here

What AJAX allow you to do is simple, it means you can communicate between client and server without the need to reload pages, and the current .net framework has a nice toolkit for ajax.

Now this is where AJAX gets a bit confused.

There are basically 2 interpretations of AJAX.
  1. The normal understand which uses XML and JavaScript to pass communcation directly between the client and the server. This may be something like updating your shopping cart when making a purchase or it may be more advanced like returning your bank account information directly for your bank. Simpyl it means that you can receive information to your browser without a page reload.
  2. The next understanding of AJAX comes mainly from the Microsoft side of the world. This is really an extension of using DHTML and aiming it more at the page DOM (more on this in a later post) now in this mindset AJAX simply lets you manipulate the webpage to make the user experience a lot more user friendly. Such items as drop dowm menus, drag and drop, tabs and so on. This is not strictly AJAX as there are normally not any communcation with a back end, although there can be, so XML si not used and it is more a simple case of a DHTML implementation using the DOM.

Ok so that is AJAX, at least as I see it, I am always open to comments and the more the merrier I don't know everything and I don't make out I do. I am simpy doing this blog to help people with web development. I may even, fi I feel nice, post some code samples.

Welcome to my new blog

This blog is going to be aimed at point the world to rights, everything that is about web development and not jsut like most people sitting with open source software.

My personal weapon of choice is Microsoft and using AJAX.

So stayed turned to find out what these technologies are and what they can do for you.

Please help support this blog by visiting my Amazon store, where you will find any you need to help your web development.

If you have any direct questions about web development, please email them over and I will answer directly and post the response here

Ajax Web Development Store