docSlides
download 
Report Transcription
Slides
Objectives
CSCI335: Software Engineering
via Web Applications
• Course overview
• Overview of web
• Introduction to HTML
• Projects overview
Professor Sprenkle
sprenkles@wlu.edu
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><dl></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
< >
"e; &
™ ©
π δ Δ
é è ñ
How would you display &
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
