Web

Languages and
Technologies

Bruno Veloso
brunov@upt.pt
09/09/2018

IMP.GE.190.0
 2

Goals for today…

1. Raise awareness for the use of the Internet as a means of

disseminating information
2. Knowing how the Internet and the World Wide Web
3. Definition of rules and best practices designing web pages

IMP.GE.190.0
 3

Internet. What is? As appeared? And why exists?

IMP.GE.190.0
 4

What is the difference between Internet and Web?

IMP.GE.190.0
 5

What means the term Internet?

InterNet - Interconnected Networks

•It is an infrastructure of computer networks, communication lines that

use protocols that enable computers to exchange information with each
other.
•All computers communicate using the IP protocol:
• IP address is short for Internet Protocol (IP) address.
• An IP address is an identifier for a computer or device on
a TCP/IP network.

Extra: IBM Redbook - TCP/IP Tutorial and Technical Overview

IMP.GE.190.0
 6

What is the Internet?

•The internet is a chain of networks of computers connected together -

millions of computers connected by conventional telephone lines, fiber
optic cables and satellite links, etc
•It is classified as the geographical scope as a WAN
•Its main objective is the free exchange of information

IMP.GE.190.0
 7

What can we do on the Internet?

•Consult and provide information (browse/surf…).

•Send Emails.
•Chats.
•Play on-line.
•Listen to radio and watch TV.

IMP.GE.190.0
 8

1st stage – the 60s

•It all started…

•At the time of the Cold War (1947-1991)…
•Need to link US labs cooperating US defense department ARPA
(advanced research projects administration).
•The first connection point was the University of California Los Angels,
the University of Utah and University of California Santa Barbara
(UCSB).

IMP.GE.190.0
 9

Internet Genesis - ARPA

The initial focus of the ARPANET

was remote login to computers and file sharing.

Extra:
ARPA history (PT)
ARPANET and the Origins of the Internet
IMP.GE.190.0
 10

2nd phase – the 70s

•The universities…
• They began to connect to the network, changing the
military objective to academic.
•The first international connection
• Between Britain, Norway and the United States for cable
media, radio and satellite.
•in 1971
• There were 15 connection points (ex .: NASA - National
Agency for Space Administration).

Extra: A BRIEF GUIDE TO THE HISTORY OF THE INTERNET

IMP.GE.190.0
 11

3rd phase – the 80s

•TCP/IP protocol:
• The language common to all Internet computers.
•The ARPANET gave birth to other networks:
• Milnet – military
• NSFNET– Academic
•The term Internet…
• It begins to be used to denote the set of all interconnected
networks which use TCP / IP protocol.
•Big companies…
• They begin to use the Internet to communicate among
themselves and with their customers.

IMP.GE.190.0
 12

4th phase – the 90s

•The ARPANET name is replaced by internet.

•Emerge…
• The first companies, suppliers of large network access
services have emerged in the US.
•Nowadays…
• There are tens of millions of servers around the world:
education, organizations, science, commerce, news,
music, movies, e-mail, etc..

IMP.GE.190.0
 13

Internet features

•It does not have an owner, and is not controlled by anyone.

•The organization of the Internet consists of the administrators of
networks that compose it and the users themselves.
•Even if a computer is turned off, the Internet still works.
•Computer with different hardware and software configurations able to
communicate.

IMP.GE.190.0
 14

Internet Components

IMP.GE.190.0
 15

Internet protocol

•Allows 2 different computers can understand

• Ex: 2 people of different nationalities agree to dialogue in English
•For the functioning of the Internet there are three protocol layers
• The lowest layer is called IP - Internet Protocol
• Defines the format of the message passing between
computers. Like morse code
• The intermediate layer is TCP, UDP and ICMP
• Define the vocabulary to communicate between computers
• In the highest layer is the application protocols
• DNS (domain information)
• POP3 (get emails)
• SMTP (send emails)
• HTTP(WWW documents)
• HTTPS (WWW secure documents)
• FTP (transfer files)
• BitTorrent (file sharing)
IMP.GE.190.0
 16

Components required to access the Internet (end user)

•Hardware:
• PC
• modem/router
• Network card and internet connection
•Software:
• Internet Browser
• ISP Service

Extra:http://youtu.be/pufxMP4ssCE
IMP.GE.190.0
 17

ISP Service

•ISP – Internet Service Provider

•An Internet Service Provider is a company that provides Internet access that is
normally paid.

•The most common forms are connected to an ISP through a telephone line
(dial) or a broadband (cable or DSL). Many ISPs provide additional services
such as e-mail accounts, web browsers, and space to create a website.

•Check your ISP provider : www.ipcatcher.net

IMP.GE.190.0
 18

Main ISP providers in Portugal

•Altice MEO
•NOS
•Vodafone

•See list of providers (service providers) of broadband in anacom website

•http://www.anacom.pt/render.jsp?categoryId=370555

IMP.GE.190.0
 19

Web Browser

•The internet connects two types of computers: servers, serving documents;

and customers who receive and present the documents to human.
•To access the web pages run programs "browsers" on our computers.

IMP.GE.190.0
 20

Top Web Browser

Src: http://gs.statcounter.com/press/firefox-browser-edges-out-microsoft-globally-for-first-time

IMP.GE.190.0
 21

The World Wide Web

IMP.GE.190.0
 22

What is the WWW?

•The World Wide Web (which means "world-wide network," also known as Web
and WWW) is a document system hypermedia that are interconnected and run
on the Internet
•The documents may be in the form of videos, sounds, and hypertext figures
•The WWW is, in general terms, the graphical Internet interface. It is an
organized information system in order to cover all other information systems
available on the Internet

IMP.GE.190.0
 23

When appeared

•The WWW service started in 1980 as an integrator of information, in which the

vast majority of information available on the Internet can be accessed simply
and consistently across different platforms

Extra:
http://www.webat25.org/about/history
http://www.telegraph.co.uk/technology/0/history-of-the-world-wide-web---25-years-in-25-pictures/

IMP.GE.190.0
 24

What is the purpose?

•Its basic idea is to create a world of information without boundaries, providing the
following features:
• consistent interface
• incorporating a wide range of technologies and types of documents
• "Universal reading."

IMP.GE.190.0
 25

What you need?

•A data transmission protocol - HTTP

•Its own addressing system - URL
•A markup language to transmit formatted documents over the network - HTML.

IMP.GE.190.0
 26

URL

•URL (Uniform Resource Locator)

•is the address of a resource (a file, printer, etc.), available on a network (local or
Internet)
•A URL has the following structure: protocol://machine/path/resources
•The protocol may be HTTP, FTP, etc.
•The machine field designates the server that provides the document or
designated resource (e.g. www.upt.pt)

IMP.GE.190.0
 27

How it works?

•The standard form of WWW information is hypertext, which allows the

interconnection between different documents, possibly located on different
servers, in different parts of the world
•Hypertext is encoded with Hypertext Markup Language (HTML), which has a set
of encoding tags that are interpreted by WWW clients (which are browsers, such
as Google Chrome) on different platforms

IMP.GE.190.0
 28

HTTP protocol

•The protocol used for transferring information on the WWW is HTTP. HTTP is an
application level protocol that has objectivity and speed required to support
distributed information systems, cooperative and hypermedia. Its main features
are:
• Communication between user agents and gateways, allowing access
to hypermedia and the various Internet protocols world.
• Follows the paradigm of request / response: a client establishes a
connection to a server and sends a request to the server, which
analyses and responds.
• The connection must be established before each client request and
closed after the response.

IMP.GE.190.0
 29

HTTP protocol diagram

IMP.GE.190.0
 30

Web evolution

Web 1.0 Web 2.0 Web 3.0

Web 2.0 is what we currently use,
stands out for being dynamic, unlike
the web 1.0 that is static.
The web 1.0 is considered cosmetic,
and their contents can not be
changed by end users.
It is dynamic indicates interactivity
and participation of the end user with
the structure and page content.
You can post comments, upload
pictures, share files and do a
thousand other things that web 1.0
does not allow.
The entire page content is read-only.
The Web 2.0 is participatory or
collaborative Web call.
The web 3.0 is an evolution of 2.0, it
has the intention to change the forms
of research to make life easier for
Web 2.0 users, so that can meet the
needs of today that are considered
data leakage.
The web 3.0 has also increase the
interactivity between man and
machine, improving the programming
languages for man and machine
speak the same language.
The Web 3.0 is Semantic Web call
or marketing.

IMP.GE.190.0
 31

Web evolution

IMP.GE.190.0
 33

The next step in internet evolution

IMP.GE.190.0
 34

The future of the Web

•Web 0.0 – Internet origins

•Web 1.0 – shopping carts and static web
•Web 2.0 – participatory and dynamic Web
•Web 3.0 – semantic web
•Web 4.0 – Web mobile (mobility adaptation)
•Web 5.0 – Emotional Web (like a personal assistant)

IMP.GE.190.0
 35

Exercise 1

•Create a HTML page with:

• Title
• Body text
• Background color
• Button – calls a function that changes the Body text

IMP.GE.190.0
 36

Exercise 2

•Create a HTML page with:

• Title
• Body text
• Background color
• 3 Input fields to implement a calculator
• Button – calls a function that changes the Body text with the result

IMP.GE.190.0
 37

IMP.GE.190.0