Week 06 Web Technologies 01 Joonhwan Lee human-computer interaction + design lab.
Data Communication (WWW) Web 2.0
1. Data Communication
Data Communication...? Telecommunication subset Telecommunication is... any process that permits the passage from a sender to one or more receivers of information of any nature delivered in any usable form (printed copy, fixed or moving pictures, visible or audible signals, etc.) by means of any electromagnetic system (electrical transmission by wire, radio, optical transmission, guided waves, etc.). (Martin, James. Introduction to Teleprocessing. Englewood cliffs, NJ:Prentice-hall, 1972) 4
Data Communication...? Data Communication...... can be defined as that part of telecommunications that relates to computer systems, or the electronic transmission of computer data. This definition excludes the transmission of data to local peripherals such as disk, tape, and printers. (Stamper, David A. Business Data Communications. Redwood city, CA: Benjamin/Cummings, 1989) Data communication networking. data communication. 5
Features of Communication Sender, receiver, medium, message Message file Request Response Status Control Correspondence Understandability Error Detection 6
Features of Communication 7
Key Data Communication Concepts Session: communication dialog between network users or applications Network: interconnected group of computers and communication devices Node: a network-attached computer Link: connects adjacent nodes Path: end-to-end route within a network Circuit: the conduit over which data travels Packetizing: dividing messages into fixed-length packets prior to transmission over a network s communication media Routing: determining a message s path from sending to receiving nodes 8
Key Data Communication Concepts 9
History of Data Communication 1836: Telegraph (Samuel Morse) 1858-1866: Transatlantic cable 1876: Telephone (Alexander Graham Bell) 1957: USSR launches Sputnik 1962-1968: Packet-Switching networks 1969: Birth of Internet 1977: E-mail 1979: News Groups 1982: TCP/IP 1991: Birth of WWW http://carl.sandiego.edu/itmg360/internet_history.htm 10
2.
Inter+Network 1969 : ARPANET (Advanced Research Projects Agency) (MILNET) : 1960, (Sputnik) ( ) circuit switching packet switching packet switching ARPANET (UCLA SRI ) 12
(circuit),,, 13
(packet), http://www.pbs.org/opb/nerds2.0.1/geek_glossary/ packet_switching_flash.html 14
IP (Internet Protocol) TCP/IP Ethernet LAN Ethernet ( ) TCP/IP ( ) LAN 1980, NSF NSFNET ( ) /, 1990 Web (World Wide Web: WWW) WWW 15
1996,,, WAN WAN LAN LAN WAN WAN LAN Backbone WAN WAN Backbone Network ( ) backbone LAN WAN backbone LAN WAN 128Mbps ~ 10Gbps ( ) 16
: / / LAN ISP (Internet Service Provider) ISP: (e.g., olleh, LG U+ ) ISP ISP 17
: PPP, IP ISP Internet backbone Foreign ISPs backbone backbone Home Computer ISP ISP PSTN, Cable, etc. Home Computer PSTN, Cable, etc. LAN Home Computer Office Computer Office Computer Office Computer 18
- (Client-Server Model) : : 19
Client-Server Model : : : : :,, FTP 20
( ) : (Apache) FTP : FTP FTP Email : 21
, PSTN, Computer Network 1.&우편망 2.&전화망 PSTN:&Public&Switched&Telephone&Network 3.&컴퓨터&네트워크&(데이터&통신망) PDTN:&Packet&Switched&Telephone&Network 22
TCP/IP (IP Address) (TCP/IP) : 23
TCP/IP TCP: Transmission Control Protocol data flow control IP: Internet Protocol data destination control 24
TCP/IP TCP (Packet) 25
IP IP : IP Address: ( : 66.249.89.99 google.com) domain name 66.249.89.99 = google.com IP NIC (Network Information Center) / (KISA) 26
IP IP 4 (Byte) Byte. 1 Byte = 8 bits (= 28 ) = 256 : 256 x 256 x 256 x 256 = 4,294,967,296 90% IP Address: 73,266,688 (69,182,976, 2009/8 ) IP 1.71% ( 95% ) 27
IP (IPv4 vs. IPv6) 4 (32 ) (255.255.255.255 8 X 4) IP : 1 : 1 IP IPv6 128 (16 ) 2001:0db8:85a3:08d3:1319:8a2e:0370:7334 16 X 8 3.4x1038 28
(Domain Name) IP : IP (Domain Name Server) IP (Internet Corporation for Assigned Names and Numbers, ICANN), IP 29
(Domain Name) :... ( : plaza.snu.ac.kr) ( ), (. media.daum.net, www.daum.net) 30
edu ac com co org or gov go net ne - re int - mil - Korea Korea N. Japan United Kingdom France Germany Canada Tuvalu kr kp jp uk fr de ca tv 31
1969 ARPANET: 4 1996 1 2001 1 2008 5 1996 1600 1998 1 2008 13 ( 20%) 1999 1000 2006 3400 ( 70%) 32
: FTP (File Transfer Protocol) : Telnet : Email..., 33
World Wide Web (hypertext) : :,,, (text) (note): (link): 34
World Wide Web 1945 Vannevar Bush Memex 1965 Ted Nelson Xanadu 1977 MIT Andrew Lippman Aspen Movie Map http://www.youtube.com/watch?v=hf6lkqgxpmu 35
World Wide Web 1987 Apple HyperCard, (, ),,, 36
World Wide Web, (WWW) HTTP (Hyper Text Transfer Protocol) TCP/IP HTML (Hyper Text Markup Language) URL(Uniform Resource Locator) 37
World Wide Web URL(Uniform Resource Locator), : http://www.google.com http:, google.com...: ftp://ftp.google.com ftp:, ftp.google...: URL :// / http://www.google.com/test.jpg 38
World Wide Web WWW Tim Berners-Lee: CERN Enquire (WWW ) 1990, (NeXT ) 1991 8 6 http://info.cern.ch/ 1994 W3C (World Wide Web Consortium) 39
World Wide Web Mosaic 1993 UIUC ( ) NCSA Marc Andreessen Eric Bina GUI, :,, 40
World Wide Web : Netscape Navigator Internet Explorer 1994 Marc Andreessen Jim Clark Netscape, Mosaic Navigator 1994 Microsoft Mosaic Spyglass, Internet Explorer Netscape Navigator,, Navigator integration == IE Unix, Mac OS X 2000 41
World Wide Web : Internet Explorer, MS Netscape (1998 ) (Mozilla) 2002 Mozilla 1.0 2004 Firefox CSS 2, CSS 3, Plugin/Extension MS IE 42
World Wide Web : Internet Explorer, (Apple) MS IE, Netscape KHTML (Konquerer ) Webkit Chrome (Google) Webkit, 43
3. (WWW)
(WWW) HTML etc. images, movie clips, interactive media, etc. Client side programming Server side programming 45
HTML HTML: Hyper Text Markup Language 1989, Tim-Berners Lee HTML SGML SGML: Standard Generalized Markup Language (ISO 8879:1986 SGML) : IBM GML 46
SGML, DTD (Document Type Definition) 47
DTD <!DOCTYPE people_list [ <!ELEMENT people_list (person)*> <!ELEMENT person (name, birthdate?, gender?, socialsecuritynumber?)> <!ELEMENT name (#PCDATA)> <!ELEMENT birthdate (#PCDATA)> <!ELEMENT gender (#PCDATA)> <!ELEMENT socialsecuritynumber (#PCDATA)> ]> <people_list> <person> <name>fred Bloggs</name> <birthdate>2008-11-27</birthdate> <gender>male</gender> </person> </people_list> 48
HTML HTML 1.0 ~ HTML 2.0 1989 ~ 1991, HTML. 1.0 SGML, 2.0 SGML Tim-Berners Lee 50
HTML HTML 3 1995 ~ 1997 (Netscape vs. IE) W3C, 3.2 ( ) 51
HTML HTML 4 1998 ~ 1999 (IE ) W3C HTML CSS. Strict, Transitional, Frameset 52
HTML XTHML 1.0 2000 ~ HTML 4 XML ( ) HTML (e.g., ) W3C HTML XTHML XHTML HTML4, (IE 8) 53
HTML XHTML ( ) (<p> ~ </p> O) (<p>random <i>text</p></i> X) (element) (attribute) (value) (<p align = center >) (<br>, <hr> <br />, <hr />) HTML,... 54
HTML HTML 5 2009 ~ (IE vs. Webkit vs. Gecko etc) XHTML HTML HTML WHATWG (Web Hypertext Application Technology Working Group), 55
(World Wide Web: WWW)? (., FTP ). web 56
57
웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상, 인터랙티브 미디어 (플래시) 등을 담을 수 있다 웹 브라우저가 HTML 의 내용을 해석하고 사용자가 볼 수 있는 형태로 렌더링 함 렌더링 엔진에 따라 브라우저 분류: Trident(Internet Explorer), Webkit (Safari, Chrome), Gecko (Firefox) HTML Code Web Browser Web Page 58
웹 구조의 이해 웹 서버 일련의 웹페이지를 저장하고 사용자에게 제공해 주는 공간 프로토콜 (규약, 절차)에 따라 웹 주소 해석 (http) http://www.example.com/path/file.html GET /path/file.html HTTP/1.1 Host: www.example.com /var/www/path/file.html (리눅스 서버의 경우) 59
( ) HTTP 1.1, HTTP 1.2 load 60
Vendor Product Websites Hosted (mill) Percent Apache Apache 111 54% note PHP, RoR, JAVA Microsoft IIS 50 24% ASP Igor Sysoev nginx 16 8% Google GWS 15 7% lighttpd lighttpd 1 0% RoR 61
:, : ( ) ( ) HTML, HTML 62
: - vs. : :, (Oracle, MySQL, MS SQL ) static: http://www.naver.com/test.html dynamic: http://www.youtube.com/watch?v=b4gbqb5jrz0 DB 63
: dynamic DB request Serverside scripting request ASP Java via JavaServer Pages (*.jsp) PHP (*.php) Perl (*.pl) Python (*.py) Ruby (*.rb) 64
: HTML : : dynamic interaction / (e.g., Quicktime, Flash, Java ) 65
: Flash, Java RIA RIA (Rich Internet Application) RIA Adobe Flash / Adobe Air Microsoft Silverlight Java / JavaFX 66
: Client-side scripting: Server-side scripting HTML, Client-side scripting HTML JavaScript: Netscape, VBScript: Microsoft Visual Basic, IE. 67
4. 2.0
2.0 2.0 2000, (.com) kosmo.com - 1 ( ) IPO,.,, / 69
2.0 2004 10 O Reilly 10 2.0 2.0 70
2.0 2.0 80% 20% : 20% 80% Amazon.com 20% 80% ( (Long Tail) ) 71
2.0 2.0 display model,, Aggregation ( ) RSS 72
2.0 :, GarageBand, :, (RSS), Wiki, UCC, :, : AdSense ( ) 73
2.0 2.0 (Collective Intelligence), 참여 웹"2.0 UCC 개방 공유 74
2.0 2.0 UCC (User Created Contents), UGC (User Generated Contents) Prosumer,, 75
2.0 2.0 2.0 X, :, : RSS API:, API, mashup 76
2.0 2.0 XML 2.0 2.0, RSS API (Open API) Mashup AJAX 77
2.0 RSS = Web + Log RSS feed RSS: Really Simple Syndication, Rich Site Summary XML, / podcast 78
2.0 Social Tagging and Foxonomy : ( ) : Foxonomy = Folk + Taxonomy ( + ( ) ). Flickr.com, del.icio.us Tag Cloud: 79
2.0 Open API & Mashup API: Application Programming Interface, Open API, : api var map = new GMap2(document.getElementById ("map_canvas")); map.setcenter(new GLatLng(37.4419, -122.1419), 13); 80
2.0 Open API & Mashup Mashup: : HousingMaps (http:// www.housingmaps.com/) 81
2.0 (google.com) 1998 Lawrence Page Sergey Brin yahoo.com PageRank AdSense ( ) 82
2.0 itunes itunes: RSS /, UCC 83
2.0 (wikipedia) (wiki) ( / / ) wikipedia UCC, 84
2.0 YouTube, Flickr UCC (UGC), TV SNS (Social Network Service) MySpace, Facebook, Twitter, digg (, SNS ) 85
,, : google docs, calendar. CEO 3.0, 86
: Ricard Stallman.. PC.. ( ) 87
Web 2.0 James Surowiecki, The wisdom of crowds (diverse), (decentralized), (way of summarizing people s opinions into one collective verdict),., del.icio.us,,,, 88
Web 2.0 digital footprints social network agent Siri 89
Web 2.0 Siri, google +1 90
Questions?