Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 472

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 487

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 494

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-settings.php on line 530

Strict Standards: Declaration of Walker_Page::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_Page::end_el() should be compatible with Walker::end_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 594

Strict Standards: Declaration of Walker_PageDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 611

Strict Standards: Declaration of Walker_Category::start_lvl() should be compatible with Walker::start_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_lvl() should be compatible with Walker::end_lvl(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_Category::end_el() should be compatible with Walker::end_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 705

Strict Standards: Declaration of Walker_CategoryDropdown::start_el() should be compatible with Walker::start_el(&$output) in /home/edelabar/ericdelabar.com/wp-includes/classes.php on line 728

Strict Standards: Redefining already defined constructor for class wpdb in /home/edelabar/ericdelabar.com/wp-includes/wp-db.php on line 306

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/cache.php on line 103

Strict Standards: Redefining already defined constructor for class WP_Object_Cache in /home/edelabar/ericdelabar.com/wp-includes/cache.php on line 425

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/query.php on line 21

Deprecated: Assigning the return value of new by reference is deprecated in /home/edelabar/ericdelabar.com/wp-includes/theme.php on line 623

Strict Standards: Redefining already defined constructor for class WP_Dependencies in /home/edelabar/ericdelabar.com/wp-includes/class.wp-dependencies.php on line 15

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method GoogleSitemapGeneratorLoader::Enable() should not be called statically in /home/edelabar/ericdelabar.com/wp-includes/plugin.php on line 311
2007 February archive at Eric DeLabar

Archive for February, 2007

Let’s talk about tools — Part 1

After my last post, we have a nice, clean starting point for our website. Which is great, but in order to take it to the next level, we should probably get a nice development environment up and running.

First, we’ll start with the client side. At my employer, we develop entirely on Windows. In my spare time, I have a Gentoo (soon to be Ubuntu) Linux box at home. Because of these factors, my tools of choice tend to be cross platform. As far as browsers go, I develop strictly in Firefox due to its ease of debugging with tons of useful plug-ins (Firebug, Web Developer Toolbar, DOM Inspector) and cross-platform availability. I of course have IE at work; where I’ve switched totally to IE 7, and I run the free IE 6 VM provided by Microsoft for testing in IE 6. I also have access to a Mac running Safari, a variety of Windows Mobile smart phones, and a few versions of Opera, including the Wii Beta version. Do I cover all of my bases? Probably not, but I’m at least over 95% of the user base.

What I really want to talk about are the Firefox plug-ins I mentioned earlier; if these tools are used correctly, a properly coded site that works in Firefox works just about everywhere else as well. To start off, make sure that when you first install Firefox, the DOM Inspector is installed. To do this, on the “Setup Type” screen, choose Custom, and on the “Choose Optional Components” screen, make sure the “DOM Inspector” check box is checked:

custom.gif

dom_inspector.gif

Ok, now we’re ready for plugins! My current must haves are as follows:

  • Web Developer Toolbar — Tons of useful little tools that no web developer should be without. Just install it and play with it. Trust me.
  • Firebug — Amazing debugging and profiling tools, plus the Inspect button which lets you see which CSS rules apply to any element in your doc, and a fancy colored overlay showing element, margin and padding.
  • MeasureIt — Great tool for pixel-perfect measuring!
  • ColorZilla — Quickly grab colors without viewing page source.
  • HTML Validator — W3C Validation on the fly, and in your view-source window.
  • View Source Chart — Great for dealing with tag-soup or server generated code that’s not nicely tabbed or spaced.
  • Operator — A must have for developing with (and using) Microformats.
  • Tails — Another must have for developing with (and using) Microformats.

If you’re still stuck in IE land, there’s still hope, Microsoft has released a half-decent copycat Web Developer Toolbar, and there’s hope for their (Java)Script debugger. If you have a Genuine Advantage copy of Windows it won’t hurt to try them out.

That’s it! Get those installed, play with them, and tune in next time for part 2, where we setup Eclipse and Apache as a test web server on Windows.

In the beginning there was DOCTYPE

Alright, in the beginning there wasn’t DOCTYPE, it didn’t come along until about the time XHTML was released; however, if you want to do the Web 2.0 thing right, it helps to start on a solid base.

My goal here is to get a brand-new HTML document up and running as a good base for designing a Web 2.0 application. Today, we’ll look at the parts of a document that the typical user doesn’t actually see, but play a huge role in how a user finds your site and how it’s actually rendered on their screen.

First things first; make your DOCTYPE the first line of the file. That’s right, line number one, no XML definition, no spaces, no server-side code, the first line of the file. This ensures that you don’t end up in quirks mode accidentally. Now, as far as DOCTYPE’s go, I really only see two options, HTML 4.01 Strict and XHTML 1.0 Strict. There are theoretically valid arguments for not using XHTML, most of which have to do with the simple fact that most web servers don’t serve it as XML and most browsers don’t read it as XML, but that’s a different article for a different day. Today, we’re using XHTML 1.0 Strict because the client insists that we use the latest technology regardless of whether or not it’s appropriate; so this is what the DOCTYPE definition for XHTML 1.0 Strict looks like:

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Remember, that’s the very first line of your file!

Next, let’s get the basic xhtml in there:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type"
        content="text/html; charset=UTF-8"/>
 </head>
 <body>
 ...
 </body>
</html>


Next, let’s get some very basic SEO framework in there and add some meta elements. Meta elements are sometimes called meta tags, but since we’re working in an XHTML document we’ll use the XML terminology. We’ll use description and keywords, and throw author in the for good taste.

5
6
7
<meta name="keywords" content="page, site, title, keyword, doctype"/>
<meta name="author" content="Eric DeLabar"/>
<meta name="description" content="A short description of the page content."/>


Great, now there’s a place for keywords and a description, but why do we need them? Keywords are old-school, I don’t even know if modern crawlers still look at them, but I do know that like all meta elements they should be specific for the page you’re writing them for. So, as a means of guiding my SEO, I usually choose the 5-10 keywords that I want to apply to my current page, then make sure that as I’m writing the page copy I use those keywords.

The description meta element is slightly different, because it’s visibly used. It is displayed by some search engines as a description of your page when it occurs as a result. As a guide to writing a description, keep it short, around 128-256 characters. Keep in mind that if it’s too long it will most likely by truncated, so just write a sentence describing the current page.

Now, we’ll have a look at the page title:

8
<title> Descriptive Page Title - EricDeLabar.com</title>


Like the meta description, the title element is displayed as part of a search result list, so a descriptive title can be very helpful for drawing users into your site. Some SEO experts also believe that keywords in your title are more heavily weighted in search rankings. Keep the title shorter than your description, and maybe consider including your branding at the end. I like the branding at the end because if it does get truncated by the search engine more of my more important descriptive title is displayed.

Finally, let’s add the stylesheets:

9
10
11
12
<link rel="stylesheet" type="text/css" href="/style/screen.css" media="screen"/>
<!-- [if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="/style/iefix_screen.css" media="screen"/>
<![endif]-->


Now I’m a bit of a purist, and I’ll have a later post describing my process for styling a page, but notice for now, I usually have a minimum of two stylesheets. The first being a clean stylesheet (as in NO Hacks/Filters/Whatever you like to call them) that handles all of the (mostly) standards complaint browsers, then an Internet Explorer conditional comment for handling older versions of IE. In this case, my iefix stylesheet is for lte IE 6 which translates to Less than or equal to Internet Explorer 6. Notice that the iefix stylesheet comes after the other stylesheet(s), this is so that any rules in the iefix stylesheet with equal or greater CSS specificity will overwrite the rules in the standard stylesheet. (More on specificity in a later post.)

That’s it! Congratulations, you have a nice, clean base to start your web 2.0 website on! If you’re curious, the finished product looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="page, site, title, keyword, doctype"/>
  <meta name="author" content="Eric DeLabar"/>
  <meta name="description" content="A short description of the page content."/>
  <title>Descriptive Page Title - EricDeLabar.com</title>
  <link rel="stylesheet" type="text/css" href="/style/screen.css" media="screen"/>
  <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="/style/iefix_screen.css" media="screen"/>
  <![endif]-->
 </head>
 <body>
 ...
 </body>
</html>

Web 2.0 — Religion & Politics

First, a separation of church and state. I did not coin the term Web 2.0, and I have no particular feelings towards it (either for or against.) What I do feel is that the idea of Web 2.0 has put a few very important issues onto the map.

  • Standards Compliant and Semantic HTML
  • Cascading Style Sheets (CSS)
  • Client Side Scripting (JavaScript)
  • Usability
  • Accessibility
  • Ajax

This blog aims to discuss these issues and more from a technical aspect. I hope to provided tutorials, insights, and best practices for front-end development; but where necessary, back-end code will be provided in either Ruby-on-Rails or Java.

So that’s it, let’s see where it goes from here!