Do you use any type of software to get started with web layouts or do you just code everything manually?

There are obviously many ways to go about this. Tools like Adobe Dreamweaver are getting to be pretty advanced these days to the point where it is certainly possible to do the whole thing in WYSIWYG mode, and have the program generate good code and quality layouts. I don’t have much experience doing that though.

If there is one skill that is most important I would say it is a solid knowledge of CSS. I generally try to lay out my web sites entirely with CSS – that is, only using tables when representing tabular data. This web site is more of a conceptual example than actually useful information, but it shows the power of CSS and explains some of the reasons why you should build your layouts with stylesheets, not markup: (CSS Zen Garden).

Are you using a program like Illustrator to create your illustrations/graphics?

As far as the graphics are concerned, I generally work in Photoshop (this could also probably be done w/ Illustrator), to build a mockup of the site. Then, I will create “slices” in Photoshop which correspond to the structure I plan on using to put together the pieces, guided by my knowledge of CSS. (Read: 3 column layouts, also CSS “float” property is of particular importance). The good part about slices is that you can rework the mockup as a whole over time and then re-export the sliced up images for your web site. This saves a lot of time over cutting up an image manually each time (because you know your client’s going to mess with the design, right?).

From a content aspect I would recommend using a content management system of some sort to drive the site if you are going to have regularly updated material and/or want to provide an easy way for non-technical people to enter the content. I have had a lot of success using WordPress for this in the past. It is known primarily as a blogging platform but it works well for creating full-blown content-managed sites as well. As an example There are already nice-looking themes that you can pick up and re-work as well, so that may reduce your need to get that involved with the layout. Simply find a theme where you like the structure, and tweak the graphics and CSS to customize it (as long as the license allows).

Finally, I would recommend setting up some sort of version control for the site, just because you never know when you will want to roll back, and it’s really nice to have all that history stored. I use Subversion for all the sites I work on.

BufferedImage buffer = new BufferedImage(IMG_SIZE, IMG_SIZE, BufferedImage.TYPE_INT_RGB);
Graphics g = buffer.createGraphics();
g.setColor(new Color(Integer.parseInt(success ? SUCCESS_COLOR : FAILURE_COLOR, 16)));
g.fillRect(0,0,IMG_SIZE,IMG_SIZE);

resp.setContentType("image/png");

OutputStream os = resp.getOutputStream();
ImageIO.write(buffer, "png", os);
os.close();

IMG_SIZE in this case is 1 and assumes a square image. You’ll notice the parseInt method call specifies a radix of 16, so that allows SUCCESS_COLOR and FAILURE_COLOR to be defined as hex strings, which to a web developer are second nature.

If you just take a few steps at the beginning of a project to enable Unicode encoding, you won’t ever have to worry about international character support, your application is “future-proofed.” When the time comes for your application to go global, it’s ready to go.

For example, if you use PHP you can set the encoding with the following statement in your php.ini file:
default_charset = "utf-8"

Or with Java set the following jvm setting:
-Dfile.encoding=UTF-8

In your Apache config file, set:
AddCharset UTF-8 .utf8
AddDefaultCharset UTF-8


You also need to set the database encoding to match up. In MySQL you can do this by setting the following directive in your my.cnf file:
default-character-set=utf8

It is important to note that you also need to specify the encoding for the connection. For a JDBC connection you can do this by adding the following parameters to the database URL:
useUnicode=true&characterEncoding=UTF-8&characterSetResults=UTF-8

Finally, if you are going to be sending emails from an application, you will want to specify the encoding in the Mime type as well. Using JavaMail, this can be done while setting the text of a MimeBodyPart:
mimeBodyPart.setText(htmlContent, MimeUtility.getDefaultJavaCharset(), "html");

If you make a concerted effort to implement the same encoding across the board, it will certainly help in the long run, as you won’t ever have to deal with character encoding issues.

For more information and specifics about UTF-8 encoding, visit UTF-8: The Secret of Character Encoding

My favorite part of the job was creating the shot tracker program, which is an interactive shot chart, similar to the one shown at left. Coaches can input their players’ makes and misses with a rich user interface, tracking a wide variety of criteria such as opponent, quarter, shot type, etc. The coach can then report on the players’ shooting statistics, broken down by these criteria, and visualize that data in a heat map overlay. The result is knowing exactly where and under what conditions their players should take their shots.

There’s also a great individual practice program, which helps players follow along with the drills outlined in the 180 Shooter book. The program guides players towards practice in the necessary areas to improve their shooting. I would recommend for anyone wanting to become a better basketball shooter, you should check out this web site.

For almost 2 years, I’ve been working on a product called Email Center Pro – anyone who reads this blog probably already knows that. It’s an email management solution for small to medium sized businesses that makes it super easy for a group of people to manage hundreds, even thousands of emails a day.

This is a big week, because we just launched version 2.0 of the software to our user base. The new version has a completely rewritten JavaScript client and makes use of an entirely new RESTful web services API. It’s got a lot of powerful new search features and introduces the dashboard which will soon allow users to customize their home page with analytics tools. 2.0 is a big step forward but it also lays the groundwork for the exciting things Email Center Pro will do in the very near future.

For anyone who has a web site, manages more than one email address, or has at least one other person involved with their business, I would whole-heartedly recommend this product. Sure, I may be biased, but I have seen first-hand the real gains in efficiency that it provides for an organization.

I’ve written a handy JavaScript class for including these types of sliders into a web site- stick around after the break for more details and cool configuration options.

The basic use consists of creating a new Slider object, passing to the constructor a container id – the id of the element to render the slider to, and an optional config object which can set various properties of the slider. Right now the supported options are: handler, color, message, mode and waver. The handler parameter allows me to set an event handler to call some JS function when the slide is completed- this could be anything from submitting a form to opening the non-iPhone version of your site ;)


var s2 = new Slider("slider2",{
 message: "turn off the lights!",
 color: "red",
 handler: function(){
  $("body").css("backgroundColor", "black");
 }
});
s2.init();


The third demo is using mode = “noclick”, which means that you don’t have to click on the slide handle in order to activate it. I suppose this is truer to the iPhone experience, unfortunately as of right now this one is still slightly buggy. The waver config option can be set in noclick mode to determine how far out of the track the cursor can waver, default is 75px.


var s3 = new Slider("slider3",{
 message: "no click required!",
 color: "green",
 mode: "noclick",
 handler: function(){ $("body").css("backgroundColor", "white"); }
});
s3.init();


Well, that’s about it – I will add the disclaimer that this code has been tested very little, only in Firefox 2, Webkit and IE7. Also slightly ironic is the fact that this code won’t work on Safari for iPhone, as it doesn’t support enough mouse events.

Feel free to use this code how you see fit as long as you maintain a link to this site.

Here are the files you will need:
- slider.js
- slider.css
- 4 .png images (in .zip file)

In addition, you will need to include jQuery, which can be downloaded in various formats. I used jQuery 1.2.3, which is already out of date, but I suspect this will work with a very wide range of jQuery versions.

Update (5/9/2010): Thanks to Brian K. for retouching the slider images — the transparency around the edges is very much improved. I have updated the sample and the zip file with the corrected images. I also added -moz-user-select and -webkit-user-select CSS properties to the stylesheet to prevent selecting the slider text when using the slider in these browsers.