Jimma University

Faculty of Computing and Informatics

Software Engineering Program

Web Design and Programming

Jimma, Ethiopia.
 Chapter One

Introduction to the Internet and the World Wide Web

❖ Concept of the internet, historical background of the internet and standards & protocols

❖ Comprehend the web, web terminology, and HTTP protocol architecture.

❖ State and understand what the is Client-Server Model.

❖ Differentiate the difference between Backend and Front-end web development

❖ Understanding of Programming and Scripting language

❖ Recognize universal addressing(TCP/IP, DNS) and universal protocol(HTTP, URL, HTML

FTP)

2
 The Internet

❖ Internet is network of networks that use the Internet protocol suite to link billions of devices
worldwide

➢The Internet is a global system of interconnected computer networks

❖ Consists of millions of private, public, academic, business, government networks

❖ A network is a group of two or more computers connected to one another for communication.

▪ When connected to the Internet people can access services such as online shopping,
listening to radio and TV broadcasts, chatting, and sending mail, accessing information,
reading newspapers, and so on.

3
 Cont...

❖ Internet is an internetwork of Wide Area Networks

▪ with gateways between them

▪ based upon common use of TCP/IP protocols

▪ supporting standard application services - DNS, e-mail, web

❖ The Internet is organized by IETF, ICANN(Internet Corporation for Assigned Names and
Numbers) and ISOC(Internet Society).

❖ Internet has no central operations room or global operations manager.

❖ Each Internet host has an IP address e.g. [Link].

❖ Some Internet hosts have a domain name e.g. [Link].

4
 Cont...

❖ Fundamental suit of communication protocol used for the internet.

❖ TCP/IP Networks can be viewed as 4 layer structure:

Layer Functionality Examples of protocols on these Internet layers

Interfaces directly with user
Application
applications or users are:

End to end (un)reliable delivery • Application: SMTP, HTTP, DNS, FTP

Transport
of TCP or UDP packets
• Transport: TCP, UDP
IP datagram delivery, addressing,
Network
routing • Network: IP, ICMP, IPsec, IGMP
Delivers frames, handles errors,
Link • Link: Ethernet, 802.11, ARP, PPP
drives physical transfers
5
 Brief history of Internet

❖ Began as a US Department of Defense network called Advanced Research Project Agency

Network (ARPANET) (1960s-70s)
▪ APRPANET main idea was to
➢Support packet switching–allowing multiple users to use the same communication
path and
➢Use TCP to ensure the message is properly passed from sender to receiver
❖ The basic purpose of ARPANET was to provide communication among the various bodies of
government. [UCLA, Stanford research institution, US santa, Univeristy of Utah.]
▪ Initial services: electronic mail, file transfer between military base, university, gov.t body.
❖ Opened to commercial interests and most universities in the late 80s
❖ WWW created in 1989-91 by Tim Berners-Lee
❖ Early web browsers released: Mosaic 1992, Netscape 1994, Internet Explorer 1995
▪ [Link] opens in 1995; Google January 1996
6
 Brief history of Internet (Cont’d)

❖ In 1989, Tim Berners-Lee of CERN (the European Organization for Nuclear Research)
began to develop a technology for sharing information via hyperlinked text documents.

❖ He also wrote communication protocols (Hypertext Transfer Protocol(HTTP)) to form the

backbone of his new information system, which he called the World Wide Web.

▪ The objective behind the invention of WWW was to merge the evolving technologies
of computers, data networks, and hypertext into a powerful and easy-to-use global
information system.

7
 Brief history of Internet (Cont’d)

❖ Berners-Lee created WWW by bringing together three technologies that were already
in development at the time:
▪ Markup Language – a system of instructions and formatting codes embedded in the
text. Or it is the language used to describe the insides of web documents.
▪ Hypertext – a means of embedding links to other documents, images, and other
elements in a document. Or it is the language used to describe how these documents
are sent over the internet.
▪ Internet – a global network of computers where clients request service and servers
provide services

8
 Brief history of Internet (Cont’d)

❖ In 1990, he had written the first browser/editor (“[Link]”) and Server Software.

▪ [Link] was the address of the world's first web server, running on a NeXT computer at
CERN.

❖ By the end of 1990, the first web page was served on the open internet:

[Link]

▪ The world's first web page address provided information about the World Wide Web project.

❖ In 1991, people outside of CERN were invited to join this new web community.

❖ On 30 April 1993, CERN issued a statement putting the Web into the public domain, ensuring that it
would act as an open standard. The move had an immediate effect on the spread of the web.
9
 Brief history of Internet (Cont’d)

❖ In 1993, a team at the University of Illinois’ National Center for Supercomputing Applications
released Mosaic, the first Web browser to become popular with the general public.

❖ In 1994, Tim BL founded the World Wide Web Consortium (W3C), an organization that brings
together representatives from many different technology companies to work together on the
creation of web technology specifications. The aim was to standardize and develop the Web
further.

❖ By the end of 1994, the Web had 10,000 servers - of which 2000 were commercial - and 10
million users.

❖ The next few years saw the launch of websites such as Yahoo (1994), Amazon (1995), eBay
(1995) and Google (1998).

10
 Web Terminology

❖ World-Wide-Web (WWW): Tim Berners-Lee, a physicist in Switzerland, invented the World Wide
Web in 1992 as a way to organize and access information on the Internet.

▪ It contains hypertext links or highlighted keywords and images that lead to related information.

▪ A collection of linked Web pages that has a common theme or focus is called a Web site

❖ Web browser: is a program that runs on users' computers and allows them to view and interact with
the web pages on the World Wide Web.

▪ The most common web browsers are called Internet Explorer and Google Chrome.

❖ Hypertext: is a text document that contains links to other text documents

▪ It allows a user to move from one web page to another by using a mouse to click on special
hypertext links.
11
 Web Terminology (Cont’d)

❖ Webpage: is a single document that may contain text, graphics, and icon.
▪ They are created using HTML.
❖ Web site: It is a group of well-structured and interlinked webpages.
❖ Uniform Resource Locator (URL): To visit a Web site, users type the URL, which is the
site's address, into the web browser.

12
 Web Terminology (Cont’d)

❖ Web server: is a computer that stores a website, and is responsible for checking requests for
viewing that website.
❖ Internet Service Provider (ISP): A company that provides Internet connections to
customers.
❖ Protocol: It is a set of rules that govern communication.
❖ Hypertext Transfer Protocol (HTTP/HTTPS): It is a communications protocol.

▪ It defines the mechanism for communication between the browser and the web server.

▪ It is also called request and response protocol because the communication between browser and
server takes place in request and response pairs.

▪ HTTP is a simple request/response protocol in which a Web browser asks for a document, and
the Web server returns the document in the form of an HTML data stream preceded by a few
13 descriptive headers
 Web Terminology (Cont’d)

❖ Hypertext Markup Language (HTML): It is the language used to write web pages on the
WWW.

❖ Extensible Markup Language (XML): It is an alternative language for writing web pages.

▪ HTML pages describe the format of the data’s presentation, whereas, pages written in
XML describe only how the data is structured.

❖ World Wide Web Consortium (W3C): It is a group of experts who meet regularly to
develop common protocols for the evolution of the WWW

14
 Client-server architecture

❖ Client-Server Architecture is a computing model in which the server hosts, delivers, and

manages most of the resources and services to be consumed by the client.

▪ This type of architecture has one or more client computers connected to a central server

over a network or internet connection.

▪ It is also known as a networking computing model or client/server network because

all the requests and services are delivered over a network.

15
 Cont’d

• Clients are the typical web user's internet-connected

devices and web-accessing software available on
those devices.
• Server is a remote computer that provides
information (data) or access to particular services.
• stores webpages, sites, or apps. It provides
services like file transfer, web service, email
service, DNS, Dynamic host configuration, and
database.

❖ Client computers that provide an interface to allow a computer user to request services of
the server and to display the results the server returns.

16 ❖ Servers wait for requests to arrive from clients and then respond to them.
 Cont...

❖ Web applications are software programs that run on web servers and are accessed through
web browsers over the internet.
❖ Web-based applications provide the advantage of accessibility across different devices and
operating systems without the need for installation or updates.
▪ Web-based applications are often multi-tier applications (sometimes referred to as n-tier
applications) that divide functionality into separate tiers (i.e., logical groupings of
functionality)

17
 Multi tier…

❖ The bottom tier (also called the data tier or the information tier) maintains the application’s data.
▪ This tier typically stores data in a relational database management system (RDBMS).
❖ The middle tier implements controller logic, presentation logic and business logic to control
interactions between the application’s clients and its data.
▪ The middle-tier controller logic processes client requests (such as requests to view a product
catalog) and retrieves data from the database.
▪ The middle-tier presentation logic then processes data from the information tier and presents
the content to the client.
▪ Business logic in the middle tier enforces business rules and ensures that data is reliable
before the application updates a database or presents data to users.
➢Business rules dictate how clients access data and how applications process data.
❖ The top tier, or client tier, is the application’s user interface, which gathers input and displays
output.
18
 Request response procedure

❖ At its most basic level, the request/response process consists of a web browser asking the
webserver to send it a web page and the server sending back the page.
▪ The browser then takes care of displaying the page

19
 Request response…

❖ Each step in the request and response sequence is as follows:

1. You enter [Link] into your browser’s address bar.

2. Your browser looks up the IP address for [Link].

3. Your browser issues a request for the home page at [Link].

4. The request crosses the Internet and arrives at the [Link] web server.

5. The web server, having received the request, looks for the web page on its disk.

6. The web page is retrieved by the server and returned to the browser.

7. Your browser displays the web page.

❖ For an average web page, this process takes place once for each object within the page: a graphic,
an embedded video or Flash file, and even a CSS template.
20
 Request response…

❖ For dynamic web pages, the procedure is a little more involved, because it may bring both
PHP and MySQL into the mix.

21
 Request response…

1. You enter [Link] into your browser’s address bar.

2. Your browser looks up the IP address for [Link].
3. Your browser issues a request to that address for the web server’s home page.
4. The request crosses the Internet and arrives at the [Link] web server.
5. The web server, having received the request, fetches the home page from its hard disk.
6. With the home page now in memory, the web server notices that it is a file incorporating
PHP scripting and passes the page to the PHP interpreter.
7. The PHP interpreter executes the PHP code.
8. Some of the PHP contains SQL statements, which the PHP interpreter now passes to the
MySQL database engine.
9. The MySQL database returns the results of the statements to the PHP interpreter.
10. The PHP interpreter returns the results of the executed PHP code, along with the results
from the MySQL database, to the web server.
22
 HTTP Architecture

❖ Defines a set of commands understood by a web server and sent from a browser
❖ HTTP is the method computers and servers use to request and send information.
▪ For instance, when someone navigates to [Link] on their laptop, their web
browser sends an HTTP request to the Cloudflare servers for the content that appears on
the page.
▪ Then, Cloudflare servers send HTTP responses with the text, images, and formatting that
the browser displays to the user.
❖ Some HTTP commands (your browser sends these internally)
▪ GET resource -- requests data from a specified resource
▪ POST resource -- submits data to be processed to a specified resource
▪ PUT resource -- uploads a representation of the specified URL
▪ DELETE resource -- deletes the specified resource
❖ It is a protocol that enables communication between the browser and the web server
23
 Cont...

❖ HTTP is a stateless protocol

▪ Each request a browser sends to a web server is independent of any other request.

❖ HTTP conversation involves the exchange of HTTP messages.

▪ Is either a request from the client to the server or a response from the server to the client

❖ Messages are composed of:

▪ A message body (optional)

▪ A startline: describing the requests to be implemented and their status of whether
successful or a failure. This start-line is always a single line.
▪ One or more header fields

▪ An empty line – indicating the end of the header fields

24
 Cont...

Messages Body: Start line

▪ HTTP messages are how data is exchanged ▪ HTTP requests are messages sent by the client to
initiate an action on the server.
between a server and a client.
▪ Their start-line contains three elements:
▪ Used to carry an entity-body
▪ An HTTP method like GET, PUT, POST,
▪ May be divided into chunks and sent HEAD, or OPTIONS), that describes the action to
▪ Optional i.e. messages are not required to be performed.
have a message body ▪ The request-target, usually a URL, or the
▪ Some messages cannot even have a absolute path of the protocol, port, and domain
are usually characterized by the request context.
message body
▪ The HTTP version, which defines the structure
of the remaining message, acting as an indicator
25
of the expected version to use for the response
 Cont...

HTTP Header General Header:

❖ All header fields follow the same generic format ❖Used to specify properties of the transfer
❖ Each header field consists of a name followed by process
and colon (:) and a value: ❖Examples:
▪ Header-name: value ❖Connection: close – the client wants to
close the connection when the first
❖ The order of the header field is insignificant response is complete
❖ The header fields can be: ❖Cache-control – the client can specify
▪ General headers additional properties if the requested
resource is cached (e.x. age)
▪ Request headers ❖Date
▪ Response headers ❖Transfer-Encoding
▪ Entity headers

26
 Cont...

Request Headers Response Headers

❖Add additional information about the request ❖ More information, in addition to the status line
❖May include information about the client/sender,
❖ May contain information about the server or
including client capability
resource
❖Examples:
❖ Examples:
▪ Accept - acceptable media types for response
▪ Age – an estimate of time since the
▪ Accept-Charset – acceptable character set response was generated
▪ User-Agent – client browser
▪ Location – used to redirect to a different
▪… location (URI)
▪ Proxy-Authenticate – proxy authentication
challenge
▪ Server – information about the web server
software
27 ▪ …
 Cont...

Entity Headers HTTP Request—start line

❖ Give meta-information about the entity- ❖ The request line contains three parts:
body (message body) being transferred ▪ Request method, Request URI, HTTP Version
❖ Apply only if a message body exists ❖ Request method
❖ Examples: ▪ GET (or retrieve) information from the server
▪ POST (information) back to the server
▪ Content-Encoding – indicates the type
of content encodings applied (e.x. ▪ HEAD like GET but only returns meta information
zipped) ▪ PUT (information) at the server
▪ Content-Language – the language of ▪ DELETE (information) from the server
the intended audience ❖ HTTP Version
▪ Content-Length – size of the entity- ▪ Used by the sender to notify the receiver of its abilities
body (message body) ▪ Included in the first line of the message
▪ Format: HTTP/<major>.<minor>
▪ Expires E.x. HTTP/1.1
▪ … ❖ Request URI
28
The URI of the resource requested
 Cont...

HTTP Response—start line ➢ 200 OK – request has succeeded and

❖ The response line contains: ➢ 202 Accepted – request accepted but not processed

▪ HTTP version ❖ 3xx – further action must be taken to complete the request

▪ Status code ➢ 302 Found – resource found but temporarily moved

▪ Status code description ❖ 4xx – client error or invalid request

HTTP version ➢ 400 Bad Request – couldn’t understand the request

E.x. HTTP/1.1 200 ok ➢ 401 Unauthorized – request requires authorization

Status code ➢ 403 Forbidden – a client may not have access to the
resource
❖ Has 5 categories
❖ 5xx – server error occurred
❖ 1xx – request received, processing continues
➢ 500 Internal Server Error – server encountered an
▪ E.x. 100 Continue – tells client to continue unexpected error (error/bug with a server-side script)
with a request
➢ 505 HTTP Version Not Supported – server doesn’t
▪ 2xx – success, the action was successfully received, support the HTTP version
29 understood, and accepted
 Example of HTTP Request and response header

30 [Link]
Client-Side VS Server-Side
Programming

31
 Client-Side VS Server-Side Programming

Frontend Backend
Runs on the user computer Runs on the server

Interfacing Processing
Collection of user input, interfacing with the Processes data, doing transactions, and complex
server computetion

Fully Visible Invisible

Scripts can be viewed by the user Scripts are not open to users.

Less Secure More Secure

Generally less secure as users can see and mess Alot more secure as users don’t see the source code,
with the scripts and they usually can not interrupt the process.

HTML, CSS, JavaScript, VBScript PHP, ASP, Pyton, Ruby, C#, Java

32
 Front End & Back End Development

❖ The main difference between front and back end development is the particular area of focus.

❖ The front end is concerned with a website’s appearance, look and feel; while the back end
focuses on functionality on a website’s server-side, including all communications between
the browser and the database.

❖ To build a website, a front end developer takes care of the theme, including the presentation,
images and style.

▪ The back end developer takes care of the database, security, site performance and users.

❖ Each side needs to communicate and operate effectively with the other as a single unit to
improve the website’s functionality.
33
 Front End Development

❖ The part of a website that user interacts with directly is termed as front end.

❖ It is also referred to as the ‘client side’ of the application.

❖ It includes everything that users experience directly:

▪ colors and styles,

▪ images,

▪ graphs and tables,

▪ buttons,

▪ navigation menu and etc.

34
 Front End Development (Cont’d)

❖ The structure, design, behavior, and content of everything seen on the browser screen
when websites, web applications, or mobile apps are opened up, is implemented by
frontend developers
❖ Responsiveness and performance are two main objectives of the frontend.
▪ The developer must ensure that the site is responsive i.e. it appears correctly on devices
of all sizes no part of the website should behave abnormally irrespective of the size of
the screen.
▪ How quickly site content loads and renders in a web browser.
Front End Languages Front End Frameworks and Libraries
• HTML • AngularJS and [Link]
• CSS • Bootstrap
• JavaScript and VBScript • jQuery
35 • SASS
 Front End Development (Cont’d) [Language]

❖ HTML
▪ HTML stands for Hyper Text Markup Language.
▪ It is used for creating websites and web applications for the World Wide Web.
▪ HTML5 is the latest and most enhanced version of HTML.
➢HTML5 is a standard language for structuring and presenting content on the
WWW.
➢Any page made in HTML5 is compatible with both computers and mobile devices.
• In other words, you can set the mobile specification from the HTML document
itself.
▪ All the latest versions of web browsers including the mobile web browsers that come pre-
installed on iPhones, iPads, and Android phones have excellent support for HTML5.

36
 Front End Development (Cont’d) [Language]

❖ CSS (Cascading Style Sheets)

▪ CSS is a simply designed language intended to simplify the process of making

web pages presentable.

▪ CSS is a language that lets you describe how the elements defined in your HTML
should be styled, allowing changes in font, color, layout, simple animations, and
other superficial elements.

➢It is used for defining the look and feel of a webpage

➢More importantly, CSS enables you to do this independent of the HTML that
makes up each web page.

37 ▪ CSS3 is the most widely used version, though CSS4 has been released
 Front End Development (Cont’d) [Language]

❖ JavaScript
▪ Developed by Netscape, it is good for network-centric web applications.
▪ It is a famous scripting language used to create magic on the sites to make the site
interactive for the user.
➢It is used to enhance the functionality of a website by running cool games and
displaying timely content updates, interactive maps, animated 2D/3D graphics,
scrolling video jukeboxes, etc.
▪ JavaScript can calculate, manipulate, and validate data. It allows developers to create
dynamic content that responds to user input or changes in the webpage.

❖ Most web developers use JavaScript for client-side scripting in order to be

sure their website works in all browsers.
38
 Front End Development (Cont’d) [Language]

❖ JavaScript
❖ The merits of using JavaScript are:
▪ Less server interaction − You can validate user input before sending the page off to the
server. This saves server traffic, which means less load on your server.
▪ Immediate feedback to the visitors − They don't have to wait for a page reload to see if
they have forgotten to enter something.
▪ Increased interactivity − You can create interfaces that react to user-initiated events such
as button clicks, link navigation.
▪ Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

39
 Front End Development (Cont’d) [Language]

❖ VBScript "Microsoft Visual Basic Scripting Edition"

▪ It is developed and maintained by Microsoft for the purpose of developing dynamic web
applications.
▪ It is a lightweight active scripting language modeled on Visual basic.
➢The syntax of VBScript is very similar to that of Visual Basic.
▪ VBScript only worked in Internet Explorer while JavaScript was a cross-browser solution
that also worked in other browsers.
➢It is not supported by their competitors' browsers such as Firefox and Opera.
❖ Unfortunately, VBScript is now disabled by default in Internet Explorer on all supported
versions of Windows after a recent Windows update.

▪ That’s a big reason why JavaScript won!

40
 Front End Development (Cont’d) [Frameworks and Libraries]

❖AngularJS

▪ AngularJs is a JavaScript open-source front-end framework that is mainly

used to develop single-page web applications (SPAs).

➢It is a continuously growing and expanding framework which provides

better ways for developing web applications.

▪ It changes the static HTML to dynamic HTML. It is an open-source project

which can be freely.

▪ It extends HTML attributes with Directives.

41
 Front End Development (Cont’d) [Frameworks and Libraries]

❖ [Link]
▪ React is a declarative, efficient, and flexible JavaScript library for building user
interfaces.
▪ ReactJS is an open-source, component-based front-end library responsible only for the
view layer of the application
▪ [Link] is mostly used to build interactive UI components with frequently variable data,
➢[Link] is used to build complex enterprise apps like progressive web apps and
single-page apps.
❖ Bootstrap
▪ Bootstrap is a free and open-source tool collection for creating responsive websites and
web applications.
➢It is the most popular HTML, CSS, and JavaScript framework for developing
42 responsive, mobile-first websites.
 Front End Development (Cont’d) [Frameworks and Libraries]

❖ jQuery
▪ jQuery is an open-source JavaScript library that simplifies the interactions between an
HTML/CSS document, or more precisely the Document Object Model (DOM), and
JavaScript.
▪ jQuery is a JavaScript toolkit that simplifies writing code and enables rapid web
development.
▪ Elaborating the terms, jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations, Ajax interactions, and
cross-browser JavaScript development.
❖ SASS
▪ It is the most reliable, mature, and robust CSS extension language.
▪ It is used to extend the functionality of an existing CSS of a site including everything from
variables, inheritance, and nesting with ease.
43
 Back End Development

❖ The backend is the server side of the website.

▪ It is the part of the website that you cannot see and directly interact with.

❖ The parts and characteristics developed by backend designers are indirectly accessed by
users through a front-end application.

❖ It stores and arranges data, and also makes sure everything on the client-side of the website
works fine.

❖ Activities, like writing APIs, creating libraries, and working with system components
without user interfaces or even systems of scientific programming, are also included in the
backend.
44
 Back End Development ( Cont’d)

❖ Server-side programming must deal with dynamic content. Most web pages are not static
since they deal with searching databases.
❖ Server-side Uses
Frameworks
▪ It processes the user input
• PHP
▪ Displays the requested pages • [Link]
• Python
▪ Interaction with servers/storage
• Ruby
▪ Interaction with databases • C#
▪ Querying the database • [Link]

▪ Encoding of data into HTML

▪ Operations over databases like delete, and update.

45
 Back End Development ( Cont’d) [ Frameworks]

❖ PHP
▪ It is an open-source, server-side scripting language designed specifically for web
development.
➢Since PHP code is executed on the server side it is called server-side scripting
language.
▪ It has been used to create web applications for over 35 years, with multiple frameworks
being available for the developers.
➢WordPress runs on it and powers 25% of the websites today, including most popular
blogs and news websites.
▪ It finds applications mainly in the fields of server-side and standalone web application
development along with the development of CMS systems.
❖ Notable websites built on PHP: Facebook, Wikipedia, Wordpress.
46
 Back End Development ( Cont’d) [ Frameworks]

❖ [Link]
▪ [Link] is an open-source, server-side web application framework designed for web
development to produce dynamic web pages.

➢ It was developed by Microsoft to allow programmers to build dynamic websites, applications,

and services.

▪ Prior to [Link], Microsoft had developed another server-side scripting language with the name
ASP (Active Server Pages) which was used widely on the web. However, other than the name,
ASP and [Link] are very different technologies.

▪ .NET is a developer platform made up of tools, programming languages, and libraries for building
many different types of applications.

➢ The base platform provides components that apply to all different types of apps. Additional
frameworks, such as [Link], extend .NET with components for building specific types
of apps.
47
 Back End Development ( Cont’d) [ Frameworks]

❖ Python

▪ It is one of the most popular languages that can handle complex scientific calculations
and is used for statistical analysis.

▪ Flask is a popular micro-framework for Python to create web applications.

➢It's a small framework that provides you with the necessary features to get started
with developing your web application.

▪ Another popular framework is Django.

▪ Notable websites built on Python: YouTube, Instagram, Dropbox, and

Quora.
48
 Back End Development ( Cont’d) [ Frameworks]

❖ Ruby

▪ Ruby started as an object-oriented scripting language and became popular in the 2010s.

▪ It combines some of the best features of all popular programming languages. It is

dynamic, functional, and concise.

▪ Mostly popular for small applications as it is suitable for rapid web development.

▪ Rails is the most popular framework to use with Ruby. A micro-framework Sinatra can
be better for beginners

▪ Ruby is widely used in the field of web development, data analysis and AI
development.
49
 Back End Development ( Cont’d) [ Frameworks]

❖ C#
▪ Microsoft developed C# as a C-like programming language with object-oriented features.
This was part of their .NET project.
▪ C# is widely used in the fields of system programming, game development, web
development, and app development.
❖ [Link]
▪ [Link] (released in 2009) is an open-source and cross-platform runtime environment for
executing JavaScript code outside of a browser.
▪ It provides the ability to run JavaScript code on the server side. the same coding can be
used for both front-end and back-end.
➢You can use JavaScript for front-end rendering and then reuse it later in the back-
end, which is one of the key benefits of writing JavaScript.
50
 Back End Development ( Cont’d) [ Frameworks]

❖ [Link]
▪ This language is mostly beneficial if applications are used in real-time such as chats and
online games.
▪ [Link] is mostly used for building back-end services like APIs, Web Applications, or
Mobile Applications.
▪ It uses Express framework for web application development.
▪ It’s used in production by large companies such as Paypal, Uber, Netflix, LinkedIn,
Netflix, Walmart etc.

51
 Website Development Process

52
 Web Development Principles

❖ Good website design needs a wide range of professionals having expertise in different areas.
▪ Their collective efforts need to be put in when there is a critical decision to take place.
❖ Some essential principles of good website design that must be considered while
developing a website.
▪ These design principles will definitely help web designers to develop awe-inspiring
designs and to enhance the usability of a website.
❖ Simple is the best: Over-designed website may not work.
▪ Putting too many elements on the page may lead to distracting visitors from the main
purpose of your website.
➢Simplicity always works in an effective web page design.
▪ A clean and fresh design of your website not only makes the website appealing but also
help user to navigate from one page to another seamlessly.
53
 Cont...

❖ Consistency: Consistency in website design matters a lot.

▪ Give your attention to matching design elements throughout each of the pages.

➢It can be understood that your fonts, sizes, headings, sub-headings, and button styles
must be the same throughout the website.

❖ Typography & Readability: No matter how good your design is text still rules the website
as it provides users the desired information.

▪ You should keep your typography visually appealing and readable for visitors, along with
tricky use of keywords and meta-data.

➢Consider using fonts that are easier to read.

54
 Cont...

❖ Mobile compatibility: Keeping in mind the ever-growing usage of smartphones, tablets, and
phablets, web design must be effective for various screens.

▪ If your website design doesn’t support all screen sizes, the chance is that you’ll lose the
battle to your competitors.

❖ Color palette and imagery: A perfect color combination attracts users while a poor
combination can lead to distraction.

❖ Easy loading: No one likes a website that takes too much time to load.

▪ So take care of it by optimizing image sizes, and combing code into a central CSS or
JavaScript file as it reduces HTTP requests.

➢Also, compress HTML, JavaScript, and CSS for enhanced loading speed.
55
 Cont...

❖ Easy Navigation: shows that visitors spend more time on websites that have easy
navigation.

▪ For effective navigation, you may consider creating a logical page hierarchy by
designing clickable buttons.

❖ Communication: The ultimate purpose of the visitors is to get information, and if your
website is able to communicate with your visitors efficiently, most probably they would
spend more time on your website.

56
 Tools

❖Sublime Text

❖Notepad++

❖Visual studio code

57
 Reading assignment

❖Programming Vs scripting language

❖Recognize universal addressing(TCP/IP, DNS)

❖Universal protocol(HTTP, URL, HTML FTP)

58
 The End !!
59