Download - Introduction to Web Development 2 W3C The World Wide Web Consortium (W3C): An organization that serves as a source of public information about the Web,

Introduction to Web Development

2

W3C

• The World Wide Web Consortium (W3C): An organization that serves as a source of public information about the Web, Web development technologies and Web standards.

3

W3C

• W3C provides the current specification for HTML along with proposals for future additions to HTML.

• http://www.w3.org.

http://www.w3.org/

4

Internet History (The "Cliff Notes" Version)

• ARPANET (Advanced Research Project Agency NETwork)– In the late 1960s, the US Department

of Defense began an experiment in the design of robust computer networks.

– Goal: to construct a network of computers that could withstand the loss of several machines without compromising the ability of the remaining ones to communicate.

5


• The technologies that enabled decentralized networking were later refined to become the key protocols of Internet technology, Transmission Control Protocol / Internet Protocol (TCP/IP)

6


• For the most part, only defense contractors and academic institutions used ARPANET.

7


• NSFNET (National Science Foundation Network)– Established by the NSF in 1986. – Open to a much broader range of

academic institutions and research facilities.

– Marked a key shift in the direction of the Internet away from defense, government, and academia toward a more inclusive network that became the backbone of the Internet.

8


• 1980s and 1990s– In the 1980s, private companies

began developing local and wide area networks (LANs and WANs).

– ARPANET was decommissioned in 1989.

9


– Although the physical infrastructure for exchanging information was being built during the 1980s, the higher level of organization needed to link related pieces of information across the vast network lagged behind.

– Instead, there was a patchwork of incompatible data exchange protocols inherited from various lines of parallel internetworking development.

10


– Adding to the confusion was the proliferation of document types and formats, graphics types, database formats, etc.

– Each required the user to both own and master a different piece of software, with no two having quite the same interface.

11


– Even if you could find the data you wanted on the Internet (search engines had not yet been invented), there was no guarantee that you could read it unless you could determine its file type and match it to (and own) the appropriate software.

12

The World Wide Web (WWW)

• The WWW was developed out of CERN, the European Particle Physics Laboratory in Geneva, Switzerland.

• In 1989, Tim Berners-Lee (a physicist) of CERN developed a simple, tag-based language called HTML.

13


• Berners-Lee wanted to exchange physics papers with other physicists.

• HUGE innovation: when a special area of text (called a hyperlink, or just link) was clicked, a request was automatically initiated for the related document that would immediately (well, in theory) be retrieved.

14


• The WWW is the Internet's “user interface”, the result of the interaction between the Internet's wild growth and users' frustrations with its limitations.

• Intended to reduce the “Tower of Babel” confusion of the various protocols of the internet, as well as allowing graphics.

15


• Mosaic, the first web browser, was developed at the National Center for Supercomputing Applications (NCSA) at the University of Illinois, Urbana-Champaign. – Designed primarily for viewing HTML

documents, plus built-in tools to access other resources, such as FTP (more later).

16

The Nuts and Bolts of Internet Communications

• TCP/IP (Transmission Control Protocol / Internet Protocol), the key protocols of the Internet:– The message is broken down into

data packets at the source.– Each packet independently travels to

its destination by whatever network route is most efficient.

– Packets are reassembled when they reach their destination.

17


• TCP/IP (used in conjunction with other protocols) was successful because it delivered a few basic services that everyone needs (file transfer, electronic mail, remote logon) across a very large number of client and server systems.

18


• As with all other communications protocols, TCP/IP is composed of layers…

19


• Transmission Control Protocol is responsible for verifying the correct delivery of data from client to server and vice versa. – Data can be lost in the intermediate

network, so TCP adds support to detect errors or lost data and to trigger retransmission until the data is correctly and completely received.

– Check digits?

20


• Internet Protocol is responsible for moving packets of data from one networked node (any networked device, such as a PC, server, printer, etc.) to another.

21


• Each networked device has its own unique IP address (destination address), used to route data packets. – Example: 208.77.188.16

• New version, IPv6, uses 128 bits. – Supported by current operating

systems, not so much on other devices like home networking routers, network peripherals, etc.

– Conversion is problematic, ongoing.

22

DNS, Domains, and Hosts

• IP addresses like 147.132.42.18 aren't not convenient for humans to use or remember.

• Also, what if we need to move the web server to a different machine, with a different IP address? – We would have to try to contact

everyone who might want to access our server to give them our new IP address!

23


• Thus, creation of the DNS (Domain Name System): easy-to-remember domain names which can remain the same even if the IP address changes. Essentially aliases:– www.amazon.com– www.yahoo.com– www.niu.edu

http://www.amazon.com/

http://www.yahoo.com/

http://www.niu.edu/

24


• DNS proviodes for Uniform Resource Identifiers (URIs), more commonly known as Uniform Resource Locators (URLs): short strings that identify resources on the web such as web pages, documents, images, downloadable files, services, and other resources.

25


• A host refers to a fully qualified domain name. – Example:

www.mydomain.com

26


• For example: http://www.domainname.com/library/filename.html#location

Protocol

File name

Anchor (i.e., bookmark) within the fileServer name

Host

Domain type

Folder

27


• Top-level domain types: the characters at the end of the host, after the period.– Those based on type of activity.– Those based on geographical

location.

28


• Activity-based domain types:– .com - Originally for companies and

commercial activities, now for any purpose.

– .org – Originally for nonprofit organizations and individuals, now for any purpose.

– .net – Originally for network organizations (such as Internet providers), now for any purpose.

29

DNS, Domains, and Hosts– .gov – Governmental organizations in

the United States (monitored).– .mil – Military organizations in the

United States (monitored). – .edu – Post-secondary degree-

granting colleges and universities (monitored, although some non-qualifying institutions retain an .edu domain issued prior to stricter regulations).

30


• Examples of geographically-based domain types:– .us – .uk– .jp– .in

31

DNS, Domains, and Hosts• File Name: If omitted, most servers

automatically go looking for index.htm, index.html, or index.shtml (for server-side includes).

• Other default names can also be set up by the server administrator.

• Search engine spiders (indexing the web) also look for those same “index” files – to your advantage to use these files names.

32


• The DNS system is located on networks throughout the world.

• Each device on the web is configured to check with a “local” DNS server (and backup server) for translating URLS to IP addresses.

33

DNS, Domains, and Hosts• If the host is unknown to that local

DNS server, the DNS server requests the information from InterNIC (http://www.internic.net), the US Department of Commerce DNS server, which maintains the complete list of domain names.

• Once the correct IP address is returned, the local DNS server updates its own records for future use.

34

Purchasing a Domain Name

• See www.register.com, www.hover.com, www.godaddy.com to purchase domain names. (Plenty of other places, too.)

• Can “park” for later use – cheaper.• When you buy a domain name,

you set it up so that the simple domain name forwards to the more complex name you need for your server.

35


• Example:– entering www.pennymcintire.com

forwards to http://www.cs.niu.edu/~mcintire/index.html

• Most accounts include at least one email forwarding account.

• Can easily change domain and email forwarding – almost instantaneous response.

36

Clients, Servers, and Browsers

• The Internet connects clients and servers.

• Clients first…

37


• A client refers to both the user’s browser and the computer upon which that browser runs.

• Also called the view layer or the presentation layer.

• Browsers: Internet Explorer, Firefox, Chrome, Safari, etc.

• The browser’s purpose is to retrieve and display documents for we humans.

38


• The browser uses:– HTML files, which are static files using

the HTML markup language. • HTML is good at indicating structure (the

relationship between items), but not quite so good at indicating formatting (what the items look like).

• More on this later.

39


– Cascading Style Sheets (CSS), the newer and preferred method for indicating formatting such as colors and fonts. • Immensely more powerful than HTML

formatting.• Can be externalized into a single file that

can be referenced by multiple pages, a big advantage when managing lots of pages that should all look alike.

• Can be manipulated by scripting languages.

40


– The Document Object Model (DOM), the object interface to dynamically update the content, structure, and style of HTML documents.• When a page loads into a browser, the

browser creates a hidden, hierarchical map of all of the scriptable objects in the page.

• Scripting languages trace this map to get to each object.

• The DOM keeps track of the characteristics of each scriptable object – color, style, size, etc.

41


– Scripting languages, like JavaScript (which is not Java!) and VBScript, to do active (rather than static) and often interactive tasks such as: • Data validation.• Displaying things or changing formatting

on the fly, such as mouseovers.• Moving elements around the screen, such

as the “falling snowflakes” you see on some web sites.

42


– Dynamic HTML is the integration of HTML, The DOM, CSS, and scripting languages. • Web sites on steroids. • Metaphor of a sentence:

– HTML is the noun; what is displayed.– CSS is the adjective; how it looks.– JavaScript is the verb; it does something.

43


– Also used…• Java applets (small Java programs). • Plug-ins like Flash, music players, etc.

– The browser cannot directly access data in a database using just these client-side tools.

– To access databases, you need server-side technologies, especially Web (or HTTP) servers …

44


• A server is both:– A software package that provides

services to a user. – The computer box upon which the

server software and relevant files reside.

• There could be several software servers (a web server, a data server, etc.) running on a single physical server (computer box).

45


• A web server (HTTP server) delivers the requested page to the browser.

• It runs programs: servlets, Java Server Pages (JSPs), ASP, PHP, ColdFusion, CGI/Perl, server-side scripting languages, etc.– These are used to do things like

displaying data from a database, data validation against a database, updating a database, etc.

46


• Note: this class will not teach server-side technology at all, only client-side technologies; that is, technologies that run in the user’s browser.

47

FTP

• File Transfer Protocol (FTP): a means of transferring files between an FTP server and a client.

• The objectives of FTP are – To transfer data between devices,

reliably and efficiently.– To shield a user from variations in file

storage systems among hosts.

48

FTP

• FTP, though usable directly by a user at the command line or from the URL line of a browser, is easier to use from within an FTP program like WSFTP or Filezilla, or within Dreamweaver.

• You will use one of these programs to FTP your files out to our web server. – See the handout on my webpage,

“FTP Instructions” – please read carefully.

49

HTTP

• HTTP (Hypertext Transfer Protocol) is defined as a stateless, connectionless protocol.

• HTTP is stateless and connectionless because neither the client nor the server maintains information about what is happening during the connection.

50

HTTP

• When a client makes an HTTP request of a server, a connection is initiated and maintained only as long as is required for the server to meet the individual request.

• If another request is made from the same client to the same server, a new connection is established.

51

HTTP

• This contrasts with protocols such as FTP that maintain the connection as long as a client is logged on or until timeout.

• So, with HTTP, a connection is made, the information is provided, and the connection is immediately broken, making way for new requests from other clients.

52

Email

• Electronic mail, using SMTP (Simple Mail Transfer Protocol) and POP 3 (Post Office Protocol version 3).

• The most widely used service on the Internet.

• Email can be delivered, stored, and retrieved without a simultaneous connection between sender and receiver.

53

Email

• Mail clients also support the transfer of attached files using MIME (Multipurpose Internet Mail Extensions).– Tells the the mail client software and

the browser which programs to use to open the various file types (.doc, .html, etc.)

– View and set MIME type in Windows XP:• Windows Explorer > Tools > Folder

Options > File Types, or • Control Panel > Folder Options.

54

Intranets and Extranets

• An intranet is the implementation of Internet communication technologies on an internal network – a "private Internet."

55

Intranets and Extranets

• An extranet is a private network (intranet) that has been expanded to allow vendors or customers to have expanded access to the private network.

• It merges an intranet with the Internet to create a middle-ground of expanded, but not complete, access to an intranet.

56

Internet Security

• Many intranets incorporate an external Internet connection, using a firewall : security software that allows limited access to your site from the Internet, allowing approved traffic in and out according to a well-defined plan.

57

Internet Security• SSL (Secure Socket Layer, older)

and TLS (Transport Layer Security, newer): protocols implemented on a web server for secure communications: privacy and reliability between two communicating applications.

• Indicated in the browser by “https://” instead of “http://”, and a locked padlock icon at bottom of the page or just to the right of the URL box.

58

Internet Security

• SSL, layered on top of TCP, allows the server and client to authenticate each other and to negotiate an encryption algorithm and cryptographic keys before the browser transmits or receives its first byte of data.

59

Internet Security

• The SSL protocol provides connection security that has three basic properties:– The connection is private.

• Encryption is used after an initial handshake that defines a secret key.

– The peer's identity can be authenticated using public key cryptography.

– The connection is reliable.• Message transport includes a message

integrity check.

60

How Web Technology is Used

• The type of web sites you are most accustomed to seeing: public sites that are selling something or that are providing “free” information.

• That’s just the tip of the iceberg…

61

How Web Technology is Used

• Also used as a front-end for standard business applications.

• In this case, the application is using a BUI (Browser User Interface) instead of a standard GUI (Graphic User Interface).

62

How Web Technology is Used• Why a BUI instead of a GUI?

– IT systems must be as agile as the business itself; easier to modify an HTML page than a standard GUI.

– They must also be portable; the HTML page can (in theory) display on any computer that has a browser – doesn’t matter what operating system.

– Updating is easier; update the single version on the server, rather than updating myriad individual PCs.

63

Tools You Need for This Class• You are not at all required to purchase

ANY software yourself, unless you choose to do so.

• You are not required to use any specific software packages, nor will I ever test you on any specific packages. You can use whatever HTML and graphics editing packages you choose to use.

• You are always welcome to create your HTML totally from scratch in any ASCII text editor, like Notepad or Editpad.

64

Tools You Need for this Class• Free tools:

– Adobe’s Dreamweaver (HTML editor), Fireworks (graphics editor), and Flash (animation editor) in our CS labs.• Caution: Native Flash files created in newer

versions of the Flash editor may not be recognized by older versions of the Flash editor.

– Anyone know a good, free Flash editor? – SeaMonkey, a free HTML editor.

http://www.seamonkey-project.org/– Gimp, a free graphics editing package.

http://www.gimp.org/

http://www.gimp.org/

65

Tools You Need for this Class

• Adobe products:– Photoshop, if you have access to it,

can be used in place of Fireworks for editing graphics, but much harder to master.

– Download free, 30-day trial versions of Adobe software from www.adobe.com, although 30 days won't get you through the semester, obviously. • 30 days for Flash will at least get you

through the Flash assignment.

66

Tools You Need for this Class– Student pricing:

• Available through the basement service desk of the NIU Bookstore and through www.journeyed.com.

– Prices range from $179.00 for standalone Dreamweaver CS6 to $449 – normally $1799 – for CS Web Premium (including Dreamweaver, Flash, Photoshop, Illustrator, Fireworks, and Contribute).

• Creative Cloud membership – everything for $29.95/month student pricing, 1 year contract:

http://www.adobe.com/education/products/creativecloud.edu.html?showEduReq=no

67

Tools You Need for this Class

• Microsoft’s Expression Studio– Retail pricing at $149.98.– Can obtain more cheaply (free?)

through our affiliation with Microsoft's Academic Alliance software. See www.cs.niu.edu, near the top right, for instructions.

http://www.cs.niu.edu/