[PPT] - Web Development Lab. Bases de Dados e Aplicaes Web MIEIC, FEUP PowerPoint Presentation

SLIDE 1

Web Development

Lab. Bases de Dados e Aplicações Web

MIEIC, FEUP 10/11

1

Sérgio Nunes

SLIDE 2

Summary

The Internet
The World Wide Web
Web Technologies

2

SLIDE 3

Introduction

3

SLIDE 4

Previous Experience?

4

SLIDE 5

Web and Internet

What is the Internet?
What is the Web?
Which technologies are used in WebDev?

5

SLIDE 6

Web Applications

What are Web Applications?
Advantages and disadvantages of WebApps?

6

SLIDE 7

Web Applications

A Web Application is a software system based on Web standards and technologies, that is accessible through a Web browser.

7

SLIDE 8

Pros of Web Apps

Platform independence.
Easier updates & bug fixes.
Access from anywhere.
No piracy.
No installation hurdles.
Developers can measure user interaction.

8

SLIDE 9

Cons of Web Apps

Depends on network connectivity.
Less sophisticated UIs.
Limited hardware access.
No platform integration (e.g. drag&drop).
Need to address browser versions.
Harder to debug.
Security risks.
Infrastructure costs.

9

SLIDE 10

The Internet

10

SLIDE 11

The Internet’s origins

11

USA Department of Defense Advanced

Research Projects Agency (ARPA) (1958).

Developed the idea of “networked

computers” witch led to the creation of the ARPANET in 1967.

Other networks appeared worldwide.

SLIDE 12

12

SLIDE 13

13

SLIDE 14

14

Packet-Switching

How to connect separate physical networks

without dedicated links?

Point-to-point connections do not scale.

Need to share the available resources.

Packet switching — divide data in small

chunks and send them separately.

Multiple connections over the same medium.

SLIDE 15

Internetworking

Proliferation of different networking

protocols became a problem when trying to connect all networks.

No network technology is ideal for all

scenarios (e.g. Ethernet, Wireless, DSL, etc.).

To achieve a homogeneous service across

heterogeneous networks we need both hardware and software.

15

SLIDE 16

Hardware

The router is the core hardware equipment used to

connect different networks.

An internet is a set of networks connected by

routers.

16

SLIDE 17

Software

To connect different networks we need

communication protocols.

These protocols establish message formats

and message exchanging rules.

The most important protocols for

connecting different networks are called the Internet Protocols or TCP/IP Protocols.

17

SLIDE 18

18

net 2 net 4 net 5 net 3 net 1 net 2 net 4 net 5 net 3 net 1 router physical net user’s computers

(a) (b)

SLIDE 19

19

SLIDE 20

20

Internet Protocols

IP RSVP OSPF IGMP ICMP TELNET SMTP HTTP FTP BGP SNMP TCP UDP BGP = Border Gateway Protocol FTP = File Transfer Protocol HTTP = HyperText Transfer Protocol ICMP = Internet Control Message Protocol IGMP = Internet Group Management Protocol IP = Internet Protocol OSPF = Open Shortest Path First RSVP = Resource ReSerVation Protocol SMTP = Simple Mail Transfer Protocol SNMP = Simple Network Management Protocol TCP = Transmission Control Protocol UDP = User Datagram Protocol

SLIDE 21

21

IP

The main function of the Internet Protocol

is to offer a virtual network, hiding the underlying physical networks.

Offers two fundamental services:
Addressing system (IP addresses).
Datagram structure (packets).

SLIDE 22

TCP

The Transmission Control Protocol offers a

reliable and ordered delivery of packets between applications in different computers.

Handles problems not addressed in the

lower layers: packet duplication and loss, or communication delays.

Supports important applications such as the

WWW, e-mail, FTP , etc.

22

SLIDE 23

23

Internet Services

DNS — IP addresses to symbolic names.
SMTP — electronic messages.
FTP — file transfer.
Gopher — document search and access.
WWW — hypertext information system.

SLIDE 24

DNS

24

The Domain Name System is an application

layer service of the Internet.

Translates human-readable symbolic names

to numeric addresses (IP).

Symbolic names are organized
hierarchically. The right-most element is the

top-level domain (TLD).

SLIDE 25

25

Gopher

SLIDE 26

The World Wide Web

26

SLIDE 27

WWW’s Origins

Invented in Europe at the European Council for

Nuclear Research (CERN) in 1989.

Joint work by Tim Berners-Lee and Robert

Cailliau to share and link information of various kinds, and where the user can browse at will.

Allow collaborators in remote sites to share

their ideas relating to common projects.

Initial proposal “WorldWideWeb” (W3).

27

SLIDE 28

Initial Success

WorldWideWeb source code released into

the public domain in 1993.

NCSA released Mosaic, a software program

that was a combined web browser and Gopher client.

Mosaic’s popularity led to the growth of

the World Wide Web.

28

SLIDE 29

29

SLIDE 30

30

Mosaic

Marc Andreessen and Jim Clark left NCSA

and founded Netscape Communications.

NCSA licensed Mosaic technology to

Microsoft to form the basis of Internet Explorer.

The “Browser Wars” started for the

dominance of the web browser market.

SLIDE 31

31

SLIDE 32

32

SLIDE 33

Web Browser Features

A web browser is a client software

application for retrieving, presenting and transversing information resources on the Web.

Web browsers communicate with web

servers using the HTTP protocol.

Increasingly sophisticated.

33

SLIDE 34

Web Browsers

There are four major layout engines:
Trident (Microsoft) — Internet Explorer.
Gecko (Mozilla) — Netscape, Firefox.
WebKit (Apple, Google, Nokia et al.) —

Safari, Chrome.

Presto (Opera) — Opera.

34

SLIDE 35

W3C

The World Wide Web Consortium was

founded in 1994 by TBL.

International standards organization that

develops technical specifications and guidelines for the Web.

Mission: “Led the Web to its full potential”.
The W3C does not enforce their

recommendations.

35

SLIDE 36

W3C Standards

Accessibility
HTML, CSS
eGovernment
Electronic Commerce
Geospatial
Semantic Web
Internationalization (i18n)
MathML
P3P
Web Services
SVG, PNG
VoiceXML
XML
...

36

SLIDE 37

A web server is a program whose primary

function is to deliver resources on clients’

requests. Only acts when requests arrive.
The most common web servers are the Apache

HTTP Server and Microsoft’s Internet Information Server (IIS).

Lightweight alternatives: nginx, lighttpd.
Typically different web servers coexist in a

production environment.

37

Web Servers

SLIDE 38

38

SLIDE 39

Web Architecture

The Web is supported by three core

technologies:

Uniform Resource Locators (URL)
HyperText Transfer Protocol (HTTP)
HyperText Markup Language (HTML)

39

SLIDE 40

URL

Establishes a unique address for World Wide Web resources

— e.g. pages, images, etc.

Used to locate Web resources.
Syntax: protocol://machine:port/directory/file.type
Protocol (http://, ftp://, file://)
Host (www.up.pt or 193.137.55.13)
Port (:80, the default)
Resource path (directory path to file)
Example: http://www.up.pt/sobre/index.html

40

SLIDE 41

HTTP

Defines how client machines communicate

with web servers to obtain web resources.

Joint work of IETF and W3C.
Request-response protocol — client issues a

request and waits for the server to respond.

Stateless protocol — each request is treated

as an independent transaction.

41

SLIDE 42

Request Methods

GET — Request representation of the resource.
HEAD — Request the headers (without content).
POST — Submit data to be processed to the

identified resource.

PUT — Upload data to the specified resource.
DELETE — Deletes the specified resource.

42

SLIDE 43

Status Codes

The first line of the HTTP response includes a numeric

status code. Codes are organized in five classes of responses.

1xx — Informational
2xx — Success (e.g. 200 OK, 201 Created)
3xx — Redirection (e.g. 301 Moved Permanently)
4xx — Client Error (e.g. 404 Not Found, 403 Forbidden)
5xx — Server Error (e.g. 500 Internal Server Error)

43

SLIDE 44

REST

The Web follows a RESTful design.
Representational State Transfer is an architectural style

for distributed hypermedia systems. Key principles:

Identification of resources — all available resources

are identified using a global naming scheme.

Uniform interfaces — servers adhere to a predefined

set of generic methods.

Stateless interactions — the server keeps information

about its resources, not about client interactions.

44

SLIDE 45

Typical HTTP Session

1. User types URL into browser.
2. The browser translates the symbolic name to an IP

address using the DNS service.

3. The browser opens a TCP connection with the server,

sends a HTTP GET request and waits for the response.

4. The servers responds with a set of headers and th

contents of the requested resource.

5. The browser processes the response received from the

remote server and proceeds with new requests if needed.

45

SLIDE 46

HTTP is Stateless

Web servers do not keep any information about clients.

Each request is isolated.

State is maintained by web applications.
How can we implement a stateful user experience over a

stateless protocol (e.g. shopping cart, authenticated access)?

Cookies — client-side pieces of data generated by the

server and attached to each HTTP request.

Sessions — server-side files with unique identifiers

(session IDs), these can be passes in URLs or Cookies.

46

SLIDE 47

Cookies

47

Server Client

1. Browser send a request.
2. Server sends response + cookie.
3. Browser send another request + cookie.

SLIDE 48

HTML

HyperText Markup Language (HTML) is used to define

the content and structure of hypertext documents.

Not a programming language.
First standard published in 1995 — HTML 2.0
HTML 4.01 published in 1999.
XHTML was a reformulation of HTML as XML. W3C

tried to “force” authors to write well-formed code.

HTML5 is the latest major revision to HTML.

48

SLIDE 49

Web Technologies

49

SLIDE 50

Evolution

50

SLIDE 51

Static Web Pages

51

Early 90s.
Static files served from the filesystem.
Pages constructed at design time.
Few technologies.
Learning by example — “view source”.

SLIDE 52

Dynamic Web Pages

52

Early 90s.
Programs as web pages.
Pages constructed at run time.
Common Gateway Interface (CGI) — defines

how web requests/responses interact with an application program.

Alternatives — Apache modules, IIS plug-ins,

FastCGI, WSGI.

SLIDE 53

Dynamic Web Sites

Multiple and coherent web pages.
Stateful experience (e.g. shopping cart).
Common data layer across pages.
Libraries and frameworks to address

repetitive and common tasks.

Richer user interfaces (e.g. JavaScript).

53

SLIDE 54

Web Applications

Rich and interactive user interfaces.
Strong developments in client-side

technologies and methodologies.

Dynamic documents with AJAX.
Rise of new web frameworks — Ruby on

Rails, Django, etc.

54

SLIDE 55

3-Tier System

Web Applications are typically structured in

three tiers. Classic MVC design pattern.

55

Client Interface Business Logic Data Management

SLIDE 56

Web Development

56

The modern web technology stack is huge.
Different technologies (at different tiers)

for the same task.

No one is a “web expert”.
Two areas — Client Side / Server Side.

SLIDE 57

Server-Side

57

Many options in server-side technologies.

As many as programming languages?

Also includes data management solutions

— filesystem, local-data, data server, etc.

Will cover: PHP

, Smarty, PEAR MDB2.

PostgreSQL for data.

SLIDE 58

Client-Side

58

Will cover: HTML, CSS, jQuery, AJAX.
Also notes on Accessibility and Usability.

SLIDE 59