Tuesday, February 28, 2006

ROR Sitemaps

Apparently I got behind in new technologies and had missed hearing about ROR somehow. Granted, the ROR technology is only celebrating its' 1 year anniversary, but even still, I do try to keep up. So, essentially, let me cover what I've learned about ROR recently.

In A Nutshell:
ROR is a an acronym for "Resource of a Resource" and is essentially an XML file that acts as an additional resource about your website for search engines to crawl for relevant data. The more information a search engine has to learn about your website, the more it can help your website positioning in searches. ROR XML files are readable by ALL search engines.

This comes in stark contrast to the Google Sitemap tool that uses a format only Google can read easily. Choosing to use ROR instead, means that Google can read it, but so can every other search engine. Additionally, you can use your ROR XML file within the Google Sitemaps tracking service for webmasters.

If you would like to test out what a ROR sitemap looks like, you can go to this online ROR sitemap generator, and create your own. You simply upload it to your server, and add a link to it in your HTML. If you wish to use the same file for Google Sitemaps for Webmasters, you can do that. You just go to the Google Sitemap tool, create an account if you don't have one, add your website and fill in the blank for the URL where your ROR file is. When you've done that, Google will ask you to upload a file to your server to prove it's your server. You upload the file, click a little validate button in the Google Sitemap page, and you've set it all up. Now Google has your site on super-charged indexing mode.

The ROR site has a free software program you can download that will do this for you, and you can add even more detail than the online ROR sitemap generator does.

On another good note, the folks who made ROR also recently came out with a new open project called Meaningful Fuel. This project is a metadictionary wiki, and should be able to be used hand-in-hand to continue to improve ROR.

Overall, an interesting thing to learn, and I'm definitely glad I found out that I had missed this before another year had passed ;)

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Sunday, February 26, 2006

Alternative to _blank

As anyone who has tried to validate a website to a Strict doctype knows, the target="_blank" attribute is no longer allowed. The most common question is Why? and there is a simple answer.

In web standards, (X)HTML is for content, CSS is for style, and Javascript is for the behaviors. Opening a new window is not content, nor is it style, it is a behavior. Therefore, it does not belong as a component of the content tags (in this case, the <a> tag).

Now, we obviously don't want to lose the ability to open a new window for an offsite link. Companies want their webpages to stay open while you see the associated content, not have to leave entirely for it. The solution then, should be obvious, you can handle this behavior through Javascripting.

The absolute best solution I've seen to this utilizes the rel attribute of the <a> tag, and turns...
<a href="document.html" target="_blank">external link</a>
Into...
<a href="document.html" rel="external">external link</a>

The solution comes from Sitepoint and can be viewed here with the full instructions and associated Javascript.

Perhaps in the future, when more and more people are using browsers with better tabbing abilities and auto-tab-opening of off-site links, this won't be an issue anymore. For now, this is a solution.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Less Women in Technology?

There was an article that was Slashdotted in December. I was thinking about this and I wonder what the level of accuracy is. The figures referenced say that in 1985 the percentage of women who received Bachelors degrees in Computer Science was at 37%, but has now dropped to 28% in recent years.

I'm a touch skeptical, and much of that is in the perspective of the actual context. What are the specific numbers of women (not just percentile) that has changed over the past 20 years? Has that number not grown significantly? Then there is the concept of what they are judging on - the gaining of a bachelors degree in a very specific degree.

On a personal level, I have to say that many of the Computer Science Bachelors programs I looked at in the past were highly unappealing. So many focused on old and outdated technology, that I felt they were entirely not worth the time and money. Another legacy of a faltering educational system and a gap between what is happening in technology and what is actually understood about it.

I remember sitting in an database class in college and helping my teacher (male) understand how to use MS Access because he had little previous experience in the software program. I recall a similar instance in a Visual Basic class, and I still have nightmares about the way that web design was (and still is) taught there (i.e., using the <font> tag, etc...). On the other hand, I had one absolutely brilliant C++ teacher that sticks out in my memory - and I struggled with that class a lot because he had difficulty coming down to a beginning level to explain it. Another instance of a great teacher was my Oracle instructor - someone who managed to actually make that awfully complex software conglomeration seem easy to navigate. However - throughout all my technology courses... I have only had one female instructor (and that was in high school, not college).

However, all that a given, I have to say that in the more niche technology sector of Web Standards, there seem to be quite a larger number of women. So much more so that I would nearly wager that small sector comes closer toward an even split than any part of technology I've worked in before. The ones I've found to have the least amount of women (so far) have been in networking / hardware, and database technology.

In any event, I think its prudent to not limit these surveys of degree related gender presumptions to only those of one specific degree (or a degree at all really). I'd like to see more broad-scale estimations.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

A Reminder on Modes

As this came up in a recent discussion, I think its prudent to at least briefly list the ideal doctypes to use for the modes you want to trigger in a browser. Keep in mind that there are three termed modes: Quirks Mode, Almost Standards Mode, and Standards Mode. If you want your pages to display in the manner you intended them to, it is vital to trigger the right mode. For instance, if your pages are highly standardized and reliant on CSS, they will not display the same in Quirks Mode as they will in one of the other two modes. This is a quite common problem when trying to pinpoint why a design isn't displaying correctly.

Quirks Mode: If you are planning to use write valid and modern code, you inherently aren't using quirks mode. Quirks mode, by its nature, breaks the W3C conventions. The only use of browsers being able to view things in Quirks Mode is for backward compatibility with old pages. This should not be used for new designs.

Almost Standards Mode: This is a more 'in between' state, though depending on the browser can be more or less close to standards mode as the level of closeness to standards mode varies by browser. For example, Safari has an Almost Standards mode that shows tables without the strict requirements for sizing, while IE6 doesn't do this for their Standards mode. So essentially one browsers' mode may be greater or lesser than anothers.

Standards Mode: This is where browsers will fully implement a standards compliant presentation of the page (or at least within the current capabilities of that browser for support of them).

Doctypes to Trigger Modes:


Quirks Mode

The easiest ways to trigger a fully quirks based mode of a browser is to either present no doctype, or to use one of the following (note the lack of URL):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Standards & Almost Standards Mode

Well, this is as close as it can come. Standards mode, as I mentioned already, isn't standards mode for all browsers. It varies and sometimes the closest you can come is Almost Standards. So, take these as just general guidelines. Use one of the following: HTML 4.01, or any of the XHTML doctypes with the full URL. Do not use (at least at this point in time) the XML declaration in your XHTML pages -- it triggers Quirks Mode in IE6 and Opera 7. The following are fine:

For HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

For HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

For XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

For XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


For reference, this article contains a chart that will make it much more clear. However, I will mention that the link to the article about how serving XHTML as text being 'harmful' is highly debated and not to be taken as a definitive point of view.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Monday, February 20, 2006

What's Your CSS Level?

Not a Quiz - Rate Yourself


I found this accurate and amusing little article on Friendly Bit and, of course, it immediately got me thinking. "What Level am I?"

Without too much ego, I think I'm sitting around a level 5 and steadily moving toward a level 6 as I work more on my book. I think a level 5 is appropriate in most cases for me. I still struggle sometimes with my CSS, but I find more and more that my problem lies not within the code itself, but within my personal issue with a difficulty coming up with creative designs. I suppose I fit the mold of yet another highly analytical person who has to work very hard to be creative and artistic. I envy those who do both easily.

On the other hand, a level 6 goes into people who write articles and tutorials, books, and teach others. Of those, I think I fit the mold to a degree, but a lesser one for now. In time, I'd like to write more and more tutorials, and once my book is complete I'd like to get started on my next. The seminars I'm working on are also another major feature of that, so perhaps its a combination.

Regardless, I found the article rather intriguing for its accuracy, and perhaps something for people to look forward to in the way of goal setting for their web knowledge.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Sunday, February 19, 2006

This Blog Has Moved!

The time has finally come! After badgering, begging, pleading, and endless email groveling for Blogger to fix their broken javascript code that was making my blog unable to validate to XHTML 1.1 or XHTML 1.0 Strict... I've moved.

Now, this blog has a new look and a new location on a subdomain of my main site here http://blog.websitestyle.com (which will redirect to the blog here http://nicole.enrogue.com) but it still has all the same content. Thanks to the shiny new WordPress software running the new blog, not only is it all valid code now, but it smoothly imported everything from Blogger.

Additionally, The Useful Web has now been retitled Beyond Caffeine. Why? Well, the blog now (*gasp*) actually includes some more personal posts. I have always been very strict about making all my posts entirely technical, but in the new blog home I'm loosening up a bit and letting my hair down. You'll still find all the same technical posts as before, just a few extras also.

I can finally bid Blogger my final goodbye, and hope to see you all on the other side. Please update your feed links and visit the new home of the blog!

Edit: I have decided to cross-post all the posts I am making on my WordPress blog at http://blog.websitestyle.com on here. I have turned off commenting on this blog, but each post will contain a comment link to the associated post on the new blog where you may comment.

Book Progress

The Road is Long and the Path Filled with Boulders

A bit of an update as I am trucking through, slowly but steadily on my book. I can surely identify what has been the largest difficulty for me in the past two months. On a good note, I can also say that I have (I believe) overcome that difficulty.

Primary Problem - Organization

The organization of how I want to present the information kept repeatedly coming back to me as I was writing. It simply felt... off. I kept having a recurring feeling that the more I wrote, the more I was going to have to later fix. It just wasn't feeling well organized.

It has been an element of extreme importance to me for the book to be easily readable, but in that, one of the most vital aspects is for it to be well organized. I want people to be able to flip to the section they want without any question. Was that happening... well no. I realized that I was writing it more in the way of a desktop reference. Listing things out, and that was not what I wanted to do. So... some changes had to occur.

A Bridge Across

I feel like I'm getting closer to being caught up in changing what I had already written to increase the readability. I definitely do not want to make the book complicated to find information in. But, at the same time, I don't want it to be just a desktop reference. I think ('think') that I have reached a solution to it.

Primarily I decided that I'm going to use the approach of how I would explain it (such as the order I would address it were I using a lecture format) and try that method. So far, it is seeming to be significantly better and flow together much nicer.

Hopefully, that will continue. On the downside, getting prepared for organizing a seminar is also putting a bit of a roadblock in my time, and some of the volunteer projects I'm working on are also taking a bit of a bite. I'm sure that it will all work out in due time, and I am definitely on the road to getting this moving along at a better rate now.


~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Saturday, February 18, 2006

NGD Test

The Nerd, Geek, or Dork Test

So I took yet another online quiz from OkCupid today. I probably shouldn't be so easily amused by online quizzes, but perhaps that is simply something ultimately reflected in my results ;)

My Results


Pure Nerd
65 % Nerd, 47% Geek, 17% Dork

For The Record:

A Nerd is someone who is passionate about learning/being smart/academia.
A Geek is someone who is passionate about some particular area or subject, often an obscure or difficult one.
A Dork is someone who has difficulty with common social expectations/interactions.
You scored better than half in Nerd, earning you the title of: Pure Nerd.

The times, they are a-changing. It used to be that being exceptionally smart led to being unpopular, which would ultimately lead to picking up all of the traits and tendences associated with the "dork." No-longer. Being smart isn't as socially crippling as it once was, and even more so as you get older: eventually being a Pure Nerd will likely be replaced with the following label: Purely Successful.

Congratulations!

You scored higher than 57% on nerdiness.
You scored higher than 70% on geekosity.
You scored higher than 14% on dork points.

You can try the test online: The Nerd? Geek? or Dork? Test

Well, guess I can't argue with the results really. I'm a learning fanatic, a life-long learner some would say, and for the high geek score also ... well, I'm writing about the quiz in a web blog... I guess that says it all.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Love Hate (LVHA)

CSS Link Specificity


Love Hate is how I taught myself to remember the order. The acronym for the order (LVHA) just wasn't terribly easy to remember on its own. It didn't spell anything, or really give a sensical meaning to me. But Love Hate works. So what is LVHA?
  1. a:link
  2. a:visited
  3. a:hover
  4. a:active

LVHA is the order you should designate your link rules in the CSS so they work together. The way that it is designed to work in CSS, each selector has a specificity. So, just like anything else in the cascade, if there are two selectors that are both applied to one element, the one with the higher specificity is applied. Put them in the wrong order, and you could end up with a page that isn't showing your style rules as you intended them.

The only two that you can change the order on are the a:link and a:visited (primarily because a link is only either or, never both). Now, keep in mind that you can change a multidute of things with links, but always keep in mind that specificity. To give an example of a potential problem, look at the following CSS:

Problem Order

a:link { background-color:white; color: blue }
a:active { background-color: blue; color: white;}
a:hover { background-color: black; color: white;}
a:visited {background-color:white; color:green;}


If you use the above CSS, all of it will work Except the active rules. Those will not show. Why? As I said earlier, visited and link do not have to be in a specific order (though ideally they should be in the LVHA order to keep consistency), but the active has to come after the hover. Due to the active being placed before the hover, that part breaks. Simply swapping the places of the active and hover (within the CSS) will fix the order of the cascade and allow it to all work.

In CSS2 we were able to combine our pseudo-classes, so that we could customize it further. An example being that you could have a regular hover for a link, but make it different for a visited link:

a:visited:hover {background-color: green; color: black;}

Again, specificity isn't terribly complicated on links if you follow the rule order. There are several articles on this topic, but in general, it doesn't get rough unless you aren't following the order.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Friday, February 17, 2006

Lists Using the List Tags

Making Menus The Right Way


Seems like a No-Brainer doesn't it? Except that it is, apparently, not the case. I constantly see web pages with code like this for a vertical navigation bar:

<a href="1.html">Link1</a><br /><br />
<a href="2.html">Link2</a><br /><br />
<a href="3.html">Link3</a><br /><br />



I also see a ton of this for horizonal image based navigation bars:

<p class="something">
<a href="1.html"><img src="1.gif" alt="1" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
<a href="2.html"><img src="2.gif" alt="2" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
<a href="3.html"><img src="3.gif" alt="3" style="width:85px;height:35px; border:none;" /></a>& nbsp; & nbsp;
</p>



Now, neither are technically wrong, but both are just plain bad form. The question I always ask myself when I see code like these examples is ... "Why would you put yourself through that editing hell?" Alas, people do it all the time. There is a much more semantically appropriate way to handle your lists. Let me give some example alternatives utilizing the <ul> and <li> tags.

The Vertical


Let's make a simple list that could be used for a vertical navigation bar. Additionally, remember that these should go in a <div> called whatever it is that you want to call your navigation area. The code is as follows:

HTML

<div id="navigation">
<ul id="vertical">
<li><a href="1.html">Link1</a></li>
<li><a href="2.html">Link2</a></li>
<li><a href="3.html">Link3</a></li>
</ul>
</div>


CSS:


#vertical
{
padding-left: 0;
margin-left: 0;
}
#vertical li
{
list-style: none;
margin: 0;
padding: 0.5em;
padding-left: 0;
}



So to compare the two ways of doing it:

Original


Link1


Link2


Link3


With Lists



They should look the same to you. However, I'm betting you are asking yourself, "Why do it that way? My original way took less code!" True enough. But, the strength is not only in the use of semantic markup, but in the fact that it inherently contains the power of the cascade. When it comes time to make style changes to the first list, the difference is obvious. The first list would require you to manually update all the styles. However, let me show you a couple of changes to the CSS and what that can do to this simple list:

Quick Changes With Lists



What did I change? Nothing complicated, only basic CSS. Here's the new style (changes in bold):

#vertical
{
padding-left: 0;
margin-left: 0;
text-align:center;
}
#vertical li
{
list-style: none;
margin: 2px; /* was 0 */
padding: 0.5em;
padding-left: 0;
border: 1px outset #000;
background-color:#99f;

}



The Horizontal


I think the most common thing people say about this is, "Wait, the <li> is only a vertical list." That is wholly inaccurate. It is simply a list. Whether it goes up and down or side to side, it's just a list.

Below is the code you can use to make your horizontal list using the unordered lists tags. If you don't recall the original code of the first type, you can scroll up and see it near the top of this post.

HTML

<div id="navigation">
<ul id="horizontal">
<li><a href="1.html"><img src="1.gif" alt="1" /></a></li>
<li><a href="2.html"><img src="2.gif" alt="2" /></a></li>
<li><a href="3.html"><img src="3.gif" alt="3" /></a></li>
</ul>
</div>


CSS:


#horizontal
{
padding-left: 0;
margin-left: 0;
}
#horizontal li
{
display: inline;
list-style-type: none;
padding-right:.5em;
}
#horizontal img {
width:85px;
height:35px;
border:none;
}



For the sake of simplicity, I'm going to show the examples using the same image, but you can change the images accordingly.

Original



1   2   3   


With Lists



  • 1

  • 2

  • 3



The one CSS rule that makes this list go horizontal instead of vertical is the display: inline; rule.

You could have a lot more use with this if, for instance, you planed to use one consistent background image and place text on top. Then you can simply change that background image in the style sheet.

Overall, lists are great. CSS makes them powerful and flexible. So instead of having to change all your lists by hand in each page, try pulling out all the formatting and using an actual list tag for your lists.

For more references and ideas on making better lists, try stopping over at CSS Maxdesign.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Tuesday, February 14, 2006

Valentines Day - from ALA

What Developers Love & Hate About the Web



A very interesting couple of posts on ALA today is titled Valentines Day Massacre and Valentines to the Web. Why? Well, the first one is all about the things that web developers hate about the web. The second is about what we love about it.

On the Massacre

Reading through it, I found myself laughing quite a few times, and nodding along in absolute agreement with much of it.

Summarizing what many of the contributors had to say, it seems like these are the most commonly noted things we hate (no particular order):
  • Microsoft.
  • Internet Explorer.
  • Pop-up ads.
  • Non-standard code.
  • Sites designed / requiring Internet Explorer.
  • Trying to keep up with the speed of new technologies.
  • Blogs with no real content.
  • Lousy (or overuse of) Macromedia Flash on sites.
  • Typography display issues.
  • Lack of ability to have PNG's used globally (read: More Hate for IE).


On the Good Stuff

  • CSS
  • Dynamic online apps (RoR, Ajax, etc...).
  • The sheer amount of innovation going on.
  • Blogging.
  • The new 'social' web.
  • Massive amounts of information.
  • RSS feeds.
  • The new ideas every day.


There were definitely others mentioned, but those are the ones I saw repeated several times. A good post, and a fun read.

~Nicole

Crossposted to take your comments on Beyond Caffeine.

Target Falls Short

Lawsuit Filed for Lack of Accessibilty


One would expect, or are we just hoping, that the larger the company, the more capable they are of affording to have their sites made accessible. The idea to this, of course, is that those with the financial power of a mega-chain should be able to hire people experienced in web standards and knowledgeable enough. On the other hand - they could just contract one of the companies or private consultants that specialize in making websites accessible. Obviously, this was not the case with Target.

Apparently, some 10 months ago, original complaints were made to Target about the lack of accessibilty of their website. It was never fixed. Ten months is far beyond the amount of time needed to fix the problems cited. Those problems noted were fairly straightforward:

  1. Pages were lacking the requisite alt text.
  2. Pages used image maps (without alt text) for navigation, but there was no function on the page to do the same as the images in a text version alternative.
  3. The pages required the visual input use of a mouse - inherently pushing keyboard-only users away.


Simple changes. Any web developer worth their salt could manage those changes quickly. Apparently Target either lacks those kinds of web developers, lacks motivation to please their customers, or blatantly has disregard for the 25% of all web users who are disabled. None of those are exactly what I would consider good options.

In any event, the National Federation of the Blind (NFB) has filed a suit against the U.S. based (California) Target company. They are attempting to have it done as a class-action suit. (Full document available here in PDF.) Now, apparently just in the last few days (after the suit was filed) there have been some changes made to the website to help improve some of the accessibility.

I find it truly pitiful that a fear of losing money in a lawsuit has to be the motivator for a change so simple to do. In this time, when web standards are absolutely necessary for any business (and eventually, we can hope, across all websites), I find it very disappointing that a major company would go to such lengths to alienate customers. Obviously they are concerned about their bottom line -- are their analysts so entirely behind as to not realize the percentage of people who would be lost as potential customers due to this? It would seem not.

Again, another reason to learn standards. I hope that this case goes through successfully for the NFB, and that Target is penalized for its blatant disregard to its customers, and its lack of consideration toward those with a physical handicap. Hopefully, this case will set a new 'standard' (a legal one this time), that might make people sit up and pay attention to what is going on in the world of the web.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Monday, February 13, 2006

TAC Test

Okay, so as some know, I'm a fiend for online quizzes. I love toying around with the things, and I ran across this one tonight. Had a bit of fun taking it.

This one was called The Tits, Ass, and Cuteness Test. The following are my results:

Curvy and Naughty
Raw score: 59% Big Breasts, 68% Big Ass, and 40% Cute!
Angelina Jolie

Thanks for taking the T and A and C test! Based on your selections, the results are clear: You show an attraction to larger breasts, larger asses, and sexier composures than others who've taken the test.

Note that you like women overall curvier than average.

My third variable, "cuteness" is a mostly objective measure of how innocent a given model looked. It's determined by a combination of a lot of factors: lack of dark eye makeup, facial expression, posture, etc. If you scored high on that variable, you are either really nice OR you're into deflowering teens. If you scored low, you are attracted to raunchier, sexier, women. In your case, your lower than average score suggests you appreciate a sexier, naughtier look. Kudos!

Recommended Celebrities: Supermodel Laetitia Casta and Actress Angelina Jolie.

My test tracked 3 variables How you compared to other people your age and gender:

You scored higher than 74% on tit-size.
You scored higher than 79% on ass-size
You scored higher than 9% on cuteness

So... my results were amusing and quite accurate. Overall, I think I've got some decent taste. If you want to try the test, the link is here: The Tits, Ass, and Cuteness Test.

Cross-posted to take your comments on Beyond Caffeine.

~Nicole