This morning, while sitting in traffic, I came up with what I think is a good analogy to explain the basics of how HTML, CSS, JS, databases and PHP (or whatever you prefer) work together.

I explain it like this.

Imagine, an empty glass and a pitcher full of water sitting on a desk.

• HTML would be the glass. It’s the structure that holds everything together.
• CSS is how the glass looks. Is it blue? Is it red? Is it tall, or is it short? CSS controls the presentation of the structure (in our case, the glass/html).
• The pitcher holding the water is a database. The water is content. The pitcher holds the ‘water’ somewhere else until you need it. It can be big or small. You can have many ‘pitchers’. You can have only one. You can fill it with whatever you want.
• Pouring the water into the cup is the PHP (or whatever language you prefer). It takes the stuff from the database when you need it, and puts it into the cup.
• Javascript (in it’s simplest sense) are the physics of the scene. For example, it could be how the water behaves when it gets into the cup. Does it splash everywhere? Is it frozen? Is it hot? Does it float away? Does it turn into Coke after someone has consumed it?

I realize this is a pretty broad generalization, however for a beginner – I believe it could be a good visual metaphor to explain the main systems working behind the web.

I use Win XP as a VM to test in IE7, but this works in newer versions of windows as well for more modern browsers. XP is the only one that actually runs IE7 as intended. The emulators all suck.

1. In VMWare Fusion, go to Virtual Machine > Settings > Network. Make sure your Network settings are set to Bridged.
2. Open terminal. Type this in – sudo pico /applications/xampp/xamppfiles/etc/httpd.conf
3. Enter your password. Hit return.
4. Look for the line that says “Listen 80″. Change that to Listen 8888
5. Go like 2 pages down, and look for the string that says “#ServerName www.example.com:80″ and change that to “#ServerName www.example.com:8888″
6. Hit ctrl-x, hit ‘y’, then hit enter to save.
7. Open system preferences, network, and copy your IP address.
8. Open VM-Ware. Start Windows. In ‘my computer’ open c:\windows\system32\drivers\etc\hosts with notepad. You’ll see a few IP address, probably 127.0.0.1. Add your IP address to the end of the list, and a site name. Like this: 192.168.0.23 yoursite
9. Open your web browser within Windows. Now you should be able to open http://yoursite:8889 in IE.
10. Party down.

SEOmoz – SEO Software

The human ear can only ear a specific frequency range of sound, and speakers can only produce an even smaller frequency range. If you combine that with dynamics of sound, volumes, and distortion, you have a very limited ‘space’ to fit your music into. One of the biggest mistakes inexperienced engineers and producers make, is they constantly boost elements of their track. They’ll crank up their kick drum, then they crank up their snare, then they crank up their lead, then the bass, then the hats, then everything is shouting in a big distorted cacophony. With subtractive EQ, you sculpt away sections of the different sounds that overlap.

For example, typically when writing trance I’ll start with the kick and bassline relationship. Usually, I’ll start to cut out sub bass frequencies from my bassline starting around 150hz. That way, the sub bass from the kick drum doesn’t become muddied if it overlaps with the bassline. I’ll then, notch out an are from the kickdrum, around 300hz, so that the bassline has an area of the sound spectrum to have dominance.

I follow this approach as I build the rest of the song, and then depending on the part of the song, increase or decrease volume of key elements. That allows for me to guide the listener to focus on certain elements and different points of the song.

The same methodology can be applied in other areas of life.

For example, in my other creative outlet, art direction and design. One of the most important things to get a client to come to the understanding of, is what they are really trying to achieve with their campaign. Identification of goals of the business owner, and then identifying the goals of the audience, helps to inform a point of convergence that can dictate key messaging.

That is all fine and dandy, but somewhere down the road, the concept gets shown to a stakeholder at an organization who inserts their own feedback. The concept then gets shown to someone else, and another person, and another person. Suddenly, your very focused message, has additional things that you need to communicate.

I try to head that off from the beginning. Typically, using the analogy of subtractive equalization. Or by asking them to imagine they are in a room, and everyone is shouting. Sure the volume is loud, but they can’t hear anything.

The more you add, the more you take away. And the more you take away, the more you add.

When I give presentations to clients, I always try to give an analogy or a story from personal experience that makes understanding complex or technical issues easily digestible. One of the challenges with this specific presentation was how do I explain the differences in design, user centered design and experience design to an audience that doesn’t know, or think about the differences in the three.

While working on the presentation, I was having a beer in my music studio and was struck by a moment of inspiration.

The beer bottle.

It’s a pretty simple design that solves an important problem. What do you do if you need to carry beer? The solution: glass, encased around the liquid with a bottle cap to seal in the liquid. Bottle caps were originally designed to be pressed over and around the top of a glass bottle to grab a small flange on the bottleneck. The Crown Cork was patented by William Painter on 2 February 1892 (U.S. Patent 468,258). It originally had 24 teeth and a cork seal with a paper backing to prevent contact between the contents and the metal cap. The current version has 21 teeth. To open these bottles, a bottle opener is generally advised.

The twist.

So, the bottle cap is great, unless you want to go to a football game and tailgate, and whoops – you’ve forgotten your bottle opener. I guess you could break the top off the bottle, that is if you like slicing up your lips and swallowing fragments of glass. Or maybe you could use a sword. An even easier solution would be to use a twist off cap. That way the user of the bottle has all the tools they need to open the bottle.

The pour.

We all know that Guinness in a pub is great. They use a special keg that infuses nitrogen into the stout to give it that perfect head and that unique taste. Guinness took the design of the beer bottle a step further, and figured out how they could emulate the experience of ‘the pour’ you get in a pub in the comfort of your own home. The Guinness draught can is a sleek design can with a small nitrogen capsule inside that releases when you open it.

What does this all mean?

Design solves a problem. User Centered Design solves a problem with the needs of the user given priority. Experience design solves a problem with the user in mind, but adds another element, it highlights experience of interacting with the brand.

So, if you ever need to quickly explain design to a client, just remember beer!

Basically, the way it works is pretty simple. You connect your sound source (keyboard, guitar, whatever) into one end of the Talkbox, it’s amplified and output through a vinyl tube. That vinyl tube is placed in your mouth, and you use the shape of your mouth to create an envelope for the sound. So if you were ever wondering how the killargh guitar lick from Living on a Prayer was created, now you know. And knowing is half the battle. GI JOE!

Anyway, the Banshee Rocktron is great. It was a breeze to set up, and within minutes, I had connected it to my Access Virus, and was screaming like a robot with a bad attitude. My only complain being that the vinyl tube had to be trimmed down so that it fit properly into the talkbox.

I highly recommend picking one up. Even if only to call your friends and pretend you are a robot looking for a late night booty call.

It seemed like a really good idea, but printing an anaglyph has proven to be much more difficult than originally anticipated. If someone else has a solution, I’d love to hear.

Anyway, the problem lies in the color conversion from RGB to CMYK. Standard cyan/red 3d glasses are keyed for on-screen (RGB) 3d imagery, so when you covert to CMYK, there is a color shift that makes them not function. Specifically, blues tend to be really hard to reproduce, and out of gamut for the printer we had chosen.

I found a few articles and specialty shops that had come across this in the past, but the cost of a proper calibration and conversion proved to be too high for such a short run. Also, from my research, the green / red glasses work better with print, but it’s still a bit of a crapshoot.

Our solution is to keep the direct mail ‘generic’ with a call to action to visit a website, were we’d show the 3d image on screen. Which in the long run, proves to be more cost effective since we don’t have to pay for print, and will allow us to track which of our targets actually convert.

To satiate my own curiosity, if someone has a proper solution, please let me know.

Check it out.