January 21st, 2008

Making friends with HAL

As of late I have been having some trouble with HAL(Hardware Abstraction Layer). I finally found the solution and decided I would post it here in case anyone else my need it. The symptoms of this problem are simple. When Gnome boots up you get an error stating “failed to initialize HAL”. There are many problems that can cause this error but the one that I keep running into was tricky to find but extremely easy to resolve.

It boils down to a boot order issue where dbus and HAL are scheduled to boot at the same time. The problem with this is that often HAL requires dbus to be up and running. To figure out if this is the specific cause you can take a look at the /etc/rc2.d/ folder. You simply want to make sure HAL’s three digit prefix comes after dbus’s. For example “S12dbus” followed by “S13hal”. If it doesn’t simply execute something like the following command in the terminal. Make sure you change it to match your system.

sudo mv /etc/rc2.d/S12hal /etc/rc2.d/S13hal

If you have ran into this problem I hope this will help you get it fixed.

August 15th, 2007

Coding your Logo

Making logos accessible is actually much easier than many make it out to be. It is important to make your logos accessible as you want them to have a strong search engine presence.

For this tutorial you will need to have a basic understanding of XHTML and CSS.

First comes the HTML. Generally your logo is nested in the header like this.

<!--HTML Code-->
<div id="header">
<a href="home"><img src="yourlogo.jpg" alt="COMPANY NAME" /></a>
</div>

To make this more accessible and for it to degrade gracefully we really want to eliminate the “img” element and in turn use a text elements like this

<!--HTML Code-->
<div id="header">
<h1><a href="home.htm">YOU COMPANY NAME AND ANYTHING ELSE</a>
</div>

In the above case if a user views the page un-styled they will simply see an H1 header link with the name of your company and any other text you place inside. This allows search engines to read the actual logo in plain text and assign this text an important value (first H1 elements are seen as important). It also improves mobile device structure as many of them don’t like images.

Now we can use CSS to make the image based logo appear where we want it and more importantly how we want it (image). We only need to style two elements, the ‘H1′ and ‘a’ tags.

/*CSS Code*/
#header h1{
width:auto;
height:auto;
text-indent:-9000px; /*This removes the text from the screen*/
}
#header h1 a{
width:300px;
height:100px;
background:transparent url('path/to/your/image.jpg');
display:block; /*This is critical*/
}

In the ‘H1′ element you will notice that we gave it a text-indent of -9000px. This moves the the text far enough off the left side of the page that even with the largest monitor it is not visible. By doing this we ensure that pesky text doesn’t sit on top of our beautiful logo.

The next unusual piece you will find in the CSS is under the ‘a’ element. “Display:block;” renders the ‘a’ element as a block level element allowing it to have a fixed width and height.

Now you have a beautiful logo that degrades seamlessly and is extremely accessible both to humans and search engines.