Sunday, 15 January 2012

Web Application Building Blocks

These are the building blocks for a typical web application



Larger version

This graphic is my attempt at demonstrating the relationship between the server and the client.

The server uses server side scripting to generate and deliver a html page back to the client browser.

Client side glossary

In web terms, the client is usually a web browser such as Chrome, Firefox, IE. Chrome is fast becoming the most popular browser, this needs to be taken into consideration during design.

AJAX (Asynchronous JavaScript and XML)
Usually, the browser will send a request to the server and the server sends back a html file. To cut down on traffic and to make things a little speedier, developers can use Ajax. This is a snippet of javascript code that sends a request to the server which returns a snippet of data, then a part of the page is modified without having to reload the page.

A typical example is when using a form - for example a list of cars - rather than sending all of the data about all models, we can use a form with a drop down list of car makes - then when a make is selected, use ajax to build a drop down list of models for that make. Have a look at http://www.autotrader.co.uk there isn't a list of models until you select a make. AJAX tutorial.

CSS (Cascading Style Sheets)
This defines the style for elements within a html page. Such as font, size, colour, borders etc. The style can be defined within an element, within a html page or more commonly, in a separate file with a css extension. This allows a website to use consistent styling, which looks far more professional. Some html elements have been introduced specifically for use with styling such as <DIV> and <SPAN>. Typically, css is part of a web template or theme.  CSS tutorial

DHTML (Dynamic HTML)
This isn't a language, it is simply a term used to describe HTML content that can change dynamically using a combination of HTML, JavaScript, HTML DOM and CSS. DHTML tutorial

HTML (Hypertext Markup Language)
HTML is the language of the web. HTML is a set of tags that are used to define the content, layout and the formatting of the web document. Web browsers use the HTML tags to define how to display the text. HTML page and HTML document are just different terms for the same thing. HTML tutorial

HTML DOM (HTML Document Object Model)
DOM represents a HTML document as a tree structure with properties and methods. This allows JavaScript to manipulate HTML documents on the client side without having to go back to the server HTML DOM tutorial

JavaScript (client side scripting)
The most popular client side scripting language, originally developed by Netscape. Not to be confused with Java - these are separate languages.
JavaScript tutorial.

There is also JScript and VBScript, both developed by Microsoft for client side scripting in IE. But I strongly suggested learning JavaScript because it is so widely used.

JQuery
There are also javascript libraries that have been developed to do most of the common functions and routines. The most popular being JQuery but there is also Yui developed by Yahoo.

JSON 
JSON is an alternative to XML for exchanging data using JavaScript, usually with Ajax.


Client side objects / plugins

Basically, a browser plugin or object is used when the capabilities of the browser have been reached. ie. it doesn't do what you want it to do. Only use a plugin when no other option is available. Some typical plugins are:

  • Flash - probably the most common plugin used - great for creating games, animation and playing videos. But please don't use it for website design. In the future, it might be replaced by HTML5.
  • ActiveX - developed by Microsoft for Internet Explorer. Avoid it simply because it only works in IE.
  • Adobe Air - developed by Adobe for creating desktop applications.
  • QuickTime - multimedia player developed by Apple
  • Shockwave - multimedia player developed by Adobe
  • Java Applets - Java programs that can be downloaded and run on the desktop. Quite common for enterprise applications.


Server side glossary

Web Server
A server is a computer that delivers services or information to other computers. In web terms, a web server delivers content to web browsers. About 65% of the web uses Apache, which is open source. Microsoft have IIS (Internet Information Server) which is used by about 14% of the web.

Server side scripting
These are programs that reside and are run by a web server to generate web pages that are readable by the client. They typically use a combination of HTML code and a scripting language surrounded by tags. Please see my blog about web development for a better description.

The most popular server side scripting languages are:




Database server
All that data needs to be stored somewhere. Typically a database server is used such as MySql, Postgresql, Oracle, SQL Server, etc. For development, you will need to learn SQL - this is a language used to update and retrieve data.




Frameworks
Using a framework can save a developer a LOT of time. They basically have all of the functions and routines required for a typical application. Meaning the developer can concentrate on the nitty gritty stuff. There are application frameworks for each scripting language as well as frameworks for common applications such as content management, eCommerce, eLearning, etc.



XML (eXtensible Markup Language)

XML is used for data transfer. Typically to/from a remote web service. XML tutorial. 

Most server side scripting languages will have support for XML. 


See also

Conclusion
And that concludes the introduction to web application development. Hope it has been helpful.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)