Creating a Web portal

1
Creating a Web portal

• A brief introduction

2
The library
A system view
Environment
U s e r s
Inputs
Outputs
Transformational process
energy money materials personnel information
products services
3
What makes a good Web page?
http//www2.hawaii.edu/donnab/lis670/bad_web_page
.html
4
What makes a good Web page?
Exercise One
Navigation tabs Navigation bar Site
map Simple Clutter-free Consistency Legibility of
text Help Customization Breadcrumbs
Simple colors Bright colors (kids) Mouse-over
menus Currency Quick download time Multilingual Se
arch options
Cool things Cooler things Extremely cool things
5
Web site questions

• Who are your users?
• Staff
• Local community
• Global community

What information needs do you wish to serve?
How do you want to organize the information?
6
Portal organization

• Physical organization
• Server directory structure
• Can be transparent to the user

Logical structure What your user sees Should be
obvious to the user
7
Physical structure (1)
Where you store your files
html_files
public_html
images
html_files
LIS_610
images
public_html
html_files
LIS_670
images
8
Physical structure (2)
Where you store your files
html_files
images
Example http//www.cnn.com/US
9
Logical structure - inverted tree
Welcome
Online catalog
Library hours
Just for kids
Main branch
Kalihi
Manoa
Homework help
Storytime
Guided search
Expert search
10
Logical structure - sequential
Step one
Step two
Step three
Step four
Step five
Ordering
Previous Page
Next Page
11
Logical structure - ring
Start
Keyword searching
Selecting a database
Tutorial
Subject searching
Title searching
Author searching
12
Logical structure - matrix
Welcome
Library hours
Just for kids
Online catalog
Help
Site map
Reserves
Videos
About the library
13
How to convey organization to viewer?
Navigation bar
Navigation tabs
Site map
Breadcrumbs
14
Navigation bar
Site content
Identifying Title
Here
Here
There
There
There
There
There
15
Site map
Site map
Online catalog Basic search Guided
search Reserves Tutorials
Library hours Hobbiton Lothlorien Rivendell
Virtual reference General Pacific Coll.
Kids Page Homework help Fun facts
Español Consultar Servicios Reglas
Française Rechercher Reserver Actualités
16
Susan Johnson's LIS subject guide
http//www.hawaii.edu/emailref/subject_guides/lis/
17
Where is Susan Johnson's LIS subject guide?
Is this a link?
18
Links (1)
Links should be clearly marked
Link destination should be obvious
19
Where is Susan Johnson's LIS subject guide?
X
20
Where is Susan Johnson's LIS subject guide?
21
Where is Susan Johnson's LIS subject guide?
22
Where is Susan Johnson's LIS subject guide?
23
Susan Johnson's LIS subject guide
24
Links (2)
Users should never be forced into page after
page of menus if direct access is possible.
Lynch Horton
Lynch, Patrick J. and Sarah Horton. 2002. Web
style guide basic principles for creating Web
sites. Yale University Center for Advanced
International Media. Available on the Web at
http//www.webstyleguide.com
25
Where is Susan Johnson's LIS subject guide?
26
Where is Susan Johnson's LIS subject guide?
27
Where is Susan Johnson's LIS subject guide?
Family Resources Film Geography German Language
Literature History Journalism Juvenile
Literature Library Information
Science Linguistics
28
Susan Johnson's LIS subject guide
29
Where is Susan Johnson's LIS subject guide?
30
UHM Libraries Sitemap (1)
No subject guides listed.
31
UHM Libraries Sitemap (2)
No subject guides listed.
32
UHM Libraries Sitemap (3)
33
Internet Resources by Subject (1)
34
Internet Resources by Subject (2)
35
Librarian resources (1)
36
Librarian resources (2)
37
UHM Library Information Science Dept Library
Liaison Resources page
38
Sitemap
Allow user to easily jump to a resource.
Enhance user's understanding of the logical
organization of the Web site
39
Site Map

• FBI Priorities
• About Us
• Headquarters and Programs
• FBI Executives
• Field Offices
• Legal Attache Offices
• FBI Tour Information
• Business Opportunities
• Heraldry of the Seal
• Frequently Asked Questions
• Press Room

40
Clicking on "FBI Tour" gets you
41
Navigational tabs - where to go
Bywater Public Library
Hours
Search
Help
Site Map
Welcome to the Bywater Public Library, the most
extensive library in the Shire. We hope you will
find everything you need here
42
Icons (1)
On a Web page what does this mean?
What does this mean to a Hebrew or Arabic speaker?
The meaning of a sign is generally
culturally-mediated.
43
Israel Government Gateway - English page
44
Israel Government Gateway - Hebrew page
45
Icons (2)
Search
Help
Site Map
Users know what to do without needing to de-code
the metaphor
Return to previous page
Add textual description to icon
46
Bread crumbs - Where you've been and where you are
Let me introduce myself
LIS670
Home
Discussions
Let me introduce myself
47
Avoiding clutter
48
Avoiding clutter
Don't overload each page
4-7 objects maximum in short-term memory
Chunk information
49
Chunking
Grouping objects spatially
Using graphical boundaries
Grouping by color, texture, lightness, orientation
Adding line spaces between paragraphs of text
50
Chunking UH Grad. Div.
51
Text
12 to 14 point type for continuous text
Contrast with background
Avoid using ALL CAPS
Paragraphs flush left, ragged right
52
Text (cont'd)
Now is the time for all sentient beings to come
to the aid of their neighbors. May all beings be
free of suffering and may peace reign on earth.
May all beings be free of suffering and
may peace reign on earth.
53
Color contrasting
1
2
Same level of luminance
2 1
3
4
Different level of luminance
2 3
54
Red green problem
1
2
Not good
2 1
A significant number of people are red/green
colorblind.
55
Levels of importance
Color
Position
Size
Isolation
56
What do users look at first?
57
Surfing the 'Net
Server
Request messages
Text, graphics, error messages
Client
Webserver application responds to requests from
client
Browser application sends requests to server
58
A word about HTML
HyperText Mark-up Language
59
Manuscript
Chapter One A Mysterious Visitor It was a
dark and stormy night. As was my custom on a
Friday night, I was curled up in my favorite
armchair reading Cataloging Classification.
All of a sudden, I heard a loud Tap, tap, tap
on the window. Wondering what type of person
would be out and about on such a stormy night, I
went over, pulled aside the curtain, and peered
out into the darkness.
60
Marked-up manuscript
Chapter One A Mysterious Visitor It was a
dark and stormy night. As was my custom on a
Friday night, I was curled up in my favorite
armchair reading Cataloging Classification.
All of a sudden, I heard a loud Tap, tap, tap
on the window. Wondering what type of person
would be out and about on such a stormy night, I
went over, pulled aside the curtain, and peered
out into the darkness.
A
fleur graphic
B
ital.
b.f.

61
Paste-up
Chapter One A Mysterious Visitor It was a
dark and stormy night. As was my custom on a
Friday night, I was curled up in my favorite
armchair reading Cataloging Classification.
All of a sudden, I heard a loud Tap, tap, tap
on the window. Wondering what type of person
would be out and about on such a stormy night, I
went over, pulled aside the curtain, and peered
out into the darkness.
62
ASCII (text) file
Chapter One A Mysterious Visitor It was a dark
and stormy night. As was my custom on a Friday
night, I was curled up in my favorite armchair
reading Cataloging Classification. All of a
sudden, I heard a loud Tap, tap, tap on the
window. Wondering what type of person would be
out and about on such a stormy night, I went
over, pulled aside the curtain, and peered out
into the darkness.
63
HTML file
HTML tags (instructions to the browser)
ltHTMLgt ltCENTERgt ltH1gtChapter Onelt/H1gt ltH2gtA
Mysterious Visitorlt/H2gt ltIMG SRCfleur.gifgt lt/CE
NTERgt ltPgtIt was a dark and stormy night. As was
my custom on a Friday night, I was curled up in
my favorite armchair reading ltIgtCataloging
Classificationlt/Igt. All of a sudden, I heard a
loud ltBgtTap, tap, taplt/Bgt on the
window.lt/Pgt ltPgtWondering what type of person
would be out and about on such a stormy night, I
went over, pulled aside the curtain, and peered
out into the darkness.lt/Pgt lt/HTMLgt
64
Web page
Chapter One A Mysterious Visitor It was a dark
and stormy night. As was my custom on a Friday
night, I was curled up in my favorite armchair
reading Cataloging Classification. All of a
sudden, I heard a loud Tap, tap, tap on the
window. Wondering what type of person would be
out and about on such a stormy night, I went
over, pulled aside the curtain, and peered out
into the darkness.
65
Coding a Web page

• Create an ASCII file with textual content
• Use HTML tags to format text and indicate where
  to place graphics
• Place file on Web server
• Open directory file to public

66
Types of tags
Paired tags ltSTRONGgt . . . lt/STRONGgt
ltTABLEgt . . . lt/TABLEgt Single tags ltBRgt
ltHRgt
67
HTML tags
ltHTMLgt lt/HTMLgt
68
Two parts of a Web page
ltHTMLgt ltHEADgt lt/HEADgt ltBODYgt
lt/BODYgt lt/HTMLgt
69
Head of a Web page
ltHEADgt ltTITLEgt donnas LIS 670 test
file page lt/TITLEgt lt/HEADgt
70
Title tags
71
Body of a Web page
ltBODYgt Material that will appear in the viewing
window of the browser. lt/BODYgt
72
Adding a header
ltBODYgt ltH1gt My Web Portal lt/H1gt Aloha,
World! lt/BODYgt
73
Level 1 header
74
Header levels
ltBODYgt ltH1gt My Web Portal lt/H1gt ltH2gt This is a
level 2 header lt/H2gt Aloha, World! lt/BODYgt
75
Header levels (cont'd)
76
Centering an item
ltBODYgt ltCENTERgt ltH1gt My Web Portal lt/H1gt lt/CEN
TERgt lt/BODYgt
77
Centering an item (cont'd)
78
Adding a hot link
Link destination
ltA HREFhttp//www.ala.orggt Click here to go
to the ALA Web site. lt/Agt
Clickable text
79
Using an image as a hot link
ltA HREFhttp//www.ala.orggt ltIMG
SRChttp//hypatia.slis.hawaii.edu/prototype/lis
670/ala.jpggt lt/Agt
80
Creating a table
ltTABLEgt lt/TABLEgt
ltTRgt lt/TRgt
ltTDgt Neat stuff lt/TDgt ltTDgt More neat
stuff lt/TDgt
81
Creating a table (cont'd)
82
Adding a table border
ltTABLE BORDER3gt ltTRgt ltTDgt Neat
stuff lt/TDgt ltTDgt More neat
stuff lt/TDgt lt/TRgt lt/TABLEgt
83
Adding a table border (cont'd)
84
Widening a table
ltTABLE WIDTH100 BORDER3gt ltTRgt ltTDgt Neat
stuff lt/TDgt ltTDgt More neat
stuff lt/TDgt lt/TRgt lt/TABLEgt
85
Widening a table (cont'd)
86
Adding a row to the table
ltTABLE WIDTH100 BORDER3gt ltTRgt ltTDgt Neat
stuff lt/TDgt ltTDgt More neat
stuff lt/TDgt lt/TRgt ltTRgt ltTDgt Stupendous
stuff lt/TDgt ltTDgt Supercalifragilisticexpialid
ocious lt/TDgt lt/TRgt lt/TABLEgt
87
Added row
88
Adding color to the table
ltTABLE WIDTH100 BORDER3 BGCOLORPINKgt ltTRgt ltTD
gt Neat stuff lt/TDgt ltTDgt More neat
stuff lt/TDgt lt/TRgt ltTRgt ltTDgt Stupendous
stuff lt/TDgt ltTDgt Supercalifragilisticexpialid
ocious lt/TDgt lt/TRgt lt/TABLEgt
89
Added color
90
Adding color to specific cells
ltTABLE WIDTH100 BORDER3gt ltTRgt ltTD
bgcolorpinkgt Neat stuff lt/TDgt ltTDgt More
neat stuff lt/TDgt lt/TRgt ltTRgt ltTDgt Stupendous
stuff lt/TDgt ltTD bgcolorpinkgt Supercalifragil
isticexpialidocious lt/TDgt lt/TRgt lt/TABLEgt
91
Added color
92
Adding a style sheet
ltHEADgt ltTITLEgt donnas Web portal
lt/TITLEgt ltSTYLE TYPE"text/css"gt BODY
background FFDDFF H1 color 770077
H2 color 00FF00 lt/STYLEgt lt/HEADgt
93
Color coding in hexadecimal numbers
FFDDFF
Red
Green
Blue
94
Binary numbers
100 10 1
0 0 7
4 2 1
1 1 1
Base Ten 0 1 2 3 4 5 6
7 8 9 10
Base Two 0 1 10 11 100 101 110 111 1000
1001 1010
95
Hexadecimal numbers
2 5 5
Decimal number
Counting
100 10 1
0
0
1
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
F F
Hexadecimal number
16 1
256 16 1
Base Ten 0 1 2 3 4 5 6 7 8 9 10 11
12 13 14 15 16
Base 16 0 1 2 3 4 5 6 7 8 9 A B
C D E F 10
96
Coding lilac in hexadecimal numbers
FFDDFF
Red
Green
Blue
97
Coding white in hexadecimal numbers
FFFFFF
Red
Green
Blue
98
Coding turquoise in hexadecimal numbers
00FFFF
Red
Green
Blue
99
Linking your pages (1)
first_page.html
ltA HREFsecond_page.htmlgt Click here to go to
next page. lt/Agt
second_page.html
ltA HREFfirst_page.htmlgt Click here to return
to previous page. lt/Agt
100
Alt tag
Text alternative for image to aid lynx users or
viewers with vision problems
ltIMG SRC"flower.gif" ALT"picture of a flower"gt
101
Table data for screen readers
ltTABLEgt ltTRgt ltTDgtNeat stuff ltBRgt lt/TDgt lt/TRgt lt/TAB
LEgt
Break tag
102
Situational needs
Models available
Loan Info.
Crash test data
How to negotiate
How to transfer ownership
Buying a car
Insurance rates
Repair records
Blue-book values
Lemon law
Laws on required insurance
Customer Satisfaction ratings
Re-sale value
103
Becreative!