• Use customized markers for each branch
• Have different markers for each type of location (in this case, branches v ATMs)
• Turn on and off different marker types with a checkbox list
• Show customized & tabbed information boxes with location specific information
• Provide interactability with some kind of menu list on the left side of the screen
• Have the capability to zoom and show information on any location using querystring

Now, that is a good bit going on for a map page, but the results are definitely sharp and at the end of this Case Study, you will be able to create your own Google Map and customize the bejesus out of it.
 
Let’s get started !

Before writing any code

Before writing any code to reference the Google Maps API, you must apply for a Google Maps API key.
It’s no big deal, just go to the signup page and you can read the limitations then simply generate your API key.
There is a domain verification process you have to go through, but it is simply to verify you are the owner and/or have permissions to edit code on the domain.
Follow the instructions and you’ll be off and running in no time.

Initializing a Map

Once you have your Google Maps API key in hand, it’s time to get started!
The very first item to take care of is the reference to the Google Maps API on your webpage.
Do this by including the following code in your website head section.

<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOURKEY"
        type="text/javascript"></script>

Replace the words YOURKEY with your own Google Maps API key and now you are ready to initialize and customize your Google Map using javascript.
 
Using the following javascript, check for Google Maps compatibility and then insert a generic map on your web page by creating an init function and calling it.
In this case, the default UI for Google Maps is sufficient because I want to maintain some familiarity for the users. I also use latitude and longitude to create the default location for the center of the map and the zoom level.

var myMap = { map: null, init: function(){
  if (GBrowserIsCompatible()){
    // browser is compatible
    myMap.map = new GMap2(document.getElementById("theMap"));
    myMap.map.setCenter(new GLatLng(33.214132,-87.550564), 13);
    myMap.map.setUIToDefault();
  } else {
    //browser is not compatible
    document.getElementById("theMap").innerHTML = "Your browser is not compatible";
  }
}};
$(hscuMap.init);

There are many other canned options you can turn on or off at this point, like double-click zoom or continuous zoom, but for our purpose we’ll leave it as is for now.
Now you have a map that is centered where you would like to be on Saturdays in the fall, ok, maybe that’s where I will be on Saturdays in the fall but you get my point.

Create a Custom Icon

Now, let’s create a custom icon for use with a marker on our map.
Initialize the icon as a GIcon object and some of the options. Make sure the paths to your icon and shadow are correct and adjust the sizes to reflect the sizes of your images. Transparency gifs work great because they print with no problems where there may be issues with transparency pngs, better to be safe than sorry.

// custom icon
var anIcon = new GIcon(G_DEFAULT_ICON);
anIcon.image = "/img/marker.gif";
anIcon.shadow = "/img/shadow.gif";
anIcon.iconSize = new GSize(50, 50);
anIcon.shadowSize = new GSize(50, 50);
anIcon.iconAnchor = new GPoint(25, 50);
anIcon.imageMap = [0, 0, 50, 0, 50, 50, 0, 50, 0, 0];
anIcon.infoWindowAnchor = new GPoint(25, 1);
myMap.customIcon = anIcon;

NOTE: To make coding faster, you can declare a base icon and then use it as a template for other custom icons and only change the attributes you need, in the above example I stuck with the default icon marker as a base (G_DEFAULT_ICON).

Place your Custom Marker on the Map

A marker on the map is known as a map overlay, because it lays over the map (great name!).
Now all we have to do is create a marker that will use the custom icon.
To accomplish this, we do it in three steps:

1. Define marker options (this is where we tell it about the custom icon)
2. Define the point in Latitude and Longitude where the marker will be anchored (using GLatLng object)
3. Create the map overlay using the point and marker options (using GMarker object)

And here’s what it looks like:

//define your marker options
markerOptions = { icon:customIcon };

// create the map overlay and display
myMap.addOverlay( thePoint, markerOptions );

There you go, in a nutshell.
A customized marker to signify a particular object on our map, sweeeeeeet.

Case Study Example: Heritage South Credit Union

The Branch and ATM finder on the Heritage South Credit Union website is the end result.
Since there are multiple branches and ATMs and I wanted to display different icons and info boxes for each type of marker, I created JSON data I parse in jQuery to control the information about custom icons and info boxes for each marker.
I also created several javascript functions that control display, zooming, info tabs, and more which enables me to interact with the map using links on the page and querystrings.
Check out the finished product.

Wrapup

This was the first time I had played around with the Google Maps api but it was definitely fun and a great learning experience.
I can’t wait to get into my next project for Google APIs, if you have any ideas or tips for Google APIs, feel free to share!
See ya soon!

On a recent project I was working on, I came across the need to make the end user have (or not have in my case) an SSL connection.
There were portions of their site that was encrypted for various reasons but most of the site is information and therefore SSL was a little overkill for the complete site.
Using complete URLs on all links seemed cumbersome so I wanted to be able to switch that connection on and off and provide a check to make sure the user’s browser was not using an SSL connection when they didn’t need it.

The code solution

Luckily, checking the connection type is extremely easy with .NET, here is the code:

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
If Request.IsSecureConnection Then
Response.Redirect(Request.Url.AbsoluteUri.Replace("https://", "http://"))
End If
End Sub ' Page_Init

That’s it, seriously.
In the code above, I check the connection to see if it is secure and if it is, then I reload the current page without a secure connection, because I don’t want one.
I placed the check in the Page_Init subroutine so I can detect this as early as possible and reload, minimizing the lag time.
 
I would love to see how others tackle this with php, cgi, or any other web programming language.
Simply add your code snippet below!

So how do we create the fancy graphics and maintain a text friendly website?
CSS, or more specifically, text-indent.

Original Purpose

The original purpose of text-indent is to provide a property to indent the first line of text in an element.
Here is an example of a paragraph element with text indentation:
 

This text will be indented on the first line.
Then will be against the left margin on this line.
Every line below that will be against the left margin, too.

 
So how did I do that?
Here’s the CSS:

p#indent-example {
text-indent: 15px;
}

As you can see, the text-indent property can create a natural flow and indentation to your text, especially if you’re long-winded!

How do I use this to hide text?

Easy!
Use a negative value. Yep, that’s it.
Using a negative value places the text outside of the element’s display area and makes it, essentially, invisible.
If you are not using a block level element, then declare it using the display property in CSS.
Also, very large negative numbers can actually result in the indentation failing and your text will be viewable.
So test and use values that work for your situation.
Want to see a live case? View the source of this webpage and you’ll see a perfect example.
The main image header for this site is not just a large graphic. It is an h1 header tag with a background image.
Here is the XHTML for the main heading:

<h1 id="title">dalewatkins.com</h1>

and here is the CSS to hide the text:

h1#title {
text-indent: -3000px;
}

I included an ID attribute for unique identification and then in the live code there is an also an anchor element, but we’re aren’t talking about those now are we!
To finish it off, include the CSS for height, weight, background-image, and whatever else you need to create the effect you desire.
Now you have your fancy graphical header, but also took care of text browsers, search engine crawlers, and mobile phones without too much work and no compromises.

The End Result

Here is the header:


and here is the bottom of the content and footer:

 
By looking at the complete snapshot you can get a better idea of the feel of the whole page along with the smaller details.
I think it turned out pretty good, and I learned a little bit along the way.
What do you think?
Share your ideas of changes you would make and maybe even some snapshots of your own watercolor designs.

Giving credit where credit is due

• The original WaterColor Theme tutorial from psd.tutsplus.com
• Photo base for header by Matt Lauder
• Watercolor Brushes by mcbadshoes.
• Hand-drawn Social Icons by TheG-Force
• Watercolor Icon Pack by Tutorial9

“Aren’t Keywords and Descriptions old news?”

Well, duh!
Keywords and descriptions have been around for a loooong time, but their purpose today is different from their purpose in the beginning of search engine rankings.
Search engines no longer rely on these meta tags to determine rankings because you SEO cheaters out there abused the system and ruined it for everyone. I’m not bitter though, honest.
Some search engines do use the description meta tag for display in search results to give the reader a better idea of what you’re up to.
So, if the meta description can be used to entice users to visit your site, then use it!

The problem

Wordpress, like other database driven sites, does not have a designated place to insert unique meta tags for each post or page.
Uh oh, not good.

The solution

Wordpress does have custom fields that can be accessed via code.
Hooray!
Declaring a custom field does not inject it directly into the code, you have to access it using php and Wordpress functions.
Let’s take a closer look….

The steps

I am not getting into specifics here about meta tags, just the nitty gritty. Meta tags are found inside the <head> tags of a website and the attributes we are interested in declaring are the name and content attributes.

1. Find your <head> tags:
   Sign into Wordpress as an admin and navigate to the Appearance > Editor so you can edit the template files for your website. Your template may be different, but my <head> tags are located in the header.php file, so check there first.
2. Insert the code:
   
<?php
if (is_single() | is_page(49)) {
   if ($keyword = get_post_meta($post->ID, 'meta_keywords', true)) {
      echo '<meta name="keyword" content="'.$keyword.'" />';
   }
   if ($desc = get_post_meta($post->ID, 'meta_description', true)) {
      echo '<meta name="description" content="'.$desc.'" />';
   }
}
?>

   To kick this off, a couple of Wordpress functions determine if the page being loaded is a single post or if the page matches a number. The reason for checking the page number is for when you want to add custom fields to pages that are not single posts. This is most useful if there is custom css or javascript code for use only on that one page, like a javascript portfolio image browser.
   Anyways, now the script looks for custom fields (or meta data) in the post and when it finds them, it formats the data for the appropriate meta tag.
3. Add the custom field to your posts:
   The only thing left to do is add the custom fields to your posts.
   Do this by scrolling down to the Custom Fields section and add fields with the names meta_keywords and meta_description. Include the information you want to appear in the content attribute of the field and it will now populate correctly in your <head> section.

Other modifications

This example was made to display keywords and descriptions for specific pages or posts.
In most cases, I take these two meta tags and place them outside of the if statement to include them on every page, it’s just better for SEO.
The technique in the example code above is best used to define page specific CSS and javascript for individual posts and pages that might require them. You might want to define a custom field called “custom_css” or “custom_js,” its up to you.

Other uses for custom fields

I think custom fields are great for page and post specific CSS, javascript, keywords, and descriptions.
What other ways do you use Custom Fields in Wordpress?

How does this relate to web design and Search Engine Optimization?

It’s simple, all SEO focused companies claim to put your website at the top of search rankings or guarantee first page results display if you go with them.
Well, everyone can’t be on the first page, so it shouldn’t take long for you to figure out that someone is lying.

So, what’s the trick?

Many companies make it seem like they have the “secret formula” or some special trick to get to the top of the rankings when it’s actually very simple.

Follow the rules and build your site using web standards.

Build your website using web standards and follow the rules that search engines put forth on their websites. If a web designer/developer does not follow common rules and uses gimmicks to attempt to increase rankings, they risk penalizing search rankings and could possibly result in de-indexing.
Sure, tricks and gimmicks might get results quickly, but rules and web standards will stand the test of time.
I’m not saying that SEO is just a trendy tag-line to put on your website, because it is important.
I’m just saying that you should be wary of claims that seem too ambitious to come true, because they probably are.
SEO focused websites begin from the ground up and everyone should practice it without having to boast and brag.
Use webs standards and SEO is already built into your design.

1. Don’t rely solely on javascript to validate key data

Javascript can be very handy to validate data quickly before form submission.
Relying solely on Javascript to validate can also be a security hole with some crafty form input if javascript is disabled on the user’s browser.
Beware! Your database and/or server could be compromised!
 
Tip: Have your server-side scripts (i.e. ASP, php) validate the form input and strip malicious code before processing so it can do no damage to your server or website. This will also ensure no errors will occur before submitting information to your database.

2. Don’t cripple your website presentation

Honestly, the majority of mainstream viewers will have javascript enabled however there are a few subsets of users that may have javascript disabled.
The first group would be people like me. Web developers that poke around websites, disabling javascript and manipulating headers to just mess around.
The second group would be mobile phone browsers. Even though the number of mobile browsers that do not enable javascript has been decreasing, there are still enough without javascript capability that you need to be aware of their presence.
The third group, and arguably the most important to consider, would be bots and search engine crawlers.
By crippling either your presentation or content, you can ensure yourself of one thing, less traffic to your website.
 
Tip: Use web standards to guide your content and css your presentation so your website will display, no matter what is disabled. You can then add javascript to supplement your website functionality and presentation to create a unique user experience.

3. It is ok to limit users when javascript is disabled

You can actually use javascript as a way to limit access to features and functions, even with javascript disabled.
Sounds odd, use javascript even when it is disabled? Sure!
Here’s an example: insert video on your website.
Take into account the usual suspects I talked about before, more times than not, they won’t care about watching a video. One problem with inserting video on a website is cross-browser support and compatibility issues as well as code validation with the tags you have to use to accomplish it. It can become a big mess.
 
The Solution?
Replace all of the object and embed tags with an image or text that describes the topic of the video or gives a summary.
If javascript is enabled, inject the video into a div tag using something like flowplayer or JW Player and all problems are solved, no compatibility issues, your code will be valid, and everyone will be happy.
If javascript is disabled, then the user will see the text or image and they will never know what they are missing.
You can think of it as safeguarding your limited users from having a poor experience on your website.

 
By using javascript in this manner, you can virtually eliminate formatting issues that may happen with an advanced interface when viewing the site from a mobile browser.
 
If you remember these 3 simple suggestions, you’re sure to have happy visitors.

The Reasoning

Well, this could be seen more as an excuse than a real reason to redesign. When I started this site I was a newbie to Wordpress and needed a quick and simple design to get things going. After getting the blog operational, I began to realize a few shortcomings to my current theme and wanted something more customizable, and more me.
I saw some great video tutorials on converting a normal website into a functional wordpress website and knew this was a great opportunity to create the theme I wanted.
Alas…the justification for a redesign is born.

Conclusion

To wrap up this short and ultimately irrelevant post, I just wanted to let everyone know I haven’t abandoned you and you can follow me on twitter to get the latest updates.
And if you are starting your own website or blog (and have the time), make sure you are happy with your design.
You will be less tempted to redesign!

I guess it would be an issue if you like being less secure while browsing the internet.

If you haven’t updated Internet Explorer, my guess is you haven’t updated your operating system either leaving you extremely vulnerable to all kinds of trojans, viruses, and other malware. It doesn’t matter if you have a “Security Suite” or not, you still have to update your OS (keyword: automatic updates!).

I guess there can also be the excitement of not knowing if the next website you visit will display correctly.

That’s the kind of excitement I don’t want.
IE6 is known for it’s persistent misuse of CSS and HTML in ways that will tear down a website when all other standards based browsers display the content almost identically.
What does that mean? More wasted time spent for developers trying to create hacks and code to make sure IE6 plays nicely with others.
As developers, I think we should code in web standards for all other browsers but charge extra when we have to create special IE6 coding. I know several developers that already do this and there will probably be more to come.

Why don’t you just upgrade?

Would you leave your car doors unlocked while spending a whole day at the mall?
No, of course not. It’s free to lock your car doors and it gives you a little more security.
Same goes for Internet Explorer, why browse in IE6 when you can browse in 7 or 8 for free with more security, better HTML parsing, and better performance?

Conclusion

Simple, this just doesn’t make sense to me.
Why do people continue to cling to IE6?
If you want web developers to continue to accomodate for this older platform, we must know why!