Introduction to Web Programming - first course


Published on

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Corner bottom right – yahoo – 96 – collection of links, search engine Corner bottom left – yahoo – 2000 – content increases, content updated more often (in the news), interaction means provided – mail, messenger, auctions Corner top right – yahoo 2004 – live news and markets , services, personalization corner top left – yahoo 2008 – real time content (ajax), content increased, very advanced interfaces (see the tabs for classifying content), personalized news available, community oriented (see answers for example)
  • Introduction to Web Programming - first course

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