YUI does not have a function named getElementsByTagName, but the getElementsBy will do just that.

getElementsBy(method, tag, root, apply)

The method attribute is the important one here. The tag, and root are mainly there to offer optimization by reducing the possible scope of items the method is ran against.

If all you need is elements by a certain tag name, just pass in a function into the first argument that always returns true, and make sure to pass in a tag name for argument 2 that your looking for.

For example,
var forms = yDom.getElementsBy(function(el){return true;},'form'); should return an array of form elements that can be accessed further.

If you need a more specific filter (e.g. only ‘a‘ tags with class=’selected’) you could interact with the el item in the function. If you return true, the item will be added to the list. Otherwise return false and it won’t be in the array.

A good resource for more YUI Dom fun can be found at klauskomenda.com

If you’ve ever found yourself looking for that exact command on Google, one of these might be worth pinning to your workspace wall.

The Best Developer Cheat Sheets Around (from Webmasters by Design)

1. Don’t use the DELETE statement

Instead, use an UPDATE statement to mark a row to be deleted at a later time. Build your database so that the tables have a ‘deleted’ column. Then, run the DELETE at a later time on all rows marked to be deleted. Just use a small boolean value in the ‘deleted’ column, or you could even call it ’status’ and leave room for more status’s of a row by using an integer or small character value.

This can be big. Put simply, an UPDATE statement is cheeper than a DELETE statement because your DELETE statement will force the entire table to re-index the primary keys and the indexed.

2. Reduce IO’s by reducing SELECT calls

If you use UPDATES a certain way, and your database is also using UNIQUE fields correctly, you can reduce SELECT statements.

For example, if you have a table where you want to decide wether to INSERT or UPDATE, you might try running a SELECT to check for the data first. That will ALWAYS result in two calls.

<?php
// this code will always result in two calls !!
$count = functRunQuery("SELECT COUNT(*) FROM user_table WHERE username='john';");
if ($count > 0) // then run UPDATE
else // run INSERT
?>

Instead, run the UPDATE or INSERT first without using a SELECT call if you can…

<?php
// this code could result in one call
$affectedRowCount = functRunQuery("UPDATE user_table SET username='bob' WHERE username='john';");
if ($affectedRowCount > 0) // we're done, don't need to do anything
else // didn't find any rows so run the INSERT here
?>

OR, if your table would probably see more successful INSERTs than UPDATEs do it the other way around (PHP5 method here)…

<?php
// this code could result in one call
try {
// try inserting the user without checking possible unique conflicts...
functRunQuery("INSERT INTO user_table (a_unique_username) VALUES ('bob')");
} catch {
// catch the error here if 'bob' is already in the database, and run an UPDATE instead
}
?>

If scalability is a possible issue for your application, you should always be looking for ways to reduce database calls and cut down on re-indexing.

First, what is an abstract class? In not-so-technical terms, they seem to be just like a normal class. You define methods, variables, use a construct function, and can declare items as private or public.

abstract class FormBuilder {

	public $method;
	public $action;
	public $name;

	function __construct($name,$action,$method) {
		$this->name = $name;
		$this->action = $action;
		$this->method = $method;
	}
}

However, you cannot create instances of these class’s directly. You must create another non-abstract class and extend the abstract class.

class LoginForm extends FormBuilder {
	function printForm() {
		print '<form name="'.$this->name.'" method="'.$this->method.'" action="'.$this->action.'">';
		print '... form body ...';
		print "</form>";
		return true;
	}
}
$frontPageLoginForm = new LoginForm();
$frontPageLoginForm->printForm();

In this case you could move to creating a info request form, submit story form, or any kind you may need. Then create instances of those class’s as needed with methods and attributes custom taylored to the data that class handles.

So, why write the abstract class? In this case we could create a lot of form types, and build up the parent class to handle validation, creating form fields and storing variables that are relative to all forms (e.g. a unique id generator or timestamp.)

Then build up the classes that extend the abstract class to define less used and not-so-global features. In this case maybe username and password, along with a password encryption method may only make sense to a login form, not a request info form.

I think this starts to make a lot more sense as you start to use them more. At first, I thought ‘why not just build them into the main class?’ But as our team started extending those class’s more and more, it became obvious why we used that structure when we were able to tweak one validate method in the parent abstract class to fix a glitch in error handling was one file rather than multiple files.

Check out the PHP Manual for a much more technical view of PHP abstract classes.

PHP Include

<?php include(”header.inc”); ?>

ASP include

<!––#include file=”info_header.inc”––>

Include statements allow you to place part of your code into a separate document that can then be included on multiple pages of your website. The advantage is that you can include all you your details, logo, links, and so forth in one file. Then, if you need to update anything in that section, all of the pages including that file are automatically updated. You can also do the same for the footer.

Since these included files are simple text documents, they can have whatever extension you want, but commonly end in .inc. When read by a browser, the included file is read as part of the initial page. That is, the browser sees header.inc, index.php (or .asp), and footer.inc as one document.

The procedure is pretty straightforward, but here are some basic examples to get you started. The following examples are in PHP, but the ASP would work exactly the same with the appropriate include statement.

header.inc:

<html>

<head>
<title>Include Example</title>
</head>

<body>
<div id=”nav”">
<ul>
<li><a href=”books.php”>Favorite Books</a></li>
<li><a href=”movies.php”>Favorite Movies</a></li>
<li><a href=”other.php”>Other Favorites</a></li>
</ul>
</div>

index.php:

<?php include(”header.inc”); ?>

<div id=”content”>
<h1>Title</h1>
<p>Some content.</p>
</div>

<?php include(”footer.inc”); ?>

footer.inc:

<div id=”footer”>
Copyright info
</div>

</body>

</html>

It is likely an impossible task to make a decent website that is usable by everyone, but it is a noble effort to try. The major users we need to consider (in addition to those that we consider as “standard” users) include those using old browsers, screen readers, and text browsers, those with poor vision, those who are colorblind, users without Javascript, those using cell phones or other mobile device.

What needs to be done?

1. Design using web standards.

• If you do this, then you are already well on your way because you site should already degrade nicely in old browsers and be formatted pretty well for text browsers.

2. Don’t open links in new windows if you can help it.

• New windows are bad news for screen readers.
• The target attribute has been deprecated by the W3C and may not be supported by browsers in the future.

3. Avoid using Javascript for links (new windows and otherwise).

• Not all users have javascript-enabled browsers. Try to provide an alternate option for these users if the use of Javascript is unavoidable.

4. Use descriptive links

• Use descriptive wording that will not mislead users. Avoid the phrase “click here.”
• Make use of the title attribute to support or extend link description.
• If you are going to open a link in a new window, let the user know in some way.

5. Describe you images thoroughly for screen readers and text browsers

• Make sure that you describe the image in the alt attribute.
• Make sure any and all text conveyed in the image is described in the alt tag.
• Use the longdesc attribute for complex images such as graphs and charts.
• Added bonus: search engine crawlers look at alt tags, so good descriptions can help your optimization.

6. Consider the near-sighted

• Make sure your text is big enough to read for all.
• Use relative units for text so that the size can be increased.

7. Use contrasting colors for text and background

• One of the keys to accessibility is legibility. See my last article for more on this subject.

This tutorial really just covers the basics, the stuff that is easy and that everyone should do. This should get you started, but to truly understand the reaches of accessibility, check out these links:

About Accessibility

• What Is Web Accessibility? by Trenton Moss
• W3C WAI
• Section 508 homepage

Developing Accessible websites

• W3C’s WCAG Checklist
• Dive Into Accessibility

Validation

• Cynthia Says Accessibility Validation (basic)
• Bobby Quality, Accessibility, and Privacy Validation (advanced)

How To Set a Cookie

JavaScript has a built in object called the “cookie” object. You can access it simply with the following call.

alert(document.cookie)

Click Here to see what is in your browsers doument.cookie.

If you want to save something as a cookie, you have to URL encode it. This means you should use the same syntax that you see when people pass information in the address bar of a web address (the GET method, to be exact.) For example, www.chickenbeak.com?site=chickenbeak or www.chickenbeak.com?name=chris&site=chicken.

document.cookie = "site=chickenbeak"
document.cookie = "name=chris"

Click Here to set your browsers cookie like above.
Then Click Here to see what is in your browsers doument.cookie.

As you can see, the cookies are stored in the same format that you write them as, which is again URL encoded. You will want a JavaScript function that sifts through the document.cookie object and picks out the information you need. We will do this by splitting the long string saved in the document.cookie, and take the one bit of info we need.

What if we wanted to display a JavaScript message box to a visitor the first time they visit your homepage, but not every time they browse back to your homepage from a sub page of the site. We will set a cookie telling us that they have been there. Let’s start with a JavaScript function.

function getCookie(cookieName) {}

The way we want this function to work is to pass the function a cookie name, and it returns the cookie value. We will mainly be using the JavaScript “split” function, storing the separate values into an array, and for each spot in that array running the split again. See, this is the pattern of a long cookie.

“varName=varValue;varName=varValue;varName=varValue”

So, let’s do the first split.

cookieInfo = document.cookie
cookieInfo = cookieInfo.split(";")

This leaves us with an array “cookieInfo” which would contain values looking like “varName=varValue” for each cookie. We need to loop through this array one time and split it again.

cookieCount = cookieInfo.length
for(i = 0; i < cookieCount; i++) {
tempCookieInfo = cookieInfo[i].split("=")
//next we look at the [0] spot, which is the "varName"
//and look to see if it match's the "cookieName"
if(unescape(tempCookieInfo[0]) == cookieName
return tempCookieInfo[1]
}
}

Note the comment above in the code. That is where we get the actual value based on the name of the cookie. Notice the use of the “unescape” JavaScript function? Remember that the cookies are URL encoded, which means you’ll get the codes like %20 instead of a space. That unescape will help in keeping the information formatted best for your JavaScript comparisons.

Let’s put it all together

We have a function now that will pull a value out of the document.cookie object. We would use it something like this…

if(getCookie("mySiteVisited") == "yes") {
//do nothing
} else {
document.cookie = "mySiteVisited=yes"
alert("Welcome!")
}

And that would of course require our full function from above…

function getCookie(cookieName) {
if(document.cookie) {
cookieInfo = document.cookie
cookieInfo = cookieInfo.split(";")
cookieCount = cookieInfo.length
for(i = 0; i < cookieCount; i++) {
tempCookieInfo = cookieInfo[i].split("=")
if(unescape(tempCookieInfo[0]) == cookieName) {
return tempCookieInfo[1] } } }
else { return null }
}

Oh, don’t forget that big “if” block around most of the functions code. If the document.cookie object is not used by their browser, the function returns null. That way you can see if the viewer use’s cookies or not. That can be helpful because you can write code to react the lack of cookie support.

There you have it, set cookies, get cookies and a bit of use from the “split” JavaScript function.

First a quick note. It’s always a good idea to write a single file for a site called something like “db_connect.inc” and use that file by all of the other pages to connect to your Database. That way, it’s one change instead of a change on each page if you ever switch the database or the method of a connection. A great place to stick this function is in that file, since it probably won’t see much use outside of the times you make a connection. Just a thought.

Let’s start by defining the function name, along with creating the input and output strings.

function db_date($mysqlDate) {
$formatedDate = $mysqlDate;
return $formatedDate;
}

That’s the first step. Next, what do we want to use as the separator? A ‘-’, or a ‘/’ or something else? We should be able to set this when we call the function, so we’ll make it an optional attribute. That way, if we don’t set it when we call the function, it defaults to a ‘-’ (or anything else you want.)

function db_date($mysqlDate, $sep = '-') {

That’s it. Now when we want to add a ‘-’ to the output string, we just use the $sep variable instead. Next, we need to process that string with the substr function. The MySQL date is in a yyyy-mm-dd format. So we can just pick out the 3 sets of numbers then send those back out of the function (with the $sep separator we defined above.

$month = substr($mysqlDate,5,2);
$day = substr($mysqlDate,8,2);
$year = substr($mysqlDate,0,4);

The way substr works is by defining a string, defining a start position, then defining how many characters to read from the string starting from that start position. For month for example, we want to read the “$mysqlDate” string, starting at the point after the 5th character, and read the next two characters of that string.

Now that we have all 3 parts of the date, we combine them all and spit them out to the function. It ends up looking like this…

function db_date($mysqlDate, $sep = '-') {
$month = substr($mysqlDate,5,2);
$day = substr($mysqlDate,8,2);
$year = substr($mysqlDate,0,4);
$formatedDate = $month . $sep . $day . $sep . $year;
return $formatedDate;
}

… and we would call it from within the PHP page something like this…

echo(db_date($row['date']));

… assuming that the $row is the correct PHP variable in a MySQL loop of that PHP page. That’s it.

Choosing the right colors

The text color you choose should be completely dependent upon your background color. Choosing a good combination of contrasting colors will increase legibility. Don’t neglect the color blind when you design your websites.

Here’s a few things to consider:

1. Use a dark text color on a light background color (black on white is the best).
2. Light colors on dark backgrounds is a bit more strenuous on the eye, so use it sparingly and increase your line-height when you do.
3. Avoid conflicting color combinations that strain the eye (such as blue and red or green and red)

Choosing the right typeface

When designing for the web, you’ll probably want to choose a typeface that has been specifically designed for screen output (such as Trebuchet MS). The face you should choose should have generous x-heights and shortened descenders for best legibility.

Unfortunately, due to the limited number of fonts shared among all computer systems, we are left with only a handful of typefaces to choose from that we can be sure that everyone (well, almost) will have on their computer and even fewer that worth using.

Those fonts include: verdana, trebuchet ms, georgia, arial, times new roman, and (sadly) comic sans ms.

These fonts are available on almost all computers straight out of the box. Verdana, Trebuchet MS, and Georgia were all specifically designed for screen output and are probably the best choices for web text.

If you have a typeface in mind that you are not sure others have, you should still use it, but make sure that you choose acceptable substitutes for those who don’t have the font and that your site still works properly those substitutes. This is very easy to do in CSS.

font-family: helvetica, arial, verdana, sans-serif;

The way this works is that the receiving computer will simply go through the list until it finds a typeface that it has. You should always include a default typeface (such as sans-serif) as a last resort as well.

Alignment

In most cases, it will be best to use left alignment. It is the easiest for people to scan and read. Centered text is difficult to follow after more than a couple lines and should be used sparingly.

There other major option is justified type. Creating successfully justified text is a difficult endeavor even for print. It is even more so for the web, because of word-spacing, letter-spacing, and hyphenation limitations in CSS. CSS will allow you justify your text, but not adjust it in the ways that are necessary to display it properly. If you feel the need to justify your type on the web, it seems to work the best for wide content areas that contain large amounts of content.

Spacing

There are many ways that you can adjust the spacing of text, such as tracking (the space between letters), kerning (the space between words) and leading (to put it simply, the space between lines). In CSS these are represented as letter-spacing, word-spacing, and line-height respectively.

As mentioned above, the usefulness of letter-spacing and word-spacing in CSS is limited. Word-spacing is rather poorly supported in older browsers and both lose most of their power if you cannot set maximum and minimum limits. You may still find letter-spacing useful at times, such as with titles.

The most important aspect of spacing for the web is, thus, line-height. By placing a sufficient amount of space between rows of text, you will increase legibility. There are formulas to figure out the proper spacing based on text size, but all you really need to do is find a medium that is not too cramped, not too loose and flows nicely.

Conclusion

Unfortunately after all these sentences and paragraphs, we have only covered the basics for understanding legibility on the web and have barely scratched the surface of typography. Just remember, if something is difficult to read, then most people won’t bother.

The Window menu

• The Window menu can be found all the way to the right on the top menu bar. Basically put the window menu houses all of photoshop’s palettes. A palette is essentially a mini window that houses certain tools in Photoshop. for example the character palette houses tools for changing fonts, font size, etc. The Layer palette is by far the most important to understand because this metaphor will be repeated throught out most design software.

The File menu

• The File menu is pretty much self explanatory. New opens a new document and open allows you to locate a previous document on your computer or network. Sidenote Browse, in this menu, lets you locate images with Adobe’s Bridge app which is pretty awesome but alas that is a different tutorial for a different day.
• Let’s go back to the New command. This launches a new window which lets the user customize their document. This window lets the user pick the width, height, dots per inch, as well as color mode. The width and height of your document can be picked in many different ways however most projects will probably be in pixels, inches, or picas. We will only cover pixels and inches for now. A pixel is a tiny square that makes up a digital image when you zoom in on a digital picture you can start to see them easily. Almost all projects on screen i.e. tv, computer, or kiosk will be done in pixels since this will be the easiest and most accurate for that medium. Sometime you may be creating something that isn’t for screen such as a design that will be going to print, this is where it is important to use inches. Using inches will let you determine an exact size for your image so that it fits on paper stock that you are using for your project. Last but not least there is color mode. The two main color modes you will be using are RGB (Red Green Blue) and CMYK (Cyan Magenta Yellow and Black), RGB is the color mode you would use with something that is going to be on a screen, computer or TV. CMYK is what you would use for a print project. Using the correct color mode will ensure that your projects look correct and consistent on any medium.

The Edit Menu

• The edit menu should be self explanatory. This contains undo, redo, copy, paste, cut etc. Be sure to memorize the key command here, they will safe your life, literally…while not literally but be sure you know them! Two important command in this menu are Fill (option/alt+backspace) and Free transform apple or ctrl+T. The fill command will fill a layer or selection with a color, and the free Transform will allow you to scale or rotate a layer or selection. Be sure to hold down shift while transforming something to keep its correct aspect ratio, try it, you’ll see what i mean.

The Tools Palette

• This palette will be where most image manipulation takes place. The best way to understand this palette is to simply bring an image into photoshop and play around with each and every tool here. (Tip hold the mouse over a tool to see its name and see its key command, key commands are really freaken important just trust me.)
• The Selection Tool(top left)(key command M) This tool simply put lets you select a part of an image. Thats it.
• The Move tool(Top Right)(key command V) This tool lets you move images and layers around. (Tip- make a selection of and image and then click the move tool and move it. The selected part of the image will move around while everything else stays put.)
• The Text tool(It looks like a big T)(key command…you guessed it… T) Click this tool and click on your photoshop document. This will let you type text into your document. Use the character palette to control the text once it is in your document.
• Set Foreground Color/Set Background Color(The two solid colors at the bottom of the toolbar)(Key command X) Double Clicking on this tool lets you choose a color, such as for text, or for a fill. Make a selection then select a color and got to Edit>Fill. That color will be placed in the selection.

The Layers Palette

• The first thing you will see in this palette is a layer called Background in italics. Double Click on it to unlock this layer. Now it is editable. But we aren’t going to edit that. Create a new layer, to do this click on the little square icon with a page curl on it at the bottom of the Layer Palette. This will create a new layer. Double click on the words layer 1 to give it a name. (Always name your layers it is extremely important to do this so that when you are working on a project with 100’s of layers yout will know what controls what.) On your new layer create a selection and fill it in. Now double click on the layer in the layer palette. This will bring up the effects window. Check any of the effects to add them to your layer. For now we will ad every designers’ favorite and most over used effect…The Drop Shadow. Check Drop Shadow and click on the words Drop Shadow to get the controls for this effect. Play around with the sliders to see how they affect this layer. (Design Tip- Don’t overuse drop shadows or glows. These are both popular and awesome effects that add life and pop to designs but they should only be used in moderation and subtly.)

Conclusion

• We will end Part 1 here. Hopefully this has given you a good primer into how to use the basic tools in photoshop. The single most important thing to understand about photoshop is that you need to play with the program. That is the only way to figure out how everything in this great program works.
• In Part 2 we will be covering the Layer Palette more, The Image menu, The Crop Tool, The Clone Stamp Tool, The eye dropper tool, and the history palette.