INFSY 547: WEBBased Technologies

1
INFSY 547 WEB-Based Technologies

• Gayle J Yaverbaum, PhD
• Professor of Information Systems
• Penn State Harrisburg

2
Cascading Style Sheets
3
Style Sheets

• Purposes
• Development Environment

4

• Inline
• Embedded or document level document
• External for global formatting

5
External File

• Create a .css file with style information
• Reusable
• Text file with a .css extension
• Stored on server where .html file is located
• Each entry starts with
• an xhtml tag or
• special tag referenced from the .xsl file
• Document is linked via an xhtml command

6
CSS and XSL

• CSS styles HTML XML
• documents.
• XSL transforms documents.

7

• Inline takes precedence over embedded
• Embedded takes precedence over external
• Demo

8
Style Sheet Link
ltxsltemplate match"/"gt ltHTMLgt
ltHEADgtltTITLEgtBook Examplelt/TITLEgt ltlink
rel"stylesheet" type"text/css
hrefBooks.css"gt lt/linkgt lt/HEADgt
ltBODYgt ltxslapply-templates/gt lt/BODYgt
lt/HTMLgt lt/xsltemplategt
9
Begin to Use in all Work

• Use an external file for the primary design.
• When necessary, override attributes within the
  specific HTML tag.

10
Good screen design

• Well-organized information
• Well-placed items
• Well-chosen graphics
• Well-designed icons and buttons

11
Screens

• Contrast elements on the screen
• Make different categories/issues different
• Bring out key elements
• Make lesser elements less vivid
• Creates dynamic situations
• Repeat design throughout
• Provides consistency
• Creates unity
• Group Related Elements and separate
• others
• Align Items that form a group

12

• Two-level Hierarchy
• indentation
• contrast

Alignment connects visual elements in a sequence
13
Screen Resolution

• Most users have monitors configured at 800X600
  pixels or 1024X768 pixels.
• May want to place entire page in a table and
  width set to a percentage

14
Usability

• Usability is the effectiveness, efficiency and
  satisfaction with which a specified set of users
  can achieve a specified set of tasks in a
  particular environment.
• International Standards Organization

15
Usability

• Demonstrates good customer service
• Produces bottom line results

16
Categories

• Navigation
• Text
• Graphics and
• Animation
• HomePage and
• Content

17
Navigation

• Provide good graphical navigation and
  interactivity with links
• Intuitive navigation
• Appear in the same place from screen to screen.
• Visible site structure on every page

18

• Groupings of 79
• Needs to be intuitive
• Drill-down?
• Sequential menus?
• Search engine?
• Does not hit dead ends
• Acceptable accessibility for handicapped

19
Text PageLayout

• Bolding, italics for emphasis (not ALL
• CAPS)
• Only links should be underlined
• High contrast with background
• Align left

20
Well-organized information

• Leave plenty of white space
• Do not crowd, clutter, or be text-heavy
• Is easily interpreted or scanned
• Is chunked into bite-size pieces
• Presents one topic per screen or use menus
• Presents data in tables
• Use column formats to create interesting pages

21
Well-placed items?

• Important things go at the top and on the left.
• Top-left is prime real estate.
• Elements should line up.
• Show appropriate relationships between items.

22
Fonts can CLUTTER

• Dont use a lot of different type faces and sizes
  or colors of text. It can really make searching
  the information difficult
• Use color to highlight or draw attention
• For large rooms, do not use fonts smaller than 32
  pts
• Text must be readable
• 1-2 typefaces on a page
• 1-3 sizes maximum

23
Fonts

• Size
• Determine how the screen will be viewed
• As large as possible
• Most legible on screen
• Georgia
• Tahoma
• Verdana

24
Content HomePage

• Content
• Continually update
• Provide useful information
• Write for readability
• Write for scannability

25

• Dont force users to filter out unnecessary
  information.
• Outdated content can undermine the integrity of
  the rest of the site or message.
• People will begin to question the trustworthiness
  of information if language is over-hyped or
  showy.
• Keep Content Current

• ABC
• NBC

26

• HomePage
• Links are extremely critical
• Prefer text-based links
• Change color for visited links
• If there is a scroll, have links throughout the
  page

27
Graphics

• Are consistent with the overall theme
• Support and do not distract from the content
• Are easily interpreted

28

• Graphics/colors
• Need to control size (MB)
• Maximum color contrast best
• Use color for grouping information (Gestaldt)
• Animation
• Why?

29

• Provide good contrast with the text for
  readability
• For example
• Dark text on a pastel background or
• dark blue background with white text

30

• Color Blindness should be taken into
  consideration
• Avoid red lettering
• Use video and audio sparingly
• Place images above or below fold
• Cultural colors may differ

31
Color Contrasts?
Dark Background
Dark Background
32
Animation

• Are consistent with the overall theme
• Support and do not distract from the content
• Are easily interpreted

33

• Health Hazards of Tabacco