After a very long summer and many hours in a dimly lit basement I’m proud to say that the new Black Tie Ski Rentals website (version 3) has officially launched. Check it out at BlackTieSkis.com.

The site is by far the most important project I have done to date. It encompasses the 3rd iteration of a redesign lifecycle and was a time to really consolidate the branding and push out a new look and feel that not only reflected the company but synced all marketing and external facing media to a conclusive design.

It was very important to me make sure that this version of the website well surpassed their competition and to set a bar, both graphically and technically for others to follow. (more…)

Well its official, I have resurfaced after what has been one of the busiest times of my life. A wedding, visitors from the mother country, and the biggest project I have started to date..lets just say its been nuttier then squirrel shit and leave it at that.

First of all the wedding. Its funny, looking back on it all it seems like a distant memory or something I once read in a book rather then an actual experience that happened to me. I do remember that the wedding date all of a sudden came really fast and before we had a chance to ask each other if we had thought of everything I had my amazing parents fly in from Australia, followed shortly by my brother and his wife (and my little nephew Lachie), and my sister and her husband. A few days of catching up and showing them around our little slice of the American dream and it was back to the airport to pick up 6 of my best mates from Australia. A quick jaunt to Vegas (more…)

Design Groove or some version of it has existed in my head for a very long time, so its only fitting that I put the time and effort in to finally see it live. I’m excited to finally have my own place in the web world and to officially have a site to direct potential clients and friends a like to see.

While the site itself is designed to act as an online portfolio for the projects I have worked on in the past, it will also hopefully allow me to use the virtual space to experiment on as well as a place to write articles on web related issues. I’m not in the business of being a professional writer but I’ve found that the best way to solidify learning is by attempting to teach other people. With that in mind I hope this blog space becomes a regular part of my working week and to provide people with a resource rich in web related content and tutorials. So much of what I have done since becoming a web professional has been self taught and as any one who has been through similar experiences can tell you, it can be a very frustrating and time consuming practice. I hope that some of the biggest lessons I’ve learnt can be talked about here as well as creating a forum for discussing other issues related to the topic in question.

That being said I am the first to admit that there are always other ways of approaching solutions and am always interested in alternatives or people pointing out incorrect or verbose coding or methodologies.

So without prattling along further I wanted to welcome you officially to my new site and hope that you enjoy what I have put together. Please feel free at any stage to contact me directly at ben@justagroove.net or to comment on any one of my articles.

Cheers and thanks for visiting,

Ben

In the first part of this tutorial we looked at how to set up a generic XML document with image information and then link your page to it through the simpleXML function in php. Using this method it is easy then to exploit the information in the XML document to display rows of thumbnails and even dynamically link them to the full sized images.

What I want to show you now is my way of setting up a pseudo-random function to pick 6 images from the XML document and display them like I have in the side bar to my right. It may seem a little unorthodox to some but I came up with this method to ensure that the sample of 6 is not only random but also that the same image is not displayed twice.

I’ll start with the same simpleXML connection script as we used in the first tutorial:

Lets Get Random

Now I want to start adding some code to define the range of image numbers. I also want to create the first ‘random’ number using the rand(firstNumber, lastNumber) function which picks a mathematically random number in the range given. Unfortunately to-date I have been unable to find a built-in function to calculate the number of nodes in an XML document so I’ll be setting the minimum number and the maximum number of images in the xml document manually. This means that the dynamic advantage of only updating the XML document to add more images is greatly decreased since you will also need to change in the php the range of images your working from. Stay tuned for a re-working of this solutions portion of the code.

(more…)

With the addition of certain very help PHP functions that were released in version 5.0, the integration of XML and PHP is now simpler then ever.

Why XML over a database driven solution? I could discuss all the reasons for and against but at the end of the day in a case like a photo gallery it really comes down to personal preference. For me its all about ease of use and not adding complexity to something that at its core should be very easy and straight forward. XML offers accessibility, readability, flexibility and you don’t need to start playing with database tables and fields to achieve results fast.

While I endeavor to write this for the common person the below article does assume a basic understanding of XML and PHP. If you want to understand more about either topic a good starting place is the w3Schools website which offers great free introductory tutorials on standard web technology.

Download Tutorial Files

The Basics

I’ll be basing my photo gallery off a simple XML document, which I’ll detail here. Please feel free to download a copy of the source files to follow along with me. Now I don’t pretend to be an expert at writing XML, so feel free to suggest any changes in the comments section.

This basically allows me to describe an image by giving it a title, url paths to the location of the photo and its thumbnail, and the width and height of each. I’ve decided to use relative paths for the images here although in the tutorial files I’ve used absolute paths to the image URL to add flexibility in using the code anywhere in your site.

Now, using the simpleXML function in PHP we can write some code to connect to the above XML document.

That’s all that’s needed to connect to our XML file. Now we can assign PHP variables with specific elements from the XML document by use the variable $xml->element as follows:

(more…)

Its seems that for all its amazing uses, and the huge supporting community behind it, certain very easy topics seem to be holding back the full power of css from the newer css adopters. Vertically and horizontally centering an element seems as if it should be very straight forward right? Wrong. Despite my years of CSS coding, I’ve never found an article or even a discussion of how to vertically and horizontally center an element consistently, and after hours of searching my frustrations were such that I decided to put some time into discovering the solution myself (shock horror!!).

It turns out that the actual solution is very easy and even the most elementary of browsers (say the IE’s of the world) understand it. All 100% standard to boot. Before going on though, the solution does work for a specific situation:

• You must know the width and height of the element your trying to vertically center
• You must have a larger box to contain it in (most of the time this can even be just the body).

Ok so lets look at some code. We need to start with a div and define its width and height:

Now lets add some positioning information:

That should be it right? Again wrong.

(more…)