Still As Life

Over at TerraMedia I’ve been quite busy over the past few weeks working on not only a new design for TerraMedia, but a completely new website!

It is now using Drupal instead of Joomla and the theme is valid XHTML 1.0 Strict along with being completely cross browser compatible. Developing it for Firefox, Safari, Opera and Internet Explorer 7 was really a walk in the park. Internet Explorer 6 caused me even more pain then usual due to the random portfolio image in the header that is on an angle.

I probably spent a good 50 hours just on that part of the design, not including the other IE6 fixes.

The reason it took so much work was primarily because I was using a pair of PNG 24’s for the images, one as the background image and one as the changing image. Using the PNG Fix module for Drupal fixed the background image fine, but because the image in the foreground was being called through php, the Javascript used in the PNG Fix module wasn’t picking up that it was a PNG, thus not filtering the transparency correctly.

After much fiddling around and trying to make this work, I ended up just combining the two images rather than having the background image seperate, and calling them randomly through Javascript instead. This is a little bit more tedious and doesn’t run correctly through a block like the PHP, but it does do the job. Unfortunately adding more images to the pool takes a little bit more than just uploading them, but I can live with that for now.

The left sidebar also took a little bit of fiddling around since it uses li:hover’s as well as a:hover’s and IE6 doesn’t render li:hover’s correctly and it renders li’s in general differently to the other browsers. So unfortunately, some of the sidebar functionality is lost but it degrades gracefully and that’s the important thing when degradation comes into play.

What do you think of the new “Web 2.0″ style design and the new website in general?

Popularity: 41% [?]

Adobe have released the beta of Photoshop Express, a free, cut down (even more so than Photoshop Elements), web based version of Photoshop and photo sharing service which currently provides up to 2gb of space per user.

So far I have been unable to get the register page or the test drive page to load in Firefox, however it seems to be working in Safari.

Registration is fairly straight forward, name, email address, password, personal sharing url (basically you.photoshop.com), birth year, and country. Currently, the United States is the only country available to choose from the drop down menu. It let me register with the US as my country and I was given the following:

Check my email, hey I got my verification email straight up, I would’ve been annoyed if I didn’t. The verification page works in Firefox and tells me I am now able to sign in. No big surprise, the sign in page doesn’t work in Firefox.

So, signed in using Safari and I am greeted with a simple interface where I can choose to either upload photos, edit photos/create albums, view/share photos, or browse community photo albums.

The upload section is fairly straight forward and easy to use, though it is a little on the slow side when it comes to actually uploading photos.

As far as editing photo’s goes, it comes nowhere near a replacement for the real thing, but it does provide some useful features and makes some of the filters in Photoshop easy to apply for a user that doesn’t know how to use them.

As you can see from the screenshot, the tools are broken into 3 groups, Basics, Tuning, and Effects.

Basics

1. Crop & Rotate - Your photo comes up with an adjustable box overlaid on it, you simply drag the corners of the box or the entire box until your image is where you want to crop it to. If you want to rotate, there is a button for clock-wise and a button for counter-clock-wise.
2. Auto Correct - A series of small versions of the photo are displayed along the top of the editor with corrections automatically performed by the software. The user simply has to choose the one they like the best and apply it.
3. Exposure - Works the same way as Auto Correct, simply choose from the various different levels of exposure, as worked out by the software.
4. Red-Eye Removal - You are given a black cross-hair that turns red when you mouse over eye’s. If there is a red-eye, simply click it and the software will remove it. I don’t have any photo’s with red-eye’s on my laptop, so I can’t test the effectiveness of this at the moment, but it does seem to be very simple. Trying it on a photo without red-eyes though returned grey patches over the faces in some instances.
5. Touchup - This is a touchy tool and is probably one of the most complicated tools in Photoshop Express. It works simply by clicking on the photo and either leaving as is, or dragging it in/out for a bigger or smaller touchup, you can of course drag it out using a slider after the first click. However, it seems to me to work similarly to the clone tool in Photoshop, except that the software determines the clone source instead of the user. Often it seems to be inaccurate or inappropriate. It seems to only work well in a large area of similar things, such as the sky or trees.
6. Saturation - This works the same way as Auto Correct and Exposure, just choose your preferred saturation level from the choices made by the software.

Tuning

1. White Balance - This works the same way as Saturation, Auto Correct etc, except that it provides you with completely automatic, or choices for the sort of lighting, so you have options for sunlight, flashes, clouds, shade, incandescent lighting, and fluorescent lighting.
2. Highlight - Works the same way as Auto Correct and simplifies the adjustment of highlights, however, it does severely limit the amount of adjustment you can make as it is automatically determined be the software.
3. Fill Light - As with Highlight, it is a choice based on what the software decides, and seems to work similarly to adjusting the brightness.
4. Sharpen - Very simple to sharpen parts of a photo. Click anywhere on the photo to select the section you wish to sharpen and a box will appear around it. You can drag the box if you wish. Up the top, a selection of different sharpened options become available for that section of the photo. It works the same way as Auto Correct etc, except you can sharpen specific sections, rather than only the entire photo.
5. Soft Focus - Works the same way as Sharpen, except it creates a blur or “soft focus” on specific parts of the photo.

Effects

1. Pop Color - This is pretty cool. You are given an eyedropper and all you do is select a colour from the photo. The software then determines everywhere else that colour occurs and allows you to change the colour from a selection of rainbow colours. The rest of the photo is turned gray scale. Alternatively, you can choose from one of the 3 presets which also give interesting effects.
2. Hue - Lets you choose from one of the pre-determined choices, similarly to Auto Correct, and re-colours the photo the same way that using the hue layer overlay option does in Photoshop.
3. Black & White - As the name suggests, it turns the photo black and white, but it gives you some choices with differing levels of black and white balances, it can create some cool effects.
4. Tint - Works the same way as Luminosity in Photoshop, it takes a colour and makes the photo monochromatic based on that colour. The choices are rainbow colours.
5. Sketch - Is just like the Sumi-e filter from Photoshop. It provides choices which obviously have variations on the brush width and pressure.
6. Distort - Provides 5 different distortion effects. These effects all work by dragging an ellipse around the area you want to apply them to and it performs the operation. The effects are all pre-determined, so they will always have the same effect, on any spot on any image (though sky would not be as affected by them since its mostly variations of the same colour). If you use a lot of these effects, it becomes very slow and difficult to use. You are able to select each effect individually when you click it, which makes it difficult to apply two effects to the same spot. They are easy to remove though.
   • Twirl - Performs a twirl on the selected area.
   • Stretch - Stretches the selected area vertically.
   • Bulge - Creates the appearance of a bulge in a selected area.
   • Ball shape - Works similarly to the sphereise filter in Photoshop.
   • Fuzz out the details - Seems pointless except for blurring out faces and the like. It creates a big pixelated patch over the selected area.

All in all, Photoshop Express is fairly easy to use, I expect that the speed problems will be fixed before the final release, and hopefully some of the distort effects will become more user-friendly when there are large amounts of them. I’m also hoping it will work in Firefox. Aside from that though, it seems like a pretty good tool really, especially for someone that has no experience with Photoshop or photo editing.

I can’t compare it to the likes of Picasa or Flickr as I have never used these services. Thus far though, it is looking like a very decent product to be brought to the online photo market. Not to mention, it’s free as well.

One of my biggest qualms with it is that neither ctrl + z or cmd + z perform an undo function, you have to click the undo button if you don’t like it. You also have to use the scroll bar, not the scroll wheel when scrolling through albums and so on.

Something that particularly stands out to me is that it seems to be based in Flash, and it is one of the most user-friendly Flash interfaces I have ever used, and coming from Adobe, I wouldn’t expect anything less.

Popularity: 72% [?]

I am looking forward to release of Internet Explorer 8, and what will hopefully be a reasonably quick take up of it.

In the myriad of new standards compliant features is CSS table support. I’ve used these countless times in Firefox, Safari and Opera, only to find that I have to completely rewrite the CSS, far more complexly, in order for it to work in Internet Explorer and look fairly similar.

Sure, I could just use HTML tables, but they feel clunky, restrictive and outdated to me. They have their uses, and layout design is not one of them.

Float tags do their job, that’s for sure, but they require far more code and are in general far more complex to get the same effect as the simple CSS tables which are far easier to use than HTML tables as well.

The new TerraMedia website that is currently under development was written using CSS tables initially. To get the same effect in IE6 and IE7 without using HTML tables, I’ve had to add a additional background image that would not have otherwise been needed, as well as use completely different CSS for the design that took twice as long to write.

If you haven’t used, or even heard of CSS tables before, they are really quite simple.

Say you had the following HTML:

<div id="container">
<div id="left"></div>
<div id="centre"></div>
<div id="right"></div>
</div>

If you used CSS tables, all you would have to write in the stylesheet is this:

#container {
disply: table;
}
#left, #centre, #right {
display: table-cell;
}

Then you can go and specify any further styles however you want them. That’s all there is to it. That will give the exact same appearance as a three-column HTML table. The difference being that it is far easier to change the appearance of if you need to, as well as the positioning and so on.

For more information on CSS tables, there is a blog about it by Kevin Yank over at Sitepoint.

Of course, without complete browser compatibility, using these does pose a problem. With IE8 coming up though, hopefully it will become easier to utilize this excellent tool.

I noticed some of the commenters over at the Sitepoint blog found that the sample tabular website there didn’t always render correctly in Firefox, sometimes pushing the third column below the other two.

I haven’t had this experience myself, but Kevin posted a fix, saying that Firefox has a long-standing render problem that requires the

display: table-row

tag to be added to an additional containing div, within the original one. The additional tag should do the same as the HTML <tr> tag. I however think that the problem with his example could be fixed if he used either all fixed widths or all percentages. As he uses a combination of both, where the percentages add up to 99%, I think this would be the cause of the problem. I have found in my own usage of CSS tables that the use of widths is no different to the use of widths in floats and divs in general, if the widths add up to more than the width of the screen, it’s going to either go off of the screen, or it’s going to get pushed below everything else if it exceeds the width of it’s containing element.

It will be a while before they will be widely usable, considering how widely IE6 is still used, even after how long IE7 has been out. However, it is a step in the right direction and will hopefully result in some nice new standards compliant designs.

Popularity: 24% [?]