introduction to web programming - first course
TRANSCRIPT
Course Objectives
• Understand what is a web application• Be able to develop a simple web application• Develop the thinking patterns required to
adapt to the fast evolution of the web technologies
What I want from you
• Ask Questions – don’t leave anything unanswered (sometimes I’ll try to ask them for you)– Why ask questions? In order to understand something
you need to get answers but more important you need to want to get the answers and to know what questions to ask
• Work individually– Why? Learning happens when you work and discover.
That is how knowledge is constructed inside your head
What we’ll study in the course
• The Web – short history, why it was developed, how it evolved, where is it going
• How the web works, the HTTP protocol• Web technologies– Client-side languages (X)HTML– JavaScript
What you’ll do in the lab
• Write web pages using HTML and CSS• Develop a web application using the learnt
technologies• Develop a web page after a designer’s model
How you’ll get points
• The points you’ll receive will reward your: – Understanding at the concepts taught in the course
4p exam + 1p short course tests– Skills acquired in the lab – 2.5p individual lab work– Skills acquired through individual work & study – 2.5p
• TO PASS: – >=2.5p exam+course tests– >=2.5p lab work + homework
How you lose points
• Cheating – you will get expelled or fail the exam
• Not performing your work on time – you will lose points for delays
• Not being there – labs and course tests can’t be re-taken in case of absence
Course plan
1. Introduction & Short history of the web & Structure of the Web; the HTTP protocol;
2. XML, (X)HTML3. HTML +Cascading Style Sheets (CSS)4. Cascading Style Sheets (CSS)5. Client-side scripting languages – Introduction
to JavaScript6. Javascript (2)
Lab Plan
1. Show the basic http responses, customize error messages, how to alter http headers
2. Design a HTML page using the basic tags: A, IMG, TABLE, DIV, UL
3. Use CSS to transform the page designed at the previous lab.
4. Use Javascript to validate forms, modify page content using DOM
Short History of the WWW
• Why is it necessary?– The WWW had a very fast evolution– The technologies changed very rapidly– Innovation almost always brought huge benefits
to the innovators– In order to innovate you need to understand the
evolution of the web– You need to understand where the web is going
Before the web• Internet was already existing• Resources on the internet were found using command line tools
like ftp• Example:
– Run ftp program– Enter “C host” (connects to a server)– Enter username– Enter password– Ls (lists files)– Get file– Cd (change directory)
• There were no links• You had to know where the information was
The web vs. the internet• “The Web is an abstract (imaginary) space of
information. On the Net, you find computers -- on the Web, you find document, sounds, videos,.... information. On the Net, the connections are cables between computers; on the Web, connections are hypertext links. The Web exists because of programs which communicate between computers on the Net. The Web could not be without the Net. The Web made the net useful because people are really interested in information (not to mention knowledge and wisdom!) and don't really want to have know about computers and cables.” – Tim Berners Lee – the inventor of the web
The invention
• 1989 – Tim Berners Lee proposes at CERN a way to organize information using hyperlinks
• 1990 – he develops the first browser – “World Wide Web”
• 1991 – first web server• 1993 – “Date on the declaration by CERN's
directors that WWW technology would be freely usable by anyone, with no fees being payable to CERN. A milestone document.”
History of the web• 1992-93 – web sites of public and organizing entities –
worldbank.org, whitehouse.gov, ripe.net (manages ip’s)• 1994 Yahoo!• 1994 – the netscape browser• 1994 - World Wide Web Consortium (W3C) the
organization concerned with standards on the Web• 1995 – altavista, e-bay, javascript, HTML (
http://en.wikipedia.org/wiki/HTML ), PHP• 1996 - ASP• 1997 – flash player 2 – now on 99% on the computers on
the web
History of the web• 1998 – google • 1999 – microsoft passport (way to login with a
single identity on multiple web sites)• 1999 – rss – rich site summary – get live updates
from your favourite sites• 1999 – blogs first appeared• 2000 – XHTML appears• 2001 – wikipedia – now the world’s largest
encyclopedia• 2004 - facebook
How the web evolved (Yahoo)
How the web evolved (Amazon)
Amazon 1999 – product categories, featured products, accounts, personalization
Amazon 2009 – + user centered (what you wanted and what they recommend), blogs, page space better used
Conclusions• World wide web was first a way to link text documents• It evolved into
– Providing different kinds of content (images, video)– providing services for people (games, answers, news)– Providing means for people to create content (wikis, forums, social
networking applications, blogs)– Providing services for computers
• The content was first static – text pages that were rarely changed and only by the owner– Content became dynamic updated from the server’s database– Content became updated real time (without refreshing the page using
asynchronous technologies)– Content comes from different sources and it’s aggregated on a page
• During this course we’ll study the technologies that allowed these changes to happen
Client – Server architecture Clients communicate with a single
server Server awaits connections Client initiates communication Server receives a request and sends
a response Client receives the response and
decide whether or not to continue the communication
Examples: e-mail, dns, http
Peer to peer architecture There's no server in the network The clients are communicating
between them There are no intermediary entities Used primarily in resource sharing Examples: napster, kazaa, direct
connect, bitTorrent
Advantages and disadvantages of the Client-Server architecture
Advantages Many different types of clients, one common protocol Resources are centralized on a server – easier to find
and to distribute Disadvantages
Single point of failure (if the server is down the clients don't receive their responses any more)
The more clients there are the more crowded the server and the response time is longer
The HTTP Protocol
HTTP - Hypertext Transfer Protocol. Client-server protocol Http server – web server Http client – browser Http = protocol used to transmit resources
over the internet
HTTP Protocol – Basic Glossary (RFC 2616)
Connection - A transport layer virtual circuit established between two programs for the purpose of communication.
Message - The basic unit of HTTP communication, transmitted via the connection. Request - An HTTP request message Response - An HTTP response message Resource - A network data object or service that can be identified by a URI (address of a
resource) Client - A program that establishes connections for the purpose of sending requests. user agent - The client which initiates a request. These are often browsers, editors, spiders
(web-traversing robots), or other end user tools. Server - An application program that accepts connections in order to service requests by
sending back responses. inbound/outbound - Inbound and outbound refer to the request and response paths for
messages: "inbound" means "traveling toward the origin server", and "outbound" means "traveling toward the user agent"
What is an URL? URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] Examples:
http://www.google.com http://www.google.com:80/ig?refresh=1
The port 80 is default Hosts are case insensitive Paths are case sensitive Some reserved characters are “encoded”
Encoding means representing as hex an ASCII code Example: “ “ = “%20” http://tools.ietf.org/html/rfc2396
Structure of a HTTP Message
Request line / Status line Example: GET /index.html HTTP/1.1 GET=Request Method
Headers See here
Empty line Optional message body
HTTP Request Methods (most important)
GET – requests a specific resource (can send parameters that alters resources but it’s better not to)
POST – submits data (usually a form) to be processed
PUT – uploads a specific resource HEAD – identical to a GET resource but receives
only the headers DELETE – deletes a specific resource
Status lines
• First line of an HTTP response• Includes status codes• Types of status codes are:
• 1xx – informational – usually provisional responses• 2xx – success
• 200 Success – standard response when no errors occur• 201 Created – resource was created on the server
• 3xx redirects• 301 Moved Permanently – the resource was moved to the
next specified URI; the next requests should be made to the new URI
Status codes
• Types of status codes are:• 3xx redirects
• 302 Found – same behaviour as 303 – redirect code• 303 See Other – basic redirect to a new resource (a new GET
is required)
• 4xx Errors• 400 Bad Request • 401 Not Authorized – some sites require Http authentication• 403 Forbidden – the access to the specific resource is
denied• 404 Not Found – the resource requested is not there
HTTP Headers Used to define characteristics of the data requested or
provided Host – name of the server (can be many hosts on a
single IP address) Accept – type of resource accepted Content-type – the internet media type of the content
(http://en.wikipedia.org/wiki/Mime_type) Authorization – data required for authentication Referrer – the link from where we have reached the
current page (important in traffic analysis)
HTTP Headers
• Cache-control – specifies if the content should be cached or not
• Content-Language• Location – implements redirect
User sessions & HTTP
• HTTP is a stateless protocol; the requests are not connected on the server
• “Session support in PHP consists of a way to preserve certain data across subsequent accesses” http://www.php.net/sessions
• The sessions can’t be implemented at the HTTP level as the protocol hasn’t any “memory”
• We need to store information about subsequent accesses
Example
1. Send an HTTP Request 1. See the headers sent – use LiveHTTPHeaders
https://addons.mozilla.org/en-US/firefox/addon/3829
2. See the headers received3. See the body of the response
Results•http://google.com/ GET / HTTP/1.1 Host: google.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie: PREF=ID=aee3d09e6859909c:CR=1:•Response:HTTP/1.x 301 Moved Permanently Location: http://www.google.com/ Content-Type: text/html; charset=UTF-8 Date: Tue, 03 Mar 2009 05:59:25 GMT Expires: Thu, 02 Apr 2009 05:59:25 GMT Cache-Control: public, max-age=2592000 Server: gws Content-Length: 219
•http://www.google.com/GET / HTTP/1.1Host: www.google.comUser-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-us,en;q=0.5Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive: 300Connection: keep-alive•Response: HTTP/1.x 302 Found Location: http://www.google.ro/Cache-Control: privateContent-Type: text/html; charset=UTF-8Date: Tue, 03 Mar 2009 05:59:25 GMTServer: gwsContent-Length: 218
References
• http://www.wakeuplater.com/website-building/evolution-of-websites-10-popular-websites.aspx (images in slides How the web evolved)
• http://www.w3.org/History.html• http://www.w3.org/People/Berners-Lee/
FAQ.html