Nuts and Bolts of Web Development
Everyone knows what websites and applications are - those pages you see in your browser, with pictures, videos and text! But what goes into making one of those websites?
If you ever had to get your business a website you undoubtedly were faced with an ocean of new, technical terminology, and people who talked it like discussing lunch options.
This article attempts to explain some of that terminology and provides an overview of what goes into making a website, a context, if you will, of how all these pieces fit together. Hopefully, this allows you to feel comfortable in this technical area and eventually get the site you want.
So, what’s a website made of?
The simple answer is: files - a lot of them, telling the browser (the program that you use to “browse” or view websites) how and what to present to you. Let’s take a closer look.
The first thing that happens is you type in a domain name or click on a link in your browser. That sends a request to a server that hosts your website. A server is just a computer whose main purpose is to “serve” files or content.
Suppose you typed in example.com/contacts.html - the server finds a file called contacts.html and processes it. This files contains a script that collects the following:
- Header of the page (the top part of the page), and adds a mark invisible to the user to a tab that says Contacts. Later that mark is interpreted by your browser and a proper styling is applied to turn the tab red (or another color to indicate an active tab).
- Sidebar (the headlines to the right) - at this step the script queries a database, the storage location, and finds the latest headlines or other content.
- Footer (the lower part of the page, shared across all of the pages) - this is mostly just text, including copyright information.
- Main content - this is of course is the most important part. In this case the content consists of an address and a set of form fields. Often the main content is a result of several steps of processing: taking some existing input and running it through a set of rules, known as business logic.
The script then assembles this all into a single document that gets sent to you. That document contains markup in a language called HTML (HyperText Markup Language) - you’ve probably heard about this.
This HTML document often requests your browser to load additional files - usually a file containing styles (colors and positioning of elements: the active tab is painted red, latest headlines are of certain size and color, etc.), and a file containing a script that provides additional functionality (for instance, the script validates the form fields before you submit the form, checking for missing information and prompting you for it).
The styles are called CSS (Cascading Style Sheets), and that script file contains a script in a language called Javascript (which, if you have heard of the programming language Java, has no connection to it).
Generally speaking, these two steps - one, generating the page on the server, and two, displaying it on the browser - are referred to as server-side and client-side. So when someone mentions client-side then we know now that this refers to HTML, CSS and Javascript, and what happens in our browser; server-side refers to the part that runs on the server.
We haven’t mentioned the names of some of the technologies used on the server-side. Usually there are two technologies at play (not counting the operating system):
- a programming language such as PHP, Java, C#, Ruby, etc..there are a lot of languages.
- a database: MySql, Oracle, MSSQL, PostgreSQL etc.
We here at Claybend, st louis web development company, like PHP, C# and Java.
One important element here is to distinguish between open source and proprietary languages and databases. Proprietary anything marries you to the vendor who then essentially becomes a monopoly as far as your business is concerned which can be a curse (no escape from price increases) or a blessing (better integration is often cited as a benefit).
From the above list, open source languages are PHP, Java and Ruby; proprietary language is C# by Microsoft (it’s actually possible to run C# outside of Microsoft software stack); open source databases are MySQL and PostgreSQL and proprietary databases are Oracle and Microsoft SQL Server.
So there you have it - internal workings of a website. You request a file then a script on the server side crunches some numbers and pulls together various bits and files and sends the resulting document to the browser. The browser then loads additional files referenced by the main document, and with the help of these instructions renders the page as you see it.
Hopefully this paints a general picture of how all these different pieces relate to each other. Of course, this is just the tip of the iceberg; technology keeps evolving all the time - unlike an iceberg :)
If you have any questions, please let us know.
