Introduction au Web

Introduction au Web

• 1.
  MedTech Chp1- Introduction toWeb Dev. Basics of the Web Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 1 MedTech – Mediterranean Institute of Technology CS425 - Web and Mobile Development MedTech
• 2.
  MedTech www: Definition • Theweb • Collection of HTML documents… • HTML: HyperText Markup Language • Basis for almost every web page • … linked together • Using hyperlinks: the glue between the web pages • Invented in 1990s • Has over 30 billion pages • First internet site and first navigator were invented in 1990 by Tim Berners-Lee • He is the initiator of the 3 main web technologies: wed adresses, HTTP and HTML • Founder and president of the W3C since 1994 • W3C: WWW Consortium: independent organism that issues standards for the web Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 2 The World Wide Web
• 3.
  MedTech History of theWeb Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 3 The World Wide Web
• 4.
  MedTech www: Main Components •Main pieces of the WWW • HTTP: The main protocol of the web • Servers: Computers that host the files that make up the web • Internet: The world’s largest computer network • Browser: A program that runs on your computer to display files found on the web Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 4 The World Wide Web
• 5.
  MedTech www: How doesit work? • The person… or let’s say the computer… or better, the software, that displays the web page is called the client • When the client wants to display a web page (when an adress is written in the web browser), a request is sent to the server Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 5 The World Wide Web Client http://www.mysite.tn Dear server, can you please open this page for me ? Server My web site
• 6.
  MedTech www: How doesit work? • The server looks for the page • If he finds it, he sends it back • Else, he sends an error back Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 6 The World Wide Web Client OK, there! Server My web site
• 7.
  MedTech www: How doesit work? • The page is then decoded and displayed by a software, called Browser • The browser is a software that interprets the HTML page and displays a result on the screen Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 7 The World Wide Web ClientServer My web site
• 8.
  MedTech HTML • HTML: HypertextMarkup Language • Text Content: What you see • Markup : What it looks like • References to other documents: images or videos for example • Hypertext: Links to other pages • HTML5 • Fundamentally, the fifth version of HTML language • Refers also to the combination of three technologies: HTML5, CSS3 and Javascript. • HTML: Structure of web pages • CSS: Style and presentation of web pages • Javascript: Behaviour of web elements Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 8 The World Wide Web
• 9.
  MedTech HTTP • HTTP: HyperTextTransfer Protocol • Application protocol for distributed, collaborative, hypermedia information systems • Foundation of data communication for the world wide web • A request-response protocol in the client-server computing model • Request submitted by the client to ask the server for a resource or a computation • Response sent by the server • Contains a completion status information • Can contain requested content in the body Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 9 The World Wide Web
• 10.
  MedTech HTTP : StatusCodes • The first line of a HTTP response is a status code • Includes a numeric status code and a textual reason phrase • 1xx: informational • 2xx: successful • 3xx: redirection • 4xx: client error • 5xx: server error Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 10 The World Wide Web Code Description Signification 200 OK It Works! 201 Created The resource was created 304 Not Modified The client can use the cached version of the resource, as it was not modified 400 Bad Request The request of the client is badly written 401 Not Authorized The client must authenticate 403 Forbidden The client is not authorized to use the resource 404 Not Found The resource does not exist 500 Internal Server Error There is a problem in the implementation of the service
• 11.
  MedTech HTTP : RequestMethods • HTTP defines methods (or verbs) to indicate the desired action to be performed on the identified resource • GET: Reading a resource • Returns a representation of the resource (JSON for example) and a response code 200 (OK) if all is well • In the case of an error, returns a 404 (not found) or a 400 (bad request) • GET must never update a resource! • Example: GET http://www.example.com/customers/12345 • DELETE: Deleting a resource • In the case of a successful deletion, returns 200 (OK), as well as a content, such as the deleted element • In case of an unexisting resource, returns 204 (no content) • Example: DELETE http://www.example.com/customers/12345 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 11 The World Wide Web
• 12.
  MedTech HTTP : RequestMethods • PUT: create/update a resource by indicating its exact URI • The request body contains the complete respresentation of the new resource, and the URI is that of the resource itself • If the resource already exists, it will be modified, if not, it will be created • Returns 201 (created) in case of the creation of a new resource, and 200 (OK) or 204 (no content) in case of an update • Idempotent (executing several times the same request always gives the same result) • Doesn’t usually return content • Equivalent in programming languages to a : obj.attribute = value • Example: PUT /articles/1234 <article> <title>red stapler</title> <price currency="eur">12.50</price> </article> Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 12 The World Wide Web
• 13.
  MedTech HTTP : RequestMethods • POST: create/update a resource using a handler • Mainly enables: • Annotating existing resources • Posting a message in a forum • Sending data to a process that will use it • Adding data to a database… • The processing is determined by the server • Used if we don’t know the exact URI of the resource • Returns 201 if the entity was created, 200 (OK) if the response contains an entity, and 204 if not. Must also return a Location (URI of the resource) • Non idempotent • Equivalent in programming languages to a : obj.set_attribute(value) • Example: POST /articles <article> <title>red stapler</title> <price currency="eur">12.50</price> </article> 201 Created Location: /articles/63636 Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide 13 The World Wide Web
• 14.
  MedTech References Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Slide14 • M. Haverbeke, Eloquent JavaScript: A modern introduction to programming, 2014 • Textbook • D. Flanagan, JavaScript: The Definitive Guide, 6th edition, O’reilly, 2011