Chapter 1: Introduction

1.1 Terms used in relation to web development

1.1.1 The World Wide Web (WWW)

World wide web is a huge collection of globally distributed information and data that can be
accessed through the internet using the HTTP protocol. This information is in the form of
documents, images, videos, and sound files that are interlinked. The links linking these resources
are called hyperlinks. World Wide Web (WWW) refers to one resource available in the internet.
It is a collection of interlinked documents called Web pages. The WWW has made the internet
the most important communication medium of our days.

A group of Web pages belonging to one individual or company is called a Web site. Web pages
are stored on computers (called Web servers) that are continually connected to the Internet; they
can be accessed at any time through a web browser by anyone with a computer (or other Web-
enabled device) and an Internet connection. Thanks to the intuitively usable, graphical interface
of the WWW browser – the WWW provides simple access to its information to everybody. A
wide variety of information is available via Web pages, such as company and product
information, government forms and publications, maps, telephone directories, news, weather,
sports results, airline schedules, and much, much more. You can also use Web pages to shop,
bank, trade stock, and perform other types of online financial transactions; access social
networks like Facebook and MySpace; and listen to music, play games, watch television shows,
and perform other entertainment-oriented activities.

The Web was created around 1990 by the Englishman Tim Berners-Lee working at CERN in
Geneva, Switzerland.

1.1.2 Internet

It is a global network of networks through which computers communicate

It was envisioned by its inventors to serve as
World-wide broadcasting medium
 Mechanism for information dissemination
Medium for global collaboration
History of the Internet

Reading Assignment:

Read and write short notes on the history of the Internet.

Hosts

A host is a computing device connected to the Internet (PC, Internet appliance,

mobile phone)
It sends and receives packets
Every host constantly monitors the network for packets

Internet Protocol (IP)

It’s a protocol (a set of conventions) that governs how packets are sent across the
Internet
A mechanism for transmitting packets between source and destination

IP Addresses

It is a unique address assigned to each host

It is 4 bytes long or 32 bits long
It is assigned by the Internet Assigned Numbers Authority (IANA)
It is Usually presented in dotted decimal notation
Example: [Link]
Domain Names
The dotted decimal notation is not very memorable
On top, IP address often change for any number of reasons, and should not be hard
coded
 Symbolic names provide an alternative way of naming hosts
Example [Link]
Our concern is how do to resolve a domain name to its IP address. The solution of
which is provided by the Domain Name Server (DNS)
Domain Name Server (DNS)
A DNS is a federated database
Each domain and each of the sub domains in a domain has a unique name
Example of DNS structure

Ports
Every host has multiple ports (ako mailboxes) on which it can receive packets
Certain ports (0-1024) are reserved for standard services
Reserved Ports
20: File Transfer Protocol (FTP)
22: Secure Shell (SSH)
23: Telnet
25: Simple Mail Transfer Protocol (SMTP)
80: Hypertext Transfer Protocol (HTTP)
Resources
Anything accessible via the Web is referred to as a resource
HTML documents
Images
Static resources don't change from request to request, such as an HTML document
or an image
Dynamic resources may vary with each request, depending on a number of
conditions
Changing data source
User identity
Input from the user passed with the request
Time of day
Uniform Resource Locators (URLs)
They define a standard way to locate resources on the Web
Web equivalent for specifying a name in a file system
 An URL identifies the protocol (or scheme), host, optional port number, and
document path.
Common protocols include: http, https, ftp, and file
Host identifies the machine running the web server
Host and port number are separated by a colon (80 is used as default for http
URLs)
Path is the location of the resource requested
Cannot contain spaces, &, :, ; characters
Example:

HTTP
HyperText Transfer Protocol
Implements a request-response model
Connectionless (at least, before the current version, HTTP/1.1)
As soon as a request is processed, the connection between client and server is
terminated.
Defines format for requests and responses
MIME
Multipurpose Internet Mail Extensions
A specification for formatting non-text messages (graphics, audio, and video files) so
they can be sent over the Internet
Originally developed for formatting e-mail messages

1.2 The client server Architecture

Internet applications technology is implemented within a client server architecture that
has three fundamental components:
Web (client) browsers
Network
Web servers
The diagram shown below represents the architecture:
 Internet applications therefore work as follows:

When the web server gets a CGI request, it executes the application in a separate
process
The server passes the parameters received with the request (if any) to the application
and collects its output
This output is then returned to the client just as if it had been fetched from a static
document

1.2: Web development

Web development broadly refers to the tasks associated with developing websites for hosting in
the internet. The development process includes web design, web content development, client-
side/server-side scripting, network security configuration, among other things. Web development
is the coding or programming that enables website functionality, per owners requirements. It
mainly deals with non design aspects of building websites which includes coding and writing
markup. On the other hand web design is concerned with how a website looks and how the
customers interact with it. Designers know how to put together the design principles to create a
site that is usable and easy to navigate

Web development ranges from creating plain text pages to complex web based applications,
social network applications and e-business applications

1.2.1 Where Do I Start as a web development?

Your particular starting point will no doubt depend on your background and goals. However, a
good first step for everyone is to get a basic understanding of how the Web and web pages work.
Once you learn the fundamentals, you need to gain skills in web design. Generally, to develop
good websites you need the following skills:
 Graphic design: Because the Web is a visual medium, web pages require attention to
presentation and design. The graphic designer makes decisions regarding everything you
see on a web page: graphics, type, colors, layout, etc. As in the print world,
graphic designers play an important role in the success of the final product. If you work
as a graphic designer in the web design process, you may never need to learn any
backend programming languages. (I didn’t.) If you are interested in doing the visual
design of commercial sites professionally, I strongly recommend graphic design
training as well as a strong proficiency in Adobe Photoshop (the industry standard).
 Information design: One easily overlooked aspect of web design is information design,
the organization of content and how you get to it. Information designers (also called
“information architects”) deal with flow charts and diagrams and may never touch a
graphic or text file; however, they are a crucial part of the creation of the site
 Interface design: If graphic design is concerned with how the page looks, interface
design focuses on how the page works. The concept of usability, how easily visitors can
accomplish their goals on the site, as well as the general experience of using the site, is a
function of the interface design. The interface of a website includes the methods for
doing things on a site: buttons, links, navigation devices, etc., as well as the
functional organization of the page. In most cases, the interface, information
archictecture, and visual design of a site are tightly entwined.
 Document production: A fair amount of the web development process involves the
creation and troubleshooting of the documents, style sheets, scripting, and images that
make up a site. The process of writing HTML and style sheet documents is commonly
referred to as authoring.

To do authoring, you need to have an good knowledge of HTML (the markup language
used to make web documents) and style sheets, and often additional scripting or
programming skills.
 Scripting and programming: Web functionalities such as forms, dynamic content, and
interactivity require web scripts and sometimes special programs and applications
running behind the scenes. Developers who specialize in the programming end of things
may never touch a graphic file or have input on how the pages look, although they need
 to communicate well with the information and interface designers to make sure their
scripts meet intended goals and user expectations. Web scripting and programming
definitely requires some traditional computer programming prowess.
 Multimedia: One of the cool things about the Web is that you can add multimedia
elements to a site, including sound, video, animation, and Flash movies for
interactivity. You may decide to add multimedia skills to your web design toolbelt, or
you may decide to become a specialist.. Adobe Flash (previously Macromedia Flash) is a
multimedia format created especially for the Web. Flash gives you the ability to create
full-screen animation, interactive graphics, integrated audio clips, even scriptable games
and applications, all at remarkably small file sizes. Some sites use Flash instead of
(X)HTML for their entire interface, content, and functionality

1.2.1 Frontend versus Backend development

You may hear web developers say that they specialize in either the frontend or back end of web
site creation. Frontend refers to any aspect of the design process that appears in or relates directly
to the browser. The following tasks are commonly considered to be frontend disciplines: Graphic
design, interface design and information design as it pertains to the user’s experience of the site,
Site production, including HTML documents, style sheets and JavaScript.

Backend development “Backend” refers to the programs and scripts that work on the server
behind the scenes to make web pages dynamic and interactive. In general, backend web
development falls in the hands of experienced programmers, but it is good for all web designers
to be familiar with backend functionality. The following tasks take place on the backend:
Information design as it pertains to how the information is organized on the server Forms
processing , Database programming, Content management systems and Other server-side web
applications using Perl/CGI, PHP, ASP, JSP, Ruby on Rails, Java and other programming
language.

1.3: Overview of authoring languages

1.3.1 HTML
HTML (HyperText Markup Langage) is the language used to create web page documents.
HTML is not a programming language; it is a markup language, which means it is a system for
identifying and describing the various components of a document such as headings, paragraphs,
and lists. You don’t need programming skills—only patience and common sense—to write
(X)HTML. Everyone involved with the Web needs a basic understanding of how HTML works.

Task 1: Read about the history of the web and HTML

1.3.2 CSS (Cascading Style Sheets)

Cascading Style Sheets (CSS) is used to describe how you want that content to look. In the web
design biz, the way the page looks is known as its presentation. CSS is now the official and
standard mechanism for formatting text and page layouts.

CSS also provides methods for controlling how documents will be presented in media other than
the traditional browser on a screen, such as in print and on handheld devices. It also has rules for
specifying the non-visual presentation of documents, such as how they will sound when
read by a screen reader. Style sheets are also a great tool for automating production, because
you can make changes to all the pages in your site by editing a single style sheet document.

1.3.3: JavaScript/DOM scripting

Despite its name, JavaScript is not at all related to Java. JavaScript is a scripting language that
is used to add interactivity and behaviors to web pages, including these (just to name a
few): Checking form entries for valid entries, Swapping out styles for an element or an entire
site, Making the browser remember information about the user for the next time they visit etc

JavaScript is a language that is commonly used to manipulate the elements on the web page or
certain browser window functions. There are other web scripting languages, but JavaScript (also
called ECMAScript) is the standard and most commonly used. You may also hear the term
DOM scripting used in relation to JavaScript. DOM stands for Document Object Model,
and it refers to the standardized list of web page elements that can be accessed and
manipulated using JavaScript (or another scripting language).

1.3.4 : Server-side programming languages

Some web sites are collections of static (X)HTML documents and image files, but most
commercial sites have more advanced functionality such as forms handling, dynamically
generated pages, shopping carts, content management systems, databases, and so on. These
functions are handled by special web applications running on the server. There are a number of
scripting and programming languages that are used to create web applications, including:

 CGI Scripts (written in C+, Perl, Python, or others)

 Java Server Pages (JSPs)
 PHP
 [Link]
 [Link]
 Ruby on Rails

Developing web applications is programmer territory you must master to become a professional
developer. It is possible to get shopping carts, content management systems, mailing lists, and
guestbooks as prepackaged solutions, without the need to program them from scratch.

1.3.5: XML (extensible markup language)

XML is not a specific language in itself, but rather a robust set of rules for creating other
markup languages. Despite the fact that XML was developed with the Web in mind, it has
actually had a larger impact outside the web environment because of its data-handling
capabilities. There are XML files working behind the scenes in an increasing number of software
applications, such as Microsoft Office, Adobe Flash, and Apple iTunes. Still, there are a number
of XML languages that are used on the Web. The most prevalent is XHTML, which is HTML
rewritten according the stricter rules of XML. There is also RSS (Really Simple Syndication or
RDF Site Summary) that allows your content to be shared as data and read with RSS feed
readers, SVG (Scalable Vector Graphics) that uses tags to describe geometric shapes, and
MathML that is used to describe mathematical notation. As a web designer, your direct
experience with XML is likely to be limited to authoring documents in XHTML or perhaps
adding an RSS feed to a web site. Developing new XML languages would be the responsibility
of programmers or XML specialists.

1.3.6: Java
Although Java can be used for creating small applications for the Web (known as
“applets”), it is a complete programming language that is typically used for developing large,
enterprise-scale applications. Java is considered one of the “big guns” and is overkill for most
web site needs. Learn Java only if you want to become a Java programmer. You can live your
life as a web designer without knowing a lick of Java (most web designers and developers do)

1.3.7: Web page authoring

Web-authoring tools are similar to desktop publishing tools, but the end product is a web
page (an (X)HTML file and its related style sheet and image files). These tools provide a visual
“WYSIWYG” (What You See Is What You Get; pronounced “whizzy-wig”) interface and
shortcuts that save you from typing repetitive (X)HTML and CSS. The following are some
popular web authoring programs:

 Adobe Dreamweaver. This is the industry standard due to its clean code and advanced
features.
 Microsoft Expression Web (Windows only). Part of Microsoft’s suite of
professional design tools, MS Expression Web boasts standards-compliant code and
CSS-based layouts. Microsoft no longer offers its previous web editor, FrontPage, which
was notorious for proprietary and sloppy code.
 Nvu (Linux, Windows, and Mac OS X).Don’t want to pay for a WYSIWYG editor? Nvu
(pronounced N-view, for “new view”) is an open source tool that matches many of the
features in Dreamweaver, yet is downloadable for free at [Link]

HTML editors

HTML editors (as opposed to authoring tools) are designed to speed up the process of writing
HTML by hand. They do not allow you edit the page visually as WYSIWYG authoring tools
(listed previously) do. Example of such tools are:

 TextPad (Windows only). TextPad is a simple and inexpensive plain-text code editor
for Windows.
 Notepad++
 Notepad
 AdobeHomesite
 BBedit

Internet tools
Because you will be dealing with the Internet, you need to have some tools specifically for
viewing and moving files over the network:

A variety of browsers. Because browsers render pages differently, you’ll want to test your pages
on as many browsers as possible. There are hundreds of browsers on the market.

A file-transfer program (FTP)

An FTP program enables you to upload and download files between your computer and the
computer that will serve your pages to the Web. The web authoring tools listed earlier all
have FTP programs built right in. There are also dedicated FTP programs as listed
below. See Chapter 21, Getting Your Pages on the Web,for more information on file
uploading

Popular web development tools

Introduction to principles of Web Design

2.1 Introduction................................................................................1
 2.2 Audience....................................................................................2
2.3 Goals..........................................................................................2
2.4 Size............................................................................................2
2.4.1 Sample outline........................................................................3
2.4.2 Sample site map.....................................................................4
2.1 Introduction
In web design the most important factor to be considered is the end user, i.e., the customer. If he/she
dislikes the site, then its purpose cannot be achieved. For this reason, website development starts with
three basic steps:

1. Defining the audience of the site (scope); e.g. children or

stock traders.
2. Determining what the site is supposed to do (goals); e.g.
entertain.
3. Defining how big the site needs to be (size);

The design of a website can be centered on: the organization, the technology or the user.

Like other software products the site should be tested before being launched.

It is also important for any team developing a site to recognize that several skills are needed hence the
need to involve different people such as:

Marketers (big picture)

Producers (funding)
Designers (navigation and user interface)
Media specialists (logos, animations, and such)
HTML coders (HTML)
Programmers who make the web site dynamic (that is, automated)

2.2 Audience
The audience can be categorized based on:

1. Age
2. Gender
3. Residence: urban, suburban, rural
4. Level of education
5. Language

2.3 Goals
Goals are long-term results and provide means by which Web site performance can be measured.
Sample goals in web design:

"Increase sales by 30%" or "Increase page view time by 20%".

Goals should be accompanied by objectives which are specific methods for achieving goals;

e.g. Goal: "Increase page view time by 20%"

Objective: "Display with colour photographs or flash animation"

2.4 Size

The size the site is determined by the number of pages it has which
involves the development of a site map. The site map is developed by
following the steps below:

Make a wish list

Brainstorm on the content that the site will include
Gives you an idea of its size and scope
Group content
Organize the wish list into logical groups
For example, all content related to the company, and to products
Create categories
Some groups will be similar
Group these groups into categories
Aim for few categories (5-7)
Build an outline
Categories become main ideas
Within groups are lists of their content (no more than 2 sublevels)

NB: Observe the five-to-seven rule

Categories often become navigation links

People will have difficulty navigating, if offered too many choices
2.4.1 Sample outline

Converting your Outline into a Site Map

A site map is a diagram that helps you visualize each page of a web
site before you build it, and its location with respect to other web
sites

A site map should also specify the technology used on each page
for instance: frames, forms, tables, Javascript,PHP, Applets,
servelets, media plug-ins, database connectivity etc.

On a large site indicate a naming scheme rather than naming each page

Designing a Site Map involves

Showing how pages link to each other
Showing the structure of each page
Indicating special user interface elements
Representing interactions with databases
Showing How Pages Link to Each Other
Show direct links as one-way arrows between pages
Show cross-navigation as two-way arrows between pages at the same level
Show links to shared pages (pages that most pages link to) as symbols
Show redirection as dashed arrows (e.g. an animation flowing into the home page)
Showing the Structure of Each Page
Indicate a page that uses frames by using lines to segment the page
Show that a page is built with tables by drawing boxes inside the page.
Label tools on a page (such as search boxes, and login fields) using symbols, or by
drawing a small box on the link connecting two pages.
Indicating Special User Interface Elements
Draw a box and place a symbol (e.g. icon for QuickTime movie) inside it
Complex embedded applications should be documented separately elsewhere
 Representing Interactions with Databases
Indicate pages that are populated from a database by drawing a dotted line from
the page to the database; may show templates as a stack of pages

2.4.2 Sample site map