Monday, April 30, 2007

1and1.com - Service Review

WiaF Mascot1and1.com is a hosting company who claims to be "The World's #1 Web Host." (Who doesn't these days?) I switched over to them a month ago from Godaddy.

In an earlier post, I discussed my original comparisons of the two companies. For a quick overview: Godaddy.com is inexpensive and well worth every penny. Their online programs are very extensive and always being updated. Their help support is always on top of any problem. 1and1.com is the cheapest website hosting and domain registration I've ever seen in my life.

1and1.com

Positive: Domains are $6/year (for almost every TLD).
Negative: You can only buy one domain at a time, so if you want to buy 20 domains, as my clients have asked me to do a couple times recently, you have to buy each one individually. That has wasted a good 2 hours of my life.
Positive: Website Hosting is very, very cheap: $3/month, and you can host up to 25 sites on that one set of hosting! so instead of paying $3.50/month for each site at GoDaddy, I can host all of my sites on one hosting account for $3/month. (That is their smallest account and they have 10GB storage and 300GB Bandwidth!)
Negative: You can't choose your username for anything. Not for your FTP, SQL database, Control Panel, etc.
Positive: The 1and1.com Control Panel is pretty extensive, and you can do just about anything. And if you can't figure it out the FAQ is very extensive.
Negative: Their 24/7 Technical Support is horrible. I've been on hold for almost an hour before giving up, and another time, when they did pick up, they knew less about hosting than I did. You get what you pay for in tech support.

Summary

If you are computer-savvy, 1and1 is for you, but if you are one who needs tech support and/or don't have more than one site to host, go with Godaddy.

-Ashton Sanders

Labels: ,

Sunday, April 29, 2007

PhotoShop - Grunge Effect

WiaF MascotMy wanderings on the Internet brought me to Veerle's Blog, where you can find an excellent method of creating and saving grunge brushes in PhotoShop.

(It's also a well designed blog.)

-Ashton Sanders

Labels:

Thursday, April 26, 2007

How Do Search Engines Think? SEO Basics

WiaF MascotSearch Engine Optimization is fairly easy to understand. All you need to do is put your self in a Search Engines Shoes.

Let's start with Google's Mission:
"Google's mission is to organize the world's information and make it universally accessible and useful."

-http://www.google.com/corporate/
Nice and Simple. But it gives you a good understanding of what you are working with and helps us to realize some very basic truths about Search Engines.

Search Engines Truth:

Search Engines want to find useful, informative sites for every search term.

Duh... And they do that by using robots (or bots) that are programmed to "index" websites and decide how useful/informative they are. So our job as Search Engine Optimizers is to make it obvious to search engines that your site is useful and informative. Here are some basics to Search Engine Optimization:

Use Valid Code: The search engine bots don't have eyes, so they can't see your website, but they can read the code that makes your website, and they do know how to read valid HTML. But if your code isn't valid, the bot can get confused and ignore parts of your site.

Content is King: Anyone can make a site that says, "Hello World!" Search engines don't value sites that don't have any content. You need to have relevant content on your website. If your site is about fixing Race Cars, but you never say race cars on your site, don't be surprised when you never find your site under the search term "race cars."

Don't Hide Text: An old search engine "cheat" was to have white text on a white background. This would allow you to have lots of keyword heavy content on your site without actually having to bug your visitors with the large amount of text. This will damage your rankings much more than it will help.

Basic Principles: Google recommends that you don't do anything solely for search engines, which isn't to say that you shouldn't get your site search engine optimized, but rather, don't waste time and money trying to develop tricks to deceive the search engines. Just make a good, quality site that people will find informative and useful.

Links:If someone likes your site enough, they'll link to it. Duh. So if your site is extremely useful, and a lot of people like it, you'll have a lot of links to it. The number of links you have to your site is one of the biggest things that the search engines will judge your site on.

That's a nice overview of how search engines think, and the basics of search engine optimization.

-Use it wisely
-Ashton Sanders

Labels: , , , ,

DreamWeaver 8 - Zoom

WiaF MascotI was in the process of converting a website template (in image form) into an HTML/CSS Document with DreamWeaver 8. As I was getting close to finishing, both documents looked very similar. I spaced out and clicked "Ctrl =" as I do when I want to zoom in using PhotoShop or Fireworks, and I couldn't believe it: DreamWeaver 8 Zoomed in! WHAT!?

It's not the most useful thing in the world as I almost never use the design view, but it's a sweet piece of functionality.

Ctrl =     Zoom In
Ctrl -     Zoom Out

(Note: I always remember Zoom In as "Ctrl +" because "+" is on the same key as "=".)

-Ashton Sanders

Labels:

Wednesday, April 25, 2007

PhotoShop 7.0 Error

WiaF MascotAbout a year ago, I ran into a fatal error with my PhotoShop 7.0, and I could not figure out how to fix it.

Whenever I opened my Photoshop, I got this error:

"Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable."

And the program would just shut down. I couldn't even open it. For the life of me I couldn't figure out the problem. Finally, after almost a year of checking for solutions, I found a solution!

The problem is that PhotoShop 7.0 can't handle more that about 1000 Fonts! Why that would cause the entire program to crash and burn... who knows. I hope they fixed up the newer versions so I don't have to worry about that. (I have over 5000 fonts.) So because of this stupid Error: "Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable." I had to delete 4000 fonts off of my machine. (Of course I have a back up, but still...)

Now that I have my PhotoShop Operational again, I'm going to be spending a lot of time learning all the tricks of this "awesome" program. Any designer I talk to says that PhotoShop is the best, period. But from what I've seen so far, it's got a lot of annoyances that Fireworks has already streamlined. (Yes, I realize that my PhotoShop is five years old, and I'm taking that into consideration.) But I should be putting together a Product Comparison between Adobe PhotoShop and Macromedia FireWorks. That will probably end up being 3 or 4 posts.

-"Unable to continue because of a hardware or system error. Sorry but this error is unrecoverable."
-Ashton Sanders

Labels: ,

Monday, April 23, 2007

SQL Tutorial - Not In

WiaF MascotI have an extremely complex SQL database system set up for an email newsletter broadcaster. This piece of code for SQL is what I've been looking for for the last week. Here you go:
AND emailaddr NOT IN(SELECT item FROM table WHERE patindex('%@%',emailaddr) > 0 )
That's all I'm going to say about it right now, look for more SQL Tutorials coming soon.

-Ashton Sanders

Labels:

Thursday, April 19, 2007

Service Review - Century Tel #3

WiaF Mascot

Century Tel does it again! Yes, if you have ever had Century Tel for an Internet Provider, or have read either one of these posts: Century Tel #1 or Century Tel #2, than you know how low quality Century Tel really is.


At the end of my last Service Review about Century Tel, I finally got disconnected from them, and got Bresnan (for twice the speed and half the price). Unfortunately, I have moved to a ranch in the country, and the ONLY high-speed Internet connection avaiable is... you guessed it... Century Tel. I put off calling them for as long as possible... but the time came, and I had to reconnect to them.


The First Call


I dialed their number as I was desperately searching the internet for another provider. A representative answered the phone with their "My goal is to provide you excellent customer service for your communication needs..." or something like that. I gave them my address for my new house and asked what kind of high-speed internet I could get out there. She said I could get 6MB/sec. Hey, that's not to bad, considering I live in Polson, Montana. (Although I get currently get 8MB/sec with Bresnan.)


Right then I found Quest, who seems to have a sweet deal on DSL Internet, so I tell the Century Tel rep that I'll call them back if I can't find a better deal. Unfortunately I do have to call them back because quest doesn't give service to my area.


The Second Call


I call Century Tel back. This time the rep says I can only get 3Mb/sec.... "WHAT?!?! I just called in and they said I could get 6Mb/sec!"


The Century Tel rep said, "Really? On this address? You had them check this address?... Hmm... let me check... Oh yea look here you can get 6Mb/sec."


Are you serious? Then why did you tell me I could only get 3Mb/sec? I can't see your screen, it's your job to be a representative of Century Tel. But hey, it could be worse... at least I was lucky enough that time. If she was dumb enough to miss that one, maybe I could get an even faster connection... "Can I get the 10Mb/sec?"


"Yes, you can."


I had two reactions to this last statement: 1) AAAAHH!!!! Why won't you just tell me what I have available?! It's not my job to quiz you on all of the different options I have, It's yours! 2) Sweet! 10Mb/sec. I finally have a justification to using Century Tel over all of the other companies who don't suck.


Century Tel Does It Again (Third Call)


I get a call from Century Tel two days later saying that everything has been set up and I can now use my Internet. So I move into my new house, and try to set up the Internet, and surprise, surprise, the Internet doesn't work. I call into their help center, after doing a system and modem reboot. I get a guy who has be reboot my modem a couple more times before telling me that I should just wait a couple more days and then try it again...


Thank you for that suggestion, but I do websites. I only work on the Internet. I can't just wait a couple more days. You said it would be up today, and then called me to tell me that it was all set up, and now you tell me to just wait.


The Fourth Call


I try fiddling with my set up to get it to work for a couple hours to no avail, so I call Century Tel again to see if I could get an intelligent rep. As luck would have it, I get a lady who immediately fixes my problem with a quick username/password. Thank you! I love when bad service gets lucky. My Internet works, and I have 5Mb/sec! It's too good to be true...... literally...


The Fifth Call


This morning dawns on three computers without internet. I check all of the connections, the power, all of the lights are on. I reboot everything and make sure the username/password is in place. I didn't change anything from last night, so why is it broken? I have to call them again.


I get another guy who has no idea what's happening. He has me do the same things over and over, and nothing is working. After a half hour, it finally starts working but I've got 4Mb/sec and it's getting slower.


Whatever. At least I have Internet, and I can get to work.


Century Tel at it's Finest


At about 3:00 in the afternoon, a Century Tel truck pulls up, and a guy fiddles with my wires. He tells me that they dropped me down to 1.5Mb/second because the 6Mb/sec was acting up, and giving them problems... And sure enough, here I am stuck with 1.5Mb/sec.


Summary:


There really is nothing quite like being promised one thing and given another, and on top of that, having customer service reps who have no idea how to read. Century Tel promised me 10Mb/sec and here I am four days, and five phone calls later, with 1.5Mb/second.


I better get a discount on my ridiculously priced service, or yet another Service Review about Century Tel will be coming along soon.


-"Oh, the Importance of Quality Customer Service."

-Ashton Sanders

Labels: , , ,

Wednesday, April 18, 2007

.htaccess - AddHandler

WiaF MascotThere is a very common problem when trying to upgrade sites made by "newbie" website developers or when you realize that html isn't the only language on the internet, and you need to upgrade your site.

Problem:

You have a site where every page has a *.html or *.htm extension, and you want to add a dynamic, server-side programming language like PHP.

Solution #1:

Go through your entire site, and change every file name to a *.php extension. Then go through every page and correct all of the hyper links. Then do testing on your entire site to ensure that you haven't missed any links. Also, if you know anything about search engine optimization and websites, you'll know you need to create 301 redirects from your old pages to your new so that you don't lose any Rankings you may have gained. Then you have more testing to do to make sure all of your 301 redirects work....

Solution #2

Add this one line of Code into your .htaccess:
AddHandler x-httpd-php5 .php .htm .html


That's all it takes to add PHP to my html files?

Yep, that's it. That little line of code has saved me hundreds of hours of work, and I'm sure it's not as commonly known as it should be.

-Spread the Wealth
-Ashton Sanders

Labels: , ,

AFB - Away From Blog

WiaF MascotWow! It's been three days since I posted on my blog. That is horrible. Before three days ago, I had posted 41 posts in 47 days! That leaves only 6 days that i hadn't posted in a month and a half!

My excuse is a simple one: I've moved to a new residence, and I am forced to get CenturyTel.... If you are curious as to why that would cause three days of no interenet, read this.

And prepare yourself for yet another service review of Century Tel.

-Ashton Sanders

Saturday, April 14, 2007

ActionScript - this

WiaF MascotThis ActionScript/Flash Tutorial is like all of my tutorials, quick and to the point. I hope I don't type too fast for you. ;)

Using "this" in Flash/ActionScript

The "this" command/function is an extremely useful one. It makes it easy to use relative paths (as opposed to absolute).

Here is what the Adobe Dictionary says about "this":
Description
Keyword; references an object or movie clip instance. When a script executes, this references the movie clip instance that contains the script. When a method is called, this contains a reference to the object that contains the called method.

Inside an on event handler action attached to a button, this refers to the Timeline that contains the button. Inside an onClipEvent event handler action attached to a movie clip, this refers to the Timeline of the movie clip itself.
To put that into English:

If you have a movie clip, and your "on (press)" statement is:
//On Press, the button will disappear.
on (press){
  this._visible = 0
}
This will work no matter how many levels deep into the movie you move this movie clip. "This" calls the path to that movie clip. So if your movie clip is named "mcbutton", and it's placed on the root of your movie:
on (press){
  trace(this);
}
// Returns: "_level0.mcbutton"
That is a very useful piece of ActionScript to know, as you will end up using that in every movie you make.

_level0.is basically the same thing as _root. A more extensive definition will come soon.

Another Note about "this"

If the above example was done with a button instead of a movie clip, the trace(); would return "_level0"

-"Flash is by far my favorite computer program."
-Ashton Sanders

Labels: ,

Friday, April 13, 2007

ActionScript Basics - Structure

WiaF MascotMy Last Post discussed ActionScript Variables. Now I'm going to do a quick run down about ActionScript Structure.

You will notice that many different programming languages have a similar format. PHP and ActionScript, for example, have a very similar syntax. A lot of functions are written exactly the same for both of them. There is one very unique thing about ActionScript: Symbols can be inside Symbols inside Symbols inside Symbols. (A symbol is either a Graphic, Movie Clip or Button. F8 will turn the selected items into a symbol of your choice.)

This structure is very useful for animating in Flash (and a lot more). You can also store variables within movie clips. Lets say you had a movie clip called "ball".
//This is programmed onto the first frame of your movie.

x = 3;
ball.x = 4;
That code will store two different variables. Even though the variables have the same name, they are located in different places, so the second variable wouldn't overwrite the first one.

-Yes, this is very basic.
-Ashton Sanders

Labels: ,

ActionScript Basics - Variables

WiaF MascotThis post is about variables in AcrionScript (the programming language for Macromedia/Adobe Flash).

ActionScript Basics

Some very quick basics
// <- These two slashes are a comment.
// Everything after a comment on that line
// will not be processed by Flash

every.statement.ends.with.a.semicolon;


Varbiable Basics

What is a variable? A variable is group of numbers and letters or one letter that will store an amount, a string or a true/false statement. A variable cannot start with a number.
// This Creates the variable "x" and
// gives it the numeric value of 4
x = 4;

// trace() will display whatever you put
// between the "(" and ")".
trace(x);

// That will display: 4
In this example, the numeric value of "4" was stored in the variable "x". Here is another example:
number = "4";

trace(number);
// 4
These last two examples were very similar, but notice that the variable (number) was given the value of "4" (with quotes around it). The quotes changed the value of the variable from a numeric value to a string. A string is just a group of number, letters, symbols, etc. defined with quotes.
statement = "Here's a statement for you";

trace(statement);
// Here's a statement for you
As I mentioned above, you can give a variable a numeric, string or true/false value. This third value type is called a Boolean value. A boolean value is either yes/no, true/false, 1/0, on/off, etc. In Action Script, you can assign them with either true/false or 1/0.
go = true;

trace(go);
// true
That is a quick summary of how to declare variables the shorthand way in ActionScript. My next posts will be along these same lines, so if you are hungry for more, check out my other ActionScript Posts them out.

If you have any questions, or if I was unclear at any part, feel free to leave a comment, and I'll get it fixed up for you.

-Until Then,
-Ashton Sanders

Labels: ,

Wednesday, April 11, 2007

Google is: Funny

WiaF MascotYes, Google is a lot of different things. One of the things that Google is, is "Funny"

I don't know who figured this out... but let just say you wanted to drive from Boston, MA to .... France! You could ask Google Maps to give you directions...

And It's actually a fairly simple process. I've got the map saved Here:

Click to Get Directions

I'd like to bring your attention to step 5.

HAHAHA

-"I love Google!"
-Ashton Sanders

Labels: , ,

Monday, April 9, 2007

CSS - Replacing Text with an Image

WiaF MascotCascading Style Sheets (CSS) make it very easy to replace text with an image. Here is the whole process described in as few words as possible:

Background Information

In CSS, "display:none" will cause that element and every child in it to disappear. There is nothing you can do to make one of the child's element.
"background-image" give an element a background. This can be applied to just about every element.

Create the Elements in HTML

In your HTML, write this:
<h3 id="title">
  <span>Here is the Title!</span>
</h3>

Create the CSS to replace the text with an image

In your CSS, write this:
/* Remove the Text */
#title span {
  display:non;
}

h3#title {
  background: url("image/url.jpg") no-repeat top left;
  height: 20px;
  width: 100px;
}
And Bam! Your text has disappeared off of the page, and the H3 element is 20 pixels wide and 100 pixels tall. It also has an image for a background that is aligned in the top left corner.

I've seen that CSS Text Replacement technique described with two pages, so I thought I'd see how short of a blog I could make out of it.

And Now you know how to replace text with an Image!

On a side Note, I've also seen this done with: "text-indent: -5000px;" or "visibility:hidden". These work, but I would stick with display:none. It's the cleanest way to do it.

-I hope that helps you out with your CSS and Design Needs.
-Ashton Sanders

Labels: ,

CSS - Absolute Positioning

WiaF MascotAbsolute Positioning with CSS can be a very useful thing.

I've been working a lot with CSS over the last year, but I've just recently discovered the secret to absolute positioning.

Absolute Positioning in CSS

Absolute positioning will allow you to move an HTML item from anywhere in your code to the same spot. For Example: The side bar on this page (Top Horse Connection) is at the very bottom of the HTML code. But the CSS absolute positioning tells the side bar to be positioned 170 pixels from the top of the page. Here is the CSS Code:
#sidebar {
  position:absolute;
  top: 170px;
  left:0;
}
As you can see, it's very simple. And it's very useful when you want something to align along the right or left side of the screen. But what if you want a sidebar to be positioned in the middle of your screen (lets say 300 pixels to the left of the exact middle)?

You could do:
#sidebar {
  position:absolute;
  top: 170px;
  left:400px;
}
On a 1400 pixel-wide-screen, that would work perfectly!, but what if your screen was 800 pixels wide, then the sidebar would be 100 pixels to the right of the middle... So what now?!?!

This is what would you do:
#sidebar {
  position:absolute;
  top: 170px;
  left: 50%;
  margin-left: -300px;
}
And Wala!

-More on the way
-Ashton Sanders

Labels: ,

Saturday, April 7, 2007

PHP - Include the Same File from Different Folders

WiaF MascotThis is a PHP tutorial to add advanced include templates to your site.

What you need to know

  • Basic PHP functions: include(); and the "for" loop.

Background PHP Information

It is a very useful thing to use a template on your site. Once I have finished designing a site, and converted it into XHTML/CSS, I then make two (or more) includes out of it: "header.php" and "footer.php". Those two includes have everything that is the same on every page of the site. This allows me to easily add or remove a button, change the layout, etc. All I have to do is change one file, and the entire site is updated!

What's the Problem?

If you know includes, you know that they must be relative paths, not absolute. (So if your page is in the pages folder (/pages/) and your header.php is in the header folder (/header/), you will need to write your include like this:
include(../header/header.php);

The problem arises when you don't want to hard code every new page, in every new folder.

PHP Solution

Here is a simple for loop that will figure out what folder you are in, and put the appropriate number of "../"s to make your includes work:
<?
$folder = split("/", $_SERVER['PHP_SELF']);
$rootpath = "";
for($count = count($folder); $count > 2; $count--){
    $rootpath .= "../";
}
include($rootpath . "include/header.php");
?>
There you have it, some sweet, yet simple PHP.

-Enjoy,
-Ashton Sanders

Labels: , ,

Friday, April 6, 2007

HTML - Premade State Drop Down Menu

WiaF MascotI came up with a great idea (which a lot of people have already thought of =]) to put all the html/php code that I create through my web adventures somewhere so people can grab them. So this will be my first post with content of that nature.

Here is the HTML Code for a State Drop Down Menu. This Includes all 50 states with value="MT" and id="MT":

<select name="state" id="state" size="1">
<option value="AL" id="AL">Alabama</option>
<option value="AK" id="AK">Alaska</option>
<option value="AZ" id="AZ">Arizona</option>
<option value="AR" id="AR">Arkansas</option>
<option value="CA" id="CA">California</option>
<option value="CO" id="CO">Colorado</option>
<option value="CT" id="CT">Connecticut</option>
<option value="DE" id="DE">Delaware</option>
<option value="DC" id="DC">Dist of Columbia</option>
<option value="FL" id="FL">Florida</option>
<option value="GA" id="GA">Georgia</option>
<option value="HI" id="HI">Hawaii</option>
<option value="ID" id="ID">Idaho</option>
<option value="IL" id="IL">Illinois</option>
<option value="IN" id="IN">Indiana</option>
<option value="IA" id="LA">Iowa</option>
<option value="KS" id="KS">Kansas</option>
<option value="KY" id="KY">Kentucky</option>
<option value="LA" id="LA">Louisiana</option>
<option value="ME" id="ME">Maine</option>
<option value="MD" id="MD">Maryland</option>
<option value="MA" id="MA">Massachusetts</option>
<option value="MI" id="MI">Michigan</option>
<option value="MN" id="MN">Minnesota</option>
<option value="MS" id="MS">Mississippi</option>
<option value="MO" id="MO">Missouri</option>
<option value="MT" id="MT">Montana</option>
<option value="NE" id="NE">Nebraska</option>
<option value="NV" id="NV">Nevada</option>
<option value="NH" id="NH">New Hampshire</option>
<option value="NJ" id="NJ">New Jersey</option>
<option value="NM" id="NM">New Mexico</option>
<option value="NY" id="NY">New York</option>
<option value="NC" id="NC">North Carolina</option>
<option value="ND" id="ND">North Dakota</option>
<option value="OH" id="OH">Ohio</option>
<option value="OK" id="OK">Oklahoma</option>
<option value="OR" id="OR">Oregon</option>
<option value="PA" id="PA">Pennsylvania</option>
<option value="RI" id="RI">Rhode Island</option>
<option value="SC" id="SC">South Carolina</option>
<option value="SD" id="SD">South Dakota</option>
<option value="TN" id="TN">Tennessee</option>
<option value="TX" id="TX">Texas</option>
<option value="UT" id="UT">Utah</option>
<option value="VT" id="VT">Vermont</option>
<option value="VA" id="VA">Virginia</option>
<option value="WA" id="WA">Washington</option>
<option value="WV" id="WV">West Virginia</option>
<option value="WI" id="WI">Wisconsin</option>
<option value="WY" id="WY">Wyoming</option>
</select>


-I hope that makes someone's life easier
-Ashton Sanders

Labels:

Wednesday, April 4, 2007

Good People - A Rarity

WiaF MascotIsn't is strange how just a simple act of kindness can make such a huge impact on you? After so many days of being surrounded by negativeness, it's so refreshing when someone comes out of nowhere and helps you out for no reason. Isn't it amazing that you get long holds and crappy service from companies that you have paid hundreds to thousands of dollars to?

I recently stumbled upon a thread where a man I admire sincerely for his selflessness and steadfast morals was smeared with as many lies as there were words on the page. It was actually quite disturbing to read... Why do people have to drag down good people?

Then without warning, some random guy you've never met or seen pops out of nowhere and spends an hour to help you out. He doesn't get paid by a company, he doesn't get anything out of it, and then when you ask him what you could do in exchange, he practically refuses it. It's straight out of the Boy Scout Handbook, and is an amazing experience.

I've recently had a huge problem with an extremely complex flash movie that I was making. I was getting near the end, but this problem would force me to completely recreate it... I was sick with dread. I called Adobe's customer support yesterday, and after an hour on hold, I reached a support representative with a very thick accent. He was very knowledgeable in the subject I was having trouble with, but I don't think he actually duplicated my problem. Anyway... I learned nothing from him (except another way to pronounce "schema").

So as a last ditch effort, I posted a request for help at the Flash Kit Board. I got a reply from this guy named Chris Seahorn from krazyaboutpizza.co.uk. To make a medium story short, Chris downloaded my file, found out what was wrong and let me know that I had a simple publishing setting set incorrectly.

Sure, it probably wasn't that hard for him to figure it out, but maybe it was. And he just saved me endless hours of turmoil and reprogramming. To say the least, I was happy. I put up some links to his site, and asked if I could do anything for him. He practically refused anything and the links.

The world needs more people like Chris Seahorn.

Click Here To View the Thread

-Here's to all the people working to make this world a better place!
-Ashton Sanders

Labels:

Tuesday, April 3, 2007

CSS Button - (One SWEET CSS Button)

WiaF MascotIt is true: "You can make a button a million different ways." There are also as many ways to create a button that will change when you hover your mouse over it. You can use JavaScript, CSS (Cascading Style Sheet), plain HTML, etc. But each one has it's own problems:

JavaScript button: Search Engines have a tough time with JavaScript. I recently got a client who's menu bar was made with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML button: The "onmouseover= and then call in a new image" works pretty well, but you will notice a half second delay or so, because the image has to load. (Yes, you can have the button's load with the site numerous different ways, but that's adding lots of random annoyances that you don't have to deal with.)

CSS button: You can also use CSS to load a new images when someone "a:hover"s over your button.

Here is the best way to make a button that changes when your mouse hovers over it (And yes it uses CSS! Which keeps your website code nice and clean, and Search Engines Love you.) This CSS button technique is also 100% valid CSS and HTML!

First you make one image that has two versions of your button: 1)"Up" and 2) "Hover" side by side. Like this:


(This button used courtesy of www.tophorseconnection.com)

The Reason you put the two images into one image is so that the "Hover" image is loaded at the same time that the "Up" image is.

Now we need to to create the HTML. All you do is add a button class to an anchor:
<a href="#" class="button">&nbsp;</a>
The button's CSS can become a little more complicated, and sometimes (you never know when it will strike) Internet Explorer won't do what you want... So here is the CSS that I created for this css button class:
a.button {
display:block;
width: 157px;
height: 46px;
background: url("../images/button-home.gif") no-repeat;
}

a.button:hover {
background-position: -170px 0
}
As you can see from this sweet CSS button, all you do is give it the correct width and height for the button in the image, and include the button image as a background with a "no-repeat." Then when someone hovers over the button, the background image moves 170px to the left! This saves you from having to load a new image!!!

Click Here to See this CSS Button Technique in Action!

More Information about this CSS Button Technique


Disabled CSS Buttons

Yes, there is so much that you can do with this technique. You can add a third image, that is grayed out (so that it looks disabled), and then apply that to a "disabled=disabled" input! (Yes you can use this same sweet CSS button technique on inputs!)

But Wait, There's More!

There is a problem with this example: you have to create a new image for every new CSS button. Here is what you do:

Instead of using an image with words on it, make an blank button image (without words). And put text between the anchors! You may need to add some extra CSS code to place the text where you want it on the CSS button.

This Sweet CSS Button Technique in use:

Here is a perfect example of this CSS Button technique reusing the same background: Database in a Flash (Yes, there is only one button image, that is reused throughout the entire program!)

Adding Animation to your CSS buttons!

I was having some trouble with a site that I developed a while ago, because the main navigation bar was made with Flash, and Internet Explorer users had to click twice on the navigation bar to get it to work. (There's a rant for another day =]) So I was stuck with how to make this sweet flash navigation bar into CSS and HTML.... This it struck me! Just a couple days ago I came up with this sweet idea using this very technique! I made a button just like above, except it was an animated gif, and the "Up" image was motionless and the "Over" image was animated! You can check it out at Fiditz.com!

-Thats all for today!
-Ashton Sanders

Labels: , ,

Sunday, April 1, 2007

Service Review - Paypal

WiaF MascotI've used Paypal (an Ebay Company) for upwards of 4 years now, and I've never had a problem with them until last week. The worst part about it is that the same problem keeps occurring.

Here is what happened:

So I signed up for a Subscription through Paypal for an Internet service. This subscription costs me $20/month. Subscription services with Paypal are so user friendly. You even get to choose where you want the money debited from. I chose my credit card.

A couple weeks go by, and I check my Paypal account, and the subscription debited by bank account. So immediately I thought that I had accidentally selected the wrong account somehow. I hate when I do that. I go to my subscription page to correct this error... and "Who'd a Thunk it!" I correctly selected my Credit Card, and it still says "Credit Card" and the last four digits.

Well no biggie, I'll just check their "Resolution Center."I must have done something wrong. I check their help center, and find a couple articles about subscriptions. Upon reading them all, I find that none of them help me.

Still not a problem... I'll send them an email. I shoot them this email:
Subject: This subscription is Debiting my bank account...
Body: It clearly states that I have chosen to pay for this subscription with my credit card, and yet the first payment came out of my bank account. Please fix.
Why is it debiting my bank account?
I felt that I explained my problem briefly and thoroughly. Apparently... I didn't because the response that I got was straight out of the "Resolution Center" about how to change the subscription options so that it charges your credit card. Here is the response:
Dear Ashton Sanders,

Thank you for contacting PayPal. I apologize for the delay in responding to your email inquiry. We have recently encountered a large volume of emails. We do not intend on any customer waiting this long for a response.

Hello my name is Maria. I am sorry to hear about this situation, and I understand your frustration and concern regarding the funding source of your subscription. I appreciate the opportunity to assist you with your questions.

To change a subscription funding source you must find the transaction for the original subscription creation in your account history. If you are changing your funding source to a new credit card or bank account, please add the credit card or bank account first by going to your Profile. You can then follow the steps below to change the subscription funding source.

1. Log in to your account at https://www.paypal.com
2. Click the 'History' subtab.
3. Choose the 'Subscriptions' field from the 'Show' drop-down menu.
4. Check the 'From' box and change date back 2 years.
5. Click 'Search'.
6. To view the details of a specific 'Subscription Creation' , click 'Details' in the Details column.
7. Next to Subscription Funding Source, choose the future payment option by placing a bullet next to the preferred option for future payments.
8. Click 'Update Information' to save your changes.

When updating financial information, if the established credit card or bank account information is removed as the funding source for a Subscription payment, the Subscription and Recurring Payments will be canceled. Canceling a subscription cancels all future scheduled payments of that subscription.

- Once a subscription has been canceled it cannot be reactivated
- The seller's website should be accessed to establish a new subscription with their service

I hope this email addresses your concern. In any event however, that you would need more assistant, please do not hesitate to contact us again and we will be more than willing to help you. Have a Nice Day.

Sincerely,
Maria
PayPal Community Support
PayPal, an eBay Company


Are you serious?!?!?! Maria, are you a computer?!?! Did you read the word subscription and send me this prefabricated message?!?!? My question was only two sentences long... please do me the favor of reading it before responding.

I sent them this response:
Thank you... But unfortunately, you haven't read or addressed my problem.

I followed your instructions, and here is the problem that I run into:

THE PAYMENT SELECTION IS SET TO MY CREDIT CARD, YET THE SUBSCRIPTION
JUST DEBITED MY BANK ACCOUNT.

I appreciate your help in this matter,
Ashton Sanders
There! That was definitely simple enough! There is nothing I could do to make this email any simpler... I guess Paypal is staffed by monkeys, because this is the response that I got. If it makes any sense to you, please post a comment... cause I can't figure it out for the life of me. (Note: I received this email at 3:45AM 4/1/07 and I haven't bought anything from ebay.)

I would also like to draw your attention to the text I marked with red in this response (Yes, this is exactly how the email came to me...):
Dear Ashton Sanders,

Hello my name is John, I am sorry to hear about the situation regarding (Briefly repeat the members situation), and understand your frustration and concern over this issue. I will be happy to assist you with your questions.

The cash rebate PayPal email address opt-in begins February 8, 2007 - March 31, 2007.

To qualify for the $15.00 rebate, you must meet the following requirements:

- Have signed up for the Cash Rebate offer during open enrollment or through any other limited offer you may have received
- Single payment of $30.00 or more must have been made on eBay.com, eBay.ca or on merchants' sites in the US or Canada
- eBay.com and eBay.ca purchases must have been made through the eBay checkout flow via the eBay website and not through the PayPal send money tab
- Purchases must have been made between 2/8/07 12:01 PST and 3/31/07 11:59 PST

The Cash Rebate will be deposited into the participants' PayPal accounts by May 1, 2007. Limit one registration and one $15 rebate per person and/or PayPal account.

The following transactions are excluded from this Cash Rebate offer: Send Money transactions, payments to Personal accounts, eBay payments made to Personal accounts, donations, Text to Buy and payments for services.

I hope I was able to assist you with the information that I have provided.

If you have any further questions, please feel free to contact us again.

You may contact PayPal's Customer Service at 1-888-221-1161.

Thank you and have a nice day!

Sincerely,
John
PayPal Community Support
PayPal, an eBay Company
Paypal Help is run by monkeys... Don't email them unless you really don't care about getting your problem addressed.

Paypal... you take 3% of almost every Ebay transaction, the least you can do is have a help center run by sentient beings who have graduated from the fifth grade...

This Flame brought to you by:
-Ashton Sanders

Labels: ,