Introduction to a web-app

Introduction to a web-app

Hi everybody. I am Tanmai, and we will be going of the unit
2 which is an Introduction to a web-app. In this unit we will be talking about what
a web-app is, and the latest terminologies and some of the dragons that are commonly used when talking about web-apps. For those of you who are familiar to web-apps this unit might be a little basic, but for the rest of you urge to pay closer attention
because, we will be attaching a lot meanings to the word commonly used like, browser, and DNS, and domain, and URL, web address and things like that. Into a more concrete understanding so that
we have visual in her heads of all these terms means and how they all fit in together. There are 2 main learning objectives to this
unit. The first is to get familiar with the basic
terminology of web-apps, and second is to convert our basic understanding our basic
day to day understanding of web-apps into a more technical understanding. What is a web-app? A web is a client server application that
runs on a web browser. We will be understanding what this means,
what a client server application and web brewer is in more detail or in more details of the
course, but for now let us take an example. Let us take Wikipedia as an example; it is
a site that almost all of us have probably used. The way we used the Wikipedia is that we search
for a particular topic, may be on Google we find a link to a Wikipedia page, we click
on the Wikipedia page, and the content rolls up you browse the content. But apart from these users of Wikipedia, readers
just like you and me get to edit Wikipedia pages and update on that. Another example of an application that we
use in our browser is g mail or may be hot mail, and how this works is that there is
the sort of text box in our browser where we typing texts which comes in email, which
goes somewhere and gets stored in central database and gets sent to another user who is the recipient for email and that user is able to see his email again from this central database of emails and replied to that email. These are two typical applications that we
used today in our browser. And as you can see Wikipedia is more of a
website, where as g mail is more of an app, but they all technically same thing; which
is why during this course when we say web-apps we will use that to mean web-applications
or web sites or web page because they are technically same thing. So, let us look at the typical experience
using or browsing a web-app. For example, we open a Firefox, we enter Wikipedia address, Firefox loads page and we see the Wikipedia page. If we look it this carefully there are 4 main
steps that we follow; we opened up something called a browser, we address we entered the web address, the browser fetch the data from the server which is where you saw this connection icon to blue icon, and then the browser display the web page. These are the sort of 4 steps that we did. And now, let us go little more detail understanding
of what each of these 4 steps is – the first thing that we did is we used something called a Browser. What is a Browser? A browser is software which we install on
our devices, we install them on computers or install them on mobile phones, and a browser helps us use web-apps or websites, for some examples of browsers are Chrome and Safari and Internet Explorer and Firefox. The main function of a browser is to make
request to a server using URLs or web addresses and to render the response data. A browser renders the response that it has
receives from the server and display. For example, browsers can display textual
data. For example, flipkart dot com slash dot txt,
would up the text file. Browsers can also load png file, for example, this URL will take it to a png file which is of minute, browser can also pdf file. So, browser can understand variety of data
and they fetch this data when it request to server. A computer program, any computer program that
makes a request to a server and fetches that response and process is called clients. And when this programs request to web servers
they are called web clients. A browser is what is technically called a
web client. Modern browsers apart from the rendering data
can also interpret and run the code, code which is written by the application often. This feature of the browser has become fastly more powerful in the last 10 to 15 years, and this feature is what makes web-apps today interactive and dynamic. So let us take an example of the site that
we all use Facebook. If you look at Facebook there is a friend’s
icon on top, when you click on it there is a pop that pops down and shows you the friend
request. Now, the way works is that a Facebook the
developer wrote code in Javascript that told the browser, that when the user clicks on
this icon display this pop up box and this element of interactivity was only possible
because, the browser was able to run code with the application Another example of using javascript in the
browser to make the web page dynamic is your news feed. If you look at a Facebook news feed it keeps refreshing itself on periodically, and that is because the application offer or the developers of Facebook wrote code that tells the browser to pull the server and to keep requesting
the server and check for updates. And if there is ever and update in the content, to fetch the updated content and display that. The browser is able to give us interactivity
and give us dynamic content without refreshing the web page, while we on the same web page which is in this case Facebook dot com and this happens because of javascript. We looked at what a browser is. The second step in our browsing experience was entering the web address. A web address is an informal term for what
is formally called URL. URL which is stands for Uniform Resource Locator
is what helps us find something on the internet. So, it helps us find server and resource on
that server. For example, in this case you are making a
request to and go into the books page, and on the books page is searching for
books related to the topic web-app, and the URL that links us to this resource is this. If we break down the URL into the separate
portions, the first portion of the URL which is red color is called the Protocol. We will get into the more detail of what a
protocol is in the next few lectures, but for now the most common two protocol it will
see are http and https The second portion in blue of the URL is what
is called a Hostname. Hostnames, usually contain the domain name
which in this case The host name helps us identify the server
to which you are making a request. The next part of the URL is the green portion
which is the Path. The path is an extra piece confirmation that
the browser sends to the server to request for more specific resource on that server. In this case for example, we are looking for
the books page and the books content of The next portion of optional of the URL is
called the Query String, which is the portion that usually comes in after the question mark
symbol. That if you look at the path, the path could
be usually separated by the slashes. Then the end about that you might have portion
that is, that come after question mark. This portion is called the Query String. The query string in our case contains web-app. The query string allows the browser to make
a most specific request to the server or to pass additional parameters to the server while
making the request. So, all in all a URL tells, using the http
protocol go to search the books resource and fetch those books which
are relevant to web-app. We look at the first part of our browsing
is the browser, the second part which was the web address of the URL. And now, the browser has to make request to
the server, but it cannot make a request to the server based on the URL because computers
on the network are only identified by what is called that IP Address. An IP address, think of IP address has a sort
of telephone number that identifies computer on network. Now, each server must have a unique IP address
which clients can use to connect with it over the internet or over any network in fact. However, IP addresses are inconvenient for
us to remember. For example, if you look at the IP address
of is that IP address finds to server that serves page. Now, it would be very cumbersome for humans to try to remember this IP every time you want to Google search, which is one there
exist directory, a directory called Domain Name System, which has human readable words
which are separated by separated by dots that are map to IP addresses. For example, has the IP address, Facebook dot com has IP address, and this directly maintained global program like a browser can exchange the domain name for an IP. So, our browser exchanges the domain name
say, for example or for an IP and then makes a request to that
particular IP. This process of exchanging domain name for the registered IP address is called “DNS lookup.” Now we have a browser, our browser had a web address, our web address could now point to an IP using the domain name system, but how does this request get to the server. Are the requests most from our computer or our browser to a server over the network. And if you kind of traced at the high level,
let us say our computer makes request to web server request to a web server it goes to
a router, our router then connects as to our internet service provider which could be Airtel or BSNL or ACT and several co router are connected to each other, the cables underneath the oceans,
or underground. And then again through these co-routers our
connection moves into server, and so our request is moving from our computer all the way into
the servers’ computer, where the request is processed and response is generated and sent
all the back. So, this network helps us transfer our request
to the destination. And the most popular way to communicate over a network is by mentioning the IP of the other computer. Now we had browser, we entered the URL, we
found out the IP address of the server by using the domain name system, we use to understood
the there was a network without which the browser could not have reach the web server, and now we must understand what a web server is. And so, if you look at this diagram that a
browser is making a request over the network the request goes to particular computer, and then on that computers a piece of software and this software is called a Web Server. And this software’s job is to listen to
a request and respond back with data on the same connection, and this software is called a Web Server. Then commonly the word server is also used
to refer the actual computer which more technically called the host, on which this web server
is installed. So, the web server might refer to the software that is actually listening to the request and responding, or it could also refer to
the machine on which the software is installed. Let us do a briefly recap of what we covered. This was typical browsing , we then took those step and examine them in detail and saw what is data technical component is came together when we use the web-app. So we looked at, what the browser is, what
a URL is, what the DNS is, what the network is, what the web server is, and what the server client – server architecture is, at very very high level.

Danny Hutson

31 thoughts on “Introduction to a web-app

  1. accordingly……….. can we create a app that can record screen, create launchers, security apps for mobile os .. using this course??? plz let me know …….. some apps need a updated os to run ….. why is this so ?

    thank you ..

  2. Im curious. how come there is no repeated IP for any sites? what's the difference between the ip address we have when we connect our personal computer with the internet and the server we hosted for a website? There will be so many servers up and down every single day, how do one make sure that one certain ip is not repeated ?

  3. hello sir, l registered for January course until I didn't get any mode of information to join the course. so please how can I start my course. ..

  4. Hi, everybody, I am new in this course of mobile apps development.They will upload the video, of course, mobile apps development or they will teach live like the conference.

Leave a Reply

Your email address will not be published. Required fields are marked *