Higgins’ course powerpoints

Powerpoint 1 for the first two chapters of text

Remarks

• Text powerpoints are distributed to course instructors. I have put these on my P:drive.

• Course materials are very nice but omit some details and examples which I’ll try to fill in.

• My supplementary powerpoints will be on my w:drive.

Protocols

• Nodes and domains have names like HigginDM and www.oneonta.edu.

• Computers use numeric values to represent these addresses on the web, ie. Your “IP” address.

• Organizations are assigned blocks of addresses.• Domains are represented from most general to

more specific.• Servers implementing Domain Name System

(DNS) perform translation from fully-qualified domain names to numeric IP addresses

Web or internet

• The internet refers to the physical computers connected by wires.

• Computers communicate via TCP/IP (transmission control protocol-internet protocol) and higher level protocols often sit on this.

• Typically individual machines connect to a LAN and thence to the internet via a single server.

• The web refers to the software and protocol(s) (principally http) by which these machines communicate.

Servers

• Servers make documents in the document root available to clients via URLs which map to the actual file.

• Remember, addresses (URLs) are mapped by the server to their physical location so, for example, http://www.flowers.com/tulips.html might be mapped to a file on the physical server machine at /admin/web/topdocs/bulbs/tulips.html

Tomcat

• We will use Tomcat server (servlet container) for running Groovlets and Grails. Grails comes with an embedded Tomcat.

• We should have a distribution for needed software at\\oneonta.edu\labshare\CompSciFiles\Groovy• You will click that link, go up one dir and copy the

Groovy dir to a thumb drive. More on this later.• But… it contains Tomcat, Groovy, Grails, MySQL.

Eclipse/Textpad

• Textpad can be used to write any html, JavaScript, XML, or Groovy files.

• We hope to get Groovy plugin for Eclipse for Java in labs. This will facilitate development/testing of Groovy but is not critical.

Programmer’s toolbox• The old text contains some coverage of XHTML, JavaScript, Perl,

PHP, Ruby, as well as Java (Applets, Servlets and JSP).• JavaScript is not Java. It got its name because it was developed

around the time Java became very popular and it has a similar syntax.

• We will not cover PHP, Ruby or Ruby on Rails • Instead we will cover Groovy

More… Groovy…Grails…Ajax

• In Groovy is interpreted, dynamic Java. Although standard Java is also Groovy, Groovy supports some new mechanisms and operators which we will explore.

• We will write some Groovlets – little snippets of Groovy that can be launched in a container like Tomcat to run as Servlets.

• Grails is a development framework for web-based applications that may access a database. The Grails “framework” produces the standard components of an application and the developer customizes these. Grails is based on the MVC architecture which separates presentation and data model from the logic. Grails is Java-based and developed out of Rails.

AJAX

• AJAX is shorthand for asynchronous-javascript and XML. In traditional web interactions the client sends messages to the server (by clicking something, for example) and then the client waits. The current browser display is then replaced with the new document provided by the server. The transmission and rendering time can be disruptive. In AJAX web apps, the browser doesn’t need to wait for server response to continue, and server responses represent a smaller part of the entire document so it can be displayed faster.

• We will do some AJAX.

scripting vs programming languages

• JavaScript and PHP (ASP and JSP, too) are “scripting languages” because they are often embedded in a larger or different application context, HTML.

• That is, bits of script are interspersed with standard html.

• Java, Ruby and Perl are full blown programming languages.

• Our coverage will be more of a survey, with plenty of examples, of perl, php, ruby and javascript.

client-server

• Browsers are software that run on client machines and deliver documents – often html but not always- to the user.

• Servers are software that sit on a logically (though not necessarily physically) remote machine and deliver responses to ‘get’, ‘post’, ‘trace’ and other client requests.

Servers

• One directory structure under the server is the document root where documents which the server can access are stored.

• The server root and other directories under it store the server itself and support software.

• The server maps requested URLs to files under the document root (whose actual location is not known to the client).

HTTP: hypertext transfer protocol

XHTML

• HTML and XML are both derived from SGML (Standard Generalized Mark-up Language), an ISO standard for describing text-formatting languages.

• HTML was originally intended to described document structure for uniform presentation across different browsers and platforms.

XML and XHTML

• HTML went through a number of transformations, but still does not guarantee standardized presentation across browsers.

• It is not a strict language, and syntactically incorrect HTML is usually presented anyway in some fashion or other.

• XML is a strict notational format. X stands for eXtensible.

• XML can be “extended”, by adding tags for application-specific features.

XML and XHTML

• XML documents can be validated to access their syntactical correctness and adherence to a predefined application definition (a DTD or Schema).

• XHTML (1.0 in 2000) redefined HTML as an XML language with its own DTD, so it can be validated.

• Latest versions of MS IE and mozilla support (mostly) the latest standard, XHTML 1.1

• Stylesheets (CSS) are now a deprecated features of HTML 4.0.

• There are three “levels” of XHTML 1.0 including a “transitional” phase allowing inclusion of deprecated features of HTML 4.0.

HTML or XML?

• Some old browsers choke on XHTML• Because so many documents on the web are in HTML it

will be supported for a long time.• XML requires more programmer discipline to write.• HTML documents lack consistency, because browsers

don’t enforce standards and programmers don’t adhere to the ones it does have.

• XML documents can be validated by an XML browser or a validating tool (some free for download).

• XHTML editors provide support for creating XHTML documents.

XHTML Validation

• WWW-consortium has acronym W3C

• It has a file-upload validation service at http://validator.w3.org/file-upload.html

• Screenshot in text

• MS has a validator you might be able to find and download for desktop use.

Document Structure

• XML documents must have a single “root” node. Who it is depends on the application.

• XHTML documents must have HTML as the root.

Slightly modified text example

<?xml version = "1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><!-- greet.hmtl A trivial document --><html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Our first document </title></head> <body> <p> Greetings from your Webmaster! </p> </body></html>

Running validator on the previous example – missing encoding

A variation of text example of blockquote tag

Just the body<body> <p> Abraham Lincoln was president of the US through the Civil War and assasinated by John Wilkes Booth at the Ford Theatre. His Gettysburg address took place on the field of perhaps the greatest battle of the war... </p> <blockquote> <p>"Four score and seven years ago our fathers brought forth on this continent, a new

nation, conceived in Liberty, and dedicated to the proposition that all men are created

equal.</p> <p>We are now engaged in a great civil war, testing whether that nation, or any nation, so conceived, and so dedicated, can long endure</p> </blockquote> <p> The Civil War and Lincoln left a lasting imprint on our nation</p> </body>

meta

• The meta element provides additional information about a document. It has no content but provides information through attributes name and content.

• A common name is keywords with content set to various document keywords.<meta name=“keywords” content=“binary

trees, linked lists, stacks” />

Graphics formats

• More than you ever wanted to know here

• graphics

2.10 Frames

• Frames are rectangular sections of the display window, each of which can display a different document

• Because frames are no longer part of XHTML, you cannot validate a document that includes frames

• The <frameset> tag specifies the number of frames and their layout in the window• <frameset> takes the place of <body>• Cannot have both!• <frameset> must have either a rows attribute or a cols attribute, or both (usually

the case)• Default is 1• The possible values for rows and cols are numbers, percentages, and asterisks

• A number value specifies the row height in pixels - Not terribly useful!• A percentage specifies the percentage of total window height for the row -

Very useful!

2.10 Frames (continued)

– An asterisk after some other specification gives the remainder of the height of the window

– Examples:

<frameset rows = "150, 200, 300">

<frameset rows = "25%, 50%, 25%">

<frameset rows = "50%, 20%, *" >

<frameset rows = "50%, 25%, 25%" cols = "40%, *">

frames• The <frame> tag specifies the content of a frame• The first <frame> tag in a <frameset> specifies the content of the

first frame, etc.– Row-major order is used– Frame content is specified with the src attribute – Without a src attribute, the frame will be empty (such a frame CANNOT be filled

later)• If <frameset> has fewer <frame> tags than frames, the extra

frames are empty

2.10 Frames (continued)

• Scrollbars are implicitly included if needed (they are needed if the specified document

will not fit)

• If a name attribute is included, the content of the frame can be changed later (by

selection of a link in some other frame)

>Note: the Frameset standard must be specified in the DOCTYPE declaration

Frames example

<?xml version = "1.0" encoding = "utf-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!-- frames.html

An example to illustrate frames

-->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head> <title> Frames </title>

</head>

<frameset cols = "20%, *">

<frame src = "contents.html" />

<frame src = "fruits.html" name = "descriptions" />

</frameset>

</html

2.10 Frames (continued)

<!-- contents.html The contents of the first frame of frames.html, which is the table of contents for the second frame --><html xmlns = ″http://www.w3.org/1999/xhtml″> <head> <title> Table of Contents Frame </title> </head> <body> <h4> Fruits </h4> <ul> <li> <a href = "apples.html" target = "descriptions"> apples </a> <li> <a href = "bananas.html" target = "descriptions"> bananas </a> <li> <a href = "oranges.html" target = "descriptions"> oranges </a> </ul> </body></html>

2.10 Frames (continued)

• Nested frames - to divide the screen in more interesting ways

SHOW nested_frames.html

2.11 Syntactic Differences between HTML & XHTML• Case sensitivity

• Closing tags

• Quoted attribute values

• Explicit attribute values• id and name attributes

• Element nesting