Download Slides

Objectives
CSCI335: Software Engineering
via Web Applications
•  Course overview
•  Overview of web
•  Introduction to HTML
•  Projects overview
Professor Sprenkle
[email protected]
Apr 22, 2013
Sprenkle - CSCI335
1
Apr 22, 2013
Sprenkle - CSCI335
2
Discussion:
What are web applications?
Survey of Your Web Experience
•  Uses the WWW?
Ø For what?
•  Give examples of static web pages vs
•  Wrote Web pages?
web applications
Ø Using what tools?
•  Wrote JavaScript?
•  Wrote Web applications?
Apr 22, 2013
Sprenkle - CSCI335
3
The Internet
Apr 22, 2013
Sprenkle - CSCI335
4
Creation of the World Wide Web
•  Result of confluence of
•  Connection of computer networks using the
Internet Protocol (IP)
Ø Fast computers
Ø Internet
Ø Hypertext theory, e.g., links to
other text
Ø  Allows network applications, e.g., email, file transfer,
world wide web, remote login, …
Web's historic logo
designed by Robert Cailliau (Belgian CSist)
•  Inventor: physicist
Tim Berners-Lee
Internet
Apr 22, 2013
Sprenkle - CSCI335
Ø Vision: make all information
available to all people at all
times
Ø 1989 at CERN
5
Apr 22, 2013
Sprenkle - CSCI335
Tweet at 2012 Olympics
“This is for everyone”
6
1
Evolution of WWW
Most Popular Web Sites
•  ftp/email ...
•  to gopher ...
•  to simple html pages ...
•  to web sites ...
•  to dynamic html ...
•  to web commerce
•  Guesses?
•  All in less than 20 years"
Apr 22, 2013
Sprenkle - CSCI335
7
Most Popular Web Sites
Apr 22, 2013
Sprenkle - CSCI335
8
Most Popular Web Sites
Rank in Feb 2008
Rank in April 2010
Google
Rank in April 2013
1
Google
1
2
Facebook
2
Facebook
9
1
Yahoo!
3
Yahoo! mail
2
3
YouTube
4
MySpace
3
6
Wikipedia
5
YouTube
10
5
msn
6
eBay
6
12
Amazon
7
Wikipedia
13
16
ebay
8
Twitter
9
Bing
10
•  Note: metrics
http://www.hitwise.com/us/datacenter/main/
http://www.ebizmba.com/articles/most-popular-websites
Apr 22, 2013
Sprenkle - CSCI335
9
Apr 22, 2013
Sprenkle - CSCI335
What This Course is About
My Responsibilities
•  Web applications
•  Prepare useful, interesting knowledge
•  Come to class prepared
•  Interesting, relevant, and challenging
Ø  Distributed computing
Ø  Web application technologies (server and client)
Ø  How to develop high-quality Web applications
10
assignments
•  Software tools
•  Software engineering
•  Prompt feedback on assignments
Ø  Large development project
Ø  More software, collaboration tools
Ø  Emulate real-world experience with actual client
•  Life-skills
Ø  Reading, writing, discussion, presentation
Apr 22, 2013
Sprenkle - CSCI335
11
Apr 22, 2013
Sprenkle - CSCI335
12
2
Your Responsibilities
•  Come to class prepared, on time
•  Turn in assignments on time
Evolution of WWW
Ø Don’t get behind when we only have 4 weeks!
•  When you’re having trouble
Ø Look for help on the Web
•  Find, adapt solutions
•  Give credit to where you found solution, if novel
enough
Ø Ask me for help
•  ftp/email ...
•  to gopher ...
•  to simple html pages ...
•  to web sites ...
•  to dynamic html ...
•  to web commerce
Where we’re starting
•  All in less than 20 years"
•  Learn, absorb, synthesize
Ø Extra Credit: take it to the next level
Apr 22, 2013
Sprenkle - CSCI335
13
World Wide Web
•  Built on top of the Internet
•  Example of distributed computing:
Apr 22, 2013
Sprenkle - CSCI335
14
How Does The Browser Get a Page?
•  In Web browser, enter a URL
Ø URL: Uniform Resource Locator
Ø Web browsers and Web servers
Favicon
•  Communicate using HTTP (Over IP/TCP)
Internet
Protocol
used
Via HTTP
Apr 22, 2013
Ø May not have explicitly typed in “http”
Web Browser,
e.g., Firefox, IE,
Safari, Opera, …
www.cnn.com
Web Server, e.g.,
Apache, Microsoft IIS
Sprenkle - CSCI335
Host
•  Default protocol
•  Other protocols: https, ftp
15
Apr 22, 2013
Sprenkle - CSCI335
16
How Does The Browser Get a Page?
How Does The Browser Get a Page?
•  Look up Host’s IP Address using DNS
•  Browser now makes the request using HTTP
Ø Need to be able to “find” host on the Internet
Ø Routing through Internet is by IP address
Ø HTTP: HyperText Transfer Protocol
•  Common Types of HTTP Requests:
•  Domain Name System (DNS)
Ø GET: download a page
Ø POST: download a page
Ø HEAD: just get the “header” for a page
Ø Set of servers that map domain name to IP
Address(es) and vice versa
www.espn.com
•  For example, browser makes request GET /
199.181.132.250
HTTP GET request
•  Unix commands host and nslookup can
lookup this information
Apr 22, 2013
Sprenkle - CSCI335
17
Apr 22, 2013
www.cnn.com
Sprenkle - CSCI335
Web Browser
18
3
How Does the Web Server
Serve a Web Page?
HTTP GET request
•  Receives request for a resource on TCP port 80
•  Looks for resource in the Web Document directory
How Does Browser Get a Page?
•  Receives response from server
•  Displays file in appropriate format
Web Browser
Ø  Not all files on a Web server are meant for others to see
Ø  Specific directory holds these files
•  Example apache conf file: DocumentRoot
"/var/www/html"
•  If file is found, server sends an HTTP 200 response
with the requested document
Ø  Otherwise, sends appropriate error response
HTTP Response
Apr 22, 2013
Sprenkle - CSCI335
19
HTTP Status Codes
Code
Meaning
200
OK: Request succeeded
3xx
Redirection (temporary or
permanent)
403
Error: No permission
404
Error: File not found
500
Internal server error
Apr 22, 2013
Sprenkle - CSCI335
2010
Look:
2008
Look:
Apr 22, 2013
Sprenkle - CSCI335
The Process Without GUI
sprenkle@machine courses$ telnet www.cs.wlu.edu 80
Trying 137.113.118.204...
Connected to terras.cs.wlu.edu.
Escape character is '^]'.
GET /
<html>
<head>
<meta http-equiv="REFRESH" content="0;url=http://www.wlu.edu/x18630.xml">
</head>
<BODY>
<!--You should be redirected to the correct page
in a few seconds.-->
</BODY>
</HTML>
Connection closed by foreign host.
21
Apr 22, 2013
Sprenkle - CSCI335
More on URLs
How Does Browser Get a Page?
•  Specifies the location of a resource
•  Format: <protocol>://<host>/<path>
•  Receives response from server
•  Displays file in appropriate format
Ø Examples:
Sprenkle - CSCI335
22
What does that mean?
http://www.cs.wlu.edu/~sprenkle/cs335/
http://www.cs.wlu.edu/~sprenkle/cs335/
schedule.php
Apr 22, 2013
20
23
Apr 22, 2013
Sprenkle - CSCI335
24
4
HTML: HyperText Markup Language
•  Describes the content and structure of
information on a web page
Ø Not the same as the presentation (appearance
on screen)
•  Markup document with elements
Ø Has hierarchical structure
HTML: HYPERTEXT
MARKUP LANGUAGE
Apr 22, 2013
Sprenkle - CSCI335
•  Written in plain text
25
Apr 22, 2013
Sprenkle - CSCI335
HTML vs XHTML vs HTML5 vs …
XHTML
•  HTML is an evolving standard
•  Earlier versions of HTML
•  A newer version of HTML, standardized in 2000
•  Uses a markup format called XML
Ø  XML + HTML = XHTML
Ø “Loose” on standards for how to write/render
HTML
Ø Benefit: allows for authoring “imperfect” HTML
that still renders okay
Ø Limitation: page can look different in different
browsers
•  Though the browser will accept some malformed
HTML, we'll write "strict" XHTML that complies to
official web standards
•  Why use XHTML and web standards?
Ø  More rigid and structured language
Ø  More interoperable across different web browsers
Ø  More likely that our pages will display correctly in the
future
•  XHTML was created to address limitation
Apr 22, 2013
Sprenkle - CSCI335
27
Apr 22, 2013
XHTML
HTML5
•  A strict XHTML page uses some different syntax
•  Goals
• 
26
and tags
Differences with HTML
Sprenkle - CSCI335
28
Ø Support multimedia (Web 2.0 applications)
Ø Better definitions for markup
Ø Consistent support by browsers
Ø  Tags must be lowercase
Ø  Attributes must have values
Ø  Enforces correct nesting of elements
•  Including mobile devices
•  Why use XHTML instead of HTML?
•  Not yet standardized
Ø  HTML has lax syntax rules, leading to sloppy and
sometimes ambiguous documents
Ø Still in discussion and revisions
•  XHTML syntax is much more strict, leading to clean and
clear documents in a standard form
•  Can be written in HTML or XHTML forms
Ø  The syntactic correctness of XHTML documents can be
validated
Apr 22, 2013
Sprenkle - CSCI335
29
Apr 22, 2013
Sprenkle - CSCI335
30
5
What does this all mean?
Element Syntax
•  We’re going to write in HTML5
•  An element is made up of tags and content
Ø Tendency towards the XHTML syntax
Ø Syntax:
Ø Example:
•  Relatively easy, especially with right tools
•  Less ambiguous documents
<tag>content</tag>
<p>This is a paragraph</p>
•  If an element contains no content, open and
Ø Can be validated
close a tag together:
•  HTML5 is an evolving standard but current
Ø Syntax:
Ø Example:
version is a “stable target”
Ø With time, even more browser support
<tag/>
<hr/>
•  Most whitespace is insignificant in HTML
Ø It gets ignored or collapsed into a single space
Apr 22, 2013
Sprenkle - CSCI335
31
HTML Tags
•  Some tags can contain additional information
called attributes
•  Tags without content:
Ø Syntax: <tag attribute="value"
attribute="value"/> Ø Example: <img src="bunny.jpg" alt="A bunny" />
Sprenkle - CSCI335
Sprenkle - CSCI335
33
Structure of an HTML5 Page
32
Structure of an HTML Page
•  The header describes
the page
•  The body contains
the page's contents
•  An HTML page is
saved into a file with a
name ending in
extension .html
or .htm
Ø Syntax: <tag attribute="value"
attribute="value"> content </tag>
Ø Example: <a href="page2.html">Next
page</a>
Apr 22, 2013
Apr 22, 2013
Apr 22, 2013
<html>
<head>
information about
the page
</head>
<body>
page contents
</body>
</html>
Sprenkle - CSCI335
34
Adding a Title to a Page
Says we’re using HTML5
<html>
<head>
information about the page
</head>
<body>
page contents
</body>
</html>
<!DOCTYPE html>
• title elements go inside of the head
element
•  Displayed in the web browser's title bar and
the bookmark text
<title>CSCI335: Web Applications</title>
This text is the title
•  Displayed in search engine results pages
Apr 22, 2013
Sprenkle - CSCI335
35
Apr 22, 2013
Sprenkle - CSCI335
Jedit demo
36
6
<p> : Paragraph Tag (block-level)
Block-level vs. Inline Elements
Two different types of elements
Block-level Elements
•  Contain an entire large
region of text
•  Examples: paragraphs,
lists, table cells
•  Browser displays a
margin of vertical
whitespace between
block-level elements for
separation
Apr 22, 2013
Inline Elements
•  Affect a small amount of
text
•  Must be nested inside of
a block-level element
•  Examples: bold text, code
fragments, images
•  Browser allows many
inline elements to appear
on the same line or within
the same block-level
element
Sprenkle - CSCI335
37
<p>I have a dream that one day this
nation will rise up
and live out the true meaning of its
creed:
"We hold these truths to be selfevident: that all men are created
equal.”</p>
•  Browser collapses whitespace:
I have a dream that one day this nation will rise up and
live out the true meaning of its creed: "We hold these
truths to be self-evident: that all men are created
equal."
Apr 22, 2013
Sprenkle - CSCI335
38
Headings: <h1>, <h2>, … <h6>
Headings: <h1>, <h2>, … <h6> •  Headings separate major areas of the page
•  Headings separate major areas of the page
Ø Block-level
Ø Block-level
•  Presentation:
<h1>Famous American Speeches</h1>
<h2>Civil Rights Leaders</h2>
<h3>Martin Luther King, Jr.</h3>
Ø 1, 2, and 3 use font sizes that are larger than the
default font size
Ø 4 uses the default size
Ø 5 and 6 use smaller font sizes
Famous American Speeches
Civil Rights Leaders
Martin Luther King, Jr.
Apr 22, 2013
Sprenkle - CSCI335
39
Apr 22, 2013
Sprenkle - CSCI335
Hypertext Links/Anchors: <a>
More on Anchors: <a>
•  Basis of Web
•  Links to other pages or parts of a page
• href attribute specifies the destination URL
•  Are inline elements
• href URLs can be
Ø Must be placed inside a block-level element,
such as <p> or <h1>
<p>Martin Luther King’s gave his most famous <a href="http://www.americanrhetoric.com/speeches/
mlkihaveadream.htm">speech</a> in 1963.</p>
Martin Luther King gave his most famous speech in 1963.
Apr 22, 2013
Sprenkle - CSCI335
41
40
Ø Relative: another page within this Web site
•  Just the resource path
•  Easier to maintain than absolute paths
Ø Absolute: full URL
<p>Today’s <a href="lab0.php">lab</a>.</p>
<p><a href="http://www.w3schools.com/tags">
HTML Help</a></p>
Today’s lab.
HTML Help
Apr 22, 2013
Sprenkle - CSCI335
42
7
Making links
•  “Click here” is intrusive–the control
Optional Anchor Attributes
Attribute
interferes with the content
•  Press the blue text is even worse
•  A link traversal should be ancillary
•  Good approaches:
Ø Highlight glossary terms
Ø Embed the links in footnotes
•  Who uses this approach a lot?
Ø Allow the anchor to fit into the rest of the
document naturally "
Apr 22, 2013
Sprenkle - CSCI335
43
Wikis
•  Collaborative web sites
•  Content generated by registered users or
The tool tip text
name
Or id
(preferred)
Names an anchor.
Use to create a
bookmark in a
document.
The name
Apr 22, 2013
Example in Wiki:
CS335 Resources
Sprenkle - CSCI335
44
it is invalid XHTML
•  Bad HTML:
<p><a href="00-intro.pdf">Lecture</p>
<p>
This text also links to Lecture</a>
</p>
45
Line Break: <br/>
Apr 22, 2013
Sprenkle - CSCI335
46
Horizontal Rule: <hr/>
•  Forces a line break in the middle of a blockClose with />
immediately
<p>Today’s <a href="lab0.html">lab</a><br/>
The lab is due on Tuesday.
</p>
<p>Tuesday’s lab coming soon...</p>
Today’s lab.
This lab is due on Tuesday.
Larger gap
between paragraphs Tuesday’s lab coming soon…
Sprenkle - CSCI335
Text to display in a
tool tip
•  Browser may render it correctly anyway, but
Ø http://servo.cs.wlu.edu/dokuwiki/
doku.php/courses/cs335/spring2013/
home
Ø Powered by Dokuwiki, a PHP-based Web
application
Apr 22, 2013
title
Ø A closing tag must match the most recently
opened tag
•  Our course Wiki:
level element (inline)
_self = default, this
window/frame
_blank à new window
_top à full window
_parent à parent frame
•  Tags must be correctly nested
Ø Update content using a browser
Sprenkle - CSCI335
Value
Where to open the
target URL
Nesting Tags
anyone
•  Goal: easy development of content
Apr 22, 2013
Meaning
target
•  A horizontal line to separate sections of a
page visually (block-level)
<p>First paragraph</p>
<hr/>
<p>Second paragraph</p>
First paragraph
Second paragraph
47
Apr 22, 2013
Sprenkle - CSCI335
48
8
Images: <img>
Images as Links
•  Inline element
•  Inserts a graphical image into the page
•  Nest inside an <a> tag
• title attribute for tool tip
Ø src attribute specifies image URL
Ø XHTML requires an alt attribute that describes
the image
<p><a href="http://icanhascheezburger.com">
<img src="f10_cat.jpg" alt="F10 Cat"
title="LOL Cat" /></a></p>
<p><img src="lol_cat.jpg"
alt="LOL Cat"/></p>
alt: Used by search engines,
screen readers, browser if
image can’t be displayed
Apr 22, 2013
Sprenkle - CSCI335
49
Apr 22, 2013
Sprenkle - CSCI335
Practice
Comments <!-- -->
•  You want your page to look like:
•  Document your HTML file
•  Comment out text
Favorite LOL Cats
50
<!-- Lab Web Page, By Sara Sprenkle -->
<p> Lab is due <!-- tomorrow --> today. </p>
Lab is due today.
Apr 22, 2013
Sprenkle - CSCI335
51
Apr 22, 2013
Sprenkle - CSCI335
Three Types of Lists
Unordered List: <ul>, <li>
•  Unordered Lists <ul>
•  Ordered Lists <ol>
•  Definition Lists <dl>
• ul represents a bulleted list (block-level)
• li represents a single item within the list
52
(block-level)
<ul>
<li>6-cylinder engine</li>
<li>Cruise control</li>
<li>Automatic locks</li>
</ul>
•  6-cylinder engine
•  Cruise control
•  Automatic locks
Apr 22, 2013
Sprenkle - CSCI335
53
Apr 22, 2013
Sprenkle - CSCI335
54
9
Nested Unordered Lists
Ordered List <ol>
•  a list can contain other lists
• ol represents an ordered (by default,
<ul>
<li>Standard Features:
<ul>
<li>4-cylinder engine</li>
<li>CD player</li>
</ul>
</li>
<li>Optional Features:
<ul>
<li>Cruise control</li>
<li>Automatic locks</li>
</ul>
</li>
</ul>
Apr 22, 2013
numbered) list of items (block-level)
•  Standard Features:
§  4-cylinder engine
§  CD player
•  Optional Features:
§  Cruise control
§  Automatic locks
Sprenkle - CSCI335
55
Common Error: Not Closing a List
(block-level)
• dt represents each term
• dd represents the term’s definition
<dl>
<dt>&lt;dl&gt;</dt>
<dd>represents a list of definitions of
terms</dd>
</dl>
57
•  A way of representing any Unicode character
within a web page
Apr 22, 2013
Entity
&lt; &gt;
&quote; &amp;
&trade; &copy;
&pi; &delta; &Delta;
&eacute; &egrave; &ntilde
 How would you display &amp;
on a web page?
Sprenkle - CSCI335
<dl>
represents a list of definitions of terms
HTML Character Entities
Character(s)
<>
“&
™©
πδΔ
éèñ
56
• dl represents a list of definitions of terms
Underpants Gnomes’ Three-Phase Business Plan
1.  Collect underpants
2.  ?
Everything after list
3.  Profit
is also indented.
More information
Sprenkle - CSCI335
Underpants Gnomes’ Three-Phase Business Plan
1.  Collect underpants
2.  ?
3.  Profit
Apr 22, 2013
Sprenkle - CSCI335
Definition List: <dl>, <dt>, <dd>
<p>Underpants Gnomes’ Three-Phase Business
Plan</p>
<ol>
<li>Collect underpants</li>
<li>?</li>
<li>Profit</li>
<p>More information
Apr 22, 2013
<p>Underpants Gnomes’ Three-Phase Business
Plan</p>
<ol>
<li>Collect underpants</li>
<li>?</li>
<li>Profit</li>
</ol>
Apr 22, 2013
Sprenkle - CSCI335
58
Phrase Elements: <em>,
<strong>, <code>
•  em: emphasized text, usually rendered in italic
•  strong: strongly emphasized text, usually
rendered in bold
•  code: a short section of computer code, usually
rendered in a fixed-width font
<p>The <code>ul</code> and <code>ol</code>
tags make lists.</p>
<p>HTML is <em>really</em>, <strong>
REALLY</strong> fun!</p>
The ul and ol tags make lists.
HTML is really, REALLY fun!
59
Apr 22, 2013
Sprenkle - CSCI335
60
10
Phrase Elements: <sub>, <sup>
Bad XHTML
• sub: subscript characters
• sup: superscript characters
<p>This is <strong>the <em>best</strong>
time </em> to invest!</p>
•  What is wrong?
<p>x <sub>2</sub><sup>3</sup>
+ y <sub>1</sub><sup>2</sup>
</p>
•  How did the author want this to display?
x23 + y12
Apr 22, 2013
•  How can we write it correctly?
Sprenkle - CSCI335
61
Apr 22, 2013
Sprenkle - CSCI335
Bad XHTML
Practice Problem
<p>This is <strong>the <em>best</strong>
time </em> to invest!</p>
•  We want the page to look like:
•  What is wrong?
The Simpsons Fun Facts
62
Ø Open/close tags aren’t matching
•  How did the user want this to display?
This is the best time to invest!
•  How can we write it correctly?
• 
• 
<p>This is <strong>the <em>best</em> </strong> <em>time</em> to invest!</p>
Apr 22, 2013
Sprenkle - CSCI335
63
Longest-running scripted series
Started on The Tracy Ullman Show
Apr 22, 2013
Sprenkle - CSCI335
64
Preformatted Text: <pre>
Preformatted Text: <pre>
•  A large block of code text in a fixed-width font
•  A large block of code text in a fixed-width font
(block-level)
•  pre blocks are displayed with exactly the
whitespace and line breaks given between the tags
•  pre blocks are displayed with exactly the
<pre>
public static void main(String[] argv) {
System.out.println(“Hello, world”);
}
</pre>
<pre>
public static void main(String[] argv) {
System.out.println(“Hello, world”);
}
</pre>
(block-level)
whitespace and line breaks given between the tags
public static void main(String[] argv) {
System.out.println(“Hello, world”);
}
Apr 22, 2013
Sprenkle - CSCI335
65
How would it look if we had instead enclosed it in code tags?
Apr 22, 2013
Sprenkle - CSCI335
66
11
Tags for Quotations
Tables <table>
•  <q>: a short, inline quotation
•  Used to layout tables
Ø Typically displayed with quotation marks, italics
<p>Quothe the Raven <q>Nevermore.</q></p>
•  Matrix of rows and columns
•  Cell is an intersection of row and column
Quothe the Raven, “Nevermore.”
•  <blockquote>: a lengthy, block-level quote
Ø Contains almost any document element, e.g.,
text, headings, images, tables, …
<p>Lincoln, in his Gettysburg Address:</p>
<blockquote><p>Four score and seven years
ago, our fathers ...</p></blockquote>
Lincoln, in his Gettysburg Address:
Four score and seven Sprenkle
years- ago,
our fathers …
Apr 22, 2013
CSCI335
•  Table caption: <caption>
Ø Inside of a <table> element
Ø Defines the title that proceeds a table
67
Table Row: <tr>, Label: <th>,
Data: <td>
• tr: defines a row in the table
• th: defines a row or column’s label
• td: defines a table’s data cell
<table border="2">
<caption>Baseball Statistics</caption>
<tr>
<th>Name</th>
<th>Batting Average</th>
</tr>
<tr>
<td>Cal Ripken, Jr.</td>
<td>.276</td>
</tr>
</table>
Apr 22, 2013
Sprenkle - CSCI335
68
Baseball Statistics
Name
Batting Average
Notice formatting
Cal Ripken, Jr. .276
69
Apr 22, 2013
Sprenkle - CSCI335
70
Table Sections
•  Can separate the table into three parts:
header, body, and footer
columns
Ø Denoted with thead, tbody, and tfoot
Ø Useful for presentation (Tues)
Ø Similarly with rows
•  Use the colspan attribute to specify how
•  Header includes column labels
•  Body includes table data, including row
many columns to span
Ø Use in <th> or <td> tags
labels
Ø If multiple body sections, browser marks with
thicker horizontal lines
<tr>
An empty data cell
<td></td>
<th colspan="3">Career Statistics</th>
<tr>
Sprenkle - CSCI335
Sprenkle - CSCI335
<table border="2">
<caption>Baseball Statistics</caption>
<tr>
<th>Name</th>
<th>Batting Average</th>
</tr>
<tr>
<td>Cal Ripken, Jr.</td>
<td>.276</td>
</tr>
</table>
•  Some columns need to span multiple
Apr 22, 2013
Apr 22, 2013
Table Row: <tr>, Label: <th>,
Data: <td>
rowspan, colspan Attributes
Spans 3 columns
Ø Sometimes used for layout but better techniques
(like CSS), which we’ll cover later
•  Footer sometimes includes column labels
again and totals for columns
71
Apr 22, 2013
Sprenkle - CSCI335
72
12
W3C HTML Validator
Web Page Metadata: <meta>
http://validator.w3.org
•  Checks your XHTML code to make sure it
meets the official strict XHTML specifications
•  More picky than the Web browser, which
may render malformed XHTML correctly
•  Link included as part of Firefox plug-in
WebDeveloper
•  Represents information about your page
Apr 22, 2013
Sprenkle - CSCI335
73
Ø  For Web browser, search engine, etc.
•  Placed into a page’s head element
•  Not displayed in the page itself
•  meta tags have
Ø  content attribute and
Ø  name or http-equiv (for HTTP headers) attribute
<meta name="description" content="HTML help page" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"/>
Apr 22, 2013
Sprenkle - CSCI335
74
Web Page Metadata: <meta>
•  Describe the page
Web Page Metadata: <meta>
•  Suggestions to search engines about how to
<head>
<meta name="author" content="author’s name"/>
<meta name="revised" content="web page version
and/or last-modified date" />
<meta name="generator" content="software used
to create the page"/>
</head>
•  Search engine may choose to ignore them
Apr 22, 2013
Sprenkle - CSCI335
index your page
75
Web Page Metadata: <meta>
Sprenkle - CSCI335
76
Ø Can specify an icon for a web page
Ø Icon is placed in browser title bar and bookmark/
favorite
Ø Syntax:
<head>
<meta http-equiv="refresh" content="how
often to refresh the page in seconds" />
<meta http-equiv="Content-Type"
content="what type of document this is (may
include internationalization info such as
character encoding" />
</head>
<link rel="shortcut icon" type="MIME type" href="filename" />
Ø Default type is ico
•  Can also use refresh tag to redirect, e.g.,
content="5;url=http://www.cs.wlu.edu"
When would refresh tags be useful?
Sprenkle - CSCI335
Apr 22, 2013
Favorites Icon (favicon)
• link tag - placed in head element
•  Aid browser or Web server
Apr 22, 2013
<head>
<meta name="description" content="for search engine" />
<meta name="keywords" content="words to
associate with your page, comma-delimited" />
</head>
77
•  Doesn’t work in IE6
Ø Must place a file in .ico format named favicon.ico
in the root directory of the web server
Apr 22, 2013
Sprenkle - CSCI335
78
13
Favicon Example: W&L Web Site
Internet Media (“MIME”) Types
•  Multipurpose Internet Mail Extensions
<link rel="shortcut icon" href="prebuilt/v2css/images/favicon.ico"/>
Ø Classifications of data that travel over the
internet
16x16 pixel image
Ø Originally developed for email
•  Used to tell the browser the form (type) of a
file returned by the server
•  Type specifications
Ø Form: type/subtype
Apr 22, 2013
Sprenkle - CSCI335
79
Apr 22, 2013
Sprenkle - CSCI335
80
Internet Media (“MIME”) Types
Presentation of Web Pages
•  Multipurpose Internet Mail Extensions
•  Talked mostly about structure and content of
HTML pages
Ø Sometimes used to specify something’s type
when including resources on a page
•  Want presentation to be separate
•  Form: type/subtype
MIME Type
text/html
text/plain
image/gif
image/jpeg
video/quicktime
Apr 22, 2013
Ø Don’t encode style into the HTML page itself
Ø Easier to apply different styles to a set of web
pages or a whole web site
File Extension
.html
.txt
.gif
.jpg
.mov
Sprenkle - CSCI335
81
Cascading Style Sheets (CSS)
•  Describe the appearance, layout, and
82
• link appears in head element
•  Can link to multiple style sheet files
•  Syntax:
Ø As opposed to HTML, which describes the
content, structure of the page
•  Describe how information is to be displayed,
not what is being displayed
•  Can be embedded in HTML document or
placed into separate .css file
<link rel="stylesheet" type="text/css"
href="filename"/>
•  Example from W&L site:
Ø Advantage of separate .css file: one style sheet
can be shared across many HTML documents
Sprenkle - CSCI335
Sprenkle - CSCI335
Attaching a CSS File: <link>
presentation of information on a web page
Apr 22, 2013
Apr 22, 2013
83
<link rel="stylesheet" type="text/css"
href="http://www.wlu.edu/prebuilt/v2css/
global.css"/>
Apr 22, 2013
Sprenkle - CSCI335
84
14
My First Web Page
Outline for the Course
•  Circa 1995
•  Static Web Pages
Ø  HTML5, Presentation (CSS)
http://www.cs.wlu.edu/~sprenkle/
personal/China.html
Project
Development
•  Usability
•  Dynamic Web Pages, Applications
Ø  Server-side (Servlets, JSPs, …)
• 
• 
• 
• 
• 
• 
Apr 22, 2013
Sprenkle - CSCI335
85
Testing Web Applications
JDBC
Other Java frameworks/tools
Java Script, AJAX
JSTL
Security
Apr 22, 2013
Sprenkle - CSCI335
86
Introduction to Group Projects
Voluntary Associations
•  2 digital humanities projects
•  1 registration project
•  Teams of 4 or 5 people
•  Worth 38% of your course grade
•  Meeting with clients tomorrow afternoon
•  Different projects, different implementation
•  Client: Dr. Sarah Bond, assistant professor of history at Marquette
University
•  5 team members
•  Final Deliverable: An interface to make ancient inscriptions
(focusing on the voluntary associations) easily editable,
searchable, and exportable
Ø  public views - searching, viewing, exporting
Ø  administrative views - edit
•  Expected skills/technology leveraged during project: database
access, manipulation, and updates; user interaction; access
restrictions; usability; digital humanities
•  Extensions: mapping, dynamic interaction, what can we learn?
•  Expected audience: scholars and students of the ancient world
can use the tool to learn new information about the time period
and development opportunities
Ø All will be publicly accessible!
Ø Promote on your resume!
Apr 22, 2013
Sprenkle - CSCI335
87
Apr 22, 2013
Sprenkle - CSCI335
Ancient Graffiti
Course Schedule Visualization
•  Client: Rebecca Benefiel, associate professor of classics at W&L
•  4 team members
•  Final Deliverable: An alternative search interface to the EAGLE
•  Client: Sara Sprenkle
•  5 Team Members
•  Final Deliverable: a visual course scheduler that
database, focusing on inscriptions found in Pompeii and
Herculaneum
Ø  Goal: Look at the inscriptions in context of the location
•  Prototype will be demoed at Linked Ancient World Data Institute
(LAWDI) end of May
•  Expected skills/technology leveraged during project: database
access, manipulation, updates; remote database access; user
interaction; usability; digital humanities
•  Extensions: Dynamic searching features, mapping, mining data
for new information
•  Expected audience: scholars and students of Pompeii and
Herculaneum can use the tool to learn more about the culture at
the time of Vesuvius's eruption.
Apr 22, 2013
Sprenkle - CSCI335
89
88
makes it easy for students to visualize possible
course schedules/alternatives
•  Expected audience: W&L students and faculty
•  Expected skills: database access, manipulation; user
interaction; usability; dynamic behavior
•  Extensions:
Ø  dynamic user interaction
Ø  closed courses, waitlisted courses
Ø  export schedules into some alternative form (iCal?
Google calendar?)
Ø  ??? My guess is that the students will have a lot of ideas
Apr 22, 2013
Sprenkle - CSCI335
90
15
Planning for the Semester
Optional Textbook
•  Group Project
•  7th Edition
Ø Tomorrow a.m.: choose teams; discuss project
development
Ø Tomorrow p.m.: meet with client
•  Tuesday afternoon sessions – earlier?
Ø 2 p.m. – leaves almost 2 hours for lunch, etc.
Ø 1:30 p.m. – leaves 80 minutes for lunch, etc.
•  Today: typical of semester
Ø Part lecture, part discussion, part lab
Apr 22, 2013
Sprenkle - CSCI335
91
Apr 22, 2013
Sprenkle - CSCI335
Lab 0
TODO
•  Intro to the wiki
•  Tools set up
•  Create web pages in HTML5
•  Lab 0
•  Create your project preference list
•  Explore Course Web Page
92
Ø Particular attention to the schedule, examples
Ø Read over the project page on the course web site
Ø Some things you need to have
Ø Feel free to be creative and do other things
•  Read about how Google search works
Ø Write summary in Sakai forum by Tuesday midnight
•  Read and comment on “What Can You
(Legally) Take from the Web?”
Ø Due Tuesday at midnight
Apr 22, 2013
Sprenkle - CSCI335
93
Apr 22, 2013
Sprenkle - CSCI335
94
16