Retain Domain Name and Page Equity

My portfolio site ranks very highly for keywords, specifically, Patrick Burt and Graphic Designer. This can all be thrown away if I decide to rewrite things or get rid of my already valuable links. Using the same, pre-redesign, URLs has allowed me to leverage pre-existing PageRank towards my new content. I also made sure to use similar content, titles and metadata that had gotten me high on Search Engine Result Pages (SERPs).

Dropping Flash and Using More Javascript

Adobe Flash does not degrade very well in the event that a user does not have Javascript or Flash. If I had to guess, I say that Flash’s inaccessibility is proportional to the surge in use of mobile devices as Web browsers.

Given the advances in the Javascript world with such libraries as jQuery and script.aculo.us and with HTML5 on the horizon, some might say Flash is falling behind. With Javascript, however, comes the responsibility to ensure that user or browsers without Javascript are still given a satisfying experience.

Social Media Presence

I don’t think anyone can disagree that Social Media is here to stay. I’d have to say it’s as transparent as listing your phone number on your Web site. You create a human connection. You are more than simply an anonymous user or company sitting behind a screen.

Functions

• Easily create labels, text fields, checkboxes, radio buttons, textareas, etc.
• Validate empty fields, number ranges, checkboxes, string length, emails, postal codes, phone numbers, and dates
• Display a compiled list of all errors with the form if they exist.
• Change the color of labels that contain erroneous data.

Other Goodies/Features

• Validates with W3C
• Supports two languages (currently has French and English error messages)
• Other functions including string shorteners, easy redirects, HTML emails, etc.
• English and French vocabulary
• Easy-to-understand function names and comments

Download it here.

Finding Images Without Alt Tags

I did some internet sleuthing and found the following code to search for images without ALT tags:

<img((?:(?!alt)[^<>])*)>

What it does is search for “<img”, and then the next “>” that occurs, hopefully the end of your image tag. it then checks for the phrase “alt” anywhere in there to find an alt tag. The downside, is that if you’re image HTML looks like this:

<img src=”malt.jpg” />

Dreamweaver won’t pick up on it. That’s something I’ll look into if I revise the code, but I wasn’t working on a beer website so I didn’t think it was going to be a problem.

Auto-Generating ALT Tags

Because it’s impossible to give an accurate description of each of the 400 images without consuming a lot of time, what we’re going to do is base the ALT tag on the file name.

Here is the FIND field:
<img src=”(.*?)(.gif|.jpg|.jpeg|.png|.GIF|.JPG|.JPEG|.PNG)((?:(?!alt)[^<>])*)>

Here is the REPLACE WITH field:
<img src=”$1$2″ alt=”$1$3>

What’s happening here? You’ll seethat we’re checking for the existence of the “alt” tag once again, but we’re also breaking down the image tag down. Each section to be broken down is within parentheses. The first chunk is the image’s source, then the image’s extension and then the last chunk before the end (that doesn’t contain an alt tag). For example:

<img src=”myDogShelby.jpg” border=”0″ height=”300″ />
becomes
<img src=”||||PART 1: myDogShelby||||PART 2: .jpg||||PART 3: border=”0″ height=”300″ /||||>

Then what we’re doing is reconstructing the image link as follows:

<img src=”myDogShelby.jpg” alt=”myDogShelby”  border=”0″ height=”300″ />

Simple? I thought so.

Finishing Touches

What happens when using this technique is that you’re also throwing the path into the ALT tag:

<img src=”images/shelby.jpg” />
becomes
<img src=”images/shelby.jpg” alt=”images/shelby.jpg” />

This is an easy fix, simply do a global search and replace. Replace:

alt=”images/
with
alt=”

Easy peasy, japaneasy. This is pretty straight-forward, hope that helps and saves you oodles of time.

Validate Anything That Comes In Via Querystring

Although you may expect your query string to do something simple in your application, it can provide hackers with a intrusion point. Example:

http://www.pat-burt.com/somePage.php?error=1

I use the querystring to provide me with a 1 or a 0. But don’t expect hackers to only provide you with a 1 or a 0. Let’s say you’re using the result of the value “error” in your SQL statement:

UPDATE userStatus SET error=1 WHERE userID=248

You can see how the hacker can change the error value to something malicious directly in the address bar to manipulate your SQL statement to their advantage in the following example. It wouldn’t take much to change the query string to produce the following SQL statement:

UPDATE userStatus SET error=1; UPDATE SET password=’HACKED’ WHERE userID=248

What you’d need to do is strip characters or convert the query string’s result to an integer (in this case). If you’re expecting either of those values, check for either of those values before anything goes into your query string.

Validate Anything Posted to a Form

Info posted from a form should also be validated. Keep in mind that forms can be posted to without even viewing the actual form. That means your form validation needs to go beyond using HTML to put a limit on the number of characters in your text field. Using the programming language of your choice, you should validate input based on:

• Length
• Illegal characters
• Type of input (integers, phone numbers, text)

Hope that helps.

With a few carefully placed questions (in writing), you can save yourself a lot of time and energy. You’d also have a string of communications that could help you get your money back in the event that it turned out the host lied about their capabilities.

What To Ask The Software Developer

• Will this run on a default installation of Apache/PHP/IIS/ASP/ASP.NET etc.?
• Which hosting provider do you recommend for your software?
• Does the host require 3rd party software to be installed on the server box itself? This will affect you if you’re using a shared hosting package instead of a dedicated server.

What To Ask The Host

• Have you altered the server variables that would in any way require work-arounds on the part of the developer?
• Are you running something other than a Linux or Windows environment? Something like a hybrid?
• Have you had any customers mention that they’ve wanted to install the XXXXXXXX software package?
• What versions of ASP.NET/PHP/etc. do you have installed?
• Have default installations/configurations been altered? (Eg. Have the trust levels for ASP.NET been adjusted?)

Hope that helps.

• Use HTML markup to style whenever possible. Use attributes like background=”" whenever possible. CSS backgrounds will incorrectly render in GMail, so whenever applicable, make sure your background will work if applied to a table cell (<td>)
• Text, Text, Text. In most email applications, external images will require an action (such as clicking “Display all image below” before images are displayed. Do your best to use CSS and Font tags to style text instead of including large images so that the user still has an opportunity to see content before having to click on a prompt.
• Emails have folds too. Like websites, emails will have folds (the portion of an email visible without having to scroll). The fold will be really high, because of headers and vertical space being taken up by applications or web applications. Keep that in mind when placing your call-to-action.
• Support the ability to unsubscribe. At the footer of your email, provide the user an easy way to unsubscribe to the newsletter. He may be breaching agreements with your hosting company or ISP if you send unsolicited email without doing so.
• Your subject line is more important then your email. You will lose a majority of your users before they even see your email. Be sure to take the time to think about a clever/catchy subject line for your target audience so that you can get more users into your email.

That’s all for now, hope that helps.

Inline CSS

Inline CSS is referred to when CSS is inserted to the HTML tag via a style attribute. This CSS will only affect that particular HTML tag. Example: We can change our Header 2 to a sixteen pixel font size with the following code:

<h2 style=”font-size:16px;”>My Sixteen Point Header</h2>

This will not affect any other Header 2′s on the page. Since CSS does not observe line breaks, we can insert multiple CSS attributes into the style attribute:

<h2 style=”font-size:16px;color:#ff0000;”>My Sixteen Point Header</h2>

This method is not 100% recommended because it is tedious to revisit multiple files and dig into the code to make simple changes.

Page CSS

In your page’s <head> tag, you can insert CSS that will affect that page only. This will look similar to a stylesheet, except for that there will be HTML tags above and below the CSS. Example:

<style type=”text/css”>
p {color:#ff0000;}
</style>

Again, this is not 100% recommended because it is tedious to revisit multiple files and dig into the code to make simple changes.

Most Important Attributes

Before we get in knee deep in CSS, let’s go over the most important attributes.

• Height – Determines the height of the CSS item (Example: 10%, 70px)
• Width – Determines the width of the CSS item (Example: 10%, 70px)
• Color – Determines the color of the CSS attribute (Example: red, #ff0000, #f00)
• Font-Family, Font-Size, Line-Height, Letter-Spacing, Font-Weight – Changes the attributes of the text in the container. Examples:
  font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:18px;
  letter-spacing:-1px;
  font-weight:bold;
• Padding – This is the buffer space on the inside of the CSS element. Formatted from the top of the div container, clockwise to the left of the div container. (Example: padding:5px 0 8px 16px;)
• Margin – This is the buffer space on the outside of the CSS element. Again, formatted from the top of the div container, clockwise to the left of the div container. (Example: margin: 5px 10px 0 0;)
• Background-Color, Background-Image, Background-Repeat, Background-Position. These are fairly straight-forward:
  background-color:#ff0000;
  background-image:url(images/background.jpg);
  background-repeat:no-repeat; /*also repeat-x or repeat-y*/
  background-position:top center; /*or pixel values*/

Those values alone can put together a pretty complicated website. Next week, I will discuss more difficult attributes and how to get started. Hope that helps.

2 – Text Alternate (or simple HTML alternate)
If you’re launching HTML emails, be sure to include a text-only alternate (and vice-versa). Not only does it help with getting your email through filters, but also with recipients who check their emails on mobile devices.

3 – SMTP
If at all possible, use an SMTP server to launch emails instead of using unauthenticated email.

4 – Link Destinations
Have a look at your link destination, avoid including hyperlinks with the following destinations:

• An IP
• A port number
• A deep folder architecture (eg. http://www.pat-burt.com/insiders/content/avi/download/getit.html)
• Subdomains

5 – Recipient List
If at all possible, try to send the emails to recipients individually. Multiple recipients in a To, CC or BCC field can start to get flagged as bad news.

6 – To and From Fields
This is different for each programming language, but make an effort to list the sender’s and the recipient’s name or organization, instead of uniquely the email.

7 – External Applications
External email distributors such as Campaigner will actively make sure you’re email doesn’t get blocked by taking a few of the precautions mentioned above for you. They are also more likely to be making sure that their origin/IP isn’t blacklisted to most spam filters. It gets riskier if you decide to go with cheaper Walmart hosting and run the risk of getting flagged by other users who share the same server.

Hope that helps, that’s all for now.

You will need to have two files. An HTML file, and a CSS file. Both of these can be blank, but try to make sure they have the right extension in the filename. You can link the CSS file with the following code in your HTML <head> tag:

<link rel=”stylesheet” type=”text/css” href=”myStylesheet.css”>

Okay, now that we’ve got two files, let’s get started.

Your basic element HTML markup consists of a DIV tag: <div></div> . A DIV container is a square. By default, it’s as tall as the content within it, and fits to the width of whatever element it’s in.

This DIV tag is modifiable in almost every way imaginable in CSS. What you need to do is establish the link between your HTML markup and your CSS element. You would do so using an ID, or a CLASS. The only difference is that ID’s are only used once on a single page. Let’s say you want to display the text within the div at a 12 pixel font size.

Using an ID

HTML Markup
<div id=”myCSS”>12 Pixel Font</div>
CSS
#myCSS {font-size:12px;}

Using a CLASS

HTML Markup
<div class=”myCSS”>12 Pixel Font</div>
CSS
.myCSS {font-size:12px;}

Notice how I had to use a pound sign (#) when defining an ID in the CSS and a period (.) when defining a CLASS. In your CSS file, you can add as many attributes as you like within the curly brackets and it will affect the respective DIV container. If we wanted our myCSS class to appear bold, we would do the following:

.myCSS {font-size:12px;font-weight:bold;}

Like HTML, CSS has little importance on how you space your markup. The above CSS will perform exactly the same as:

.myCSS {
font-size:12px;
font-weight:bold;
}

Other HTML Elements

All elements can be styled using CSS as long as they are references properly. Technically, the only difference between a DIV tag and a SPAN tag (or P tag, LI tag, etc.) is that they each have preset attributes to make coding easier. A DIV container, as mentioned earlier, will, by default, fill the width. A SPAN container will, by default, display inline with other elements. You can just as easily use one for the other like so:

HTML
<div id=”actsLikeASpanTag”>I’m a span tag.</div>
CSS
#actsLikeASpanTag {display:inline;}

That’s all for now, hope that gets you started.

2 – Recycle old code whenever possible
Have you done a similar top navigation before? Make use of the code you developed for a project you finished 6 months ago. Time is money and you don’t want to go through the headaches you went through 6 months ago.

3 – Keep in mind what needs to printed
Although you can prepare print stylesheets, you can save yourself headaches later by remembering what needs to be printed and using an image or a CSS background accordingly. For example, clients typically like having their logos printed out, something that won’t happen unless it’s an image or you do a CSS workaround on your print stylesheet.

4 – It’s more important to keep your HTML simple
In the event that you can to choose between a more complicated HTML markup or a more complicated CSS file, go with the more complicated CSS file. Although you won’t think your template will get too bad, content added to your template may start to get a little cumbersome.

5 – Keep a library of stripped down useful functions
I often search my own blog and take a peak at my CSS Popup code whenever I need it because the code is in its simplest form. Sometimes pulling a developed version from another site you developed is a little trickier because you’ll have to undo the customizations you did.

6 – Use multiple stylesheets
In some occassions, you will need a decent clump of CSS code to make a single page on your website display correctly. Use a separate stylesheet for that page so that users who don’t access that specific page don’t have to download all that CSS.

7 – Know how to deal with PNGs
PNGs require a decent amount of work to get them to function correctly in every browser AND to validate. This becomes especially useful as more and more websites have drop shadows over complex backgrounds.

8 – Easy custom bullets
The easiest way to do custom bullets that function correctly in every browser is to use a background image for the <li> item. For this not to go bonkers with the lists in general, set the margin and padding to 0 for the <ul> and <li> item and work from there.

9 – Know how to replace quotes and apostrophes
These can start causing problems in fields such as text fields or text areas. Example: <input type=”text” value=”He said:”I don’t know what you’re talking about”" /> This would cause a giant mess and an unintended result. A quote can be replaced by &#34; and an apostrophe can be replaced by &#39; (Don’t use &apos; or &quot; as these don’t work all that well across all browsers)

10 – Radio buttons? Make sure you have one selected
Having a radio button pre-selected saves you from having to validate a blank result if the user chooses not to select an answer. For example, if you ask the user to select either Male or Female and neither one is selected by default, you’ll have to run form validation that makes sure that one or the other is selected. If you select Male by default, it’ll save that extra coding time. Besides, if you allowed users to not select an option, you’d use checkboxes instead of radio buttons.

That’s all for now, hope that helps.