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.

EDIT: I should have added these originally, 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.

If there’s enough demand for it and/or I get around to it, I’ll package up an official release with all the necessary files and a demo HTML page.

One of the most frustrating things I encountered working with EC2 is the monotony of bundling and uploading the AMI each time I made changes to my server configuration. Originally, my plan was to store the application code as part of the AMI so that when the server fired up, it was all ready to go with the latest version. I quickly realized that this was going to get out of hand, especially when we decided to deploy our beta application on EC2 and it required updates on a weekly basis. I progressed by storing the application code on S3, and downloading it manually when needed. Then I read the CodeWord blog post and I implemented the following init script.

#! /bin/sh
#
# chkconfig: 2345 90 30
# description: EC2 bootstrapping process
#
RETVAL=0
case "$1" in
start)
$0 reload
if [ $? == 0 ]; then
   /opt/myapp/scripts/start.sh
fi
RETVAL=$?
;;
stop)
/opt/myapp/scripts/stop.sh
RETVAL=$?
;;
restart)
$0 stop
$0 start
RETVAL=$?
;;
reload)
cp /opt/myapp/scripts/download.sh /tmp/download.sh
if [ $? == 0 ]; then
   /tmp/download.sh
fi
RETVAL=$?
;;
*)
echo "Usage: $0 {start|stop|restart|reload}"
exit 1
;;
esac
exit $RETVAL

This init script was added to the appropriate runlevels with chkconfig and then bundled into the AMI, along with the environment setup (Java, Tomcat, Apache, whatever the case may be). The only other piece of code that is necessary at bundle-time is the download.sh script, which tells the application how to get the deployment code and where to unpack it. The reason I’m copying to a temp directory is because I am unpacking into the /opt/myapp directory and I don’t want to overwrite that file when it’s running. The download script is built on s3cmd and looks something like this:

#!/bin/bash
deploy="web"
deploydir="/opt/myapp"
ext="tar.gz"
s3file="s3://myapp-deployments/$deploy.$ext"
ts=`date +%s`
/usr/bin/s3cmd -c /root/.s3cfg get $s3file /tmp/$ts.$ext
if [ $? == 0 ]; then
   tar xzfp /tmp/$ts.$ext -C $deploydir/ --overwrite
   if [ $? == 0 ]; then
        rm /tmp/$ts.$ext
        chmod 744 $deploydir/scripts/*
        echo "downloaded $s3file as $ts.$ext and extracted to $deploydir"
   fi
fi

This will allow me to pack up a quiver of deployment tarballs for each of my server types and stick them on a private bucket on S3. (I could even improve this by using EC2’s user-data to specify a server type so I can use one multi-purpose image. In my case, the instances are specific enough that it makes sense to maintain separate image types, with the deploy variable hard-coded.) Then I can use this download script to grab the latest code, unpack it into the myapp directory, and run the freshly-downloaded start.sh script. The script allows me to do things like start various services, create cron tasks, obtain a Dynamic DNS hostname, whatever I need to accomplish at startup time. The original author checked out his packages from subversion, I opted to go the S3 route so that I didn’t have to open up our internal SVN repository to the public, and I found that it was much quicker to grab the code from S3 than from anywhere else, meaning it was ready to go as fast as possible.

The tarballs described above contain the necessary compiled Java classes and JAR files, any worthwile bash scripts, cron task definitions, even application config files. To manage the creation of this install directory, I’m using an Ant task to throw together all the necessary files. Certainly this is nothing revolutionary, an excerpt from my build.xml file is shown below.

<target name="package-web" depends="package">
        <!-- build scripts directory -->
        <echo message="Adding service scripts..."/>
        <copy todir="${basedir}/dist/web/scripts">
            <fileset dir="${basedir}/scripts/service/web">
                <include name="*"/>
            </fileset>
        </copy>
        <!-- copy necessary JAR files -->
        <echo message="Adding JAR files..."/>
        <copy todir="${basedir}/dist/web/lib">
                <fileset dir="${basedir}/dist/java"/>
        </copy>
        <!-- copy all the cron tasks -->
        <echo message="Adding cron jobs..."/>
        <copy todir="${basedir}/dist/web/cron">
                <fileset dir="${basedir}/setup/cron/web"/>
        </copy>
        <echo message="Copying bashrc file"/>
        <copy file="${basedir}/setup/bashrc/web" tofile="${basedir}/dist/web/bashrc"/>
        <echo message="tar/gzipping deployment..."/>
        <tar basedir="${basedir}/dist/web" destfile="${basedir}/build/web.tar.gz" compression="gzip"/>
</target>

I’m sure that if you’ve made it this far you can guess how Subversion fits into the picture. All of the application code, scripts, config files, etc. get stored in the SVN repository. That means not only do I have a complete revision history for all of my code, but I also have that protection for my configuration files and my “glue” code, a handful of perl and bash scripts. One thing that I do, for posterity sake, is create a tag of my entire repository when I’m deploying a new version to S3. The tag name contains the revision number and deployment date so that I can see all the previously released versions at a glance and easily roll back to a stable version should we (god forbid) release some buggy code.

So, this is a glimpse at how I’ve been able to stay organized with my use of EC2 as a server infrastructure for a distributed web application. It’s really amazing how useful EC2 is, and I really think it will change the web hosting market drastically. I hope to share a bit more of my architecture with you, including some monitoring tools that I’ve developed and a few other fun things, but that will have to wait until next time.