Internet Applications Web Authoring and Publishing

1
Internet ApplicationsWeb Authoring and Publishing

• CSS Media PDA Web Sites

2
CSS Media PDA Web Sites
The most critical role of the homepage is to
communicate what the company is, the value the
site offers over the competition and the physical
world, and the products or services
offered. Homepage Usability, Nielsen Tahir
3
Media Types

• Remember one of the key benefits of CSS is to
  remove the embedded formatting of HTML elements.
• This means that your web page will be made up of
  basic HTML elements.
• This means that you can quickly change the
  look/formatting of your page by changing the CSS.
• This means you can change the look/formatting of
  your page depending on the tools used to view it.

4
Problem with Printing

• A person viewing your web page on a computer
  screen has different needs than a person viewing
  your web page in printed format.
• Example Go to www.cnn.com and print preview the
  top news story. Youll find that the article
  takes up more paper than necessary and it isnt
  formatted for print readability.

5
Printing Online ArticlesProblems

• A two-page article will take up four or more
  pages
• Navigation menus and other unrelated links are
  printed with the article
• Online advertisements are printed
• Online font is used for printed article

6
Printing Using CSS Media

• You can make two different CSS files for one
  pageone format for the screen and the other for
  print.
• Use two different link tags in the head section
  of your web page.
• One link tag will have mediascreen and the
  other will have mediaprint.

7
Key Differences

• For Screen
• use sans-serif fonts
• make links stand out
• display banners/ads
• provide obvious navigation menus
• Use colors and images to direct users attention

• For Print
• use serif fonts
• make links look like regular text
• hide banners and ads
• hide navigation menus

8
Hiding Elements for Printing

• body font-family times, serif color
  black
• navigation_menu display none
• .bannerad display none
• alink, avisited color 000000
  background-color transparent text-decoration
  none

This CSS code would go into a different css file
and be called to format with the mediaprint
attribute in the link tag.
9
Other Media Types

• all
• aural
• braille
• embossed
• handheld
• print
• projection
• screen
• tty
• tv

• Browser support for many of these media types is
  spotty.
• Testing the display of the page in different
  media using different browsers is important.
• Popularity indicates that screen, print, and
  handheld should be designed for.

10
Opera Browser Small Screen
11
View Small Screen in Opera

• While viewing a web page in the Opera browser,
  use
• View Small screen
• ShiftF11
• Changes the display for testing.
• Emulates the display of a web page rendered in
  Opera on a handheld device.

12
News Report Opera Browser

• Opera is going after the handheld browser market.
• Click to play ?

http//www.opera.com/press/tvclips/en/2004/2004Jim
Jackson/opera-ssr.mpg
13
PDA-Friendly Web Sites

• http//palm.moviefone.com/
• http//mobile.theonion.com/
• Amazon.com long URL
• http//www.google.com/palm
• http//www.m-w.com/palm.htm
• http//sports.espn.go.com/espn/wireless/palm/

• Many of the big sites have handheld versions.
• Some have separate URLs that must be learned and
  bookmarked, others use scripts that sniff for
  the type of device youre using and load the
  right page.

14
Online Resources

• http//www.alistapart.com/articles/goingtoprint/
• http//www.meyerweb.com/eric/articles/webrev/20000
  1.html
• http//www.w3.org/TR/REC-CSS2/media.html
• http//www.alistapart.com/articles/pocket/
• http//my.opera.com/community/dev/device/
• http//pocketpcmag.com/