Lecture

jellytrickInternet and Web Development

Nov 10, 2013 (3 years and 11 months ago)

117 views

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!