Released: 12/27/2004

Web Development Structure- An Overview


Goal of article:

Provide a basic overview of the structure and technologies required for the development and implementation of  dynamic (user interfaces and content based) websites. This article was written with the reader in mind that has little to no knowledge of website software development or the environments required for implementation.

What this article is NOT:
  • An all inclusive investigation and explanation of present web based technologies.  This information is in no way all encompassing.  In fact, there are MANY other languages and technologies available to accomplish similar goals.  As well, the explanations here are only a shallow look at the components required to develop a website or web application.
  • Using text book definitions or explanations.  Definitions are provided as they are used for the article.  In some cases, a text book definition has been provided but many are relative to how they are being used in the article.

Terminology:
  • browser - software required to view or interface with a website.
    client side scripting language - script or code that runs in the browser.
  • CSS (cascading style sheets) - An extension to HTML to allow styles, e.g. color, font, size to be specified for certain elements of a hypertext document. Style information can be included in-line in the HTML file or in a separate CSS file (which can then be easily shared by multiple HTML files). Multiple levels of CSS can be used to allow selective overriding of styles.
  • developer - one who is writing script or code to develop a website, required interfaces to that website, backend (middleware based) web applications that process requests by a user or information from other resources such as the server itself.
  • dynamic content - content (information) that changes based on input from a source such as a user after website development has been completed.  Often this information is stored in database for later use. This is in opposition to a "static" website, where after development, the content remains unchanged indefinitely.  
  • dynamic user interfaces - website appearances (position, color, font, etc) that change based on interaction from the user.
  • HTML - hypertext markup language - this is the language (made up of tags) that allows for the primary structure or layout of a webpage to be developed.
  • JavaScript - Primarily used as a client side language, meaning it is tightly integrated with the browser. JavaScript allows for greater control over the layout of page elements and the ability to have web pages which change and interact with the user without having to communicate with the server.
  • PHP Hypertext Preprocessor, Cold Fusion, VBScript are all server-side scripting languages that allow for mediation between users  of a website (or other sources) or web application and databases or other pages within a website. There are other uses (many others) however this is the basic way in which they are used. Software developed in these languages are often referred to as "middleware".
  • script or code - sequence of commands used to constitute a web page or application. Different code for different languages.
  • server - physical location (hardware / software) where the website or web application is being housed.
  • server side scripting language - script or code that runs in an environment on the server.
  • SQL (server query language) - Language used to communicate with a database (i.e. basic language constructs for defining and manipulating tables of data in a database). SQL is capable of much more however this is the primary way it is used.

Overview:

There are many facets to creating a website that not only provides an efficient avenue for information exchange but is easy to navigate and including among other things, layout, color, sound, content, functionality and maintainability.  

Writing code sequences to accomplish all of this for dynamic based websites requires an understanding of the languages and of how these overlap or are integrated.  That is, one must have an understanding of how they "communicate" with each other and their respective environments to accomplish the goals of the site.

From a development point of view, the structure of a dynamic website can be broken up into three primary areas: client side scripting, server side scripting, and SQL / databases.

Client Side Scripting can include languages such as JavaScript, HTML, and CSS (cascade style sheets).  As well, other technologies such as flash can be used to provide more flexible GUI's (graphic user interfaces).  Furthermore, keep in mind that all of these technologies are often integrated into a final product with HTML at the foundation of the website.  HTML is a tag based language that allows a developer to create the basic structure of a webpage.  The others aforementioned are used with or embedded into HTML.  All of which primarily run in the browser.

It is here at the front that dynamic user interfaces are developed.  Interfacing with a user of a website efficiently is imperative to all online experiences.  Anyone can put a static website page together.  However, much practice and knowledge is required to learn the ins and outs of creating efficient dynamic web pages that maximize the technologies used and (as a result) enhances the users online experience.

Among the many considerations are navigation, layout, look (is the site representative) , usability, code efficiency (how well does the code execute), proper commenting of code, and code / webpage layout structure.

Next, at the root of providing a website with dynamic content is the ability to interact with a database or other web pages.  Behind the scenes, Server Side Scripting languages such as PHP, Cold Fusion, VBScript (which run in environments on the server) provide developers with the tools to interface with databases and other web pages.  If client side scripting is to be considered as the hands, then server side scripting should be considered the part of the brain that processes the information and sends it to be stored or updated.  This is a HIGHLY simplified explanation of the VAST number of uses for server side scripting, however, to go any further would be to reach outside of the primary goal of this article.

Among the many considerations when using server side scripting are code efficiency (how well does the code execute), proper commenting of code, and code / webpage layout structure.

Finally, we come to SQL / databases.  This could be considered the portion of the brain that stores information for reference or later use.  Server side scripting often includes SQL commands when querying databases.  This is not to say that SQL can not be placed as stand alone code within the database structure.  However, often SQL is used within the server side code and is used with it to properly access and manipulate data.  This is essential to providing content management to administrators (for example) of a site.  There are many SQL commands available for use.  However, primarily there are four types of interactions that happen:  inserting data into the database, updating existing information, deleting information from the database, and querying information from the database.

Basic view:
user interface (client side)-
data processing and flow control of data (server side)-
data storage (database)

The following is an simple example that goes over the three areas and demonstrates where different types of code are required:

Let's say that we have a requirement to gather information from a user of the website.

  • HTML can be used to provide the form fields and necessary layout of the web page.
  • JavaScript can be used to make sure that the fields are filled out correctly (this is called form validation).
  • CSS with JavaScript and HTML can be used together to spruce up the page and interactivity during the submit process.
  • Cold Fusion can be used to receive the information and manipulate it into a form acceptable by the database.
  • SQL will be used to insert the information into the database and then send it back to the user to show what he/she has just filled out.
  • Cold Fusion can then be used to retrieve this information and send it to the browser.
  • HTML will be used to provide the environment for the data (being queried by cold fusion) to be displayed.

This of course is an extremely simple example.  Often there are MANY other events happening simultaneously or sequentially on any given website.

Below are some additional sources for information about web design / development:

http://www.w3schools.com/site/site_intro.asp

http://www.htmlgoodies.com/nontechintro/

Top of Page

Valid HTML 4.01!

Views: 1323

Valid CSS!