Webspinner Tech Blog

The key with appearance is just like programming UI. Encapsulate like elements using id and class tags within each html element. Once you have consistent content layout among the pages you can use simple css code to make things look good. It often helps to do a UI specification for your web pages.

For instance <p> tags will always contain Arial style fonts with size 10. All links will be #e33 if they are not being hovered(#3ee) or clicked(#fff). The background of the page will always be #eee. Colors, margins, fonts and borders all fall into such a specification but are not necessary. One trick you can use is find a Content Management Framework, like drupal or dotnetnuke, check out some themes for each of them and borrow and steal code from those to suit your needs.

Oh and of course at the top of each generated page put the style sheet attachment call:

  
    <link href="your_stylesheet.css" rel="stylesheet"/>
  

or place all style declarations in a generator to land inside a:

  
    <style>
      body{
        font-face: Arial;
      }
    </style>
  

if you are comfortable with a certain tools look and feel (I use Jira but you might use campfire) then look at how they do it and copy and paste the styles they are using. You will find it easier to use your own web documents when they match the other systems you use.

So I needed to use images in a simple navigation for a customer using Drupal 6.0. Custom theming in drupal is something I have not done a great deal of and my last experience with it was back in drupal 5. So here I am going to document the method I used to change the primary link stack over to images.

/themes/nameoftheme/images/page_title.png

is the method I am storing the image files in. I open up template.php and add the following code to it:

<?php
function imagemenu($linkset){
 foreach($linkset as $link){
  /*
  set image path to theme directory/images/page_title.png
  */
  $imgpath = base_path() . path_to_theme() . "/images/" . strtolower(str_replace(" ", "_", $link["title"])) . ".png";
  $hrefpath = base_path() . $link["href"];
  if (file_exists($_SERVER{'DOCUMENT_ROOT'} . $imgpath)){
   $imageout .= "";
  };
 };
 return $imageout;
};
?>

Then in the page.tpl.php file where the primary link navigation was going to appear I used the following code:

<?php if (isset($primary_links)) { ?><?php print imagemenu($primary_links)?><?php } ?>

it is crude but it working for the time being and has the added benefit of hiding pages that I do not currently have images for.

the Pragmatic Programmer by Andrew Hunt and David Thomas has often been referred to as an essential book to read for any programmer. I see it spoken of often on StackOverflow, and the methods and tips it covers are often considered among the most valuable gems of wisdom currently circulating the developer community.

I finally got a chance to pick this book up and give it a read, and it does not disappoint. With remarkable wit and plenty of entertaining anecdotes, I literally have not been able to put it down. My lovely wife Melanie and I picked it up during an outing to Walnut Creek.

I will try to come back and edit this post with information from the book as it strikes me.

Update 8/3/2010:

I cranked through the book in no time. Great fun reading it and all useful things to consider as a developer. I was happy to find a log of the advice was practices I had already figured out and started implementing on my own, though the insight on certain implementation methods was great. I have started seeing bookshelves of computer books in two different sets, those books that are Pragmatic Books and those that are not. I am now diving into Language Implementation Patterns by Terence Parr, not the same kind of read as the other book but definitely well written.