Download Programming the Web using XHTML and JavaScript

Web-based Application
Development
Lecture 3
Anita Raja
Agenda

Introduction to the Internet (concluded)


Planning a Web Site


PTW Chapter 1
WWS Chapter 1
Creating a Basic Web Page

PTW Chapter 2
Basic Services

FTP – File Transfer Protocol (sftp)


TELNET (ssh)


Connect to remote computer as if a local user
Early 70’s Ray Tomlinson




Moves files from computer to computer
Hacked FTP to pass messages to users
E-Mail was born
World-wide use of Internet
The other reason for explosion in use of Internet is
due to…
Basic Services

Timothy Berners-Lee





1989
Trying to share documents between research
groups at CERN
Hypertext
Markup language – formatting
Transfer protocol – send/receive marked-up
document
Basic Services




HTML – Hypertext Markup Language
HTTP – Hypertext Transfer Protocol
Browser
W W W – World Wide Web
Basic Services


First browsers were text-based
1993 @ U. Illinois, MOSAIC created


GUI Browser – Graphical User Interface
Mosaic  Netscape
Client-Server Computing



Client
Server
Web page access


Document is delivered at the client
Comm. Connection is broken after
document arrives at client
• 1981
• Intel 8088
• 4.77 MHz
• 16 - 64 KB RAM
• 160KB floppy drives (1 or 2)
• $4,000
IBM PC Model 5150
PC Comparison
1981
2003
% Change
Speed
4.77
MHz
2GHz
+41,929%
RAM
16KB
128MB
+800,000%
Storage
160KB
40GB
+25,000%
Cost
$4,000
$690
- 580%
Other Comparisons
1903
(1981)
+24
1927
(2005)
+87
1990
(2068)
The Web Wizard’s Guide to
Web Design
Chapter 1
Planning a Web Site
Identifying the Audience

Who is more important?




Designer
Audience
Successful design meets the needs of
the audience, not the designer!
Users. Who are they? Why are they
here? What are they looking for? How
do they think?
Identifying the Audience



The sponsor is not the audience!
The customer is the audience
No customer = site’s purpose unfulfilled
Identifying the Audience

Possible design approaches:

Organization-centered



Technology-centered



Organization’s point of view
Public perception?
If you’ve got it, flaunt it
Does the technology serve the needs of the site?
User-centered

Target audience
Identifying the Audience


Define the audience
Study them



What do they need?
How do they think?
Develop site


Use technologies to support purpose
So visitors can understand and use
Identifying the Audience

Ways to define audience - demographics








Age
Gender
Geography/Residence
Income
Education
Race/Ethnicity
Interest
(Web) History
Identifying the Audience

Steps to define audience:

Picture them at the computer





Who are they?
 Range of ages
 Gender
 Income
Why are they here?
How did they get here?
Do they have a history with this organization?
Are there common characteristics?
Determining Site’s Purpose

What


Why



What will visitors do at the site?
Why do they want to do it?
Why would they want to do it here and not
somewhere else?
Definition serves both customer and
organization needs
Determining Site’s Purpose
Organization’s Needs
Customer’s Needs
Provide services
Consume services
Inform potential
customers about the
organization
Find out what
resources are available
Determining Site’s Purpose

Look at the verbs:



Increase sales
Purchase an item
Communicate the mission
Determining Site’s Purpose

Goals (strategic view)



Objectives (tactical view)




Long-term
Organization-centered (usually)
Specific means by which goals will be accomplished
User-centered (usually)
Many Web sites serve a variety of purposes
Understand them from the beginning
Determining Site’s Purpose

How does success look?




Always provide a means to measure the success
of the site
Specify these criteria from the beginning
What means will be used?
How will they be quantified?
Planning the Structure



“Form follows function”
Design the functions first, the form will follow naturally
Flow Chart


How the subdivisions work or are organized
Statement of functions



The purpose each subdivision serves
Each subdivision serves a unique purpose
(What happens if this concept is violated?)
Planning the Structure





Avoid meaningless generalities
Be concrete
Be detailed
Use action verbs
Consider user’s perspective
Planning the Structure

Specifications





Filename
Text
Images
Links
Menus
Possibilities of the Web

Text



Efficient means of transferring information
Screen not as comfortable as the printed page
Hypertext

How will your site use links?



For navigation?
To access content?
How will the links be represented?
Possibilities of the Web

Images

Most frequently used after text




Content (the image is the message)
Navigation
Icons (represent an idea)
Limited by bandwidth

Measures rate at which data moves between points
Possibilities of the Web

Multimedia




Animation
Sound
Video
Virtual Reality
http://www.virtualgettysburg.com/vg/panoramas/multi_node.html

Interactivity

The user is not passive!
Assignment



Hands-On Exercise, p. 30
Choose a Web site.
Using the first two bullets as a guide:



Describe the audience of the site
Create a statement of purpose for the site
Analyze the site:




Did the site define the audience well or not?
What is its purpose? Is it clear?
What is your evidence?
In addition to your analysis, turn in a hardcopy of any
relevant pages from the site you selected.
Programming the Web using
XHTML and JavaScript
Chapter 2
Creating a Basic Web Page
The HTML Source Document

“Surfing”




Click hyperlink
Browser requests document from server
Server returns document requested
Browser displays document
The HTML Source Document

Document contains HTML source code



Describes content and layout of Web page
Content: what to display
Layout:


How it will look
How it will behave
The HTML Source Document

HTML documents are text-only


What you’d see on a keyboard
Layout specified by “elements” or “tags”


Specify the structure of the page
Classify the contents


“This content is a heading”
“This content is just some text”
The HTML Source Document

Heading tags





<h1>Some text goes here</h1>
1–6
Most important – least important
Ch02-Ex-01
Paragraph tag


<p>The paragraph goes here</p>
Ch02-Ex-02
The HTML Source Document


Tag structure of Web pages
HTML tags

<html>The entire Web page goes here</html>
The HTML Source Document

Head tags




<head>The head goes here</head>
Special information goes in the head section
<title>The page title goes here</title>
Body tags


<body>The body goes here</body>
The page content goes in the body section
The HTML Source Document
<html>
<head>
<title>Page Title</title>
</head>
<body>
Page content goes here
</body>
</html>
The HTML Source Document

Ch02-Ex-03
The HTML Source Document

Use plain-text editors (Notepad)


Filename.htm (or .html)




Other types of editors (like MS WORD) use
hidden formatting codes
No spaces (underscore character instead)
Enclose in quotes when using Notepad
File – Open …
Drag icon into open browser window
HTML, XML, and XHTML

Writing HTML code:


Indent
Nest properly
HTML, XML, and XHTML
Correct
Incorrect
<head>
<title>Chapter 2</title>
</head>
<head>
<title>Chapter 2
</head>
</title>
HTML, XML, and XHTML

Browsers:


Evaluate from the top down
Ignore whitespace




Tabs, extra spaces, line breaks
Make your HTML code easily read by
humans
Ch02-Ex-03 but without human formatting
Does HTML code have to be lower case?
HTML, XML, and XHTML

Browsers developed along diverging paths




Netscape
Explorer
Features were added – not always in the
same way
1994 - W3C created

Create an “official” version of HTML
HTML, XML, and XHTML



PCs – not much of a problem
Handheld devices – HUGE problem
Need:


A standardized version of HTML
Compatible with all types of devices


PCs, handhelds, others?
HTML development stopped at V4
HTML, XML, and XHTML







XML – Extensible Markup Language
Specifies a universal, structured format
Data is classified by its meaning
Users could create custom tags
Car dealer: <make> <model> <year>
Very strict syntax rules ensure universality
Case matters!
HTML, XML, and XHTML
XHTML – Extensible HTML
 Official release January 2000
 XHTML is not XML but it is based on XML
 Inherits rules and benefits of XML
 Thus, XHTML is case-sensitive:
<body> ≠ <BODY> ≠ <Body> ≠ <BoDy>
 Why?

HTML, XML, and XHTML

Exceptions imply complexity




Software cannot be written simply
It must account for each exception individually
Programs must therefore be larger and more
difficult to maintain
Complexity requires


Additional processing (slower) an
More memory (larger and more expensive)
HTML, XML, and XHTML


How to make HTML into XHTML?
Before <html> add:
<?xml version=“1.0”>
<!DOCTYPE html PUBLIC ¬
“-//W3C//DTD XHTML 1.0 Transitional//EN” ¬
http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd>


1st line: XML Declaration
2nd line: Document Type Definition
HTML, XML, and XHTML

Also, change <html> tag itself:
<html xmlns=“http://www.w3.org/1999/xhtml”>
XML namespace



“Tags defined in this document conform to
the W3C definitions found at ...”
Start using the new standards NOW
Ch02-Ex-04
HTML, XML, and XHTML




<meta> tag describes document content
Useful for search engines
Optional, goes in <head> section
Attributes:


Name: “keywords”, “description”
Content
<meta name=“keywords” content=“coffee, tea, imported” />
Paragraphs and Line Breaks



Can’t use whitespace to format document
HTML uses elements (tags) and only
elements to define document’s structure
Paragraph tag <p>



Classifies a block of text as a paragraph
Preceded and followed by a blank line
(usually)
Can add other attributes (Chapter 3)
Paragraphs and Line Breaks

Break tag <br>






Generates a line break
Without inserting a blank line like the <p> tag.
“Empty” tag – no </br> needed
<br /> instead (space optional)
/ required by XHTML to indicate an empty
element
Ch02-Ex-05