Your SlideShare is downloading. ×
Slides 1 - Internet and Web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Slides 1 - Internet and Web


Published on

Introduction to the basic concepts of Internet and Web. The story and related evolutions

Introduction to the basic concepts of Internet and Web. The story and related evolutions

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Introduction to:Internet and the World Wide Web Fundamental Concepts and Technologies
  • 2. Federico Buti Who’s who? Massimo Callisto• Why pay attention to and ?• Phd attendant @University of Camerino in the area of Information Science and complex systems• We are working in the field of Formal Methods: In computer science and software engineering, formal methods are particular kind of mathematically-based techniques for the specification, development and verification of software and hardware systems
  • 3. Web Internet• The terms Internet and World Wide Web are often used in everyday speech without much distinction.• The Internet (network of networks, the Net) is a global system of interconnected computer networks: Uses the standard Internet protocol (TCP/IP) to serve billions of users worldwide.• Web is one of the services communicated via the Internet: World Wide Web: a collection of interlinked multimedia documents that are stored on the Internet and accessed using a common protocol (HTTP)• Other services that you normally use (almost): – Email, FTP, telnet, SSH…
  • 4. Internet… A bit of story• Internet was born in the 60s as a military project of the ARPA (Advanced Research Projects Agency) group. – The initial aim was to create a decentralized network which could be highly robust and survivable. – (1969) Connection between University of California at Los Angeles, Stanford, University of California at Santa Barbara, and University of Utah. – (1971) Arpanet connects 15 sites including universities and research organizations... Birth of TELNET and FTP.. First email program (1972) – (1974) Specification of Internet Transmission Control Protocol (TCP)… (1978) TCP split to TCP/IP… 62+ sites – (1983/84) ARPANET uses TCP/IP, UNIX BSD 4.3 built around TCP/IP, Invention of the Domain Name System (DNS) – (1986) The United States National Science Foundation (NSF) commissioned the construction of the NSFNET, a university 56 kilobit/second network backbone using computers called "fuzzballs“… Dramatic growth of hosts: February-> 2000, November -> 5000
  • 5. Internet… A bit of story (2) How many computer are on the Internet? "! – (1989/90) Number of hosts exceeded 100,000! Arpanet becomes "Internet – (1991) CERN publicized the World Wide Web project by Tim Berners-Lee. Term "Surfing the Internet" coined by Jean Armour Polly (1992) – (1993) First web browser WorldWideWeb than called Nexus• Internet is now a logical world interconnecting different hosts around the world where an host is a human or an automatic agent able to communicate with another agent.
  • 6. Communication rules• Hosts communication is based on adoption of common rules for messages exchange.• The standard de facto for communication is the TCP/IP protocol based on the ISO-OSI protocol stack: Applications:  ftp  http  telnet  … TCP IP19/07/2012 University of Camerino 6
  • 7. World Wide Web (aka Web)• The Web is a system of interlinked hypertext documents accessed via the Internet. – The Web is at OSI “application” level that contains the HTTP service (Hyper Text Transfer Protocol) – HTTP is the main protocol for information exchange on the web.• The Web (for humans) – Consist of a web browser… – One can view web pages that may contain text, images, videos… – One navigates (surf) between the web pages via hyperlinks.19/07/2012 University of Camerino 7
  • 8. HTTP & Web• The Web was invented by English scientist Tim Berners- Lee (1989) and is based on three mechanisms : – A naming scheme for locating resources -- like addresses -- (e.g. URLs such as; – Communication rules (e.g. protocol HTTP); – Hypertext language for easy navigation (e.g. HTML). Index.html Request University of Camerino 8
  • 9. Web: fundamentals technologies• Internet  vehicle of data.• Web  is an application over Internet to present information.• What are the technologies which implements the Web?• Three major elements to present a web page: – HTML (describes the contents) – CSS (describes how the elements appear) – JavaScript (enrich ability of the client)19/07/2012 University of Camerino 10
  • 10. What is HTML?• HTML (HyperText Markup Language) is a language that describes web pages.• Is not a programming language, but it is a markup language – A markup language is a set of markup tags – markup tags describe how text, images has to be rendered by the browser19/07/2012 University of Camerino 11
  • 11. What is HTML? <p> <b style="color:#FFFFFF; background-color:#993333; font- weight:bold">This is a bold tex in a paraghaph</b> </p> <p>Another simple paragraph</p> <H1>This is a title</h1> <H2 style="color:#00FF00;">Another title</H2> A simple list<br/> <ul> <li>Itemi 1</li> <li style="color: red;">Itemi 2</li> <li style="color: blue">Itemi 3</li> </ul> <input type="button" style="background-color: #dededc;" value="Button" />19/07/2012 University of Camerino 12
  • 12. HTML: evolution• (1989) HTML 1.0 was first introduced by Tim Berners-Lee.• (1995) In November the first draft of HTML 2.0 was published• (1997) January, HTML 3.2 was published by W3C (World Wide Web Consortium).• (1997/98) HTML 4.0 was published as a W3C Recommendation. Three "flavors": – Strict: deprecated elements are forbidden, – Transitional: deprecated elements are allowed, – Frameset: frame (different web pages in a single one) are allowed• (2000) XHTML 1.0 is a separate language that began as a reformulation of HTML 4.01 using XML 1.0… – XHTML 2.0 published as a draft but deprecated (2009) in favor of…• January 2008: HTML 5.0 is published as a Working Draft by W3C. Anyway HTML is not capable to improve the looks of the information. It is needed something else.19/07/2012 University of Camerino 13
  • 13. Cascading Style Sheets (CSS 1, 2, 3)• Teach the browser how the elements must be rendered to the user.• CSS attributes change the default style of the HTML tags. <style> .GreenText { color:green; } </style> <span style=“color:blue”>This text is blue. </span> <span class=“GreenText”>This text is green</span> What is still missing? User experience19/07/2012 University of Camerino 14
  • 14. JavaScript• JavaScript is the most popular scripting language (or programming language) on the internet.• It was designed to add interactivity to HTML pages• JavaScript is usually embedded directly into HTML pages Some pretty amazing things….  Text animation  Graphic animation  Browser-based application (e.g. games, chat)  Forms validation  Improve web site navigation  Dynamic contents19/07/2012 University of Camerino An example? Its very complicated… 15
  • 15. Static Web (vs Dynamic Web)• The first web pages were created with a static content: Web pages that always present the same information to all download users.• HTML files are “read” from the web browser to render the information to the user with a given layout (tuned by CSS).• So, in the “static” web nothing is done on the page content; therefore information does not change since its creation.19/07/2012 University of Camerino 16
  • 16. Static Web (vs Dynamic Web) mypage.html University of Camerino 17
  • 17. (Static Web vs) Dynamic Web• Static web, disadvantages: – Users can not modify the site status and content. – The Web Master decides prior to publishing what the user should see. – Several tools are unavailable (e.g. the shopping cart).• Dynamic WEB refers to all the Web applications that actively interact with the user.• Data received from the user give influence to: – Content status – Shape – Availability• The server dynamically decide what information exchange to the user.19/07/2012 University of Camerino 18
  • 18. (Static Web vs) Dynamic Web mypage.php (It is only HTML+CSS+JS) MySql email repository 19/07/2012 University of Camerino 19
  • 19. Dynamic WEB: classification• So, dynamic aspect of an application can be classified into two group: Dynamic WEB Client side Server side JavaScript PHP Flash ASP Flex JSP C, PERL19/07/2012 University of Camerino 20
  • 20. Dynamic Server Side (example): PHP• PHP is a scripting language designed for dynamic web pages (server-side) since: Before sending the requested page, the web server executes the PHP code to alter the HTML code depending on the given conditions such as: • the type of user • information obtained from a database• PHP is used by more than 20 million websites and installed on 1 million web servers (Wordpress is written in PHP).• Its main advantages are: – Open Source – Multiplatform – Object Orientation – Simple to use This is the first attempt to give dynamicity to the Web. But?19/07/2012 University of Camerino 21
  • 21. True dynamicity: Interaction and Social Network• PHP and others give dynamicity about the information presented to the user.• However the communication is still connection-less: – After a request, the connection dropped between client and server. The server forgets the client – The experience is a single interaction information related to the single requested page. It is not possible to have global information Web 2.0 grows up!19/07/2012 University of Camerino 22
  • 22. True dynamicity: Interaction and Social Network• New feelings: people want true dynamism! – Approach to the information in real time and everywhere when it is needed (Interaction). – Share the information anytime with others (Social Network). Web 2.0 grows up!19/07/2012 University of Camerino 23
  • 23. Technologies for dynamicity• Evolution of dynamic client-side technologies has led the Web 2.0.• WEB 2.0 also means tendencies to create a new user experience such as Interaction, Collaboration, Blogging ...• Base technologies are always the same (URL, HTTP, HTML).• However web pages incorporate new solutions such as: – AJAX (Asynchronous JavaScript and XML); – Adobe Flash – ActiveX, Applet19/07/2012 University of Camerino 24
  • 24. Web 2.0 in technologies: Ajax• AJAX (Asynchronous JavaScript and XML) are techniques used to create web applications called RIA (Rich Internet Applications).• Information can be retrieve from the server in the background without interfering with the user expirience.  AJAX increases the interactivity and usability of web pages since it is not necessary to reload all the content each time19/07/2012 University of Camerino 25
  • 25. Web 2.0 in technologies: Ajax(2) browser user activity user activity User activity 1 5 2 time 4 server-side 3 server processing server processing 1 http request 2 browser server-side systems 4 html + css data 3 519/07/2012 University of Camerino 26
  • 26. Web 2.0 in technologies: Ajax(2) After: Browser browser UI: user activity user activity User activity 1 5 Ajax: 2 time 4 server-side 3 server processing server processing time server-side 1 2 http request processing server browser server-side systems 4 html + css data 3 519/07/2012 University of Camerino 27
  • 27. Web 2.0 in technologies: others• Adobe Flex released by Adobe for the creation of cross-platform RIAs (Rich Internet Applications) based on Adobe Flash.• ActiveX is a framework for creating software components (piece of software) that perform a particular function: – ActiveX web controls are embedded into web pages, e.g. Windows Update. – Are only supported by Microsoft products (e.g. Internet Explorer)• Applets are similar to ActiveX but written in Java: – Need a JVM on the client-side; – Are a little more secure.19/07/2012 University of Camerino 28
  • 28. Web 2.0 is also a philosophy• The technologies aim at creating new web application. – Gmail – GoogleMaps – Office online.• But it is arose a new wish: people wants to share their information, their feeling, their opinion. – The social community aspect is sovereign – People share information – Knowledge is available to all PhD students web site• Blog was the protagonist. Everybody can write something, users can comment.• Today the Social Network became the new frontier in the Web communication : – Microblogging (Twitter) – Social Community (Facebook, MySpace) Your PhD Network19/07/2012 University of Camerino 29
  • 29. Web 2.0 is for all?• There are many technologies for creating web application… but each of you must become a Web Developer!(?)• Many software tools help to hide technical details and each one can create his application easily.• Example: Web Content Management Systems19/07/2012 University of Camerino 30
  • 30. Web CMS• Web CMS are designed to simplify the publication of contents and creation of web pages.• Web CMS allow to submit content without requiring technical knowledge (such as HTML, PHP, javascript).• There are a platora of Web CMS, each one developed for a specific context (eCommerce, Blogging, Forums)19/07/2012 University of Camerino 33
  • 31. Why we use• Open source• Long-life support• Extremely easy to use• Allows to implement both web sites and network• Makes easier the administration’s stuffs: – Installation, updates – PhD’s list management – Web sites management
  • 32. Why you should learn technical stuff• Software tools (like Web CMS) are imperfect and sometime tuning is required.• To obtain a web page that look as you want, you must write some piece of code (HTML, CSS or JavaScript) by hand.• If you know the basis, you are not restricted to Worpress and other CMS can be used. So, let’s begin!19/07/2012 University of Camerino 36