Wednesday, November 30, 2005

Linux Survey Results

The Trend Continues

Yesterday saw the release of some new data on the 2005 Linux desktop survey over at DesktopLinux.com. There are a few interesting results from this survey, and also some that are reflected when you examine the Linux flavor usage from the last couple of years. For instance, let's take a look at the 2003/2004 results for Linux flavor choice:

2003/2004 Survey ResultsYou can see that in 2003 the winner was, by far, Debian with about 34%. However, one year later, Debian's popularity slipped drastically, dropping to about 14% and just barely below RedHat. On the other hand, we saw Mandrake and Suse go head to head in the results to win the flavor of choice.

2005 Survey Results Just one year later we see yet another change in the leader, as it would seem that the new Ubuntu takes the slot with 53% of the vote. However, I don't think it is quite as clear cut as that. The survey separated the Novell Suse and the new Open Suse as two separate options. Having used both personally, I can say that they are nearly identical - the Open version only having all open source packages and none of the extra software. In 'look and feel' though, they are the same. That considered, if we interpret the graph with both of those being the same, Suse as a whole actually takes a total of 60% of the vote. Debian is going back up slowly with 27% now, and RedHAt is continuing its very slow but steady climb. (I do think that the new push to have RedHat installed on the $100 Laptops may change this in the future) Okay, you may have noticed that those don't add up to 100% -- that is because respondents can indicate that they are using more than one of the types of Linux (a rather common occurance among Linux users).

This survey asked more questions than previous years have. When asked what the top reasons for choosing to deploy Linux, there was a bit of a surprise.

[Source.]"What was most surprising to us was probably the top two reasons given for deploying Linux on the desktop," OSDL's Principal Analyst Dave Rosenberg told Ziff Davis Internet. "It's not TCO (total cost of ownership), or security, or lack of license fees. It was 'employees requesting Linux (user demand)' and because 'my competitors have successfully deployed Linux.'"

Unsurprisingly, the top three most critical applications to these respondents were for (in order) email, office productivity suites, and browsers. I was also a bit surprised that so many were making a full shift to Linux, not just a partial migration. The majority of respondents reported that they would be running Linux solely on a machine, rather than dual-booting it with another operating system (most commonly Windows).

Perhaps this is reflecting the environment in which more and more companies are finally making the switch. As so many responded that they chose to change to Linux because their competitors had - perhaps it's a scenario of 'Well, if they can go all Linux and No Windows, then so can we.' I'm not sure, but I find it interesting. Linux has really developed as an operating system, and the many flavors of it make for a lot of choice (and at times, a lot of confusion), nevertheless, there are still some very noteable Windows-based programs that don't have a truly comparable Linux equivalent yet. On the other hand - with the speed at which Linux is catching up in the software realm, it may not be too much longer.

~Nicole

Tuesday, November 29, 2005

Firefox 1.5 - Product Review

The Next Version - 1.5

I've been a steady Firefox user for some time now, and wrote a review previously about my thoughts on the browser. Today, the most recent version was released to the public, and there are some differences that made me very curious to try it out. Here are the new features that are different from the last public version (1.0):

# Automated update by default and improved.
# Rearranged and improved options / preferences (lets you search your downloads and cookies easily).
# Faster back and forward navigation (using new caching).
# Drag and drop reordering for tabs (as well as via keyboard buttons).
# You can now drag a link to the new window/tab button to open.
# Better popup blocking.
# Clear Private Data feature provides an easy way to quickly remove personal data through a menu item or keyboard shortcut.
# Answers.com added to the search engine list.
# Better support for Mac OS X (10.2 and greater) including profile migration from Safari and Mac IE.
# Many security enhancements.
# Tab thumbnails (when viewing an image only page, a thumbnail of the image is shown as the tab icon)
# New 'Safe Mode'
# Dragging text to the find box intiates a search.
# Allows for integration of custom themes that involve translucent windows (for Win and Linux)

So those alone are a lot of great new additions, but as someone who is involved in standards coding - the following new features really stuck out to me:

# Improvements to product usability including descriptive error pages, and RSS discovery.
# Support for DHTML accessibility.
# Support for assistive technologies (like Window-Eyes 5.5 beta screen reader)
# New support for Web Standards including SVG, CSS 2, CSS 3, and JavaScript 1.6.
# New 'report a site' feature that allows you to report sites that don't display well in Firefox.

Overall, a list of the web standards support in this version is as follows:

# Hypertext Markup Language (HTML) and Extensible Hypertext Markup Language (XHTML): HTML 4.01 and XHTML 1.0/1.1
# Cascading Style Sheets (CSS): CSS Level 1, CSS Level 2 and parts of CSS Level 3
# Document Object Model (DOM): DOM Level 1, DOM Level 2 and parts of DOM Level 3
# Mathematical Markup Language: MathML Version 2.0
# Extensible Markup Language (XML): XML 1.0, Namespaces in XML, Associating Style Sheets with XML Documents 1.0, Fragment Identifier for XML
# XSL Transformations (XSLT): XSLT 1.0
# XML Path Language (XPath): XPath 1.0
# Resource Description Framework (RDF): RDF
# Simple Object Access Protocol (SOAP): SOAP 1.1
# JavaScript 1.6, based on ECMA-262, revision 3: ECMA-262

For the new CSS changes specifically, you will find quotes nesting and support for the quotes property, and for CSS3 we now have :only-child support, columns, overflow-x and overflow-y properties, cursors and uri values for the cursors, as well as the CSS outline property. Now, Firefox 1.5 can lay claim to be the first browser with full DHTML support, and the first browser to meet goverment standards for accessibilty (They've added tons of new features for this purpose, and keyboard shortcuts for everything. You can read the full list here.).

Overall, lots of improvements when it comes to web standards and accessibilty really make this version a boon for any standards enthusiast. I've downloaded and found that many of my extensions are already updated to be compatible with the new version, as well as my themes. It does seem to run faster, but the different isn't overly large. Overall, I look forward to trying out all of the new features over the next weeks.

~Nicole

[Details primarily from here and here.]

Monday, November 28, 2005

MIT $100 Laptop - New Updates

More News on the $100 Wonder

It has been a while since I've seen much on the $100 MIT laptop that was talked about some months ago. However, there was an article today talking about some of the most recent developments. It seems that they have decided to go with RedHat for the operating system. On first hearing that, I was a bit surprised that they were not going to go with the current favorite for user-friendliness and a small install - Ubuntu. However, after reading on and seeing that one of the sponsors for this massive project is actually RedHat - it makes much more sense now.

In fact, RedHat isn't the only recognizable name in the bunch. Google has ponied up $2 million for the project, and Rupert Murdoch (of News Corporation) is a noted player in the project. Of course, one must count in the massive amount of fund-raising done by the OLPC (One Laptop Per Child) foundation, which is run by the man behind the project - Nicholas Negroponte. Apparently Steve Jobs (Macintosh) didn't particularly get on board with the idea at first, but is now helping out with ideas. Michael Dell helped by discounting hardware components, and Bill Gates is (unsurprisingly) trying to convince them to use Windows on the computers instead of open-source software.

As far as the technical specifications go, here is what it looks like it will be so far.

$100 laptop[From here.]"Hardware specs: 500Mhz AMD processor, 1GB flash memory (no hard drive), SVGA 8" diagonal display (dual LCD Color/Black & White mode for power conservation and outdoor reading), 128MB of DRAM, AC Cord that doubles as carrying strap as the power source and a hand-crank (one minute of cranking gives enough power for 10 minutes of operation)."

The laptop will ship with the basic software one would expect on an open-source, Linux based machine. Also, it was said that in addition to basic word-processing, programming, and browser software, it will apparently have built in networking support.

[From here.] "The laptop also features support for a unique, peer-to-peer wireless mesh network that will work right out of the box, and MIT researchers are currently investigating various ways to facilitate low cost internet access for the laptop systems."

Overall, the project sounds very interesting, and with large-scale production slated to begin in the fall of 2006, it will be quite the thing to watch. Also, it has been said that these laptops will be available for regular consumer purchase (at a cost of $200) when they are successful in their production.

~Nicole

Saturday, November 26, 2005

CAPTCHA Accessibility Issues

CAPTCHA - What are the Alternatives?

In a very interesting document published by the working group over at W3C, it was discussed in detail how CAPTCHA's are very bad for accessibility.

In case you don't recall, CAPTCHA is that nice acronym for the terribly long phrase "Completely Automated Public Turing test to Tell Computers and Humans Apart". Yes, it's much easier to say CAPTCHA. A Turing test is something that many websites use nowadays to verify that the person filling in a log-in form, or posting on a message board or blog is actually a person - not a spamming program. Picture one of those little images with letters all crunched together, skewed this way and that, and you have to type what it says into the little input box nearby to enter.

You know, I have a confession to make. I have a turing test active to post to the comments for this blog. By default, it also gives me one of those darn things every time I edit a post of my own, or create one. I probably enter the letters wrong at least 1 out of every 5 times. (And that's being nice to myself.) The document points out:

This type of visual and textual verification comes at a huge price to users who are blind, visually impaired or dyslexic. Naturally, this image has no text equivalent accompanying it, as that would make it a giveaway to computerized systems. In many cases, these systems make it impossible for users with certain disabilities to create accounts, write comments, or make purchases on these sites, that is, CAPTCHAs fail to properly recognize users with disabilities as human.

I think that summarizes it quite well. They are not good for accessibility. And if:

many of the systems can be defeated by computers with between 88% and 100% accuracy, using optical character recognition.

is true... then why are we using them? But what are the alternatives. Some were suggested, but most had their own set of accessibility problems also. One was the idea of logic puzzles instead -- but that would not meet accessibility standards for people with mental / cognitive disabilities. Another was sound based -- but that disqualifies for a number of reasons (lack of a sound card, poor or no hearing, etc..).

In the end, the working group suggests that the CAPTCHA's stick around for websites that have users in the millions, but not for those with a small user base (i.e., most blogs). For smaller sites, spam-filering and heuristic checks were suggested in the place of CAPTCHA's. I don't know about you, but I've decided to turn my CAPTCHA off.

~Nicole

Thursday, November 24, 2005

Microsoft Gets Opensource Removed From Vienna Conclusions

The Software Monopoly - At it Again

In what seems to be part of a new tactical run to try kill Opensource software, Microsoft apparently was able to score one point on this one.

A document called the Vienna Conclusions was presented during the WSIS (World Summit on the Information Society) conference last week.

The WSIS self-titles as being about encouraging and discovering 'ICT & Creativity.' There is a second phase to those things discussed in the Vienna Conclusions that work toward the World Summit Award (WSA).

The official Vienna Conclusions have been published, and are available to download in PDF format here. However, one rather large beast of a surprise came out as the folks at the conference were reading the conclusions.

It seems that Microsoft requested that all references to free software, and Linux in particular, be removed from the Vienna Conclusions document. Worse even than that - they were.

In the WSA blog, Thomas Lutz, manager of public affairs for Microsoft Austria, had some revision requests.

On the paragraph p5/2 (Digital Rights/Creative Commons) the following was said, but requested the text be removed entirely:

Increasingly, revenue is generated not by selling content and digital works, as they can be freely distributed at almost no cost, but by offering services on top of them. The success of the Free Software Model is one example.

Lutz explained the Microsoft reasoning for wanting it removed:

..it contains only an one-sided perspective on the ICT industry. The rationale for this is, that the aim of free software is not to enable a healthy business on software but rather to make it even impossible to make any income on software as a commercial product. We don´t see this neither as a viable not as a desirable path for the future economy of Europe.

Fascinating. Well, I suppose on one hand it is interesting that Microsoft is being more vocal about their fear of Opensource, for what it really is in their minds - something that 'makes it impossible to make any income.' Ah well, while there were other requests in that post that was made, the other one that really stands out as blatant paranoia is the following one in which Microsoft requests that the word 'Linux' be removed from the document per the following quote.

P6/3. eLearning and eScience … Deletion of “…like the linux project” as this is only one particular – anti-commercial – specificity of the open source landscape. You could use instead of “Linux” the more broader term of “open source project”.

Interesting, don't you think? Well, probably not as interesting as the blog reaction of Georg Greve. Mr. Greve is the President of the Free Software Foundation - Europe. He had a very miffed reaction, understandably, to the sudden change in the document, as you can understand why from one of his statements on the topic here:

Given this was a conference with hundreds of high-level participants and discussing a rather hot topic, do you wonder why are there only five entries in this blog? Do you wonder why noone tore the Microsoft propaganda apart? There is an easy answer to this: Noone on the panel ever knew this blog existed. I just learned this now.

In a reaction to this, we now see this: The Free Software Foundation Europe (FSFE) today filed an application for leave to intervene in the antitrust suit against Microsoft.. Personally, I think it's nice to see the FSFE standing up to the old bully on the block who still thinks he owns the street - because apparently not everyone at the convention did.

~Nicole

Wednesday, November 23, 2005

Amusing Name Change - OSM

Difficult Design Choices

I bet their graphic artist went through a lot of stress coming up with that unique name change. Was definitely worth a good laugh - though I much prefer OSM over Pajamas Media.

By the way, the picture is real. I took it a couple of days ago, but if you go to www.osm.org and take a look - they put up a new one. Gee, I wonder why.

~Nicole

Tuesday, November 22, 2005

W3C Adds Feed Validator

Online Feed Validation from W3C

In a list notice by Oliver Thereaux at the W3C, we found out about the new web tool for Feed validation. Well, let me amend that, it's not an entirely new tool actually.

This 'new' online validator is based on the opensource FeedValidator software that you can find hosted both at the Sourceforge location, as well as it being the software for FeedValidator.org.

The Feed validator can validate RSS (0.90, 0.91, 0.92, 0.93, 0.94, 1.0, and 2.0) as well as Atom feeds. What is it validating these feeds against? Why the RSS 2.0 specs of course.

However, in addition to what the FeedValidator software already did, W3C had to (of course) make it a little better. They added in a SOAP web service, and are providing the online help to implement it in software (where it could be used for batch processing).

So... go online and try it out if you like. You can read the basic barebones FAQ they have on it, and the validator itself is here.

~Nicole

Monday, November 21, 2005

CSS Reboot - Fall 2005

CSS Reboot Complete!

For those folks out there who don't know what the great CSS Reboot frenzy is all about, let me give you an overview. It's about taking some time to redesign with standards. We know it's a good practice to keep the look of a site 'fresh' and give it a facelift periodically, and this is what that challenge is all about. Most of the CSS Rebooters who signed up put in some serious effort toward giving a fresh look to their sites.

While I didn't formally participate this time around, I did reskin The Useful Web and upgrade quite a few features to it. I'm also in the middle of (going kind of slow) entirely upgrading my business site. For now, I'd like to give a big thumbs up to a few of the Rebooters that really caught my eye.

  • Designer Diary -- Has a nice clean layout, but I particularly like the top graphics with the silver fading on the edges. Adds a slick touch to a very clean design.
  • Rida Al Barazi -- Very nice color and graphic use in this one. I definitely think the color theme appeals, but I'd probably have used a bit of a more rich color of yellow, instead of the brighter one used. I do like the graphic hover effect of the graphics around the 'R' in the top left. I do not, however, like the static bar that always makes the pages drag. I would have preferred that to move on with the rest of the page and avoid the jumping text. Overall, nice.
  • Error500 -- I definitely love the clean lines of this layout. I do not, however, have a great fondness for the background wood look. Just doesn't seem to fit in an smoothly, and I would suggest swapping that out for a background of a more burgundy color with not so much in the way of pattern as the wood has. Other than the background used (super easy to change) I love this layout.
  • Robert Sable Consulting -- I think this design really has it all put together nicely. The rebooter managed to blend in a highly patterned background well with the color scheme, and I think the layout of the sections is something to that should inspire quite a few bloggers out there.
  • Phil Renaud -- A good layout, risky colors and a bold scheme used. I think my only complaint about it is that the amount of posts shown on the main page make that page super long, and you might miss the great graphics at the bottom. The appeal of this one is definitely all about the graphics.

If I come up with some more, I'll add them on to here, but for now, those are my favorites as I review the Rebooters list.

~Nicole

Sunday, November 20, 2005

Tutorial - Nightfall - Step 3

Continuing with Style

Now that we have seen the strenghts of inline CSS (remember that this is when you have the style in the line of the code) we need to broaden this further. While it would save you typing to get rid of the old style coding we've talked about so far, that is not the whole use CSS - though it is a benefit. One of the fundamental purposes behind the web standards is:

Separating the style from the code.

Everything within your code should be (ideally) only code for the function of the website. All of the graphics, colors, etc... should are style aspects, and should be the 'icing on the cake,' so to speak.

Now, there are three primary ways to show incorporate styles into your webpage, and you've already learned one of those - the inline style. Now we're going to learn how to put the styles in the top of the webpage. This is called embedded style. Let's begin by looking at the code of the page again, and this particular block near the top.

<title>Nightfall</title>
<style type="text/css"><!--body { margin: 0; padding: 0 }
--></style>
</head>

The block of code there is commented out to hide it from old browsers (ex: Navigator 1 and Explorer 2). If you have monitored your visitors and know that few to none of them use those browsers (which most do not), you can change that to the following:

<title>Nightfall</title>
<style type="text/css">
body { margin: 0; padding: 0 }
</style>
</head>

What is shown is the format that must be used if you are going to embed a style in the top of a webpage. First of all:

  • It must be in the <head> element.
  • It begins with <style type="text/css"> and ends with </style>
  • Each element within must be surrounded by brackets { }
  • Just like inline styles, multiple attributes of a single element are separated with the ';' symbol.
  • Any inline style attributes of the same element will override the embedded styles.

So let's begin by turning what we have done in an inline style into an embedded style. First, let's look at what we did with the navigation links on the left hand side of the page.

<p style="line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;">

Now, we want to put that in the embedded style at the top. What we will do is simply duplicate all of the style information there. Copy and paste it into your embedded style, and remember that it needs to be surrounded by { }. It should look like this:

body { margin: 0; padding: 0 }
{line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;}
</style>

Now, it needs a name so we can reference this section in the code. We'll call this leftlinks. There is only one instance of that in the webpage, so we can consider it unique. Styles that will only need to be used once are preceeded with a pound sign (#) before their name. So your final product should look like this:

#leftlinks {line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;}

As a brief note, it is just as accurate to put a line break after the ';' signs, if you prefer to write it that way. I prefer them all together, but the choice is yours. This works also:

body {
margin: 0;
padding: 0
}

Additionally you'll note that you do not need to have a ';' symbol following the very last attribute you list, only if there is another following. Again, it's optional, but I prefer to always tag one on the end. So, now that we have our new leftlinks in the embedded style, let's put it to use. Scroll down to the section where we declared the inline style in the paragraph where we made our links in the code. It should look like this:

<p style="line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;">

Now, we no longer need the inline style because we added it to the top embedded style. At this point, all we need to do is identify which style we want to apply to this paragraph. We do that by referencing the id name we created in the embedded style. Go ahead and delete out all of that style info in the paragraph code, and change your code to this:

<p id="leftlinks">

You can now save and refresh the page. If it was done right, you should see no difference at all in the page. Let's now look at the other styles we created in the last part. You should scroll down and find this chunk of code you worked in before:

</blockquote>
<p style="margin-left: 15px; font-family: Arial; font-size: 13px; color:#FFFF99; font-weight:bold;">More Info</p>
<blockquote style="font-family: Arial; font-size: 13px; color:#FFFFFF;">
<p>Delete this text, but keep the formatting and colours if you wish.</p>
<p>It is recommended that you give this page your own title and description.</p>
<p>Good luck with your site :)</p>
</blockquote>

Looking at your browser page of Nightfall, you should notice that there are only three styles of text for the entire content section: The yellow header text, the plain white content text, and the links that are done in that light blue color. Looking at the code inside the page, we'll see that all of the text on the page, except for the left links, was specified to have an Arial font. So, let's make that a global declaration for any paragraph in the page. The embedded style will allow you to reference most global tags by themselves, and in this case, we are dealing with the <p> tag. Go ahead and add this to your embedded style:

p {font-family: Arial;}

When you save and refresh, you'll see that your left links are still Verdana, even though they are in a paragraph also. That's because you declared those as having the id="leftlinks". Another thing that you can do is notice that all of the text sizes are the same. We earlier decided that 13px seemed to reflect that vague description it previously had, and all of the basic text, aside from the yellow headers and the links should be white, so let's throw that in also. Change the p declaration to this:

p {font-family: Arial; font-size: 13px; color:#ffffff;}

Save and refresh. The text will probably move up a bit on the page, but that's fine, we are going to add the padding back in later. Now, remember this block of text?

</blockquote>
<p style="margin-left: 15px; font-family: Arial; font-size: 13px; color:#FFFF99; font-weight:bold;">More Info</p>
<blockquote style="font-family: Arial; font-size: 13px; color:#FFFFFF;">
<p>Delete this text, but keep the formatting and colours if you wish.</p>

Let's really make that style apply to the whole page by deleting out the things that are duplicated. We can now remove the font-family, the font-size, and the one reference to the color:#FFFFFF. Oh, wait a second... that would leave absolutely no style in the <blockquote> part. That's entirely correct. You no longer need it. Change the code to look like this:

</blockquote>
<p style="margin-left: 15px; color:#FFFF99; font-weight:bold;">More Info</p>
<blockquote>
<p>Delete this text, but keep the formatting and colours if you wish.</p>

Save and refresh, and you'll see that it looks the same. Now, here comes the fun part. That is a global style we set for the paragraphs right? So we no longer need to specifically tell the code 13px (referenced just as size=2 in the improper code), nor do we need anything that is telling it to be Arial font that is white. Let's strip out all the other references in the code just above that section. It looks like this:

<p style="margin-left: 15; margin-right: 0"><font face="Arial" size="2"><b><font color="#FFFF99"><br>
Welcome to Nightfall Free Website Template</font></b></font>
<blockquote>
<p><font face="Arial" size="2" color="#FFFFFF">This is one of the free website templates available from </font><a href="http://www.pegaweb.com"><b><font face="Arial" size="2" color="#00FFFF">Pegaweb
Web Design &amp; Photoshop Tutorials.</font></b></a><font face="Arial" size="2" color="#FFFFFF"> I hope you find this template useful.</font></p>
<p><font face="Arial" size="2" color="#FFFFFF">There are no fees or charges associated with downloading or using this site.</font></p>
<p><font face="Arial" size="2" color="#FFFFFF">The full version of this
template, with no Pegaweb Logo, can be purchased at </font><a href="http://www.pegaweb.com"><b><font face="Arial" size="2" color="#00FFFF">www.pegaweb.com</font></b></a></p>
</blockquote>

Now, after you've taken out all references to the sized 13px (or 2) white Arial text, it should look like this:

<p style="margin-left: 15; margin-right: 0"><b><font color="#FFFF99"><br>
Welcome to Nightfall Free Website Template</font></b>
<blockquote>
<p>This is one of the free website templates available from <a href="http://www.pegaweb.com"><b><font color="#00FFFF">Pegaweb
Web Design &amp; Photoshop Tutorials.</font></b></a> I hope you find this template useful.</p>
<p>There are no fees or charges associated with downloading or using this site.</p>
<p>The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com"><b><font color="#00FFFF">www.pegaweb.com</font></b></a></p>
</blockquote>

Very good. On a refresh you'll see that it's the same. Now, let's look at what specific style is left in that code. We've got the links to handle next, so we need to go add that to our embedded style. Do you remember or use LINK (for regular links), VLINK (for visited links), and ALINK (for active links)? Well, no longer. You'll do those in the style now. We use the a indicator name for that. From the links in the code, you can easily see that they are given their color, and surrounded in tags to make them bold. So, let's just do that in the style. Add the following to your embedded style:

a {color:#00FFFF; font-weight:bold;}

Save and refresh. You should see it look the same except for one thing, the links on the left are now the same color as those. We'll fix that in a second, but let's first clean up that code the rest of the way. You can now remove all the color and bold declarations around the two links in the code. The code should look like this now:

<p style="margin-left: 15; margin-right: 0"><b><font color="#FFFF99"><br>
Welcome to Nightfall Free Website Template</font></b>
<blockquote>
<p>This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb Web Design &amp; Photoshop Tutorials.</a> I hope you find this template useful.</p>
<p>There are no fees or charges associated with downloading or using this site.</p>
<p>The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a></p>
</blockquote>
<p style="margin-left: 15px; color:#FFFF99; font-weight:bold;">More Info</p>

Looks like there is only one of the font tags left. But wait... didn't we already fix that once? Yep, look down at the style you put around the 'More Info' text. Well, since we are going to use that more than once, we need to add that style to our embedded text. Ah, but I said more than once didn't I? Remember what I said earlier about using the pound sign (#) only if you were going to use it just once. If you are going to use it more than once, you are creating a class for that style. You put a period (.) before the name instead of the pound (#) sign for classes. Let's add a style class for these headers called 'header', and put it in our embedded style. Your style section should look like this now:

<style type="text/css">
body { margin: 0; padding: 0 }
#leftlinks {line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 13px; font-family: Verdana; color:#000000;}
p {font-family: Arial; font-size: 13px; color:#ffffff;}
a {color:#00FFFF; font-weight:bold;}
.header {margin-left: 15px; color:#FFFF99; font-weight:bold;}
</style>

I hope you see that I just copied and pasted the attributes in that header class that you had done before in the inline style around the 'More Info' yellow text. Now that we have that new class header declared, we can get rid of the other styles in that section of code and point them to the class instead. It should look like this:

<p class="header"><br>
Welcome to Nightfall Free Website Template
<blockquote>
<p>This is one of the free website templates available from <a href="http://www.pegaweb.com">Pegaweb Web Design &amp; Photoshop Tutorials.</a> I hope you find this template useful.</p>
<p>There are no fees or charges associated with downloading or using this site.</p>
<p>The full version of this template, with no Pegaweb Logo, can be purchased at <a href="http://www.pegaweb.com">www.pegaweb.com</a></p>
</blockquote>
<p class="header">More Info</p>
<blockquote>

*CHEERS* No More <font> tags exist in this code!! We'll continue on in the next section when we go back to add one tiny thing to make those left links black. Also! I ran this page through the W3C Validator and we are down to just 17 errors from our original 45. HTML 4.01 Strict is getting closer!

Step 2 <-- Back -OR- Continue on: Step 4 --> *Coming Soon*

~Nicole

Saturday, November 19, 2005

Tutorial - Nightfall - Step 2

An Ode to An Old Friend
"<font> has passed away. Kicked the bucked. Been buried. Sung it's last hurrah. Let it be remembered for many long nights of 'search and replace' and for having one heck of an ability to pack on the kilobytes. We shall remember you, as we look back upon what the web once was. Adios."

Relearning fonts.

So you may have heard that the <font> tag is dead, but if you haven't had the time to study up on the standards, you may be keeping it around for lack of a substitute. Worry not, I'm going to show you exactly how to transfer over what you used to do with <font> in a way that will validate properly as standardized code.

First, take a look at something that you should find interesting. Reload your working copy of Nightfall - the version with the changes you made in Step 1. You should see that something curious has happened to the navigation links on the left hand side of the page. Look up a little higher on the left, and you'll see that the alignment of the graphic is now gapped. Why did this happen? The answer is this: You added in the document type definition (DTD). That told the browser to interpret the code following HTML 4.01 Strict definitions. Since much of that area of the code consists of non-validating code -- it is not showing properly. We'll fix that little by little.

Let's begin by opening up our code again. We are going to jump down to around line 28, which is our first instance of the <font> tag. It looks like this:

<td width="100%" valign="top" background="images/waterfallmenu.jpg" height="395">&nbsp;
<p>&nbsp;</p>
<p style="line-height: 150%; margin-left: 50"><b><font size="2"><br>
<br>
<font color="#000000"><a href="#"><font face="Verdana" color="#000000">Home</font></a><font face="Verdana"><br>
</font><a href="#"><font face="Verdana" color="#000000">Latest News</font></a><font face="Verdana"><br>
</font><a href="#"><font face="Verdana" color="#000000">Information</font></a><font face="Verdana"><br>
</font><a href="#"><font face="Verdana" color="#000000">Designs</font></a><font face="Verdana"><br>
</font><a href="#"><font face="Verdana" color="#000000">Contact Us</font></a><font face="Verdana"><br>
</font><a href="#"><font face="Verdana" color="#000000">Links</font></a></font></font></b></p>
&nbsp;</td>

This will be the section we'll be working in. Now, you should see something quite obvious about these links, and I'm sure you've seen and done the same thing before. All of these links are the same colors and sizes and font face. So... let's examine what we actually have here. We have a <td> that is a container for this section and is holding one of the images on the left for the background. Then inside that is an empty paragraph break, then the paragraph section starts for our links. When we are done with the links, it closes the paragraph and the <td>. Okay. So every thing inside that <td> (except the background image) is about our links. No question about it. Did you notice this little chunk of text?

<p style="line-height: 150%; margin-left: 50">

If so, give yourself a brownie point. This is a snippet of CSS called inline style (because it's writting within a line of code). However, it's been used incorrectly. Take a look at that line and ask yourself... 50 what? Percent? Pixels? There was a percent used for the line-height... What does the 50 mean? Yep, that's what the browser wondered too, and that is why the links have no left margin now that the DTD says to read this strictly. That part is improper code, so it was ignored. Let's take a wild guess that they don't mean that they want the margin to be huge, so it's not percent. Change it to say:

<p style="line-height: 150%; margin-left: 50px">

Now save and refresh your page. Voila! You have fixed that part. See, CSS isn't so terrible eh? ;) Now we're going to use this little style section again, but back to the <font> tag for a bit. Right after that section you just set the margin is a <b> tag. At the end of the links section you'll see that the tag is closed. Okay, so we want all of these links to be bold. Gotcha. Let's do it a different way, because the <b> tag is another one you'll have to unlearn - might as well start now. The equivalent to the <b> tag is to use <style= font-weight: bold">. To see how this will work, first go ahead and delete both the start and end bold tags (lines 28 and 35). Now, we already have a style started for this paragraph, so let's just add that in to there. You can see that you separate attributes in there with a ';' sign, so just change it to:

<p style="line-height: 150%; margin-left: 50px; font-weight: bold;"><font size="2"><br>

Save and refresh your page. It should look the same as before with nicely bolded text without the tag. Now let's take a look at that first tag after the style: <font size="2"> and see how we put the size of text into the style. The conversion is pretty easy. But again, I ask you... 2 what? Pixels? Em's? Ex's? Points? You have to be specific because there are many things it can be. We'll just say it's supposed to be 2ex because 2px would be far too small. (Note: 2ex would be approximately 12px, so you can use whichever you prefer.) The conversion from the old <font size="2"> tag to the new one is <style="font-size: 2ex">. So, that considered, let's delete the <font size="2"> on line 28, as well as that last </font> before the closing paragraph tag on line 35. Now let's add in that new way of writing the size into the existing style, as follows:

<p style="line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 2ex">

Good. Now save and refresh. Should look about the same. I think it might look a bit better at a 13px size, but it really doesn't matter for this. We'll cover aesthetics later. Now, moving on. Let's do something about that font face and color in the next lines - and this is where you will really see the power of CSS. Starting on line 30, let's learn the conversion for this:

<font color="#000000"><a href="#"><font face="Verdana" color="#000000">Home</font></a><font face="Verdana"><br>
</font>

Can be easily converted to a style as this:

<style="font-family:Verdana; color:#000000;">

So, let's go ahead and do the most fun part of all of this. Strip out all of the <font> tags in that section of code. Then add in those new styles for the font family and color to the existing style. While you are at it, please change all of those <br> tags to their actually proper format as <br /> (yes, the space is important). Those break tags are openers but they are assumed to be self closing, we need to make them actually be self-closing tags, and that is how you do it. This is what your code should now look like:

<p style="line-height: 150%; margin-left: 50px; font-weight: bold; font-size: 2ex; font-family: Verdana; color:#000000;"><br />
<br />
<a href="#">Home</a><br />
<a href="#">Latest News</a><br />
<a href="#">Information</a><br />
<a href="#">Designs</a><br />
<a href="#">Contact Us</a><br />
<a href="#">Links</a></p>

Wow. Looks a lot neater doesn't it? Save and reload. Eep! My text is blue! Actually, that's what it should be because they are links and not just plain text and we haven't set the color for the links yet. Not to worry, it's super simple to do. But look first at how much cleaner that code is and imagine how easy you can change things.

Think you can do the same thing on your own to this chunk of code that you'll find on lines 52 - 57? I bet so. Just put the style information for line 52 in the paragraph style that is already started, and then put the other style for the text below inside the blockquote tag. It should start like this:

<p style="margin-left: 15"><b><font face="Arial" size="2" color="#FFFF99">More Info</font></b></p>
<blockquote>
<p><font face="Arial" size="2" color="#FFFFFF">Delete this text, but keep the formatting and colours if you wish.</font></p>
<p><font face="Arial" size="2" color="#FFFFFF">It is recommended that you give this page your own title and description.</font></p>
<p><font face="Arial" size="2" color="#FFFFFF">Good luck with your site :)</font></p>
</blockquote>

And end up looking like this:

<p style="margin-left: 15px; font-family: Arial; font-size: 13px; color:#FFFF99; font-weight:bold;">More Info</p>
<blockquote style="font-family: Arial; font-size: 13px; color:#FFFFFF;">
<p>Delete this text, but keep the formatting and colours if you wish.</p>
<p>It is recommended that you give this page your own title and description.</p>
<p>Good luck with your site :)</p>
</blockquote>

Notice that I did add the px to the margin that was listed just as a number again, so now that 'More Info' text is aligned as it was in the original. Also, I did decide to use the 13px for the font this time, and I think it looks a better size than the 2ex. I suggest going back and changing that text size in your links. But! The good part is that you don't have to change it for every single <font> tag :) Are you feeling a bit less sad to have buried the <font>? Hopefully. And now if you go back to what we did in Step 1, and run the page through the W3C validator - you should come up with only 28 errors, from where we started at 45. Progress.

Step 1 <-- Back -OR- Continue on: Step 3

~Nicole

Thursday, November 17, 2005

Tutorial - Nightfall - Step 1

Beginning with the Basics

Now that you have the file unzipped, you'll see that it is a single index file with a images folder. That was not how it was orginally, as it included duplicate renamed pages (named for each of the links), so I just deleted those out since we are going to change the code that's duplicated anyway.

So, first of all, I want to tell you what our primary goal is going to be: We are going to make this page validate as HTML 4.01 Strict. What is that? Well, you'll see as we go along, but that is the highest standard for HTML (not XHTML) that the W3C follows currently.

Now, we first of all have to lable our document so that we know, and a validator software can recognize, that this webpage will be HTML 4.01 Strict. Doing this is called adding the Document Type Definition (DTD).

For now, open up the webpage in your plain text editor. Now you are going to enter the following chunk of code as follows:

Put this...

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

Here...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="description" content="insert description here">
.....

Actually, while you are right there, go ahead and strip out all of the generator stuff that is unimportant now because we are not using FrontPage and really don't care to see it. Make your code look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Nightfall</title>
....

Now, save the page, and then let's try and validate it and see how many errors we come up with, shall we? Point your browser to http://validator.w3.org/, and in the 'Validate by Upload' section, select your index page and click 'Check.' When I did this, it returned the following:

Result: Failed validation, 45 errors

Ugh. Well, that's quite a few errors (trust me, I've seen much much worse - in the thousands - for a highly developed page). I'm betting that you probably looked down on the results page more and paused a bit if you are unfamiliar with the new standards. The first one should catch the eye of most developers who have not been coding in this new way yet. It says:

Line 12 column 14: there is no attribute "BGCOLOR".

Which is, of course, a somewhat curious way to phrase it, but it's honestly the best way to think about it. Yes, there is a bgcolor tag -- but it's better in the long run if you forget that it exists.

However, the vast majority of the errors are those that are displaying as

element "FONT" undefined.

The notorious <font> tag -- another tag that should disappear from our memories. So shall we fix those first? I think so. Let's move on to learning how we'll do what we used to do with the <font>, but in a way that is following standards -- and subsequently make those errors go away.

Intro <-- Go Back -OR- Continue on: Step 2

~Nicole

Tutorial - Nightfall - Intro

Introduction

[Note:] This tutorial is for people who have already been making websites. It is not for beginners. For this tutorial I will assume that you understand the basic uses of tags, images, fonts, can use a text editor (I recommend PSPad), and have overall general experience in web design. This first step will not get into the advanced topics, so webmasters with only mild experience should feel at ease. This tutorial does assume no knowledge of web standards or CSS. [End Note.]

Web Developers have been coding in various ways for a long time. If you are reading this, then perhaps you've decided that you are ready to make the transition to web standards. While there are plenty of tutorials that start with the bare basics of how to code following standards, many seasoned web developers/masters want to know what actually applies to their sites. I'm going to attempt to do that in a step-by-step fashion.

This tutorial will walk you through the steps needed to actually take an existing web page that is not following standards, show you where the problems are so that you can find them in your own sites, explain what the substitutions are from the old way to the new way, and let you learn to start coding to standards on a beginning level.

The First Project

Codename: Nightfall

We will be doing our first project using the free version of a template that was available online from Pegaweb.com. I am providing this template to you in a zip file, and we'll be taking that webpage, and actually turning it into a standard following piece of beauty.

I'm going to explain quite a lot as we move along, but the first thing that you should do is download the template by going to this page and grabbing 'Nightfall - Intro Starting Files.'

Now, some of you may wonder if I'm using this template because I hate the design and I want to make an example of it. That is absolutely not the case. The designer at Pegaweb is actually a very good graphic artist, but like many people who are good artists, the code behind the page is not up to par. That's perfectly fine. Artists do not need to know how to code wonderfully. Coders do. I am most definitely not an artist, and I have a great amount of respect for people who can work magic with computer art. This template has managed to do something that is very hard - use a lot of colors without them clashing, and still focus the eye on the main content part of the page. Additionally, this design has a very lively and playful design that I found relatively unique and perhaps good for a business that sells crafts or curious objects. So, I picked the template not because it was bad, but because it was worth making up to standards.

So, without further ado... let's start by unzipping that download into a folder. Then move on to the next step.

~Nicole

Monday, November 14, 2005

PSPad - Product Review

I edit a lot of text files. Alot. The short list of file types that I open on a regular basis include plain text files, web pages, php pages, css files, and javascripts. That's just before lunch. I've had to juggle through various different programs to get the features that I need. For the most part, the integrated Notepad on Windows handles much of it, however, Notepad is terrible at formatting files that come in with distinct spaces. For those, I have to open in Wordpad. Overall, bouncing around through various file types and the software it takes to open them is a pain.

Then one day I ran across PSPad. Talk about a time saver. This little piece of Freeware is something I would definitely pay for. The only downside to this little gem is that it's only for Windows users. I saw this on their main page and my jaw hit the floor. "Wow..." was about the only thought in my head as I read:

"Editor PSPad supports file types: C++, Cobol, MS-Dos batch, CSS, Forth, Fortran, FoxPro, HTML, XHTML, INI, Inno Setup, Java, JavaScript, KixStart, Object Pascal, Perl, PHP, Python, RSS, SQL, TCL/TK, Unix ShellScript, VBScript, Visual Basic, X86 assembler + 90 other languages included as user highlighter definition."

That's exactly what I was looking for. Okay, so I had pretty much already decided to download it right there, but I wanted to pretend that I needed to be 'sold' on it more. I also noticed the little image that was boasting "No Spyware, No Adware, No Viruses." So, I took a look at the 'Characteristics' page. A few things caught my eye specifically as features that would be really helpful to me. Integrated Tidy library, HTML preview, reformat and compress HTML code, syntax highlighting, and .... "Wait, does that mean what I think it means??"

"Text difference with color-coded differences highlighted"

*drools* Okay, now, if case you don't know what this kind of thing means to a coder, let me explain. This means that I can open two text files at once, and it will compare the two and show differences in code. This is extremely helpful, and I have had, two programs on my computer to handle that for different types of files. Okay. That's enough 'selling' to me. I hit the download page. I briefly notice that it's a pretty lightweight download, coming in just under 3 megs. Nice little perks.

Install was a breeze. Okay, so starting it up my first thought is "Wow, that loaded fast." It does still. It's a very slimmed down program which, in my mind, is superb. One of the reasons I preferred to use Notepad before was because it loads so quick if I just need to make a small adjustment. This loads in not much longer and gives me tons more features.

I've tried out plenty of them, and haven't found any problems yet. Overall, it's really a great program. Definitely worth the download if you do any kind of coding at all. You can pick up the little gem at PSPad.com.

~Nicole

Saturday, November 12, 2005

Complimentary Color Scheme

How To Pick A Good Site Color Scheme

Website colors are extremely important. One second. Let's say that again. Color is VERY important. Allright. Now let's continue.

To begin to illustrate why colors are so very important, we have to list a few basic aspects of color:

  • Color evokes emotion. (More specifically: People subconsciously react emotionally to colors.)
  • Color guides the eye. (Meaning that colors are used by the user to follow a trail across a page.)
  • People see colors differently. (Ever have someone tell you that your dark-blue shirt looks black?)
  • Computers limit color. (Computer monitors and operating systems will limit and change how colors are shown.)

Color Evokes Emotion

These things are pretty much standard after much research and testing, so I'm just going to give you a quote from a nice article on this topic found here.

"Red is associated with blood, and with feelings that are energetic, exciting, passionate or erotic. Most colors carry both positive and negative implications. The downside of red evokes aggressive feelings, suggesting anger or violence.

Orange is the color of flesh, or the friendly warmth of the hearth fire. The positive implications of this color suggest approachability, informality. The negative side might imply accessibility to the point of suggesting that anyone can approach-- a lack of discrimination or quality.

Yellow is the color of sunshine. This color is optimistic, upbeat, modern. The energy of yellow can become overwhelming. Therefore yellow is not a color that tends to dominate fashion for long periods of time.

Green In its positive mode, green suggests nature (plant life, forests), life, stability, restfulness, naturalness. On the other hand, green in some tones or certain contexts (such as green skin) might instead suggest decay (fungus, mold), toxicity, artificiality.

Blue suggests coolness, distance, spirituality, or perhaps reserved elegance. Some shade of blue is flattering to almost anyone. In its negative mode, we can think of the "blues"-the implication being one of sadness, passivity, alienation, or depression.

Violet is the color of fantasy, playfulness, impulsiveness, and dream states. In its negative mode, it can suggest nightmares, or madness."

Now, there are quite a few websites that have really gone into detail on this topic, I definitely suggest you give Google.com a whirl. However, I'm going to point you toward a couple of sites that are really helpful.

One website called ReturnofDesign has a excellent sampling of popular color schemes that are pleasing to the eye on their color page. That site is great if you want a tried and true color scheme.

Another favorite of mine is WebWhirlers. This site includes some indepth discussion on color theory, and has a lovely little online software program called 'The Color Wheel' (free) that lets you create your own complimentary color scheme.

Color Guides the Eye

Where you place your colors, and how you use them, will influence where your viewer looks. Whether you are looking at a webpage or someones living room, some things will always attract the eye better than others. Various things do factor in, such as size, shape, and placement - but color is one of the key elements involved. A careful balance between using color to help guide the eye, and maintaining accessibility standards for the visually impaired is something that will be addressed in another section. For now, let's focus on some steps.

  • Step 1) Analyze what your website is for.
  • Step 2) Decide on no more than four important visual components of your site. (Remember that your site name is always one.)
  • Step 3) Use a common visual model, or make one that guides the eye on its own.
  • Step 4) Use emotion specific colors from your color scheme to influence the response to the points.

These things will help some, but the real test is to watch someone visit your site for the first time. Ask a friend, coworker, or relative to take a look at your site. Watch their eyes and their face.

When someone hates a color, they tend to squint when their eyes go near it, somewhat in a way of 'blocking it out.' The same with things they can't see clearly and applies especially to small text. Also watch to see if their eyes follow a natural and easy flow or if they are darting all over the place. Ask them to find you some things on your site. Do they naturally go to the right place or are they not sure where to find it and start searching?

Overall, it's very important to get actual user feedback on a website.

People See Color Differently

I gave the example earlier about the person who thinks your dark-blue shirt is black. Everyone has a different 'range' of color that they can see really well, and this is affected by various vision issues that you have no control over. However, what you can do to control it is to follow three small rules in your color design:

  • Make sure that you have a drastic color contrast for things that should look different.
  • Make borders fade gracefully by using a series of small changes in background colors around the edge, rather than one start line.
  • Remember that people always recall and see information better if it is light text on a dark background better than they recall dark text on a light background.

Computers Limit Color

This is a somewhat intricate topic, so I'll just give a non-technical overview. Some colors will not show up properly on your users monitor. To compensate for that, the web community has distinguished 216 'Web Safe' colors. An 8-bit monitor displays 256 colors, but not all of those are Web Safe colors. This article explains the entire reasoning behind the 'Web Safe' colors. That is definitely some good reading. However, if you'd just like to see what the colors are, you can take a look at the Web Safe colors that W3Schools has on their site. Also, Visibone has a great little color lab program on their website that you can use online. This program will not show you the colors that look best together, but it will show you how the colors look together, and it only uses web safe colors.

Overall, remember: Color Evokes Emotion. Color Guides the Eye. People See Color Differently. Computers Limit Color.

~Nicole