format - Oneonta

cabbagepatchtapeInternet and Web Development

Feb 5, 2013 (4 years and 8 months ago)

159 views

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