Lecture

Web

2.0

Programming

1


©
Tongji

University ,
Computer

Science

and Technology
.

Web
编程技术

Web Programming Technology

王

伟

同济大学计算机科学与技术系

2012
年

Web

2.0

Programming

2


©
Tongji

University ,
Computer

Science

and Technology
.

Outline

•
第
1
章

绪论

•
第
2
章

HTML
和
CSS
技术基础

•
第
3
章

Web
服务器端编程技术

•
第
4
章

动态编程技术

•
第
5
章

Web2.0
编程技术

•
第
6
章

Mashup
编程技术

•
第
7
章

云计算技术

•
第
8
章

云计算环境下的
Web
编程

Web

2.0

Programming

3


©
Tongji

University ,
Computer

Science

and Technology
.


Internet and World Wide Web

Web

2.0

Programming

4


©
Tongji

University ,
Computer

Science

and Technology
.

Outline

•
The Internet

–
Key aspects

–
People and organizations

–
Layered architecture

–
Protocols: IP, TCP

•
The World Wide Web (WWW)

–
Servers and browsers

–
Protocols: DNS, URL, HTTP, MIME

–
Web languages / technologies

•
Web 2.0

–
Features, competences, applications, and technologies




Web

2.0

Programming

5


©
Tongji

University ,
Computer

Science

and Technology
.

The meaning of the Internet?

•
A Chinese town officer

“The Internet is an English agents’ net”

•
A U.S. Senator

“series of tubes” (explanation)


Web

2.0

Programming

6


©
Tongji

University ,
Computer

Science

and Technology
.

The Internet

•
Wikipedia:
http://en.wikipedia.org/wiki/Internet

–
A connection of computer networks using the Internet
Protocol Suite (
TCP/IP
)


•
What's the difference between the Internet and the
World Wide Web (
WWW
)?


•
WWW = HTML* + HTTP(S)

*including CSS, JavaScript, and other browser enabled content

Web

2.0

Programming

7


©
Tongji

University ,
Computer

Science

and Technology
.

Brief History

•
Began as a US Department of Defense network called
ARPANET

(1960s
-
70s)

•
Initial services: electronic mail, file transfer

•
Opened to commercial interests in late 80s

•
WWW created in 1989
-
91 by
Tim Berners
-
Lee

•
Popular web browsers released:
Netscape

1994, IE 1995

•
Amazon.com opens in 1995;
Google

January 1996

•
Chinese First Connection with Internet
：
Chinese Academics Net, by
Computer Applying Technology Institute of Beijing1986
，

•
First email, Sep. 14 1987, from CATIB
,
Across the Great Wall we can
reach every corner in the world
”

•
Chinese First Full Internet Connection:
NCFC
(National Computing and
Networking Facility of China) 1994

•
Baidu
1999;
Taobao

2003

Web

2.0

Programming

8


©
Tongji

University ,
Computer

Science

and Technology
.

Who can close the Internet?

Web

2.0

Programming

9


©
Tongji

University ,
Computer

Science

and Technology
.

Periodic Table of the Internet

Web

2.0

Programming

10


©
Tongji

University ,
Computer

Science

and Technology
.

Key aspects of the Internet

•
Information is open in the Internet

•
Sub
-
networks can stand on their own

•
Computers can dynamically join and leave the network

•
Built on open standards; anyone can create a new device

•
Lack of centralized control (mostly)

•
Everyone can use it with simple, commonly available
software


Web

2.0

Programming

11


©
Tongji

University ,
Computer

Science

and Technology
.

People and Organizations

•
Internet Engineering Task Force (
IETF
): internet
protocol standards

•
Internet Corporation for Assigned Names and
Numbers (
ICANN
): decides top
-
level
domain names

•
World Wide Web Consortium (
W3C
): Web
standards


Web

2.0

Programming

12


©
Tongji

University ,
Computer

Science

and Technology
.

Layered architecture

The internet uses a layered hardware/software architecture (OSI model):

•
Physical layer
: devices such as

coaxial cables, fiber
-
optic lines, modems

•
Data link layer
: basic hardware protocols
\

(Ethernet, Wi
-
Fi, DSL, ATM, PPP)

•
Network / internet layer
: basic software

protocol (IP)

•
Transport layer
: adds reliability to network

layer (TCP, UDP)

•
Application layer
: implements specific

communication for all programs

(HTTP, POP3/IMAP, SSH, FTP)


Web

2.0

Programming

13


©
Tongji

University ,
Computer

Science

and Technology
.

Internet Protocol (IP)

•
The
IP

is the underlying system of communication for all data (packets)
sent across the internet.

•
Each device has a 32
-
bit IP address as four 8
-
bit numbers





•
Find out your internet IP address:
whatismyip.com

•
Find out your local IP address: in a terminal, type:
ipconfig

(Windows) or
ifconfig

(Mac/Linux)

•
IP v4 vs. IP v6 (32
-
b vs. 128
-
b)

Web

2.0

Programming

14


©
Tongji

University ,
Computer

Science

and Technology
.

Transmission Control Protocol (TCP)

•
Adds multiple, guaranteed message delivery on top of IP

•
Multiplexing
: many programs using the same IP address port

•
Port
: a number allocated to each program or service

–
80: Web browser (443 for secure browsing)

–
25: email

–
22: ssh

–
21: ftp

•
Find out ports used in a terminal, using
netstat

(Windows) command and
using
CurrPorts


Web

2.0

Programming

15


©
Tongji

University ,
Computer

Science

and Technology
.

Outline

•
The Internet

–
Key aspects

–
People and organizations

–
Layered architecture

–
Protocols: IP, TCP

•
The World Wide Web (WWW)

–
Servers and browsers

–
Protocols: DNS, URL, HTTP, MIME

–
Web languages / technologies

•
Web 2.0

–
Features, competences, applications, and technologies




Web

2.0

Programming

16


©
Tongji

University ,
Computer

Science

and Technology
.

Web servers and browsers

•
Web server
: a kind of software that listens for Web page
requests

–
Apache

–
Microsoft Internet Information Server (IIS) (
part of Windows
)


•
Web browser
: fetches/displays documents from Web servers

–
Microsoft
Internet Explorer

(IE)

–
Mozilla Firefox

–
Google
Chrome



Web

2.0

Programming

17


©
Tongji

University ,
Computer

Science

and Technology
.

Domain Name System (DNS)

•
A set of servers that map written names to IP addresses

–
Example:
www.tongji.edu.cn

→ 202.116.64.9

–
Using Windows command
nslookup

to find out IP address

•
Many systems have a local cache called a
host file

–
Windows:
C:
\
Windows
\
system32
\
drivers
\
etc
\
hosts

–
Mac:
/private/etc/hosts

–
Linux:
/etc/hosts



Web

2.0

Programming

18


©
Tongji

University ,
Computer

Science

and Technology
.

Uniform Resource Locator (URL)

•
the location of a document on a web site

•
A basic URL:
http://my.tongji.edu.cn:8080/display/Webpage


protocol host port path


1.
When clicking this URL

, it will ask the DNS server for the IP address of
my.tongji.edu.cn

2.
Connect to that IP address at port 8080

3.
Ask the server to GET
/display/Webpage

4.
Display the resulting page on the screen



Web

2.0

Programming

19


©
Tongji

University ,
Computer

Science

and Technology
.

More advanced URLs

•
Anchor
:
skip to a given section of a web page
http://www.textpad.com/download/index.html

–
Fetches index.html then jumps down to part of the page labeled
downloads

•
Query string
: a set of parameters passed to a web program
http://www.google.com/search?q=miserable+failure&start=10

–
Parameter
q

is "
miserable+failure
“

–
Parameter
start

is
10



Web

2.0

Programming

20


©
Tongji

University ,
Computer

Science

and Technology
.

Hypertext Transport Protocol (HTTP)

•
The set of commands observed by a web server and sent from a
browser

•
Some HTTP commands (your browser sends these internally):

•
GET

filename: download

•
POST

filename: send a web form response

•
PUT

filename: upload

•
DELETE

filename: remove entity

•
HEAD

filename: only status information, not entire content

•
Simulating a browser with

a terminal window


$
telnet www.tongji.edu.cn 80

Trying 202.116.64.9... Connected to 202.116.64.9
(202.116.64.9). Escape character is '^]'.

GET /2009/xxgk.html

<!DOCTYPE HTML PUBLIC "
-
//W3C//DTD HTML 4.0
..."> <html> ...

Web

2.0

Programming

21


©
Tongji

University ,
Computer

Science

and Technology
.

HTTP error codes

•
the web server returns a special "error code" number to the
browser, possibly followed by an HTML document when something
goes wrong,

•
Common error codes:


Number

Meaning

200

OK

301
-
303

page has moved (permanently or temporarily)

403

you are forbidden to access this page

404

page not found

500

Internal server error

complete list

Web

2.0

Programming

22


©
Tongji

University ,
Computer

Science

and Technology
.

Internet media (MIME) types

•
when including resources in a page (style sheet, icon, multimedia
object), we specify their type of data







•
Lists of MIME types
:
by type
,
by extension



MIME type

File extension

text/html

.html, .htm, .shtml,.shtm

text/plain

.txt

image/gif

.gif

image/jpeg

.jpg

video/quciktime

.mov

application/octet
-
stream

.exe

Web

2.0

Programming

23


©
Tongji

University ,
Computer

Science

and Technology
.

Web languages / technologies


•
Hypertext Markup Language (
HTML
): used for writing web pages

•
Cascading Style Sheets (
CSS
): stylistic info for web pages

•
PHP Hypertext Processor (
PHP
): dynamically create pages on a web
server
–
of course, there are may other languages and scripts can do this …

•
JavaScript
: interactive and programmable web pages

•
Asynchronous JavaScript and XML (
Ajax
): accessing data for web
applications

•
eXtensible Markup Language (
XML
): meta language for organizing data

•
Structured Query Language (
SQL
): interaction with databases

•
Resource Description Frame (
RDF
): describing web resources
semantically

•
……


Web

2.0

Programming

24


©
Tongji

University ,
Computer

Science

and Technology
.

Terms

•
Internet Service Provider(ISP)

•
Enterprises or organizations who provide Internet access to you

•
Client/Server

vs.
Browser/Server

•
Presentation Layer

•
Often refers to the top tier of enterprise application architecture

•
In Web, it includes both codes of Web pages and codes of producing Web pages

•
Client Side Scripting/programming writing

•
Codes consumed by browsers to render Web pages and to respond to user’s interactions

•
Server Side Scripting/programming writing

•
Codes used to generate the codes consumed by browsers

Web

2.0

Programming

25


©
Tongji

University ,
Computer

Science

and Technology
.

Outline

•
The Internet

–
Key aspects

–
People and organizations

–
Layered architecture

–
Protocols: IP, TCP

•
The World Wide Web (WWW)

–
Servers and browsers

–
Protocols: DNS, URL, HTTP, MIME

–
Web languages / technologies

•
Web 2.0

–
Features, competences, applications, and technologies




Web

2.0

Programming

26


©
Tongji

University ,
Computer

Science

and Technology
.

For us
，
Web 2.0 may mean such……

Web

2.0

Programming

27


©
Tongji

University ,
Computer

Science

and Technology
.

Or mean these……

Web

2.0

Programming

28


©
Tongji

University ,
Computer

Science

and Technology
.

But these are only one aspect
，
the more
important is……

•
Essentially, Web 2.0 have two different parts:

–
The first part is
the rich, interactive experience
that …
lets the web page seem more like an application than a
static web page …

–
The second part is the
social aspect
that allows for the
gathering of
collective intelligence
…

——

Daniel Nations, webtrends.about.com


Web

2.0

Programming

29


©
Tongji

University ,
Computer

Science

and Technology
.

Then
，
what is
collective intelligence
?look the
story of Netflix firstly

Web

2.0

Programming

30


©
Tongji

University ,
Computer

Science

and Technology
.

Actuallly
，
the concept of
collective
intelligence
existed before

•
集体智慧是一种共享的或者群体的智能，它是从许多个体的合作与竞争中
涌现出来的。集体智慧在细菌、动物、人类以及计算机网络中形成，并以
多种形式的共识决策（
consensus decision making
）出现。

•
对于集体智慧的研究，实际上可以被认为是一个属于社会学、商业、计算
机科学、大众传媒和大众行为的分支学科
——
研究从夸克层次到细菌、植
物、动物以及人类社会层次的群体行为的一个领域。

•
集体智慧也可以定义为某种形式的网络化，即互联网，它是由通信技术的
进步而引发的。
Web 2.0
实现了交互性，因而用户可以发布自己的内容。
集体智慧凭借这一点来提高现有知识的社会共享。

——

维基百科


Web

2.0

Programming

31


©
Tongji

University ,
Computer

Science

and Technology
.

生活中有许多集体智慧的例子

•
在股票市场中，价格并不是由某个个体或某种协作力量所决定的，它是由
许多独立个体的交易行为所共同决定的，所有人的行为都建立在这样一种
信念基础之上：他们相信当前的交易会为他们带来最大的利益。

•
大量参与者根据他们对未来价格的信心进行契约交易，这样的市场在价格
预测的效果方面，往往被认为要比独立进行预测的专家们表现得更好。这
是因为，市场将知识、经验和成百上千人的意志组织在一起，形成了一种
不依赖个人观点的预测。


Web

2.0

Programming

32


©
Tongji

University ,
Computer

Science

and Technology
.

同样，集体智慧也见诸于计算机网络

•
维基百科（
Wikipedia
）是一个在线百科全书，它完全由用户维护，任何人
都可以新建或编辑网站上的任何页面，同时会有为数不多的管理员对内容
进行审查。

•
每一篇文章都有大量人员在维护，而其最终的结果，则形成了一个任何单
一协作团队都无法企及的大型百科全书。

•
Wikipedia
拥有的词条比

其他任何百科全书还要多。


Web

2.0

Programming

33


©
Tongji

University ,
Computer

Science

and Technology
.

另一个经典的例子是
Google
搜索引擎

•
Google
是世界上最流行的
Internet
搜索引擎，也是第一个根据其他网页对当
前网页的引用数来评价网页等级的搜索引擎。这种方法搜集了数以千计的
人对某一页面的评价信息，然后据此对搜索结果进行排序。与维基百科不
同，前者明确邀请网站用户提供内容
(User Generated Content)
，而后者则从
网络用户对网络的使用过程中提取信息，并利用这些信息为使用者设定网
页的分值。


Web

2.0

Programming

34


©
Tongji

University ,
Computer

Science

and Technology
.

如今，互联网及
Web 2.0
技术的发展

使集体智慧有了更大的发展空间

Web

2.0

Programming

35


©
Tongji

University ,
Computer

Science

and Technology
.

未来，集体智慧的运用将会变得愈加重要，

没有集体智慧的
Web 2.0
将是难以想象的

•
The real heart of Web 2.0 is collective intelligence...

•
Web 2.0 concepts like harnessing collective intelligence and
lightweight, responsive software development are intimately
related. They require new competencies, new development models,
and new attitudes towards the application development process.

——

Tim O'Reilly

•
Web 2.0 truly is just the froth before the wave. I believe networks
of super intelligent cognitive communities are our future.

——

Craig Kaplan, predictwallstreet.com, mail to Tim


Web

2.0

Programming

36


©
Tongji

University ,
Computer

Science

and Technology
.

Web 1.0 vs. Web 2.0

•
Web 1.0
is about
publishing

•
Users are limited to the viewing of information that is provided to them

•
Web 2.0
is about
interaction

•
Allows its users to interact with other users or to change website
content

•
Information sharing
,
interoperability
,
user
-
centered design

and
collaboration

•
Hosted services
,
web applications
,
social
-
networking sites
,
video
-
sharing
sites
,
wikis
,
blogs
,
mashups

and
folksonomies


Web

2.0

Programming

37


©
Tongji

University ,
Computer

Science

and Technology
.

Web 2.0 Memo Map

Web

2.0

Programming

38


©
Tongji

University ,
Computer

Science

and Technology
.

Web 2.0 examples

Web

2.0

Programming

39


©
Tongji

University ,
Computer

Science

and Technology
.

Web 2.0 Technologies

•
Browser side

–
Asynchronous JavaScript and XML (
AJAX
)

–
RIA

•
Adobe Flash

•
JavaScript/Ajax frameworks

•
Others

–
XUL, Java FX, Silverlight, Open Laszlo, …

•
Server side

–
Many of same technologies as Web 1.0

•
PHP, Ruby, ColdFusion, Perl, Python, JSP, Servlet,
and

ASP

–
Addition with providing data in different format

•
XML
,
RSS
, and
JSON

Web

2.0

Programming

40


©
Tongji

University ,
Computer

Science

and Technology
.

Summary

•
The Internet history

–
Key aspects

–
People and organizations

–
Layered architecture

–
Protocols: IP, TCP

•
The World Wide Web (WWW)

–
Servers and browsers

–
Protocols: DNS, URL, HTTP, MIME

–
Web languages / technologies

•
Web 2.0

–
Features, competences, applications, and technologies

Web

2.0

Programming

41


©
Tongji

University ,
Computer

Science

and Technology
.

Exercises


•
Use a terminal shell on your computer to fetch the homepage
of Tongji University

•
Install the
Firefox

and the
Firebug

add
-
on

•
Use
Blog

and
Microblog

to publish news. (
www.sina.com.cn
)

Web

2.0

Programming

42


©
Tongji

University ,
Computer

Science

and Technology
.

Reading materials


•
A Brief History of the Internet
http://www.isoc.org/internet/history/brief.shtml

•
http://en.wikipedia.org/wiki/Web_2.0

•
http://oreilly.com/web2/archive/what
-
is
-
web
-
20.html

Web

2.0

Programming

43


©
Tongji

University ,
Computer

Science

and Technology
.

Thank you!