Friday, November 25, 2005

Deep Trouble: Carbon Dioxide Levels Highest in 650,000 years

Forbes reports that the C02 levels on Earth are the higest in 650,000 years according to a recent study.

This should be a wake up call to close minded industrialists and extreme capitalist society in general. There is no "natural" cause for this as is plainly obvious.

What to do? Will our greed and disregard destroy the human race and perhaps the only planet of Earth's kind in the local cosmos, perhaps the universe?

Only time will tell.

Million Dollar Xbox 360?

The craziness over the Xbox 360 has hit utterly barmy proportions with one ebayer offering his Xbox and a plasma screen, a steal at $1 Million US (fat chance, let's really hope this guy is joking). Several are asking for $100,000 or more, and a handful around the $US 15,000-20,000 range

Utterly ridiculous. The console is worth like $400 US, just be patient!

LINK:Million Dollar Xbox 360 On EBay

Thursday, October 27, 2005

Tutorial 1: Those Blog Link Buttons. How to Bake 'Em

Well you've seen these blog buttons absolutely everywhere, they've proliferated like crazy ever since, well, blogging became a craze. There's no set way to create them, or how to create them. For an example of how Modbloggers, including myself have stretched that idea, you only have to head over to Modbuttons.

Some bloggers insist that the standard blog button size is 80 pixels wide by15 pixels high, though I have yet to see anything on the "officialness" of such claim if even a thing exists. To satisfy people though, for this tutorial we will start with 80x15 pixels. In this tutorial, you will learn to make a very stimple, low filesize button. It assumes moderate understanding of your Windows interface (ie, must know when an item is selected, how to use menubars etc - should already know this if you got here!), but this will be simple enough for anyone.

First, open up Adobe Photoshop. Technically you an use any drawing program you like to do this, from Paintshop Pro to Corel - even Microsoft Paint if you are so inclined. I am using Adobe Photoshop CS2 here; this should downgrade easily enough. You can always ask me for help if it does not.

In Photoshop, select File>New. Enter 80 pixels for the width, and 15 pixels for the height, and have a resolution of 72 pixels/inch. Ensure you are using RGB Color. Make the background white or transparent.

You should now have a small box on your screen. Zoom in by pressing CTRL and the add or plus symbol until you are about 700% zoomed in. This will make it easier to draw.

Go to Layer and select New > - from that pop-out menu, select "New Layer". Call this layer, Border.

Press CTRL+A, or go to the Select menu and select "All" from the drop down menu. You should see a moving dashed line surround your entire canvass. When you have this, click Edit and select Stroke.

A box should appear entitled "Stroke". Make the width 1px, and the color white. To make the color white if it isn't already, click on the coloured box next to the title "color". The "Color Picker" will appear. On the colour map that appears, either select the top most left corner, or type 255 in each of the R, G, and B boxes in the first column of radio buttons (Under H S B)


When you've selected white, ensure the Blending is set to Normal, and click ok. You should now have a border which is white. If you chose a white background, and even if you chose transparent, it may be a tad hard to see. Don't fret - we'll sort this out.

From the tools vertical toolbar (has many little icons on it, like T for text - which we will use soon, and pictures of brushes and cursors and so on), select the icon called Magic Wand, located underneath the feather picture, second column of the toolbar, second row. Alternatively, you may press W on the keyboard.

With the wand selected, your cursor should turn to a little, well, wand looking icon with a sort of starburst on top (Don't ask me where they came up with the idea for that, seems to suit), click in the dead centre of your canvas. (Note that the "border" layer must be selected. It should be, but to check, select Window, go down the drop down list to Layers and click till you see a box appear with Layers. Ensure "border" is highlighted.)

You should see the selection rectangle occur, but as a smaller rectangle. This is because we've selected the region inside the border. With this still selected, go to Layer>New>New Layer and enter "Fill" for the layer name. When this is created, the layer called Fill is now the current layer, and the selection rectangle is active on this layer.

Go to Edit> Fill. A box will appear, that should say Use: Foreground Color. Now you can keep this selected if you know your Foreground Color is not white. To know this, you must look on the tools toolbar, to where there are two squares, with one overlapping the other. If the first square, that overlaps the second is white, you may not use this. If it isn't white, you may press Ok in the Fill box to get a fill of that colour. If you have white, click on Foreground Color in the Use: dropdown and go to the option that says Color... and click.

With any luck, you will get the Color Picker again. Select a colour you want your button to be. I chose a blue, with R: 0, G:80, and B:135. Press ok when you have chose your colour.

The Color Picker will close, and return to the Fill box. Press Ok again.

You should now have a nice filled box with a white border. This is good.

Now we will add some text, which may be the username of your blog or website or even a saying or the like, but first, we need what is called a pixel font. A simple definition of a pixel font is a font that can be very small and readable at the same time. For more information on pixel fonts and where to download pixel for free, view Jennifer Apple's Tutorial, download and install one of your liking. I'm using FFF Harmony, found for free at FontsForFlash.

Click on the the screen. Up the top of Photoshop resides the "Option Bar" (If it is not there, press Escape. Click Window, go to Options and Click. Then select the Text tool again and click on the screen). The Option Bar displays the font name and type, it's size and if it is anti-aliased (smoothed) or not. At small sizes, we do not wish our font to be smoothed.

From the font name drop down, select the font you downloaded, or select Arial. Set the font size to the size it's recommended for (if a pixel font), or select 9pt if the font is Arial (could use sansserif as well). Make sure the font type is Regular or Normal, and that anti-aliasing is set to "None", and the color is set to one that is visible on your Fill layer - I have set mine to white for my navy blue. Click on the box again and type your desired text.

Once done return to the options bar and select the large tick symbol on the top, far-right.

You should now have your basuc blog button. You may export it for use on your website.

To do so, click File>Save and save your file as a Photoshop Document. Once done click File>Save for Web. On the right hand, select GIF from the first column, first row, drop down box, and since I am using only two colors, I set this accordingly in the Colors box. Once done click save, and save to somewhere safe. My button was only 164bytes, which is pretty good.

You have now, hopefully created a button. This one's very basic, try experimenting with different colours of fills and strokes and text. Don't be afraid to ask questions if you are stuck.


(Note: Due to hosting issues, images have been removed. Sorry for the inconvienience - Mo).


Monday, October 24, 2005

Technorati Tags

What are Technorati Tags? Technorati tags are a system technorati uses to shuffle away blogs, or content in general under looseleaf style categories.

They are an easy way for readers and bloggers alike to keep track of blogs in a certain category or under certain keyword. They are exceedingly easy to set up, and well worth it, for they are a lovely way of categorizing blogs using Blogspot, which doesn't seem to support native categorization in the way Modblog does (that's another story).

To get started, there's Technorati's site itself, or the excellent Consuming Experience introduction. You may also want to look into A Consuming Experience's tutorial on the GreasyMonkey add on for Mozilla Firefox that allows you to easily add tags to any post on Blogger.

You'll be up and running with Technorati tags in no time.



Email turns 34

According to Paul Buchheit on the GoogleBlog here at Blogspot, and summarily backed up by history (Well it was actually sorta made before '71.. but '71 is accepted as the genesis of modern email), email's turned 34. And what a birthday, billions of users, zillions of email, a legacy of success and incredible changes to our lifestyle, email's something to be celebrated for net-heads, and even normal non-technical type people too.

With it has come a few oddities and curses, like spam, smilies (yes they originated in email :D) and Nigerian money scams. Even some of these have entered the English language and literature - notably spam.

It's been an interesting journey.

Coming Soon : Photoshop Tutorials

I'm currently writing some Photoshop tutorials aimed at bloggers like your good selves, and that every blogger should need to know.

Tutorial 1: Those Blog Link Buttons. How to Bake 'Em
Tutorial 2: Basic Interfaces

Stay tuned.

Unusual Client

I would consider this unusual, but after a few oddball client's it's not really.

I work for a web design company. Today, I'm designing for ... a web design company. Specifically Lockstock. Recently I've got popular with lockstock, and they seem to be outsourcing not only their clients, but now themselves to me. My director informs me that my work and styles of graphic design are popular and in serious demand. Good news!

I'm rapt, as I've waited years for this chance. I guess the lesson learned is never to give up, and keep at what you enjoy no matter what.


But you knew that :)

Saturday, October 22, 2005

Basic CSS Mouseover/Rollover Tutorial

One of the most basic things on the web for navigation is the humble mouseover, or rollover.

In ancient times (an to some degree today) the rollover was done using Javascript, which would flip between images, but with the emergence of next generation browsers that support CSS, this is no longer neccesary - well, to some degree. Microsoft Explorer still does not implement CSS properly, but there are ways around this.

Here's an example of what we are going to do. You can copy and paste the code to see what it does.




We begin with structuring what our rollover menu will look like. Open up your HTML editor of choice, create a new HTML document and create some links - by way of example, I have a list of items here, each one is a link. If you do not yet know how to create a basic html file, I suggest you learn how to do so at the great tutorial site at Maricopa.edu.

Apples
Oranges
Peaches
Code:


<a href="apples.htm">Apples</a>
<a href="oranges.htm">Oranges</a>
<a href="peaches.htm">Peaches</a>



As you can see it's quite boring, just your everyday list of links. This is where CSS and a HTML construct called the unordered list comes in.

First we create the unordered list. The HTML tag for an unordered list is simply <ul>. An unordered list has no order, so there are no numbers, simply dot points or pictures for items within the list. Remember the list must be closed by using the </ul> tag (note the forward slash).

Code:


<ul>
<a href="apples.htm">Apples</a>
<a href="oranges.htm">Oranges</a>
<a href="peaches.htm">Peaches</a>
</ul>



If you save and run this file, you'll notice not much has happened. That's because we have not told our browser that each link is an item in our list. To do so, we must encase each link with the <li> and </li> tags (i.e, li for list item).

Like so:


<ul>
<li><a href="apples.htm">Apples</a></li>
<li><a href="oranges.htm">Oranges</a></li>
<li><a href="peaches.htm">Peaches</a></li>
</ul>



This gives the following:





Now in order to make this more appealing, we have to get rid of those dots and add some colour. This will require using CSS.

At the top of your HTML document, just before the </head> tag, add the following code.

Code:


<style type="text/css">


ul{
text-align:center;
list-style-type:none;
width:100px;
}

li{
height:20px;
display:block;
background-color:silver;
color:black;
border:1px solid #666666;
}

a{
display:block;
height:20px;
color:black;
text-decoration:none;
}

a:hover{
display:block;
background-color:#666666;
color:white
height:20px;
}

</style>





Ok, to explain what this does. I'll start with the ul block inside the style tags.
The ul block, denoted by open and closed curly braces tells the browser how to format an unordered list when it encounters it in your code. The first line tells the browser that anything with in the unordered list, including the list items themselves, must have their text centered, giving the centered appearance above. The next line, list-style-type:none; tells the browser that the unordered list must have no style of dot point or widget next to it - and this can be seen clearly. The last line in the ul block merely states that unordered list cannot exceed 100 pixels wide. You can just as easily use 50% or centimeters there.

The next block, the li block, sets up how list items should look and behave. Apart from colours and borders, and the heights of the lists here (straighforward), the important line here is display:block; - this tells the browser to consider the whole list item as a block, and that will become apparent in a minute. As an aside, color refers to the foreground color of the list item, in particular - the text, where as background-color: refers to the background.

The next block, the a block, configures how links should behave. Again you may notice display:block. This is telling the browser to not only make the link a link but make the whole surrounding space also act as a link.

The final block, the a:hover block, configures a CSS selector called hover. This is a behaviour of links, used to change their colour when the mouse goes over them. Because display:block is set, we now have the entire area acting as a link so any behaviour set in a:hover also apply to the area surrounding the link.


That basically completes this short tutorial. Try messing around with colours and sizes and borders. For borders, I have used a very basic one which is 1 pixel thick, is solid in appearance and dark grey. You could try a 5 pixel thick border, make it dashed (so you'd replace solid in the CSS there with the "dashed" keyword (minus quotes) and have it blue. I have provided the whole HTML document below if you have got stuck.

Total Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>CSS Rollovers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
ul{ text-align:center; list-style-type:none; width:100px;
}
li{
height:20px; display:block; background-color:silver; color:black; border:1px solid #666666;
}
a{
display:block; height:20px; color:black; text-decoration:none;
}
a:hover{
display:block; background-color:#666666; color:white; height:20px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Apples</a></li>
<li><a href="#">Oranges</a></li>
<li><a href="#">Peaches</a></li>
</ul><br>
</body>
</html>

Blogger

Compared to Modblog, Blogger feels sterile, cold and lonely, but by the same token, infinitely more professional. Modblog is a community oriented site, so I guess the shoe fits and fits well.

As a pleasant surprise, Blogger seems to have a very neat - I'd say admirable - CSS layout system. The joy of this is, it will take me mere minutes to format this, as compared to hours trying to work through Modblog's often confusing code. That said, is blogger fully skinnable.

Only one way to find out.

Sleepless in Adelaide

So once again, as happens frequently for me in the month of Ramadan, I am unable to sleep, meaning another 36 or so hour "day".

I don't know how this arises every week or so, but I am simply incapable of sleeping normally. I speculate that it's the clash between a largely sedentary lifestyle and then going to daylight hour fasting, but I'm no doctor.


Nevertheless, I can spend these sleepless hours doing work.


I am unsure if I told my readers this, but I work for a new media company in Adelaide called Whitecursor. By new media, I mean it involves traditional web and graphic design as well as very high level SEO or search engine optimisation, a very important part of any web presence these days, as it determines who if anyone will visit your site - or blog.

A year or so back, ago, I posted a poll on Modblog about what I should improve on and some readers suggested CSS. I took a short refresher course to do so, and now as part of my duties as a somewhat senior web designer, CSS is my bread and butter so to speak. Essentially as you might have figured, I am the fellow who visually designs and codes websites.

I'm working on several projects these days, the most recently completed being http://www.diamondscamera.com.au/ , which is a large and well known brand in Adelaide at least for camera gear. The list of clients stretches on for miles, and surprisingly for me it seems most clients want me as their designer. It's been a complete and welcome change in fortunes.

A New Beginning?

Test.


Modblog is down far too much - so much so it's killing my willingness to post off. Shall we try Blogger again? I think we shall, last time we did was 2002. 2006 is ample time for the bugs to be fixed.