ECT 270 Client-side Web Application Development

1. ECT 270Client-side Web Application Development Professor Robin Burke

2. Introduction to the course • Overview of networking, the Internet and the WWW, Unix survival • 1st week • HTML • 3 weeks • Cascading Style Sheets • 1.5 weeks • JavaScript • 4 weeks

3. Information • Professor Robin Burke • Office: CST 453 – CTI building • Email: rburke@cs.depaul.edu • Phone: 312-362-5910 • Office hours: 10 am – 1 pm on Monday • Also by appointment!

4. Resources • Course web site • http://josquin.cs.depaul.edu/~rburke/courses/f03/ect270/ • Course On-Line • for submitting homework • for discussion forum

5. What you need • Prerequisites • CSC 211 & ECT 250 • Texts • Carey, P. Creating Web Pages with HTML and XML / Creating Web Pages with Dynamic HTML • Possibly other on-line readings • Materials • Diskettes to store work • Unix account on students.depaul.edu (shrike) • Verify your user id and password ASAP. Contact ID card services – DePaul Center 9700, SAC 182

6. Grading • 7 assignments • more or less weekly • quizzes on most assignment due dates • 40% • Midterm • not multiple choice • will not require you to memorize HTML details • 30% • Final project • Group project • Details in Week 5 • 30%

7. Academic Integrity Acts of plagiarism or cheating will not be accepted – any violation of the academic integrity policy will be punished and may result in an “F” grade. Plagiarism & cheating include (but are not limited to) • Direct copying of any source without proper acknowledgement. • You may only use code that you did not write if given permission by the instructor to do so. Code so used must be clearly cited. • Pictures or text copied by other websites are acceptable, as long as proper acknowledgment is specified. • Using material prepared for other purpose, e.g. submissions for other courses • Submitting work prepared by someone else or copying material from someone else. • Refer to the course information & the DePaul University academic integrity policy

8. Outline • Networking • Internet • Protocols • Addressing • Web • Protocol • History • Break • Using shrike • Crash course on Unix

9. What is the Internet • The Internet is an interconnected network of thousands of networks and computers. ( “inter-network”) • Began in the 1960s as a Department of Defense project • The World Wide Web is just one of the services that run on the Internet.

10. What is a network? • Computer system that links two or more computers - To share data, info, hardware, software • Local Area Network (LAN) • A collection of computers that share hardware, software and data over a small geographical area (home, office, school lab) • Wide Area Network (WAN) • It spans a wider area (offices, schools, cities, countries) • Connects different LANs

11. Networking

12. Network layers

13. Packet-switched Network

14. Protocols • Because networks use a wide variety of hardware and software, protocols are needed to coordinate communication and data transmission. • A protocol is a set of rules for the exchange of data across communication lines.

15. Need for Protocol • Client programs must know how to state requests • Server must know how to interpret • The protocol is the agreement • Important • A weak or inflexible protocol limits what can be done • A complex protocol may be difficult to implement

16. Addressing • The IP protocol has to know where to send its packets • “Routing” • To route a packet we need its address • “IP Address”

17. IP Addresses • A host on the Internet must have an IP address • 32-bit number • divided in four 8-bit numbers • Written with a dot in between • 14.192.1.100 • Each number ranges from 0-255 • Some addresses have a special interpretation • 127.0.0.1

18. IP Addresses, cont’d • In general • the farther to the right in the address • the closer to a particular host • 14.192.1.100 • all of the machines with 14.192.1 addresses • are probably in a LAN • all of the machines with 14.192 addresses • might be owned by the same organization

19. Problem #1 • can we run out? • 2^32 addresses • Answer • yes • Solution • IPv6 = 128 bit addresses • starting to be available now

20. Problem #2 • How to keep track of lots of 32-bit numbers • Would you rather type • 207.171.183.16 or • amazon.com • Solution • domain naming system

21. Organization name Host name Organization name Org. type (top level domain) Domain Name Server • A Domain Name Server (DNS) is responsible for the mapping between domain names and IP addresses. .com .org .gov .mil .net .it .museum .biz bach.cs.depaul.edu IP address: 140.192.32.50

22. DNS • One of the few centralized services in a distributed Internet • Everybody must agree on what name matches what number • Site creator must go through a domain registration process • claim a name • associate it with an address

23. Client/server interaction • A lot of Internet applications work under the client/server model • Server • knows something, or • can do something • Client • wants to know something, or • wants to do something

24. Client/server cont’d • Client • sends request • Server • sends response • Example: Email • A central computer stores and forwards electronic mail • Client computers contact the server to get email for a particular user

25. Protocols for client/server internet applications • Simple Mail Transfer Protocol (SMTP): transferring email messages from one machine to another • File Transfer Protocol (FTP): transferring files between local and remote machines. • Telnet: a terminal emulation protocol used to login in remotely. • Telent now superceded by ssh • increased security

26. HyperText Transfer Protocol • HTTP is the protocol responsible for transferring and displaying web pages. • HTTP uses the client/server model of computing. • The client is the user’s web browser (I.E, Netscape) • The server is the web server where the page resides. (www.nyt.com)

27. Client/Server Web Interaction

28. HTTP Protocol • Request • “I want something” • Response • “Here it is” • or “Not found” • Headers • Body

29. A Typical HTTP Exchange Netscape’s URL Window Client: Please open a connection to ‘www.nytimes.com’ and send me the default file. I am located at IP Address 140.192.1.6. NY Times Web Server Server: Let me check…. Okay, the default file at this site is of type HTML. It is 1749 bytes in size. The date is Tue, May 2nd at 15:33:33. NY Times Web Page

30. HTTP Response Example

31. Uniform resource locator • People on the Web use a naming convention • called the uniform resource locator (URL). • A URL consists of at least two and as many as • four parts. • A simple two part URL contains the protocol • used to access the resource followed by the • location of the resource. • Example: http://www.cs.depaul.edu/ • A more complex URL may have a file name • and a path where the file can be found.

32. A Web URL deconstructed The protocolused path that identifieslocation ofdocument uniquely domain document name The user is a directory in the system http://josquin.cs.depaul.edu/~rburke/courses/f03/index.html

33. Note • Path may not correspond to files/folders • The web server is free to interpret the path however it likes • 80% of the time • the path indicates a location in a file system where a file is stored

34. Other URLs • FTP URL • ftp://rburke4@condor.depaul.edu/ • Access my files on condor using File Transfer Protocol • Email URL • mailto:rburke@cs.depaul.edu • mailto scheme for electronic mail addresses • Newsgroup URL • news:dpu.general • news scheme for USENET news groups and articles

35. Prehistory of the Web • In the 1960s Douglas Englebart, created the first experimental hypertext system: Augment • 1984: Apple releases the HyperCard program as part of its graphical user interface operating system Macintosh. • Introducing hypertext as a widely-available commercial product.

36. Hypertext Documents • Hypertext refers to a document that its connected with other documents in many ways • Hypertext systems have been around for a long time • 1960s • Why was the web an innovation? • keep this question in mind

37. CERN and hypertext • In 1990 CERN, a lab for particle Physics in Geneva, had been connected to the Internet for 2 years. Scientists were looking for better ways to circulate their scientific papers and data. • Tim Berners-Lee proposed an hypertext development project.

38. The birth of the Web • In the next two years Berners-Lee developed the code for an hypertext server program and made it available on the Internet. • He envisioned the set of links to and from computers worldwide as a spider web, hence the name World Wide Web. • The CERN is considered the birth place of the WWW.

39. What did Berners-Lee invent? • HTTP • The protocol for distributing web pages • HTML • The language for describing web pages

40. HTML Documents • Most web pages are HTML documents • HTML • HyperText Markup Language • A language for describing the contents of a hypertext page

41. Web browser history • A web browser is a user interface that allows users to read (browse) HTML documents. It acts as a web client. • The first browsers were text based. • In 1993 Andreessen developed the first browser with a graphical user interface, named Mosaic. • In 1994 Andreessen developed Netscape • In 1995 Microsoft released free Internet Explorer starting the “Browser Wars”. • In 1998, Netscape was clearly losing. Launched mozilla.org • Made a browser based on Netscape code open-source

42. This figure shows a Web page is not only a source of information, it can also be a work of art. graphic image links interesting fonts The Web designer has a great deal of control over the format of the page. Web Page with Interesting Fonts, Graphics, and Layout

43. Terminology • Web browser • a client program that can render (display) web pages • and other media • wide variety: text, graphical, cell phone, etc. • Web server • a server program that responds to web requests and delivers web pages • and other media • Proxy / gateway / cache / firewall / load balancer • Special programs or devices that are "middlemen" in the communication between browser and server • Improve efficiency, security, etc.

44. More terminology • web page • an HTML document that can be viewed in a web browser • hyperlink • a special notation in an HTML document that points to an Internet resource

45. More terminology • client-side • processing that takes place within or associated with the web client, or browser • server-side • processing that takes place within or associated with the web server • web application • any software application whose mode of delivery is the WWW

46. The name of this class • Client-side Web Application Development • We will be developing • web applications • that make use of the browser

47. Why the Web? • The protocols that made linking possible were open • The concept of linking extended to an open-ended set of Internet protocols • The concept of inclusion of images by a mechanism similar to linking • The use of one-way links with minimal bookkeeping requirements

48. Open protocols • The web protocol (HTTP) is open • Meaning • anyone can write a web server • anyone can write a web browser • anyone can author web pages • there is a well-defined public mechanism for revising and extending the standard • Not true of earlier hypertext technologies

49. Break

50. Tools for building and maintaining your web site • shrike.depaul.edu • a server computer • running the Apache web server • Various programs for site building • telnet: run commands on shrike • ftp: move files to and from shrike • browser: for viewing your files • text editor: for working with HTML files