1 / 14

Internet Applications Web Authoring and Publishing

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.

liam
Download Presentation

Internet Applications Web Authoring and Publishing

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 CSS Media & PDA Web Sites

  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. CSS Media & PDA Web Sites

  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. 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

  5. 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

  6. 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

  7. 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

  8. 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

  9. 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

  10. Opera Browser Small Screen CSS Media & PDA Web Sites

  11. 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

  12. 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

  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 you’re using and load the right page. CSS Media & PDA Web Sites

  14. 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

More Related