Category: Web

Websites Responsive to Screen Size

I own a desktop, laptop, iPad and an HTC Android phone. Each device has a different screen size. I had never tried my website on the iPad and the Android phone until after the DIG 2011 conference in London Ontario. Jeffery Zeldman and Derek Featherstone spoke on the importance of having your website visible on multiple devices and this struck home to me. Continue reading Websites Responsive to Screen Size

What Languages do I Use

I was recently asked what I use to develop software and websites. I mostly use DotNet Technologies as it is often interchangeable between websites, web applications and desktop applications. I can often use the same data access classes and business logic between multiple platforms. I find that DotNet allows me to easier structure objects visually and logically.  I prefer to develop using C-Sharp, but I get requests to use VB.NET and J-Sharp on a regular basis.

When I went to college, I had learned C, Pascal, COBOL and some Mainframe language that I cannot remember.  Upon graduating I taught myself VisualBasic 3, RPG.  My first programming job was Visual COBOL.  I had created a company in the Caribbean Islands programming public utility and insurance software in RPG.   I can honestly say since I sold my shares of the company, I cannot foresee myself developing in RPG again.

Why don’t I use PHP?  Well I do use PHP, but for specific purposes and upon request by a customer. A specific purpose is when I create a WordPress site or other content driven sites. I will not often create a website or web application from scratch using PHP as Microsoft made ASP.NET easy for rapid development.

Do I use JAVA? Yes; I do believe there are cases where JAVA is still relevant. JAVA is still a good tight platform for developing small single purpose applications.  I have used JAVA 3 times in the past 2 years for applications that I believe fit the bill well.

Now, I am curious;  What do you use and why?

Posting Data From HTML to ASPX

Recently I had a need to have a web site post credentials to another web site.   The first site was standard HTML and the second site was DotNet (ASP.NET).

In this example, we will be passing a user name and password to another site.

Sending Web Site
In your sending website, you will need a log in  panel similar to the one below.

Receiving Web Site
In the form load of your DotNet (ASP.NET) site, you will need the following code to get the values from the request object and then pass to your log in routine.

                NameValueCollection nvc = Request.Form;
                string userName = "";
                string password = "";
                if (!string.IsNullOrEmpty(nvc["txtUserName"]))
                {
                    userName = nvc["txtUserName"];
                }

                if (!string.IsNullOrEmpty(nvc["txtPassword"]))
                {
                    password = nvc["txtPassword"];
                }

                ExecuteLogin(userName, password);

HTML Centering DIV Tag ( DIV Element )

The easiest way without JavaScript to center a DIV tag is to use a style tag or css that resembles the following.

style=’padding:5px;width: 400px;height:200px; margin-top:-100px; margin-left:-200px; left:50%;top:50%; border:outset 1px #ccff99; background-color:#ccff99;position:absolute;font-weight:normal;’

Sample Image

Making Your Web Page Accessible

It seems like a lot of work to make your web page accessible for people with sight impairment, and the audience seems small, but it is worth it. There are a couple of things that web developers often miss when they are evaluating such a task. If people cannot read the website, it is a good possibility that search bots and spiders from sites like Google and Yahoo will have difficulties too (although they have gotten better). By taking the time to properly plan out your site and take the time to follow the W3C standards, you should accomplish 90% or better of the goal to make your site accessible. Making your site accessible is easy and W3C publishes the guidelines.

Here are a couple of quick steps

  1. Use “alt” tags on any content that is not text ( images or graphics
  2. Use the title tags on your hyper links (a) type tags
  3. Create a consistent page layout including heading, menus and content area
  4. Where you use flash, or other plug-in framework, provide a text alternative with an easy and obvious link to it.
  5. Tables should be laid out using the following
 <table>
   <caption>this is a table caption</caption>
   <tr>
       <th>column heading 1</th>
       <th>column heading 2</th>
   </tr>
   <tr>
       <td>column 1</td>
       <td>column 1</td>
   </tr>
</table>

 

Javascript equalsIgnoreCase Function

This week’s code sample is JAVASCRIPT based. I found this while researching user validation routines. This function is a javascript version of a common Java function. We have replicated the calling syntax as a java programmer would expect to use it by effectively appending it as a method of the javascript String Object.

For more great scripts: http://www.apriori-it.co.uk

Important Note: Works with IE and FireFox

//The first line assigns the MatchIgnoreCase function as 
//an equalsIgnoreCase method of the String object 

String.prototype.equalsIgnoreCase = MatchIgnoreCase; 

function MatchIgnoreCase(strTerm, strToSearch) 
{ 
	strToSearch = strToSearch.toLowerCase(); 
	strTerm = strTerm.toLowerCase(); 
	if(strToSearch==strTerm) 
	{ 
		return true; 
	} else { 
		return false; 
	} 
}

Hot Keys

alt-1 – Load help

This week’s code sample is JAVASCRIPT based. It traps a keyup event in a web page that contains this code. The function then goes a step further and looks for the Alt key. Once we have the Alt filtered out we can begin to look for key combinations.

Below the code sample shows traping for numeric keys. The key code is actually an ASCII representation, so therefore you will need to know some common ASCII codes. Our example shows 48, 49, 50 being used. This translates to 1, 2, 3. So in short we are making a routine that will trap the following:

  • Alt-1
  • Alt-2
  • Alt-3

Important Note: Works with IE and FireFox

Try the Alt keys.

function handler(e)
{
	//In NN4, e now holds the keyboard information
	// FOR MSIE4, we can use the event object property
	if ( document.all )
	{
		e = window.event;
	}
	if ( e.altKey )
	{
		switch ( e.keyCode )
		{
			// alt-1
			case 49: put_your_function_here(); break;

			// alt-2
			case 50: break;

			//alt-3 
			case 51: break;
		}
	}
}

document.onkeyup = handler;