Internet applications web authoring and publishing
Download
1 / 14

Internet Applications - PowerPoint PPT Presentation


  • 370 Views
  • Updated On :

Internet Applications Web Authoring and Publishing CSS Media & PDA Web Sites 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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Internet Applications' - liam


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Internet applications web authoring and publishing l.jpg

Internet ApplicationsWeb Authoring and Publishing

CSS Media & PDA Web Sites


Css media pda web sites l.jpg
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

CSS Media & PDA Web Sites


Media types l.jpg
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.

CSS Media & PDA Web Sites


Problem with printing l.jpg
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. You’ll find that the article takes up more paper than necessary and it isn’t formatted for print readability.

CSS Media & PDA Web Sites


Printing online articles problems l.jpg
Printing Online Articles:Problems

  • 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

CSS Media & PDA Web Sites


Printing using css media l.jpg
Printing Using CSS Media

  • You can make two different CSS files for one page—one 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 media=“screen” and the other will have media=“print”.

CSS Media & PDA Web Sites


Key differences l.jpg

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

Key Differences

CSS Media & PDA Web Sites


Hiding elements for printing l.jpg
Hiding Elements for Printing

body { font-family: times, serif; color: black;}

#navigation_menu { display: none;}

.bannerad { display: none;}

a:link, a:visited { 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 media=“print” attribute in the link tag.

CSS Media & PDA Web Sites


Other media types l.jpg

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.

Other Media Types

CSS Media & PDA Web Sites


Opera browser small screen l.jpg
Opera Browser Small Screen

CSS Media & PDA Web Sites


View small screen in opera l.jpg
View Small Screen in Opera

  • While viewing a web page in the Opera browser, use

    • View – Small screen

    • Shift+F11

  • Changes the display for testing.

    • Emulates the display of a web page rendered in Opera on a handheld device.

CSS Media & PDA Web Sites


News report opera browser l.jpg
News Report – Opera Browser

  • Opera is going after the handheld browser market.

    • Click to play 

http://www.opera.com/press/tvclips/en/2004/2004JimJackson/opera-ssr.mpg

CSS Media & PDA Web Sites


Pda friendly web sites l.jpg
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 you’re using and load the right page.

CSS Media & PDA Web Sites


Online resources l.jpg
Online Resources

  • http://www.alistapart.com/articles/goingtoprint/

  • http://www.meyerweb.com/eric/articles/webrev/200001.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/

CSS Media & PDA Web Sites


ad