Last week I completed the creation of an online yearbook for our son. We homeschool him and create a portfolio or yearbook each year sampling his work and the progress he’s made. This year I decided to create the yearbook online, saving paper and storage space, and allowing us to share his work with family and friends.

I created the site statically using a combination of CSS, Javascript, HTML, and Flash. You can view the site here. I thought I would share in this post, the libraries I used and what issues I had ensuring it worked cross-browser.

Technologies/Libraries Used

First, on most pages I have a photo that is rotated with a Polaroid type effect applied to it (see photo below). I could have done this in an image editor, but choose in this case (for a low-trafficked site) to use Javascript. I used the Instant.js javascript library to accomplish this effect. It’s very easy to use and I had very few problems with it (see below).

Second, to create the photo galleries used mainly in the Art and Field Trip sections (and in the World War II Day example below), I used the PostcardViewer from Airtight Interactive. Once again, I found this very easy to use. I already use Google Picassa to manage my photos, and PostcardViewer can be downloaded as a Picassa template.

Note: I highly recommend you try Picassa if you aren’t using it already.

Read More »

I don’t usually post much about laying out web pages, but this tip was one I just couldn’t pass on . I can’t wait until the next time I have to layout a web page to use this. The tip is to use a background image, which is a grid. You apply it as the background, and then use it to position all your elements. Take a look over at Smiley Cat, which provides a background image and an example.

This is a good post on The Ajax Response, discussing if it should be XML, HTML, or JSON. I personally think under no circumstances should it be HTML, or anything that includes markup. That violates the principle of separating the content from the style and it prevents reuse, by yourself and others.

I think deciding between JSON and XML is going to depend on your situation. XML is much more universal. With XML, you can create Web Services from your back end, and call them for display in PHP, JSP, and with Ajax. That Ajax call you are making today maybe a non-Ajax call you make later.

Google Suggest is a prime example of silliness. That data response is completely unusable in any other scenario. Perhaps, knowing Google, they have done this on purpose to prevent others from using that feed as freely, but it could be a handy service to offer and implement in other locations. The way Google has chosen to implement it, would require Google to have many versions of that response, for multiple uses.

With the rare exception, when you serve up data from your back end, think in big picture terms of making that data available to all your front end applications, and then apply style (HTML, CSS, etc) to it, once the data is in the front end.

UPDATE: Ignore my reservations about HTML in AJAX responses and see my followup post: AJAX Returning HTML (change of opinion).

These CSS3 tips will certainly come in handy and will thankfully eliminate all those corner gif’s that I see so many websites using to get this effect.

I found this helpful for centering some links today. It could be used to center any block on a web page, both vertically and horizontally.