Web Stack Series Part 6: Cascading Style Sheets

Part 6 of our journey through the Web Stack brings us into the design realm. In the world of web design, HTML is the cake and Cascading Style Sheets, or CSS, is the decorative icing on top. CSS is responsible for making your web site look delicious.

Cascading Style Sheets didn’t get a lot of attention until about 5 years ago, when web standardistas such as Jeffery Zeldman and Eric Meyer started encouraging designers and developers to separate stylistic elements from semantic, structural elements. Doing so makes web sites consumable by a wide array of different applications.

CSS is a way of separating the look and feel of your website from the underling function of the data an content. This gives you the ability to apply several different style sheets to the same HTML to achieve wildly different results. For example, the following 5 links all point to the same HTML document, but each one uses a different style sheet to drastically change the appearance of that HTML

1. http://www.csszengarden.com/?cssfile=201/201.css
2. http://www.csszengarden.com/?cssfile=199/199.css
3. http://www.csszengarden.com/?cssfile=194/194.css
4. http://www.csszengarden.com/?cssfile=185/185.css
5. http://www.csszengarden.com/?cssfile=189/189.css

Here is the same HTML document without any style sheets: CSS Zen Garden Sample HTML

Quite a difference! The possibilities that this flexibility affords are endless. You could create a style sheet that renders your web site one way for regular web browsers, and another style sheet that renders your web site in a more compact view for mobile phones. You could even provide different designs for different types of users - and you can do this without ever touching the underlying content or HTML.

I want to illustrate this concept with an example. Here is a small snippet of HTML:

<h1>Hello World!</h1>
<p>Nice to meet you!</p>

Now, let’s write some CSS to add some pizazz. This is what a typical style sheet rule might look like:

h1 { color: red; font-size: 32px; }
p { font-weight: bold; }

Hello World!

Nice to meet you!

Here, I am setting the size and color of all text inside of h1 tags. I am also making all paragraph text bold. Now let’s say I want to change the style of all the headings across my entire site. All that needs to be changed is the single CSS rule.

h1 { color: blue; font-size: 28px; }

Hello World!

Nice to meet you!

Now, on every page of my web site, h1 tags will appear blue and in a slightly smaller font size. Notice that I did not change the underlying structure of the HTML. This illustrates the flexibility that separating structure and style provide to us.

CSS is still maturing and being improved. The W3C issues specifications that browser makers use when creating their software. The specifications layout rules for rendering different elements of CSS. Despite these specifications, however, many browsers still render the same rules differently, creating big headaches for designers.

It is not uncommon for larger web design shops to have a person who is dedicated entirely to creating HTML and CSS, although this is a luxury that most can’t afford. In most situations, it is the graphic designer who will be responsible for creating the CSS for your website. Make sure that the person designing your website is knowledgeable regarding the use of style sheets. A good way to test your site is to view it without the CSS file. Is the site still usable? If so, then your designer has done a good job.

In the next part of this series I will explain graphic design and how it can be integrated with CSS to create spectacular web sites. Stay tuned!

Comments

Web Stack Series Part 4: Business Logic Programming

Today we continue our look at the web stack by explaining Business Logic Programming.

Web sites are highly complex organisms. There are hundreds of processes and actions that take place behind the scenes every time you access a single web page. Harmoniously coordinating these actions and the components responsible for making a basic web site perform flawlessly is not an easy task. At the heart of all this activity is server-side scripting, a type of “web site glue”, and it is the layer of the web stack where business logic and interactivity are added to your web site.

Server-Side Scripting

So what is server-side scripting? Server-side scripting is a process that applies business logic to data from different sources (databases, user input, etc.) in order to create output that fulfills a user’s request. In short, it is a programming language that runs on the physical server. Developers encode your business logic into scripts (literally, sets of programming commands) using this language. When a user makes a request, the data is run through these scripts and transformed based on your business logic. Once transformed, the data is wrapped with HTML and graphics and outputted to the user. Here are the steps:

1. User makes request
2. Webserver Software initializes server-side scripts
3. Scripts fetch appropriate data from database based on user’s input
4. Scripts apply business logic to data from database
5. HTML web page is generated by scripts and returned to the user

Let’s use an example to clarify. Imagine that you own a company that sells widgets online. These widgets have a number of configurations that are specified by your customers. Each unique configuration will be priced differently based on the options chosen by the user. Additionally, your widgets are made from a raw material that is only available seasonally, so you need to adjust your prices based on the season.

Here are three basic business rules:

• Small widget base price is $15.00
• Large widget base price is $30.00
• If the client orders in the Fall or Winter (defined as October through March), an additional $10.00 fee is added to the base price

These rules define your business logic. Your developer will take these rules and translate them into server-side scripts so that when an order is placed, the correct amount is charged. Here is are some sample orders with the rules applied:

1. Small Widget ordered in June
   Price: $15 + $0 = $15 (Small widget, no seasonal fee)
2. Small Widget ordered in December
   Price: $15 + $10 = $25 (Small widget, seasonal fee)
3. Large Widget ordered in August
   Price: $30 + $0 = $30 (Large widget, no seasonal fee)

So, when a users requests to buy widget #1, your server-side scripts grab the appropriate prices from the database, add them up accordingly, and generate a web page displaying the price.

Types of Languages

There are many options for server-side scripting languages. Each language has advantages and disadvantages, but any language will sufficiently handle your needs. As a result, it is usually best to let your programmer use the language that he or she is most comfortable with. Here are the most popular server-side scripting languages:

1. PHP - Common open source solution based on including code in its own language into an HTML page.
2. Microsoft ASP.NET - A set of web application development technologies marketed by Microsoft
3. JSP - Java-based system for embedding Java-related code in HTML pages.
4. Ruby on Rails - Open source framework written in the Ruby programming language.
5. Adobe Cold Fusion - Cross platform tag-based commercial server side scripting system.

The business logic layer of the web stack is where everything comes together. Information from disparate sources is combined and transformed into something useful and valuable to the end user. It is important that you find a good developer to handle this part of your web site, as it will ultimately determine the quality of your site.

Our journey through the layers of the web stack is now moving away from the server side of things and into the realm of the end user. Make sure to subscribe so that you don’t miss the next installment!

Comments

Web Stack Series Part 3: The Database

Parts 1 and 2 of our look at the Web Stack introduced us to the Physical Server and the Webserver Software. Part 3 of the series brings us to the second piece of software installed on the physical server: the Database.

Dynamic, database-driven web sites have become the gold standard on the Web. Sites are updated in real time, user-generated content fills ever page, custom-tailored data targets specific users, and data is changed on the fly - all thanks to the database. It is rare to find a website that doesn’t make use of a database in some way or another. The database has become the brain of the modern web site.

So what is a database? Let’s check in with our old pal Wikipedia for a quick and dirty definition:

In computing, a database can be defined as a structured collection of records or data that is stored in a computer so that a program can consult it to answer queries.

Though this may sound simplistic, the definition is spot on. A database is nothing more than a bunch of data (usually plain text) stored and indexed in a structured manner. This allows for specific data to be found quickly and painlessly. Perhaps an analogy is in order: A library is like a database - it is a central repository of books stored in a structured system (Dewey Decimal). This system makes it easy for a person to quickly find a specific book.

The larger and more complex sites on the internet typically store all of their content in a database and retrieve the appropriate data when necessary. The web page that is requested by the user is said to “query” the database for the appropriate data to be displayed. Databases can be queried using a special language called Structured Query Language or “SQL” (pronounced like “sequel”). SQL is simply a special type of language that makes it easy and intuitive to extract data from a database. There are people who spend their entire careers mastering SQL, although you can probably teach yourself the basics of SQL in about a month or two.

Here are a couple of things you should know about database systems:

• Just like a webserver, the database system is just another piece of software
  Database server software is installed on the physical server. Once installed, the database is turned on and left to run indefinitely in the background
• Database systems range in price from free (MySQL, PostgreSQL) to really, really, really expensive (Oracle, Microsoft SQL Server)
  The majority of small to medium sites on the Web today are run on MySQL. This is a natural consequence of it being free and easy to use. If you were to ask my opinion, I would always recommend MySQL, I love it.
• Database optimization is absolutely crucial if you want your web site to scale gracefully and handle high traffic loads
  Don’t be bashful about spending some money on a good developer who understands how to set up a database system properly. When your site explodes in popularity and handles all of the traffic without a hiccup, you will be thankful you did.

In the next part of this series, we will talk about the glue that connects the user, the webserver and the database all together. Make sure you are subscribed so you don’t miss out!

Comments

Web Stack Series Part 2: Webserver Software

Part 2 of The Web Stack Explained leads us to the webserver software. Webserver software basically serves as the interface for files stored on the server. Let’s start things of with a good, but rather stuffy definition of the word “webserver” from Wikipedia:

A computer program that is responsible for accepting HTTP requests from clients, which are known as Web browsers, and serving them HTTP responses along with optional data contents, which usually are Web pages such as HTML documents and linked objects (images, etc.).

Now, let’s break this down piece by piece:

• A computer program
  A webserver is a computer program, just the same as WinZip and Solitaire. Webservers can be downloaded and installed just like anything else you place on your computer. They are responsible for serving requests for websites, hence the term: web - server. Webserver software is usually run differently than the programs you are familiar with. Since your server can’t predict when someone wants to view your web page, the webserver software must be constantly listening for requests. As a result, the webserver software is started up and then left to quietly run in the background indefinitely. When a request is received, the webserver processes the request, fetches the pages and files that were requested, and sends them all back to the person doing the requesting.
• HTTP Requests
  HTTP stands for HyperText Transfer Protocol - but you don’t care. And quite frankly you don’t need to care. Just think of HTTP as the ether that lets computers talk to each other over the Web. Requests are messages sent by users to your webserver. Whenever someone types a URL in their web browser, they are making a request to the webserver associated with that URL. The webserver catches this request and then acts accordingly.
• Clients, or Web Browsers
  If “server” refers to webservers, then “client” refers to web browsers. Web browsers are the software programs used to surf the web. Microsoft Internet Explorer and Mozilla Firefox are the two most popular these days. Web browsers are translators: they translate human requests for web sites into requests that webserver software can process. When the webserver processes the request and sends back the appropriate information, the user’s web browser displays it in all its glory.
• HTTP Responses
  HTTP responses are what webservers send back to web browsers after a request is made. These responses typically contain the web pages, images and files that were requested by the user.
• Web pages
  The final pieces of the puzzle. Web pages are the files stored on the server that users request. These are typically text files full of HTML and other markup. Your web browser is designed to translate these files into the correctly formatted web pages that you view.

There are several brands of webserver software available, but the two most popular are Apache HTTP Server and Microsoft Internet Information Services server. Although the primary responsibility of the webserver software is to fetch and return the appropriate website files, there is another function: running other software required by the files themselves. This other software is typically a script engine, and we will talk about that in our next Web Stack Series installment!

Comments

Web Stack Series Part 1: The Physical Server

This is the first installment of our first series: The Web Stack Explained. Today we are going to talk about the first level of the stack: the physical server.

Techies love talking about servers and networking infrastructure. Let me tell you a little secret: a server is just a computer; no more, no less. In fact, the computer you are using right now is just as well suited to be a server as any “real” server. Servers are just beefed up computers that are hooked into really fast and reliable networks. Plunk your computer on the same network and install the appropriate software and no one would know the difference. HAL 9000 couldn’t hold a candle to the speed demon sitting under your desk.

By definition, a server (or server computer) is a type of computer that is built specifically for running applications and software that require large amounts of processing power in high-availability environments. What does that mean? Servers are computers on steroids; they are really fast and really reliable. Head on over to Wikipedia for a more detailed definition of a server.

Web servers are basically responsible for two things: storing website files and running the webserver software. Often, large websites have lots of files (think of all those photos that Flickr stores) and must process millions of requests per minute. As a consequence, the server must have lots of storage space and processing power. In many cases, several servers will be linked together to form a “cluster” to accommodate these large storage and processing requirements. Clusters are essentially a bunch computers working together as if they were one; they simply distribute the task of storing and processing websites across themselves to keep up with the workload. We’ll go over the webserver software in more detail later, but for now you just need to know that it is an application running on the server that handles requests for the website.

Although all of the individual components inside of a server are similar to what you can find in your desktop computer, the server hardware is typically more powerful, or is installed in greater quantities. For example, these days you can expect the average desktop computer to have anywhere from 512 megabytes to 2 gigabytes of memory. In comparison, server computers usually have more than 4 gigabytes of memory installed. Additionally, servers typically have faster processors than standard desktop computers.

When your users request a page from your website, the server is what gets the party started. The webserver software (which will talk in more detail about later) running on the server computer receives the request, processes the request, and then returns the appropriate files, usually in the form of an HTML web page. Think of the server as the permanent home of your website files. It’s that simple!

So how do you get a server? For most, the easiest route is using a third party service called a web host. Web hosting is a topic all in itself, but basically a web host is a way of leasing space on mega-servers instead of buying and maintaining your own server. It’s really easy to find cheap (but quality) web hosting these days, but I’ll discuss that in a later post.

In the next part of this series, I will be talking specifically about the webserver software that processes user requests. Stay tuned!

Comments

Solo Signal Series: The Web Stack Explained

Websites, at their core, are very simple things: a single file of plain text and markup that tells the user’s browser what to display. Sometimes there are hyperlinks, images and forms included on those pages, but that is typically as complex as the majority of websites ever get. So why does it cost so much to have a quality website developed? What takes place behind the curtains of a website?

As a visitor to a web page, you only see the final output of a series of tasks that must be completed to generate that page. I refer to the components that are responsible for executing these tasks as the Web Stack. The web stack contains approximately 8 levels, each essential for storing, generating and delivering any standard web page to the end user. Over the next two weeks we will go into detail on each of these pieces of the stack and explain how they relate to the overall web development process.

At the end of this series you will have an understanding of all the back-end processes involved in delivering web content to your users. I will also provide a graphic that visually represents the stack and shows exactly how all the pieces link to each other. This knowledge will be invaluable for you as you take on the task of architecting your own website (whether your build it yourself or outsource the work).

The Web Stack

1. Physical Server and Infrastructure
2. Webserver Software
3. Database Management System
4. Business Logic Programming
5. HTML and Markup
6. Cascading Style Sheets
7. Graphic Design
8. Client-side Scripting

Comments

Get Subscribed!

• Most Popular Posts

  • Web Stack Series Part 4: Business Logic Programming
  • Web Stack Series Part 6: Cascading Style Sheets
  • Solo Signal Series: The Web Stack Explained
  • Web Stack Series Part 3: The Database
  • Web Stack Series Part 2: Webserver Software
  • Web Stack Series Part 1: The Physical Server

• Recent Comments

  • merchant services: I would add the the best way to ensure you are fully compliant, secure, with 100% uptime is to...
  • UK SEO Services: Thats a great explanation for the need to correctly use anchor-text. Many thanks!
  • Hypotheek: nice article. I can use this for my thesis! thank you
  • SEO Studio Melbourne: I just found this article (a bit late, huh?) but I loved it. Very nice and clear.
  • John: Very useful tips - there are a few marketplaces for freelancers in the UK too. Check out...

• Categories

  • Accessibility (3)
  • Copywriting (1)
  • Database (1)
  • Design (2)
  • E-Commerce (2)
  • Education (1)
  • General (10)
  • Reference (1)
  • Search Engine Optimization (1)
  • Security (1)
  • Technology (5)
  • Tips (3)
  • Web Site Development (7)

• Archives

  • August 2007
  • July 2007
  • June 2007

• 
  

• About Solo Signal

  Solo Signal is a blog for anyone interested in learning more about web site development as it relates to business through simple, easy-to-understand articles. We hope to provide business-minded individuals with the information, tools and understanding needed to successfully leverage the Web for their benefit.

  Read more »

• Tags

  accessibility acronyms apache bids budget business logic content management cost credit cards CSS databases definitions design ecommerce elance elliott cross encryption freelancing hardware html http integration links low cost mark up marketplace microsoft mysql navigation open source optimization oracle outsourcing page rank patterns price programming projects reference rent a coder rss scalability security seo server server side scripting shopping cart software structure style sheets taxes tips usability value w3c web browser web design web development web hosting web site web stack web standards webserver xhtml

• Add Feed To...

  

• Recent Readers