When you talk about web design and development, you typically think of design and development in 5 different layers, which I dubbed layers of love. These layers are the Database, Server-Side logic, HTML, CSS, and JavaScript. These three layers are powerful, if they are independent. If they mix... it gets messy. Let's go into this idea further.
What do these layers mean?
Database
The database is the simplest form of any sort of data. Although data is organized in the Database, it's not very visually appealing. It contains tables and other data logic for transactions of data to take place. For example, say you are running an online product sale site (e-commerce). You will probably have an Orders and Products table. When you key up the site, you don't see the database. What goes on in the website is that the site "talks" to the database. That brings us to the next layer...
Server-Side Logic
Server-Side logic is basically like a desktop application. Think about Microsoft Word. You press the file menu, and there is some code that executes under the covers that you don't see. Website server-side logic does this as well.
Back to our example, you want to place an order. So you add a few products to your order and checkout. Once you do that in your browser, the server-side logic says, "hey database, we have a new order with x, y, and z products".
HTML
You are probably most familiar with the concept of HTML. HTML is basically what your browser gets (in most cases, this is something generated by the server-side logic). So when you queue up the checkout page in our example, the HTML that is pushed out from the server and to your browser. It basically contains text and markup for the next layer to do it's job.
CSS
Ah, CSS. CSS is what makes your site pretty. It contains color definitions, text formatting, layout, and images to make everything flow. Any modern website, Facebook, MySpace, Microsoft.com, Apple.com, for example, use CSS heavily. In a corporate setting (or a large production site) there is typically a designer whose job is to simply work with CSS and code out the design.
JavaScript
You have heard me talk about JavaScript before on this blog. Ajax runs off JavaScript. Go take a look at a site like DotNetKicks.com or Digg and you will probably see some Ajax and other JavaScript techniques. It basically makes your site cool! If JavaScript is applied appropriately, it can cause a wonderful user experience. Even corporate sites can use JavaScript. It DOES have value!
Layers Declassified
These layers all used together will be a great combo for any site. EVERY modern website, "Web 2.0", site used at least 3 of these 5 layers (most use all 5).
These layers don't really encompass the website completely. Things like image files and web hosting settings are important to keep in mind too.
Something you have to make sure you don't do is MIX the layers. CSS inside JavaScript is NOT a good idea. I sometimes break this rule and put some JavaScript inside of the Server-Side logic, but that isn't as bad as putting CSS inside HTML. Moral of the story is that you should try not to mix things... they will work better if you don't put any of these layers inside of the other layers. This doesn't mean that the layers can't interact, they just shouldn't build each other.
We were in transition mode over the summer. We have added JavaScript to our extensible repertoire of website techniques. If you would have talked to us a year ago, we wouldn't have even known Server-side techniques or, for that matter, the Database techniques that we know now. We recently came across some techniques to increase our CSS design productivity as well. Constantly learning is what EagleEnvision.NeT is all about!
The moral of this blog post is that there are 5 layers that are separate and not equal. Knowing each level to a high level is a true test of a web design/developer's skills. Knowing just one or two of these layers isn't going to work in an age of the rapid growth of the Internet. That's why they are the layers of love... if you know them, they treat the designer/developer with love :)