Internet Programming

Chapter One: The fundamentals

INTERNET

The Internet is a global system of interconnected computer networks that use the
standard Internet protocol suite (TCP/ IP) to serve billions of users worldwide. It is a
network of networks that consists of millions of private, public, academic, business, and
government networks, of local to global scope, that are linked by a broad array of
electronic, wireless and optical networking technologies. The Internet carries a vast range
of information resources and services, such as the interlinked hypertext documents of
the World Wide Web (WWW) and the infrastructure to support electronic mail.

3.3.1 Uses of Internet

Internet has been the most useful technology of the modern times which helps us not
only in our daily lives, but also our personal and professional lives developments. The
internet helps us achieve this in several different ways. For the students and educational
purposes the internet is widely used to gather information so as to do the research or
add to the knowledge of various subjects. Even the business professionals and the
professionals like doctors, access the internet to filter the necessary information for their
use. The internet is therefore the largest encyclopedia for everyone, in all age categories.
The internet has served to be more useful in maintaining contacts with friends and
relatives who live abroad permanently.

Web Architecture

Web architecture is the conceptual structure of the World Wide Web. The WWW or
internet is a constantly changing medium that enables communication between different
users and the technical interaction (interoperability) between different systems and
subsystems. The basis for this is different components and data formats, which are
usually arranged in tiers and build on each other. Overall, they form the infrastructure
of the internet, which is made possible by the three core components of data transmission
protocols (TCP/IP, HTTP, HTTPS), representation formats (HTML, CSS, XML), and
addressing standards (URI, URL). The term web architecture should be distinguished
from the terms website architecture and information architecture.

1|Page
1.1 World Wide Web

The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet. English scientist
Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser
computer program in 1990 while employed at CERN in Switzerland. The Web browser
was released outside CERN in 1991, first to other research institutions starting in
January 1991 and to the general public on the Internet in August 1991.

The World Wide Web has been central to the development of the Information Age and is
the primary tool billions of people use to interact on the Internet. Web pages are primarily
text documents formatted and annotated with Hypertext Markup Language (HTML). In
addition to formatted text, web pages may contain images, video, audio, and software
components that are rendered in the user's web browser as coherent pages of multimedia
content.

1.2 Web browser

The web browser is an application program that displays a www document. It usually
uses other internet services to access the document.

Some examples

Google crom, Mozilla Firefox, opera, Internet explorer, …..

1.3 Web server

A web server is a computer hosting one or more websites. "Hosting" means that all the
web pages and their supporting files are available on that computer. The web server will
send any web page from the website it is hosting to any user's browser, per user request.

1.4 Web page

A web page is a simple document displayable by a browser. Such document is written

in the HTML language (which we look into in more detail in other articles). A web page
can embed a variety of different types of resources such as:

2|Page
  style information — controlling a page's look-and-feel
 scripts — which add interactivity to the page
 Media — images, sounds, and videos.

1.5 Website

A website is a collection of linked web pages (plus their associated resources) that share
a unique domain name. Each web page of a given website provides explicit links—most
of the time in the form of clickable portion of text—that allow the user to move from one
page of the website to another.

To access a website, type its domain name in your browser address bar, and the browser
will display the website's main web page, or homepage (casually referred as "the home"):

1.6 Multipurpose Internet Mail Extensions (MIME)

The Multipurpose Internet Mail Extensions (MIME) type is a standardized way to

indicate the nature and format of a document. The Internet Assigned Numbers
Authority (IANA) is the official body responsible to keeping track of all official MIME
types, and you can find the most up-to-date and complete list at the Media Types page.

Browsers often use the MIME type (and not the file extension) to determine how it will
process a document; it is therefore important that servers are set up correctly to
attach the correct MIME type to the header of the response object.

1.7 Important MIME types

Type Description Example of typical subtypes

Represents any document that contains
text/plain, text/html, text/css,
text text and is theoretically human
text/javascript
readable
Represents any kind of images. Videos
image/gif, image/png,
are not included, though animated
image image/jpeg, image/bmp,
images (like animated gif) are described
image/webp
with an image type.

3|Page
Type Description Example of typical subtypes

audio/midi, audio/mpeg,
audio Represents any kind of audio files audio/webm, audio/ogg,
audio/wav
video Represents any kind of video files video/webm, video/ogg

application/octet-stream,
application/pkcs12,
application Represents any kind of binary data. application/vnd.mspowerpoint,
application/xhtml+xml,
application/xml, application/pdf

1.8 Uniform Resource Locator (URL)

Uniform Resource Locator (URL) is another name for a web address. URLs are made of
letters, numbers and other symbols in a standard form. People use them on computers
by clicking a pre-prepared link or typing one into a web browser, to make the computer
fetch and show some specific resource (usually a web page) from another computer (web
server) on the Internet.

URLs consist of several parts:

 A protocol. Very often, this is the Hypertext Transfer Protocol (HTTP)

 Some separation characters: ://
 The other computer's name or address. It is very common for names to start with
www. (which stands for World Wide Web), but the entire name is up to that
computer's administrator.
 Extension (Domain). Like
 com - Commercial use

 .net - network / Internet service provider use

 .org - Organizational use
 .edu - Educational use (Schools and universities)
 .mil - Military use
 .gov - Governmental use

4|Page
  Top level domain
 .ca for Canada
 .us for the United States of America
 .uk for the United Kingdom.
 .et for Ethiopia
 .de for Germany
 The path to a document or script. Like /w/index.php

The domain name system (DNS) is the way that internet domain names are located and
translated into internet protocol (IP) addresses. The domain name system maps the name
people use to locate a website to the IP address that a computer uses to locate a website.
For example, if someone types www.mu.edu.et into a web browser, a server behind the
scenes will map that name to the IP address 213.96.55.36.

1.9 Web development

There are two broad divisions of web development – front-end development (also called
client-side development) and back-end development (also called server-side
development).

1.9.1 Front-end development

Front-end development refers to constructing what a user sees when they load a web
application – the content, design and how you interact with it. This is done with three
codes – HTML, CSS and JavaScript.

HTML, short for Hyper Text Markup Language, is a special code for ‘marking up’ text in
order to turn it into a web page. Every web page on the net is written in HTML, and it will
form the backbone of any web application.

CSS, short for Cascading Style Sheets, is a code for setting style rules for the appearance
of web pages. CSS handles the cosmetic side of the web.

JavaScript is a scripting language that’s widely used to add functionality and

interactivity to web pages.

5|Page
1.9.2 Back-end development

Back-end development controls what goes on behind the scenes of a web application. A
back-end often uses a database to generate the front-end.

Here’s an example. Say you log into your Facebook account, and you are greeted with the
latest updates in your News Feed. They’re not going to be the same updates that you saw
yesterday.

How did the page change? Did a Facebook employee manually edit the page to update
your news feed? Of course not. A script on the Facebook back-end would have received
the updates and re-generated the front-end accordingly.

Back-end scripts are written in many different coding languages and frameworks, such
as…

PHP, Ruby on Rails, ASP.NET, Perl, Java, Node.js, Python

2. Website Development Life Cycle

There are numerous steps in the web site design and development process. From
gathering initial information, to the creation of your web site, and finally to maintenance
to keep your web site up to date and current.

The exact process will vary slightly from designer to designer, but the basics are the same

2.1 Phase One: Information Gathering

The first step in designing a successful web site is to gather information. Many things
need to be taken into consideration when the look and feel of your site is created.

This first step is actually the most important one, as it involves a solid understanding of
the company it is created for. It involves a good understanding of you – what your
business goals and dreams are, and how the web can be utilized to help you achieve
those goals.

It is important that your web designer start off by asking a lot of questions to help them
understand your business and your needs in a web site.

6|Page
Certain things to consider are:

 Purpose
What is the purpose of the site? Do you want to provide information, promote a
service, sell a product… ?
 Goals
What do you hope to accomplish by building this web site? Two of the more
common goals are either to make money or share information.

 Target Audience

Is there a specific group of people that will help you reach your goals? It is helpful
to picture the “ideal” person you want to visit your web site. Consider their age, sex
or interests – this will later help determine the best design style for your site.

 Content
What kind of information will the target audience be looking for on your site? Are
they looking for specific information, a particular product or service, online
ordering…?

2.2 Phase Two: Planning

Using the information gathered from phase one, it is time to put together a plan for your
web site. This is the point where a site map is developed.

The site map is a list of all main topic areas of the site, as well as sub-topics, if applicable.
This serves as a guide as to what content will be on the site, and is essential to developing
a consistent, easy to understand navigational system. The end-user of the web site – aka
your customer – must be kept in mind when designing your site. These are, after all, the
people who will be learning about your service or buying your product. A good user
interface creates an easy to navigate web site, and is the basis for this.

During the planning phase, your web designer will also help you decide what technologies
should be implemented. Elements such as what CMS (content management system) such
as WordPress to incorporate, will any contact forms be needed, etc. are discussed when
planning your web site.

7|Page
2.3 Phase Three: Design

Drawing from the information gathered up to this point, it’s time to determine the look
and feel of your site.

Target audience is one of the key factors taken into consideration. A site aimed at
teenagers, for example, will look much different than one meant for a financial institution.
As part of the design phase, it is also important to incorporate elements such as the
company logo or colors to help strengthen the identity of your company on the web site.

Your web designer will create one or more prototype designs for your web site. This is
typically a .jpg image of what the final design will look like. Often times you will be sent
an email with the mock-ups for your web site, while other designers take it a step further
by giving you access to a secure area of their web site meant for customers to view work
in progress.

Either way, your designer should allow you to view your project throughout the design
and development stages. The most important reason for this is that it gives you the
opportunity to express your likes and dislikes on the site design.

In this phase, communication between both you and your designer is crucial to ensure
that the final web site will match your needs and taste. It is important that you work
closely with your designer, exchanging ideas, until you arrive at the final design for your
web site.

Then development can begin…

2.4 Phase Four: Development

The developmental stage is the point where the web site itself is created. At this time,
your web designer will take all of the individual graphic elements from the prototype and
use them to create the actual, functional site.

This is typically done by first developing the home page, followed by a “shell” for the
interior pages. The shell serves as a template for the content pages of your site, as it
contains the main navigational structure for the web site. Once the shell has been
created, your designer will take your content and distribute it throughout the site, in the

8|Page
appropriate areas.

Elements such as the CMS (content management system) like WordPress, interactive
contact forms, or ecommerce shopping carts are implemented and made functional
during this phase, as well.

This entire time, your designer should continue to make your in-progress web site
available to you for viewing, so that you can suggest any additional changes or corrections
you would like to have done.

On the technical front, a successful web site requires an understanding of front-end web
development. This involves writing valid HTML / CSS code that complies to current web

standards, maximizing functionality, as well as accessibility for as large an audience as

possible.

This is tested in the next phase…

2.5 Phase Five: Testing and Delivery

At this point, your web designer will attend to the final details and test your web site.
They will test things such as the complete functionality of forms or other scripts, as well
last testing for last minute compatibility issues (viewing differences between different web
browsers), ensuring that your web site is optimized to be viewed properly in the most
recent browser versions.

A good web designer is one who is well versed in current standards for web site design
and development. The basic technologies currently used are HTML and CSS (Cascading
Style Sheets). As part of testing, your designer should check to be sure that all of the
code written for your web site validates. Valid code means that your site meets the current
web development standards – this is helpful when checking for issues such as cross-
browser compatibility as mentioned above.

Once you give your web designer final approval, it is time to deliver the site. An FTP (File
Transfer Protocol) program is used to upload the web site files to your server. Some web
designers offer domain name registration and web hosting services as well, or have
recommendations as to where you can host your site. Once these accounts have been

9|Page
setup, and your web site uploaded to the server, the site should be put through one last
run-through. This is just precautionary, to confirm that all files have been uploaded
correctly, and that the site continues to be fully functional

Other final details include plugin installation (for WordPress or other CMS driven web
sites and SEO (Search Engine Optimization). SEO is the optimization of your web site
with elements such as title, description and keyword tags which help your web site
achieve higher rankings in the search engines. The previously mentioned code validation
is something that plays a vital role in SEO, as well. There are many WordPress plugins
available that further enhance the default WordPress functionality – many of which
directly relate to improving your SEO, as well.

There are a lot of details involved in optimizing your web site for the search engines –
enough to warrant its own post. This is a very important step, because even though you
now have a web site, you need to make sure that people can find it

2.6 Phase Six: Maintenance

The development of your web site is not necessarily over, though. One way to bring repeat
visitors to your site is to offer new content or products on a regular basis. Most web
designers will be more than happy to continue working together with you, to update the
information on your web site. Many designers offer maintenance packages at reduced
rates, based on how often you anticipate making changes or additions to your web site.

If you prefer to be more hands on, and update your own content, there is something
called a CMS (Content Management System) such as WordPress can be implemented to
your web site. This is something that would be decided upon during the Planning stage.
With a CMS, your designer will utilize online software to develop a database driven site
for you.

A web site driven by a CMS gives you the ability to edit the content areas of the web site
yourself. You are given access to a back-end administrative area, where you can use an
online text editor (similar to a mini version of Microsoft Word). You’ll be able to edit
existing content this way, or if you are feeling more adventurous, you can even add new
pages and content yourself. The possibilities are endless!

10 | P a g e