Category: Web Design

Have always wanted to delve more into the mysterious world of 3D graphics, so here I go...

Check it out yourself: Three.js Journey.

For some strange reason, my random banner image was not being refreshed. Indeed the first time my blog was fired up in the browser, the banner would be random, but after that every refresh displayed the same image. As it turns out, it was necessary to include the following headers in my HTTP response.

Cache-Control: max-age=0, no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: Wed, 11 Jan 1984 05:00:00 GMT

Pretty simple, don't you think?

If you're like me then you've probably spent many a frustrating time trying to get those darn list-style-image: url(/images/bullet.gif) bullets aligned properly with the text. They are either too high or too far to the left and the inside list-style only messes things up even more.

The trick is to disable the css list-style attribute and use background images instead. I tag the ul-element with an id #list-images-background and put the following in my css file:

ul#list-images-background li {
    list-style: none; 
    background-repeat: no-repeat;
    background-position: 0 2px;
    padding-left: 24px;
}

An example is the list of my social media links on the right of my blog index page. Each list bullet image can be defined separately by using the background-image:url(/images/facebook.png) style. The markup code looks something like this:

<ul id="list-background-images">
    <li style="background-image:url(/images/facebook.png)"><a href="http://www.facebook.com/kiffin.gish" target="_top">Facebook</a></li>
    <li style="background-image:url(/images/twitter.png)"><a href="http://twitter.com/kiffin" target="_top">Twitter</a></li>
    <li style="background-image:url(/images/googleplus.png)"><a href="http://www.google.com/+KiffinGish" target="_top">Google+</a></li>
    <li style="background-image:url(/images/linkedin.png)"><a href="http://www.linkedin.com/in/kiffin" target="_top">LinkedIn</a></li>
    <li style="background-image:url(/images/github.png)"><a href="http://github.com/kgish" target="_top">GitHub</a></li>
</ul>

The exact position of the image bullet can now be tweaked easily by adjusting the values of padding-left and background-position. After some minimal fine-tuning, here's what the list finally looks like:

The final result looks pretty professional, at least for someone like me. I invite all you so-called expert web designers out there to come up with something better.

Oh yeah, by the way, this is a so-called heavy checkmark:

✔

Also known as:

✔

What the heck are microformats?

I never figured that the solution would be so easy. Those bothersome question marks within black diamonds that were appearing occasionally on some of my older blog entries were driving me nuts.

All that I had to do was change the following:

<meta http-equiv="Content-Type" content="text/html;
   charset=utf-8" />

into this:

<meta http-equiv="Content-Type" content="text/html;
   charset=iso-8859-1" />

See the difference? Perhaps this is not the most elegant way to fix this, not internationally compatible with every known character set on the planet, but it works.

The proper use of colors is an important if not vital aspect in bringing your web site to life in just the right way.

Natural Selections: Colors Found in Nature and Interface Design is an interesting article describing this.

Perhaps this could be a challenging area in which to develop my expertise.

Is the ability to use the right combination of colors a scientific activity, something inherent in human being, instinctive behavior, or (hopefully) for me, an art that one can learn through diligent study?

You never would have known it had I not told you, right? Guess what then?

The new-and-improved version of SwishMax is finally out!

I just happened to discover this at random today, and I had to purchase and download it right away. Looks really cool.

I can recommend very highly to anyone who like me gets easily lost into these kind of technical gadget web design thingies.

The use of hand-held devices like the Palm Pilot, screen readers, web-enabled cell phones and other text-mode browsers for the disabled is increasing drastically. Therefore, it is very important that your information remains accessible to this group of potential customers.

How does your web site deal with this? Does it degrade gracefully? Are you inadvertently denying the blind and the disabled?

To find out, just enter a URL in the entry field and click the submit button.

URL:

I added this utility on the GishTeq website the other day and am fairly pleased with how it is working. Check it out for yourself.

If you are really into ASP and want to learn more about Data Grids, Selecting DataRows in Data Grids, DataView Control, Database updates using the DataAdapter and Databinding in Dropdown Lists AND you can understand Dutch (sorry about that), then you will certainly be very in this interesting video training:

Instructie video's over het programmeren van webformulieren in ASP.NET

Reminds me an awful lot about the good old days when I was an expert Visual Basic programmer, alot still looks the same.

Great stuff Sjef!

If you too are into the power of Cascading Style Sheets (CSS) as much as I am, then you will really appreciate this little gem I happened to discover. At least, if you are as much of a die-hard Internet design geek as I am.

Have a good close look at the following so-called images:

So what do you think, I mean are you impressed? If you thought they are really images, then you were wrong. Sorry about that, but the figures above were purely generated not using embedded images but good old plain-vanilla CSS instead. Hard to believe but true.

Impressed? Well you shouldn't be, because they were merely built using slants. Here is how you can also use slants to make your web site even more amazing..

Place the following style declaration somewhere in the header section:

<style type="text/css">
.s1 {
  border-color:yellow green blue red;
  line-height:0px;
  width:0px;
  height:0px;
  border-style:solid;
}
</style>

And then, place the following code where you want the figures to appear:

<div class="s1" style="margin:10px;float:left;border-width:25px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:19px 25px 31px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:12px 25px 38px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:6px 25px 43px;"></div>
<div class="s1" style="margin:10px;float:left;border-width:0px 25px 50px;"></div>

(Find out more about slants.)

It is even possible to create a heart made of CSS by using slant technology.

Here's to the power of CSS and the infinite possibilities.

Yesterday afternoon a box from Amazon arrived, and it was my long awaited for copy of Designing with Web Standards by Jeffrey Zeldman. Right now I am just sawing through the book and absorbing everything I can. Highly recommended for anyone wanting to know more about using web standards in a world lacking structure and common sense.

What he says makes perfect sense. By designing and implementing web sites using a standard and structured way, one can work cost-effectively and more efficiently, and enjoy it all at the same time.

Unfortunately, due to a number of factors (like the mad race a few years back to get as much as possible as much as quickly on the Internet -- thanks to the good old blinded greediness called commercialism), this has not happened.

The ironic thing is that it makes sense in a logical way, but who cares? Try to sell quality and usability to your average manager and he will more than likely scoff and spit in your face.

That is why this book offers a convincing set of arguments to help visionaries like myself get things going like they were always meant to be. And make money at the same time.

Here are a number of other sites you might be interested in:

• A List Apart


• The Web Standards Project


• Zeldman Website


• Web Page Design for Designers

Here's something clever I thought up the other day and decided to use on my new GishTeq website to spruce things up some.

What it does is generate a bulleted list of all the web pages as links in alphabetical order according to the title. Just add the EXEC-include (SSI) statement wherever and load it up for the surprise.

#!/usr/bin/perl -wT # # sitemap.pl #    Print a web site map as a bullet-list. Pages #    are listed alphabetically as links. # #    Copyright (c) GishTeq 2002-2003. #    All rights reserved. # #  URL:    http://www.gishteq.com #  E-mail: info@gishteq.com # use strict; use HTML::TokeParser; my @allfiles; my $ff; # This is the complete CGI-path to the directory. my $pathdir = "/home/users/kiffin-the-gish/public_html"; # This is the HTTP-path to the directory. my $htmlpath = "http://www.gishteq.com"; print "Content-type: text/html\n\n"; opendir(DX, $pathdir) or die "error: $!"; @allfiles = grep { $_ ne '.' and $_ ne '..' and ($_ =~ /\.html$/i) } readdir DX; closedir DX; my %map; foreach $ff (@allfiles) {   my $file = $pathdir . "/" . $ff;   my $p = HTML::TokeParser->new(shift||$file);   my $title = $ff; # Just in case.   # Try and extract the title, if possible.   if ($p->get_tag("title")) { $title = $p->get_trimmed_text; }   # In order for this to work, all titles must be unique!   $map{$title} = $ff; } print "<ul>\n"; for $ff (sort keys %map) # Sort by title. {   my $fname = $map{$ff};   # Alright, let's print 'em out.   print "<li><a href=\"$htmlpath/$fname\" title=\"Go to $fname\">$ff</a></li>\n"; } print "</ul>\n";

An example of it in action can be seen at the GishTeq sitemap page. Hope you like it. Feel free to use it as you see fit.

In case you haven't noticed it yet, I have added yet another new and exciting feature to my weblog. You see, along with the hundreds of other things I am trying to learn these days, Perl is one of the more difficult. Wouldn't it be nice if I could generate a random image? I am certain that everyone reading this entry would certainly agree that such added functionality would improve the quality of this site immensely. Perhaps attracting even more droves of visitors. So that is what I did. In order to see it, just look up at the upper left hand corner of this page and you should see it. Each time you visit or hit the refresh button, the image of the future famous blogger will change.

Here is the script for all you fine folks out there who know a little bit about the wonderful world of Perl programming:

#!/usr/bin/perl -wT use Image::Info qw(image_info dim); use CGI; my $pathroot = "/home/users/yourdomain.com/public_html"; my $htmlroot = "http://www.yourdomain.com"; # get the parameters, if possible. my $q = new CGI; my $subdir = $q->param("subdir"); my $prefix = $q->param("prefix"); my $ext = $q->param("ext"); my $maxn = $q->param("maxn"); my $border = $q->param("border"); # defaults of given parameter not passed. if (!$subdir) { $subdir = "blog_images"; } if (!$prefix) { $prefix = "my_image_"; } if (!$ext) { $ext = "jpg";} if (!$maxn) { $maxn = 9; } if (!$border) { $border = 1; } $subdir =~ s/\_/\//g; # define directories. my $pathdir = "${pathroot}/${subdir}"; my $htmldir = "${htmlroot}/${subdir}"; # get a random number between 1 and $maxn. my $num = int(rand $maxn) + 1; # setup the variables. my $ff = "${pathdir}/${prefix}${num}.${ext}"; my $info = image_info($ff); if (my $error = $info->{error}) { die "Can't parse image info: $error\n"; } my($w, $h) = dim($info); my $ff = "${htmldir}/${prefix}${num}.${ext}"; # print out the HTML input. print "Content-type: text/html\n\n"; print qq(<img src="$ff" width="$w" height="$h"); if ($border == 1) { print qq( style="border-left:1px solid black;border-top:1px solid black;border-bottom:2px solid black;border-right:2px solid black;"); } print qq( />);

In order to use this, your web host will need to support SSI and the Perl mod Image:: needs to be installed. Feel free to use this at your own risk and good luck.

Decided to do something really productive today, so I added a fancy menubar to my Cyber-Gish Homepage. If you look carefully you will see just under the header at the top of the page, a thin horizontal menu bar which is gray and extends across the width of the window. Run your cursor over the items and the "«" character will appear to the right of the selection. As if that were not fancy enough, if you scroll the page down, this horizontal bar floats along so that it stays at the top of the viewport. Pretty productive day, huh?

This was done using Javascript, thanks to the generic CBE API which I got at the Cross-Browser site. Thanks alot Mike.

Check it out for your late evening entertainment and (optionally) tell me what you think about it. Does it actually work on your browser or is something going terribly wrong? Is the page refreshing as fast as it used to or do things seem like they have gotten slower? Can you read the text or is it too small? I would be curious to hear.

"Classes and objects are not the same thing. A class is a type definition, whereas an object is a declaration of an instance of a class type. Once you create a class, you can create as many objects based on that class as you want. The same relationship exists between classes and objects as between cherry pie recipes and cherry pies; you can make as many cherry pies as you want from a single recipe. The process of creating an object from a class is referred to as instantiating an object or creating an instance of a class."

So as you can see I am well on my way to mastering the wonderful world of Java with the long-term goal of becoming Java/J2SE certified. That way I will be balancing my life between housemanship and web technology expert and hopefully increasing my availability for new-and-improved forms of employment.

Hey guess what? The latest version of TopStyle Pro 3.0 is now available. If you are really serious about designing great websites, then whatever you do go out and buy this wonderful product. Why do you need this? Well, with this tool you can easily gain advantage of the powers of true HTML, XHTML, CSS and harmonious colors, just to name a few. There are three programs I can no longer live without, and those are:

• TopStyle Pro
• CSE HTML Validator Pro
• HomeSite

Good stuff to get addicted to and much better than drugs.