Tuesday, March 07, 2006

eyeOS 0.8.11

The eyeOS project is one that I have been checking in on from time to time. I've been keeping close watch on it because it seems to have a great deal of potential. For those who are not aware, eyeOS is exactly what people have been thinking might happen to the Internet. It is essentially an operating system that runs in your browser.

Now, they have a demo version online, but today, I decided to install their 0.8.11 version on my server and see how it was to work with. First of all, I have to say that this may have actually beaten WordPress for easiest install. If not, it definitely matched it. It was incredibly quick and easy. It was basically the following:

Download the files. Un(tar/zip) them. Upload the whole folder to somewhere on your web server / host. Change the permissions on three folders. Then point your browser at the new main folder, and it starts the install script which only asks you for a password and username. That's it.

Then when you go to your new eyeOS folder on your domain, you see this login page:
EyeOS Login page

After logging in, you are shown a desktop type environment inside your browser:
EyeOS Desktop page

There are several applications buttons on the screen, and I explored through those some. This is a view of eyeEdit (a file editor) and eyeBoard (like a tag board).
EyeOS eyeEdit and eyeBoard

One thing I found interesting about the eyeBoard was that it did function for simultaneous connections (I created another account in eyeOS for a friend and had him log in and type on there also) and essentially worked as a regular tag board or pseudo-chat.

Of course, for more communications there is a full contact book (eyePhones) for you to use, and a calendar system (eyeCalendar) integrated.
EyeOS eyePhones and eyeCalendar

Additionally they offer built in themes, and you can also change the 'desktop' image. This is in the eyeOptions application. I definitely appreciated that because the default scheme was just a touch too light and somewhat hard on the eyes for me. They have two alternate themes built into this version by default, one that is a Mac style, and one that is more Linux like. Amazingly, I could actually see the log out and the trash can when I switched themes :P
EyeOS eyeOptions Changing the Desktop

The only thing that I did notice was this error coming up periodically.
EyeOS Recurring Error Box

This mostly happened when I tried to do too many things too fast (okay, so I was a bit jazzed trying it out). I'd be dragging windows really quickly, or swapping through them, and I'd have this pop up. I just clicked 'continue' and let the script catch up and it was fine every time.

Overall, I really can't express how exciting I think this project idea is. For a long while people have been speculating whether or not we will just start having barebones computers with browsers and that run it all.. and if it were hosted by several main companies, an end user would have their files anywhere, and never have to update their OS. Very nifty.

Probably the most cool thing about this idea: It's not only opensource (GPL) ... but it's made with XHTML, XML, Javascript, and PHP... so this lovely little (only 2.3 megs untarred!!) virtual OS can easily have most Ajax apps merge into it with just a few modifications for interpretation. That said, you need to be using a modern browser to use it.

Very neat stuff. You can donate to the eyeOS project, or you can help out by making little apps or graphics, or various other things any open project usually needs. The new app of the week they are talking about is an add-in blog application.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Monday, March 06, 2006

Patents for the Web?

How far will this go? I have read many of the online discussions regarding the new patent granted to Balthaser.

What caused the original panic (myself included) were quotes like the following:

From News.com
"The patent covers all rich-media technology implementations including Flash, Flex, Java, AJAX and XAML and all device footprints which access rich-media Internet applications including desktops, mobile devices, set-top boxes and video game consoles," Balthaser added. "Balthaser will be able to provide licenses for almost any rich-media Internet application across a broad range of devices and networks."


and this headline from Information Week
The patent--issued on Valentine's Day--covers all rich-media technology implementations, including Flash, Flex, Java, Ajax, and XAML, when the rich-media application is accessed on any device over the Internet, according to the patent holders.


From what I can determine from reading the actual patent text (which is beyond ridiculously long) - what they are patenting is ability to create a online interactive web creation application. Does this encompass some existing technology? Likely. Future technology? For certain.

What concerns me is that this definitely allows, and even forces, a monopoly on online interactive web site creation apps. If the patent holds up in court, it will make it extremely difficult for anyone who would attempt to create an online application for creating websites (even if they were to open source it or otherwise provide it for free) because those people would have to license the technology rights to even create an online web site creation app. With the whole Web 2.0 innovation movement, it is so likely that someone would have / could create a better product (I mean truly, the accessibility part of me just cringed at the fact that their web app is flash based and creates flash websites). So much of the new internet, and current technology as a whole, is different. The Open Source movement is gaining in strenght, and the amount of open projects that have been successful is beyond impressive. It feels like taking a step backwards to allow patents on broad-based open concepts like this.

Overall, I find the whole matter quite disturbing.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Saturday, March 04, 2006

Misleading Resolution

This is one of those topics that bears mentioning periodically - screen resolution statistics are misleading.

Often when people are thinking of creating a fixed-width layout, they are doing so due to what their statistics are telling them. If statistics are saying that 99.5% of their views are from vistors browsing on high resolutions, many people feel safe with breaking out of the box and going above the fixed width recommendation of designing for a minimum of an 800x600 screen resolution. Unfortunately, those statistics are misleading.

To explain why, I'll use myself as a common example of a misleading visitor. The resolution that would read from a visit from me would be 1400x1050. However, that is not the amount of space I actually use when I'm browsing. I like to keep space around my windows so that I can stack things and watch them while I'm working on something else. Like this screen shot I took of my 1400x1050 resolution desktop (image is resized to 800x600 so as to avoid being ridiculously large for viewers who don't use the resolution I do ;)):

Image of a screen shot at 1400x1050 resolution

You see why it would be misleading to assume that just because your stats say I am using 1400x1050 -- that I actually am? The more screen real estate that a person has, the more prone they are to stagger windows just like this. Additionally, take a look at how small my viewport (the portion where your website is actually show, not including the tool bars) is in comparison to my browser window. So... keep that in mind the next time you are tempted to start making a fixed-width webpage just a little bit larger because your stats 'claim' that your users all have loads of screen space.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Design Issues

As I've complained about before, I have issues with artistic design. The more I think on it, the more I'm convinced that I must have been attacked by an art supply kit as a small child and been left mentally scarred toward anything artisitc. I remember taking an art class once in school. I remember singing country songs with another person in class... but I don't recall actually doing any art. In spite of my lack of art classes, I can actually draw halfway decent pictures of people, eyes I'm particularly good at. Does this help me with web design art at all? Not in the least.

I've only very recently migrated this blog over here to this new location and am running it on WordPress. However... when it comes to thinking up what sort of design I want to do, I keep hitting mental blocks. The same happens with my personal site. Oddly enough, I don't have this issue with other peoples sites. I can easily design for someone else, I even have marvelous little flashes of artistic flair that pop up when I do... but when it comes to my own sites I have a recurring problem with it. I've tried various techniques to change this, like trying to pretend that I'm designing for someone else. It doesn't work, and I'm still not sure why.

Granted, for any really artsy and graphical sites, I've always sub-contracted an actual graphic artist to do the work. I guess I am just stubborn when it comes to my own website. Regardless, I am finding myself yet again trying to determine what sort of design I want to do. I have lots of things that I'm going to need to do to this new blog still, and coming up with alternate styles and more accessibility for the new blog is a priority. I'm still just not sure what I want.

I'm trying to come up with solutions and ideas for themes that would fit both Beyond Caffeine (this blog) and Website Style (my main website that feeds from my blog). A cross between something fun and lively (stylish?) and something elegant and cafe feeling. At the same time, I tend to prefer clean styles - though I am willing to try something different. Is there a way to blend the two smoothly... that is what I'm going to be figuring out. I plan to reboot them both with a new theme for the May Reboot, so I've got a while to hopefully come up with some ideas. Suggestions are definitely welcome.

Edit: Ironically, the morning after I posted this I came to a realization about the color scheme I wanted for this blog.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Thursday, March 02, 2006

More Improvements on IE7 Beta

Microsoft has a new version of their IE7 Beta that will be introduced at the MIX 06 event this month in Vegas. The new beta version, which Andy is calling the IE MIX 06 release, seems to have addressed quite a few of the bugs that were causing issues for CSS in the first IE7 Beta (at least from what I can tell with the screenshots). In her post on the MIX 06 version shown to her and Andy by Markus Mielke, Molly said she is
..very proud to be here today watching history unfold.

I can't help but agree. It is a wonderful thing for developers to see the screenshots given of how the IE7 beta is evolving. Even more encouraging is that they are reportedly trying to fix a few more of the problems in IE7 before the MIX 06 event.

I have to admit that I'm very surprised. Maybe I shouldn't be. Perhaps the fact that I am is an example of exactly how jaded I have become over time toward the Microsoft crew. So, I'll start right off with saying this... I feel bad that I'm surprised you did something you said you would do, but in all honestly, you should understand why that is. IF (*note the slightly hesitant tone*) Microsoft is going to continue to keep making a real effort to better their technology toward standards, then it is only fair that we should all make a real effort to give them a fair shot and not be quite so harsh on them. Okay, enough apologies to Microsoft, I think I've eaten enough hat for one day.

If you want to attend the MIX 06 this month (March 20 through 22), but can't afford the cost - there are a couple of contests going on to get you there completely free. They are open to International entrants, and cover every aspect of getting you there and back so that you don't need anything to go. Keep in mind that there is a very quickly approaching deadline on these contests, as the conference itself is this month.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

Wednesday, March 01, 2006

Finished Projects

I've been very busy the last couple of weeks trying to work on three new site designs, hence the slight lack of posting this past week. Whatever possessed me to get myself in the position to have two competition sites due on the same day... I'm still trying to figure out... but finally, I can say that I'm nearly done with all three, and entirely done with the two sites being entered in contests. The only one left is the one I shifted the most time away from - working on my personal site. Go figure. That's just how that happens.

First Things First


Yesterday, I finished up tweaking out the Lovecraft Country website which is being entered in the Expression Engine Shootout contest. The site design is not mine originally, and I'm slated to do a complete remake of the code to strip out the few remaining tables used in the original design. Also, I'll be pulling out quite a few uses of z-index layers which could easily be avoided with good CSS positioning. But, that comes later when I do a full overhaul on the site for the CSS Reboot in May.

For the EE Shootout contest, I had a few things that I absolutely needed to do. The site was using a Javascript image rollover menu bar. I stripped that out and replaced it with a unordered list containing the images and displayed inline. Unfortunately, I first needed to redo the images, because none of them were transparent gifs, and that was important for a menu that was going to flex across a changing image background. Plus, the original text on the menu images was terrible to read, so for some accessibility, I used a more readable font and made the color of the text significantly brighter.
The Lovecraft Country Main Website

The next thing was validation to XHTML. I ran the site through a validator, and found pleasantly few things that needed fixing to bring it up to XHTML 1.0 Transitional. Unfortunately, it will have to wait for the full overhaul to get up to XHTML 1.0 Strict. The only glitch in that validation at all were a few warnings (not errors) from the validator response, and those were caused by some autogenerated scripts from the Expression Engine software itself. Hopefully, when the software is fully upgraded to the current version, those errors will disappear. I then doublechecked the CSS, tossed out a few proprietary rules, and got that up to specs. Then I set to working on the accessibility, and managed to churn it out to nearly a AAA level, and definitely a AA rating.

Of course, one of the biggest time crunches involved was the opening of the forums I had just finished skinning to match the site. The vBulletin powered forums were simple to work with, but they are still acting twitchy with me when I'm trying to implement the new horizontal menu I finished up. So, for now, I'm leaving the menu on the forums static until I can fix that.
The Lovecraft Country New Forums

Lots of things planned for this site in the future, but for now, at least one thing done, and this one is fully entered in the contest.

The Other Contest



Now this contest was for the players of the Castle Marrach online RPG that I play (though I do play far less these days, and that's probably a good thing). They asked us to try to redesign their public Twiki page. Even more fun to do because the current Public Twiki is a full out blank slate. Here's the current design:

The Old Public Twiki

And I just entirely redid it.

The New Public Twiki

I won't go into detail because there was literally nothing there to start with so Everything was done to it. The most interesting factor was that I had to do this using the Twiki wiki system and their codes similar to SSI includes to break out the HTML into chunks so that a non-technical user wouldn't hurt the code.

The only conflict I really had with this design was that I couldn't determine if I wanted the images at the bottom to show through the main area with some transparency.

The New Public Twiki

In the end, I decided not to use the transparency and just let the images slide behind. But, the design was submitted on time (early by a half-day even!)

So... a long couple of weeks, plus working on my primary website redesign which is (thank goodness) nearly complete, and planning for a new seminar on website laws and accessibility... I'm going to just relax for the rest of the night.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

The Where Should You Travel? Test

YAT (Yet Another Test) I took online. I really liked this one, and I absolutely think the result fits me perfectly. Anyone who knows me well is aware that traveling to Europe and seeing many of the countries there is a dream of mine.

Here is my result:

Train through Europe


You scored 100% culture, 30% social, 31% activity, and 44% adventure!

A train trip through Europe is a fantastic way to enrich yourself with many different cultures within a relatively short distance. The train service in Europe is out of this world and almost always on time. It doesn't lump you together with a group since you prefer to be independent, yet it takes the scariness out of navigating around a new country in a rental car, trying to make sense of the map. The train system brings you from downtown to downtown and there are often hotels within a short walk of the station. You could decide which countries interest you the most and if you are eligible, buy a rail pass in advance to save a bundle of money. Arriving at a European train station is an architectureally beautiul way to introduce yourself to a new city and it sets the perfect scene for your new experience. If you had fun dreaming about where you might go, don't forget to rate my test. Thanks!

About the only thing I don't agree with is the 'scariness' of driving around in a rental car and making sense of a map. I actually prefer to drive myself everywhere, and am very good at reading maps. But I also love trains, so its definitely an appealing idea.

If you feel like trying out The Where Should You Travel? Test, you can find it here.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.

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

Friday, January 13, 2006

Random Ajax - Fun with Lists 1

Random Ajax - Fun with Lists

There are a lot of ways to use Ajax, some of which are definitely better than others. People have been working on some great encompassing scripts that will simplify the handling of multiple Ajax uses on a website. A few of the most notable are script collections from Script.aculo.us, Prototype, and Behaviour. Note, that I did not include the now famous Ruby on Rails script collections that have become a framework for Ajax development with Ruby. The reason I did not was because it is specific to Ruby. The script packages that appeal the most to me are the ones that can easily interface with multiple languages (see those three named above).

I have made a little test page (one of many more I hope) that shows how you can script and implement some simple Ajax using the Script.aculo.us and Prototype base scripts. Feel free to look at the source code of sample page and see the underlying code. The only header script references actually needed in the document itself are these:

<script src="http://www.websitestyle.com/blog/prototype.js" type="text/javascript"></script>
<script src="http://www.websitestyle.com/blog/behaviour.js" type="text/javascript"></script>

There is an additional script that goes in the page also, and that can also be linked to separately. However, in order for the two scripts above to work, the rest of the collection (just a few extra js files) should reside on in files on your server also so they can be called if needed. There is an explantion of how to use those base scripts here on the Script.aculo.us site.

When you look at the draggable lists demo you will see some extra things added to it for formatting purposes. However, the only things actually required to make it run are labling the <ul> section for each list with the appropriate id (in this case either id=firstlist or id=secondlist), the script directly below the lists in the page, and those two scripts referenced above. Everything else is just to make it pretty or to enhance useability.

I will try to add more of these example pages, and go into some of the fun little ways you can toy with Ajax. In fact, I plan to actually do more with this example, so perhaps it will get updated later with additions). For now, hopefully this will be a fun little thing to take a look at.

~Nicole

Thursday, January 12, 2006

Generated Content

CSS - Generated Content

After spending some of today in discussion with a friend on how to work with generated content in CSS, I've decided to take that discussion a bit further and go over the basics here. First, a great reference for generated content is on the W3C site, and can be found here.

Typically you are going to use generated content in combination with a pseudo class. For instance, the :before pseduo class is often associated with generated content. To elaborate on that, consider this simple example:

Goal: Create a list of links, and flag some links a generated 'New!' text that is red to indicate which of those links has been updated recently.

So, start by making the simple unordered list (code shown after).

<ul>
<li><a href="#">Section Foods</a></li>
<li><a href="#">Section Books</a></li>
<li><a href="#">Section Links</a></li>
</ul>

Now, we have a list a you probably have some general formatting that should apply to the list elements (in your CSS file). But, you can now add some generated content. It's very simple to do. You'll add these two rules to your CSS file:

li.updated:before { content: "New! ";}

Then you want to change it so that the color of that text is red, so you simply modify that code as follows:

li.updated:before { content: "New! ";color: red }

Now you can continue on by adding the class="updated" indicator to the list items where they have been updated. For example:

<li class="updated"><a href="#">Section Foods</a></li>

Pretty simple eh? You could do the same thing with an image of course. Another great use for this ability to generate content is for quotes. I have used this quite a few times, and though pseudo-classes are not supported by Explorer, it is still quite a nice feature to tinker with. You can easily generate an open quote and an end quote around your blockquoted text. You just need to add the following rules to your CSS:

blockquote:before { content: open-quote }
blockquote:after { content: close-quote }

There are lots of little things you can do with the generated content, just keep in mind that since pseudo classes are not globally supported by browsers, in order to stay true to accessibility, they should only be used to enhance. Don't make your content rely on them.

~Nicole