1. Web编程技术 Web Programming Technology
王 伟
同济大学计算机科学与技术系
2012年

2. Outline 第1章 绪论 第2章 HTML和CSS技术基础 第3章 Web服务器端编程技术 第4章 动态编程技术
第6章 Mashup编程技术
第7章 云计算技术
第8章 云计算环境下的Web编程

3. Internet and World Wide Web

4. Outline The Internet The World Wide Web (WWW) Web 2.0 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

5. The meaning of the Internet?
A Chinese town officer
“The Internet is an English agents’ net”
A U.S. Senator
“series of tubes” (explanation)

6. 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

7. 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 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 , Sep , 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
Baidu1999; Taobao 2003

8. Who can close the Internet?

9. Periodic Table of the Internet

10. 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

11. 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

12. 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)

13. 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)

14. 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:
22: ssh
21: ftp
Find out ports used in a terminal, using netstat (Windows) command and using CurrPorts

15. Outline The Internet The World Wide Web (WWW) Web 2.0 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

16. 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

17. Domain Name System (DNS)
A set of servers that map written names to IP addresses
Example: →
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

18. Uniform Resource Locator (URL)
the location of a document on a web site
A basic URL:
protocol host port path
When clicking this URL , it will ask the DNS server for the IP address of my.tongji.edu.cn
Connect to that IP address at port 8080
Ask the server to GET /display/Webpage
Display the resulting page on the screen

19. More advanced URLs
Anchor: skip to a given section of a web page
Fetches index.html then jumps down to part of the page labeled downloads
Query string: a set of parameters passed to a web program
Parameter q is "miserable+failure“
Parameter start is 10

20. 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 80
Trying Connected to ( ). Escape character is '^]'.
GET /2009/xxgk.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML "> <html> ...

21. 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
page has moved (permanently or temporarily)
403
you are forbidden to access this page
404
page not found
500
Internal server error
complete list

22. 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

23. 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 ……

24. Terms Internet Service Provider(ISP) Client/Server vs. Browser/Server
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

25. Outline The Internet The World Wide Web (WWW) Web 2.0 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

26. For us，Web 2.0 may mean such……

27. Or mean these……

28. 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

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

30. Actuallly，the concept of collective intelligence existed before
集体智慧是一种共享的或者群体的智能，它是从许多个体的合作与竞争中涌现出来的。集体智慧在细菌、动物、人类以及计算机网络中形成，并以多种形式的共识决策（consensus decision making）出现。
对于集体智慧的研究，实际上可以被认为是一个属于社会学、商业、计算机科学、大众传媒和大众行为的分支学科——研究从夸克层次到细菌、植物、动物以及人类社会层次的群体行为的一个领域。
集体智慧也可以定义为某种形式的网络化，即互联网，它是由通信技术的进步而引发的。Web 2.0实现了交互性，因而用户可以发布自己的内容。集体智慧凭借这一点来提高现有知识的社会共享。
—— 维基百科

31. 生活中有许多集体智慧的例子
在股票市场中，价格并不是由某个个体或某种协作力量所决定的，它是由许多独立个体的交易行为所共同决定的，所有人的行为都建立在这样一种信念基础之上：他们相信当前的交易会为他们带来最大的利益。
大量参与者根据他们对未来价格的信心进行契约交易，这样的市场在价格预测的效果方面，往往被认为要比独立进行预测的专家们表现得更好。这是因为，市场将知识、经验和成百上千人的意志组织在一起，形成了一种不依赖个人观点的预测。

32. 同样，集体智慧也见诸于计算机网络
维基百科（Wikipedia）是一个在线百科全书，它完全由用户维护，任何人都可以新建或编辑网站上的任何页面，同时会有为数不多的管理员对内容进行审查。
每一篇文章都有大量人员在维护，而其最终的结果，则形成了一个任何单一协作团队都无法企及的大型百科全书。
Wikipedia拥有的词条比 其他任何百科全书还要多。

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

34. 如今，互联网及Web 2.0技术的发展 使集体智慧有了更大的发展空间

35. 未来，集体智慧的运用将会变得愈加重要， 没有集体智慧的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

36. 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

37. Web 2.0 Memo Map

38. Web 2.0 examples

39. Web 2.0 Technologies Browser side Server 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

40. Summary The Internet history The World Wide Web (WWW) Web 2.0
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

41. 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. (

42. Reading materials
A Brief History of the Internet

43. Thank you!