Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web编程技术 Web Programming Technology

Similar presentations


Presentation on theme: "Web编程技术 Web Programming Technology"— Presentation transcript:

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. (www.sina.com.cn)

42 Reading materials A Brief History of the Internet

43 Thank you!


Download ppt "Web编程技术 Web Programming Technology"

Similar presentations


Ads by Google