Web DevelopmentLab. Bases de Dados e Aplicações Web

MIEIC, FEUP 10/11

1

Sérgio Nunes

Summary

• The Internet

• The World Wide Web

• Web Technologies

2

Introduction

3

Previous Experience?

4

Web and Internet

• What is the Internet?

• What is the Web?

• Which technologies are used in WebDev?

5

Web Applications

• What are Web Applications?

• Advantages and disadvantages of WebApps?

6

Web Applications

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

7

Pros of Web Apps

• Platform independence.

• Easier updates & bug fixes.

• Access from anywhere.

• No piracy.

• No installation hurdles.

• Developers can measure user interaction.

8

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

The Internet

10

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.

12

13

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.

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

Hardware• The router is the core hardware equipment used to

connect different networks.

• An internet is a set of networks connected by routers.

16

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

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’scomputers

(a)

(b)

19

20

Internet Protocols

IP

RSVPOSPFIGMPICMP

TELNETSMTPHTTPFTPBGP 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

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

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

23

Internet Services

• DNS — IP addresses to symbolic names.

• SMTP — electronic messages.

• FTP — file transfer.

• Gopher — document search and access.

• WWW — hypertext information system.

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

25

Gopher

The World Wide Web

26

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

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

29

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.

31

32

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

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

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

W3C Standards• Accessibility

• HTML, CSS

• eGovernment

• Electronic Commerce

• Geospatial

• Semantic Web

• Internationalization (i18n)

• MathML

• P3P

• Web Services

• SVG, PNG

• VoiceXML

• XML

• ...

36

• 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

38

Web Architecture

• The Web is supported by three core technologies:

• Uniform Resource Locators (URL)

• HyperText Transfer Protocol (HTTP)

• HyperText Markup Language (HTML)

39

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

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

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

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

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

Typical HTTP Session1. 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

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

Cookies

47

ServerClient

1. Browser send a request.

2. Server sends response + cookie.

3. Browser send another request + cookie.

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

Web Technologies

49

Evolution

50

Static Web Pages

51

• Early 90s.

• Static files served from the filesystem.

• Pages constructed at design time.

• Few technologies.

• Learning by example — “view source”.

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.

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

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

3-Tier System

• Web Applications are typically structured in three tiers. Classic MVC design pattern.

55

Client Interface

Business Logic

Data Management

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.

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.

Client-Side

58

• Will cover: HTML, CSS, jQuery, AJAX.

• Also notes on Accessibility and Usability.

Further Reading

• “As We May Think” (1945)Vannevar Bush. Atlantic Monthly.

• Computer Networks and Internets (2004)Douglas Comer. Prentice Hall.

• Opera Web Standards Curriculumhttp://dev.opera.com/articles/wsc/

• Programming the World Wide Web (2010)Robert W. Sebesta. Pearson.

59