Just two months ago (December 2009) this website www.keyframe5.com got hack by a spammer! I never thought I would end up as a victim, I always say to myself this will never happen to me.

Here is how I find out how my WordPress website was hack and how to protect your WordPress website from becoming a victim.

1. The fastest and easiest way to keep your WordPress website protected from hackers and spammers is to always upgrade your WordPress website to the latest WordPress version.
2. Validate your CSS and source code with W3C.
   
   If some unknown html codes were added, you can easily pick it up the errors with W3C. If you don’t know how to validate your source code through W3C, you can still do it by remembering the amount of errors you have and later on when you check it again you suddenly have 100’s extra errors. Then that should tell you something is wrong.
3. Look at your web traffic statistic. If you notice a slow decline of traffic on your web site and you have a gut feeling something is wrong. Check and see what key words some of the people use on search engines to find your site. For example, I notice someone used the key word “3D penis mesh”. I know the word penis is not on my website anywhere (except on this page), but for some weird reason someone found my site with the word penis. That should be a good warning sign something is wrong.
4. Lastly, regularly check your source code. I check my source code all the time and I’ll admit I didn’t notice anything wrong when I got the hack but if you’re careful you might be able to find something out of the ordinary.
5. Another thing you can do is backup your files regularly. If you do not want to upgrade to the latest wordpress because you are scared something might break. You can always upload your back up. This will overwrite the spammer’s code, but remember it can happen again since you are still using the same files.
6. Yes, always upgrade WordPress when in doubt.

Are you always on the road or for get to install your favorite a HTML Editor? Well, I came across this website called online-html-editor.org and it is free to be download. It is not going to put Dreamweaver or any other WYSIWYG HTML Editor out of business but this little software does a decent job for basic HTML editing.

You don’t even have to download it to your computer. You can just visit the website and load your html files while using your favorite internet browser. This HTML Editor is good enough for basic html editing, inserting images, formatting text.

Intro and Splash Pages
The worst thing you could do is to have a Flash splash page and inside the flash object there is the enter link. This mean, the each engine spiders can not access the enter link inside the flash object. Therefore, your splash page with the flash object will be the only page the search engine spiders will index and not the other pages.

It is okay if you don’t care about search engines indexing your content, but for the rest of us this is the biggest mistake anyone can do with SEO. Your homepage is likely the highest ranking page of the entire site. Why put any splash page there? There is no use for splash pages, unless you want the users to have the options to select which language they prefer, but other than that I don’t see any good use of a splash page.

According to a recent poll, 12 000 web designers were asked “Do you think web designers required SEO?” 84% voted YES, 7% voted NO, and 9% don’t know anything about SEO. If you are among the 9% of the web designers that don’t know what SEO is, then this article will try to explain some of the basic things about SEO. This article will explain the do and don’t about SEO. Also the common mistakes made by many web designers and web developers.

Why you need to know about SEO?
1. SEO is not only for online web marketers. Web designers or the front-end web developers are responsible for SEO and how to setup web pages for SEO.

2. You probably lose a lot of traffic and visitors if your site is not search engines friendly. Keep in mind most people use search engines to search the internet, if your site is not search engines friendly, which mean you’re not listed on search engines high enough for people to find your site.

3. Also having SEO knowledge is a very valuable asset. You can sell your SEO knowledge to your clients.

Drop shadows are a great and easy way to add some depth on your images. Especially you can add drop shadows with css, which you don’t have to spend time adding any drop shadows using Photoshop and export them out as .jpg. If you don’t like your drop shadows or for some reason want to remove them, you can easily use css to remove the drop shadows or modify it to your liking with only one css file.

Ok, usually it is pretty straight forward if you just have a regular anchor link like this one.

1. The link code:

<a href=”#myLink”>Link</a>

<a name=”myLink”>Anchor</a>

But what if you have your link as an input form and you want to add the anchor link like this one below.

<input type=”submit” onmouseover=”this.style.cursor=’pointer’” id=”write-review” value=”My Button” />

<a name=”reviewhere” id=”reviewhere”></a>

Then add onclick=”location.href=’#reviewhere’”

<input type=”submit” onmouseover=”this.style.cursor=’pointer’” id=”write-review” value=”My Button” onclick=”location.href=’#reviewhere’”; />

I was wondering the other day why my search button doesn’t have a mouse over effect. It should change the pointer into a hand when you hover over my search box. It is showing only for IE but not in FireFox.

This is what I have before and you can see when the cursor is right over the html input search button and it doesn’t change the cursor.

<input type=”submit” onmouseover=”this.style.cursor=’hand’” id=”searchsubmit” value=”Search” />

Here is the solution html code below. You need to change hand to pointer (as per W3C standard). It work both on IE and FireFox.

<input type=”submit” onmouseover=”this.style.cursor=’pointer’” id=”searchsubmit” value=”Search” />

This is how it look now.

The Cascading Style Sheets are made up of 2 parts, the selector and the declaration.

The selector comes first and it describes the element on the page that is going to be control through this rule.

In the image below you will see the selector which will control all the h1 in the current document.

Next to the selector you will see the declaration. The declaration are contain in between these curly brackets { } which tells the browsers that all properties inside { } should be apply to the element identify as the selector (in this example h1 selector)

Inside the declaration we have the property and values. Notice they are separated by : and ends with ; this tell the browsers to move to the next property if there are any available.

In this example, our rule will take all the h1 and make them all Arial with the font size at 1.4em and the color will be white.

You can use Dreamweaver to do this for you, or if you want and you have memorialize all the selector and declaration you can always hand code them.

Find more info on Cascading Style Sheets Structure and Rules with the text links below.

CSS stand for Cascading Style Sheets. A CSS style is a collection of formatting attribute that is use to style an element on a page. A style sheet is a collection of these styles that can either apply on a single page on a site, or multiple pages on a site or the entire site.

Understanding some of the basic rules of CSS can make you write more efficient styles and help you manage more efficiently with your website.

If you already know the style in word or Indesign you already know about how style work. If you want the header to look a certain way and have a certain color, you will only need to change the style of that header and it will change that header style in the entire site. No need to change each header one by one. Modifying that one style of the header will change all the headings of the site.

You can easily modify the look and feel of an entire site with one file. By having your CSS in one file and linking all your pages to this single CSS file. You an easily modify the look and feel of your entire site with one file.

There are 3 ways to place the styles. You can either place the style on a external file and linking all your pages to that single file. Or you can go ahead and embed those styles on the page itself. Lastly, you can place an inline style on the element..inline style are not recommended but sometime it is use.

As a general rule, inline style with overwrite embed style, and embed style which will overwrite external style.

I would recommend all of your pages linking to a single external style and you can easily open that one file to change the look and feel of the entire website.

Find more info on “Understand Style Sheets” click on the text links below.

Poorly written web writing misleads visitors and wastes millions of hours daily. For todays there are more than one billion Internet users, which translate to frustration. For your web design customers, it means missed opportunities. Gain insight into highly effective web writing tactics that will help promote positive online experiences with every website you design and develop. Visitors will reward your clients with more leads and sales, and make you look good along the way.

1. Website Architecture Matters
Internet users are constantly bombarded and overwhelmed with endless layers of disjointed information on the Web. Don’t fuel the chaos. Instead, structure information and lay out task steps in an intuitive manner to help visitors find the information they need and complete tasks, so they can get on with their busy lives. Arrange your client’s website navigation, information and links according to their target audience’s needs rather than their corporate structure. Your client’s website is not organizational chart, so don’t let it mimic one.