1 / 71

ECT 270 Client-side Web Application Development

Overview of networking, Internet, WWW, Unix survival. Covers HTML, CSS, JavaScript. Taught by Professor Robin Burke. Includes assignments and projects. Learn how to create web pages and applications.

dneese
Download Presentation

ECT 270 Client-side Web Application Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related