Introduction to Basic Concepts in Web


Published on

Published in: Education, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Introduction to Basic Concepts in Web

  1. 1. Web Application Programming Introduction to Basic Concepts Jussi Pohjolainen TAMK University of Applied Sciences
  2. 2. HTTP <ul><li>Client and Server Interaction </li></ul>
  3. 3. Intro to HTTP <ul><li>HTTP ( Hypertext transfer protocol ) is a stateless protocol, which is meant to transfer information on intranets and World Wide Web. </li></ul><ul><ul><li>RFC2616: </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>HTTP is a request / response standard between client and server </li></ul>
  4. 4. Clients and Servers <ul><li>Client </li></ul><ul><ul><li>Client makes a http request . </li></ul></ul><ul><ul><li>Client can be a web browser, spider or other end-user tool </li></ul></ul><ul><ul><li>Client is referred as a user agent </li></ul></ul><ul><li>Server </li></ul><ul><ul><li>Stores information and makes them available to the client </li></ul></ul><ul><ul><li>Gives http response to the client </li></ul></ul>
  5. 5. Resources <ul><li>Server provides resources to clients </li></ul><ul><li>Resources can be accessed by HTTP using URLs ( Uniform Resource Locator ) </li></ul><ul><li>Example </li></ul><ul><ul><li> </li></ul></ul>
  6. 6. Request and Response Client User-agent: Firefox Client Apache HTTP Server request response
  7. 7. Request GET <ul><li>HTTP defines eight methods that define a action which will be made to a resource </li></ul><ul><li>Most typical method is GET </li></ul><ul><li>By using the GET - method, client gets a representation of the resource. </li></ul><ul><li>Example of getting a file </li></ul><ul><ul><li>URL: </li></ul></ul><ul><ul><li>1) Open connection to the server </li></ul></ul><ul><ul><li>2) Send following through the connection: </li></ul></ul><ul><ul><ul><li>GET /path/to/file.doc HTTP/1.0 </li></ul></ul></ul><ul><ul><li>3) Read the response </li></ul></ul>
  8. 8. More on Request GET <ul><li>Typically HTTP client is a browser that creates the request automatically when user opens a url </li></ul><ul><li>Browser creates the request which contains addition to the GET lot of other information.. </li></ul><ul><li>For example, information about user agent! </li></ul>
  9. 9. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Mac..) ... response
  10. 10. Response <ul><li>When making a GET request to a certain URL, client gets a response </li></ul><ul><li>Response consists of </li></ul><ul><ul><li>1) Header information </li></ul></ul><ul><ul><li>2) Resource itself </li></ul></ul><ul><li>Browser makes decisions based on the header information.. </li></ul>
  11. 11. Example of Response HTTP/1.1 200 OK Date: Fri, 12 Jan 2007 07:51:41 GMT Server: Apache/1.3.37 (Unix) Last-Modified: Wed, 10 Jan 2007 12:43:34 GMT ETag: &quot;479a0-16a9-45a4df76&quot; Accept-Ranges: bytes Content-Length: 5801 Connection: close Content-Type: text/html; charset=iso-8859-1 <html> <head> <title>... Header Resource
  12. 12. Request and Response Client User-agent: Firefox Client Apache HTTP Server example request GET / HTTP/1.1 Host: User-Agent: Mozilla/5.0 (Mac..) ... example response HTTP/1.1 200 OKDate: Fri, 12 Jan 2007 07:51:41 GMTServer: Apache/1.3.37 (Unix)... ... <html><head><title>...
  13. 13. Firefox and HTTP headers
  14. 14. WORLD WIDE WEB STANDARDS <ul><li>Jukka Siltanen and Jussi Pohjolainen </li></ul>
  15. 15. Why standards? <ul><li>The web is a very diverse environment </li></ul><ul><ul><li>Different computer hardware & software </li></ul></ul><ul><ul><li>Different people with expectations and cultural backgrounds </li></ul></ul><ul><ul><li>People with disabilities </li></ul></ul><ul><ul><li>Computers as ‘users’ </li></ul></ul><ul><li>Lots of different kinds of media and levels of interaction </li></ul><ul><li>The ultimate goal of standards is to ensure that the contents of Internet is universally accessible to everyone </li></ul>
  16. 16. HTML-markup language <ul><li>Hypertext Markup Language </li></ul><ul><li>Hypertext means documents which can be internally linked to other documents </li></ul><ul><li>Developed by Tim Berners-Lee in 1990 </li></ul><ul><ul><li>Won Millennium Technology Prize prize for his work in 2004 </li></ul></ul><ul><li>Originally HTML provided very little control over looks and no interaction apart from navigation </li></ul>
  17. 17. HTML-markup language <ul><li>World Wide Web was standardized in 1991 </li></ul><ul><li>HTML became the standard for www-documents by mid 90’s </li></ul><ul><li>W3C (World Wide Web Consortium) was founded in 1994 to coordinate the development of HTML and other web standards </li></ul>
  18. 18. HTML-standards <ul><li>HTML 2.0 v. 1996 </li></ul><ul><li>HTML 3.2 v. 1997 </li></ul><ul><ul><li>First W3C recommendation </li></ul></ul><ul><ul><li>Contained presentational elements </li></ul></ul><ul><li>HTML 4.0 v. 1997 </li></ul><ul><ul><li>Introduced CSS-style sheets to define presentational elements </li></ul></ul><ul><li>HTML 4.01 v. 1999 </li></ul><ul><ul><li>Included only fixes to 4.0 standard </li></ul></ul><ul><li>XHTML 1.x v. 2000 -> </li></ul><ul><ul><li>Current standard </li></ul></ul><ul><ul><li>XML compatible HTML </li></ul></ul><ul><ul><li>Content and presentation are separated </li></ul></ul>
  19. 19. Problems with the HTML-standard <ul><li>Browser wars in the end of the 90’s </li></ul><ul><ul><li>Netscape and Microsoft developed non-standard features for their browsers to gain advantage over competition </li></ul></ul><ul><li>The visual appearance of web pages became more important than content itself </li></ul><ul><ul><li>Pages became overly complex to edit </li></ul></ul><ul><ul><li>Slow to download and often browser dependent </li></ul></ul><ul><li>All of the newest browsers still do not comply to standards with causes problems in web page design </li></ul><ul><li>Most HTML-documents on the web won’t scale to new breeds of web clients (i.e. mobile phones, PDAs, screen readers etc.) </li></ul>
  20. 20. Other www-standards <ul><li>CSS (Cascading Style Sheets): creates the look of a XHTML-document </li></ul><ul><ul><li>All presentational elements are specified in CSS file leaving only content and structure to the XHTML document </li></ul></ul><ul><ul><li>W3C-recommendation from 1999 </li></ul></ul><ul><ul><li>Two versions: CSS1 and CSS2 </li></ul></ul><ul><ul><ul><li>CSS3 in development </li></ul></ul></ul><ul><ul><li>Still some (minor and major) browser compatibility issues </li></ul></ul><ul><ul><li>Using CSS is the best way to provide support for alternative web clients </li></ul></ul>
  21. 21. Other www-stardards <ul><li>XML (Extensible Markup Language): </li></ul><ul><ul><li>General purpose language to provide structure for information </li></ul></ul><ul><ul><li>Source of XHTML’s syntax </li></ul></ul><ul><li>JavaScript (officially EcmaScript) used for interaction on www-pages: </li></ul><ul><ul><li>One of the biggest problems in the browser wars – still significant differences in browsers </li></ul></ul><ul><ul><li>Follows the DOM-model (Document Object Model), which defines the hierarchy of XHTML-elements </li></ul></ul><ul><ul><li>DHTML (Dynamic HTML): Marketing term coined by Microsoft and Netscape for interactive web pages which use HTML, CSS and Javascript </li></ul></ul><ul><ul><li>JavaScript was originally Netscape’s term but it has become general term for client-side HTML-scripting </li></ul></ul><ul><ul><li>Is however not related to Java-programming language </li></ul></ul>
  22. 22. Structure of a modern www-document Structure Looks Behavior HTML XHTML XML JavaScript DOM CSS1 CSS2
  23. 23. More information… <ul><li>Official standards on W3C web site: </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Difficult site for non-technically oriented </li></ul></ul><ul><li>Simple tutorials: </li></ul><ul><ul><li>W3Schools: </li></ul></ul><ul><li>Great articles: </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Search engines… </li></ul></ul>