Web Programming

Definition
Web programming is all about communication between clients and servers over the HTTP protocol.
 The Server - This party is responsible for serving/hosting webpages.
 The Client - This party that requests pages from the Server, and displays them to the user. In most
cases, the client is a web browser.
 The User - The user utilizes the Client in order to surf the web, fill in forms, watch videos online, etc.

Web programming thus refers to creating code which runs at the either side’s specific machine (the server's or
the client's). It generally involves creating of web content, web clients/applications, and server scripting and
network security. It requires knowledge on application area, client and server scripting, and database
technology.

Developing Web Content

To come up with a website one can either:
 Hire a professional web developer
 Develop the site yourself
 Use template website solutions

Hiring a Professional Web Developer

Can be hired to develop the whole site or some parts of it e.g. graphic design or programming.
Most expensive approach though one is guaranteed quality. Care should be taken to ensure he/she is competent
by checking their portfolio first.

Developing the Site Yourself

Requires prior technical expertise on web design concepts e.g. scripting. Relatively cheaper as compared to
hiring a developer. One can make use of Content Management Systems CMSs e.g. WordPress, Joomla and
Drupal.

Use Template Website Solutions (Community Sites in a Box)

Make use of CMS functionalities. The presentation is done through templates. When using these facilities, the
web content e.g. text and images are stored in the database. These templates provide a platform to enter, edit
and delete the content.
Unlike conventional CMSs, community sites in a box provide:
 Hosting,
 Customizable functions,
 RSS feeds,
 Sponsor ad allowance,
 Unlimited web content and email, and
 Mobile compatibility.

1
2
Web Design Process
The following activities are carried out during the web design process:

1. Project Definition
Identify the reasons for the sites existence and what it’s supposed to achieve.

Interview the client to identify their strategic goals of the site, what their audience needs are, and identify key
competitors. Conduct a project brief to summarize the goals, target audience, key messages and analysis of
completion from the information gathered.

2. Project Scope
Outlines specific activities and deliverables, along with specific timelines, you will be able to clearly set
expectations for your clients.

One of the most common ways of tracking Web projects is through the use of a Gantt chart. A Gantt chart not
only outlines major activities but also the tasks associated with each activity and start and end dates. The Gantt
chart provides a visual reference for the team, showing the timeframe of each step and the dependencies
between steps.

3. Site structure
Site architecture includes the sitemap and wireframes of pages. A sitemap ensures that you’ve considered all
the key pages in the site, showing their relationship to each other and defining how the sties overall navigation
should be structured.

Wireframes provide a detailed view of the content that will appear on each page. Although they do not show
any actual design elements, the wireframes provide a guide for defining content hierarchy on the page.

4. Visual Design
The overall visual style will most likely be determined by the visual brand of the organization; the goal being to
connect the Web with all other forms of the organization’s communications. Constant feedback from the client
is vital for designers to visually convey key brand perceptual ideas within the design.

5. Site Development
With designs approved, it’s time to flesh out the design of the pages, develop new content and refine old
content, create videos, slideshows, podcasts and other media that will appear on the site as well as start to build
out the HTML and CSS of the site.

6. Testing
Testing of the site is critical as there will inevitably be issues that need to be addressed before the site goes live.
At this stage the site will need to be reviewed on multiple browsers and multiple devices to see if and where
breaks occur.

3
7. Launch
You’ve tested the site, had it reviewed and approved by the project stakeholders, and you’re ready to launch.
But once the site is launched, the project isn’t over — you should be prepared to address feedback from users
adapting to the new site. Expect to make some immediate changes to the site, such as fixing broken links,
editing copy and making adjustments.

8. Site Maintenance
Websites are living, breathing entities and need constant care and maintenance. Updating content, making
changes to the backend and fixing broken links are all in a day’s work. All of these phases are critical to the
Web design process.

Approaches to Web Programming

Web programming can either be done on the client (front end) or server (back end). These approaches are
referred to as Client-Side Programming and Server-Side Programming respectively.

1. Client-Side Programming
Client-side programming is the process of creating programs which are run on the client. Client-side
programming mostly deals with designing the user interface, with which the user interacts. In web development
the client is the browser in the user's machine. Client-side programming is mainly done in JavaScript, Flash,
etc. This code must run in a variety of browsers.

Uses
 Validating input (Validation must be done in the server. A redundant validation in the client could be
used to avoid server calls when speed is very critical.)
 Animation.
 Manipulating UI elements.
 Applying styles.
 Carry out some basic calculations are done when you don't want the page to refresh so often
 Interact with temporary storage, and local storage (through cookies).
 Send requests to the server, and retrieve data from it.
 Provide a remote service for client-side applications, such as software registration, content delivery, or remote
multi-player gaming.

Languages/Skills needed
 JavaScript
 CSS
 HTML
 Basic Graphic Design
 Ajax
 Flash
 Some 3rd party JavaScript libraries like JQuery
 UI design
 Information Design, etc.

4
5
2. Server-Side Programming
Server-side programming, is the general name for the kinds of programs which are run on the server. Server-
side programming has to do with generating dynamic content. Many of these servers are "headless". Most web
pages are not static, they search a database in order to show the user updated personalized information. This
sides interacts with the back end, like say, the database.

Uses
 Process user input (Querying the database).
 Encode the data into html.
 Insert and update information onto the database.
 Business rules and calculations.
 Interact with permanent storage (SQL, files).

Languages/Skills Needed
 PHP
 Java and JSP
 ASP
 Perl
 Python
 Ruby on Rails
 ASP.Net in C#, C++, or Visual Basic.
 HTML
 SQL
 Linux/Unix shell scripting
 OOP
 Business Rules,
 Nearly any language (C++, C#, Java). These were not designed specifically for the task, but are now often used
for application-level web services.

Web Programming Concepts

This include all the skills required in web development. These are:

a. Cascading Style Sheets (CSS)

 Browser differences
 CSS3
 Media Queries
 Selectors, Properties and Values
 W3C standards

b. HTML
 Accessibility and Usability
 Document structure
 Elements and Attributes
 HTML5

6
c. Internet Knowledge
 Analytics
 HTTP Response Codes
 Search Engine Optimization (SEO)
 Internet services e.g.
o Email and SMTP
o telnet
o FTP
o Use Netnews
 World Wide Web
 URLs
 Web Browsers
 Web Servers
 ISPs (Internet Service Providers)
 DNS (Domain Name System)

d. JavaScript
 AJAX
 Document Object Module (DOM)
 JQuery

e. Programming
 Security
 Testing

f. Web Design
 High resolution images
 Mobile and Responsive Design
 Polyfills (plugin/code that extends browser functionality)

g. XML. Web Services and RSS

 Data formats
 W3C Standards
 Web APIs

Web Programming Interfaces

1. Common Client Interface (CCI)

The Common Client Interface, or CCI(2) is a client-side API (Application Programmer Interface) that is
designed to expand the functionality of browsers without having to alter the code of the browsers themselves.
While there are many variations of CCIs (e.g. Spyglass' SDI they all provide a means for Web browsers to
communicate with other applications that reside on the client, henceforth referred to as CCI applications.
7
The CCI is a two-way communication protocol with functions that drive the browser (such as OpenURL(),
which tells the browser to load in a document at a specific URL, and Post(), which tells the browser to submit
an HTTP Post of escaped data to a specific URL) and functions that re-route output from the browser to the CCI
application (such as SendOutput(), which routes server responses with certain Content-Types to the CCI
application rather than having them viewed by the browser). These functions allow application developers to
easily integrate a wide range of functionality with the features of a Web browser.

2. Common Gateway Interface (CGI)

CGI is a means by which Web servers interface to other application programs, thus extending the services
provided by the Web server. By way of CGI scripts, users gain program access to Web servers and can extend
the capability of HTML. It should be noted that the term ‘Web server’ does not necessarily mean a physical
piece of hardware; it is a piece of software that can reside locally or on another remote machine. CGI was one
of the first practical techniques for creating dynamic content and it has made possible all sorts of new
functionality in Web pages.

CGI scripts are executable files - programs written, compiled and linked in one of a number of languages. The
most common language for a CGI program is Perl, although C, C++, Java, JavaScript are popular as well.

HTML does not have the facility to directly query a database. With CGI, this capability exists. By using CGI
scripts, a request can be sent from within HTML, and processed by the HTTP server, to query the database for
some specific information. The result can then be displayed in dynamically-built HTML code. This means that
there is no need to manually change a Web page whenever data on that page changes. All that has to be done is
to simply place the data in a database, and build a CGI script to access the data and display it dynamically.

On a theoretical level, CGI enables us to extend the capability of our server to parse (interpret) input from the
browser and return information based on user input. On a practical level, CGI is an interface that enables the
programmer to write programs that can easily communicate with the server. These programs will work with all
servers that understand the CGI protocol. A typical client / server architecture incorporating CGI is shown
below:

A Typical CGI Architecture

8
CGI programs are the code that accepts a request initiated by a HTTP browser which is interpreted by a HTTP
server, accepts passed data from the HTTP server, and takes an action predefined and described by the
programmer.

Without CGI, we would have to extend the Web server’s capabilities by modifying the server code ourselves.
This is not a good idea! Besides the need to have a low-level understanding of network programming, HTTP
and TCP/IP, it would also mean editing and recompiling the server source code. Alternatively, it would mean
writing a custom server for each task. Besides the fact that this is technically difficult and requires access to
source code, it will only work for our specific server. If at some stage, the server has to be moved to another
platform, it would entail starting all over again or porting the code to the new platform; a time-consuming and
undesirable task.

Since CGI is a ‘Common Interface’, the programmer is not restricted to any specific computer language or
platform, making it portable. Some of the alternatives, such as server APIs, are proprietary in nature and restrict
us to certain languages and platforms.