slides 1 - internet and web
Post on 22-Nov-2014
1.059 Views
Preview:
DESCRIPTION
TRANSCRIPT
Introduction to:
Internet and the World Wide Web Fundamental Concepts and Technologies
• 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
Federico Buti Massimo Callisto Who’s who?
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…
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
Internet… A bit of story (2)
– (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.
How many computer are on the Internet?
http://www.internetworldstats.com/stats.htm
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:
TCP
IP
Applications: ftp http telnet …
19/07/2012 6 University of Camerino
• 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.
World Wide Web (aka Web)
19/07/2012 7 University of Camerino
• 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 http://www.google.it);
– Communication rules (e.g. protocol HTTP);
– Hypertext language for easy navigation (e.g. HTML).
HTTP & Web
19/07/2012 8 University of Camerino
Request http://www.google.it
Index.html
• 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)
Web: fundamentals technologies
19/07/2012 10 University of Camerino
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 browser
19/07/2012 11 University of Camerino
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 12 University of Camerino
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 13 University of Camerino
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 experience 19/07/2012 14 University of Camerino
• 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
JavaScript
Some pretty amazing things…. Text animation
Graphic animation
Browser-based application (e.g. games, chat)
Forms validation
Improve web site navigation
Dynamic contents
An example? It's very complicated… 19/07/2012 15 University of Camerino
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 16 University of Camerino
Static Web (vs Dynamic Web)
http://www.google.com/mypage.html
mypage.html
http://www.google.com 19/07/2012 17 University of Camerino
(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 18 University of Camerino
(Static Web vs) Dynamic Web
www.gmail.com/mypage.php&mail_id=2
mypage.php (It is only HTML+CSS+JS)
MySql email repository
http://www.google.com
19/07/2012 19 University of Camerino
• So, dynamic aspect of an application can be classified into two group:
Dynamic WEB: classification
Dynamic WEB
Client side Server side
JavaScript
Flash
PHP
ASP
JSP
C, PERL
Flex
19/07/2012 20 University of Camerino
• 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
Dynamic Server Side (example): PHP
This is the first attempt to give dynamicity to the Web. But?
19/07/2012 21 University of Camerino
• 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
True dynamicity: Interaction and Social Network
Web 2.0 grows up! 19/07/2012 22 University of Camerino
• 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).
True dynamicity: Interaction and Social Network
19/07/2012 23 University of Camerino
Web 2.0 grows up!
• 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, Applet
Technologies for dynamicity
19/07/2012 24 University of Camerino
• 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.
Web 2.0 in technologies: Ajax
AJAX increases the interactivity
and usability of web pages since
it is not necessary to reload all
the content each time
19/07/2012 25 University of Camerino
browser
server-side
time
user activity user activity User activity
server processing server processing
browser server-side systems http request
html + css data
1 2
4
5 3
1
2
3
4
5
Web 2.0 in technologies: Ajax(2)
19/07/2012 26 University of Camerino
browser
server-side
time
user activity user activity User activity
server processing server processing
browser server-side systems http request
html + css data
1 2
4
5 3
1
2
3
4
5
Web 2.0 in technologies: Ajax(2)
Browser UI:
server-side
server processing
Ajax:
time
After:
19/07/2012 27 University of Camerino
• 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.
Web 2.0 in technologies: others
19/07/2012 28 University of Camerino
• 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
• 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)
Web 2.0 is also a philosophy
19/07/2012 29 University of Camerino
PhD students web site
Your PhD Network
• 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 Systems
Web 2.0 is for all?
19/07/2012 30 University of Camerino
• 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)
Web CMS
19/07/2012 33 University of Camerino
• 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
Why we use
• 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.
Why you should learn technical stuff
19/07/2012 36 University of Camerino
So, let’s begin!
top related