Chapter One

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 81

INTERNET PROGRAMMING I

CHAPTER ONE
Content
• The Internet

• The World Wide Web

• HTTP

• Web Technology

• Web Tools

Chapter One
IP I -
2
The Internet
• By late 1960s and early 1970s, the US Department of Defense (DOD)
became interaction in developing a large computer network called
ARPANET

• GOAL:
 to facilitate communications, information sharing , remote
computing access for research working on DOD contracts

• Requirement :
 Network to be robust so that even if some nodes are lost due to
sabotage, war or other reason the network would continue

Chapter One
functioning

• By the mid 1980's the US national science foundation created a


network called NSFNET

IP I -
3
The Internet
• NSFNET
 Originally for non - DOD funded places
 initially connected five super computer centers at five
universities
 By 1990, it had replaced ARPANET for non-military uses
 By 1992, NSFNET connected more than 1 million computers
 In 1995 a small part of NSFNET become a research work and the
rest become known as INTERNET

Chapter One
IP I -
4
The Internet
• Brief history
 began as a US Department of Defense network called ARPANET(1960s-70s)
 initial services: electronic mail, file transfer
 opened to commercial interests in late 80s
 WWW created in 1989-91 by Tim Berners-Lee
 popular web browsers released: Netscape 1994, IE 1995
 Amazon.com opens in 1995; Google January 1996
 Hamster Dance web page created in 1999
 Wikipedia launches 2001, MySpace in 2003, Facebook in 2004

Chapter One
IP I -
5
The Internet
• Key aspects of the internet
 subnetworks can stand on their own
 computers can dynamically join and leave the network
 built on open standards; anyone can create a new internet
device
 lack of centralized control (mostly)
 everyone can use it with simple, commonly available
software

• Challenges

Chapter One
 varieties of network
 work ,hardware and software introduced making
communication difficult
 the challenge was resolved by creating protocol Eg. TCP/IP

IP I -
6
The Internet
• People and organizations
 Internet Engineering Task Force (IETF): internet protocol
standards
 Internet Corporation for Assigned Names and Numbers
(ICANN): decides top-level domain names
 World Wide Web Consortium (W3C): web standards

Chapter One
IP I -
7
The Internet
• What is Internet?
 a huge collection of computers and other devices that are
connected into a network and use TCP/IP communication
protocol
 it is a worldwide network of computer network through TCP/IP

Chapter One
IP I -
8
The Internet
• IP Address
 a simple protocol for attempting to send data between two
computers
 every node has a unique numeric address
 IPV4 – 32 bit
 IPV6 – 128 bit
 an IP address can correspond to a domain

Chapter One
IP I -
9
The Internet
Transmission Control Protocol (TCP)
• adds multiplexing, guaranteed message delivery on top of IP

• multiplexing: multiple programs using the same IP address


 port: a number given to each program or service
 port 80: web browser (port 443 for secure browsing)
 port 25: email
 port 22: ssh
 Port 23: telnet

Chapter One
• IP + TCP = TCP/IP

• some programs (games, streaming media programs) use simpler UDP


protocol instead of TCP

IP I -
10
World Wide Web (WWW)
• Informally people often use the terms "Internet" and "World Wide Web" (WWW)
interchangeably, but this is inaccurate: the WWW is in fact just one
of many services delivered over the Internet. Web uses internet to pass
over the information.
• WWW, is a system of interlinked, hypertext documents accessed through the
Internet.
• The web provides a communication platform for users to retrieve and exchange
information over the internet.

• Tim Berners-Lee, a British scientist, invented the WWW in 1989-1991, while


working at CERN.

• The Web was originally conceived and developed to meet the demand for

Chapter One
automated information-sharing between scientists in universities and
institutes around the world.

• The objective behind the invention of WWW was to merge the evolving
technologies of computers, data networks and hypertext into a powerful and

IP I -
easy to use global information system.

11
Brief History of WWW
• In November 1990, Tim Berners-Lee, together with CERN colleague, Robert
Cailliau, submitted a formal management proposal for ‘World Wide Web:
Proposal for a Hypertext Project’.
• By Christmas 1990, Berners-Lee had defined the Web’s basic concepts, that
make it possible for users to locate and share information through the
Internet.
• HTML (Hyper Text Markup Language): The markup (formatting) language
for the web.

• HTTP (Hypertext Transfer Protocol): A set of rules for transferring


data across the Web (between a server and a client).

Chapter One
• URL (Uniform Resource Locator): A kind of “address” that is unique
and used to identify to each resource on the web.

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

IP I -
• 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.
12
Brief History of WWW
• 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.
• The web began to enter everyday use in 1993-4, when websites for general
use started to become available

• 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

Chapter One
• The next few years saw the launch of websites such as yahoo (1994), amazon
(1995), ebay (1995) and google (1998).

IP I -
13
Pre – Assessment
1. By its nature, WWW is _________ ?
A. Transactional
B. Linear
C. Passive
D. Self- reflective

Internet Programming lec 1


14
World Wide Web
The Nature of the web
 One to one relationship
 Enable users to decide what information to access and
when to access it on personal based
 Web by its nature transactional
 User can switch to another site and another business
any time they choose
 Mass media is mostly passive unlike web

Internet Programming lec 1


15
World Wide Web
The Nature of the web
 Web is non- linear medium
 Users can navigate through one line to the next one page to
the next with out keeping the sequence
 The most distinctive feature of the web is its interactivity with
the user

Internet Programming lec 1


16
World Wide Web
• Elements of a WWW
 Web Sever and Clients
 Web browser
 Webpage/ website
 URL
 DNS

Internet Programming lec 1


17
World Wide Web
Web servers and browsers
• Web server is application software to receive the request from
the client and given response according to the request of the
server
• web server: software that listens for web page requests
 Apache → PHP
 IIS → ASP
 Tomcat Apache → JSP

Internet Programming lec 1


• web browser: fetches/displays documents from web servers
 Netscape Navigator
 Mozilla Firefox
 Microsoft Edge
 Apple Safari
 Google Chrome
 Opera

18
World Wide Web
Domain Name System (DNS)

• a set of servers that map written names to IP addresses


 because names are easier to remember than IP addresses
 Example: www.google.com → 8.8.8.8

• many systems maintain a local cache called a hosts


file (looking up domain names is expensive)

Internet Programming lec 1


 Windows: C:\Windows\system32\drivers\etc\hosts
 Mac: /private/etc/hosts
 Linux: /etc/hosts

19
HTTP Request URI
• Request-URI is the portion of the requested URI that
follows the host name (which is supplied by the required
Host header field)
Ex: /is Request-URI portion of
http://www.example.com/

• URI’s are of two types:


 Uniform Resource Name (URN)

Internet Programming lec 1


 Can be used to identify resources with unique names, such as books
(which have unique ISBN’s)
 Scheme is urn
 Uniform Resource Locator (URL)
 Specifies location at which a resource can be found
 In addition to http, some other URL schemes are https, ftp, mailto, and
file

20
World Wide Web
Uniform Resource Locator (URL)

• an identifier for the location of a document on a web site

• a basic URL:

http://www.google.com/info/regesstepp/index.html

Internet Programming lec 1


protocol host SLDN TLD path

• upon entering this URL into the browser, it would:


 ask the DNS server for the IP address of www.google.com
 connect to that IP address at port 80
 ask the server to GET /info/regesstepp/index.html
 display the resulting page on the screen

21
World Wide Web
More on URL
• anchor: jumps to a given section of a web page
http://www.textpad.com/download/index.html#downloads
 fetches index.html then jumps down to part of the page
labeled downloads

• port: for web servers on ports other than the default 80

http://www.cps.gordon..edu:8080/secret/money.txt

Internet Programming lec 1


• query string: a set of parameters passed to a web program
http://www.google.com/search?q=miserable+failure&start=10
parameter q is set to "miserable + failure“ parameter start is set to 10

22
URI VS URL
• The terms “URI” and “URL” are often used interchangeably, but they
are not exactly the same.

• A URI is an identifier of a specific resource. Like a page, or


book, or a document.

• A URL is special type of identifier that also tells you how to


access it, such as HTTPs, FTP, etc – like http://www.google.com

• If the protocol (http, ftp,…) is either present or implied for a


domain, you should call it a URL even though it’s a URI.

Chapter One
IP I -
23
How WWW Works?
• The web works on a "client-server model".
• Client-server architecture is an architecture of a computer network
in which many clients (remote processors) request and receive service
from a centralized server (host computer)
• Clients are the typical web user's internet-connected devices and
web-accessing software available on those devices. Client is capable
of receiving information or using a particular service from the
service providers (Servers).

• Server is a remote computer which provides information (data) or


access to particular services. It stores webpages, sites, or apps.
When a client device wants to access a webpage, a copy of the webpage

Chapter One
is downloaded from the server onto the client machine to be displayed
in the user's web browser.

IP I -
24
How WWW Works?
Following steps explains how the web works:

• User enters the URL of the web page in the address bar of web browser.
• The client, which is your ccomputer, more specifically the browser you
are using, sends a request to the Domain Name Server for the
corresponding IP address.

• After receiving IP address, browser sends the request for web page to
the web server using HTTP protocol which specifies the way the browser
and web server communicates.
• Then web server receives request using HTTP protocol and checks if the
page exists, if it exists the server will send the HTML page in
response

Chapter One
• Now the web browser receives the web page. It interprets it and display
the contents of web page in web browser’s window.
• If the requested page doesn’t exists then the server sends a 404 Error

IP I -
code which means the web page doesn’t exist on the server.

25
How WWW Works?

An important disadvantage of
the client-server model is
that if too many clients
simultaneously request data
from the server, it may get
overloaded. In addition to

Chapter One
causing network congestion,
An important advantage of the client- too many requests may result
server model is that its centralized in a denial of service.
architecture helps make it easier to

IP I -
protect data with access
controls that are enforced
by security policies.
26
Hyper Text Transfer Protocol
(HTTP)
• HTTP is based on the request-response communication model:
 Client sends a request
 Server respond on request

• HTTP is a stateless protocol:

• The protocol does not require the server to remember anything


about the client between requests.

Internet Programming lec 1


27
HTTP
• Normally implemented over a TCP connection (80 is standard
port number for HTTP)

• Typical browser-server interaction:


 User enters Web address in browser
 Browser uses DNS to locate IP address
 Browser opens TCP connection to server
 Browser sends HTTP request over connection

Internet Programming lec 1


 Server sends HTTP response to browser over connection
 Browser displays body of response in the client area of the
browser window

28
HTTP
• The HTTP protocol can be likened to a conversation based on
a series of questions and answers, which we refer to
respectively as
 HTTP requests and
 HTTP responses

• The contents of HTTP requests and responses are easy to


read and understand, being near to plain English in their
syntax.

Chapter One
IP I -
29
The Internet

Internet Programming lec 1


30
HTTP
• The HTTP Request
 After opening a connection to the intended server, the HTTP
client transmits a request in the following format:
1. start line/ Request line
2. A header lines /
3. A blank line / empty line
4. A message body / optional body

Chapter One
IP I -
31
HTTP
Connect $ telnet www.example.org 80
Trying 192.0.34.166...
Connected to www.example.com (192.0.34.166).
Escape character is ’^]’.
Send Request

Internet Programming lec 1


GET / HTTP/1.1
Host: www.example.org
Receive Request
HTTP/1.1 200 OK
Date: Thu, 09 Oct 2003 20:30:49 GMT

32
HTTP Request
1. Start line / Request line include
 Three space-separated parts:
 HTTP request method
 Request-URI (Uniform Resource Identifier)
 HTTP version
Example: GET index.html / HTTP/1.1
method uri version

Internet Programming lec 1


33
HTTP Request methods
• Common request methods: name of http methods called by the
clients
 GET
 Fetch a document using the URL
 Used if link is clicked or address typed in browser
 No body in request with GET method
 POST
 Execute the document using the data in the body
 Used when submit button is clicked on a form
 Form information contained in body of request

Internet Programming lec 1


 PUT
 Stored a new document on a server
 Filename upload
 DELETE
 Remove a document from the server
 HEAD
 Fetch just the header of the document
 Requests that only header fields (no body) be returned in the response

34
HTTP Request header
2. Request header
 contains additional information about the client
 Header lines are used to send information about the request, or
about the data being sent in the message body
 Format identifier : value
 Host
 User agent
 Accept image

Internet Programming lec 1


 Accept language
 Eg. GET index.html http/1.1
 HOST www.example.com
 User agent : mozila [EN]
 Accept image/gif,image/jpeg,text/html
 Accept language : en
 Accept character set ISO-8859

35
HTTP Request
• Common header fields:
 Host: host name from URL (required)
 User – Agent : type of browser sending request
 Accept : MIME type of acceptable documents
 Connection: value CLOSE tells server to close connection after
single request/response
 Content-Type: MIME type of (POST) body, normally application/x-
www-form-url encoded

Internet Programming lec 1


 Content-Length: bytes in body
 Referer: URL of document containing link that supplied URI for
this HTTP request

36
Multipurpose Internet Mail
Extensions (MIME)
• MIME is a kind of add on or a supplementary protocol which allows non-ASCII
data to be sent through SMTP

• The Limitations of Simple Mail Transfer Protocol inforce MIME

• It allows the users to exchange different kinds of data files on the


Internet:
 audio, video, images, application programs

• MIME header is basically inserted at the beginning of any e-mail transfer

Chapter One
IP I -
37
MIME
• MIME Header:
 MIME Version – Defines version of MIME protocol. It must have the
parameter Value 1.0, which indicates that message is formatted using MIME.
 Content Type – Type of data used in the body of message. They are of
different types like text data (plain, HTML), audio content or video
content.
 Content Type Encoding – It defines the method used for encoding the
message. Like 7-bit encoding, 8-bit encoding, etc.
 Content Id – It is used for uniquely identifying the message.
 Content description – It defines whether the body is actually image, video
or audio.

Chapter One
IP I -
38
Multipurpose Internet Mail Extensions
(MIME)
• Convention for specifying content type of a message
 In HTTP, typically used to specify content type of the body of
the response

• MIME content type syntax


 Top – level type / subtype

• Examples: text/ html, image/ jpeg

Internet Programming lec 1


39
HTTP Response
• Very similar to requests

• Structure of the response:


 Status line
 Header field(s)
 Blank line
 Optional body

• Eg. http/1.1

Date Mon,24 oct 2016 15:19:10 GMT

Internet Programming lec 1


Server Appache 13.0.4 ( Red Hat Linux )

Last_Modified Sat,14 oct 2016 04:12:00 GMT

Accept Range :byte

Content _ length 288

Connection : Close

40
HTTP Response
• The HTTP Response
 In answer to such a request, the server typically issues an HTTP
response
 the first line of which is often referred to as the status line:
 HTTP version
 status code a three-digit integer the server echoes
 a short message known as a reason phrase

 Example :HTTP/1.0 200 OK


 The first digit of the status code usually gives some clue about the
nature of the message:

Chapter One
 1**—Information - request received still in process
 2**—Success - Correct request processed correctly
 3**—Redirected - the request must be repeated or redirected
 4**—Client error - the request cannot be processed

IP I -
 5**—Server error - the server has failed trying to process

41
HTTP Response
• Some commonly encountered HTTP response status codes

Chapter One
IP I -
42
HTTP Response
• The response may also contain header lines each containing a
header and value pair similar to those of the HTTP request but
generally containing information about the server and/or the
resource being returned:
 Server: Apache/1.3.22 Last-Modified:
 Fri, 24 Dec 1999 13:33:59 GMT

Chapter One
IP I -
43
Web Technology and Tools
Web 1.0
• Evolution of WEB
• The first version of web Web 1.0 also referred as Syntactic web or
read only web is the era (1990–2000) where the role of a user is
limited with consuming information provided by the content
producers.
• There is no option given for user or consumer to communicate back
the information to the content producers.
• During this early phase of web development, web pages were mostly
static documents read from a server and displayed on a client, with
no options for users to contribute content, or for content to be

Chapter One
tailored to a user's specific demands.

▪Closed,
▪individual publishing,
▪One-way communication,

IP I -
▪Passive involvement,
▪Read – only content and personal websites

44
Evolution of WEB Web 2.0
• The Web 2.0 also referred as Social Web or read-write web is the era
(2000–2010 and continues even now) which facilitates interaction between
web users and sites.

• Previously a consumer of content provided by others, the web user has now
become a prosumer, capable of adding information to a web page, and in
this way communicating not only with the server, but through the server
with other clients (users) as well.

• These Web 2.0 technologies have made possible a wide range of social web
sites now familiar to everyone, including chat rooms, blogs, wikis,
product reviews and e-markets.
• Collaborative,
• Group Participation,

Chapter One
• Two-way communication,
• Active involvement,
• user- generated content and blogging
• Collaborative,
• Group Participation,

IP I -
• Two-way communication,
• Active involvement,
• user- generated content and blogging
• Some of the famous Web 2.0 applications are Facebook, Youtube, Flickr,
Twitter etc., 45
Evolution of WEB Web 2.5
• The Web 2.5 is the concept to address the practical and real
evolution which we are currently seeing in our era 2010–2020
between Web 2.0 and 3.0.

• Web 2.5 is majorly


focusing on mobile
computing and evolution in
mobile technologies.
• Some of the technologies
which got introduced in
this era are Progressive
Web Apps(PWA), Accelerated
Mobile Pages(AMP) etc.

Chapter One
• To make in conceptually
clear we can call Web 2.5
as the convergence between
Social and Semantic web.

IP I -
On our way to Web 3.0 some of player like Amazon, Google,
etc., provides a service model in Cloud computing for
developers to create web applications for their users to 46
connect them on any devices, anytime and anywhere.
Evolution of WEB Web 3.0
• The Web 3.0 also referred as Semantic Web or read-write-execute is
the era (2010 and above) which refers to the future of web.
• In this era computers can interpret information like humans via Artificial
Intelligence and Machine Learning. Which help to intelligently generate and
distribute useful content tailored to a particular need of a user.

What if computers can understand meaning behind information


and what if they can learn “what we are interested in” ???

• They can help us find what we want

Chapter One
• They can recognize People, Place, Events, Companies, Product, Movies etc.,

• They can understand the relationship between things

IP I -
• Some of the examples of web 3.0 are Apple’s Siri, Googles Cloud API, Wolfram
Alpha.

47
Web 1.0 /2.0 /3.0 summary
Web 1.0 Web 2.0 Web 3.0
Mostly read only Widely read – write Portable and personal

Company Focus Community focus Individual focus


Home pages Blogs/ wikis Life stream /waves
Owning content Sharing Content Consolidating Content
Web forms Web applications Smart application
Directories Tagging User behavior

Internet Programming lec 1


Page views Cost per click User engagement
Banner advertising Interactive advertising Behavioral advertising

Britannica online Wikipedia The semantic web


HTML/ Portals XML/RSS RDF/ RDFS / OWL

48
Evolution of WEB

Chapter One
IP I -
49
Client-Side VS Server-Side
Programming
Frontend Backend
Runs on the user computer Runs on the server

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

Fully Visible Invisible


Scripts can beviewed by the user Scripts are not open to users.

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

IP I -
HTML, CSS, JavaScript, VBScript PHP, ASP, Phyton, Ruby, C#, Java
50
Front End & Back End
How website looks.. How website works..
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.

Chapter One
• Each side needs to communicate and operate effectively with the other as a
single unit to improve the website’s functionality.

IP I -
51
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.

Chapter One
IP I -
52
Front End Development
• The structure, design, behavior, and content of everything seen on browser
screen when websites, web applications, or mobile apps are opened up, is
implemented by front end developers.

• Responsiveness and performance are two main objectives of the front end.

• 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.

Chapter One
IP I -
53
Front End Development
Front End Languages
• HTML
• CSS
• JavaScript
• VBScript

Front End Frameworks and Libraries


• AngularJS
• React.js

Chapter One
• Bootstrap
• jQuery
• SASS

IP I -
54
Front End Development
Languages
HTML
• HTML stands for Hyper Text Markup Language.
• It is used for creating websites and web applications for 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

Chapter One
come pre-installed on iPhones, iPads, and Android phones have excellent support
for HTML5.

IP I -
55
Front End Development
Languages
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 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 define 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.
• CSS3 is the most widely used version, though CSS4 has been released

Chapter One
IP I -
56
Front End Development
Languages
JavaScript
• Developed by Netscape, it is good for network-centric web applications.
• It is a famous scripting language used to create the magic on the sites to
make the site interactive for the user.
• It is used to enhancing 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.
• With the breakthroughs of Node.js and AngularJS, JavaScript became the

Chapter One
undisputed frontrunner in-browser programming today

Most web developers use JavaScript for client-side scripting in order to be sure
their website works in all browsers.

IP I -
57
Front End Development
Languages
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-

Chapter One
drop components and sliders to give a Rich Interface to your site visitors.

IP I -
58
Front End Development
Languages
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.
• It gives different functionalities to the web pages and designs the user interaction in
a different manner.
• VBScript only worked in Internet Explorer while JavaScript was a cross-browser solution
that also worked in other browsers.

Chapter One
• 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!

IP I -
59
Front End Development
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.

Chapter One
IP I -
60
Front End Development
Frameworks and Libraries
React.js
• 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.

Bootstrap
• Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications.

Chapter One
• It is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first web sites.

IP I -
61
Front End Development
jQuery
Frameworks and Libraries
• 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.
• The claim of the developers is that jquery runs exactly the same across all browser

• Elaborating the terms, jQuery simplifies HTML document traversing and manipulation,
browser event handling, DOM animations, Ajax interactions, and cross-browser
JavaScript development.

Chapter One
SASS
• Syntactically Awesome Style Sheets
• It is the most reliable, mature and robust CSS extension language.

IP I -
• It is used to extend the functionality of an existing CSS of a site including
everything from variables, inheritance, and nesting with ease.

62
Back End Development
• 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

Chapter One
programming, are also included in the backend.

IP I -
63
Back End Development
• Server-side programming must deal with dynamic content. Most web
pages are not static since they deal with searching databases.

Server-side Uses

• It processes the user input


• Displays the requested pages

• Interaction with servers/storages

• Interaction with databases


• Querying the database

Chapter One
• Encoding of data into HTML

• Operations over databases like delete, update.

IP I -
64
Back End Development
Languages & Frameworks

PHP
• It is an open source, server-side scripting language
designed specifically for web development.
• Since PHP code executed on the server side so it is called
server-side scripting language.
• It has been used to create web applications for over 35 <!DOCTYPE html>
<html>
years, with multiple frameworks being available for the <head>
developers. <title> PHP Time</title>
</head>
• Wordpress runs on it and powers 25% of the websites today, <body>

Chapter One
<h1>Welcome</h1>
including most popular blogs and news websites. <?php $t = date("H");
if ($t < 12) { echo '<p>Good morning!</p>'; } else {
• It finds applications mainly in the fields of server-side echo '<p>Good day!</p>'; } ?>
and standalone web application development along with the </body>
</html>

IP I -
development of CMS systems.

• Notable websites built on PHP: Facebook, Wikipedia, Wordpress.

65
Back End Development
Languages & Frameworks

ASP.NET

• ASP.NET 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 web


sites, applications and services.
• Prior to ASP.NET, 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 ASP.NET are very different
technologies.

Chapter One
• .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

IP I -
apps. Additional frameworks, such as ASP.NET, extend .NET with components
for building specific types of apps.

66
Back End Development
Languages & Frameworks

Java
• Java was developed in an effort to create a simple, object-oriented
interpreted programming language.

• It was released in 1995 and quickly became the hottest new programming
language due in part to its promise of "write once, run anywhere".
• It was to act as an alternative to C++ which was widely used in
business applications of the 90s.
• But over time, Java far surpassed C++ in terms of popularity due to its
lower learning barrier and the highly distributable nature of Java

Chapter One
code.
• It is powerful in terms of scalability and it’s components are easily
available.

IP I -
• Java, with the help of the Java Virtual Machine, is a language that is
independent of platforms. This makes it the most popular programming
language for enterprises.
67
Back End Development
Languages & Frameworks

Java

• Spring is one of the most popular frameworks for Java web


applications and is usually considered essential in a Java
web developer's toolbox.
• However, development with Java can be over engineering,
and development time can take considerably longer than
other languages
• It is prevalent for large-scale applications, but you
should cconsider other programming languages for
smaller applications.

Chapter One
public class HelloWorld
• Java is widely used in the fields of application {
development, Big data, and web development. public static void
• Notable websites built on Java: Google, Amazon, eBay. main(String[ ] args)

IP I -
{
System.out.println("Hel
lo World");
} 68
}
Back End Development
Languages & Frameworks
Python

• Python is an interpreted, high-level and general-purpose programming


language.

• It was designed to be simple and easy to learn. Hence reducing the


overall development time of the project code.
• Lets you work quickly and integrate systems more efficiently.

• Its ease of coding, and support from the open-source community has
led to the exponential growth of Python

Chapter One
• Used by both beginners and as well as experienced programmers

• It has a set of different libraries and APIs that support data


analysis, data visualization, and data manipulation.

IP I -
69
Back End Development
Languages & Frameworks
Python

• It is also one of the most popular languages that can


handle complex scientific calculations and 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. from flask import Flask

Chapter One
app = Flask(__name__)
• Notable websites built on Python: Youtube, Instagram,
Dropbox, Quora. @app.route("/")
def hello():
return "Hello

IP I -
World!"
if __name__ == "__main__":
app.run()

70
Back End Development
Languages & Frameworks
Python

Chapter One
IP I -
71
Back End Development
Languages & Frameworks

Ruby

• Ruby started as an object-oriented scripting language. But


over time, it grew into an interpreted high-level general-
purpose programming language and started to become popular
at 2010s. #!/usr/bin/env ruby
• It combines some of the best features of all popular require 'sinatra'
programming languages. It is dynamic, functional and get '/' do
concise. redirect to('/hello/World')
end
• Mostly popular for small applications as it is suitable

Chapter One
for rapid web development. get '/hello/:name' do
"Hello #{params[:name]}!"
• Rails is the most popular framework to use with Ruby. A end
micro framework Sinatra can be better for beginners

IP I -
• Ruby is widely used in the field of web development, data
analysis and AI development.

72
Back End Development
Languages & Frameworks

C#

• Microsoft developed C# as a C-like programming


language with object-oriented features. This was part
of their .NET project.
• Initially, the language was seen as a copy of Java.
However, future developments brought a clear,
namespace HelloWorld
distinct identity to C#. {
class Hello
• C# offers a great developer experience. With {

Chapter One
static void Main(string[ ] args)
Microsoft’s backing and presence of over two decades, {
it has numerous libraries and frameworks. Console.WriteLine("Hello
World");
• Further, it is a platform-independent programming }
}
language.

IP I -
}

• C# is widely used in the fields of system


programming, game development, web development and
app development. 73
Back End Development
Languages & Frameworks

Node.js

• Node.js (released in 2009) is an open source and cross-platform runtime


environment for executing JavaScript code outside of a browser.

• You need to remember that Node.js is not a framework and it’s not a
programming language. Most of the people are confused and understand
it’s a framework or a programming language.

• It provides the ability to run JavaScript code on server-side. Those


who are already familiar with JaveScript do not have to learn anything

Chapter One
new since 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 to writing
JavaScript.

IP I -
74
Back End Development
Languages & Frameworks
Node.js

• This language is mostly beneficial if applications are used in


real-time such as chats and online games

• Node.js mostly used for building back-end services like APIs, Web
Applicaitons or Mobile Applications.

• It uses Express framework for web application development.

• It’s used in production by large companies such as Paypal, Uber,

Chapter One
Netflix, LinkedIn, Netflix, Wallmart and etc.

IP I -
75
Frontend VS Backend Development

Chapter One
IP I -
76
Other Important Concepts in Web
Development
Cross-browser Ccompatibility
• It is the practice of trying to make sure your webpage works across as many
devices as possible.

• This includes using technologies that all the browsers support, delivering
better experiences to browsers that can handle them (progressive
enhancement), and/or writing code so that it falls back to a simpler but
still usable experience in older browsers.
• It also involves a lot of testing to see if anything fails in certain
browsers, and then more work to fix those failures.
Responsive Webdesign
• Responsive web design is the practice of making your website functionality

Chapter One
and layouts flexible so they can automatically adapt to different browsers.
• An obvious example is a website that is laid out one way in a widescreen
browser on the desktop, but displays as a more compact, single-column
layout on mobile phone browsers.

IP I -
77
Other Important Concepts in Web
Development
Performance
• It means getting web sites to load as quickly as possible, but also
making them intuitive and easy to use so that users don't get frustrated
and go somewhere else.

Accessibility
• It means making your websites usable by as many different kinds of
people as possible (related concepts are diversity and inclusion, and
inclusive design).
• This includes people with visual impairments, hearing impairments,
cognitive disabilities, or physical disabilities.

Chapter One
• It also goes beyond people with disabilities — how about young or old
people, people from different cultures, people using mobile devices, or
people with unreliable or slow network connections?

IP I -
78
Other Important Concepts in Web
Development
Internationalization
• Means making websites usable by people from different cultures, who speak
different languages to your own.

• There are technical considerations here (such as altering your layout so


that it still works OK for right-to-left, or even vertical languages), and
human ones (such as using simple, non-slang language so that people who
have your language as their second or third language are more likely to
understand your text).

Privacy & Security


• These two concepts are related but different.

Chapter One
• Privacy refers to allowing people to go about their business privately and
not spying on them or collecting more of their data than you absolutely
need to.

• Security refers to constructing your website in a secure way so that

IP I -
malicious users cannot steal information contained on it from you or your
users.

79
Website Development Process

Chapter One
IP I -
80
Thank you for listening..
Any Questions?

Chapter One
IP I -
81

You might also like