Skip Navigation
Madison, Wisconsin
Powderkeg Web Design
July 1, 2014

Understanding the Areas of Development

James
James
Understanding the Areas of Development

Many people seem to think what we do is some kind of magic. It isn’t, sorry. In order to understand what we do at Powderkeg I thought I would briefly describe the major areas of development. In the world of web development there are five major areas of development each with their own language. These areas are: Structure, Styling, Server-side, Client-side, and the Database.

Structure

The structure of a website is almost always developed using HyperText Markup Language or HTML. HTML defines the layout of a page. Each box, column, table, or anything else you see on a website is almost certainly the product of HTML. HTML is not a dynamic language and does not generally respond to the user. Instead, what HTML does is to define the physical elements of a page. Although HTML can do more than this – including defining the title, description, author, and other meta data to search engines – for the most part it simply acts as the foundation for all of the other parts of web development to act on.

Styling

The styling of a website is almost always done using a language called Cascading Style Sheets (CSS). CSS takes the basic elements of a site, which is defined by HTML, and changes the appearance of those elements. CSS styling includes: background and text coloring, font size and styling, spacing and positioning of elements, and so much more. Without CSS an HTML page would look like a long list of black text on a white background with images one on top of the other. You may have seen this before if for some reason a CSS file did not load correctly. Without CSS the web would be an ugly and unfriendly place for the average internet user.

Server-side

The server-side language we use at Powderkeg is called PHP which stands for “PHP: Hypertext Preprocessor” (originally it stood for Personal Home Page). PHP is currently the most heavily used server-side programming language in the world. PHP is easy to use, easy to learn, and has a huge community of developers. We also use something called WordPress which is a PHP framework for developing websites that allows us to reduce our development time and reuse a lot of our code across different sites. WordPress also allows us to simply and quickly install large pieces of code called “Plugins” which help us create large and complex sites as quickly and professionally as possible.

Server-side languages do just what it sounds like, they are the language that resides on the server and responds to the requests of the user. When a user visits a website they send a request to the site’s server. The server knows how to respond because of the server-side code. For instance, when a user fills out a form on a website the information is sent to the server and then the server code (PHP) responds to that information.

Client-side

The only client-side language worth discussing is known as Javascript. This is not to be confused with the Java language, which can also be used on the web. Javascript is a client-side language that means it runs on the client’s computer. If you have ever been to a site which responded instantly to your input, without refreshing the page, you are seeing Javascript in action. An example of Javascript in action is the form validation seen on many websites. If you have ever been typing something out in a form and received a message while you are typing like, “Error: you need 128 more characters in your password” then you are witnessing Javascript in action.

Database

The database(s) behind a website can range widely in their use and functionality. Some sites might not have any databases and some sites might have dozens…or more. It is hard to narrowly define what a database is used for as they can be used for many things. Perhaps the most common use of a database is to track the users of a site. If you have ever signed up for a website your information was stored on a database. Here at Powderkeg we mostly use MySQL for our databases. MySQL is a free and widely used database. Database development is split into 2 separate parts. The actual data, which is stored in files on the server, and the database language, which is used to communicate with the database. The language used to communicate with MySQL (the database) is called Structured Query Language or SQL.

Bringing it all together

So let’s try to bring all of these pieces together in a common example. Let’s say you go to your favorite site and you want to login. You will look for the “Login” button ( which is an HTML element that has been styled using CSS ). You then fill out a form ( also an HTML element styled with CSS ) which is validated using Javascript. When you submit your login form the server-side language ( PHP in our case ) sends a SQL “query” to the database. If the query was successful, or not, the database returns that information to the server. The server will then usually send information back to your computer informing you or the result of the operation.

Here is a small diagram that might help in understanding the parts of the web development. diagram

Hopefully this helps you understand more about what we do here at Powderkeg…but feel free to continue believing it is magic.