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!
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment